JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Reaccionar a Media Queries desde JavaScript

Hoy en día casi no se concibe una página o aplicación web que no sea Responsive. El Responsive Web Design busca crear diseños web que se adapten de manera automática a diferentes tamaños y resoluciones de pantalla. De esta manera en lugar de tener un diseño diferente para cada tamaño de pantalla (¡o incluso una versión diferente de la interfaz para cada dispositivo!), se busca que un solo diseño, refinado de manera inteligente, sirva para todos los tamaños. El nombre viene de que el diseño "responde" de manera automática a las diferentes condiciones del entorno de la página, adaptándose automáticamente y en tiempo real a los cambios de tamaño que haya. Puedes verlo en acción si visitas, por ejemplo, la página de campusMVP. Si la abres en una ventana aparte y cambias el tamaño de ésta (el ancho fundamentalmente) verás que a medi... [Más]

CSS: Tamaños relativos de fuente según la resolución

Hasta hace unos años la mayor parte del mundo conectado salía a Internet a través de un ordenador personal. Por ello bastaba con tener controladas las dos o tres resoluciones de pantalla más habituales para que una página o una aplicación web se comportaran de la manera esperada. Por aquel entonces las resoluciones más comunes eran: 800x600 (sí, increíble pero cierto, ahora ni los teléfonos tienen algo tan bajo), 1024x768 y si acaso 1280x1024 los afortunados que tenían monitores grandes.Con la llegada del iPhone en 2007 y posteriormente del iPad en 2010, la cosa cambió para siempre. Actualmente debemos considerar diseños y distribuciones válidos para muchísimas resoluciones diferentes y la variedad es inmensa. La gente se conecta a través de móviles con diversas resoluciones y densidades de pantalla en sentido vertical u horizontal, tabletas que según su precio y prestaciones pueden variar mucho las dimensiones de visualización, ordenadores con pantallas 16:9 o monitores Full-HD, orden... [Más]

El mejor sitio para colocar mis scripts: ¿Cabecera, cuerpo, carga asíncrona o carga diferida?

Aunque una cuestión como esta (¿dónde coloco una etiqueta en una página?) puede parecer carente de sentido a simple vista, no lo es si pensamos en la enorme cantidad de scripts que se cargan hoy en día en algunas aplicaciones, y en especial en las aplicaciones de tipo Single Page Application (SPA). Por ejemplo, observa los scripts que carga inicialmente una SPA como es GMail y que además está súper-optimizada por parte de Google: Pulsa para aumentar Como vemos son en total 31 scripts que pesan casi 2MB entre todos, y tardan un tiempo considerable en cargar. Y eso sin contar los scripts que van embebidos en la propia página y que por lo tanto no se cargan de forma externa. Así pues, ante tanto script y con semejante tamaño: ¿En qué parte de una página es mejor colocar los scripts? El procesamiento de los elementos de una página Si analizamos cómo carga una página... [Más]

Rutas absolutas independientes del protocolo en HTML

Básicamente tenemos dos maneras de designar URLs en una página web, sea para enlaces, referencias a archivos como scripts y hojas de estilo, etc...: De manera relativa: apuntando a archivos del propio sitio web. Se pueden poner rutas que partan del raíz (/) o que suban en el árbol (../). Más info sobre algunas sutilezas en el caso de archivos CSS. De manera absoluta: en este caso metemos la ruta completa a un recurso, en otro dominio o en el propio. Algo así por ejemplo: <script type="text/javascript" src="http://www.jasoft.org/scripts/miScript.js"><\script> Bien, por regla general esto tan sencillo es lo único que debe preocuparnos. Sin embargo existen varios casos en el que las rutas de carácter absoluto, expresadas de la manera habitual, nos pueden dar problemas: Si hemos creado un script (o un recurso: CSS, gráficos...) que va a ser utilizado por otros sitios web sobre los que no tenemos control.... [Más]

Escribiendo código JavaScript limpio: funciones anónimas auto-ejecutables

Un patrón muy utilizado a la hora de escribir código JavaScript son las funciones anónimas auto-ejecutables. La idea es la siguiente: aprovechar las propiedades de ámbito de las variables de JavaScript y el uso de clausuras para escribir código más limpio que no interfiera con otro código JavaScript que pudiera haber en la página. De hecho es la técnica que utilizan muchas de las bibliotecas importantes para inicializarse. Por ejemplo, consideremos el siguiente fragmento de código JavaScript: var v1 = 0; function miFunc1(){ v1 = 5; alert(v1); } function miFunc2(){ v1 = 10; alert(v1); } En este código tan sencillo estamos definiendo una variable y dos funciones. Dado que desde ambas funciones debemos poder acceder a la misma variable común "x", la declaramos de manera global, siendo accesible desde toda la página. Este código, si bien funcionará correctamente, tiene varios problemas, entre los que cabe destacar los dos siguientes: La variable, sien... [Más]

