JASoft.org

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

MENÚ - JASoft: JM Alarcón

¿Es necesario cerrar todas las etiquetas en HTML5?

Puede parecer una pregunta tonta, pero tiene más "miga" de la que parece.Hace ya unos cuantos años, cuando vio la luz la anterior versión de HTML, "lo más de lo más" por aquel entonces era el lenguaje XML. Estábamos en los tiempos de apogeo de las APIs SOAP, los archivos de configuración basados en XML y hasta las bases de datos basadas en este formato. Teníamos este lenguaje de marcas hasta en la sopa, vamos. A la versión de HTML gestada en aquella época se le llamó, como no, XHTML (de XML Hyper-Text Markup Language). Una de los características de XML es que todas las etiquetas sin excepción se deben cerrar. Esto suponía un pequeño problema con algunas etiquetas de HTML que no necesitan contener a otros elementos, como por ejemplo las imágenes (<img>) o los cambios de línea (<br>), por citar dos de los más comunes. Así que para poder cumplir con la sintaxis de XHTML todas estas etiquetas se auto-cerraban poniéndoles una barra antes del cierre, por ejemplo: <img src="Im... [Más]

Precarga y renderizado de páginas y recursos para mejorar el rendimiento de navegación

Existen multitud de técnicas para mejorar el rendimiento de las páginas web y conseguir mejores tiempos de respuesta, aunque la mayor parte de estas mejoras se deben realizar en el servidor. Sin embargo existen algunas cosas que podemos hacer desde el propio código HTML, en el Front-End y sin la intervención del servidor, para mejorar la velocidad de carga de las páginas siguientes a la actual y que creo que no son muy conocidas por la comunidad de desarrolladores. Imagina la siguiente situación: tienes una presentación basada en HTML en la que el usuario se va moviendo hacia adelante para ir visualizando una serie de recursos. Cada pulsación del botón "adelante" hace que se cargue un nuevo recurso. El caso típico es un carrusel de imágenes en el que, cada vez que pulsas en el botón de "adelante" se carga la siguiente imagen que haya en la lista. Si las imágenes son grandes, con mucha resolución, no están muy optimizadas o simplemente la conexión es lenta, es posible que tarden en c... [Más]

HTML y CSS: El "extraño" comportamiento de las cajas anidadas

Un concepto que todo programador Web debe tener claro es el modo de visualización CSS de los elementos. Es indispensable ya que condiciona por completo el comportamiento de los elementos HTML dentro de una página. Otro comportamiento que es importante tener claro es todo lo que se refiere con el derrumbamiento de márgenes verticales de los elementos. Éste hace que los márgenes verticales no se sumen, sino que se combinen, aunque no en todas las circunstancias. Un caso "extraño" se da cuando tenemos en una página elementos anidados, es decir, cuando uno o varios elementos están contenidos dentro de otros. Por ejemplo, consideremos esta página tan sencilla con dos elementos de tipo
, uno dentro de otro... [Más]

La manera correcta de añadir y quitar clases CSS a elementos mediante JavaScript puro

Cómo evitar el uso de jQuery para tareas sencillas de manipulación de clases CSS en páginas web...

Se explica:
- Cómo localizar elementos que tienen una determinada clase (o varias) aplicadas.
- Cómo quitar clases
- Cómo añadir clases
- Cómo alternar clases
- Cómo comprobar si un elemento tiene aplicada o no una determinada clase
- Cómo dar soporte a navegadores muy antiguos

tanto en jQuery como en JavaScript puro. [Más]

Detectar la aparición y desaparición de un elemento: evento "inViewport"

Una cuestión que puede resultar muy útil en una página o aplicación web es la posibilidad de detectar cuándo aparece o desaparece de la pantalla un elemento determinado debido a las acciones del usuario. Por ejemplo, si desaparece una pieza de información importante porque el usuario hace scroll moviendo los contenidos, podemos sacar una nota resumen, recordatorio o acceso directo para ir verla de nuevo, y ocultarlo de nuevo cuando vuelva a aparecer. Cosas por el estilo.Para conseguir algo así nos vendría muy bien disponer de un evento inViewport o similar que nos informase de cuándo un elemento aparece o desaparece de la parte visible de la página. Nos suscribiríamos a este evento y recibiríamos automáticamente notificaciones si el elemento aparece o desaparece.El problema es que no existe ningún evento como este en HTML/JavaScript.No nos queda más remedio que buscarnos la vida para poder disponer de una funcionalidad similar a esta. En este artículo vamos a desarrollar desde ce... [Más]

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]