Modificacion De Una Pagina Con Standares Web

Modificación de una página con estándares web

26/07/11 • Diego González Rodríguez • Experiencias •

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

...