Portada > Artículo

Diseñar con Webstandards

02-11-2004 - Daniel Keel

Resumen: Un minitutorial para iniciarse en el diseño con estándares web.

Debate (9 comentarios) | Valoración media: 2,96 | Votos: 4194 | Lecturas: 12635

¿Qué significa diseñar con Webstandards?

La base del diseño con Webstandards es dividir una página web en tres componentes:

Estructura
Presentación
Comportamiento

¿Que aporta diseñar con Webstandards?

Independencia entre estructura, presentación y comportamiento.
Compatibilidad garantizada con futuras versiones de navegadores. No hay que mantener �??n�?� versiones para mantener compatibilidad con diferentes navegadores.
El sitio Web es legible en todos los dispositivos (PDA, móvil�?�) y en todos los navegadores. Aunque el navegador o el dispositivo no entienda la presentación seguirá manteniendo la estructura de cada página.
Mayor indexación en los buscadores.
Reducción de coste en futuros rediseños.
Contratación de menor ancho de banda del sitio Web ya que se reduce considerablemente el peso del sitio Web.
Menor coste de mantenimiento.
Posibilidad de controlar la presentación al imprimir.
Tener diferentes tipos de presentación.

Metodología

Como se puede uno imaginar, para diseñar con Webstandards hay que ser muy metódico y analizar al 100% el proyecto.

¡Hay que tener en cuenta cuáles son los tipos de contenido que se han agrupado!

Vamos a visualizar este punto con un ejemplo simple. El ejemplo contiene una navegación la cual esta divida en una navegación principal y en una subnavegación. En el caso �??A�?� se ha decido que la navegación principal y la subnavegación formen un único bloque situado en la parte superior de la página.

En el caso �??B�?� se ha decidido que el bloque de navegación esté dividido en navegación principal y en subnavegación.

Caso A:

Caso B:

Con el caso �??A�?� y con el caso �??B�?� hemos logrado el diseño. La navegación se encuentra en la parte superior y el cliente esta satisfecho.

A los 3 meses nuestro cliente decide que la subnavegación debe ir en la parte izquierda de la página por aumento de las opciones de menú. Este cambio supone un mini rediseño.

Rediseño:

A la hora de hacer el rediseño el grado de complejidad varia bastante entre el caso A y el caso B.

Rediseño partiendo del caso A

En el caso �??A�?� no hemos dado importancia a que la navegación principal y la subnavegación formen un único bloque, ya que encajaba perfectamente con el diseño, por lo que la modificación va ser mas costosa.

Modificar estructura.
Modificar plantillas (JSP, PHP,�?�).
Modificar presentación.
La modificación es de mayor volumen ya que la definición de los estilos se basaba en otra estructura.

Rediseño partiendo del caso B

En el caso �??B�?� hemos contemplado que la subnavegación es visualmente independiente de la navegación principal por lo que la modificación va ser mínima.

Modificar presentación.
Hay que modificar una única declaración de la hoja de estilos.

Conclusión

Si aplicamos Webstandards tenemos que ser mas metódicos y dejar todo definido inicialmente: guía de usabilidad y libro de estilo. Si no se siguen las definiciones, los Webstandards pueden ser muy crueles. El caso mostrado es sólo el pico del iceberg.