Guía basica y ejemplos de las Hojas de Estilo en Cascada presentadas desde el ámbito de la usabilidad.
Resumen:
Usar CSS para diseñar la presentacion del contenido
Planificar es parte de la estrategia de exito
Validar con w3.org y tener en cuenta los bugs.
1. Usar CSS para diseñar la presentacion del contenido
El antiguo metodo de diseñar paginas se basaba en la edicion de interminables lineas de HTML donde tablas anidadas definian la presetacion de nuestro site.
Este metodo generaba una gran cantidad de codigo que "solo" serviria para maquetar informacion y que debia ser reutilizado pagina tras pagina en el site.
El ejemplo tipico son los menus donde para mostrar 5 enlaces, son necesarios 10kbs de codigo.
Abandonando el antiguo metodo y abrazando las CSS ganaremos 2 cosas.
La agilidad en la produccion es uno de los puntos claves ya que la creacion de contenido y su presentacion se dividen evitando los cuellos de botella. Por otro lado, no se necesitan mas tablas para maquetar menus ya que todos los elementos se pueden definir de forma precisa a traves de la CSS.
Este ejemplo presenta una cabecera, un menu lateral y contenido. Es decir, el tipico esquema que cualquier site puede utilizar. Todos estos elementos han sido definidos en la hoja de estilo dejando el HTML limpio para el contenido.
La mayor velocidad de bajada se origina por la eliminacion total de codigo de presentacion dentro del HTML del contenido. No es extraño ver como un site dedica casi el 80% del HTML a generar tablas con menus que se repiten en cada pagina a lo largo del site. Editando el estilo de estos menus asi como el layout de la pagina en la CSS se evita toda esa redundancia.
El peso por documento se puede ver rebajado facilmente en un 50%. Este peso por documento se acumula y podemos ver como al final de la actualizacion el site en global reduce su peso en Megas reflejandose en una optimizacion en la transferencia de datos.
Este tipo de actualizacion ofrecer resultados facilmente medibles que prueban la efectividad de la accion.
Una estrategia a seguir con esta actualizacion es el poder insertar mas informacion por pagina sin llegar a aumentar el peso. Esta informacion puede venir en el formato de banners mas ricos, mejores promociones, mapas del web mas completos.
2. Planificar es parte de la estrategia de exito
Como siempre una planificacion y prevision de las necesidades del proyecto es clave para poder definir estilos que responderan a las necesidades del site.
Algunas claves:
Pensar a lo grande requiere planificar y mantener un seguimiento periodico de las necesidades de los diferentes departamentos para poder insertar dentro de la linea de produccion nuevos formatos, plantillas. El tener un control sobre nuevas necesidades y ser capaces de ofrecer soluciones ayduara a tener versiones actualizadas, consistentes y facilemente mejorables.
La documentacion y publicacion debe tender a documentos sencillos, breves y faciles de aplicar. Evitar el "dossier" y tender mas al "flyer". Para conseguir que la gente lea y siga normas se debe tender a presentar las nuevas guias de una forma sencilla, demostrando los benecifios de las mismas y facilitando su puesta en marcha desde cualquier plataforma, ocasion y circunstancia.
3. Validar con w3.org y tener en cuenta los bugs
La CSS que usa esta pagina valida.
Validar segun las normas de w3.org no es facil. La mejor tactica es usar CSS que validen y de ahi modificar lo que sea necesario para acomodar el estilo a nuestras preferencias.
Existen problemas de interpretacion entre navegadores y existen bugs que no se pueden corregir. Si bien no crean incompatibilidades, si pueden ser problematicos y algo molestos a la hora de trabajar.
Erratas de la w3.org
Validator: http://jigsaw.w3.org/css-validator
CSS: http://www.w3.org/Style
Samples Mozilla: http://www.mozilla.org/docs/dom/samples
Styles w3.org: http://www.w3.org/StyleSheets/Core/preview
Directory: Directorio de Google con ejemplos CSS
Ver también: Manual de CSS de DesarrolloWeb.com
Usar CSS para diseñar la presentacion del contenido
Planificar es parte de la estrategia de exito
Validar con w3.org y tener en cuenta los bugs.
| Referencia: Existe un manual en DesarrolloWeb que explica le lenguaje CSS con detenimiento. |
1. Usar CSS para diseñar la presentacion del contenido
El antiguo metodo de diseñar paginas se basaba en la edicion de interminables lineas de HTML donde tablas anidadas definian la presetacion de nuestro site.
Este metodo generaba una gran cantidad de codigo que "solo" serviria para maquetar informacion y que debia ser reutilizado pagina tras pagina en el site.
El ejemplo tipico son los menus donde para mostrar 5 enlaces, son necesarios 10kbs de codigo.
Abandonando el antiguo metodo y abrazando las CSS ganaremos 2 cosas.
- Agilidad en la produccion tanto desde la creacion de nuevo contenido como desde el punto de vista de la
actualizacion y mantenimiento del contenido creado.
- Una mayor velocidad de bajada de documentos y con ello, un mejor funcionamiento de nuestros servidores
La agilidad en la produccion es uno de los puntos claves ya que la creacion de contenido y su presentacion se dividen evitando los cuellos de botella. Por otro lado, no se necesitan mas tablas para maquetar menus ya que todos los elementos se pueden definir de forma precisa a traves de la CSS.
Este ejemplo presenta una cabecera, un menu lateral y contenido. Es decir, el tipico esquema que cualquier site puede utilizar. Todos estos elementos han sido definidos en la hoja de estilo dejando el HTML limpio para el contenido.
La mayor velocidad de bajada se origina por la eliminacion total de codigo de presentacion dentro del HTML del contenido. No es extraño ver como un site dedica casi el 80% del HTML a generar tablas con menus que se repiten en cada pagina a lo largo del site. Editando el estilo de estos menus asi como el layout de la pagina en la CSS se evita toda esa redundancia.
- No mas "table", no mas "font", no mas "color" para maquetar. Contenido + CSS.
El peso por documento se puede ver rebajado facilmente en un 50%. Este peso por documento se acumula y podemos ver como al final de la actualizacion el site en global reduce su peso en Megas reflejandose en una optimizacion en la transferencia de datos.
Este tipo de actualizacion ofrecer resultados facilmente medibles que prueban la efectividad de la accion.
Una estrategia a seguir con esta actualizacion es el poder insertar mas informacion por pagina sin llegar a aumentar el peso. Esta informacion puede venir en el formato de banners mas ricos, mejores promociones, mapas del web mas completos.
2. Planificar es parte de la estrategia de exito
Como siempre una planificacion y prevision de las necesidades del proyecto es clave para poder definir estilos que responderan a las necesidades del site.
Algunas claves:
- Estudiar los estilos actualmente aplicados para poder reciclar y construir sobre una base evitando el "borron y cuenta nueva".
- Conocer las necesidades de las diferentes partes que colaboraran dentro del site y saber transmitir posibilidades, limitaciones.
- Aplicar un metodo de trabajo que permita "probar / cambiar" lo necesario.
- No dar por bueno la version 1.0
- Pensar a lo grande, documentar, publicar guias.
Pensar a lo grande requiere planificar y mantener un seguimiento periodico de las necesidades de los diferentes departamentos para poder insertar dentro de la linea de produccion nuevos formatos, plantillas. El tener un control sobre nuevas necesidades y ser capaces de ofrecer soluciones ayduara a tener versiones actualizadas, consistentes y facilemente mejorables.
La documentacion y publicacion debe tender a documentos sencillos, breves y faciles de aplicar. Evitar el "dossier" y tender mas al "flyer". Para conseguir que la gente lea y siga normas se debe tender a presentar las nuevas guias de una forma sencilla, demostrando los benecifios de las mismas y facilitando su puesta en marcha desde cualquier plataforma, ocasion y circunstancia.
3. Validar con w3.org y tener en cuenta los bugs
La CSS que usa esta pagina valida.
Validar segun las normas de w3.org no es facil. La mejor tactica es usar CSS que validen y de ahi modificar lo que sea necesario para acomodar el estilo a nuestras preferencias.
Existen problemas de interpretacion entre navegadores y existen bugs que no se pueden corregir. Si bien no crean incompatibilidades, si pueden ser problematicos y algo molestos a la hora de trabajar.
Erratas de la w3.org
Validator: http://jigsaw.w3.org/css-validator
CSS: http://www.w3.org/Style
Samples Mozilla: http://www.mozilla.org/docs/dom/samples
Styles w3.org: http://www.w3.org/StyleSheets/Core/preview
Directory: Directorio de Google con ejemplos CSS
Ver también: Manual de CSS de DesarrolloWeb.com
César Martín
Especializado en usabilidad, hoy César es gerente de marketing y ventas de Docxp...