Wextensible

Cómo se hace...

En esta sección incluiré todos aquellos temas que explican partes concretas de este sitio wextensible.com. A algunos de ellos también puede accederse mediante el uso del icono Icono engranaje.

Comentarios web

Incorporar una sección de comentarios en las páginas tiene como objetivo lograr la participación de los usuarios en cada tema. En principio necesitaremos un formulario en el navegador y un almácen de comentarios en el servidor. Este componente no es precisamente algo nuevo y existen soluciones de todo tipo para llevarlo a cabo.

He decidido implementar por mi cuenta un sistema de comentarios para observar todos los problemas que pueden originarse. Y el primero de ellos tiene que ver con la decisión de si hacerlo con un sistema de usuarios registrados o anónimos. También hemos de tener en cuenta como hacer el mantenimiento y gestión de los comentarios. Pues habrá que hacer un seguimiento de los mismos para responder, bloquear o eliminar comentarios que no sigan unas buenas normas de uso.

La Ley de Cookies

Consultando las cookies

La llamada Ley de cookies en España está vigente desde la aparición del Real Decreto-ley 13/2012, de 30 de marzo. La Agencia Española de Protección de Datos ha publicado una Guía sobre el uso de cookies con aspectos prácticos para la implementación. Se regula que una web podrá almacenar y recuperar datos del dispositivo del usuario siempre que éstos hayan dado su consentimiento y después de que se les haya facilitado información clara y completa sobre su utilización. Por lo tanto impone un deber de información y consentimiento para poder usar cookies y en general cualquier forma de almacenamiento de datos en el dispositivo del usuario.

Reglas PageSpeed

Web PageSpeed Insights

Hay diversas herramientas que podemos usar para medir la velocidad de carga de nuestras páginas web. PageSpeed es una de ellas que estoy usando habitualmente. Disponemos de una versión on-line y también una extensión para instalar en Chrome o Firefox. No son exactamente iguales, pero el uso de ambas nos permitirá adaptar nuestro sitio con el objetivo de alcanzar una puntuación 100/100. En estos dos temas expongo el conjunto de las 27 reglas de la extensión PageSpeed y otras 10 más de la versión on-line.

Actualizar versión página web

Tener implementada una caché web es imprescindible para mejorar la velocidad de carga de las páginas. El cacheado de los HTML será muy eficiente si cargamos siempre desde caché y hacemos una revalidación en segundo plano, algo que podemos denominar como revalidación desde caché. Aquí expongo como implementar un control de versiones para realizar una revalidación cuando cargue desde caché. El objetivo es ofrecer al usuario la posibilidad de actualizar la página cuando se produzcan modificaciones en el HTML y/o sus recursos CSS y JS asociados.

Botón para reponer ancho con JavaScript

Algunos usuarios tienen problemas al leer largas líneas de texto. Y en todo caso resulta incómodo de leer. Esto es un problema en los casos de presentación en ordenadores de sobremesa con monitores que suelen tener un ancho importante. Y aunque hay la posibilidad de redimensionar la ventana del navegador para reducir el ancho de línea, quizás lo recomendable es ofrecer de entrada un ancho adecuado. Por lo visto lo recomendable es tener en torno a 80 caracteres por línea y es lo que estoy ahora implementando en este sitio. Limitaré el ancho máximo de la página web con la propiedad CSS max-width y también la centraré en pantalla.

Vista en móvil 320px de la estructura minimalista

El layout o estructura de una página web es la composición de los distintos elementos de la página. A finales del año 2013 modifiqué la estructura anterior de este sitio para incorporar el concepto de estructura mínimalista. La idea es despojar del mayor número de elementos de la estructura que inicialmente se visualiza, pudiendo acceder al resto mediante la acción del usuario. El motivo principal es que tenemos que ajustar nuestras páginas a cualquier ancho de dispositivo, especialmente a los más estrechos.

La caché web

Caché web con Cache-Control y Last-Modified

