3B. Herramientas: Blog, Formulario, Slider, ...

1. Introducción

2. Blog

Según la definición de Blog de la Wikipedia: "Un blog​ o bitácora es un sitio web que incluye, a modo de diario personal de su autor o autores, contenidos de su interés.
Estos contenidos suelen estar actualizados con frecuencia y son presentados en orden cronológico inverso, es decir, lo más reciente que se ha publicado es lo primero que aparece en la pantalla"  [ Origen wikipedia] 

Pues bien, WordPress de EducaMadrid pone a nuestra disposición para el caso de la web de centro toda su potencia como herramienta de blog, ya que es para lo que se creó en un principio.

Es posiblemente uno de los recursos más versátiles para usos didácticos. Consulta el Monográfico "Blogs en Educación - Los Blogs en Áreas Curriculares" para conocer los usos educativos de esta herramienta.

Algunas de las herramientas que podemos incluir en nuestra página Tablón de anuncios son:

• Buscador.
• Nube de etiquetas.

2.1. Buscador

Un widget del tipo "Buscador" nos será muy útil en nuestro sitio web, porque permitirá a nuestros visitantes localizar rápidamente los contenidos deseados.

Para insertarlo en nuestro espacio web, accedemos al menú de administrador, Apariencia, Widgets. Localizamos el área en el que queramos colocarlo y lo arrastramos. Podemos configurar un título, si lo vemos necesario.

Una vez añadido, quedará así en nuestra barra lateral:

2.2. Nube de categorías o etiquetas

Una nube de categorías o etiquetas es una gran lista de las utilizadas en el sitio web, a menudo con las más usadas con mayor frecuencia y marcadas con texto más grande (aunque el estilo exacto depende de su tema específico).

Aunque la mayor parte de los temas muestran automáticamente las categorías y etiquetas asignadas a una publicación, para colocar una nube en tu sitio web  y que estas destaquen más debes acceder la página en la que quieres que se visualice, normalmente "Tablón de anuncios".  A continuación, accede a Apariencia -> Widgets y selecciona el widget llamado Nube de etiquetas en el área en el que quieres que se muestre.

Una vez hecho esto, tendrás que configurarlo eligiendo un título para la sección y si deseas que aparezcan un contador, así como las categorías o las etiquetas. El aspecto final será similar al de la siguiente imagen, con las variaciones lógicas de cada tema.

3. Formulario de contacto

El WordPress de EducaMadrid incorpora entre sus herramientas el plugin Contact Form 7, que nos permite crear un formulario de contacto, o varios, totalmente operativo y solamente incluyendo un shortcode en nuestro espacio.

Básicamente los formularios web son un medio de comunicación entre usuarios y administradores de la web. Podemos cumplimentar estos formularios web de igual modo que hacemos con los formularios de papel, utilizando casillas de selección, botones de opción, o campos de texto.

Posteriormente podremos explotar los datos obtenidos de la cumplimentación del formulario.

En nuestro ejemplo de web de centro, en la página de "Secretaría" hemos incluido el siguiente formulario de contacto:

Como vemos, puede ser una herramienta muy práctica de comunicación con las familias y resto de la comunidad educativa. Podemos usarlo para propósitos muy variados.

A continuación vamos a ver como añadir y configurar un formulario.

3.1. Crear el formulario

Para crear el formulario de contacto, lo primero que debemos hacer es acceder al escritorio de administración de WordPress y buscar en el menú izquierdo el apartado Contacto. Hacemos clic en Añadir nuevo.

Nos aparecerá la página titulada "Añadir nuevo formulario de contacto".

En el apartado 1 podremos ponerle un título al formulario. En el apartado 2 tendremos todas las opciones de edición divididas en cuatro pestañas. En el apartado 3 podremos guardar los cambios que hayamos realizado.

