Usuario:Carla Sánchez

Wordpress: Rediseño del sitio de la escuela

Objetivo

• Rediseñar la interfaz tema wordpress del sitio de la Escuela de Arquitectura y Diseño de la PUCV. Mejorar su visualización, intentando que llegue al mayor número posible de usuarios, siguiendo las pautas relacionadas con la usabilidad y la accesibilidad.

Acerca de la Arquitectura de la información

La Arquitectura de la Información se encarga de la fundamentación, análisis, planificación y estudio de la disposición de los datos contenidos en los sistemas de información interactivos. En relación a los sitios web el ‘Information Architecture Institute’ define la Arquitectura de la Información como:

- El diseño estructural en entornos de información compartida.

- El arte y la ciencia de organizar y rotular sitios web, intranets, comunidades en línea y software para promover la usabilidad y buscabilidad.

- Una comunidad emergente orientada a aplicar los principios del diseño y la arquitectura en el entorno digital. Con el fin de que la asimilación de contenidos por parte del usuario sea eficiente y efectiva (accesible y usable) la Arquitectura de la Información como proceso en general, se encarga de supervisar:

· Los estudios de audiencia y la definición del público objetivo

· El diseño de la interacción

· La navegación

· La planificación, gestión y desarrollo de contenidos (el diseño gráfico es tarea del diseñador)

· La facilidad de búsqueda y el diseño de la interfaz de búsqueda.

· La usabilidad.

· El feedback del resultado y el rediseño de la interfaz.

Tecnología Blog

Básicamente, los Blogs (también llamados weblogs o bitácoras) son espacios personales de escritura en Internet. Pueden ser pensados como diarios online, o como sitios en que una persona suele escribir periódicamente. Toda la escritura, estilo e imágenes se manejan vía Web.

Los Blogs están diseñados para que, como en un diario, cada artículo (post) tenga fecha de publicación, de tal forma que el escritor (también conocido como blogger o weblogger) y los lectores pueden seguir un camino de todo lo publicado y archivado. Por lo general, también permiten que los lectores de los post puedan comentar cada uno de los artículos (permitiendo una retroalimentación, que en una página convencional era más difícil de lograr).

Origen de los Blogs

Existen al menos dos versiones sobre el origen y posterior evolución de los Blogs. La primera de ella nos habla sobre la necesidad de una persona en particular por escribir sobre sus preocupaciones y hacerlas públicas en la Web; la segunda se enfoca ante la necesidad de los Webmasters y programadores en actualizar, fácil y rápidamente, los contenidos de sus sitios.

Características técnicas y sociales

Características técnicas

a)enlaces

Existen algunos elementos que suelen ser comunes en los weblogs, como son una lista de enlaces a otros weblogs (denominada habitualmente blogroll), un archivo de anotaciones anteriores, enlaces permanentes (permalinks) para que cualquiera pueda citar (enlazando) una anotación, o una función que permite añadir comentarios. Una particularidad que los diferencia de los sitios de noticias es que las anotaciones suelen incluir múltiples enlaces a otras páginas Web (no necesariamente Weblogs) como referencias o para ampliar la información.

b) Enlaces inversos

En algunos casos las anotaciones o historias permiten que se les haga trackback, un enlace inverso que permite, básicamente: saber que alguien ha enlazado nuestro post, y avisar a otro Weblog que estamos citando uno de sus posts; todas los trackbacks aparecen automáticamente a continuación de la historia, junto con los comentarios.

c) Sindicación

Otra característica de los Weblogs es la multiplicidad de formatos en los que se publican. Aparte de HTML, suelen incluir algún medio para sindicarlos, es decir, para poder leerlos mediante un programa que pueda incluir datos procedentes de muchos medios diferentes. Generalmente se usa RSS para la sindicación, aunque en el año 2004 ha comenzado a popularizarse también el Atom. Ambos son una versión del lenguaje XML.

Características Sociales

Los sitios de noticias o periódicos digitales suelen estar administrados por profesionales, mientras que los Weblogs son principalmente personales y aunque en algunos casos pueden estar incluidos dentro de un periódico digital o ser un Blog corporativo, suelen estar escritos por un autor o autores determinados que mantienen habitualmente su propia identidad. Un aspecto importante de los weblogs es su interactividad, especialmente en comparación a páginas web tradicionales. Dado que se actualizan constantemente y permiten a los visitantes reaccionar a las entradas, los Blogs funcionan a menudo como herramientas sociales, para conocer a personas que se dedican a temas similares.

Ventajas y Desventajas de los blogs

• Son fáciles de actualizar
• Cada post puede verse como una “página independiente”
• Permiten crear verdaderas comunidades virtuales (a través de los

blogrolls)

• Las entradas o posts siguen un orden “cronológico inverso”, o sea,

que en la primera página del Blog se visualizan los últimos posts publicados

• Facilitan la retroalimentación, ya que los lectores pueden escribir

comentarios a cada post

