Asignatura: Lenguajes y estándares web
Consultor y profesor: Carlos Javier Figueroa Herrera y César Pablo Córcoles Briongos
Introducción
Cuando empecé a conectarme a internet me preguntaba “¿Cómo funcionará eso de hacer una página web?”. Descubrí en los navegadores una opción para ver el código fuente, lo que me ayudó a entender en qué consistía, pero no mucho más.
Si tienes inquietudes acerca de este tema o quieres ponerte al día sobre las mejores prácticas a utilizar, Lenguajes y estándares web te gustará.
La tercera y última práctica consistía en hacer una versión más ancha de una página web, ajustando algunos contenidos según una estructura (wireframe) que nos proporcionaron para aprovechar mejor el espacio de la ampliación.
Página a ensanchar y Wireframe para el nuevo diseño
Se pedía, como mínimo, una versión con un código válido y una presentación adecuada en los navegadores actualmente más utilizados, se valoraría la adición de los detalles que solo se verían en los navegadores más modernos (bordes redondeados, cajas inclinadas y transparencias) para obtener mejor nota.
Versión mínima y Versión completa
Pero quise ir un paso más allá. Presentar tres versiones distintas para realizar una comparativa:
- La versión mínima, compatible con navegadores antiguos.
- La versión completa, utilizando una estrategia de diseño llamada mejora progresiva.
- Una versión en la que se aplicarían las características de los navegadores modernos para presentar una versión completa, pero sin tener en cuenta las limitaciones de los navegadores antiguos, para demostrar los problemas que puede llegar a causar trabajar con esta premisa.
Etapas y retos
Dividí el trabajo en tres etapas bien diferenciadas:
1. El documento XHTML (con los textos mostrados en la página)
2. El documento CSS (el que describe los colores, tamaños, fuentes, …)
3. La documentación (las explicaciones de la práctica)
El documento XHTML
Al principio pensé “Esto va a ser muy fácil, incluso me han dado una versión del HTML para que utilice sus textos”. Nada más lejos de la realidad. Como en tantas otras páginas que he visto en internet, la parte que se mostraba en el navegador se veía perfectamente, pero cuando miré el código fuente en Adobe Dreamweaver me encontré con un desastre: errores de semántica, exceso de elementos, accesibilidad mejorable…
Un código sucio, desordenado y con un montón de elementos que no necesitaba
Cada cosa en su sitio. El orden es mejor para trabajar, y más agradable a la vista.
Así que decidí empezar el desarrollo desde cero, en un archivo que llamé index.htm, basándome en el material y las directrices que me habían proporcionado, pero apoyándome en la documentación de la asignatura para crear un código de calidad: limpio, ordenado y semántico (utilizando los nombres y estructuras adecuados).
Información estructurada. Etapa 1 terminada estructura física de los archivos
El documento CSS
En el archivo estilos.css es donde especificaría el aspecto final que tendría la página. Desgraciadamente, esta parte no sería más sencilla que la anterior.
Uno de los dos archivos de estilos que nos proporcionaron también tenía muchísima información que no necesitaba para mi práctica y, para complicarlo un poco más, estaba optimizado para que se descargara más rápidamente, lo que es adecuado a la hora de publicar una página web, pero que, para la fase de edición en la que me encontraba, dificultó la localización de las propiedades que necesitaba.
Código en el que se han eliminado muchos espacios para que descargue más rápido
Mi código CSS, adecuado para editarlo de una manera cómoda.
Con ayuda de una extensión llamada Web Developer que tenía instalada en mi navegador Mozilla Firefox y analizando detenidamente los fragmentos del código que me interesaban logré obtener los valores adecuados para los parámetros que necesitaba.
Esta fase la realicé en tres etapas:
1. La versión con CSS 2.1 para navegadores antiguos.
2. La versión mixta, desarrollada con la estrategia de diseño de mejora progresiva.
3. La versión con CSS3 exclusivamente para los navegadores más avanzados.
La primera etapa culminaría con la versión mínima exigida en la práctica. A pesar de los obstáculos comentados no tuve demasiados problemas en el desarrollo y la validación del código que iba escribiendo, exceptuando el fondo del pie, pero preferí enfrentarme a esta dificultad en lugar de sacrificar la estructura semántica en aras de la presentación.
Algunos compañeros dejaron el trabajo en esta etapa de la práctica, otros continuaron hacia la versión mixta. En mi caso hice ambas cosas a la vez: guardé la versión para navegadores antiguos en una carpeta llamada css_2 y copie su contenido en una carpeta llamada mix para incluir los parámetros que harían que se mostraran, en navegadores que admiten CSS3, los bordes redondeados y resto de características nuevas, sin que los navegadores que no los soportaban notaran diferencia alguna en su presentación.
Una vez concluida la segunda etapa, copie todo el contenido de la carpeta mix en una carpeta llamada css3 y me puse a realizar las modificaciones pertinentes para ejemplificar, en la tercera etapa, por qué esta estrategia de desarrollo era la peor de las tres. Para lograr mi objetivo me decanté por el elemento que más llamaría la atención para la demostración: el listado de cajas de colores.
Colores y distribución de las cajas en CSS 2.1
Colores y distribución de las cajas en CSS3
Con estos pequeños cambios obtuve el resultado que deseaba conseguir. La imagen habla por sí misma:
En los navegadores modernos se sigue viendo bien, pero este es el resultado en uno que no interpreta CSS3.
La documentación
En la última fase, una vez terminada la parte práctica del ejercicio, adjunté en la entrega un documento en el que explicaba los motivos por los que había desarrollado la primera fase con esa estructura y algunos comentarios adicionales acerca del trabajo realizado en la segunda fase.
Finalmente, y como la segunda práctica consistió en desarrollar nuevas páginas para la web que empezamos a desarrollar en la primera práctica, me pareció pertinente adjuntar una nueva página web en la que explicaba el motivo de por qué había decidido hacer la práctica de esta manera y proporcioné enlaces, para acceder a las distintas versiones y a la documentación de la práctica.
Conclusiones
Esta práctica me ha permitido profundizar en la estrategia de mejora progresiva, poner en práctica los conocimientos adquiridos a lo largo del semestre y demostrar que, utilizando buenas prácticas y con pocas variaciones, ni tiene que limitarse la presentación de un diseño algo más innovador en navegadores modernos por no perjudicar a la presentación en los antiguos ni los antiguos tienen por qué tener problemas de presentación por querer utilizar algunas nuevas características adoptadas en los últimos tiempos.
Podría haber mejorado la práctica si hubiera independizado el CSS3 en su propio archivo, lo que habría dado como resultado un código más limpio y organizado. Barajé la posibilidad de crear una versión en HTML5, pero no disponía del tiempo suficiente para investigarlo adecuadamente; también me hubiera gustado que la página hubiera tenido contenido adecuado para experimentar con los microformatos, puerta de entrada a las promesas de la futura web semántica.
Por lo demás estoy satisfecho con el resultado obtenido y he alcanzado las metas que me había exigido a nivel personal.
Cita recomendada: GONZÁLEZ RODRÍGUEZ, Diego. Modificación de una página con estándares web. Mosaic [en línea], julio 2011, no. 89. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n89.1134.