Creación de un sitio web en Wordpress para la gestión de contenidos en el ámbito de la investigación

! ! UNIVERSIDAD!DE! !VALLADOLID! ! E.T.S.I.!TELECOMUNICACIÓN! ! TRABAJO!FIN!DE!GRADO! ! GRADO!EN!INGENIERÍA!DE!TECNOLOGÍAS!DE!TELECOMUNICACIÓN! ! ! Creación!de!un!sitio!Web!en!Wordpress!para!la! Gestión!de!Contenidos!en!el!ámbito!de!la! investigación! ! ! Autor:! Don!Roberto!Varga!Varga! Tutores:! Dña!Noemí!Merayo!Álvarez! Dña!Patricia!Fernández!del!Reguero!! TÍTULO: Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación AUTOR: Don!Roberto!Varga!Varga! TUTOR: Dña. Noemí Merayo Álvarez TUTOR: Dña. Patricia Fernández del Reguero DEPARTAMENTO: Teoría de la Señal y Comunicaciones e Ingeniería Telemática TRIBUNAL PRESIDENTE: Patricia Fernández Reguero VOCAL: Juan Carlos Aguado Manzano SECRETARIO: Noemí Merayo Álvarez SUPLENTE: Ignacio de Miguel Jimenéz SUPLENTE: Ramón J. Durán Barrosos FECHA: 20 de Octubre de 2018 CALIFICACIÓN: Resumen de TFG La investigación realizada en este Trabajo Fin de Grado trata de llevar a cabo la creación de un sitio web en Wordpress para la gestión de contenidos en el ámbito de la investigación, en concreto, orientada al Grupo de Investigación de Comunicaciones Ópticas de la Universidad de Valladolid (GCO) en el ámbito científico. Para ello, se requiere una correcta síntesis e investigación de toda la información relativa al grupo de investigación y su actividad y un eficiente diseño del sitio web, estructurando y mostrando la información del grupo de investigación de manera óptima y empleando para ello las funciones más adecuadas que ofrece la plataforma de trabajo de diseño de la plataforma WordPress. Se parte de una exposición de las fases a seguir en el desarrollo de este Trabajo Fin de Grado. A continuación, se realiza una explicación de las herramientas a utilizar y funcionamiento de la plataforma WordPress. Posteriormente se detalla la creación, construcción y diseño de cada parte del sitio web y finalmente se enuncian las conclusiones obtenidas a partir del trabajo e investigación en este Trabajo Fin de Grado. Palabras clave Sitio Web, WordPress (sistema de gestión de contenidos en sitios web), GCO (Grupo de Comunicaciones Ópticas de la Universidad de Valladolid) Abstract The research carried out in this Final Project aims to carry out the creation of a Wordpress website for content management in the field of research, specifically, aimed at the Grupo de Investigación de Comunicaciones Ópticas de la Universidad de Valladolid (GCO) in the scientific field. To do this, a correct synthesis and investigation of all the information related to the research group and its activity and an efficient design of the website is required, structuring and showing the information of the research group in an optimal way and using the most appropriate functions provided by the design work platform of the WordPress platform. It is part of an exposition of the phases to be followed in the development of this Final Degree Project, followed by an explanation of the tools to be used and the functioning of the WordPress platform. Subsequently, the creation, construction and design of each part of the website is detailed and finally the conclusions obtained from the work and research in this Final Degree Project are listed. Keywords Website, WordPress (content management system on websites), GCO (Optical Communications Group of the University of Valladolid) Índice iii ÍNDICE 1!Introducción ............................................................................ 1! 1.1!Motivación ......................................................................................................... 1! 1.2!Objetivos ............................................................................................................ 1! 1.3!Fases .................................................................................................................. 2 1.3.1!Fase de Análisis ........................................................................................... 2 1.3.2!Fase de Configuración ................................................................................. 2! 1.3.3!Fase de Programación/Construcción ............................................................ 2! 1.3.4!Fase de Realización de los Informes y Conlcusiones .................................... 3! 1.4!Estructura de la memoria del TFG ...................................................................... 3! 2!Metodología y Herramientas de trabajo ................................ 4! 2.1!Introducción ....................................................................................................... 4! 2.2!Introducción a Wordpress ................................................................................... 4! 2.3!Alojamiento Web ............................................................................................... 5! 2.4!Elementos de interés en Wordpress ..................................................................... 5 2.4.1 Introducción Inicio WordPress ..................................................................... 6! 2.4.2!Introducción a los Temas ............................................................................. 8! 2.4.3!Introducción a las Páginas ............................................................................ 9! 2.4.4!Introducción a los menús ........................................................................... 12! 2.4.5!Introducción a las Entradas ........................................................................ 15! 2.4.6!Introducción a los Plugins .......................................................................... 17! 2.5!Metodología de trabajo ..................................................................................... 18! 2.6!Conclusiones .................................................................................................... 18! 3!Construcción y Desarrollo del Sitio Web ............................. 20! 3.1!Introducción ..................................................................................................... 20! 3.2!Diseño de la página de Inicio ............................................................................ 20! Índice iii 3.3!Diseño y construcción global ............................................................................ 21! 3.3.1!Estructura General de la página web .......................................................... 22! 3.3.2!Tema de WordPress utilizado .................................................................... 23! 3.3.3!Diseño del Menú general ........................................................................... 24! 3.3.4!Descripción de las Páginas diseñadas ......................................................... 26 3.3.4.1 Descripción de la página del menú Miembros ............................................ 26 3.3.4.2 Descripción de las páginas del menú Investigación .................................... 26 3.3.4.3!Descripción de las páginas del menú Publicaciones ................................... 26 3.3.4.4!Descripción de las páginas del menú Proyectos .......................................... 35 3.3.4.5!Descripción de las páginas de los menús Noticias y Contacto .................... 36 3.3.5!Descripción de las Entradas diseñadas ....................................................... 38! 3.3.6!Descripción de los Plugins empleados........................................................ 39! 3.4!Conclusiones .................................................................................................... 41! 4!Conclusiones y Líneas Futuras ............................................. 42! 4.1!Conclusiones .................................................................................................. 442! 4.2!Líneas Futuras .................................................................................................. 42! 5!Referencias............................................................................. 44! Índice de Figuras v ÍNDICE DE FIGURAS Figura 1: Acceso a Plataforma de WordPress. ................................................................. 6 Figura 2: Escritorio de WordPress. .................................................................................. 7 Figura 3: Selección de Temas de WordPress. .................................................................. 9 Figura 4: Jerarquia de las páginas a través de las opciones Atributos de página. ........... 10! Figura 5: Edición de Página. ......................................................................................... 11! Figura 6: Opción de edición rápida en la vista de todas las páginas. .............................. 12! Figura 7: Gestión de Menús. ......................................................................................... 13 Figura 8: Creación de un nuevo Menú en WordPress. ................................................... 13! Figura 9: Agregar enlaces, páginas, entradas o categorías al Menú diseñado ................. 14 Figura 10: Edición de una Entrada en WordPress. ......................................................... 17! Figura 11: Portada inicial de la página web del Grupo de Comunicaciones Ópticas. ...... 21! Figura 12: Descripción del Grupo de Comunicaciones Ópticas en la portada inicial de la página web. ................................................................................................................... 21! Figura 13: Esquema general de la página web y la división en contenidos. .................... 22! Figura 14: Activación del Tema Chateau elegido para el sitio web. ............................... 23 Figura 15: Primera visualización del menú general diseñado. ........................................ 25! Figura 16: Segunda visualización del menú general diseñado. ....................................... 26! Figura 17: Primera visualización de las páginas diseñadas en el sitio web del GCO. ..... 27 Figura 18: Segunda visualización de las páginas diseñadas en el sitio web del GCO ..... 27! Figura 19: Tercera visualización de las páginas diseñadas en el sitio web del GCO. ...... 28 Figura 20: Cuarta visualización de las páginas diseñadas en el sitio web del GCO. ....... 28! Figura 21: Página Profesores. ........................................................................................ 29! Figura 22: Página Doctorandos. .................................................................................... 30 Figura 23: Página Historia. ............................................................................................ 31! Figura 24: Página Lineas de Investigación..................................................................... 31! Figura 25: Página Premios. ........................................................................................... 32! Índice de Figuras v Figura 26: Página Revistas. ........................................................................................... 33 Figura 27: Página Congresos. ........................................................................................ 34! Figura 28: Página Capítulos de Libro. ........................................................................... 35! Figura 29: Página Proyectos. ......................................................................................... 36! Figura 30: Página Noticias. ........................................................................................... 37! Figura 31: Página Contacto. .......................................................................................... 38! Figura 32: Diseño de las entradas englobadas en la página de Noticias del menú principal. ..................................................................................................................................... 39 Figura 33: Conjunto de plugins activados y utilizados en nuestro sitio web. .................. 40! Índice de Tablas ix Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 6 2.4.1 Introducción Inicio WordPress Para acceder al WordPress que se haya facilitado se debe acceder a la dirección indicada por el Servicio Web. Lo que sí es común a todas las instalaciones por defecto de WordPress (de cualquier naturaleza) es que el acceso al panel de control se efectúa accediendo a la página “www.dominio-que-sea.com/wp-login.php”. Figura 1. Acceso a Plataforma de WordPress Además de nombre de usuario/email y contraseña se nos pide que resolvamos un sencillo problema matemático para intentar reducir las posibilidades de un ataque automático a la página de acceso [4]. Tras acceder correctamente, se encuentra lo que se llama Escritorio de WordPress que se muestra en la figura 2, formado por los siguientes elementos: • Barra de navegación superior: contiene algunos elementos de acción y navegación rápidos y frecuentes, así como el cierre de sesión. Conviene destacar que, como pasará en algunos otros elementos de navegación de WordPress, a veces no hay que hacer clic directamente en lo que se muestra, sino que habrá que acercar el ratón a alguno de los elementos, esperar a que se despliegue un menú adicional y posteriormente hacer clic en Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 7 algunos de los sub elementos. El ejemplo más claro es el de cerrar sesión o ver nuestra web. • Menú de navegación lateral: contiene las funciones de configuración y publicación con las que trabajaremos continuamente. También consta de muchos menús y submenús que se abren al acercar el ratón. Además, puede colapsarse hacia la izquierda pulsando en “Cerrar menú” lo que provocará que, una vez que nos hayamos familiarizado con los iconos del menú, recuperar unos cuantos píxeles de pantalla para nuestro trabajo. • Cuadro principal: el resto de la pantalla, normalmente con fondo blanco contiene el desarrollo del elemento de trabajo o configuración en el que nos encontremos en cada momento. Alternativamente muestra el Escritorio donde se indican las últimas actividades realizadas, comentarios recibidos, estadísticas básicas, etc. Dentro de este cuadro principal conviene destacar la presencia de dos pestañas desplegables en la esquina superior derecha llamadas “Opciones de pantalla” que sirve para mostrar/ocultar elementos del cuadro principal y “Ayuda” para consultar alguna duda básica relativa al funcionamiento de la plataforma. Figura 2. Escritorio de WordPress Finalmente, lo que se ha llamado Escritorio corresponde con la intranet o área de trabajo privada de la web; sin embargo, se debe considerar de manera separada cómo Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 8 resulta vista el sitio web desde internet para los visitantes o área pública. Para ello es muy interesante tener conocimiento y práctica en el uso de pestañas en el navegador, para poder conmutar rápida y eficazmente entre vista privada y vista pública. 2.4.2 Introducción a los Temas Los temas (o plantillas) de Wordpress son una de las grandes ventajas de este sistema. Con ellos podemos cambiar el aspecto de nuestro sitio en apenas unos segundos gracias a la separación del contenido del aspecto gráfico. De este modo, los contenidos tales como textos, imágenes, o vídeos permanecen separados del aspecto que tendrán al ser mostrados en pantalla. Se puede decir que son el conjunto de archivos que van a configurar el aspecto de la web y el modo en el que se disponen los elementos en las distintas páginas que la componen. Ese conjunto de archivos definirán el aspecto gráfico de textos, márgenes, títulos o color de fondo. O dependiendo en que página se esté navegando se mostrarán diferentes secciones: cabecera, menús, barras laterales, pie de página etc. Así, cuando se carga una web desde el navegador, el tema de Wordpress pedirá a la base de datos los contenidos solicitados y en ese momento los formateará y los mostrará en pantalla [5]. Esto es lo que permite que se pueda cambiar el tema de la web sin peligro de perder nada. Acontinuación en la Figura 1 se muestra la selección de temas que ofrece WordPress. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 9 Figura 3. Selección de Temas de WordPress 2.4.3 Introducción a las Páginas En WordPress podemos encontrar que las páginas son una de las formas principales de agregar contenido de forma estática. Las páginas son contenidos que no tienen fecha de publicación y se usan para crear diferentes tipos de contenido más estático, entre los que destacan: o Páginas esenciales como “Contacto”, “Acerca de”, “Preguntas Frecuentes”, “Políticas de Privacidad”. o Páginas con contenido fijo/estático que no cambien en varios meses. o Guías y tutoriales. Cuando se va a crear una guía muy completa sobre cualquier tema, una buena opción es publicarla como página. Las páginas no se archivan o clasifican en base a la fecha de publicación y tampoco se basan en categorías como las entradas. Una de las características más importantes de las páginas es que puedes establecer jerarquías, es decir, poder publicar “subpáginas” si es necesario, lo que se hace a través del menú “Atributos de la página”, en la opción “Superior”, de modo que podemos hacer que una página dependa o no de una página de nivel superior, tal y como se muestra en la Figura 2. En este caso, a través de la opción “Superior” se elije el nombre de la página de Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 10 la que dependerá e incluso a través de la opción “orden” se puede elegir el orden de aparición de esta nueva página dentro del menú superior en el que se incluirá. Así, por ejemplo, una página llamada “Congreso” puede tener una subpágina dedicada especialmente a los formularios de inscripción, otra al calendario planificado y otra para la información práctica. Para establecer las jerarquías se configuran en el menú publicación del Escritorio de WordPress (del lado derecho), se muestra a continuación en la Figura 2. Figura 4. Jerarquia de las páginas a través de las opciones Atributos de página Para crear páginas y por consiguiente añadir contenidos, se deberá seleccionar la opción “Páginas > Añadir Nueva”, situada en el menú izquierdo del menú principal del interfaz de escritorio de Wordpress (Figura 3). Le pondremos un título y añadiremos texto u otro tipo de recursos (imágenes, audio, video, etc) dentro del propio editor que aparece. Dentro de este editor, disponemos de algunos botones para dar formato al texto tales como negrita, cursiva, listas sin numerar y numeradas, alineado, entre otras [7]. En la Figura 3 se muestra el aspecto que ofrece WordPress al editar una página. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 11 Figura 5. Edición de Página En el cuadro lateral derecho de la pantalla principal de creación de página, aparece el menú “Publicar” y desde este cuadro se dispone de varios botones que permiten realizar las siguientes acciones: o Guardar como borrador la página para no perder lo que se haya ido haciendo, sin que salga publicado en internet aún. o Vista previa de la página para hacerse una idea de cómo se vería una vez publicado lo que se ha escrito. o Cambiar el estado de la página, por ejemplo, por si depende de alguien más la publicación de la información. o Dar visibilidad de la página una vez que sea publicada (opción “visibilidad”). o Cambiar la programación de fecha/hora de publicación de la página (opción “Publicar inmediatamente”). o Publicar en internet a la vista de todo el mundo lo que se acaba de cambiar. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 12 En el caso de que una página la queramos poner como nuestra página de inicio, debemos ir a la opción “Ajustes > Lectura” situada en el menú lateral izquierdo de WordPress (Figura 3) y establecer como página de inicio la que desees. Esta opción se explicará con más detenimiento más adelante. Por otro lado, y tal y como se explicó anteriormente, cuando se crea una página se puede usar el menú localizado en la parte derecha para crear la dependencia/relación padrehijo de las diferentes páginas, a través de la opción “Superior”. También existe el parámetro “Orden” que sirve para establecer un criterio de ordenación entre las páginas de un mismo nivel, dado que en este caso no se aplica una ordenación cronológica estrictamente. Este criterio comienza por el número “0” y es más sencillo de modificar si se hace desde la opción general de “Todas las páginas” (situada en el mneú principal de WorPress) mediante la opción de “edición rápida” (Figura 4), a través del que se va viendo de un vistazo los órdenes asignados a las páginas hermanas. Hay que recordar siempre pulsar el botón “Actualizar” cuando se efectúe una modificación rápida tal y como se muestra en la Figura 4 a continuación. Figura 6. Opción de edición rápida en la vista de todas las páginas 2.4.4 Introducción a los menús El menú de navegación es la zona que se encuentra en la mayoría de las páginas webs o blogs cerca del encabezado y que permite ir saltando por los contenedores principales de contenidos disponibles, normalmente las páginas, aunque veremos que no siempre es así. En la opción del menú lateral izquierdo “Apariencia > Menús” se encuentran todas las funcionalidades relacionadas con los menús (Figura 5), donde se puede agregar un nuevo menú personalizado y con múltiples pestañas para navegar. Pueden crearse muchos menús, pero lo importante es concentrarse como paso inicial en la definición y diseño del menú principal [8]. A continuación, en la Figura 5 se muestra el aspecto de la herramienta que ofrece WordPress para la gestión de los menús. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 13 Figura 7. Gestión de Menús Para crear un nuevo menú se pulsa en dicha opción (“crea un nuevo menú”) dentro de la parte superior de la pantalla principal dentro de menús, tal y como se observa en la Figura 6, y se le da un nombre como por ejemplo "Menú principal" (opción “Nombre del menú”). A continuación se pulsa el botón “Crear menú”, situado en la parte inmediatamente inferior, tal y como se muestra en la Figura 6. Figura 8. Creación de un nuevo Menú en WordPress Una vez que ya se ha creado el menú de navegación, es hora de crear las pestañas, es decir, las distintas páginas con las que cuenta dicho menú, o bien enlaces externos e internos a otros lugares. Esto se lleva a cabo añadiendo elementos al menú desde la columna izquierda que aparece en la pantalla principal de navegación de menús (Figura 6). Cabe mencionar que estas páginas que se inserten en el menú, deben estar creadas con Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 14 anterioridad. En este sentido, podemos añadir diferentes elementos al menú de navegación, tales como: o Páginas de nuestra web que ya hayamos creado. o Entradas publicadas con anterioridad. o Enlaces personalizados a través de la URL. o Agrupaciones de entradas a través de su categoría. A continuación, se muestra la Figura 7 que observan dichas opciones que se pueden elegir para insertar dentro del menú. Así pues, en el caso de que se deseen añadir páginas ya creadas, basta con ir al cuadro “Páginas” (Figura 7), elegir la/s que quieras incluir y pinchar el botón “Añadir al menú”. La manera de añadir entradas y categorías es completamente análoga. Figura 9. Agregar enlaces, páginas, entradas o categorías al Menú diseñado Cabe señalar que se pueden reordenar los elementos del menú para que aparezcan en otro orden arrastrando y soltando hacia arriba y hacia abajo cada uno de los elementos dentro del menú. Esta misma técnica es la empleada para crear subelementos dentro del menú, de manera que podemos crear una anidación de pestañas y/o enlaces en el menú. Basta con arrastrar un poco hacia la izquierda un elemento del menú para que sea considerado automáticamente como subelemento del que se encuentra justo sobre él. Incluso podemos tener más de un nivel de anidación. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 15 2.4.5 Introducción a las Entradas En los casos en los que se desea crear un blog, entonces la mayoría del contenido principal se agregará en forma de entradas, las cuales son cada artículo que se publica cronológicamente. Conforme se van escribiendo entradas, se van archivando en base al mes y año de publicación. En este sentido, para que los visitantes no tengan que revisar los archivos para encontrar contenido publicado hace tiempo, es conveniente organizar las entradas en categorías y etiquetas. Una de las características más importantes de las entradas es la posibilidad de dejar comentarios. En las páginas también se puede, pero es mucho más común establecer una conversación o discusión con la audiencia de un blog en la parte de las entradas. Las entradas son los artículos que se van publicando en la parte central del blog y que se ordenan de manera cronológica. Por lo general, las entradas tienen un título, un cuerpo de la entrada donde se puede introducir texto, fotografías, código web e incluso audio. Normalmente las entradas están archivadas por categorías y también se acompañan de palabras clave relacionadas con el contenido de la entrada [6]. Para crear una entrada, se debe pulsar en la opción “Entradas” del menú de navegación lateral izquierdo del escritorio principal de Wordpress (Figura 8), de manera semejante a lo que se ha descrito con las páginas. Dentro de la opción “Todas las entradas” aparecerá una lista con las entradas ya realizadas. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 22 herramientas y funcionalidades que ofrece Wordpress y que fueron explicadas en el Capítulo 2 de este Trabajo Fin de Grado. 3.3.1 Estructura General de la página web Se define una estructura general conceptual, la cual la plasmamos en el diseño del sitio web que se muestra en la Figura 11. Para realizar dicha estructuración y diseño se tomaron como referentes otras web de similares características de diferentes grupos de investigación y se eligió de cada una de ellas las opciones y características más útiles e interesantes. Figura 13. Esquema general de la página web y la división en contenidos A partir de esta estructura se crean diferentes páginas que se detallarán posteriormente para distribuir el contenido con los elementos y herramientas que ofrece Wordpress. En concreto, se definen las páginas de Inicio, Miembros, Investigación, Publicaciones, Proyectos, Noticias, Contacto como los ejes para construir el sitio web e ir insertando y clasificando el contenido del Grupo de Comunicaciones Ópticas en estas “áreas” globales [13]. Tal y como se observa en la Figura 11, algunas de estas páginas contienen otras páginas internas que clasifican adecuadamente el contenido de cada página principal de la que dependen, tales como las páginas de Miembros, Investigación y Publicaciones. Finalmente, cabe destacar que también se ha introducido a través de un plugin la opción de idioma con la finalidad de crear un sitio web internacional. La página del GCO por lo tanto estará en castellano e inglés. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 23 3.3.2 Tema de WordPress utilizado Respecto a la herramienta del TEMA en Wordpress se puede decir que son el conjunto de archivos que van a configurar el aspecto del sitio web y como se disponen los elementos en las distintas páginas que la componen. Ese conjunto de archivos definirán el aspecto gráfico de textos, márgenes, títulos o color de fondo. O dependiendo en que página se esté navegando se mostrarán diferentes secciones: cabecera, menús, barras laterales, pie de página etc. La gran ventaja que permite la herramienta de tema es, que aun cambiando los contenidos, creando nuevas páginas, entradas, o menús, el aspecto de entorno ofrecido al usuario no va variar y siempre los nuevos cambios que se incorporen se van adaptar a la configuración del tema elegido. Es decir, WorPress permite una separación eficiente de los contenidos respecto a la interfaz visual del sitio web diseñado. En el caso del sitio web del Grupo de Comunicaciones Ópticas se ha elegido el tema CHATEAU. En este punto, cabe destacar que solamente se pueden escoger entre un conjunto relativamente reducido de Temas, ya que el WordPress corporativo de la UVa tiene adquirido y debidamente actualizado un conjunto de temas concretos. A continuación, en la Figura 12 se muestra una captura del tema elegido. Figura 14. Activación del Tema Chateau elegido para el sitio web Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 24 El tema Chateau es un tema limpio y minimalista con su elección de un esquema de color claro u oscuro. Cuenta con un encabezado personalizado, fondo personalizado y color de acento personalizado. También tiene hasta seis áreas de widgets; uno para una barra lateral y cinco en el pie de página. Permite mostar toda la información, elementos multimedia y enlaces de forma clara. 3.3.3 Diseño del Menú general Respecto a la herramienta Menús en Wordpress se puede decir que los menús son una parte fundamental de todo diseño web o blog, pues les sirve a los visitantes y usuarios del sitio como sistema de navegación para acceder a los contenidos. Cuanto mayor sea el diseño del menú y mejor esté estructurado, más satisfactoria será la navegación para los usuarios y clientes en tu sitio web. Nunca hay que olvidar buscar siempre poner las cosas sencillas a los visitantes de nuestro sitio web o blog, pues lo agradecerán y ayudará a incrementar el número de visitas. Lo ideal sería poder acceder a todo el contenido a través del menú de navegación; sin embargo, esto resultó imposible a la hora de investigar y ordenar el contenido dado que cuando un sitio web comienza a tener cierto contenido, es muy difícil ubicar todo únicamente en las páginas principales del menú principal. Por ello, en el caso de este sitio web que abordamos en este Trabajo Fin de Grado resulta necesario contar con un menú que nos permita ubicar desplegables y submenús, donde colocar elementos secundarios o categorías dependientes de una principal, pero sin caer en colapsar el sitio web con menus desplegables infinitos. Para ello, es fundamental haber seleccionado antes una buena estrategia de navegación, tal y como se explicó y mostró en secciones anteriores. Para crear el nuevo menú general se pulsa en la opción (“crea un nuevo menú”) dentro de la pantalla principal que se abre dentro de menús (opción “Nombre del menú”) y se le da un nombre, en nuestro caso "Menú principal". A continuación se pulsa el botón “crear menú” y el menú principal del tema estará creado. A la hora de añadir las diferentes partes que componen el menú, es decir, las distintas páginas con las que va a contar, se van añadiendo elementos al menú desde la columna izquierda que aparece en la pantalla principal de navegación de menús, tal y como Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 25 se observa en la Figura 13. Cabe mencionar que estas páginas que se inserten en el menú, deben estar creadas con anterioridad, tal y como se puede ver en nuestro menú a través de la Figura 13. Así, el menú principal del sitio web del Grupo de Comunicaciones Ópticas está distribuido según se observa en la Figura 12 y la Figura 13. Sin embargo, también se observan en ambas figuras la clasificación en submenús para abordar todas las áreas y contenidos necesarios para el desarrollo del sitio web de una forma más eficiente y ordenada. De forma más concreta, dentro de la página Miembros (Figura 12) se observa una clasificación interna en diferentes páginas, en concreto, Profesores, Doctorados y Miembros anteriores. Del mismo modo, la página principal de Investigación (Figura 13) contiene las páginas Historia del GCO, Líneas de investigación, Colaboraciones y Premios. Finalmente, también se observa que la página Publicaciones del menú principal tiene clasificados los contenidos según las opciones de publicaciones en Revistas, Congresos y Capítulos de libro. Figura 15. Primera visualización del menú general diseñado Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 26 Figura 16. Segunda visualización del menú general diseñado 3.3.4 Descripción de las Páginas diseñadas Respecto a la herramienta de las Páginas en Wordpress se puede decir que es la principal forma de agregar contenido al sitio web en cuestión. En el caso de este Trabajo Fin de Grado se particulariza en la diseño e integración de la estructura y contenidos al sitio web del Grupo de Comunicaciones Ópticas de la Universidad de Valladolid. Las páginas son contenidos que no tienen fecha de publicación y se usan para crear diferentes tipos de contenido más estático, entre los que destacan: o Páginas esenciales y/o típicas como “Contacto”, “Acerca de”, “Preguntas Frecuentes”, “Políticas de Privacidad”. o Páginas con contenido fijo/estático que no cambien en varios meses. o Guías y tutoriales, cuando se va a crear una guía muy completa sobre cualquier tema una buena opción es publicarla como página. Cabe destacar que las páginas no se archivan o clasifican en base a la fecha de publicación y tampoco se basan en categorías como las entradas. Para crear páginas y por consiguiente añadir contenidos, se deberá seleccionar la opción “Páginas > Añadir Nueva”, situada en el menú izquierdo del menú principal del interfaz de escritorio de Wordpress, tal y como se observa en la Figura 15. Le pondremos un título y podremos agregar texto u otro tipo de recursos (imágenes, audio, video, etc) dentro del propio editor de aparece. Dentro de este editor, disponemos de algunos botones Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 27 para dar formato al texto tales como negrita, cursiva, listas sin numerar y numeradas, alineado, entre otras. La creación y distribución del contenido e información en las páginas dentro del sitio web diseñado sigue la estructura y relación hecha en la fase de investigación donde se estudiaron todos los contenidos a abordar y se buscó la mejor y más optima distribución, y a su vez también coherente con el menú principal planteado [10][[11]. A continuación, se muestra la totalidad de las páginas diseñadas en Figuras 15, 16, 17 y 18 en el sitio web objeto de este Trabajo Fin de Grado. Figura 17. Primera visualización de las páginas diseñadas en el sitio web del GCO Figura 18. Segunda visualización de las páginas diseñadas en el sitio web del GCO Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 28 Figura 19. Tercera visualización de las páginas diseñadas en el sitio web del GCO Figura 20. Cuarta visualización de las páginas diseñadas en el sitio web del GCO El objetivo del uso de las páginas en el sitio web es representar y mostrar toda la información referida al Grupo de Comunicaciones Ópticas de la UVa de forma coherente y eficiente. En las siguientes secciones se explicarán una a una cada una de las páginas diseñadas en el sitio web del Grupo de Comunicaciones Ópticas. 3.3.4.1 Descripción de la página del menú Miembros Las páginas correspondientes al menú de Miembros contienen una descripción de todos los miembros que pertenecen al grupo de investigación según una clasificación Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 29 realizada. En concreto, dicho menú consta de una página de Profesores, otra de Doctorandos y otra de Miembros anteriores. Dentro de la página de Profesores, se presentan todos los profesores del grupo de investigación, junto con una fotografía y una breve descripción de su figura contractual. Además, incluye un enlace que de forma externa abre el curriculum vitae completo de cada uno de ellos, tal y como se muestra en la Figura 20. Figura 21. Página Profesores Por otro lado, dentro de la página de Doctorandos aparecen todos los alumnos doctorandos actuales que trabajan dentro del Grupo de Investigación junto con una fotografía y una breve descripción de su figura contractual. Además, incluye un enlace que de forma externa abre el curriculum vitae completo de cada uno de ellos, tal y como se muestra en la Figura 21. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 30 Figura 22. Página Doctorandos También se ha creado la página Miembros Anteriores en la que se introducirá un repositorio de todos los investigadores y profesores que en algún momento han trabajado en el grupo de investigación. 3.3.4.2 Descripción de las páginas del menú Investigación Las páginas correspondientes al menú de Investigación contienen una descripción de la actividad del grupo desde sus inicios hasta la actualidad junto las diferentes áreas de trabajo y premios obtenidos. En concreto, dicho menú consta de una página de Historia del GCO, otra de Líneas de Investigación, otra de Colaboraciones y otra de Premios. Dentro de la página de Historia del GCO se relata la evolución del grupo desde su creación hasta la actualidad mencionando los áreas y líneas temáticas que se han ido abordando durante los diferentes años tal y como se ve en la figura 22. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 31 Figura 23. Página Historia Por otro lado, dentro de la página de Líneas de Investigación se detallan las áreas de trabajo de los integrantes del GCO, las cuales se resumen en Redes de Comunicaciones Ópticas, Radiocomunicaciones, Modelado de Propagación para Dosimetría y Localización, Tecnologías de Rehabilitación, Innovación Docente y Automoción. En la Figura 23 acontinuación se muestra el aspecto de dicha página. Figura 24. Página Lineas de Investigación Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 38 Figura 31. Página Contacto 3.3.5 Descripción de las Entradas diseñadas Tal y com se explicó en capítulos anteriores, el uso de la herramienta Entrada típicamente corresponde con noticias o artículos que se van publicando y que se ordenan de manera cronológica. Normalmente las entradas están archivadas por categorías y también se acompañan de palabras clave relacionadas con el contenido de la entrada. Para crear una entrada, se debe pulsar en la opción “Entradas” del menú de navegación lateral izquierdo del escritorio principal de WordPress (Figura 19). De manera semejante a lo que se ha descrito con las páginas, aparecerá una lista con las entradas ya publicadas [6]. Los componentes básicos de una entrada y tal y como se explicó anteriormente se resumen como: o Título o Contenido o Categoría o Etiquetas o Comentarios o Opciones de publicación o Extracto o Autor o Imagen destacada En el sitio web del Grupo de Comunicaciones Ópticas de la Universidad de Valladolid y objeto de este Trabajo Fin de Grado las entradas son una herramienta que se han empleado utilizando la característica de la cronología para ir publicando noticias referentes al grupo GCO. A continuación, en la Figura 19 se muestra una captura que refleja todas las entradas creadas en el sitio web del GCO y que se engloban dentro de la página principal de entradas del menú principal denominada Noticias. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 39 Figura 32. Diseño de las entradas englobadas en la página de Noticias del menú principal 3.3.6 Descripción de los Plugins empleados Respecto a la herramienta de los Plugis cabe destacar que un Plugin es un complemento o una aplicación que se relaciona con otra para agregarle una función nueva y generalmente muy específica. Esta aplicación adicional es ejecutada por la aplicación principal y se aprovecha del servicio o función que realiza el plugin. En el sitio web diseñado para el Grupo de Comunicaciones Ópticas de la Universidad de Valladolid y objeto de este Trabajo Fin de Grado se han incorporado diferentes plugins para aportar funcionalidades muy concretas al sitio web y que a la vez son robustas, fiables y eficientes. En la Figura 20 y detallan los plugins activados así como las características más relevantes de cada uno de los empleados en el sitio web del Grupo de Comunicaciones Ótpicas. En este sentido, cabe destacar que solamente podremos hacer uso del conjunto de plugins comprados por la Universidad de Valladolid e integrados en el WordPress corporativo de la Universidad de Valladolid, ya que el servicio técnico es el encargado de mantenerlos actualizados al igual que el conjunto de Temas [9]. En concreto, se han usado los siguientes: o Duplicate Post: Duplica entradas, páginas y entradas personalizadas con facilidad. Se puede duplicar páginas, entradas y entradas personalizadas y se guardará como se prefiera (borrador, privado, público, pendiente). Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 40 o Easy Bootstrap Shortcode: es un complemento compatible con bootstrap 3.2.0 que agrega iconos al editor de wordpress (tinyMCE Shortcode Buttons) y puede agregar diferentes funcionalidades a nuestras páginas y contenidos. o MetaSlider: es un complemento que permite crear un deslizador de imágenes en forma de diapositivas de forma dinámica en una página. Para ello, se seleccionan las imágenes de la biblioteca multimedia de WordPress, se arrastran y colocan en su lugar. Finalmente, se configuran los títulos de las diapositivas, el tiempo de permanencia de la diapositva u otras características. o qTranslate-X: Este complemento ofrece una forma de mantener contenido dinámico multilingüe en un sitio de WordPress, como es el caso del sitio web que se está estudiando. o TablePress: este plugin permite crear y administrar fácilmente tablas. Se puede insertar las tablas en publicaciones, páginas o widgets de texto. Los datos de la tabla se pueden editar en una interfaz tipo hoja de cálculo, por lo que no es necesaria ninguna codificación. Las tablas pueden contener cualquier tipo de datos. Además, las tablas se pueden importar y exportar desde/a Excel, CSV, HTML y archivos JSON. Figura 33. Conjunto de plugins activados y utilizados en nuestro sitio web Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 41 3.4 Conclusiones Cabe señalar que con el diseño descrito en los apartados anteriores del sitio web del Grupo de Comunicaciones Ópticas de la Universidad de Valladolid se ha buscado la integración del mayor número de funcionalidades posibles. Para ello se ha hecho uso de diferentes herramientas potentes que han dado solución a los problemas y requisitos surgidos en el análisis de este Trabajo Fin de Grado. En concreto, se ha diseñado un menú principal que contiene diferentes submenús con todos los contenidos clasificados de una manera ordenada. Los contenidos del menú se han integrado en diferentes páginas atendiendo a un diseño y formato coherente al objetivo buscando. Además, se ha insertado una página que contiene las noticias del grupo de investigación de una manera dinámica y actualizada. Finalmente, cabe destacar la activación de ciertos plugins que mejoraron la apariencia y visualización de los contenidos. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 42 4 Conclusiones y Líneas Futuras 4.1 Conclusiones Este Trabajo Fin de Grado ha tenido como objetivo principal el diseño y programación de un sitio web en Wordpress para la gestión de contenidos en el ámbito de la investigación para el Grupo de Comunicaciones Ópticas de la Universidad de Valladolid. Para llevar a cabo su creación se ha seguido el análisis y pautas sobre la estructura a seguir y los contenidos que se desean visualizar. Dicha estructura conceptual permite abordar y mostrar toda la información detallada del Grupo de Comunicaiones Ópticas, desde los miembros que lo componen hasta los proyectos y publicaciones en los que trabaja. En el diseño del sitio web se han estudiado y posteriormente se han incorporado herramientas y funciones propias de WordPress como se han detallado en las secciones anteriores, tales como menús, páginas o entradas. De esta manera se ha conseguido un sitio web con un diseño que consigue abarcar toda la información necesaria empleando para ello herramientas y funcionalidades robustas, fiables y potentes a través también de los plugins incorporados a nuestro sitio web. 4.2 Líneas Futuras Respecto al futuro desarrollo del sitio web cabe destacar que es necesaria una labor periódica de actualización de los datos contenidos, y la forma en que mostrar los mismos si los requisitos o funcionalidades quieren modificarse o evolucionar. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 43 También sería interesante estudiar periódicamente nuevas herramientas o funciones que sean capaces de mejorar a las incorporadas en la actualidad en el sitio web, desde activar nuevos plugins hasta emplear un menú diferente; en definitva llevar a cabo actualizaciones de la mano de la actividad del Grupo de Comunicaciones Ópticas de la Universidad de Valladolid. Finalmente, también podría resultar de gran interés programar algún tipo de funcionalidad en algún lenguaje de programación para insertar contenido de forma automatizada y debidamente formateada en formato HTML (reconocido perfectamente por el editor de páginas de WordPress), tales como por ejemplo publicaciones en revistas o congresos o Proyectos. Este proceso ayudará a agilizar la integración de contenidos y recursos al sitio web diseñado. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 44 5 Referencias [1] «Página web oficial de WordPress,» [En línea]. Available: https://es.wordpress.org/. [2] « WordPress 3 : desarrollo de proyectos Web / Heather R. Wallace,» [Libro]. Available: ISBN: 978-84-4152-901-4. [3] « WordPress / April Hodge Silver, Hasin Hayder,» [Libro]. Available: ISBN: 978-84-415-2744-7. [4] « WordPress 4.0 : la tela de la araña / Yoani Sánchez, Fernando Tellado,» [Libro]. Available: ISBN: 978-84-415-3547-3. [5] « WordPress : 1001 trucos / Fernando Tellado,» [Libro]. Available: ISBN: 978-84-415-3825-2. [6] «WordPress : crea, administra y promociona tu blog / Mª Amor Fernández Menéndez,» [Libro]. Available: ISBN: 978-84-941-8011-8. [7] «Curso WordPress / Noemí Merayo,» [PDF]. Available: . [8] «WordPress 4.1 Diseño y Desarrollo / Brad Williams,» [Libro]. Available: ISBN: 978-84-415-3704-0. [9] «Professional WordPress Plugin Development / Brad Williams,» [Libro]. Available: ISBN: 978-04-709-1622-3. Creación de un sitio Web en Wordpress para la Gestión de Contenidos en el ámbito de la investigación! 45 [10] « Wordpress for Dummies / Lisa Sabin-Wilson,» [Libro]. Available: ISBN: 978-11-190-8857-8. [11] «Guia de WordPress,» [En línea]. Available: https://tutorialwp.online/. [12] «Manual de soporte de WordPress,» [En línea]. Available: https://es.wordpress.org/support/manual-de-soporte/. [13] «Manual de identidad corporativa,» [En línea]. Available: https://www.ineco.com/webineco/sites/default/files/lic671- Manual%20Identidad%20Corporativa%20V2.pdf.