• Formulario: en esta pestaña podremos configurar los campos que aparecerán en el formulario, el orden y si son obligatorios. Existen diferentes tipos: texto, correo electrónico, teléfono, casillas de verificación, etc. 
  Podemos editar la plantilla con HTML. Por ejemplo, añadiendo un título al formulario con las etiquetas de encabezado <h3><h/3>. Para escribir un párrafo podemos usar <p></p>.
  
  Ahora veremos las etiquetas de formulario de Contact form 7, rodeadas de rojo en la siguiente imagen.

  

  
  Una etiqueta de formulario funciona como un marcador de posición para el formulario HTML, y se reemplazan con HTML al mostrar el formulario. Deben seguir reglas de sintaxis específicas. De lo contrario, la etiqueta de formulario no funcionará correctamente. Sin embargo, no es necesario recordar la sintaxis porque puedes usar las herramientas del generador de etiquetas para generar etiquetas de formulario correctas. Si hubiera algún error, el propio plugin avisa de que el código es incorrecto. Es recomendable realizar cambios uno a uno y guardar para comprobar que no haya errores.
  
  Para incluir más elementos en la plantilla del formulario, colocamos el ratón en el lugar  del texto en el que queramos insertar el elemento. A continuación hacemos clic en el elemento. Aparecerá un menú contextual. En la siguiente imagen hemos elegido el tipo casilla de verificación, para comprobar si quien escribe es una familia del centro. La configuramos como campo requerido para que sea obligatorio marcarla. Colocamos las opciones SÍ y No en cada línea de respuesta y activamos el check en "Pon primero una etiqueta, la casilla de verificación al final" y "Hacer que las casillas de verificación sean exclusivas".
  
  
  Una vez completado, pulsamos Insertar y esta etiqueta estará disponible en nuestro cuestionario. Terminamos incluyendo en el botón enviar una etiqueta Math Captcha, que obliga a realizar una operación matemática correctamente antes de enviar el formulario.
  El resto de etiquetas ser insertan y se configuran de un modo similar.
  
  El aspecto final del código del formulario es este:
  
  
  
  
• Correo electrónico: en este apartado podremos elegir a qué cuenta de correo electrónico le llegarán los resultados de los formularios completos (campo "Para"), desde qué dirección se mandará (campo "De"), además de el asunto, el cuerpo del mensaje, etc.
  
  
  
  
• Mensajes: permitirá editar los mensajes que recibe el usuario cuando rellena el formulario o lo envía. 
• Ajustes adicionales: en esta pestaña puedes añadir alguna funcionalidad. En sus propia ayuda puedes encontrar alguna recomendación.
  

Una vez realizada la configuración, guarda los cambios. El formulario se almacenará en la subpágina del menú "Formularios de contacto", junto a su shortcode. 

3.2. Publicar el formulario

Copiando y pegando el shortcode que genera el plugin en un bloque del mismo nombre o en un widget HTML personalizado, el formulario de contacto se mostrará en la página deseada tal y como lo hayas configurado.

Insertar el shortcode en un bloque tipo shortcode:

Accede a la página deseada y pulsa en editar. Localiza el lugar donde deseas colocarlo. Inserta un bloque shortcode. Copia el código y publica para ver el resultado.

Insertar el shortcode en un widget HTML personalizado:

Accede en el escritorio de administración al apartado Apariencia, Widgets. Elige el wdget HTML personalizado y la zona donde querrás que se muestre el formulario. Pulsa en Añadir Widget.

A continuación, ponle el titulo al widget y en el apartado llamado "Contenido", pega el shortcode obtenido. Después pulsa en Hecho y en Publicar.

De estas dos maneras puedes insertar el formulario en el espacio web del centro.

3.3. Editar, duplicar o eliminar el formulario

Para editar el formulario una vez creado, vuelve al escritorio de administración, menú izquierdo Contacto, Formularios de contacto.

Debajo del nombre del formulario aparecerán al pasar el curso las opciones de Editar y Duplcar.

Editar nos llevará a la página mostrada en el subcapítulo anterior.

Pulsando en Duplicar generaremos una copia exacta del formulario.

Haciendo clic en borrar podremos eliminar el formulario que ya no nos sirva.

4. Slider de imágenes

