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]

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]

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]

TRUCO: Reproducir automáticamente un vídeo HTML5 desde un determinado punto

Para reproducir un vídeo (o audio) de forma nativa desde una página Web lo único que tenemos que hacer es usar una etiqueta <video>, y si el elemento multimedia está en un formato apropiado se reproducirá sin problemas: <video src="miVideo.mp4" autoplay controls> </video> Esto es solo rascar la superficie, pero lo pongo solo para situarnos.Si necesitamos reproducir el archivo, no desde el principio sino desde una posición posterior, normalmente deberíamos recurrir a un poco de código JavaScript para establecer el punto actual con la propiedad currentTime del objeto correspondiente.Lo que ya no es tan conocido es que en la mayor parte de los navegadores (todos excepto Internet Explorer), es posible conseguir ese efecto simplemente añadiendo un parámetro a la URL que indica dónde está almacenado el vídeo. Este parámetro es #t=. Por ejemplo, si el vídeo anterior lo incluimos de esta manera:<video src="miVideo.mp4#t=90" autoplay controls> </video> El ví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]

Gorroneando OneDrive: Cómo embeber un vídeo desde OneDrive en una página propia

A raíz de un artículo que escribí hace ya un tiempo en el que explicaba cómo crear enlaces de descarga directa para archivos de Google Drive o de OneDrive, un lector me preguntaba si se podría utilizar alguna técnica similar para poder embeber vídeos subidos a OneDrive en una página propia, albergada fuera de los servidores de Microsoft. Me decía que si ponía una etiqueta iframe apuntando a la URL que yo indicaba cómo generar, que se mostraba la páginad e OneDrive, pero no se veía el vídeo. Claro, lógicamente, porque si haces eso estás simplemente enlazando con la página de OneDrive que visualiza el vídeo, pero no estás visualizando el vídeo en sí. En OneDrive, al seleccionar un archivo de tipo Office (Excel, Word o PowerPoint), una de las opciones que te proporciona, aparte de compartirlo, es embeberlo. Por ejemplo, en esta imagen tengo s... [Más]