Como contraparte podemos mencionar:

• La gran mayoría utiliza un lenguaje informal.
• En muchos casos los webloggers carecen de credibilidad

Datos acerca de Wordpress

WordPress es un sistema de gestión de contenido enfocado a la creación de blogs. Fue creado a partir del desaparecido b2/cafelog y se ha convertido junto a Movable Type en el CMS más popular de la blogosfera. Las causas de su enorme crecimiento son, entre otras, su licencia, su facilidad de uso y sus características como gestor de contenidos. Otro motivo a considerar sobre su éxito y extensión, es la enorme comunidad de desarrolladores y diseñadores, que se encargan de desarrollarlo en general o crear plugins y themes para la comunidad. WordPress nació del deseo de construir un sistema de publicación personal, elegante y con una buena arquitectura ("Code is poetry"). Basado en PHP, MySQL y licenciado bajo GPL, Wordpress pone especial atención a la estética, estándares web, y usabilidad.

Estructura

•Wordpress, en principio, es un sistema de publicación web basado en entradas ordenadas por fecha, entre otras muchas posibilidades además de páginas estáticas.

•La estructura y diseño visual del sitio depende del sistema de plantillas (themes).

•La filosofía de Wordpress apuesta decididamente por la elegancia, la sencillez y las recomendaciones del W3C pero depende siempre del theme a usar. "Classic", por ejemplo es un theme que viene "de serie" y que es válido como (X)HTML Transicional y CSS.

•Separa el contenido y el diseño en XHTML y CSS, aunque, como se ha dicho, depende del "theme" que se esté usando. No obstante, el código que se intenta generar en las entradas ("posts") apuesta por esta característica forzando -si así se elige- un marcado correcto.

•La gestión y ejecución corre a cargo del sistema de administración con los plugins y los widgets que usan los themes.

Funcionalidades

• Fácil instalación, actualización y personalización.

• Posibilidad de actualización automática del sistema

• Múltiples autores o usuarios, junto con sus roles o perfiles que establecen distintos niveles de permisos desde la versión 2.0).

• Múltiples blogs o bitácoras (desde la versión 1.6).

• Capacidad de crear páginas estáticas (a partir de la versión 1.5).

• Permite ordenar artículos y páginas estáticas en categorías, subcategorías y etiquetas ("tags").

• Tres estados para una entrada ("post"): Publicado, Borrador, Esperando Revisión (nuevo en Wordpress 2.3) y Privado (sólo usuarios registrados) además de uno adicional: Protegido con contraseña.

• Editor WYSIWYG "What You See Is What You Get" en inglés, "lo que ves es lo que obtienes" (desde la versión 2.0).

• Publicación mediante email.

• Importación desde Blogger, Blogware, Dotclear, Greymatter, Livejournal, Movable Type y Typepad, Textpattern y desde cualquier fuente RSS. Se está trabajando para poder importar desde pMachine y Nucleus además de la importación a través de scripts o directamente de base de datos.

• Guardado automático temporizado del artículo como Borrador (A partir de la versión 2.2).

• Permite comentarios y herramientas de comunicación entre blogs (Trackback, Pingback, etc).

• Permite "permalinks" (enlaces permanentes y fáciles de recordar) mediante mod_rewrite.

• Distribución de los artículos mediante RDF, RSS 0.92, RSS 2.0 y Atom 1.0.

• Distribución de las discusiones (mediante RSS 2.0 y ATOM 1.0).

• Gestión y distribución de enlaces.

• Subida y gestión de adjuntos y archivos multimedia.

• Admite "Plugins" (versión 1.6).

• Admite "Themes" o plantillas y "Widgets" para éstos.

• Búsqueda integrada.

• Búsqueda en entradas y páginas estáticas y Widget de casa para búsqueda integrada de google desde la versión 2.5.[5]

• Integración

• bbPress, sistema de foros de los mismos creadores, se integra automáticamente con Wordpress.

• Integración con el foro Vanilla de Lussumo factible, al menos hasta la versión 2.2 no inclusive.

Themes

Los "Themes" de Wordpress son plantillas de diseño que sirven para establecer la apariencia y estructura de tu blog. Hay una gran comunidad oficial, tanto profesional como amateur, dedicada al diseño de estas plantillas que se suelen listar en el sitio de Wordpress una vez han sido comprobadas y aprobadas oficialmente. Aunque la filosofía de Wordpress apuesta por un marcado válido según las directrices del W3C, las posibilidades de éste sistema, tanto a nivel de diseño, estructura o gestión, y la flexibilidad del sistema de Themes y Widgets en concreto, son enormes y prácticamente permiten tener desde un simple blog hasta un CMS personalizado.

Widgets

Wordpress incorpora un sistema de Widgets para sus plantillas (Themes) desde la versión 2.2 que ofrece numerosas posibilidades y flexibilidad para el diseño y estructura de sus blogs. Plugins Hay una ingente cantidad de plugins que potencian el uso de Wordpress más allá de una simple bitácora y que lo hacen un sistema realmente flexible y prácticamente de propósito general. Los plugins de Wordpress se incorporaron en la versión 1.6.

