FORMACIÓ

Generateblocks: element contenidor

El bloc Contenidor té com a objectiu principal agrupar i contindre altres blocs. Proporciona un contenidor visual i estructural que permet organitzar i personalitzar la presentació dels elements dins d’ell.

Generateblocks bloc contenidor

Característiques clau

  • Disseny Flexible: Permet ajustar l’ample del contenidor per a adaptar-se a les necessitats específiques del disseny.
  • Fons Personalitzable: Oferix opcions per a personalitzar el fons del contenidor, incloent-hi colors i gradients.
  • Marges i Farciments: Facilita el control precís dels marges i farciments al voltant del contenidor.
  • Opcions de Responsivitat: Permet definir comportaments específics per a diferents grandàries de pantalla, assegurant una presentació adequada en dispositius mòbils i d’escriptori.

Ús comú

  • Seccions i Blocs Complexos: Utilitzat per a crear seccions de pàgina o blocs més complexos i organitzar altres blocs dins d’ell.
  • Personalització Estilística: És fonamental per a la personalització estilística avançada de seccions específiques d’una pàgina.

Integració amb Gutenberg

  • Totalment integrat amb l’editor de blocs Gutenberg de WordPress, la qual cosa facilita la creació i personalització de contingut visualment atractiu.

Bloc contenidor Seccions configuració
Vista de configuracions que admet el bloc contenidor
Bloc contenidor: exemple 1

Generateblocks: element quadrícula

El bloc Quadrícula (Grid) està dissenyat per a permetre als usuaris crear i personalitzar sistemes de quadrícula flexibles en les seues pàgines. Proporciona una estructura organitzada i versàtil per a col·locar i alinear altres blocs de manera precisa.

Característiques clau

  • Divisió en Columnes: Facilita la creació de sistemes de columnes personalitzables per al disseny de contingut.
  • Alineació i Espaiat: Permet alinear i ajustar l’espai entre les columnes, brindant un control detallat sobre el disseny.
  • Ample Variable: Possibilita establir amples variables per a cada columna, permetent dissenys més complexos.
  • Personalització Estilística: Oferix opcions per a personalitzar el fons, vores i altres estils per a les columnes i el contenidor de la quadrícula.
  • Opcions de Responsividad: Permet definir comportaments específics per a diferents grandàries de pantalla, assegurant una presentació òptima en dispositius mòbils i d’escriptori.

Ús comú

  • Disseny de Pàgina Avançat: Ideal per a estructures de pàgina més complexes, especialment quan es requerix un disseny basat en columnes.
  • Seccions Especialitzades: Utilitzat per a crear seccions amb columnes diferents, la qual cosa facilita la presentació visualment atractiva del contingut.

Integració amb Gutenberg

  • Totalment integrat amb l’editor de blocs Gutenberg de WordPress, facilitant la construcció i personalització de contingut.

Compatibilitat amb GenerateBlocks (Editor de blocs)

  • Funciona de manera coherent amb altres blocs proporcionats per GenerateBlocks, permetent una combinació eficient per a dissenys personalitzats.

Generateblocks: element titular

El bloc Titular (Headline) s’utilitza per a inserir i personalitzar títols, encapçalats o simplement text en una pàgina o entrada de WordPress. Oferix opcions avançades de disseny i estilització per a ressaltar visualment el text.

Generateblocks - Tirular

Característiques clau

  • Textos Dinàmics: Permet ingressar text per al titular de manera fàcil i ràpida.
  • Personalització Tipogràfica: Oferix opcions detallades per a personalitzar la tipografia, com el tipus de lletra, grandària, pes i color del text.
  • Opcions de Fons: Permet agregar fons, ombres i altres efectes visuals al titular per a destacar-lo.
  • Alineació i Espaiat: Proporciona controls precisos per a alinear i ajustar l’espaiat del titular.
  • Animacions: Pot admetre animacions d’entrada, proporcionant un aspecte dinàmic al titular.

Ús comú

  • Titulars Destacats: Ideal per a destacar seccions clau o informació important en una pàgina.
  • Encapçalats de Pàgina: Utilitzat per a crear encapçalats visuals cridaners per a diferents seccions d’una pàgina o entrada.
  • Text en general, amb tipografia i estils avançats.

