Asignatura: Sistemas de gestión de contenidos
Titulación: Grado Multimedia
Nombre del estudiante: Toni Hernández Díaz
Consultor y profesor: Antonio Laiz Triana
Introducción
En una sociedad cada vez más participativa y comunicativa, las instituciones tienden a permitir a sus diferentes usuarios colaborar entre ellos para poder transmitir la información de la forma más próxima, apropiada y adaptada.
En el caso del presente artículo, se presenta una página web multidioma (español y catalán) de un centro de formación de secundaria, donde la información aparece claramente estructurada para facilitar su accesibilidad, y se ofrece la posibilidad de participación en la web mediante roles de usuarios, que se corresponden con la edición de determinadas secciones de la misma. De esta forma se crea un espacio actualizado y colaborativo que facilita la interacción con los usuarios.
La web ha sido realizada con el gestor de contenidos de código abierto WordPress, en el que se han customizado temas y módulos. Esta herramienta permite de una forma relativamente sencilla estructurar los contenidos y permitir la edición y la participación por parte de los diferentes grupos de usuarios de la web.
Etapas del proyecto
1. Arquitectura del sitio web
Análisis
La estructura de los contenidos se ha desarrollado siguiendo un análisis de varias páginas web de centros de formación secundaria existentes, tanto a nivel comunitario como nacional.
De este análisis se ha extraído:
- Definición de las diferentes secciones que normalmente aparecen en estas páginas web.
- La información mínima necesaria que se ha de representar.
- Los diferentes tipos de contenidos que se han de crear para estructurar los contenidos la página web.
- La relación entre los diferentes tipos de contenido.
- Sistema de categorización.
Definición de los tipos de contenidos
Contenidos de la página web del instituto (de acuerdo con la estructura de la arquitectura de WordPress, WP):
- Contenido para actividades (1) («custom post type»), con sus taxonomías correspondientes.
- Contenido para profesores (2) («custom post type»), con sus taxonomías correspondientes.
- Para los contenidos habituales (3) (elementos de información del instituto), se ha utilizado el tipo de contenido «post» que ya viene por defecto en WP, pero se ha cambiado el nombre a «contenidos», con sus categorías correspondientes.
- Para la portada (4), se ha seleccionado el tipo de contenido «página» (que ya viene por defecto en WP). Se ha creado una página con el nombre «bienvenidos» («benvinguts» en catalán) y se ha definido como página principal del sitio web. El contenido del body de estas páginas se mostrará en la portada del sitio web.
Estructura de contenidos
Todos los contenidos del tipo «post» tienen asociada una o varias categorías (2), que se corresponden con la estructura de los elementos del menú. Hacerlo de esta forma permite poder ejecutar consultas, así como estructurar los permanent links, organizar el contenido y presentar una estructura lógica en el breadcrumb de cada página.
En la imagen 3 se puede apreciar claramente la estructura que he seguido a la hora de la creación de los contenidos.
Diseño
Todo el diseño gráfico del sitio lo he realizado especialmente para este proyecto (logotipo, gama de colores, franjas de barras de colores que identifican las secciones), extendiendo y cambiando los estilos de la plantilla padre. El diseño contiene una paleta de colores compuesta por negros, grises y rojos, junto con elementos rectangulares. Las diferentes combinaciones de la gama de colores, junto con las formas, permiten diferenciar e identificar las diferentes secciones de la web.
Gestor de contenidos WordPress
Para trabajar con el tema de la página web del instituto, se ha seleccionado la plantilla Twenty Twenty del gestor de contenidos WordPress.
Posteriormente se ha creado una plantilla hija de Twenty Twenty, que hereda todas las funciones de la plantilla padre y además permite hacer todas las modificaciones necesarias sin alterar la plantilla principal, permitiendo que las actualizaciones se realicen sin problemas.
2. Portada
La portada representa la presentación general del centro, es un espacio donde de un simple vistazo se ha de entender claramente de qué va el sitio web, así como los distintos servicios que ofrece, pudiendo acceder desde ella a los espacios más significativos del centro.
A continuación, realizo una descripción de la portada del instituto, señalando qué funcionalidades de WordPress y plugins he usado:
La cabecera de la página (1) contiene:
- Botón de login-logout.
- Selector de idioma (realizado con el plugin Polylang).
- Funcionalidad de búsqueda.
- Menú principal multilingüe (realizado con el plugin Mega-menu), donde los elementos están estructurados también por categorías.
El cuerpo de la portada contiene:
- (2) Slider con las tres últimas actividades (las más recientes). Este plugin es de creación propia.
- (3) Contenido específico de la página, que proviene del body de la página «bienvenidos». Esta parte es totalmente editable por el usuario, puede contener un texto (como en este caso) o imágenes, vídeos u otros elementos o cualquier información importante (por ejemplo, últimos plazos para matriculación, etc.).
- (4) Listado de actividades. Este bloque presenta las siguientes cuatro actividades (excluyendo las que aparecen en el slider) más recientes, además de un enlace que lleva a la página con todas las actividades. Para realizarlo he creado un código en la página front-page.php, mediante wp-query, que consulta los contenidos de tipo «actividades», siguiendo los criterios de presentación cronológicos.
- (5) Listado de los profesores. Para crearlo he realizado un código en la página front-page.php, mediante wp-query, que consulta los contenidos del tipo «profesores». También contiene un enlace que va a la página con todos los contenidos del tipo «profesor».
Los profesores están dentro de un carrusel customizado.
- (6) Formulario de contacto. El formulario está hecho a través del plugin Contact Form 7 (en español y en catalán), he añadido el formulario a la página front- end.php, mediante un shortcode.
- (7) Presentación esquemática de los cursos del instituto. Aquí se presentan los diferentes cursos que ofrece el instituto, ordenado por áreas: ESO, Ciclos, Bachillerato. Para ello he creado un código en la página front-page.php, que consulta todos los contenidos del tipo «post» y muestra aquellos con unas categorías específicas. Visualmente he hecho una diferenciación para que sea más fácil reconocerlos.
Pie de página:
- (8) Esta parte contiene la dirección, que es un bloque HTML y un menú multilingüe que contiene tres enlaces. Ambos elementos han sido colocados en unas áreas de widgets propios, creadas en functions.php.
3. Contenidos específicos
Contenidos actividades y profesores
Ambos contenidos son contenidos propios «custom post types», con sus taxonomías propias.
En ambos casos se puede apreciar un sidebar dinámico (que se muestra solo en posts, actividades y profesores) con enlaces importantes y el resumen de los cursos que imparte el centro.
Página de listado de las actividades y los profesores
Ambos contenidos son propios de actividades y de profesores, tienen una página con un listado de todos sus contenidos.
Estas páginas están dentro del menú («El instituto») y también se enlaza a ellas desde la página de la portada.
4. Gestión de usuarios y multidioma
Multidioma
Para gestionar los idiomas de la página web se ha instalado el plugin Polylang, definiendo los idiomas del sitio web: español y catalán.
En la cabecera de la página web, hay una nueva área de widget, en la que se encuentra el selector de idiomas.
En diferentes sitios de la página web, especialmente en la página principal, se encuentran diferentes strings (cadenas de texto) que se han de definir, incorporar en el fichero functions.php y posteriormente traducirlos en el interface del plugin.
El plugin proporciona diferentes funciones PHP que permiten filtrar los idiomas, mostrando el contenido en el idioma que le corresponde. Estas funciones las he utilizado en todas las vistas en la página principal y el sidebar de contenidos, actividades y profesores.
Gestión de usuarios
La gestión de usuarios se realiza mediante el plugin User Role Editor, creando tres perfiles: editor, colaborador y autor.
Posteriormente he creado varios usuarios, a cada uno de ellos le he asignado el correspondiente rol y el idioma de administración:
- El rol de «editor» permite publicar y administrar todos los contenidos y páginas tanto propios como ajenos. También puede ver los formularios. No tiene acceso a plugins, apariencia, ni ninguna sección de configuración del sitio web.
- El rol de «autor» puede publicar y administrar únicamente sus contenidos propios. Este usuario no tiene acceso a páginas. No tiene acceso a plugins, apariencia, ni ninguna sección de configuración del sitio web. En mi caso le he dado también permisos para ver los formularios.
- El rol de «colaborador» puede crear contenidos (posts, actividades y profesores), pero necesita para la publicación la aprobación del usuario con rol «editor». Este usuario no tiene acceso a páginas. No tiene acceso a plugins, apariencia, ni ninguna sección de configuración del sitio web.
Conclusiones
Desde mi experiencia y punto de vista personal, considero que existe una relación directamente proporcional entre el tiempo que se dedica a realizar un buen y exhaustivo análisis y el resultado final del proyecto.
A través de un buen análisis, es posible posteriormente utilizar cualquier herramienta y adaptarla (como ha sido en este caso con el CMS WordPress) para presentar el resultado deseado.
Enlaces relacionados
WordPress: https://wordpress.com/es/
Plugins
Contact Form 7: https://contactform7.com/
Polylang: https://polylang.pro/
User Role Editor: https://www.role-editor.com/
Cita recomendada: HERNÁNDEZ DIAZ, Toni. Sistemas de gestión de contenidos: web de un Instituto de educación secundaria. Mosaic [en línea], febrero 2021, no. 190. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n190.2109
Deja un comentario