Tutorial 2b. La inserció dels ginys laterals amb XTECBlocs

Els ginys laterals que es proposen fer són els següents:

  • Giny de contacte amb la biblioteca
  • Giny d'accés al catàleg ePèrgam de cada centre
  • Giny d'enllaços a les web del centre
  • Giny d'enllaços d'interès
  • Giny de compartir la informació
  • Giny d'arxiu del blog i de cerca
  • Giny de Creative Commons
  • Giny de comptador de visites
  • Giny amb la imatge del Departament d'Ensenyament


1. Com fer el giny de contacte amb la biblioteca

  • Dins del menú lateral cal clicar a Aparença i quan es desplegui el menú premeu Ginys. Seleccioneu el giny de Text prement Afegeix.


  • Poseu un títol, com per exemple “Contacta amb la biblioteca”.
  • I en la part de contingut heu d’afegir aquesta sintaxi:
<p><a href="mailto:xxxxx@gmail.com">xxxxx@gmail.com </a></p>

tenint en compte que les xxxxx s’han de substituir pel correu de la biblioteca.

  • Premeu Desa.


Hi ha d'altres maneres d'oferir el contacte amb la biblioteca com:

  • Inserir una imatge dins del giny de text, amb l'enllaç al correu electrònic.
  • Fer una pàgina en el menú principal i inserir un formulari de Google. Mireu el blog exemple



2. Com fer el giny amb l'enllaç a l'ePèrgam

2.1.Procés

  • S'ha de pujar la imatge de l'ePèrgam a la mediateca i guardar-nos la ruta
  • S'ha d'obtenir l'enllaç d'accés a l'ePèrgam del centre
  • S'ha de crear un giny de text i omplir-lo

2.2. Desenvolupament del Procés

1) Pujar la imatge de l'ePèrgam a la mediateca

  • Cal pujar la imatge des del nostre ordinador

  • Un cop a la mediateca, cliqueu a la imatge que acabeu de pujar i s'obrirà una pantalla que mostrarà a la dreta la seva URL.
  • Copieu-la, seleccionant-la amb el ratolí i prement Control+C. En fer aquesta acció, la URL quedarà guardada a la carpeta de l’ordinador per després inserir-la en el giny corresponent.


2) Obtenir l'enllaç a l'ePèrgam del centre des del web del Programa

El podem aconseguir des de l'entorn de consulta del web de l'ePèrgam.

  • Accediu a l'entorn de consulta del web del Programa i seleccioneu el tipus de centre.
  • Cliqueu a les tecles Control+F i s'obrirà una finestra en el vostre navegador.
  • Introduïu el nom del centre i quedarà destacat en color.
  • Situeu el ratolí sobre el nom del centre i cliqueu amb el botó dret del ratolí.
  • Seleccioneu, del desplegable, Copia l'enllaç o un missatge similar.

[[http://xtec.gencat.cat/ca/projectes/biblioteca/epergam/entorn-consulta]]

3) Crear el giny de text i omplir-lo

  • Situats a Tauler cliqueu a Aparença | Ginys | Text i torneu a clicar a Afegeix un giny

i ompliu amb el codi següent:

<a href="https://aplicacions.ensenyament.gencat.cat/epergam/web/biblioteca.jsp?codi=aaaaaaaa" 
target="_blank"> <img src="xxxxxxxxxx" alt="" width="200" /></a>

Caldrà que canvieu les aaaaaaaa pel codi del centre.

Vigileu de conservar les cometes " del final.

Caldrà que canvieu les xxxxxxxxxxx per la URL que té la imatge pujada a la mediateca i que prèviament haureu copiat.



3. Com fer els ginys: Enllaços del centre i enllaços d’interès.

Recordeu que és aconsellable oferir els enllaços del centre agrupats en un mateix giny i, en un altre, posar-hi els enllaços d’interès que voleu destacar. El procediment a seguir serà el mateix per als dos ginys.


2.1. Procés

  • S’ha de crear una categoria d’enllaços. Exemple: Enllaços del centre.
  • S’han d’escriure els enllaços un per un i assignar-los a aquesta categoria.
  • S’ha d’afegir el giny d’enllaços i configurar-lo.


2.2. Desenvolupament del procés

1) Crear la categoria de l’enllaç

  • Cal que aneu a Enllaços | Categories d’enllaços i creeu la categoria.
  • Introduïu el Nom de la categoria, per exemple: Enllaços del centre.
  • I premeu Afegir una categoria.


2) Afegir els enllaços i assignar-los la categoria

  • Aneu a Enllaços | Afegeix i poseu-hi les dades de l’enllaç.

Exemple:
Nom: Web del centre
Adreça web: http://www...........xtec.cat
Categoria: Enllaços del centre
Destinació: Cal marcar blank per tal que l’enllaç s’obri en una finestra nova

  • Premeu Afegeix.
  • Aneu afegint tots els enllaços que vulgueu agrupar sota la categoria Enllaços del centre.


