08/05/2013

Dynamic CSS: estilos dinámicos en nuestro sitio web

Dynamic CSS: estilos dinámicos en nuestro sitio web

De la misma manera que existen Ajax y DHTML (dos grupos de tecnologías que agregan funcionalidad a páginas web), existe Dynamic CSS (DCSS): una combinación de hojas de estilo en cascada y lenguajes del lado del servidor para poder utilizar estilos dinámicos en un sitio web. El concepto (acuñado en 2002 por el programador holandés Jori Koolstra) no está suficientemente difundido, pero ayuda a resolver necesidades habituales en la maquetación de sitios web, como evitar la repetición de código o conseguir que un elemento de la página presente un formato visual diferente dependiendo de la situación. El CSS dinámico surge de la combinación de dos grupos de lenguajes:

  • CSS (Cascading Style Sheets). El lenguaje que describe la presentación de un sitio web separándola de su estructura.
  • Lenguajes del lado del servidor. Generan programas que se ejecutan en el servidor y no en el cliente. Por ejemplo, si el usuario (cliente) solicita realizar una operación matemática, el cálculo se ejecutará en el servidor y el resultado se mostrará luego de volver a cargar la página. Algunos de ellos son PHP, ASP, Perl y JSP.

En DCSS, se utiliza un lenguaje del lado del servidor para generar un archivo CSS donde algunos de los atributos estarán sujetos a variables; por lo tanto, su valor se definirá al momento de cargar la página. Esto brinda distintos comportamientos a una misma regla CSS.

DCSS agiliza la escritura de código. Un inmemorable código de color en formato hexadecimal (por ejemplo, #E54545) puede representarse con una variable (por ejemplo, rojoclaro). Además, cuando queramos modificar ese valor solo tendremos que hacerlo una vez, en la asignación de la variable. Incluso podemos hacer que la página obtenga algunos atributos CSS desde una base de datos, de manera que modificando algunas de sus entradas ajustemos el diseño indirectamente.

Además, metalenguajes como LESS y Sass permiten declarar y utilizar variables con facilidad en el mismo archivo de hojas de estilo, asignando sus valores en tiempo de compilación. Dos herramientas prácticas para crear diseños dinámicos y extender así el poder de CSS.

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