Proyecto web de un instituto con WordPress

Asignatura: Sistemas de Gestión de Contenidos
Titulación: Grado Multimedia
Nombre del estudiante: Alba Jiménez Aguiló
Consultor y profesor: Antonio Laiz Triana / Ferran Adell Español

Introducción

Sistemas de Gestión de Contenidos es una asignatura de eminente carácter práctico que se dedica, como su propio nombre indica, a enseñar sobre sistemas de gestión de contenidos (CMS o content management systems), es decir, sobre las aplicaciones que permiten administrar sitios web complejos.

En esta asignatura, la segunda prueba de evaluación continuada (PAC 2) permitió poner en práctica los conocimientos teóricos que ofrece, entre otros, uno de los CMS más populares actualmente como lo es WordPress. A partir de la creación de un blog y portafolio individual, los alumnos pudimos tener una primera toma de contacto con este gestor de contenidos conociendo los pasos de su instalación, creación de campos personalizados y categorías y personalización de plantillas de las diferentes páginas creadas.

Esta prueba sirvió como aprendizaje y preparación para llevar a cabo la práctica final de la asignatura (PRA) sobre la que se centra este artículo. En esta práctica, realizada por tanto en la plataforma WordPress, se requería a los alumnos realizar un caso real des de cero, un proyecto web de un instituto.

Este caso real se podía aplicar a cualquier instituto real o inventado y, en mi caso, se escogió crear un proyecto web totalmente nuevo sobre un centro educativo ya existente, pero sin utilizar ninguno de sus contenidos en texto o imagen, a excepción de su nombre. Así, en la práctica final los alumnos nos teníamos que poner en el papel de desarrolladores y realizar un análisis técnico del diseño que habría aceptado el supuesto cliente y que venía descrito en el documento de la práctica para empezar a crear el portal digital resultante. Este encargo tenía como objetivos la construcción de todo el sitio web (site building) de un instituto de más de 1.000 alumnos, creando una interfaz (front end) multilenguaje en los idiomas catalán y castellano y poniendo especial énfasis en su portada, y además construir un espacio desde el back office para que profesores y alumnos pudieran publicar artículos e imágenes; todo ello siempre pensando en la usabilidad.

Etapas y retos

Para desarrollar este proyecto web, después de conocer sus objetivos, empecé con un proceso de investigación o benchmarking de otras páginas web de instituto que evidenciaran buenas prácticas sobre el área, con el propósito de crear las diferentes páginas que formarían el portal. Esta fue una parte en la que se puso mucho interés y dedicación porque lo que se pretendía era informar sobre diferentes aspectos del centro y sobre los cursos que mi instituto ofrecía, todo ello intentando que esta información no fuera excesiva y con una navegación de pocos niveles. La recopilación de esta información hizo que se creara la arquitectura del sitio web y se configuró el menú principal con los correspondientes subniveles. Un punto destacable fue que el contenido de cada una de las páginas que formaban el proyecto podía recogerse de aquellas páginas web de institutos reales de las que habíamos recopilado la información, de manera que los alumnos no teníamos que escribir desde cero cada uno de los textos.

Con la arquitectura del sitio y los textos e imágenes recopilados, se inició la fase de creación de la identidad gráfica, pensando para el logotipo en el supuesto barrio de Barcelona donde estaría situado nuestro instituto: el barrio de La Guineueta. Así, se creó en Adobe Illustrator, mediante diferentes imágenes vectoriales, el logotipo del centro.

En este momento, se tenía que dar forma al proyecto de manera real y pasarlo a la plataforma de WordPress. Para ello se descargó un tema de tipo educación y se utilizaron los colores que se le habían dado al logotipo. Al empezar a crear ahora la estructura del sitio web, no se realizaron antes diferentes wireframes o prototipos, sino que se siguieron las pautas marcadas en el enunciado de la práctica, donde el diseño de la portada era lo más importante y donde debíamos centrar la mayor parte de nuestra atención. Esta debía contener cabecera, cuerpo y pie de página. La cabecera, donde se incluía el menú principal, y el pie de página, con información complementaria del instituto, siempre estarían presentes en cualquier página donde se situara el usuario. En cambio, el cuerpo tenía que dividirse en cuatro bloques diferenciados: un carrusel con tres actividades destacadas, cuatro actividades realizadas en el centro en formato reducido, un carrusel que mostrara las fotografías de los supuestos profesores y un formulario para contactar con la secretaría del centro.

Una vez la estructura de la portada estuvo realizada, se incluyeron en el menú principal nuevas opciones que hacían referencia a los cuatro bloques de la portada que, mediante enlaces ancla, debían permitir la navegación por la misma desde cualquier lugar del portal donde se encontrara el usuario. Esto supuso tener que remodelar el esquema que se había creado en el momento de crear la arquitectura de la web; lo más difícil fue crear nuevos submenús del menú principal con etiquetas que informaran al usuario de manera clara dónde le podrían dirigir.

