BUSCAR

Incorporando CSS3 en Agrega v2.0

9 Octubre 2009

Archivado en: Técnico — Etiquetas:, , — Equipo de Desarrollo @ 7:17 am

Una de las novedades de la versión 2.0 de Agrega es la incorporación a sus hojas de estilo del nuevo estandar CSS3 (Cascading Style Sheet v3).

css3-blog2

Las hojas de estilo CSS son un estándar del World Wide Web Consortium (W3C) que permite a un desarrollador web separar los elementos a pintar en una página web (normalmente definidos en una página HTML) de la información sobre cómo pintarlos (estilos, colores, forma, etc…).

Desde 1997, la versión usada en el mundo web ha sido CSS2. Durante los últimos años, la evolución de la web ha sido vertiginosa, especialmente con la aparición de los sitios Web2.0 y de la aparición del vídeo y flash en los navegadores.

css3-blog

La nueva versión CSS3 publicada durante 2008 incorpora entre otras mejoras:

  • La definición a nivel de hoja de estilos de bordes redondeados, sombras,  …
  • Mejor alineamiento de los elementos presentados en una página web.
  • Mayor número de opciones para definir el esilo de las tablas (alineamiento, multi-columna, efecto zebra, …)
  • Integración con las nuevas características de HTML5.

Este nuevo estándar permite que las nuevas evoluciones de Agrega incorporen nuevas características visuales con hojas de estilos menos pesadas (menor tiempo de carga) en aquellos navegadores compatibles con CSS3. A día de hoy las últimas versiones de Internet Explorer, Firefox, Opera y Safari ya incorporar la compatibilidad con varios elementos de este nuevo estándar.

Un cambio de imagen para Agrega

28 Julio 2009

Archivado en: Todas, Técnico — Etiquetas:, , , — Equipo de Desarrollo @ 7:00 am

La nueva versión de Agrega (2.0) incorpora un cambio de imagen que la hace más atractiva y actual acorde con las nuevas tendencias de Web 2.0, cada vez más presentes en Internet.

¿Sobre qué hemos trabajado para conseguir este cambio de apariencia?

  • Simplicidad: cuanto más sencillo mejor, teniendo siempre en cuenta cual es el propósito de las páginas en las que navegan los usuarios y eliminando contenido innecesario pero sin quitar funcionalidad.
  • Composiciones (layouts) centradas: para obtener el contenido centrado en la página.
  • Navegación superior: anteriormente ya aparecía arriba, pero se ha resaltado su posición.
  • Diferenciar distintas áreas: para que cada área con diferente funcionalidad sea claramente diferenciable, incluso sin ser resaltadas con diferentes colores.
  • Navegación sencilla: se busca que el usuario sepa dónde está y a qué funcionalidad puede acceder desde donde está.
  • Colores fuertes: usando colores brillantes, sólidos y fuertes se consigue una separación de contenidos más sencilla.
  • Superficies con detalle: ya sea mediante sombras, difuminados, etc.
  • Iconos atractivos: para que sean fácilmente reconocibles, que no provoquen confusión.
  • Bordes redondeados: que den un aspecto más agradable a las páginas.

Todos estos cambios se han llevado a cabo con el apoyo de CSS 3. Aquí os dejamos un ejemplo de la nueva imagen de la plataforma:

portada_nuevo_estilo

Para conocer los diferentes estilos implementados en la versión 2.0 de Agrega, puedes visitar la Guía de estilos y plantillas.