Tutorial 2a. La inserció dels ginys laterals amb Nodes

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

  • Giny de menú d'accés a la informació sobre l'organització de la biblioteca
  • Giny que mostri el logotip de la biblioteca
  • Giny que mostri el segell de pertinença al Directori de blogs i webs de biblioteques escolars. (Quan l'enviï el Departament, que sol ser en finalitzar la formació).
  • Giny que mostri l'accés al catàleg ePèrgam
  • Giny d'enllaç a recursos digitals externs
  • Giny d'enllaços d'interès
  • Giny d'etiquetes

No obstant,cada centre podrà inserir els ginys que consideri més adient.

  • A continuació s'especifica el procediment per inserir els ginys de Text i els ginys de menú personalitzat que serviran per fer els cinc primers de la llista de més amunt.
  • Els ginys d'etiquetes i d'enllaços d'interès es tractaran en el mòdul següent.
  • Cal recordar que la barra lateral de les pàgines de categoria es localitza sempre a l'esquerra.

1. Com fer el menú lateral d'accés a la informació sobre l'organització de la biblioteca

La funció d'aquest menú serà oferir l'accés directe a la informació relacionada amb el funcionament de la biblioteca. Recordeu que, abans de començar a crear aquest menú, heu hagut de fer els articles amb aquesta informació, tal con s'indica al tutorial 1a.

Per comprovar el resultat podeu consultar el blog exemple.

1.1. Procés

  1. Crear un menú amb els elements que volem que agrupar
  2. Crear un giny per permeti visualitzar el menú anterior (giny de menú personalitzat)
    1. Omplir el camp títol
    2. Seleccionar la visibilitat (en quines pàgines volem que es vegi)
    3. Ordenar-lo en la barra lateral
  3. Desar tots els canvis

1.2. Desenvolupament del procés

1.2.1. Creació d'un menú

* Situats a la pàgina de categoria de biblioteca, cliqueu a Personalitza | Menús.

  • Seleccioneu Afegeix un menú i ompliu el títol que podria ser "Sobre la biblioteca" i premeu el botó Crea menú.


  • Cliqueu a Afegeix elements i a continuació a Articles. Seleccioneu els articles que voleu que reculli el menú, clicant a sobre del seu títol.


  • Podeu reordenar els elements afegits abans de prémer Desa i publica.

Tot i haver creat el menú, no es visualitzarà fins que no fem el pas següent, que és crear un giny de menú.



1.2.2. Creació d'un giny per permeti visualitzar el menú (giny de menú personalitzat)
  • Situats a la pàgina de categoria de biblioteca, cliqueu a Personalitza | Ginys.

  • Escolliu Categories (barra esquera)

  • Seleccioneu Afegeix un giny i cerqueu el giny de Menú personalizat en la llista que hi apareix a la dreta. Aquest giny se situa bastat avall de la llista.


  • Ompliu els paràmetres del giny de menú personalitzat:
    • Títol: La biblioteca (Títol que volem que es visualitzi en la web)
    • Seleccioneu el menú: Sobre la biblioteca (nom del menú que hem fet)
    • Cliqueu a Visibilitat i seleccioneu que es mostri exclusivament en la Categoria de Biblioteca.
    • Premeu Desa i publica per salvar els canvis

Si tornem a la pàgina de biblioteca ara sí que veurem el menú. Per defecte si sutuarà l'últim de la barra lateral, però podem canviar l'ordre si tornem a accedir a Personalitza |Ginys | Categories (barra esquerra). Només caldrà seleccionar el giny amb el botó esquerre del ratolí i desplaçar-lo cap amunt del giny.

2. Com fer els ginys que continguin una imatge (giny de text)

Aquests ginys són:

  • Giny que mostri el logotip de la biblioteca
  • Giny que mostri l'accés al catàleg ePèrgam
  • Giny d'enllaç a recursos digitals externs
  • Giny que mostri el segell de pertinença al Directori de blogs i webs de biblioteques escolars.

2.1. Procés

  1. Pujar la imatge a la mediateca del blog
  2. Seleccionar un giny de text
    1. Omplir els camps títol i contingut
    2. Seleccionar la visibilitat (en quines pàgines volem que es vegi)
    3. Ordenar-lo en la barra lateral
  3. Desar els canvis

2.2. Desenvolupament del procés

2.2.1. Pujada de la imatge a la mediateca del blog
  • Des del Tauler cal seleccionar Multimèdia | Mediateca

  • Pugeu la imatge que ens interessa i que s'ha d'haver guardat, prèviament, en l'ordinador.
  • Un cop a la mediateca, cliqueu a la imatge 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.2.2. Seleccionar un giny de text
  • Situats a la pàgina de categoria de biblioteca, cliqueu a Personalitza | Ginys.

  • Escolliu Categories (barra esquera)

  • Seleccioneu Afegeix un giny i cerqueu el giny de Text en la llista que hi apareix a la dreta. Aquest giny se situa al final de tot.

2.2.3. Ompliment dels camps títol i contingut i selecció de la visibilitat
  • Ompliu el contingut amb codi html que trobareu a continuació per a cada giny ja que, de moment, no hi ha cap giny que insereixi imatges de forma més automatitzada. El títol, si és redundant, no caldrà posar-lo.
2.2.4. Seleccionar la visibilitat
  • Cliqueu al botó Visibilitat i seleccioneu que es mostri exclusivament en la Categoria de Biblioteca.

  • En acabar, cal prémer el botó Desa i publica

Per saber més sobre com afegir ginys, cal que consulteu els tutorials de la guia Nodes.


2.2.5. Codi html que s'ha de posar en cada giny

  • Ginys amb imatge sense enllaç a l'exterior, com el que usarem per inserir el logotip o mascota de la biblioteca.


<img src="xxxxxxxxxxxx" alt="" width="200"  />

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

Tingueu cura que l'adreça es mantingui dins de les cometes. "xxxxxxxxxx".

La mida de 200px es pot modificar.

  • Ginys amb imatge amb enllaç cap a l'exterior, com per exemple l'enllaç a un blog de recursos digitals extern.
<a href="aaaaaaaa" 
target="_blank"> <img src="xxxxxxxxxx" alt="" width="200" /></a>

Caldrà que canvieu les aaaaaaaa per l'adreça del recurs extern com per exemple: http://blocs.xtec.cat/recursosdigitalsbep/ per a primària i per http://blocs.xtec.cat/recursosdigitalsbes/ per a secundària.

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

Tingueu cura que les dues adreces que substituïm es mantinguin dins de les cometes. "aaaaaaaa". "xxxxxxxxxxx".

La mida de 200px, es pot modificar.

  • Ginys amb imatge amb enllaç cap a l'exterior, com per exemple l'enllaç a l'ePèrgam.
<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.

Tingueu cura que l'adreça es mantingui dins de les cometes. "xxxxxxxxxx".

La mida de 200px es pot modificar.



3. Com obtenir l'enllaç a l'ePèrgam des del web del Programa

En cas de necessitar obtenir l'enllaç del catàleg de la biblioteca, 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]]

4. Com crear el menú d'enllaços d'interès

El procediment és molt similar al que acabem de veure. El passos a seguir són:

  • Creació d'un menú
  • Crear el giny que possibilitarà la visibilitat del menú en la barra lateral.

Per crear el menú recordem els passos:

  • Situats a la pàgina de categoria de biblioteca, cliqueu a Personalitza | Menús.
  • Seleccioneu Afegeix un menú i ompliu el títol que podria ser "Enllaços d'interès biblioteca" i premeu el botó Crea menú. (Recordem que aquest títol només serveix per localitzar-lo dins de l'aplicació).
  • Cliqueu a Afegeix elements i a continuació a Enllaços personalitzats.

  • Ompliu el camp URL i el Text de l'enllaç i cliqueu a Afegeix al menú. S'ha de procedir igual afegint tots els enllaços d'interès que vulguem difondre.

  • En acabar cal prémer Desa i Publica