JASoft.org

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

MENÚ - JASoft: JM Alarcón

Módulo para notificaciones web desde el navegador con HTML5

Estos días he estado creando un módulo JavaScript para facilitar el uso de las notificaciones del navegador usando la API estándar "Web Notifications" del World Wide Web Consortium (W3C). La idea es poder mostrar notificaciones nativas al usuario (de las que aparecen al lado del reloj en Windows, por ejemplo) pero desde aplicaciones web. Por ejemplo, cuando llega un nuevo correo (como hace GMail), o cualquier otra circunstancia que necesitemos notificar en segundo plano al usuario, pero desde el navegador. Actualmente el único navegador que NO las soporta es Internet Explorer / Edge, y no parece que tengan intención de soportarlas tampoco, pero en todos los demás funcionarán sin problemas. En su día escribí un artículo explicando con detalle cómo utilizarlas "a pelo", sin usar ninguna biblioteca intermedia. Esto es una especie de continuación. Lo que he hecho es crear una biblioteca que, en mi opini&... [Más]

Uso selectivo de dependencias en módulos con RequireJS

La configuración de RequireJS ofrece muchas posibilidades para hacer gran cantidad de cosas útiles. La semana pasada, por ejemplo, os contaba cómo forzar la descarga de todos los scripts/módulos de una página inhabilitando la caché gracias a un parámetro añadido automáticamente a todas las peticiones.En esta ocasión me voy a fijar en otro parámetro interesante llamado map. La función de este parámetro es "mapear" ciertos módulos de manera especial cuando sean dependencias de otros módulos.Por ejemplo, imagínate que tienes que usar dos versiones del mismo módulo (digamos jQuery), pero quieres usar una en particular para un determinado módulo que depende de ella, y la otra para otro módulo diferente.Supongamos que tenemos una estructura de archivos como esta:- modulo1.js - modulo2.js - libs/ - jquery1.11.2.js - jquery2.1.3.js Es decir, dos módulos en la raíz de la carpeta de scripts, y una subcarpeta "libs" con las dos versiones de jQuery. Imaginemos ahora que el módulo núme... [Más]

Forzar siempre la descarga (sin caché) cuando usas RequireJS en aplicaciones JavaScript

Imagina la siguiente situación, bastante común por otro lado: Estás desarrollando una aplicación JavaScript (generalmente de tipo Single Page Application), y utilizas la biblioteca require.js para realizar la modularización de la misma en lado cliente. Vas tocando tu código JavaScript y probándolo y depurándolo en diferentes navegadores. Eso implica lanzarlos con bastante frecuencia, albergando tu aplicación en un servidor web local para probar la aplicación. El problema surge porque el servidor web hace caché de los archivos estáticos (como son los .js) por lo que cada vez que cambias algo en un script, aunque refresques la página, no siempre vienen los cambios que has realizado. Esto puede conducir a grandes frustraciones porque a veces cambias un carácter o una línea, crees que estás probando esa última versión, pero en realidad estás trabajando toda... [Más]

Error al descargar archivos JSON con IIS Express

Visual Studio es una herramienta sensacional para hacer desarrollo web, y más actualmente gracias a la disponibilidad de la Visual Studio Community Edition, que permite instalar cuantos plug-ins y extensiones queramos, entre ellos Web Essentials. El caso es que para desarrollar con Visual Studio utilizamos normalmente Internet Information Server Express (IIS Express), que es el núcleo de IIS a nuestra disposición para lanzarlo bajo demanda y servir nuestras webs y aplicaciones. El problema con IIS es que trae una determinada configuración por defecto que, aunque es válida para la mayor parte de los casos, no nos sirve siempre y hay que aprender a ajustarla. Uno de estos casos, muy habitual, es no tener configurado un determinado tipo MIME. Básicamente un tipo MIME define la manera de transmitir un archivo mediante el protocolo HTTP, de modo que en el otro extremo (el navegador) sepa qué tipo de información le viene y c&oacut... [Más]

El problema de los IDs duplicados en HTML

Esto es lo que dice la especificación de HTML5 respecto a los identificadores de elementos HTML en una página (traduzco): El valor (del ID) debe ser único entre todos los IDs en el sub-árbol raíz del elemento, y debe contener al menos una letra. El valor no puede contener espacio alguno. El quid de la cuestión aquí es ¿qué es eso de "sub-árbol raíz"?. Bueno, pues yendo de nuevo a la especificación lo que dice es: El sub-árbol raíz de un nodo es el sub-árbol cuya raíz es el nodo raíz del elemento. Cuando un nodo está en un documento, su sub-árbol raíz es el árbol de ese documento. Esto parece un trabalenguas y, para ser sinceros, no lo deja nada claro. Pero si sigues leyendo, acabas por llegar a lo importante, que en lo que nos ocupa viene siendo que en una página web hecha con HTML el sub-árbol raíz de cualquier elemento dentro de la página es el documento. Es decir, en la práctica todo esto lo que quiere decir es que para cualquier elemento de una página web HTM... [Más]

La API de visibilidad de HTML5 - Cómo detectar si una página está visible o no

Una cuestión peliaguda de resolver por medios tradicionales es la que encabeza este artículo: ¿Cómo puedo detectar si el usuario actual tiene nuestra página oculta o visible?. Esto nos puede servir para muchas cosas, como por ejemplo: Dejar de hacer llamadas en segundo plano al servidor para obtener datos cuando el usuario no esté usando la aplicación web, ya que no habrá nadie para verlos. Así que nos ahorraremos carga innecesaria nuestros servicios. Típico en aplicaciones que utilizan AJAX. Si el usuario está reproduciendo un vídeo o cualquier otro elemento (por ejemplo, una presentación), podemos detenerlo mientras no está mirando, dejando que continúe automáticamente cuando el usuario vuelva a la página. En una aplicación de email, cuando el usuario esté mirando la página podemos verificar si hay nuevos correos cada pocos segundos. Si no ... [Más]

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]

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, tie... [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]