Integració amb Gutenberg

  • Totalment integrat amb l’editor de blocs Gutenberg de WordPress, la qual cosa facilita la inserció i personalització de titulars sense haver de recórrer al codi HTML.

Compatibilitat amb GenerateBlocks (Editor de blocs)

  • Funciona sense problemes amb altres blocs proporcionats per GenerateBlocks, permetent una coherència en el disseny i la personalització.

Generateblocks: element botó

El bloc Button s’utilitza per a inserir i personalitzar botons en una pàgina o entrada de WordPress. Proporciona opcions avançades de disseny i estilització per a crear botons atractius i cridaners.

Característiques clau

  • Text Personalitzat: Permet ingressar el text del botó de manera fàcil i ràpida.
  • Estilització Avançada: Oferix opcions detallades per a personalitzar l’aparença del botó, incloent-hi colors, tipografia, vores i ombres.
  • Enllaços i Accions: Pot vincular-se a pàgines, publicacions, URL externes o realitzar accions específiques en resposta a clics.
  • Grandàries Variables: Permet ajustar la grandària del botó per a adaptar-se al disseny general de la pàgina.
  • Animacions: Admet animacions d’entrada per a agregar dinamisme visual al botó.

Ús comú

  • Anomenades a l’Acció: Ideal per a botons que encoratgen als usuaris a realitzar accions específiques.
  • Botons de Navegació: S’utilitza per a crear botons de navegació visualment destacats.
  • Vinculació a Elements: Pot utilitzar-se per a vincular-se a altres seccions de la pàgina, publicacions relacionades o recursos externs.

Integració amb Gutenberg

  • Totalment integrat amb l’editor de blocs Gutenberg de WordPress, la qual cosa facilita la inserció i personalització de botons sense la necessitat de coneixements de programació.

Compatibilitat amb GenerateBlocks (Editor de blocs)

  • Funciona de manera coherent amb altres blocs proporcionats per GenerateBlocks, permetent una combinació eficient per a dissenys personalitzats.

Què he de saber sobre propietat intel·lectual?

Us recordem que és il·legal la publicació no autoritzada de material subjecte a drets d’autor (llibres, material d’editorials, cançons, vídeos, imatges…).


Els titulars han de respectar la regulació vigent sobre el tractament de dades personals i la propietat intel·lectual, tal com s’indica en les condicions d’ús del portal:
https://portal.edu.gva.es/portal/va/condicions-dus-del-portal/

Completa la informació del centre en Portaledu

Administra, completa i visualitza les dades del teu centre en la seua pàgina web de Portaledu des de l’escriptori: Eines > Informació del Centre. Es tracta d’una extensió que només l’administrador del lloc podrà veure o editar.

Es podran veure i modificar dades del centre com el seu nom, URL, direcció, etc.

Si es vol modificar la imatge simplement cal fer clic sobre el botó “Upload image” i a continuació seleccionar una foto de la biblioteca d’imatges, o bé pujar una nova imatge.

Una vegada realitzats tots els canvis cal polsar sobre el botó “Guardar”.

