Actualización a WordPress 6.3: Descripción general

Recientemente PortalEdu ha sido actualizado a la versión WordPress 6.3, también conocido como «Ellery». Ésta introduce una serie de mejoras significativas en la plataforma, incluyendo:

Mejoras en la experiencia de edición:

  • Navegación mejorada en el editor de bloques: Se ha rediseñado la navegación del editor del sitio para que sea más intuitiva y fácil de usar.
  • Nuevo sistema de patrones de bloques: Se ha introducido un nuevo sistema de patrones de bloques más flexible y potente.
  • Paleta de comandos: Se ha añadido una nueva paleta de comandos que permite acceder rápidamente a las funciones del editor.

Características adicionales y mejoras del editor de sitios:

  • Nuevos bloques: Se han añadido nuevos bloques, como el bloque de «Navegación», «Notas al pie» o «Detalles».
  • Herramientas de diseño mejoradas: Se han mejorado las herramientas de diseño del editor, como la herramienta de alineación y la herramienta de espaciado.

Mejoras en el rendimiento y la accesibilidad:

  • Optimización de la entrega de JavaScript: Se ha optimizado la entrega de JavaScript para mejorar el tiempo de carga de la página.
  • Mejoras en el contraste: Se han realizado mejoras en el contraste para que el editor del sitio web sea más accesible.
  • Mejoras para el uso de lectores de pantalla: Se han realizado mejoras que afectan a la experiencia de usuarios que utilizan lectores de pantalla con determinados navegadores.

En la versión 6.3 de WordPress se han introducido nuevos bloques, disponibles desde el editor. En comparación con la versión 5.8, estos son algunos de los más destacados:

Bloques nuevos:

  • Notas al pie de página: Permite agregar notas al pie de página a tus publicaciones y páginas. Puedes personalizar el estilo del texto, el color del enlace y el diseño del bloque.
  • Detalles: Te permite mostrar información detallada sobre un tema específico, como un proyecto, una persona o un evento. Puedes agregar imágenes, texto y otros bloques dentro del bloque Detalles.
  • Patrones de bloques: Te permite guardar grupos de bloques como plantillas reutilizables. Puedes usar estos patrones para crear diseños de página consistentes en todo tu sitio web.

Mejoras en bloques existentes:

  • Portada (Fondo): Se ha mejorado el bloque Portada con nuevas opciones de diseño y la posibilidad de agregar un video de fondo.

Otras mejoras:

  • Se ha añadido un nuevo filtro de duotono para las imágenes.
  • Se ha mejorado la accesibilidad del editor de bloques.
  • Se ha optimizado el rendimiento del editor de bloques.

Además de los bloques nuevos y las mejoras en los bloques existentes, la versión 6.3 de WordPress también mantiene y evoluciona prácticas funcionalidades del editor de bloques, como:

  • Un modo de vista previa que te permite previsualizar tu contenido simulando diferentes dispositivos.
  • La posibilidad de deshacer y rehacer acciones.
  • La posibilidad de copiar y pegar bloques.
  • La posibilidad de agrupar bloques.
  • La posibilidad de exportar e importar bloques.

En general, la versión 6.3 de WordPress representa una importante actualización del editor de bloques, con nuevas funciones y mejoras que lo hacen más potente y flexible.

Generateblocks, elemento contenedor

  1. Propósito:
    • El bloque Container tiene como objetivo principal agrupar y contener otros bloques. Proporciona un contenedor visual y estructural que permite organizar y personalizar la presentación de los elementos dentro de él.
  2. Características Clave:
    • Diseño Flexible: Permite ajustar el ancho del contenedor para adaptarse a las necesidades específicas del diseño.
    • Fondo Personalizable: Ofrece opciones para personalizar el fondo del contenedor, incluyendo colores y gradientes.
    • Márgenes y Rellenos: Facilita el control preciso de los márgenes y rellenos alrededor del contenedor.
    • Opciones de Responsividad: Permite definir comportamientos específicos para diferentes tamaños de pantalla, asegurando una presentación adecuada en dispositivos móviles y de escritorio.
  3. Uso Común:
    • Secciones y Bloques Complejos: Utilizado para crear secciones de página o bloques más complejos al organizar otros bloques dentro de él.
    • Personalización Estilística: Es fundamental para la personalización estilística avanzada de secciones específicas de una página.
  4. Integración con Gutenberg:
    • Totalmente integrado con el editor de bloques Gutenberg de WordPress, lo que facilita la creación y personalización de contenido visualmente atractivo.
  5. Compatibilidad con GenerateBlocks:
    • Interactúa sin problemas con otros bloques proporcionados por GenerateBlocks, lo que permite una flexibilidad y coherencia en el diseño.

