Hojas de estilo (CSS) - guía basica - ejemplos - Usar CSS para diseñar la presentación del contenido
Artículo creado por César Martín. Extraido de: http://www.alzado.org
22 de Febrero de 2006
Diseño web, Visualización de la información
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.
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.
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.
Valora este capítulo:
Autor y licencia de 'Hojas de estilo (CSS) - guía basica - ejemplos - Usar CSS para diseñar la presentación del contenido'
|
Opiniona sobre 'Hojas de estilo (CSS) - guía basica - ejemplos - Usar CSS para diseñar la presentación del contenido' (0)
Tu nombre debe tener tres caracteres como mínimo.
Es necesario que te des de alta con una cuenta de correo válida.
Es necesario que te des de alta con una cuenta de correo válida.
El contenido del título de tu opinión debe tener tres caracteres como mínimo.
Es obligatorio que selecciones una valoración del recurso.
El contenido del comentario de tu opinión debe tener tres caracteres como mínimo.
Opina sobre este artículo |
Wikis relacionados con 'Hojas de estilo (CSS) - guía basica - ejemplos - Usar CSS para diseñar la presentación del contenido'
Este documento describe el lenguaje CSS1 (Cascade Style Sheets, level 1 - hojas de estilo...
Más »
Con CSS puedes formatear tus páginas web separando completamente el contenido de la presentación. Es...
Más »
Este documento describe el lenguaje CSS1 (Cascade Style Sheets, level 1 - hojas de estilo...
Más »
El estilo rococó suele verse como una continuación del movimiento barroco. Fue iniciado en Francia...
Más »
El trabajo en equipo es un estilo de trabajo que no todas las personas están...
Más »
