viernes, 31 de julio de 2009

HA903 Diseño de una web Version 2

De acuerdo a las sugerencias de la lista linuxeslibre realicé algunas modificaciones al diseño anterior:
  • Aclaré el gris de los recuadros,
  • Oscurecí el azul-verdoso del encabezado de los recuadros. Apliqué este mismo color al fondo del encabezado principal donde está el logo.
  • Reemplacé los asteriscos por circulos para las viñetas de las noticias.

boceto del aspecto de la pagina principal del sitio Linux es Libre

martes, 28 de julio de 2009

HA903 Diseño de una web

Hace diez días más o menos realicé un boceto rediseñando la página principal del sitio web Linux es Libre utilizando Inkscape y Gimp. También hice un rediseño preliminar del logo.
Esta actividad corresponde a la segunda alternativa propuesta como actividad de final de trimestre del curso HA903 y además lo realicé como una manera de colaborar con la comunidad Linux es Libre.
Para el rediseño, me basé en el aspecto de la página principal del sitio del día 17 de Julio del 2009, lo aclaro porque el sitio web Linux es Libre está en continuos desarrollo y actualización.
Así quedó el boceto del nuevo diseño:
boceto del aspecto de la pagina principal del sitio Linux es Libre

Descripción

Al mirar la página principal de Linux es Libre, considero que se necesita una reorganización de la informacion para que sea más fácil la navegación por parte de los usuarios, como dice jEsuSdA en su artículo: "que los usuarios encuentran lo que buscan, navegan con comodidad y soltura por la página".
Una vez que decidí dividir la información en tres columnas, me puse a buscar diseños en las plantillas para Blogger y encontré tres, que me sirvieron de guía para crear mi propio diseño del sitio.
1. Fervens
Plantilla llamada Fervens, diseñada por Design Disease, adaptada para Blogger por BlogandWeb 2. Magzmo
Plantilla para Blogger llamada Magzmo3. o2
Plantilla llamada o2. Esta basada en el theme para wordpress “O2” de Eches, adaptado para Blogger por BlogandWeb

Procedimiento

En Gimp, realicé una captura de la pagina, recorté cada contenido y los guardé como imágenes independiente, es decir, documentos, logo, fecha, bienvenidos, anillo, búsqueda de Google, Grupos Google, páginas amigas, enlaces horizontales, enlaces verticales, etc.
En Inkscape, importé cada imagen creada en Gimp. Comencé a re-ubicarlas, a distribuirlas en la primera, segunda y tercer columnas, a decidir qué contenido descartaría por considerarlo duplicado, etc.
Organizando cada sector de información en Inkscape del sitio web Linux es LibreEn otro documento nuevo, comencé a crear el boceto:
- Utilizando rectángulos modificados con la herramienta Editar nodos... para ubicar la información.
- Incorporando nuevamente el texto con la herramienta texto.
- Re-diseñando los formularios para la búsqueda y el grupo de Google. En Gimp: recorté los botones Buscar y Suscribirse y al logo de Google le quité el fondo. Los guardé como imágenes png independientes. En Inkscape, las importé, las ubiqué en su lugar y les agregué el texto.
- Para las páginas amigas, consideré que sería mejor y más sencillo, crear los enlaces sólo de texto.
- Modifiqué el aspecto para "Averigua tu actual IP y tu velocidad de conexión", donde alargué el color de fondo en Gimp, lo guardé como imagen. La importé y le incorporé texto en Inkscape.
- Rediseñé el logo (en otro posteo lo explico)
- Elegí y apliqué colores a los recangulos y al texto plano y a los enlaces.

Espero haber aportado en facilidad de lectura de la página.

Ahora sólo resta que la comunidad de Linux es Libre lo vea, opine, realicemos los cambios que se soliciten y podamos implementarlo utilizando CSS.

lunes, 20 de julio de 2009

Cursos de autoformación: Moodle y Squeak

El lunes 22 de Julio me inscribi en un curso de autoformacion en Moodle creado por Iris Fernández.
También estoy haciendo otro curso de autoformación Squeak, creado por ella. No recuerdo cuando lo comencé, pero hice varias cosas interesantes, puesto que no tenia ni idea de Squeak. Actualmente he abandonado un poco a Squeak pero pronto lo retomaré.

Curso de Autoformación de Moodle


Lo que hice hasta ahora, utilizando las guías creadas por Iris y leyendo la ayuda de Moodle. Aquí los enlaces:

1. Ingresar a la plataforma del curso:

Plataforma del curso

Pasos para ingresar al Grupo de autoformación: Moodle

2. Crear una plataforma moodle en un hosting gratuito
Crear plataforma en Key to School

3. Modificar el idioma por defecto: inglés.
Cambiar el idioma de una plataforma Moodle en Key to School

4. Crear categorías para organizar los cursos

5. Crear un curso en Moodle

6. Configurar un curso

5. Modificar el tema de la plataforma:
Accedí a Administración / Apariencia / Temas / Selector de temas
y elegí un tema que me agradó.

6. Ahora me interesa aprender a modificar este tema. Algunas puntos que me interesa hacer son:
a. Modificar el logo de la cabecera
b. Modificar el diseño de la página principal

Estos dos enlaces aun no los he leido en su totalidad ni los he puesto en práctica.

jueves, 9 de julio de 2009

Gimp - Manejo de ventanas

He notado que las personas que recién se inician con Gimp, tenga experiencia en otros programas del mismo tipo o no, les ocurre que se pierden o se desconciertan cuando al tener una imagen abierta y luego abrir otra, ésta se ubica detrás de la que ya está abierta... lo más cómodo sería que se ubique delante...
Me puse a buscar soluciones en Archivo / Preferencias, accedí a la Gestión de la ventana y en Hints del gestor de ventanas, tanto en Hints para la caja de herramientas y Hints para otros empotrables, seleccioné Mantener por encima. Reinicié Gimp. Probé y no hubo cambios en cuanto a las ventanas, sólo que la caja de herramientas y cualquier cuadro de diálogo queda siempre arriba, inclusive cuando acciono otra ventana que no es de Gimp, por ejemplo el navegador web.... :(

Pregunté en la lista de GImp y me dan la misma solución alegando que funciona... quizás la versión que tengo de Gimp, 2.4.7 que es la que Lenny tiene en los repositorios tiene el problema...

Aquí una imagen de cómo abre las ventanas:
Comportamiento de las ventanas al abrir la segunda ventana