Generateblocks, elemento rejilla

  1. Propósito:
    • El bloque Grid está diseñado para permitir a los usuarios crear y personalizar sistemas de cuadrícula flexibles en sus páginas. Proporciona una estructura organizada y versátil para colocar y alinear otros bloques de manera precisa.
  2. Características Clave:
    • División en Columnas: Facilita la creación de sistemas de columnas personalizables para el diseño de contenido.
    • Alineación y Espaciado: Permite alinear y ajustar el espacio entre las columnas, brindando un control detallado sobre el diseño.
    • Ancho Variable: Posibilita establecer anchos variables para cada columna, permitiendo diseños más complejos.
    • Personalización Estilística: Ofrece opciones para personalizar el fondo, bordes y otros estilos para las columnas y el contenedor de la cuadrícula.
    • Opciones de Responsividad: Permite definir comportamientos específicos para diferentes tamaños de pantalla, asegurando una presentación óptima en dispositivos móviles y de escritorio.
  3. Uso Común:
    • Diseño de Página Avanzado: Ideal para estructuras de página más complejas, especialmente cuando se requiere un diseño basado en columnas.
    • Secciones Especializadas: Utilizado para crear secciones con columnas distintas, lo que facilita la presentación visualmente atractiva del contenido.
  4. Integración con Gutenberg:
    • Totalmente integrado con el editor de bloques Gutenberg de WordPress, facilitando la construcción y personalización de contenido.
  5. Compatibilidad con GenerateBlocks:
    • Funciona de manera coherente con otros bloques proporcionados por GenerateBlocks, permitiendo una combinación eficiente para diseños personalizados.

Generateblocks, elemento cabecera

  1. Propósito:
    • El bloque Headline se utiliza para insertar y personalizar títulos o encabezados en una página o entrada de WordPress. Ofrece opciones avanzadas de diseño y estilización para resaltar visualmente el texto del titular.
  2. Características Clave:
    • Textos Dinámicos: Permite ingresar texto para el titular de manera fácil y rápida.
    • Personalización Tipográfica: Ofrece opciones detalladas para personalizar la tipografía, como el tipo de letra, tamaño, peso y color del texto.
    • Opciones de Fondo: Permite agregar fondos, sombras y otros efectos visuales al titular para destacarlo.
    • Alineación y Espaciado: Proporciona controles precisos para alinear y ajustar el espaciado del titular.
    • Animaciones: Puede admitir animaciones de entrada, proporcionando un aspecto dinámico al titular.
  3. Uso Común:
    • Titulares Destacados: Ideal para destacar secciones clave o información importante en una página.
    • Encabezados de Página: Utilizado para crear encabezados visuales llamativos para diferentes secciones de una página o entrada.
  4. Integración con Gutenberg:
    • Totalmente integrado con el editor de bloques Gutenberg de WordPress, lo que facilita la inserción y personalización de titulares sin tener que recurrir al código HTML.
  5. Compatibilidad con GenerateBlocks:
    • Funciona sin problemas con otros bloques proporcionados por GenerateBlocks, permitiendo una coherencia en el diseño y la personalización.