La funcionalitat d’URL Amigable canvia l’URL del site. A més a més, quan es tracta de centres educatius, estableix una redirecció de manera que qualsevol URL muntada amb els codis de centre serà redirigida a l’URL amigable corresponent (ex. portal.edu.gva.es/03010831/* –> portal.edu.gva.es/iesaltaia/*).

Widget d’escriptori

Disposem d’un eines en l’escriptori de WordPress amb el format següent:

Widget de visualització

Podem mostar la informació del centre des d’Aparença > Ginys configurant la pantalla següent:

Shortcode

És possible pintar el widget d’informació del centre en qualsevol post mitjançant un shortcode:

Sense paràmetres: 

[centre_info]

Imatge dalt: 

[centre_info position='1']

Image esquerra: 

[centre_info position='2']

Visualització de les dades:

Informació del centre (nou aspecte)

En cas que el centre tinga llocs vinculats (p. ex. de l’AMPA), el giny mostrarà també una llista d’aquests llocs en una nova pestanya.

Com publicar podcasts

Alguns llocs en Portaledu publiquen podcasts de la ràdio escolar.

Aquests podcasts s’allotgen habitualment en el sharepoint DOCUMENTAR del centre i es publiquen en Portaledu mitjançant un bloc d’Àudio.

Aquest bloc es configura amb l’URL del fitxer d’àudio.

Però això no és suficient si volem que els nostres podcasts siguen llegits correctament per diferents aplicacions de lectura de podcasts a través de feeds de RSS, com per exemple AntennaPod, o altres.

Per tal d’aconseguir el funcionament correcte amb eixes aplicacions, haurem d’afegir al nostre post un camp personalitzat de tipus enclosure, on afegirem les metadades del nostre fitxer de podcast.

Potser t’interesse consultar la informació sobre camps personalitzats:

¿Cómo se utilizan los campos personalizados? – Portaledu (gva.es)

Ho farem així:

1. Mentre editem el post, en la, part de baix, secció de camps personalitzats, busquem en el desplegable si existeix algun amb el nom enclosure. Si existeix, el seleccionem. Si no, farem clic sobre Introdueix un nou i escriurem: enclosure

2. Una vegada hàgem seleccionat el nom enclosure o bé l’hàgem afegit, haurem de completar el valor, de la següent manera, en tres línies diferents:

  • Línia 1: URL del post (la mateixa URL que hem posat en el bloc d’àudio)
  • Línia 2: 0 (zero)
  • Línia 3: audio/ogg (tipus de fitxer perquè ho puguen interpretar les aplicacions de lectura de podcats a través d’RSS)

3. I clicarem el botó “Afegeix un camp personalitzat”

4. Sempre que afegim un camp personalitzat, no hem d’oblidar clicar sobre Actualitza en el camp personalitzat mateix. També hem d’actualitzar el nostre post.

5. Finalment, és convenient invalidar la memòria cau del nostre lloc, si volem que els lectors de feeds RSS agarren els canvis ràpidament. Si no invalidem manualment, els lectors de feeds podran veure els canvis passada mitja hora aproximadament. En l’enllaç següent trobareu informació sobre com invalidar la cau: Control Caché (NGINX): plug-in per a gestionar la memòria cau en Portaledu – Portaledu (gva.es)

Com s’utilitzen els camps personalitzats?

WordPress permet la utilització de camps personalitzats en els posts. Aquests camps personalitzats o, en anglés custom fields, són metadades que s’associen als nostres posts amb diferents finalitats.

Si no hem utilitzat mai aquests camps personalitzats, potser haurem de configurar el nostre editor per tal d’accedir-hi a la configuració.

1. Aneu a la pantalla d’edició de qualsevol entrada o pàgina.

2. Feu clic sobre els tres punts de dalt a la dreta

3. En la part de baix, aneu a preferències:

4. En la secció Tauler > Addicional > Camps personalitzats

5. Activeu l’opció de camps personalitzats. Fixeu-vos que ens adverteix que el post ha d’estar guardat abans d’aplicar la configuració, per a no perdre res del que hàgem fet.

6. Cliqueu sobre Activa i recarrega; WordPress eixirà del post actual (per això havia d’estar guardat prèviament) i us obrirà un de nou, on podreu visualitzar els camps personalitzats en la part de davall:

7. D’ara en avant, tindreu a la vista els camps personalitzats sempre que editeu un post.

Trobareu informació addicional en el següent enllaç:

Assign custom fields

MetaSlider: plug-in per crear presentacions amb diapositives

Aprén a crear una presentació amb diapositives visible al teu Portaledu!

Consell: Considera estes dos alternatives a MetaSlider per a mostrar un carrusel d’entrades (o de les seues imatges destacades) o bé un carrusel d’imatges, fins i tot amb efectes d’animació.

Gutenberg: Bloc carrusel
Bloc contenidor animat

1. En primer lloc, accedeix a MetaSlider des de l’escriptori per a crear la teua presentació:

2. Una vegada hem accedit a la secció, farem clic sobre “Nou” (Afegir nou pas de diapositives)

3. Creada la nova presentació, començarem a afegir diapositives (imatges):

4. Amb aquesta versió podrem treballar només amb imatges. Podrem pujar imatges locals directament a la mèdia o utilitzar les que ja tenim en la biblioteca de mèdia del nostre lloc web:

5. Cadascuna de les diapositives de la presentació, podrem definir un text que acompanye a la imatge, així com convertir aquesta imatge en un enllaç

6. En la part dreta trobem les opcions de configuració bàsica, que apliquen a tota la presentació, com ara, l’ample, l’alçada, l’efecte de transició, etc. Hem de tindre en compte que el plugin és capaç d’ajustar l’amplada de les imatges al tamany especificat. Tanmateix, l’alçada es retallarà o es mostrarà completa, segons les opcions avançades que configurem.

Metaslider - Opcions principals i ajustos avançats

Per eixe motiu, és convenient que les imatges d’una mateixa presentació tinguen proporcions semblants, de manera que quede més homogènia.

7. En les opcions avançades, podem configurar, per exemple, que l’amplada s’ajuste al contenidor (ample 100%). Això farà que no es tinga en compte l’amplada configurada en les opcions bàsiques. També hi trobarem altres configuracions com el mode carrusel, el retard de la diapositiva, etc.

8. Quan ja tinguem preparada la presentació, podrem maquetar-la en qualsevol entrada o pàgina del nostre lloc. Per a fer-ho, utilitzarem el bloc de MetaSlider.

9. Inserit el bloc, ens ofereix utilitzar alguna de les presentacions que hàgem creat:

10. Seleccionat el pas de diapositives, podem previsualitzar el resultat:

  • Logo Portaledu

Mitjançant codi d’inserció

També es possible inserir la presentació de metaslider en qualsevol post mitjançant el seu codi d’inserció, entre claudàtors. Trobarem el codi de cada presentació en la vista general de presentacions de Metaslider.

Escriurem el codi corresponent en el bloc de shortcode (codi de substitució):

Com es programen entrades per a una data futura?

Ara podem programar les nostres entrades de Portaledu perquè es publiquen en una data futura. Les entrades es publicaran habitualment dins de l’hora posterior a la data/hora que hàgeu establert. Us ho expliquem en aquest post:

Quan creem o editem una entrada, podrem planificar la data de publicació, des de la part de dalt de la barra dreta d’edició.

Farem clic sobre ‘Immediatament’, a la dreta de ‘Publica’. Se’ns obrirà un calendari i altres camps per a especificar la data i hora de la publicació:

Programar entrada futura 1

Una vegada introduïda la data i l’hora, farem clic fora del calendari, en qualsevol zona del cos de la entrada. Veurem que es tanca el calendari i apareixen la data i l’hora consignades en la barra dreta, al costat de ‘Publica’

Aleshores farem clic sobre el botó ‘Planifica…’ Se’ns mostrarà un resum de les dades de publicació perquè confirmem, fent clic novament sobre el botó ‘Planifica’.

Una vegada planificada la publicació, en el llistat d’entrades, es mostrarà l’entrada com a ‘Prevista’

Com hem dit, l’entrada es publicarà dins de l’hora posterior a la data/hora programada(*). En aquest cas, si hem programat l’entrada per a les 14:00, potser es publicarà a les 14:01, o a les 14:22, etc. Habitualment, serà abans de les 15:00.

No us haureu d’alarmar si veieu que la vostra entrada mostra en la columna de la data, un missatge de ‘Falta data de publicació’(**) en lloc de mostrar ‘Previst’. Això només vol dir que WordPress ha detectat que ja ha passat l’hora programada i que l’entrada encara no s’ha publicat. Però, com diem, abans d’una hora (*) estarà publicada.

(*)Depenent de la càrrega del servidor, el temps podria ser superior.

(**)Actualització a 31/03/2025. El missatge ‘Falta data de publicació’ ha sigut canviat per ‘Programació perduda’

Avís de privacitat

Este lloc web utilitza només cookies tècniques necessàries per al seu funcionament. No s’emmagatzemen dades amb finalitats publicitàries ni es comparteixen amb tercers. S’utilitza analítica interna sense cookies, i només es recull la IP amb finalitats de seguretat.

Veure política de cookies