jueves, 29 de octubre de 2009

Re-diseño del sitio Linux es Libre v4

Teniendo en cuenta todas las sugerencias que he recibido, decidí probar con otro diseño para Linux es Libre, tanto para el logo como para la pagina principal.
Para crear este nuevo diseño me basé en esta plantilla: http://www.freecsstemplates.org/preview/morningdew

Modificaciones

  1. Enlaces: dividí los enlaces en dos grupos, los más generales en un menú superior y los más específicos en un menú ubicado debajo del encabezado.
    El menú general es más alto que el otro menú. También el tamaño de la tipografía es un poco mayor.
    Cada elemento del menú está separado del otro por una barra vertical
  2. Encabezado: está formado por el logo, un listado de qué ofrece el sitio Linux es Libre y por un formulario de búsqueda, al cual le quité la opción de elegir entre buscar en la web o el sitio, quedó para buscar dentro del sitio solamente.
  3. Logo: le dí mayor preponderancia al nombre Linux es Libre, utilicé una tipografía sencilla y clara. Coloqué un tux estandar (que tendríamos que modificarlo para que esté relacionado con Linux es Libre). Incluí el slogan del sitio en una tipografía informal.
  4. Contenido: ahora está ubicado a la izquierda, sin utilizar recuadros como en el otro diseño
  5. Enlaces externos, otros formularios: ubicados en el lateral derecho.
  6. Colores: los colores principales de la página son: celeste, blanco y gris casi blanco. La intención es transmitir la sensación de libertad, tranquilidad. Los colores preponderantes en el logo son: azul y anaranjado, el azul está relacionado con lo técnico [1] y el naranja con la calidez y la alegría.[2]

Los invito a ver el nuevo diseño

Nuevo diseño de la página Linux es Libre

[1] http://www.mariaclaudiacortes.com/colors/Colors.html

[2] http://www.webtaller.com/maletin/articulos/significado_de_los_colores.php?bol0108-1

miércoles, 21 de octubre de 2009

Re-diseño del sitio Linux es Libre v3

De acuerdo a otras sugerencias del grupo Linux es Libre, realicé las modificaciones correspondientes:

  1. Falta de legibilidad del texto en los enlaces de los titulares: me sugirieron cambiar la tipografía elegida, entonces me di cuenta que no había elegido ninguna tipografía y que mostraba la que está por defecto. Para todo el cuerpo de la página elegí la familia Arial, Helvetica, sans-serif que es la que tiene el sitio actualmente...
  2. Falta de un enlace al foro: agregué el enlace debajo de la suscripción al grupo como está actualmente en el sitio http://www.linuxeslibre.com.ar/.

Así está quedando la página principal del sitio Linux es Libre

Espero comentarios, sugerencias...

Re-diseño del sitio Linux es Libre v2

De acuerdo a algunas sugerencias cambié los colores del sitio, modifiqué el aspecto de los enlaces y re-ubiqué algunos sectores (cajas).
Este es el nuevo diseño (sólo probado en Firefox)

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.

sábado, 3 de octubre de 2009

HA903 Creando un banner entre todos Fin

Concluimos la última tarea del curso HA903, la cual consistía en crear, entre todos los participantes, un banner y un afiche para dos actividades que se desarrollarán en el marco del EDUSOL 2009.
- Porque instalar no es suficiente, curso básico de GNU/Linux para personas no técnicas
- Día de la educación y cultura libre, charlas presenciales previas al EDUSOL.
Después de varios intercambios y participación de algunos compañeros terminamos las dos propuestas:

Porque instalar no es suficiente

Banner
Banner encuentro Edusol 2009 Porque instalar no es suficiente: curso basico de GNU/Linux
Afiche
Afiche encuentro Edusol 2009 Porque instalar no es suficiente: curso basico de GNU/Linux

Día de la educación y cultura libre

Banner
Banner encuentro Edusol 2009 Dia de la educacion y la cultura libre: Charlas presenciales previas al Edusol
Afiche

<br />Afiche encuentro Edusol 2009 Dia de la educacion y la cultura libre: Charlas presenciales previas al Edusol