El WordPress de EducaMadrid nos permite incorporar a nuestra web galerías de imágenes en forma de slider (carrusel) de una manera muy sencilla y rápida, mediante el uso del plugin Smart Slider 3. Tiene algunas características muy interesantes:

• Permite añadir capas de texto, botones, etc. que flotan sobre la imagen de fondo.
• Permite poner el slider a ancho completo y a pantalla completa.
• Cuenta con varias posibilidades de animación para la transición entre diapositivas.
• Su velocidad de carga es rápida.
  

En nuestro ejemplo de Web de centro, tenemos algunas galerías incorporadas que podemos ver:

En la página de Nuestro centro, tenemos una galería configurada como un carrusel decorativo como podemos ver en la siguiente imagen.

Pero en realidad, el slider, nos ofrece muchas posibilidades de configuración a las que podemos sacar mucho partido, por ejemplo en la página "Servicios y actividades" se usa una galería para mostrar las instalaciones del centro

Es una herramienta muy versátil y fácil de configurar que dará a nuestra web un aspecto más acabado y completo. Veamos cómo añadir y configurar un slider para nuestra web de centro. 

4.1. Subir las imágenes

 Para poder incluir una Galería de imágenes en nuestra web, primero tenemos que localizar y seleccionar las imágenes.

Una vez localizadas, debemos subirlas a nuestra Biblioteca de Medios.  Esta es un espacio donde los usuarios del sitio web de WordPress pueden almacenar archivos de todo tipo (imagen, vídeo, audio, documentos variados) y acceder a ellos desde cualquier lugar. Es como tener nuestro disco duro virtual en WordPress. El tamaño máximo del archivo es de 128 MB.

Veamos cómo acceder a la biblioteca de medios, cómo subir a ella las imágenes y cómo editarlas:

Acceso a la Biblioteca de medios

Desde el escritorio de Administración > Medios > Biblioteca

Subir las fotografías

Una vez en la Biblioteca de Medios, lo primero que haremos será pulsar en el botón "Añadir nuevo", que está al lado del título de la página. Se abre un espacio donde podemos arrastrar los archivos desde otra ventana del explorador de archivos o podemos seleccionarlos del ordenador pulsando el botón "Seleccionar archivos". 

Una vez seleccionados y cargados (se mostrará una barra de progreso en cada imagen subida) aparecerán en el modo de vista seleccionado (rejilla o lista) en la biblioteca. Haciendo clic en cada uno de ellos tendremos la vista "Detalles del adjunto", donde veremos la imagen, sus datos, el texto alternativo, titulo, leyenda, descripción, subido por, enlace, ver la página del adjunto, editar más detalles o borrar permanentemente. Este es el mejor momento para completar la información referente a la fotografía, especialmente su texto alternativo (alt) y descripción.

Editar la imagen y sus detalles

4.2. Crear, configurar y publicar el slider

Una vez tengamos todas las imágenes que queramos incluir en nuestro slider subidas a la Biblioteca de medios, podemos realizar la configuración de este.

5. Calendario

En muchas ocasiones, puede que nos interese compartir fechas señaladas con nuestro alumnado o familias, para informar sobre excursiones, conferencias, plazos de matriculación, ... Pues bien, el WordPress de EducaMadrid pone a nuestra disposición el plugin M.E. Calendar Lite , que nos permitirá configurar todo eso.

Este centro, en su página de Agenda, tiene todas las fechas señaladas recogidas en forma de calendario, para que podemos visualizarlas, hacer búsquedas, etc.

Veamos aquí cómo incorporar un calendario y cómo añadirle eventos.

6. Moderación de comentarios

WordPress lleva integrado en su sistema la moderación de los comentarios que el visitante puede realizar en nuestras entradas o páginas. Al acceder al Escritorio de administrador, el apartado "De un vistazo!" nos muestra el número de comentarios que hay en nuestra página.

Para acceder a la herramienta de comentarios, podemos pulsar sobre el enlace recuadrado arriba o en el menú izquierdo "Comentarios". Si tenemos alguno pendiente de moderar aparecerá aquí con un círculo rojo con número en blanco.

