28/08/2012

Las hojas de estilo en cascada (CSS), otro pilar del diseño web

Las hojas de estilo en cascada (CSS), otro pilar del diseño web

Varias veces hemos hablado de HTML y XML, dos lenguajes de marcas que estructuran los contenidos que se muestran en un sitio web. Los dos persiguen objetivos similares, con la diferencia de que XML permite al desarrollador crear sus propias etiquetas (superando las limitaciones de un conjunto de palabras reservadas) y es más estricto en su normativa sintáctica, dando como resultado documentos más fáciles de interpretar por los navegadores. Puede decirse que XML se orienta más a la organización de la información, mientras que HTML se centra en su formato.

Ambos lenguajes se complementan con otro, conocido como CSS, por Cascading Style Sheets. Las hojas de estilo en cascada describen la presentación de un sitio web separándola de su estructura, definida por un código en lenguaje de marcas. Es decir, la forma y el contenido pueden detallarse en dos bloques de código distintos. Esto no sólo implica una mayor claridad del código fuente, sino también un ahorro de tiempo.

En HTML, cada vez que se inicializa un bloque, un párrafo, una imagen o cualquier otra entidad, existe la posibilidad de definir sus atributos dentro de la misma etiqueta. Por ejemplo, en el caso de un encabezado podríamos querer usar fuente Arial, tamaño 15pt, color rojo, subrayada. Pero cada vez que quisiéramos volver a usar esa configuración, tendríamos que volver a detallar esas especificaciones en la etiqueta, perdiendo tiempo y repitiendo código. A través de una sintaxis de fácil comprensión, CSS nos permite definir un formato propio, que podríamos llamar «encabezado», al que invocaremos cada vez que queramos usar esos atributos sin tener que repetirlos uno por uno. De manera similar podría formatearse cualquier otro elemento de página. Esto incluye a los divs, bloques que definen la composición de la plantilla y que cumplen muchas de las funciones antiguamente asignadas a las tablas.

Gracias a las hojas de estilo en cascada, los desarrolladores obtienen código más fácil de escribir y de leer, y pueden plantear de manera separada la estructura de la página y su aspecto final.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce