Usuario:Christian Campos

Objetivo General

Diseñar una plantilla en wordpress para el sitio de la Escuela de Arquitectura y Diseño del la Pontificia Universidad Católica de Valparaíso.

Objetivos Específicos

• Diseñar una plantilla que permita una mejor lectura de contenidos, con mejor legibilidad.
• Mejor visualización de los contenidos del sitio.
• Reducir la cantidad de elementos del sitio.

Análisis del sitio e[ad]

Descripción

• Es un sitio realizado en una resolución de 1024px de ancho con una imagen de fondo, header, body , sidebar y footer.

• La imagen de fondo simula una orilla de playa, con el logo de la Pontificia Universidad Católica de Valparaíso y el resto del fondo del sitio es blanco.

• En el header se encuentra el titulo principal "e[ad]" que linkea a la home, con un subtitulo que identifica el nombre del sitio "Escuela de Arquitectura y Diseño Pontificia Universidad Católica de Valparaíso" junto con unos links para iniciar seción, recuperar contraseña y un buscador de contenidos del sitio.

• En el body se encuentra una barra de navegación de 433px de ancho, sin fondo y con 5 botones divididos por líneas verticales. Al pasar por encima se marca un cuadro gris en cada sección y se despliega un menú que muestra las subsecciones.

• Luego muestra una noticia principal con un fondo gris de un ancho de 606px y una imagen de 261 x 195 pixels. En el titulo muestra la página a la que corresponde en letra capital, un titulo en tamaño 1.5em con serif y una cabecera o entrada del post.

• Más abajo se muestra una continuación de esta sección de noticias de un ancho de 288px y una imagen de 261 x 173 pixels, mostrando 3 de éstas.

• A la derecha de esta columna se encuentran los post correspondientes al ámbito académico, que a diferencia de la columna anterior identifica etiquetas. Sus imágenes también tienen un ancho de 261 px.

• En la 3º columna se muestra una noticia relevante correspondiente a algú evento o exposición, un sidebar que especifica post correspondientes a la temática de alumnos y otro de taller Amereida. Al inferior de la columna aparece información acerca del contacto.

• En el footer se especifican los créditos, años de la escuela, subscripción a RSS, cómo suscribirse, el autor, colofón, optimización para firefox, acerca de la Escuela de Arquitectura y Diseño de la PUCV y su licencia Creative Commons.

• Al ingresar a una sección la información del post ocupa dos columnas y se conserva la 3º columna, agregándole un cuadro con imagenes en rotación correspondientes a jw image rotator. Bajo el post aparece un cuadro que especifica palabras claves además de dar la posibilidad de enviar un comentario.

• En el sitio existe una jerarquía de contenidos:

1. Página
2. Título
3. Entrada
4. Imagen
5. Cabecera del texto

• En los post existe una jerarquía de contenidos:

1. Título
2. Autor de la entrada
3. Fecha
4. Categoría
5. Imagen
6. Texto
7. Palabras claves
8. Comentarios
9. Formulario de comentario

Problemas

• Exceso de elementos gráficos como bullets, líneas punteadas y líneas de división, además de colores de fondo.
• Exceso de color rojo en tipografías el cual le da demasiado peso visual a la portada.
• Uso de JW Image Rotator para mostrar imagenes netamente decorativas que no corresponden a ninguna sección o categoría.
• Uso de más de 12 comportamientos tipográficos diferentes.
• Botones y cuadros de texto demasiado grandes.
• Uso de 3 columnas de información, con una tercera columna que puede variar en su posición priorizando el peso visual del sitio.
• Errores de validación del código.
• Imágenes pequeñas.

Atributos

• Buena organización de contenidos con un uso adecuado de páginas, entradas, categorías y etiquetas.
• Correcta programación del sitio, salvo por errores de sintaxis.
• Correcto uso de navegación e interacción, siendo un sitio fácil de recorrer.
• Sitio rico en contenidos.

Propuesta

Como propuesta se decide mejorar la visualización del sitio, disminuyendo la cantidad de elementos y dar prioridad a los interlineados y espacios entre columnas, facilitando la lectura de las estructuras principales del sitio, conservando en todo momento su organización de contenidos.

Decisiones

• Se conserva la imagen de fondo, el titulo, y se cambia a una tipografía con serif el subtitulo dándole un mayor peso visual.
• El fondo se pone en un gris claro, #F2F2F2.
• Se sube la barra de navegación, conformándola como elemento con un fondo en degradez.
• Se achica el tamaño del cuadro de texto y botón del buscador, buscándo una mayor fineza gráfica. Se alinea con la barra de navegación.
• Se conservan los cuadros contenedores de los post, pero con color blanco de fondo.
• Se reduce el ancho del cuerpo del sitio.
• Se reducen la cantidad de post de la postada de 4 a 3.
• Se reduce la altura de la noticia relevante correspondente a exposiciones.
• Aumento del ancho de la 2º columna correspondiente a Ámbito Académico de 282px a 573px.
• Aumento del tamaño de las imágenes.
• Aumento de los espaciados entre columnas.
• El sidebar ya no se muestra en la 3º columna, baja al footer.

Wireframes

Wireframe de la home

Mouse sobre la barra de navegación

Mouse sobre la subsección de la barra de navegación

Mouse sobre la noticia principal

Mouse sobre la noticia inferior

Diagramación de páginas y su formulario de comentarios.

Interfaz

[Visualizar la interfaz]

Referencias

• La plantilla de wordpress utilizada fue Mimbo2 Magazine, que es una plantilla de tipo Magazine, es decir que permite poner entradas a dos o más columnas. Esta propiedad no es muy común en las plantillas wordpress, por lo que fue el principal parámetro por el cual se decide ocuparla. Descargar Mimbo2.

• WordPress Themes, A guide to creating your own themes with WordPress, por John Godley.

• Manual de PHP
• Manual de Referencia CSS 2.1