Cómo listar todos los sitios web y sus dominios en un servidor IIS

Si tenemos que administrar uno o varios servidores web, hay ocasiones en las que necesitaremos inventariar de manera rápida y sencilla qué sitios web y dominios tenemos albergados en nuestras máquinas. Obviamente una forma sencilla de verlo es ir a través del administrador de Internet Information Server y ver qué sitios tenemos allí. Pero el problema de eso es que no podemos manipular la lista de manera alguna y, sobre todo, no nos da una idea clara de qué dominios tenemos asociados a cada sitio web, salvo que vayamos entrando uno a uno a comprobarlos. Sería de mucha utilidad poder listar toda esta información de manera automática y rápida siempre que lo necesitemos. Por suerte para nosotros, IIS en todas sus versiones os ofrece una manera sencilla de hacerlo. Veamos cómo... Listado de sitios y dominios en IIS 6 En Internet Information Server 6 se incluían unas herramientas de línea de comandos escritas en VBScript que nos permiten gestionar de mil maneras el servidor. Una de ell... [Más]

Off-Topic: Nuevo curso de programación profesional con JavaScript

Los que seguís con asiduidad este blog habréis notado que he estado un poco ausente durante las últimas semanas. Aparte de que he estado creando mucho material para nuestro blog para programadores de campusMVP, el principal motivo ha sido que durante los meses de verano y hasta finales de la semana pasada he estado trabajando duramente en crear un nuevo curso para campusMVP: JavaScript profesional para desarrolladores y diseñadores web Ha sido un trabajo bastante duro a pesar de que ya he escrito varios libros sobre el tema, principalmente porque he tratado de crear un curso muy práctico, y al mismo tiempo que sirviera para el mayor número de programadores posible. Para ello, aparte de la teoría correspondiente (que es mucha) he grabado más de 13 horas de vídeos prácticos y muchos ejemplos Esto que puede parecer relativamente poco, es mucho para un curso como este que tiene además gran cantidad de material teórico escrito (que también es muy necesario). Y es que además, entre preparaci... [Más]

Desempaquetando el impresionante "phablet" Nokia Lumia 1520

Tras año y medio con mi Nokia Lumia 920 me he decidido a cambiarlo por un nuevo e impresionante Nokia Lumia 1520. Estaba muy contento con mi 920, pero quería cambiar porque mi terminal era una versión temprana del modelo, y tenía un fallo de sellado en el hardware que no tuvo posteriormente el modelo definitivo. En concreto el problema es que se colaba polvo a través del cierre superior llenando de porquería la cámara frontal y, sobre todo, el sensor de proximidad. Debido a ello el teléfono siempre "creía" que estaba dentro de un bolsillo por lo que no se mostraba la información de la Glance Screen y la pantalla estaba apagada durante las llamadas aunque no la pegaras a la oreja. Un fastidio. Además me apetecía un móvil más grande (y eso que el 920 con 4.5'' de pantalla me parecía enorme cuando lo recibí) y con procesador más rápido, sobre todo por aplicaciones poco optimizadas como Whatsapp. Total que al final he comprado un Lumia 1520, de color blanco para ser más exactos. ¿Por ... [Más]

Música en Windows Phone 8.1: sin ningún problema

Nota: Este artículo es una actualización de otro que escribí hace año y medio, cuando Windows Phone y sus aplicaciones de múscia no estaban todavía al nivel que debieran para poder competir con otros terminales del mercado. Las cosas han cambiado mucho, y ahora ya no tiene demasiado que envidiar a otras plataformas. Una de las funciones principales para mi en un teléfono, junto con la cámara, es la de poder oír música. Antes de nada he de comentar mis necesidades particulares en lo que a música en un móvil se refiere, que puede que no coincidan para nada con las tuyas, en cuyo caso tu experiencia puede variar sustancialmente respecto a la mía: Música off-line: El motivo es que solo suelo escuchar música en mis ratos libres lejos del ordenador, y mientras estoy en transporte, es decir, de casa al trabajo en el coche, en los aviones, etc… En mis (escasas) vacaciones procu... [Más]

Uso de condiciones complejas en instrucciones switch de JavaScript (y otros lenguajes)

La instrucción switch en JavaScript nos permite tomar decisiones a partir de una lista de posibles valores que se compraran con una variable. Por ejemplo, si tenemos una variable "x" y queremos realizar una acción en función del valor que tenga ésta, escribiremos esto: switch (x) {   case 0:      //Acción para el 0      break;   case 1:      //Acción para el 1      break;   case 2:      //Acción para el 2      break;    ........   default:      //Acción por defecto} Esta instrucción de control de flujo nos evita tener que crear multitud de condicionales if-then anidados para conseguir el mismo efecto. Así, podemos poner cada uno de los valores posibles y realizar las acciones pertinent... [Más]