Por otra parte, se tuvo en cuenta la usabilidad a través de las categorías con la creación y aparición de las migas de pan o breadcrumbs en cada una de las páginas facilitando la navegabilidad de los usuarios por todo el sitio web.

En la realización de estos bloques de portada y también en la inclusión del multilenguaje en el portal, los grandes retos fueron escoger el plugin adecuado que permitiera realizar todas las especificaciones. Ello también tuvo un proceso de investigación previo, fuera del sitio web, y un posterior aprendizaje de los escogidos, para tener la certeza de que cumplirían con los requisitos que marcaba la práctica y que permitirían cumplir los objetivos en mente.

Cuando toda la interfaz del centro educativo estaba lista, la última fase que quedaba para terminar el proyecto era conseguir que los alumnos y profesores que se dispusieran a publicar artículos e imágenes en la página web lo hicieran de manera clara y rápida. Para ello, se utilizó de nuevo la categorización y la creación de diferentes tipos de usuarios.

Conclusiones

Esta práctica que se nos ofreció como final de la asignatura para mí fue muy motivadora. Ya no solo por el hecho de que se nos presentara como un supuesto caso real, sino por la libertad que teníamos los alumnos de crear un sitio web totalmente desde cero sin ninguna pauta que seguir en cuanto a las diferentes páginas por incluir y su diseño completo, a excepción de los bloques que debían aparecer en portada, lo cual personalmente agradezco, pues a la hora de crear un proyecto que abarca tanto contenido, tener una ayuda en la distribución de la página principal permitió que nos centráramos del todo en cómo queríamos representar cada bloque teniendo ya resuelto qué mostraríamos.

Con esto, la investigación previa de buenas prácticas de centros educativos reales fue una de las partes más importantes y a la que hay que prestarle gran atención, pues en esta práctica lo importante era ver cómo se creaba el proyecto en la plataforma de WordPress, pero también es muy necesario el trabajo individual en la creación del diseño y estructura de las páginas previo, algo que no se muestra explícitamente en la práctica (wireframes, prototipos…), pero que es esencial a la hora de desarrollar el sitio web. Lo que sí podíamos mostrar de este proceso, aparte del resultado visual de todo el proyecto en WordPress, era la usabilidad que cada uno le aportaba a su portal. En mi caso, el trabajo de categorización fue esencial para crear unas breadcrumbs que acompañaran al usuario en cualquier punto de la web donde se situara, y en la parte del back office sirvió para poder guiar fácilmente a los supuestos usuarios y profesores que se dispusieran a publicar diferente información.

Si volviera a empezar esta práctica, dedicaría más tiempo a investigar sobre los diferentes plugins que permitieron mostrar los bloques de la página principal, unos que visualmente cumplieran más con lo que en un principio tenía en mente en cuanto a diseño, y también investigaría más sobre los temas de tipo educación que ofrece WordPress.

En general, puedo concluir que estoy muy satisfecha con los resultados obtenidos, a pesar de que posiblemente realizaría mejoras a nivel visual, porque se cumplen todos los objetivos demandados en los requisitos. Además, contiene una navegabilidad sencilla de pocos niveles, con no demasiada extensión de contenido, que piensa en el usuario para satisfacer las necesidades informativas del centro de manera concisa y clara. Con todo, me gustaría mencionar que no solo se ha tratado de plasmar el contenido en la plataforma WordPress, sino que para mí ha sido un trabajo de investigación en todos los sentidos, desde la arquitectura de la información y el diseño del sitio pasando por el estudio de la misma plataforma en cuanto a funcionamiento, plugins y temas.

Documentación

JULIÀ LUNDGREN, Daniel (2012). El WordPress. Marterial didáctico UOC. Barcelona.

El contenido del sitio web se ha extraído e inspirado en las siguientes páginas web:

Institut Icària de Barcelona [en línea] [fecha de consulta: 21 de diciembre de 2020]. Disponible en: http://www.instituticaria.cat/.

Institut Menéndez y Pelayo de Barcelona [en línea] [fecha de consulta: 21 de diciembre de 2020]. Disponible en: https://institutmenendezypelayo.cat/.

INS Terrassa [en línea] [fecha de consulta: 21 de diciembre de 2020]. Disponible en: https://insterrassa.cat/.

Cita recomendada: JIMÉNEZ AGUILÓ, ALBA. Proyecto web de un instituto con WordPress. Mosaic [en línea], junio 2021, no. 194. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n194.2125