14 dic 2013

Actualización sitio web

Resumen de actualizaciones

He llevado a cabo una actualización de este sitio para mejorar los tiempos de carga, la adaptación a los anchos de pantalla y la accesibilidad, entre otras mejoras. No voy a entrar en excesivo detalle por ahora, pues requeriría de una exposición más extensa. Y por otro lado algunas de estas cosas aún las estoy probando y en consecuencia, aprendiéndolas. A modo de resumen relaciono los cambios más importantes:

Estaba incorporando el elemento <name = "viewport" content = "width = device-width, initial-scale = 1"> con JavaScript (ver @viewport). Pero como he tenido que rectificar todos los documentos ahora agrego ese elemento directamente en el HTML, puesto que hay que tratar de usar el mínimo JavaScript en la fase de carga de la página.
He eliminado definitivamente el elemento <meta http-equiv = "X-UA-Compatible" content = "IE=edge; chrome=1" />. Estaba destinado a los navegadores Internet Explorer 8 y anteriores, pero en algún momento hay que empezar a olvidarse de los navegadores antiguos. Además el marco Chrome para IE es una utilidad que no sé bien si aún funciona (y es probable que nadie lo use).
He reemplazado el elemento <meta http-equiv = "content-type" content = "text/html; charset=UTF-8" /> con <meta charset="utf-8" />. Al mismo tiempo en el servidor Apache he incluido la directiva AddDefaultCharset utf-8. El servidor ya está enviando por defecto las páginas con el tipo de contenido text/html. Y ahora además lo hará con la codificación utf-8. Es más, no haría falta poner el <meta charset="utf-8" /> en el documento, pero lo dejaré por si hay algún problema en el servidor.
He agregado la directiva AddOutputFilter DEFLATE al servidor para que entregue los recursos comprimidos. El ahorro de bytes es muy importante.
Esta directiva no funcionó en el alojamiento compartido en el que está este sitio (1and1). Vea el tema de enero 2014 titulado comprimir web, donde explico como comprimir con PHP los documentos HTML, CSS y JS.
He reducido el número de peticiones agrupando pequeños recursos. Antes tenía tres archivos de estilo que eran comunes para todas las páginas. Eran cabeza-pie.css (9KB), interior.css (5KB) y formatos.css (8KB) (tamaños ya minimizados). Ahora los agrupo en un único archivo base.css.
A finales de febrero de 2014 he optado por inyectar con PHP el CSS necesario de ese archivo base.css en un elemento <style> en el <head> del documento, con objeto de conseguir priorizar el CSS above-the-fold.
Estoy empezando a usar los nuevos elementos semáticos de HTML5 como <header>, <footer>, <nav>, <article> o <section> entre otros.
He eliminado la estructura de bloques laterales o tipo columnas. En dispositivos de menor tamaño suponen un problema y hay que hacer uso de consultas de medios para adaptar la página. El contenido se expone usando el ancho disponible, evitando que ningún elemento lo sobrepase. Seguiré usando medidas relativas en em's para configurar la estructura.
He remodelado la cabecera de las páginas para ofrecer una barra de botones con pocas opciones para que se muestre sin problemas en dispositivos de menor ancho. Si el usuario lo desea puede abrir la entrada "Menú" que le ofrecerá la lista de enlaces usuales de la cabecera. Por otro lado el botón "Accesos" abrirá otra lista de enlaces a documentos con una agrupación distinta. Esa lista se recupera con AJAX también a petición del usuario. Así no cargamos en exceso el HTML de las páginas y traemos siempre la última versión de la lista pues la iré actualizando a medida que incorpore nuevos documentos.
No ejecutaré con la carga de la página los script de los botones de compartir en redes sociales con la finalidad de no obstaculizar la carga de la página. Se agrega un nuevo botón "Compartir" dentro de la opción de menú que cargará estos scripts a petición del usuario.
Usaré un pie de página mínimo, con un enlace para ir a la cabecera y en los temas compuestos con enlaces para ir al anterior o siguiente. Todos los enlaces que usualmente se ponen en el pie, como contacto, acerca de, etc, los ubicaré ahora en la cabecera.
En la entrada de cada tema antes tenía una lista de enlaces para exponer la ruta de navegación o migas, una lista de enlaces a otros temas de la misma serie y por último una lista de apartados. Las migas y la primera lista se unifican ahora en una única lista. Todo este contenido de enlaces aparece inicialmente oculto, pudiendo el usuario desplegarlo. Así ocultamos contenido adicional que quitará espacio de pantalla al verdadero contenido del tema.
Siempre que sea posible no incluiré estilo en línea en el elemento (el que ponemos en el atributo style), a favor de estilo con nombres de clases. También hay que evitar los JavaScript de eventos en línea (como onclick = "..."). En este último caso adjudicaremos los eventos en el window.onload usando addEventListener. Por otro lado últimamente he procurado ordenar la carga de los recursos de esta forma:
- Poner en el <head> en primer lugar las hojas de estilo con los elementos <link rel="stylesheet"> y luego el/los elementos <style>.
- A continuación poner los <script src="..." async>, siempre asíncronos.
- Pasar al pie de la página el/los scripts en línea, incluyendo un window.onload para gestionar los procesos de carga de módulos y otros.
He revisado todos los temas de este sitio para ordenar correctamente la carga de recursos.
En los primeros meses del 2014 he optado por un par de cosas que difieren un poco de lo expuesto aquí. Ver estructura o layout minimalista y Priorizar CSS above-the-fold:
- El orden del CSS se mantiene, pero la mayor parte del estilo ahora se inyecta con PHP para conseguir priorizar el CSS above-the-fold.
- Los <script src="..." async> pasan al pie de página después del script con el window.onload, con el objeto de que la página se renderize cuanto antes.
Mejoro la accesibilidad eliminando los falsos botones, es decir, elementos que no son vínculos <a> ni botones como <button> o <input type="button"> y que recogen un evento onclick para realizar alguna acción con JavaScript. Partiendo del principio de que un botón es un botón, ahora será un <button type="button"> el elemento apropiado para realizar una acción con JavaScript. Así podremos movernos por la página con el tabulador para acceder a todos los elementos sobre los que podamos hacer click, elementos capaces de recibir el foco como vínculos y botones.
Ahora dispongo de un archivo de estilo base-nojs.css dentro de un elemento <noscript> en el <head> de la página para reconfigurar el documento y que siga mínimamente funcional cuando JavaScript esté desactivado.
En los primeros meses del 2014 he optado por un par de cosas que difieren un poco de lo expuesto aquí. Ver estructura o layout minimalista y Priorizar CSS above-the-fold. Ese <noscript> ahora está al pie del documento.
Incorporo una caja de búsqueda en la cabecera, de tal forma que se pueda buscar directamente sin necesidad de ir a la página del buscador y luego tener que incorporar la cadena de búsqueda allí.
Incorporo un botón para imprimir la página y configurar estilo para imprimir usando la regla @media print.
Eliminé definitivamente del archivo de JavaScript general.js y de todos los scripts la diferenciación por navegador. Es decir, no usar navigator.userAgent y tratar de arreglar los problemas consultando el soporte de la característica.
Estaba usando navigator.userAgent para detectar el navegador de Android 2.x y así incorporarle un mecanismo de scroll móvil, pues ese navegador no soporta overflow. No he encontrado una forma de detectar esa incidencia sin utilizar userAgent. Pero dado que por principio no lo usaré, he decidido incorporarlo a todos los navegadores que soporten eventos de toque (Touch Events). En cualquier caso esta funcionalidad sólo la aplicaré a los contenedores de código resaltado por ahora.