En esta página podemos filtrar los comentarios. Por defecto aparecen todos, pero podemos seleccionar Míos, Pendientes, Aprobado, Spam y Papelera.

• Todos: muestra los comentarios aprobados y pendientes de moderación.
• Míos: filtra por los comentarios escritos por el usuario con el que tenemos iniciada sesión en la administración.
• Pendiente: muestra los comentarios pendientes de moderación.
• Aprobados: carga los comentarios que hayan sido aprobados.
• Spam: muestra los comentarios marcados como spam. 
• Papelera: carga los comentarios que hemos enviado a la papelera tras su moderación.

Los comentarios aparecen en la tabla, donde podemos rechazarlos, responderlos, editarlos, marcarlos como spam o enviarlos a la papelera:

• Aprobar: solo se muestra para los comentarios pendientes de moderación. Sirve para aceptar y publicar el comentario.
• Rechazar: solo se muestra para los comentarios ya aprobados. Sirve para volver a dejar un comentario en estado de moderación.
• Responder: con él podremos responder de forma directa a un comentario escrito por un usuario.
• Edición rápida: permite editar el texto del comentario y aplicar los cambios necesarios. 
• Editar: nos deja hacer una edición completa del comentario. Además de su texto, podremos cambiar el nombre del autor, su correo electrónico o la url que haya añadido. También podremos cambiar su estado o borrarlo.
• Spam: marca el comentario como spam y no se publicará.
• Enviar a la Papelera: envía el comentario a la papelera y tampoco se publicará.

También podemos actuar en lote sobre varios de ellos, como en otros menús de WordPress.

De este modo se realiza la moderación de comentarios en el WordPress de EducaMadrid.

7. Formulario de suscripción

Para que nuestros visitantes puedan estar debidamente informados de nuestras publicaciones en el sitio web del centro, el WordPress de EducaMadrid cuenta con el plugin "Email Subscribers & Newsletters", cuyas funcionalidades permiten:

• Recopilar las direcciones de correo electrónico a través de un formulario: este se inserta en cualquier lugar del sitio web (widget o página)
• Mandar correos electrónicos con las nuevas entradas publicadas: permite la automatización de este proceso.

Insertar el formulario en un widget

Para insertar el formulario predefinido por el plugin en un widget, accedemos al escritorio de administración, apartado Apariencia, submenú Widgets. Elegimos el área en el que lo queremos colocar y arrastramos el widget llamado "Email subscribers" hasta el área del widget.

En nuestra web de ejemplo, hemos colocado este widget en el área de widget derecha del pie. El resultado sería el siguiente:

Modificar el formulario:

Para modificar el formulario que viene predefinido en el plugin, accedemos al escritorio de administración, menú Email Subscribers, apartado Formularios. Aparecerá la siguiente ventana: 

Si colocamos el punterio sobre Primer Formulario, aparecerá debajo la opción Editar. Hacemos clic sobre ella. Navegamos hacia la siguiente página:

En ella podemos renombrar el formulario (el que viene creado por defecto se llama "Primer formulario" y agregar una descripción.

En cuanto a los campos del formulario, es necesario que añadamos los campos "Etiquetas", de correo electrónico y nombre.  También podemos modificar el texto del botón.

Es muy recomendable que activemos el check en "Mostrar la casilla de verificación de consentimiento del RGPD" y editemos el texto, que por defecto viene en inglés.

8. Grid de últimas entradas

En una web, un grid es una cuadrícula que permite mostrar varios elementos que comparten una categoría. Puede incluir las últimas entradas del blog, los trabajos de un portfolio, etc. Los elementos se colocan en filas, con un número fiojo de ellas, y en columnas/as, que incluso puede que incluya hasta una paginación.

Un ejemplo de grid o cuadrícula es el que muestra "Nuestros Proyectos" en la página de portada de nuestra web de ejemplo.

En el WordPress de EducaMadrid disponemos del plugin The Post Grid, que nos permitirá crear estas cuadrículas de contenidos e insertarlas en nuestras páginas o entradas.

A continuación, veremos como crear, configurar y publicar un grid de últimas entradas en nuestro espacio web de centro usando The Post Grid.