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

...