Puesta en marcha

Diseño de la Interfaz: wireframes y prototipos

---

Los aspectos visuales y de diagramación del Sitio se generan contemplando múltiples variables. Estas darán forma y coherencia al contenido expuesto, generando recorridos visuales que permitan una correcta lectura de la información, de las" rutas de navegación" y de todos los elementos gráficos.

Sitio de la escuela

Interfaz sitio actual de la escuela de arquitectura y diseño PUCV

Descripciones

Header

• Titulo
• Subtitulo
• inicio sesión
• Recuperar contraseña
• Buscador

Body

• Barra de navegación con 5 botones que despliegan información en secciones y subsecciones
• Noticia de cabecera, a esta le suceden 5 noticias
• En la parte superior de la tercera columna está la noticia de ultima hora.

Sidebar

• Post

Footer

• créditos
• suscripciones RSS
• Diseñado por:
• Colofón
• Optimización para Firefox
• Acerca de la escuela
• Creative Commons

Observaciones

- Sitio realizado en una resolución de 1024 pixeles de ancho, header, body, sidebar y footer.

- Posee el mismo menú que el sitio anterior, pero el actual es desplegable en mas contenidos.

- el sidebar está eficazmente ubicado a la derecha, no es por nada que en la mayor parte de los blogs se encuentra ahi, además el hecho de que este ubicado en ese lugar facilita la visión global del sitio y sus componentes, el scaneo como lo llama Nielsen.

- los videos no estan en plataforma youtube, sino en "vineo"

- en la galeria se agrandan las fotos lo que consigue una mejor visualización

- Con respecto al sitio anterior este presenta un cambio importante en el color, si bien el color rojo se hace demasiado presente, para la usabilidad el buen uso de este y un buen contraste permite relacionar areas que tienen alguna similitud o relación, y asi separar las que no la tienen.

- Comunmente los Blogs poseen una estructura que se repite en todos ellos; una cabecera, un pie, una columna de texto y otra de navegación con algunos extras como links. Esta naturaleza hace que sean fácilmente identificables, asi el lector sabe donde tiene que dirigirse en cada momento.

- El sitio en si es bastante usable:

1.- Coloca a cada entrada la fecha de publicación

2.- está en forma visible la suscripción

3.- pone el buscador a la vista

4.- no posee banners inservibles

5.- Utiliza eficazmente su encabezado

6.- Utilizaun buen tamaño de tipografias para no forzar la vista a los visitantes

7.- Considero efectivo la combinación fondo blanco y letras negras.

8.- El titulo principal enlaza la pagina principal

9.- tiene sus elementos alineados con presición

10.- Cada titulo en las noticias tiene un subtitulo abajo que proporciona algo mas de información,sobre lo que trata dicha sección, el espacio entre ambos es minimo, lo que proporciona una relación lógica.

11.- Las tipografías son fáciles de leer

12.- Por último, no tiene errores ortográficos que resten credibilidad al sitio

Wireframes

• 

  Sitio Actual

• 

  pagina principal

• 

  mouse sobre

Corrección y nueva propuesta

Propuesta anterior

1.- Utilicé la plantilla de wordpress mimbo2.2

2.- Tomé las cascadas de estilo ( css ) y lo sume al codigo de fuente del sitio de la escuela para modificar el aspecto en dreamweaver

3.- Al hacer esto genero un html con la imagen con un css renovado (no muy pulido ya que no se escribio desde cero)

4.- Se subio un solo html como ejemplo de distribucion con la cascadas estilos sacadas y modificadas de la plantilla wordpress mencionada

Propuesta definitiva

El primer resultado no fue satisfactorio ya que el cambio fue mínimo , se decide cambiar la base de trabajo. Elijo una nueva plantilla adecuada a una nueva propuesta

La distribucion de plantilla es mas informativa que visual , solo se rescata una imagen junto a un post principal (el ultimo post) , mientras el resto de los post se distibuyen en casillas mas angostas (area de 3 columnas)

1.- Se elije un plantilla wordpres a modificar: Cellar Heat Dark 1.0

2.- Se instala en una cuenta worpress particular http://www.objeto.cl/o

3.- Paralelalemnte en dreaweaver se previsualiza cada seccion en php y se modifica su cascada de estilo

4.- Se escriben 4 entradas con la informacion de entradas de la esuela

5.- Se modifican algunas paginas php . para agregar 2 imagenes fijas en el index y una lista de vinculos

6.- Los cambios css y php se reemplazan en el servidor para hacer el cambio de aspecto.

Visualizar Interfaz

Escuela de Arquitectura y Diseño - PUCV

Propuesta interfaz escuela de arquitectura y diseño PUCV

Comentarios - Propuesta interfaz escuela de arquitectura y diseño PUCV