La caché web almacena copias de los recursos de una página web en el navegador o en servidores proxy con el objeto de evitar las limitaciones de la latencia y el ancho de banda. Ambos conceptos inciden sobre la velocidad de carga de una página. Al obtener una página o partes de ella desde las copias almacenadas en el navegador (o proxy) evitamos gastar conexiones con el servidor de origen y el ancho de banda queda disponible para otras acciones. Las páginas se cargan más rápido, algo que los usuarios apreciarán. Y especialmente en móviles, donde las conexiones con el servidor son más lentas. Un beneficio adicional es que reducimos la carga de trabajo del servidor al disminuir el número de solicitudes.

Contenedor con varias filas de pestañas

El contenedor de pestañas con JavaScript lo hice hace ya tiempo. Es un componente que nos sirve para albergar mucho contenido en poco espacio de pantalla. A raíz de que me preguntaran si era posible incluir un contenedor de pestañas dentro de otro, puede comprobar que podía llevarse a cabo sin mucho esfuerzo. De paso aprovecho para actualizar ese componente con algunas mejoras y también ofrecer la posibilidad de contenedores con varias filas de pestañas como se muestra en la imagen adjunta.

Desbloquear CSS

Diagrama de flujo de carga de una web

Los recursos externos CSS pueden bloquear la carga de la página. Si estamos chequeando una página con alguna herramienta que mida el grado de cumplimiento de reglas de optimización podemos obtener mensajes como Elimine el CSS que bloquea la visualización del contenido de la mitad superior de la página o bien Priorice el contenido visible reduciendo el tamaño del contenido above-the-fold.

En estos temas comento un poco el proceso de renderizado de los navegadores y porque se producen los bloqueos CSS, observando la causa de los mensajes antes comentados. Como solución presento CSS-FOLD, una técnica para gestionar la carga del CSS del sitio. Todo el CSS será interno (o inline) y lo inyectamos con PHP y JavaScript de forma particularizada a cada página. Esto ya viene funcionando en este sitio desde hace un mes lo que me ha permitido alcanzar puntuaciones 100/100 en herramientas como Pagespeed Insights así como, por supuesto, observar una perceptible mejora de la velocidad de carga.

Comprimir web

Cabecera de compresión GZIP

Optimizar la velocidad de carga de nuestra web pasa necesariamente por comprimir los recursos recibidos en el navegador. El servidor Apache dispone de directivas como AddOutputFilter para conseguir este propósito. Pero a veces en alojamientos compartidos (como 1and1) no disponemos de esta utilidad o bien no sabemos como activarla. En estos casos podemos recurrir a PHP para comprimir la salida. Los archivos css y js se deben comprimir, pero hay que modificarles el Content-Type también con PHP. Esto lo podemos conseguir usando la facilidad de los scripts de pre-ejecución de PHP con la opción de configuración auto_prepend_file.

Formulario emergente
Un formulario emergente con botones aceptar y cancelar. Se incorporan botones +/- para aumentar o disminuir el tamaño de la fuente de texto.

En estos últimos meses he estado mejorando varios aspectos de este sitio para adaptarlo a móviles. El formulario emergente es un componente pop-up o ventana emergente, utilidad que en principio es poco aconsejable para dispositivos de menor tamaño. Pero si gestionamos las medidas del emergente antes de abrirlo para ajustarlo al ancho del dispositivo si podríamos seguir usándolo. Esa es una de las mejoras que ya he implementado, aunque es optativa y se lleva a cabo pasando un nuevo argumento ajustarAncho al constructor del formulario.

Otra utilidad es incorporar unos botones para subir y bajar el tamaño de la fuente de texto del formulario emergente. Si definimos las medidas en em's entonces el formularios se adaptará. Esto puede ser útil en dispositivos donde el ancho de pantalla nos puede obligar a reacondicionar el ancho de este componente.

También se mejora el comportamiento al abrir el formulario, pues antes de abrirlo se observa que su borde derecho o inferior no sobrepasen los de la pantalla, en cuyo caso se alineará su derecha (o inferior) con el borde derecho (o inferior) de la pantalla. Otro comportamiento mejorado tiene que ver con el redimensionamiento de la ventana del navegador, cerrándose en ese caso todos los formularios abiertos y evitando así que se reubiquen lejos del punto donde inicialmente estaban antes del redimensionamiento.

