JASoft.org

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

MENÚ - JASoft: JM Alarcón

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]

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]

Mostrando notificaciones desde el navegador con HTML5

    ATENCIÓN Este post lo he actualizado y ahora tienes una biblioteca específica Open Source en Github para ayudarte a sacar partido a las notificaciones de los navegadores. Pulsa aquí para acceder. Los navegadores son, cada vez más, los sistemas operativos modernos. A lo que me refiero es a que la mayoría de las aplicaciones que usamos en el día a día residen cada vez más en el navegador y menos en aplicaciones específicas en el escritorio. Por ello, desde HTML5 tenemos que poder hacer más cosas que tradicionalmente eran coto exclusivo de las aplicaciones de escritorio. Una de ellas es la posibilidad de enviar notificaciones ante ciertos eventos: Chrome Firefox Gracias a la API de notificaciones de HTML5 es posible conseguirlo, aunque tiene sus detalles que debemos controlar. Actualmente Internet Explorer es el único navegador que no soporta la API de notificaciones de HTML5, ... [Más]

Después de las media queries llegan las feature queries en CSS3

Si alguna vez has utilizado Modernizr sabrás que esta biblioteca de JavaScript te permite determinar qué características soporta un navegador y cuáles no, tanto mediante código como mediante CSS (gracias a unas clases que añade a tu página por código). La verdad es que Modernizr está muy bien, pero añade complejidad a las páginas y puede afectar al rendimiento ya que debe procesarse antes de poder aplicar las correcciones apropiadas. ¿No sería estupendo que pudiésemos hacer este tipo de comprobaciones directamente con reglas CSS? Al igual que CSS3 nos trajo las media queries para poder hacer consultas sobre el medio en el que se visualiza una página, introdujo también las “CSS feature queries” que se consiguen mediante el uso de la palabra clave @supports en las reglas CSS. Del mismo modo que las media queries usan regiones de tipo @media para agrupar reglas qu... [Más]

Utilizando la API de pantalla completa en todos los navegadores

Nota: He estado un poco “missing” desde hace un tiempo, casi un mes, entre otras muchas cosas por que he estado muy involucrado en el lanzamiento de nuestra zona de recursos para programadores en campusMVP.es. En ella encontrarás muchas cosas interesantes para programadores, sobre todo los que se inician, y podrás encontrar trucos, conceptos de base, vídeos prácticos, noticias, y mucho más. Añádelo a favoritos :-) Ahora, para compensar, un artículo bastante a fondo sobre un tema muy interesante... ;-) De toda la vida estamos acostumbrados a que, cuando visualizamos un vídeo, tengamos la opción de verlo a pantalla completa, para poder apreciar todos los detalles y verlo en alta definición. En lo que no se fijaba casi nadie es en que, hasta hace relativamente poco, todos esos visores de vídeo estaban basados en Flash y en menor medida en Silverlight, y esa capacidad de verse a toda pantalla... [Más]

Evitar parpadeo de color blanco mientras carga un marco interno en una página HTML

Hoy un truco rápido pero interesante. Si tienes una página HTML en la que debes incluir un marco interno que muestra recursos de otras páginas lo normal es que simplemente insertes el iframe y punto. Por ejemplo <iframe src=“/modulo/OtraPagina.aspx” style=”width:100%;height:30px;”> Lo malo de hacer esto es que el contenido del marco lógicamente comienza a cargar más tarde que el de la propia página, y por regla general observamos durante una fracción de segundo (o puede que más si la carga es lenta) un espacio en blanco en donde va a estar situado el nuevo contenido. Si el fondo de la página principal no es blanco se notará un montón y producirá una especie de “parpadeo” que se notará, puede resultar molesto y además queda poco profesional. Un primer intento que podemos hacer para solucionarlo es cambiar el color del fondo del marco para que coincida con el fondo de la página. Pero no funcionará porque lo que tenemos dentro del marco es un nuevo documento HTML... [Más]