JASoft.org

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

MENÚ - JASoft: JM Alarcón

TRUCO: Hacer "bundling" de archivos JavaScript o CSS sin necesidad de herramientas externas

Este es un truco rápido pero muy útil para programadores Front-End que trabajan con HTML, CSS y JavaScript.Como todo el mundo sabe (o debería saber), con HTTP 1.1 cada petición que se envía al servidor añade "peso" a la carga total de la página porque se debe abrir una nueva conexión, se deben enviar las cabeceras y recibirlas, hay un máximo de conexiones abiertas a la vez, etc... Por ello, si la página incluye por ejemplo 10 archivos .css que en conjunto pesan 250KB, su descarga va a tardar más que si descargásemos ese mismo contenido exactamente, con el mismo peso, pero en un solo archivo .css.Esto no ocurre con la nueva versión HTTP 2, pero no siempre está disponible todavía.Como en una aplicación o en una página web cada milisegundo cuenta, se suelen utilizar dos técnicas habitualmente para disminuir el efecto de tener varios archivos y disminuir su peso:"Bundling" o empaquetamiento: consiste en combinar varios archivos dentro de uno solo para que, aunque ocupen lo mismo, puedan de... [Más]

Precedencia de codificaciones en una página web

En informática existen muchas maneras diferentes de representar texto, de modo que pueda representar diversos conjuntos de caracteres, ideogramas y símbolos.Al principio todo era muy sencillo, pero poco útil. Los estadounidenses desarrollaron la informática y, como no, la hicieron totalmente "anglocéntrica" desarrollando el conjunto de caracteres ASCII (American Standard Code for Information Interchange). ASCII era capaz de representar 128 caracteres diferentes del alfabeto anglosajón. Por lo tanto no había ni tildes, ni "eñes" ni por supuesto caracteres cirílicos, ideogramas japoneses, etc...En la actualidad existen infinidad de maneras de codificar los caracteres para almacenarlos, transmitirlos y mostrarlos en un sistema informático. El más común y utilizado en el mundo es UTF-8 (Unicode transformation Format-8). UTF-8 es capaz de codificar millones de caracteres diferentes y dispone de todos los símbolos usados en lenguajes humanos, además de otro tipo de representaciones (como emo... [Más]

HTML: Sobre idiomas de contenido, traducciones y cómo controlar todo esto

El inglés es el idioma más hablado del mundo, la lingua franca que todos usamos para viajar y hacer negocios en todo el mundo. Es como el Arameo en tiempos de Jesucristo, vamos. No hablarlo o entenderlo al menos al leerlo es una gran barrera para multitud de puestos de trabajo y en especial para los programadores y demás técnicos, ya que la mayor parte de los documentos están en este idioma, siendo predominantes las empresas estadounidenses en el mundo del software y el hardware, y adoptando este idioma todas las empresas que se quieren internacionalizar.Por suerte, aunque no lo entiendas, la propia Internet te ofrece la solución en forma de traductores on-line, el más utilizado de los cuales es Google Translator. Permiten traducir entre varias decenas de idiomas permitiéndonos, por ejemplo, leer una página en Chino traduciéndola por completo al español o al inglés en unos instantes. Las traducciones aún dejan bastante que desear en muchos casos (ver figuras varias en este artículo com... [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]

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

En el caso concreto de las páginas web hay que tratar de que nuestros contenidos y diseños se adapten sin problema a cualquier resolución, densidad y tamaño. Y dentro de esta problemática una cuestión importante es ofrecer en cada caso un tamaño de texto apropiado. No sirve tener un texto de tamaño muy grande en resoluciones pequeñas, ni uno muy pequeño en resoluciones grandes. En cada caso hay que encontrar un tamaño apropiado y utilizarlo. ¿Cómo podemos conseguirlo? La mejor manera es utilizar dimensiones de carácter relativo en nuestros diseños web, y en concreto dos unidades especialmente pensadas para este problema: los "em" y los "rem". [Más]