Ejecución y descarga de ejemplos con recursos integrados

Ejemplos integrados
Ejecutar y descargar ejemplos en línea.

En este sitio he procurado presentar un ejemplo en línea para mostrar la ejecución de algún aspecto. Pero esos ejemplos pueden hacer uso de recursos JavaScript y CSS de distintos archivos de este sitio. Para ofrecer esos ejemplos con todos los recursos integrados, es decir, todo el JavaScript y todo el CSS, si fuera el caso, en únicos archivos, ahora presento al inicio de cada tema que tenga estos ejemplos unos enlaces como los de esta captura de pantalla. Nos llevarán a una página para ejecutar esos ejemplos y también podremos descargar todos los recursos en un ZIP.

Menú contextual HTML 5.1 en Firefox 24
Menú contextual HTML 5.1 en Firefox 24

En Marzo 2013 implementé el script menu-context.js para agregar menús contextuales a una página web. Ahora he actualizado ese componente para adaptarlo a los eventos de toque (touch events) de los móviles. De forma alternativa a ese componente podemos usar el nuevo elemento <menu> que expone la especificación HTML 5.1 menús contextuales, con el que podemos agregar entradas de menú al menú contextual que por defecto nos sale en el navegador. Por ahora sólo lo implementa Firefox 24 incluso en su versión móvil. Dado lo fácil que resulta de usar podría ser preferible en lugar de utilizar un componente hecho a medida. Pero mientras el resto de navegadores no lo implementen, el script menu-context.js me seguirá siendo útil.

Teclado auxiliar para input type number
Con un teclado auxiliar en Firefox 24 podemos subir y bajar los valores numéricos de un input type number.

El elemento <input> en HTML5 tiene nuevos tipos de gran utilidad. Uno de ellos es el type number (tipo numérico) que ahora viene con los nuevos atributos min y max para controlar los valores mínimo y máximo que puede introducir el usuario. Otro nuevo atributo es step que es el paso de valor para cuando el navegador implementa unos botones para subir y bajar valores.

Pero algunos navegadores como Firefox 24 no implementan esos botones. Y en los navegadores móviles tampoco se observan. Además Android 4.2.2 tiene una deficiencia en el teclado numérico pues no acompaña teclas de punto decimal ni guion para números negativos. Para corregir ambas cosas he realizado un teclado auxiliar para los elementos input type number, como el que se muestra en la imagen adjunta.

Ajuste font bosting activado
Ajuste de texto automático en el navegador Chromium 18 que viene instalado con el móvil Samsung con Android 4.2.2

El font boosting, text autosizing, text inflating o text size adjust son términos que se aplican al algoritmo que ejecuta un ajuste automático de texto en los navegadores móviles. Pero no siempre nos interesa que este efecto se lleve a cabo, por lo que debemos saber cómo desactivarlo.

Emulador navegador móvil con Chrome

El navegador incluido en Android 2.x no aplica ningún mecanismo para acceder al contenido que sobresale en un elemento, ignorando totalmente la propiedad overflow. En este tema se expone una solución con JavaScript para paliar ese problema. Y de paso veremos algunos detalles relacionados como los eventos de toque (touch events) y los emuladores de navegadores móviles.

Menú contextual

Un menú contextual es una lista de acciones que aparecen en un contenedor emergente por encima del resto de contenidos de una aplicación. Suele activarse con el botón derecho del ratón y las acciones ofrecidas son seleccionadas según el contexto donde se haya activado. En inglés podemos encontrar términos como context menu, shortcut o pop-up menu.

En este tema se explica como usar el módulo menu-context.js parar construir objetos JavaScript e implementar uno o más menús contextuales en una página web.

Imprimir web

