A complete graphic design, illustration, web design and typography course.
 

(Esta) nueva versión del sitio

Las primeras versiones

El Manual de Diseño Digital lleva ya varios años en línea (desde 1998). Nunca nos hemos planteado revisiones del sitio por motivos puramente estéticos, sino que siempre han obedecido a mejoras en el sistema de navegación y para facilitar el acceso a los contenidos, además de añadir nuevos artículos en sucesivas ampliaciones, hasta llegar a los cerca de 130 de que actualmente consta.

La primera versión del Manual ganó el premio a la mejor Web de Mundo Internet-AUI, el más reconocido de los premios en España. Esta primera versión se desarrolló en Netobjects Fusion (NOF), un programa que, innegablemente, aporta muchas ventajas para el desarrollo de sitios complejos, con una automatización de muchos aspectos tediosos. Por ello en el Manual se detalla su uso para generar la web, como ejemplo del uso de entornos wysiwyg (visuales, “what you see is what you get”). En los primeros años noventa los sitios web estaban construidos a base de tablas anidadas, navegación basada en imágenes (con efectos de mouseover dependientes de javascript) y llenas de etiquetas <font>. NOF era una de las aplicaciones que más fácil hacían este tipo de efectos, a falta de otros sistemas fiables para poder conseguirlos.

Una segunda versión del Manual también se generó en NOF. Básicamente intentaba resolver problemas de excesiva complejidad del código y hacer más simple, consistente e intuitiva su estructura y navegación. Se eliminó buena parte del formato en el html, asignándolo a una hoja de estilo enlazada. Simplemente con estas medidas ya se logró un notable aligeramiento del código (suprimiendo la mayoría de etiquetas font, por ejemplo.)

El código basura

No hace falta decir que estas soluciones para la presentación visual de un sitio no son buenas hoy ni tampoco lo eran hace unos años. Sin embargo, casi no había otro remedio entonces para tener un poco de control sobre el aspecto de los documentos html que recurrir a los elementos de código mencionados antes. En plena guerra de los navegadores y con muchos usuarios que todavía empleaban navegadores sin soporte de CSS (o muy deficiente soporte), era la única manera de tener un cierto control sobre el diseño.

Al plantearnos la presente revisión del sitio, claramente nos resultaba inaceptable tener un código lleno de elementos innecesarios y ajenos a los estándares de W3, y nos propusimos unos nuevos requisitos más exigentes y actualizados.

Objetivos

Los objetivos básicos de cambiar el código obsoleto del Manual por uno basado en los estándares del W3 son:

  • Menores requerimientos de ancho de banda, ya que el tamaño de cada documento se reduce al eliminar código innecesario.
  • Compatible con cualquier navegador actual o pasado, aunque en los navegadores sin soporte de CSS el documento se muestra de manera mucho más simple.
  • Mejor accesibilidad para personas con dificultades visuales, motoras o de otros tipos.
  • Mejores cualidades para su indexación en motores de búsqueda.
  • Mayor facilidad de mantenimiento por el desarrollador.
No todas las páginas se han comprobado sistemáticamente para comprobar si efectivamente validan y si están completamente libres de errores de código, pero en todo caso los errores que pueden contener son mínimos en comparación con lo que teníamos antes y no impiden alcanzar los objetivos marcados (persisten errores del tipo de algunas etiquetas no cerradas o similares: en xhtml toda etiqueta debe estar en minúscula, correctamente cerrada y se exigen algunos atributos tales como nombre alternativo en las imágenes que en html son facultativos.)

La tarea necesaria

Como primera medida, generamos una copia de todo el sitio lo más limpia posible:

  • sin masterborders y suprimiendo todos los menús gráficos de navegación
  • colocando si era posible todo el contenido de cada página en una caja que se ajustara al ancho de la ventana del navegador (la manera en que Netobjects Fusion designa una página sin tablas.)

Aún así, y pese a que en la versión anterior ya se había intentado mantener a raya a NOF, aparecían muchos atributos incorrectos para un código estandarizado.Especialmente en la distribución de imágenes, para las que creaba tablas y más tablas que podían sustituirse por contenedores DIV mucho más simples. Una de las virtudes principales de CSS, precisamente, es la de permitir que se asignen diferentes valores para los espaciados de la imagen respecto de sus bordes.

Limpieza

Pasamos todos los ficheros html por htmlTidy, con el objetivo de convertirlos a xhtml válido. Tidy arregló buena parte de los problemas automáticamente.

Se creó todo el código y montaje en NoteTab Pro y en HtmlKit, más diversos plugins para el segundo y librerías adicionales para el primero. Se ha utilizado extensamente el validador de html del Consorcio de WWW, y la suite Mozilla, con sus útiles inspectores del DOM y de los contenidos enlazados a una página.

Dado que las imágenes se mantienen constantes desde la última edición del sitio, la tarea con éstas ha sido mínima. Se ha suprimido una gran cantidad de imágenes que Netobjects generaba automáticamente par la navegación en las barras de menú, y se han suprimido completamente todos los gifs transparentes que mantenían versiones anteriores. En una optimización de este tipo es posible eliminar fácilmente centenares de imágenes superfluas.

Las plantillas en que se basa todo el sitio constan de una serie de contenedores específicos para alojar los contenidos de cada página, sean los menús (textuales), texto principal, listas de enlaces... Empleando una simple técnica de buscar y reemplazar se pueden cambiar en bloque (en este caso hemos empleado un plugin para HtmlKit llamado ReplaceHTML, utilidad que también puede funcionar de manera autónoma.)

Estilo

El estilo del documento se asigna exclusivamente a través de CSS, en su mayor parte de manera centralizada en una única hoja enlazada. Para los atributos concretos de bloques de imágenes flotantes se han especificado estilos asignados a una etiqueta de html individual. Las hojas de estilo se han creado en NoteTab.

Se ha recurrido a una técnica simple y efectiva para resaltar y diferenciar los elementos de navegación de la sección y subsección activos, mediante selectores contextuales y diferentes clases aplicadas al elemento <body> de las páginas y las listas que constituyen los menús. Para hacer lo mismo en la vieja escuela wysiwyg, se recurriría a múltiples imágenes.

La optimización a la hora de imprimir se ha logrado también en CSS. Se ha indicado un tamaño físico de la hoja en A4 para imprimir, y se hacen invisibles los elementos auxiliares innecesarios (navegación, banners), y se ha establecido un tamaño del área de impresión correcto, minimizando el desperdicio de papel.

Cambios futuros

El Manual será ampliado y revisado periódicamente. Algunos artículos se incorporarán a los materiales ya accesibles en el web, mientras que otros se ofrecerán bajo suscripción o adquisición en forma impresa o en forma de ebook.

Para mantenerse al día de los cambios ya es innecesario suscribirse a una lista de correo, puesto que nuestro blog publicará las novedades relevantes y además dispone de un sumario RSS.