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 de un icono (O un enlace de texto en caso de que no se cargue el icono).

Conexión segura con HTTPS

Desde hace algunos meses los navegadores vienen advirtiendo al usuario que una página no es segura si no está bajo el protocolo HTTPS. Por ahora se limita a páginas como las que recopilan contraseñas. Pero más adelante marcaran como no seguras todas las páginas que no usen HTTPS. Por otro lado el proveedor donde tengo alojado este sitio ya está ofreciendo HTTPS incluido en el coste del paquete. Así que no hay excusa para no llevarlo a cabo.

En este tema comento los pasos mínimos necesarios para implementar esta y otras mejoras. Una importante tiene que ver con la reducción del tamaño de los documentos HTML y JS, con el objetivo de reducir el tiempo extra en la carga que supone la conexión HTTPS.

Otra utilidad es ofrecer al usuario la posibilidad de configurar aspectos visuales, como maximizar el ancho de pantalla y agrandar el tamaño del texto. La configuración se almacena en una cookie, con lo que conseguimos aplicarla a todas las peticiones de páginas mientras el navegador esté abierto.

Iconos SVG

Iconos SVG

Los SVG (Scalable Vector Graphics) son los Gráficos vectoriales escalables. Se estructuran en un documento XML para representar formas gráficas en dos dimensiones. Tienen un uso muy diverso y especialmente me interesa incorporarlos a este sitio como iconos.

Anteriormente venía utilizando los Sprites CSS para este cometido. Pero los SVG tienen algunas ventajas adicionales, especialmente que se incorporan al DOM como un elemento más. Así es posible darles estilo CSS adicional, respondiendo al tamaño de la fuente de texto o al color de primer plano, por ejemplo. Los Sprites, sin embargo, no dejan de ser imágenes, por lo que no hay muchas formas de interaccionar con ellas. Al incrementar su tamaño perderán resolución. Y no es posible cambiarles el color.

Objeto de tipos para verificar argumentos de una función

JavaScript es débilmente tipado. Esto puede ser una desventaja cuando ejecutamos una función, pues no podemos asegurar que los tipos de los valores que se reciban sean los esperados. Se soluciona incorporando controles con typeof para ver si el argumento es del tipo esperado. No deja de ser un trabajo y código adicional que tenemos que incorporar en cada función y para cada paramétro que queramos verificar. Es una pena que JavaScript no tenga algo como si tiene TypeScript, donde la declaración function fun(a: number, b: string) obliga a que los argumentos tengan que ser de esos tipos.

Pero con ES6 y los parámetros por defecto o predeterminados podemos construirnos una función verificadora que lleve a cabo esa comprobación de forma automática. Para ello usaremos el código de la función obtenido con fun.toString(), parseando una cabecera como fun(a="", b=0) para deducir que los parámetros son de tipos string y number respectivamente, lo que se deduce de los tipos de los valores predeterminados. Con ello construiremos un objeto de tipos como el de la imagen, que nos servirá para verificar los tipos de los argumentos.

Barra de botones de navegación de registros: ir a inicio, atrás, adelante y fin

Una barra de botones para navegación de registros son los típicos que nos permiten posicionarnos en un conjunto de registros. Suelen verse con unos iconos de triángulos a modo de flechas que significan ir al primero, atrás, adelante y fin. Podemos insertarle imágenes con esas flechas usando sprites CSS. O fuentes de símbolos de interfaz de usuario de UNICODE. Estas posibilidades tienen en común la necesidad de descargar un recurso adicional para su presentación.

Pero si no queremos descargar esos recursos podemos construir los iconos con CSS cuando estos son formas geométricas sencillas. En estos dos temas se expone cómo construir triángulos con CSS y dotarlos de posicionamiento con márgenes para finalizar creando esa barra de botones.

El texto alternativo en el atributo ALT de una imagen es una etiqueta de texto que la describe a los que no puedan visualizarla.

El caracter semántico del atributo alt del elemento <img> ha sido uno de los más confusos con los que me he enfrentado. Hasta ahora estaba poniendo siempre este atributo porque las herramientas de validación y optimización lo reflejaban como obligatorio. Pero nunca llegué a prestarle más que una atención superficial. Ahora es el momento de profundizar un poco más.

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.