En este sitio aún no había configurado nada a la hora de imprimir. Realmente no es muy necesario pues ya casi nadie imprime una web. De todas formas en estos días he actualizado el contenedor de código resaltado incorporando una barra de botones con varias funciones. Una de ellas es la de imprimir ese trozo de página. En base a esto he realizado algunos cambios para poder imprimir una página o bien un trozo de ella. En el tema CSS 2.1 Medios paginados se expone algunas cosas que podemos hacer con CSS para configurar las páginas a la hora de imprimir. Usando la regla @media print podemos declarar estilos sólo para la salida impresa. Recordemos que cuando no se declara ningún medio se entiende que el estilo se aplica por defecto al medio screen, es decir, al medio visual.

sprite css

Mejorar la velocidad de carga de la web debería ser un objetivo prioritario. En un tema anterior hablé sobre optimizar la carga de los recursos. Un forma de llevar un seguimiento acerca de esta materia es usando PageSpeed. Tras minimizar el tamaño de los documentos ahora llevo a cabo la combinación de imágenes en objetos móviles CSS conocidos generalmente como sprites CSS.

En la gráfica adjunta puede ver la evolución de la página de inicio de este sitio en casi el último año. Cada fecha representa un momento de un cambio importante en los contenidos de mi página principal. En azul se representa el tamaño total de los recursos, es decir, HTML, JS, CSS y XHR. En rojo está el número de peticiones que hace el navegador solicitando esos recursos. A partir de cierta fecha incorporé imágenes con el texto en esa página de inicio por lo que ambos valores empezaron a crecer. El 8 de julio de 2012 minimicé los documentos HTML, JS y CSS, observándose como con un número similar de recursos (peticiones) y de contenidos, el tamaño bajó desde 363 KB a 255 KB (casi 30% de reducción). El pasado 7 de octubre implementé los Sprites CSS y el número de peticiones bajó desde 42 hasta 29 (reducción 31%) a pesar de mantener un contenido y tamaños similares entre ambas publicaciones. Reducir las peticiones es un aspecto a tener en cuenta, pues por muy pequeño que sea el recurso el navegador debe solicitarlo, bien al servidor o extraerlo desde una caché.

Una forma de reducir el número de peticiones es combinar varias imágenes en estos Sprites CSS. En este documento de Google Developers Combine images using CSS sprites nos habla sobre este tema.

selector de área y de polígono Cuando trabajamos en edición gráfica con el elemento <canvas> o con imágenes podemos necesitar un selector de áreas y/o polígonos. Por ejemplo, para dibujar un rectángulo en un Canvas podemos aplicar strokeRect(x,y,w,h), siendo x, y las posiciones izquierda y arriba en el plano mientras que w, h serán el ancho y alto de ese rectángulo. Una forma de indicar esas medidas es usando un selector que resalte una selección de área. Aunque también podemos hacer una selección de puntos de un polígono.

En resumen se trata de desarrollar el módulo JavaScript select-area.js que construye instancias de un objeto JavaScript llamado selectArea para gestionar un control selector de áreas y polígonos. El objeto construye todo lo necesario para manipular la selección mediante elementos HTML y SVG posicionados absolutamente y con los eventos de ratón mousedown, mousemove y mouseup. En el caso de áreas utiliza un elemento <div> mientras que el selector de polígonos se forma con elementos <div> para los puntos y con elementos <line> de SVG para las líneas.

En este tema se exponen dos ejemplos de uso de este objeto selectArea que han sido probados en los navegadores Chrome 21.0, Safari 5.1, Firefox 15.0 y Opera 12.02. En Internet Explorer 8 funciona a excepción de lo relativo a las líneas del polígono, pues no admite SVG aunque si maneja los puntos o vértices del polígono. Por supuesto, tampoco admite Canvas, pero si encuentra una aplicación de uso en el segundo ejemplo que se expone.

banner para web

Para incorporar una imagen en la barra de la cabecera de una página líquida o elástica a modo de banner, podemos usar una imagen de fondo con background-image o el elemento <img>. Hay varias razones a tener en cuenta a la hora de incluir una imagen en esta estructura. El principal inconveniente es que la imagen ha de extenderse para pantallas grandes. Si el monitor es de 1280 píxeles de ancho, la imagen no ha de ser mucho más pequeña pues perdería calidad cuando la ventana esté maximizada. Otro detalle es que al elemento <img> no podemos declararle sus dimensiones con width o height. Esto también va a hacer que la página se cargue más lentamente pues el navegador no sabrá inicialmente que espacio reservar para esa imagen.