Generateblocks, elemento botón

  1. Propósito:
    • El bloque Button se utiliza para insertar y personalizar botones en una página o entrada de WordPress. Proporciona opciones avanzadas de diseño y estilización para crear botones atractivos y llamativos.
  2. Características Clave:
    • Texto Personalizado: Permite ingresar el texto del botón de manera fácil y rápida.
    • Estilización Avanzada: Ofrece opciones detalladas para personalizar la apariencia del botón, incluyendo colores, tipografía, bordes y sombras.
    • Enlaces y Acciones: Puede vincularse a páginas, publicaciones, URL externas o realizar acciones específicas en respuesta a clics.
    • Tamaños Variables: Permite ajustar el tamaño del botón para adaptarse al diseño general de la página.
    • Animaciones: Admite animaciones de entrada para agregar dinamismo visual al botón.
  3. Uso Común:
    • Llamadas a la Acción: Ideal para botones que alientan a los usuarios a realizar acciones específicas.
    • Botones de Navegación: Se utiliza para crear botones de navegación visualmente destacados.
    • Vinculación a Elementos: Puede utilizarse para vincularse a otras secciones de la página, publicaciones relacionadas o recursos externos.
  4. Integración con Gutenberg:
    • Totalmente integrado con el editor de bloques Gutenberg de WordPress, lo que facilita la inserción y personalización de botones sin la necesidad de conocimientos de programación.
  5. Compatibilidad con GenerateBlocks:
    • Funciona de manera coherente con otros bloques proporcionados por GenerateBlocks, permitiendo una combinación eficiente para diseños personalizados.

Incorporación del plugin Generateblocks a PortalEdu

Imagen Categoría Mejoras

GenerateBlocks es un conjunto de bloques para WordPress diseñado para facilitar la creación y personalización de diseños en páginas y entradas del sitio. Los bloques son los componentes básicos que se utilizan en el editor de bloques de WordPress (Gutenberg), que reemplaza al antiguo editor clásico.

GenerateBlocks proporciona bloques adicionales que pueden ser utilizados para construir y diseñar páginas de manera más flexible. Algunas de las características comunes de los bloques de GenerateBlocks incluyen:

  1. Diseño Responsivo: Los bloques están diseñados para adaptarse a diferentes tamaños de pantalla y dispositivos.
  2. Personalización Avanzada: Permiten una amplia gama de opciones de personalización para controlar la apariencia y el diseño de los elementos en la página.
  3. Rendimiento Optimizado: Se enfoca en la eficiencia y el rendimiento para asegurar que las páginas carguen rápidamente.

Tipos de bloques:

En esta actualización se ha añadido cuatro tipos de bloques. Está previsto ir añadiendo nuevos tipos de bloques en futuros despliegues:

  • Contenedor: El bloque Container tiene como objetivo principal agrupar y contener otros bloques. Proporciona un contenedor visual y estructural que permite organizar y personalizar la presentación de los elementos dentro de él.
  • Rejilla: El bloque Grid está diseñado para permitir a los usuarios crear y personalizar sistemas de cuadrícula flexibles en sus páginas. Proporciona una estructura organizada y versátil para colocar y alinear otros bloques de manera precisa.
  • Cabecera: El bloque Headline se utiliza para insertar y personalizar títulos o encabezados en una página o entrada. Ofrece opciones avanzadas de diseño para resaltar visualmente el texto del titular.
  • Botón: El bloque Button proporciona opciones avanzadas de diseño a la hora de insertar y personalizar botones en una página o entrada.

Los bloques accesibles desde el buscador del editor estándar pulsando sobre «Ves a tots«

Una vez desplegados todos los bloques de Gutenberg, bajo el epígrafe GENERATEBLOCKS estarán disponibles los nuevos bloques

Bloque iframe

Imagen Categoría Mejoras

Con el bloque de iframe podremos insertar iframes de forma sencilla en las páginas y posts de PortalEdu.

1-Desde el editor estándar, buscamos el bloque:

