lunes, 19 de octubre de 2009

Re-diseño del sitio Linux es Libre

Estoy colaborando en el re-diseño del sitio Linux es Libre.
En posteos anteriores mostré los bocetos realizados en Inkscape y Gimp. En estos días me puse a crear la página principal en html y css, utilizando al principio Kompozer y luego cssed (un editor css que encontre en el gestor de paquetes Synaptic).

Modificaciones

Al comenzar a dar forma a la página surgieron modificaciones:
- Diseño a dos columnas: con las publicidades ubicadas en una fila debajo de la barra de navegación principal.
- Formulario de búsqueda: incluí las opciones de buscar en la web o en el sitio.
- Colores:

  • fondo pagina: gris muy claro

  • fondo contenido: gris claro

  • fondo de los recuadros: blanco

  • encabezados de recuadros, encabezado principal y pie: rosa oscuro

  • fondo de barra de navegacion: rosa oscuro grisaceo

  • Enlace: rosa oscuro negrita

  • Enlace visitado: rosa oscuro sin negrita

  • Enlace sobre el que se pasa el mouse: rosa oscuro tamaño mediano negrita

Maquetando

Al nuevo diseño también lo hice en Inkscape ya que me resulta más cómodo ubicar cada elemento. Luego, en html, creé su correspondiente div y le incluye el formato en una pagina css a través de id y/o class. Ahora para pruebas rápidas, incorporo el css dentro del html directamente.
Para las esquinas redondeadas utilicé las siguientes propiedades, no visibles en IE:

  • -moz-border-radius-topleft: 15px;

  • -moz-border-radius-topright: 15px;

  • -moz-border-radius-bottomright: 15px;

  • -moz-border-radius-bottomleft: 15px;

Así está quedando la página principal en html y css.
Así se ve en Firefox, no la he probado en otros navegadores:


Estándares y accesibilidad

Si bien ya elegí los colores me interesarían que cumplan las pautas de accesiblidad ofreciendo un buen contraste, pero no sé si lo logro. Todavía no queda bien la página al no tener la hoja de estilos, algunos objetos quedan en cualquier lugar y no se distinguen los tilulos principales, quizas deba utilizar los hx porque utilice estilos de titulos propios.
Algunos enlaces sobre accesibilidad que estoy teniendo en cuenta:
- Pautas de accesibilidad - Grupo DIM
- Documentos para el diseño accesible de contenidos en la Web
- Cómo saber si tu sitio es accesible
Por otro lado también estoy intentando respetar los estándares web de la W3C, dando el formato en un archivo css externo, entre otros.


P.D.: modifiqué la css e inclui hx para que mejore el aspecto de la pagina si no se visualiza la hoja de estilos.

2 comentarios:

santos dijo...

Bueno...si ánimo de desmerecer tu arduo trabajo, creo que se podria hacer mejor, dado que una pagina web es la tarjeta de presentacion y es lo primero que entra por la vista.

Si necesitas algo de cooperacion con gusto te ayudare en lo que me sea posible.
Como referencia puedes ir a este enlace para ver algo que estoy haciendo (guia de KDE)
http://santosvz.vndv.com/kde/guia_kde.htm

Celi dijo...

Hola! toda ayuda es bienvenida!
Hace meses que estoy enviando a la lista distintos diseños e ideas, algunos opinan, dan ideas pero casi nadie ayuda...
Realicé otro posteo con algunas modificaciones que me han sugerido (especialmente colores).