Hojas de estilo (CSS) – guia basica – ejemplos

1. Usar CSS para diseñar la presentación del contenido

El antiguo método de diseñar paginas se basaba en la edición de interminables lineas de HTML donde tablas anidadas definían la prestación de nuestro site.

Este método generaba una gran cantidad de código que "solo" serviría para maquetar información y que debía ser reutilizado pagina tras pagina en el site.

El ejemplo típico son los menús donde para mostrar 5 enlaces, son necesarios 10kbs de código.

Abandonando el antiguo método y abrazando las CSS ganaremos 2 cosas.

  • Agilidad en la producción tanto desde la creación de nuevo contenido como desde el punto de vista de la actualización 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 producción es uno de los puntos claves ya que la creación de contenido y su presentación se dividen evitando los cuellos de botella. Por otro lado, no se necesitan mas tablas para maquetar menús ya que todos los elementos se pueden definir de forma precisa a través de la CSS.

    Este ejemplo presenta una cabecera, un menú lateral y contenido. Es decir, el típico 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 eliminación total de código de presentación dentro del HTML del contenido. No es extraño ver como un site dedica casi el 80% del HTML a generar tablas con menús que se repiten en cada pagina a lo largo del site. Editando el estilo de estos menús así 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 fácilmente en un 50%. Este peso por documento se acumula y podemos ver como al final de la actualización el site en global reduce su peso en Megas reflejandose en una optimización en la transferencia de datos.

    Este tipo de actualización ofrecer resultados fácilmente medibles que prueban la efectividad de la acción.

    Una estrategia a seguir con esta actualización es el poder insertar mas información por pagina sin llegar a aumentar el peso. Esta información puede venir en el formato de banners mas ricos, mejores promociones, mapas del web mas completos.

    2. Planificar es parte de la estrategia de éxito

    Como siempre una planificacion y previsión de las necesidades del proyecto es clave para poder definir estilos que responderán a las necesidades del site.

    Algunas claves:

  • Estudiar los estilos actualmente aplicados para poder reciclar y construir sobre una base evitando el "borrón y cuenta nueva".
  • Conocer las necesidades de las diferentes partes que colaboraran dentro del site y saber transmitir posibilidades, limitaciones.
  • Aplicar un método de trabajo que permita "probar/cambiar" lo necesario.
  • No dar por bueno la versión 1.0
  • Pensar a lo grande, documentar, publicar guías.

    Pensar a lo grande requiere planificar y mantener un seguimiento periódico de las necesidades de los diferentes departamentos para poder insertar dentro de la linea de producción nuevos formatos, plantillas. El tener un control sobre nuevas necesidades y ser capaces de ofrecer soluciones ayudara a tener versiones actualizadas, consistentes y
    fácilmente mejorables.

    La documentación y publicación debe tender a documentos sencillos, breves y fáciles 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 guías de una forma sencilla, demostrando los beneficios de las mismas y facilitando su puesta en marcha desde cualquier plataforma, ocasión y circunstancia.

    3. Validar con w3.org y tener en cuenta los bugs

    Validar según las normas de w3.org no es fácil. La mejor táctica es usar CSS que validen y de ahí modificar lo que sea necesario para acomodar el estilo a nuestras preferencias.

    Existen problemas de interpretación entre navegadores y existen bugs que no se pueden corregir. Si bien no crean incompatibilidades, si pueden ser problemáticos y algo molestos a la hora de trabajar

    Erratas de la w3.org

    Foro sobre CSS en Alzado.org

  • Entradas relacionadas

    Deja un comentario