Generateblocks: element capçalera

  1. Propòsit:
    • El bloc Headline s’utilitza per a inserir i personalitzar títols o encapçalats en una pàgina o entrada de WordPress. Oferix opcions avançades de disseny i estilització per a ressaltar visualment el text del titular.
  2. 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.
  3. Ú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.
  4. 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.
  5. Compatibilitat amb GenerateBlocks:
    • Funciona sense problemes amb altres blocs proporcionats per GenerateBlocks, permetent una coherència en el disseny i la personalització.

Generateblocks: element botó

  1. Propòsit:
    • 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.
  2. 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ó.
  3. Ú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.
  4. 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ó.
  5. Compatibilitat amb GenerateBlocks:
    • Funciona de manera coherent amb altres blocs proporcionats per GenerateBlocks, permetent una combinació eficient per a dissenys personalitzats.

Bloc iframe

Imatge Categoria Millores

Amb el bloc d’iframe podrem inserir iframes de forma senzilla en les pàgines i posts de PortalEdu.

1-Des de l’editor estàndar, busquem el bloc:

2-Introduïm l’URL que volem inserir com a iframe (ha de començar per https://):

3-Quan hàgem completat l’URL, apareixerà la pàgina referida:

4-Ara podem configurar la resta d’opcions, en la columna de configuració, a la dreta:

Podem configurar:

  • Amplada: responsiva en % o absoluta en píxels.
  • Alçada: la configurarem sempre en píxels.
  • Barra de desplaçament: Depenent del contingut, quan estiga activa, es mostrarà la barra de scroll a la dreta per tal de navegar l’iframe de dalt a baix.
  • Permet pantalla completa: Depenent del contingut, permetrà que l’iframe ocupe tota la pantalla.
  • Càrrega diferida: Carrega el contingut de l’iframe després de pintar la resta de contingut de la pàgina on es trobe. Així accelerem la càrrega de la pàgina de PortalEdu.

Inserció d’iframes amb codi de substitució (shortcode)

És possible inserir iframes amb el shortcode corresponent, tant des de l’editor de WordPress com des de l’editor visual. Per exemple:

iframe shortcode mestreacasa

Exemple no permés:

iframe tag no permés

Exemple permés:

iframe shortcode youtube

Per tal d’inserir l’iframe des de l’editor de blocs, podem escriure directament el shortcode, amb la sintaxi que es veu en els exemples anteriors. Alternativament, podem afegir un bloc de “Codi de substitució” o bé un bloc “HTML personalitzat” i escriure-hi dins el codi de l’iframe,

Gutenberg giny codi substitució

Cal tindre en compte que no tots els llocs permeten ser embeguts i que en PortalEdu només funcionaran URLs HTTPS.

En cas que vulgueu mostrar continguts d’altres webs, una altra alternativa és que utilitzeu en el Menú de pàgines de la vostra web un element de tipus Enllaç Personalitzat.

Precaucions quan inserim iframes:

Quan obtenim un codi d’iframe de continguts externs, hem de revisar i editar si cal, alguns paràmetres del codi, si no volem que el contingut incrustat ocupe tota la pàgina o la deixe inutilitzable.

Així, per exemple, aquest es un codi d’inserció obtingut de genially (que no podem inserir directament):

Per tal d’inserir-lo en el nostre post, hauríem de eliminar, o ajustar, alguns parámetres, com aquests:
width=”1600px” height=”901px”
position: absolute; top: 0; left: 0;

A més a més, hem d’utilitzar el shortcode d’iframe. Quedaria així:

O si volem especificar l’alçària en pixels (p.e 500px):

Propietat intel·lectual (Consideracions sobre allò que publiquem en el web)

Imagen Categoría General

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

Es tracta d’una extensió per a visualitzar i administrar les dades del centre educatiu. Només l’administrador del lloc podrà veure o editar la informació del centre.

Per a accedir a la finestra principal del plugin s’ha de navegar des de l’escriptori del lloc del centre a:
Herramientas > Informació del Centre

Des d’ací es podran veure i modificar dades del centre com el seu nom, URL, direcció, etc.

Pagina Configuracion

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 Escritorio Va

Widget de visualizació


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

Widget

I es veurà de la manera següent amb imatge superior o amb imatge lateral, respectivament:

Widget Superior
Widget Lateral

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.

Llocs

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']

Configuració de 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:

https://portal.edu.gva.es/portal/va/us-de-camps-personalitzats/

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:

https://wiki.edu.gva.es/gvait3du/tiki-index.php?page=Gesti%C3%B3-Cau-PortalEdu

Ús de 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ç:

MetaSlider: plug-in per crear presentacions amb diapositives

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

  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.

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

Programació d’entrades (publicació 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.