JavaScript par un slider de imágenes ajustable con transiciones Otro slider de imágenes en este caso ajustable al contenedor usando transiciones de CSS3 para conseguir un efecto visual diferente. Las imágenes del conjunto pueden presentarse de forma automática o manual. La dirección en la que aparecen también es configurable, pudiendo ser horizontal o vertical. El avance puede ser también de derecha a izquierda o al revés (arriba-abajo con la dirección vertical). La rotación puede ser circular o en vaivén. Se puede poner un pie de imagen y también un título, es decir, el atributo title. En definitiva una serie de configuraciones que dan bastante juego a este slider de imágenes.

Otra mejora es que usamos AJAX para descargar un archivo de texto que contiene la lista de URL's de las imágenes. La petición se hace no cacheable y logramos tener siempre la última versión de esa lista. Si la configuración es manual sólo se descarga la primera imagen y el resto cuando el usuario lo solicita. En otro caso si es automática, se van descargando según la configuración de tiempo especificada. Las imágenes de la serie se van almacenando en otros tantos elementos <img> que se van agregando al contenedor, por lo que la descarga desde el servidor (o caché) sólo se produce la primera vez en la serie. Esto es una ventaja con respecto al slider del tema anterior donde la descarga siempre se realiza desde el servidor/caché, pues siempre se actualizaba el atributo src del mismo y único elemento <img>.

JavaScript par un slider de imágenes Una galería, carrusel o slider de imágenes nos permite presentar un conjunto de imágenes en un contenedor. Pueden haber varias razones por las que necesitemos un slider de imágenes. Por ejemplo, por cuestiones de diseño, para hacer más atractiva la presentación de imágenes. Pero también hay un motivo relacionado con la carga de los recursos y el coste en tiempo. Es el caso cuando tenemos que mostrar muchas imágenes para acompañar al texto teniendo que incluirlas en otros tantos elementos <img>. Al cargarse la página el navegador solicita todos estos recursos de imágenes, lo que supone un coste de tiempo. Supongamos que las imágenes forman una serie consecutiva que tratan sobre un mismo tema. En el caso de que el usuario no esté interesado en verlas todas, podríamos ir descargándolas a medida que el usuario vaya solicitándolas.

slider slider Hay veces que necesitamos un valor numérico en una página que será introducido por el usuario en un elemento <input type="text">. Dado que es un número es posible que luego hagamos cálculos y por lo tanto debemos controlar que está dentro de un rango determinado. Otras veces sólo necesitamos introducir un número aproximado sin ni siquiera tener que conocerlo. Para esos están los slider o barras deslizadoras como las que aparecen en las imágenes. Los nuevos tipos de HTML5 number y range para el elemento <input> nos ayudan en estas tareas. Algún navegador como Firefox 10.0 aún no ha implementado alguna de estas cosas, por lo que construiremos un par de slider sólo con Javascript, que incluso funciona en Explorer 8 (imagen de la izquierda).

Girar texto Dos transformaciones en el contexto 2D del elemento canvas son las traslaciones y rotaciones. Con ellas podemos hacer girar una imagen o cualquier otra cosa sobre sí misma. Como por ejemplo hacer girar un texto en torno a su centro. O bien aplicarlo para hacer girar las manecillas de un reloj. No es una aplicación que tenga mucha utilidad, pero llevar a cabo ejemplos como ese nos pemiten entender los detalles del elemento.

Además hay que usar algunos métodos de Javascript relacionados con eventos temporales, como window.setTimeOut() con el que podemos ejecutar algo en períodos de tiempo determinados. Y también usar el objeto Date que nos devuelve la fecha-hora del sistema, accediendo a los segundos, minutos y horas con getSeconds(), getMinutes() y getHours() respectivamente.

