Rediseño de la estructura y apariencia básica de un sitio web (V)
Previamente en esta serie:
Definí los estilos para algunos elementos del artículo que, aunque no se utilicen continuamente, es bueno tenerlos predefinidos: listas, tablas, combinaciones de teclas, notas al pie y citas (de párrafo y en línea).
Definí distintos estilos para los blockquote cuando incluyan una etiqueta samp (porque implicaría que se trata de un “mensaje del sistema”) a cuando no (que sería el caso de un bloque de citas “común”).
Definí la apariencia de distintos estados de los vínculos.
Favicon y otros iconos
Un favicon, favicono o icono de página, es una pequeña imagen asociada a una página o sitio web en particular. Suelen ser mostradas en la barra de direcciones, en la pestaña del navegador, en las listas de marcadores o favoritos y en los historiales de páginas visitadas y de navegación reciente. Para una lectura detallada sobre este tema, les recomiendo How to Favicon in 2022: Six files that fit most needs (de Evil Martians, en inglés).
Por razones de compatibilidad entre navegadores, los formatos de imagen preferidos para guardar un favicon son .ICO y .PNG.
En este caso, para crear el favicon, desde GIMP abrí el archivo undraw_designer_re_5v95.svg del directorio images (que, desde la segunda parte de esta serie, hace las veces de logo del sitio). Como se trata de un archivo vectorial, al abrirlo de GIMP, pregunta las dimensiones y la resolución deseadas para hacer el renderizado (convertir la información vectorial en pixelar).
Así que en la mayor de las dimensiones (el ancho en este caso) ingresé 30 y di Aceptar.
Luego, fui a Imagen > Tamaño del lienzo... y definí las dimensiones del lienzo de 32 en Anchura y en Altura. En el apartado Desplazamiento pinché en el botón “Centrar” y apliqué los cambios pinchando en “Redimensionar”. Después fui a Capa > Capa a tamaño de imagen y, finalmente, exporté el archivo (desde Archivo > Exportar...) al directorio raíz del sitio, con el nombre favicon.ico.
En la ventana que se abrió con los Detalles del icono, me aseguré de que la opción seleccionada del menú desplegable fuera 32 bpp, alfa de 8 bits, sin paleta y pinché en “Exportar”.
Claro que por su escalabilidad, y siempre que sea posible, es preferible utilizar el formato vectorial .SVG para los iconos. Así que decidí brindar las dos opciones (el formato .ICO para navegadores antiguos y el .SVG para los modernos).
Para eso, hice una copia del archivo undraw_designer_re_5v95.svg y la pegué en el directorio raíz del sitio y le cambié el nombre al archivo por favicon.svg.
Para que la página fuera compatible con los web clips de Apple, sería necesario contar con, al menos, otra versión del icono, pero en formato .PNG. Entonces, en GIMP, seguí pasos similares a los que ya especifiqué para la creación del archivo .ICO pero con estas diferencias:
Al abrir el archivo SVG original, en la mayor de las dimensiones (el ancho en este caso) ingresé 140.
En Imagen > Tamaño del lienzo... y definí las dimensiones del lienzo de 180 en Anchura y en Altura. En el apartado Desplazamiento pinché en el botón “Centrar” y apliqué los cambios pinchando en “Redimensionar”.
Luego, seleccioné como color de fondo el color del dorso del monitor que tenía el logo, y fui a Imagen > Aplanar la imagen.
Exporté el archivo al directorio raíz del sitio, con el nombre apple-touch-icon.png.
Finalmente, para mejorar la compatibilidad con los dispositivos Android (y poder instalar su sitio como una aplicación del sistema) serían necesarios otras dos versiones del icono: uno de 192 x 192 para mostrar en la pantalla de inicio y otro de 512 x 512 para ser usada como pantalla de bienvenida mientras se carga la PWA.
Los pasos que seguí fueron muy similares a los descriptos en la lista anterior:
Abrí dos veces el archivo SVG original y en la mayor de las dimensiones (el ancho en este caso) ingresé 152 en el primer caso y 472 en el segundo.
En Imagen > Tamaño del lienzo... definí las dimensiones del lienzo de 192 (en Anchura y en Altura) para el primer caso y 512 para el segundo. En ambos casos pinché en el botón “Centrar” del apartado Desplazamiento y apliqué los cambios pinchando en “Redimensionar”.
Luego, seleccioné como color de fondo el color del dorso del monitor que tenía el logo, y fui a Imagen > Aplanar la imagen.
Exporté el archivo al directorio raíz del sitio. La versión de 192 pixeles la exporté con el nombre icon-192.png y la otra con el nombre icon-512.png.
Así se ven, lado a lado, el código html que he escrito hasta el momento en esta serie (a la izquierda) y el código html que proporciona html5boilerplate (a la derecha):
Así que, tomando en cuenta cómo está escrito el código en el archivo index.html de html5boilerpate realicé las siguientes confirmaciones, agregados y modificaciones en mi archivo index.html (también tomé en consideración Mi plantilla HTML, un texto de Manuel Matuzovic que explica qué elementos sí utiliza y cuáles no de la plantilla de html5boilerplate):
En la línea 1 la diferencia entre ambos archivos es que la declaración de tipo de documento (DOCTYPE) está escrita en mayúsculas en un caso y en minúsculas en el otro. Es indistinto utilizar una u otra forma, pero en la mayoría de los ejemplos que revisé se utiliza la forma con el texto en mayúsculas. Así que aquí no realicé ninguna modificación.
En la línea 2 aparece asignada una clase no-js a la etiqueta html. ¿Cuál es el uso de la clase no-js en html? Básicamente, se trata de una clase propia de Modernizr (una biblioteca de JavaScript -que está cargada en la línea 28 del código de html5boilerplate- y que se usa para detectar las características que soporta el navegador del usuario y actuar en consecuencia). Pero, como en principio no tenía pensado utilizar Modernizr, no agregué esa clase a mi código html.
Las siguiente diferencia está en la ubicación de la etiqueta title: en el archivo de html5boilerplate es la segunda línea dentro de head (enseguida después de la línea que define el charset). Así que en mi código html moví la línea 6 y la coloqué después de la línea 4.
Luego del title, en el código de html5boilerplate, aparece una etiqueta meta name="description"... que yo no había escrito en mi código. Pero, ¿qué es una meta descripción? Básicamente, es la descripción del sitio que mostrarán los motores de búsqueda. Así que la agregué a mi código html, y al atributo content le escribí como valor: ”Descripción concisa de la temática del sitio, de alrededor de 150 caracteres. Debería incluir las palabras clave del contenido”.
Con las modificaciones precedentes, en la línea 7 de mi código html quedó la etiqueta meta name="viewport" que es, básicamente, igual a la de html5boilerplate. La única diferencia es que el valor de initial-scale lo tiene escrito sin decimales (o sea, 1 en vez de 1.0). Como es exactamente lo mismo, lo puse sin decimales en mi código por una ínfima economía de caracteres.
Entre las líneas 10 y 13 del código proporcionado por html5boilerplate aparecían 4 etiquetas meta property="og:...". Se trata de etiquetas Open Graph (og). Pero, ¿qué son las Open Graph? Básicamente, forman parte de un protocolo creado por facebook para mejorar y controlar la vista previa del contenido de la web al momento de compartirla a través de facebook u otras redes sociales. Así que, de momento, aunque no pensaba utilizar estas líneas a mi código. Las incorporé pero etiquetadas como comentarios.
Luego le agregué a mi código las tres líneas del código de Matuzovic relacionadas con los iconos, o sea:
(El agregado de sizes="any" en la primera de estas tres líneas es para evitar un error de Chrome, como se indica en la última línea del apartado I. favicon.ico for legacy browsers).
En la línea 15 del código de html5boilerplate aparecía una etiqueta <link rel="manifest" href="site.webmanifest"> que copié y pegué en mi código html. Esta línea indica que el recurso apuntado es un manifiesto de aplicaciones web. Según Evil Martians, la versión extremadamente corta de este archivo JSON sería (como verá hace referencia a algunas de las imágenes que ya había preparado en el apartado anterior de esta entrada):
{ "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] }
Así que, copié el código que se muestra sobre estas líneas y lo pegué en un archivo nuevo que guardé con el nombre site.webmanifest en la raíz del sitio.
Luego sí, era el momento de los vínculos a las hojas de estilo y a las Google Fonts, así que, el código que originalmente estaba entre las líneas 7 y 11 de mi código, pasaron a estar entre las líneas 16 y 20.
Para terminar con la sección head, la línea 22 del código de html5boilerplate tenía una etiqueta meta name="theme-color" content=... que indica un color personalizado para mostrar en el entorno de la interfaz (en la barra de título, pestañas, etc.). Esta opción es soportada por pocos navegadores. Yo la probé en Firefox, Chrome, Chromium, Brave y Vivaldi y sólo funcionó en el último (más información en MDN Web Docs). Así que opté por no incluirla en mi código html.
Con todos estos cambios, la sección head de mi archivo html estaba quedando así:
Revisando tanta información para escribir estas bitácoras, me enteré que el elemento hgroup fue removido de la especifiación html5 (¡en abril de 2013!), así que busqué alternativas para sustituir esa etiqueta en mi código html y me decanté por la propuesta en OS Templates.
Básicamente, consiste en sustituir la etiqueta hgroup por una etiqueta div, con una clase de nombre hgroup (podría ser cualquier otro, pero con este nombre la corrección es más sencilla). Así que en el archivo html, a las líneas del código que a continuación maqué en rojo,...:
[ ... ] <header> <a href="..."> ... </a> <hgroup> <h1>Nombre del sitio</h1> <p>Lema del sitio</p> </hgroup> <nav> ... </nav> </header> [ ... ] <article> <hgroup> <h1>Título del artículo</h1> <p>“Bajada” del título del artículo</p> <p><a rel="author" href="#">Nombre del autor del texto</a> | Publicado el <time datetime="2022-11-03">3 de noviembre de 2022</time></p> </hgroup> [ ... ] </article> [ ... ]
Las sustituí por las líneas que en el siguiente código marqué en verde:
[ ... ] <header> <a href="..."> ... </a> <div class="hgroup"> <h1>Nombre del sitio</h1> <p>Lema del sitio</p> </div> <nav> ... </nav> </div> [ ... ] <article> <div class="hgroup"> <h1>Título del artículo</h1> <p>“Bajada” del título del artículo</p>
<p><a rel="author" href="#">Nombre del autor del
texto</a> | Publicado el <time datetime="2022-11-03">3 de
noviembre de 2022</time></p> </div> [ ... ] </article> [ ... ]
Además, en la hoja de estilos, para que la apariencia del sitio se conserve, a todas las intancias en que aparecía el selector hgroup le agregué un punto adelante (.hgroup), para hacer referencia a la clase correspondiente.
De nuevo se me hizo bastante larga la entrada. Así que los demás ajustes en las hojas de estilo que había pensado tratar aquí, quedarán para la próxima.
Además, espero poder empezar a ver que puede pasar con la página al verla en pantallas más grandes (en particular, querría empezar enfocándome en las imágenes y probar las propiedades object-fit y object-position, muy bien explicadas, en inglés, en este video de la gran Jen Simmons).
No hay comentarios.:
Publicar un comentario
Lo que escriba a continuación será revisado antes de publicarse. Gracias por tus comentarios.
No hay comentarios.:
Publicar un comentario
Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.