2-Introducimos la URL que queremos insertar como iframe (tiene que empezar por https://):

3-Cuando hayamos completado la URL, aparecerá la página referida:

4-Ahora podemos configurar el resto de opciones, en la columna de configuración, a la derecha:

Podemos configurar:

  • Anchura: responsiva en % o absoluta en píxeles.
  • Altura: la configuraremos siempre en píxeles.
  • Barra de desplazamiento: Dependiendo del contenido, cuando esté activa, se mostrará la barra de scroll a la derecha para navegar el iframe de arriba abajo.
  • Permite pantalla completa: Dependiendo del contenido, permitirá que el iframe ocupe toda la pantalla.
  • Carga diferida: Carga el contenido del iframe después de pintar el resto de contenido de la página donde se encuentre. Así aceleramos la carga de la página de PortalEdu.

Inserción de iframes con código de sustitución (shortcode)

Es posible insertar iframes con el shortcode correspondiente, tanto desde el editor de WordPress como desde el editor visual. Por ejemplo:

iframe shortcode mestreacasa

Ejemplo no permitido:

iframe tag no permés

Ejemplo permitido:

iframe shortcode youtube

Para insertar el iframe desde el editor de bloques, podemos escribir directamente el shortcode, con la sintaxis que se ve en los ejemplos anteriores. Alternativamente, podemos añadir un bloque de «shortcode» o un bloque «HTML Personalizado» y escribir en él el código de iframe.

Gutenberg widget shortcode

Hay que tener en cuenta que no todos los sitios permiten ser embebidos y que en portaledu solo funcionarán URLs HTTPS.

En caso de que queráis mostrar contenidos de otras webs, otra alternativa es que utilicéis en el Menú de páginas de vuestra web un elemento de tipo Enlace Personalizado.

Precauciones al insertar iframes:

Cuando obtenemos un código de iframe de contenidos externos, debemos revisar y editar, si fuera necesario, algunos parámetros del código, si no queremos que el contenido incrustado ocupe toda la página o la deje inutilizada.

Así, por ejemplo, este es un código de inserción obtenido de genially (que no podemos insertar directamente):

Para poder insertarlo en nuestro post, deberíamos eliminar, o ajustar, algunos parámetros como estos:
width=»1600px» height=»901px»
position: absolute; top: 0; left: 0;

Además, es necesario utilizar el shortcode de iframe. Quedaría así:

O si queremos especificar la altura en píxels (p.e. 500px):

Propiedad intelectual (Consideraciones sobre lo que publicamos)

Imagen Categoría General

Os recordamos que es ilegal la publicación no autorizada de material sujeto a derechos de autor (libros, material de editoriales, canciones, vídeos, imágenes…).


Los titulares deben respetar la regulación vigente sobre el tratamiento de datos personales y la propiedad intelectual, tal como se indica en las condiciones de uso del portal:
https://portal.edu.gva.es/portal/es/condiciones-de-uso-del-portal/

PortalEdu plugins información centro

Se trata de una extensión para visualizar y administrar los datos del centro educativo.

Solo el administrador del sitio podrá ver o editar la información del centro.

Para acceder a la ventana principal del plugin se debe navegar desde el escritorio del sitio del centro a:
Herramientas > Información del Centro

Desde aquí se podrán ver y modificar datos del centro como su nombre, URL, dirección, etc.

Datos Del Centro

Si se quiere modificar la imagen simplemente hay que hacer clic sobre el botón «Upload image» y a continuación seleccionar una foto de la biblioteca de imágenes, o bien subir una nueva imagen.

Una vez realizados todos los cambios hay que pulsar sobre el botón «Guardar».

La funcionalidad de URL Amigable cambia la URL del site. Además, cuando se trata de centros educativos, establece una redirección de manera que cualquier URL montada con los códigos de centro será redirigida a la URL amigable correspondiente (ej. portal.edu.gva.es/03010831/* – > portal.edu.gva.es/iesaltaia/*).

Widget de escritorio


Disponemos de un widget en el escritorio de WordPress con el siguiente formato:

Widget Escritorio

Widget de visualización


Podemos mostar la información del centro desde Apariencia > Widgets configurando la siguiente pantalla:

Widget

Y se verá del siguiente modo con imagen superior o con imagen lateral, respectivamente:

Widget Arriba
Widget Izq

En caso de que el centro tenga sitios vinculados (p.ej. del AMPA), el widget mostrará también una lista de dichos sitios en una nueva pestaña.

Sitios

Shortcode


Es posible pintar el widget de información del centro en cualquier post mediante un shortcode:

Sin parámetros muestra imagen en la izquierda:

[centre_info] 

Imagen arriba:

[centre_info position='1']

Imagen izquierda:

[centre_info position='2']