3) Crear el giny lateral d’enllaços

  • Seleccioneu Aparença i quan es desplegui el menú premeu Ginys.


  • Seleccioneu el giny d' Enllaços i premeu Afegeix.


  • Configureu el giny amb els paràmetres següents:
    • Seleccioneu Categoria de l’enllaç: Enllaços del centre
    • Seleccioneu Ordenat per Títol de l’enllaç
    • Marqueu Mostra el nom de l’enllaç
    • Premeu Desa i Tanca



Podreu seleccionar la posició que voleu que aparegui el giny en la part lateral prement al nom del giny amb el botó esquerre del ratolí i, sense soltar-lo, movent el giny cap amunt o cap avall.


4. Com fer el giny de Comparteix la informació (Extensió AddToAny)


  • Des del Tauler aneu a Extensions i premeu Activa a Extensió AddToAny. El widget es posarà a l’apartat de Ginys.


  • Aneu a Aparença | Ginys, trieu Giny AddToAnyShare i premeu Afegeix.
  • Configureu-lo, tal com indica la imatge. Podeu, però, triar qualsevol dels estils que hi ha.
  • Podeu seleccionar amb el cursor la posició que voleu de hi surti, desplaçant el giny amunt i avall.
  • Premeu Desa el Giny.



5. Inserció de la resta de ginys

XtecBlocs ofereix la possibilitat d’inserir una sèrie de ginys clicant Aparença | Ginys. El procés d’inserció és el mateix que el que acabem de veure. Els ginys que creiem que no poden faltar en el blog són els que permeten recuperar la informació que anem publicant, que són:

  • Cerca
  • Arxiu del blog

Els ginys de categories i d’etiquetes es tractaran en el mòdul 3

Els ginys de text permeten inserir textos, imatges i enllaçar-los cap a alguna adreça web. Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada, i no ens cal saber codi html. Tot i això tenir alguns coneixements de codi html ens facilitarà la tasca. A continuació mostrem algunes utilitats d’aquests ginys.



6. Com fer el giny Creative Commons


El portal de Creative Commons s'ha renovat recentment, però la informació que proporciona és la mateixa que la imatge que teniu més amunt


  • Torneu al blog i seleccioneu Aparença | Ginys | Giny de text i cliqueu Afegeix.
  • Escriviu el títol i enganxeu el codi que heu copiat anteriorment en el contingut del giny.


El mòdul 3 d’aquest curs ofereix més informació sobre les diferents llicències Creative Commons.. Pel que fa a les imatges dels nostres alumnes que publiquem al blog i de les quals haurem de tenir el consentiment familiar per fer-ho, hem de tenir present que, si en el nostre blog optem per una llicència Creative Commons, haurem de fer constar que el contingut del blog es regeix pels criteris de la llicència, llevat de les imatges de les persones que siguin clarament identificables, ja que el centre ha obtingut el permís per publicar les imatges dels alumnes a les webs del centre, i potser no tindrem permís per autoritzar que se'n faci un altre ús com podria ser una obra derivada.

* Per tant, és convenient afegir a final del codi embed que hem copiat, la frase següent:

^ llevat de les imatges de les persones que siguin clarament identificables. ^
  • A continuació seleccioneu la posició en què voleu que hi aparegui el giny i premeu Desa el Giny.
  • Si visualitzeu el blog veureu el resultat.



7. Com fer el giny Comptador de visites


Hi ha diverses aplicacions que ofereixen de forma gratuïta el servei de comptador. Els passos per inserir-lo al nostre blog són molt similars. A continuació s'especifica el procés més habitual.


  • Torneu al blog i seleccioneu Aparença|Ginys | Giny de text i cliqueu Afegeix.
  • Escriviu el títol i enganxeu el codi que heu copiat anteriorment en el contingut del giny.
  • A continuació premeu Desa.
  • Si visualitzeu el blog veureu el resultat.

Hi ha diverses aplicacions que faciliten comptadors de visites de forma gratuïta, amb dissenys ben diferents i atractius, i el procediment per a l’obtenció del codi embed és similar. Podeu comprovar-lo en aquesta cerca de Google.



8. Com fer el giny per inserir la imatge del Departament d'Educació


  • Pugeu a la mediateca del blog la imatge del logotip del Departament que hi ha a continuació.





  • En la mediateca caldrà copiar la URL del logo que indica la imatge següent, clicant amb el botó dret del ratolí la URL i seleccionant "Copia l'adreça de l'enllaç". Cal que el reserveu apart, per després inserir-lo en el giny.




  • Caldrà que creeu un giny de text des d'Aparença | Ginys.
  • No poseu títol.
  • En Contingut del giny escriviu la sintaxis que trobareu més avall canviant la frase "adreça de la imatge de la vostra mediateca" per la URL del logo que heu copiat abans en la vostra mediateca. Ha d'estar entre cometes.


<a href="http://ensenyament.gencat.cat/ca/inici/" target="_blank">
<img src="adreça de la imatge de la vostra mediateca"/></a>


  • A continuació premeu Desa i mireu com ha quedat en el blog.