Tutorial 1b. La publicació de continguts amb XTECBlocs
Un cop acabada l'estructura del blog, la publicació de continguts s'ha de fer mitjançant la creació articles. En aquest tutorial s'explicarà el següent:
- Edició d'articles
- Com inserir imatges
- Com inserir enllaços dins de la imatge
- Com inserir un carrusel d'imatges
- Com inserir vídeos
- Com inserir formularis
1. Edició d’articles
- Aneu a Tauler | Articles i seleccioneu Afegeix.
- Escriviu el títol, el contingut i assigneu les etiquetes i categories relacionades amb l’article.
- Si ja heu introduït, prèviament, les etiquetes i categories a l’aplicació, només caldrà seleccionar-les. D’aquesta manera ens estalviem errades en l’escriptura.
- L’entorn d’edició de l’article mostra les eines d’edició, similar a qualsevol tractament de text. També el de la inserció d’enllaços en el text o en les imatges, com després veurem. També mostra la possibilitat d’entrar en el codi html i modificar-ne alguna part, si en sabem.
Podeu configurar els diferents paràmetres de publicació com ara desar l’article en esborrany o programar en el temps la seva publicació.
2. Com inserir imatges
- Col·loqueu el cursor on voleu inserir la imatge dins del cos de l'article i cliqueu a Insereix | Add Media.
- Podeu seleccionar la imatge del vostre ordinador i penjar-la a la mediateca del blog clicant a sobre Penja fitxers.
- Un cop a la mediateca cliqueu-hi i configureu els paràmetres Títol, Alineació i Mida. Un cop acabat cliqueu Insereix a l’article.
- Si voleu crear una galeria d’imatges, seleccioneu des de la Mediateca, Crea una galeria. Les imatges es mostraran en l'article, però sense l'efecte moviment que ofereix el carrusel.
3. Com inserir enllaços dins de la imatge
3.1. Inserció d'un enllaç web
Hi ha diversos procediments per inserir un enllaç web dins d'una imatge que enviï l’usuari a un altre lloc web. El més ràpid és aquest:
- Seleccioneu la imatge clicant-hi a sobre d’ella i a continuació cliqueu a la icona d’inserir un enllaç.
- Cliqueu a la icona de la rodeta per editar l'enllaç.
- Introduïu l’adreça de destinació, marqueu Obre enllaç en una finestra nova i premeu el botó Actualitza o Afegeix un enllaç.
- Quan tinguem l’article acabat premeu Publica per tal que es desin els canvis.
3.2. Inserció d’un enllaç de correu electrònic
S’ha de procedir igual que per inserir un enllaç web, però a la casella de la URL s’ha d’escriure: mailto:xxxxx@xtec.cat o el correu electrònic que vulguem. Quan cliquem la imatge, s’obrirà el compte de correu per enviar el missatge.
4. Com inserir un carrusel d'imatges
- En primer lloc caldrà afegir un carrusel nou i a continuació inserir-lo dins de l'article.
4.1. Com afegir un carrusel nou
- Accediu a Tauler | Carrusel | Afegeix.
- Poseu un títol i afegiu les imatges clicant a Insereix diapositiva d'imatge, que es troba a la dreta.
- Podeu seleccionar les imatges d'un sol cop des de la mediateca i prémer Selecciona. Es recomana un límit d'unes 8 a 10.
- Podeu deixar els paràmetres per defecte i després anar-los canviant en funció de com voleu que es visualitzi.
- Clicant a la imatge seleccionada, podeu afegir-hi un enllaç extern. Si és el cas, caldrà també seleccionar que s'obri en una finestra nova.
- En acabar cal prémer Publica per salvar els canvis.
- També es poden fer carrusels per inserir diapositives de vídeo o de text.
- Podeu afegir tants carrusels com vulgueu i després incrustar-los a diferents llocs del blog.
- Per saber més sobre la creació de carrusels podeu consultar l'Ajuda d'XTECBlocs/Nodes.
4.2. Com inserir-lo dins de l'article
- Ara només caldrà accedir a l'article i posar el cursor en el lloc on volem inserir el carrusel i seleccionar l'opció Insereix carrusel.
- En el desplegable que apareix, seleccioneu el carrusel que voleu inserir i cliqueu Insereix carrusel.
- Si és el cas, caldrà incloure algun petit text a l'article.
- Per acabar, premeu Publica.
5. Inserció d’un vídeo en l’article des del YouTube o Vimeo
- Situeu el cursor en el cos de l'article.
- Cliqueu sobre la icona de YouTube o Vimeo
- Enganxeu l’adreça URL del vídeo i cliqueu a Insereix o a Okay.
* Podeu modificar les mides de visualització del vídeo. Les mides més comuns en els blogs són 420 x 315 píxels.
- Si el voleu col·locar al mig, caldrà que entreu al codi HTML, clicant a Text i escriure aquesta sintaxi.
<div style="text-align: center;"> codi del vídeo </div>
- Un cop incrustat el vídeo, no ens hem d’oblidar d’escriure algun text i de seleccionar les etiquetes i les categories corresponents. Un cop acabat ja podeu clicar a Actualitza o a Publica
6. Inserció d’un formulari dins del blog
Podem fer formularis per preguntar diferents qüestions al llarg del curs:
- Per recollir les desiderates dels usuaris.
- Per saber els seus gustos lectors.
- Per rebre suggeriments, etc.
6.1. Procés
El procediment és obrir un formulari amb el Google Drive i després inserir-lo en una pàgina estàtica del blog i, fins i tot, el podem inserir en un gadget de text en un lateral, si li canviem la mida.
6.2. Procediment pràctic
- Amb el compte de correu gmail de la biblioteca o el compte XTEC del centre aneu a Drive i cliqueu sobre Nou i seleccioneu Formularis de Google del menú que es desplegui.
- Abans d'editar-lo caldrà desmarcar l’opció Restringeix als usuaris del domini XTEC - Xarxa Telemàtica Educativa de Catalunya en cas que estigui activada. Per això heu de prémer la rodeta de configuració i desmarcar l'opció quan s'obri el menú desplegable.
- Creeu totes les preguntes i premeu Fet a cada pregunta.
- Quan tingueu el formulari acabat, caldrà configurar el missatge que es mostrarà als usuaris un cop hagin enviat el formulari (pàgina de confirmació). Per exemple:
"Gràcies. El seu missatge s'ha enviat correctament" o "Les vostres dades s’han rebut correctament".
Per fer-ho cal clicar a sobre la rodeta i seleccionar Presentació en el menú que s'obre. Podeu desar el missatge que surt per defecte, o escriure el que us interessi més.Caldrà desmarcar Mostra un enllaç per enviar una altra resposta.
- Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la següent finestra premeu <> per obtenir el codi embed. Copieu el codi HTML que apreix clicant amb el botó esquerre del ratolí a sobre de Copia. Podeu canviar primer la mira del formulari.
- Copieu el codi embed del vostre formulari i inseriu-lo a la pàgina del blog que heu triat.
- Si voleu inserir-lo en un giny o gadget lateral de Text, caldrà modificar-ne l’amplada i l’alçada. En els gadgets laterals les mides solen ser: width 300 i height 200, però dependrà del contingut del formulari.
- Ara caldrà configurar el formulari per tal de rebre les respostes directament al nostre correu:
- 1. Des d'edició del formulari cal clicar a Respostes i clicar a la icona de color verd anomenat Mostra les respostes en fulls de càlcul. Hem de seleccionar En un formulari nou. No ens oblidem d'activar la funció S'accepten respostes.
- 2. En la pantalla següent cal clicar a Eines i seleccionar Regles de notificació
- 3. Solament caldrà seleccionar com volem rebre les respostes i guardar els canvis