El formulario de contacto El formulario de contacto en nuestro sitio web es un recurso para que el usuario nos remita un mensaje a un email del administrador del sitio. Para llevarlo a cabo se suele usar la función mail() de PHP. Podemos utilizar esta función sin necesidad de conocer muchos detalles, pero hay algunas cosas relacionadas con la seguridad que conviene conocer. Especialmente quiero saber de qué van cosas como el protocolo SMTP, qué es un SMTP Server, un MTA o un MUA.

Principalmente se trata de evitar que usen esos recursos para enviar SPAM. Para entenderlo será necesario hacer algunas pruebas con un servidor de correo. Y lo más apropiado es instalarse uno a modo de localhost. También me interesa el tema del CAPTCHA. La extensión GD de PHP permite insertar texto en forma de imágenes, lo que es adecuado para generar CAPTCHA's para el formulario. Por último si no deseamos o no podemos usar la función mail() de PHP es posible optar por un script que haga la misma función, algo como PHPMailer.

A veces necesitamos estructurar un gran cantidad de elementos en la misma página, pero la superficie se nos puede quedar corta. Entonces es posible pensar en contenedores con pestañas o tabs. Un posible uso es para formularios que envían una gran cantidad de campos al servidor. En cómo se hace un formulario emergente hice una aplicación de pestañas. Pero ahí la construcción del HTML se hace de forma dinámica con Javascript. A raíz de que alguién me solicitara un ejemplo de uso no dinámico, decidí escribir estos documentos. De paso también intentar desarrollar contenedores con pestañas y usando sólo CSS-2.1.

En Internet podemos encontrar muchos programas o recursos para disponer de un buscador interno para nuestro sitio web. Algunos son de pago y otros están limitados a un cierto número de consultas. Pero también podemos intentar hacernos uno a medida. Y de paso aprender un poco más. En este caso se trata de presentar un buscador con Javascript que procesa un índice de encabezados que se envía al navegador del cliente. Este buscador ya estaba funcionando desde hace un año. Ahora también presento otro buscador con PHP basado en archivos de texto que contienen índices de palabras en arrays serializados y que procesa las búsquedas en el servidor.

Cuando hacemos modificaciones en la ubicación de los documentos, tanto si se trata de un traslado entre carpetas del sitio o bien llevar todo el sitio a otro dominio, es necesario usar las redirecciones 301 para no perder usuarios. Ahora necesitaba trasladar el contenido de /xhtml-css a /temas/xhtml-css y que el usuario o los buscadores no perdiesen los enlaces a la carpeta anterior. Las soluciones que ofrece el servidor Apache para redirigir el tráfico a la nueva ubicación son directivas como RewriteRule o RedirectMatch.

Agrupar todo el código script de uso en múltiples documentos es una práctica que facilita el manejo de scripts y reduce líneas de código. En estos temas expongo el contenido de un archivo js donde tengo todas las funciones de uso general para este sitio, incluidas aquellas que unifican el distinto comportamiento de los navegadores con JavaScript o con el manejo del DOM.

Las ventanas y mensajes emergentes, pop-up y otros términos similares se refieren a la posibilidad de abrir una ventana del objeto window que permanece encima de las demás o bien hacer uso de mensajes del navegador en JavaScript como alert(), confirm() o prompt(). Actualmente el usuario puede desactivar las ventanas emergentes pues se está haciendo un mal uso de ellas: ventanas que se abren sin haberlo solicitado encima de lo que estás leyendo o bien que permanecen ocultas detrás sin que uno sepa lo que están haciendo. Aparte de desaconsejar esas prácticas, propongo unos formularios emergentes para simular estas ventanas emergentes.

La maquetación de las páginas de un sitio es una labor que reúne diversas técnicas como conocimiento de HTML y CSS, tipografía, diseño gráfico, etc. Pero lo primero es conocer como podemos montar esa estructura con elementos de HTML y estilo CSS. De eso hablan estos temas.

La programación orientada a objetos (POO) es una técnica que en ciertos casos resulta indispensable para construir páginas web dinámicas eficientes. Aquí hago una introducción al uso de los objetos en JavaScript y al final planteó una aplicación práctica: el calendario.