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 el 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.
- Bitácora de celi
- Log in or register to post comments