15-16 sessió 2

Sessió 2: Nodes
 Adaptació del document elaborat per: Departament d’Ensenyament de la Generalitat de Catalunya

Data: Novembre 2015.

Introducció

El treball es realitzarà a l’espai de pràctiques i en aquesta sessió es realitzarà un treball introductori:
Es duran a terme les següents accions:
  1. Edició d’un article
  2. Maquetació de la portada del lloc
  3. Personalització del blog de classe
  4. Edició de la portada de la Revista
  5. Introducció a la xarxa social
Es recomana treballar en parelles i agrupats per etapa educativa (primària – secundària).

1. Edició d’un article

Conceptes previs

    • Per defecte, els articles es publiquen en mode resum, combinació d’una imatge i un text resum.
    • Es pot publicar el contingut íntegre d’un article marcant la casella Mostra contingut sencer de la caixa Paràmetres
Tasques
Es proposa escriure un article en mode resum. L’article haurà de contenir un vídeo, se li hauran d’assignar tres categories: ESO1 o P5  (segons l’espai de pràctiques que tingueu), Portada i Revista, i s’hi haurà d’afegir una etiqueta de Nadal. També es pot afegir la icona de vídeo, que avisarà del contingut multimèdia, encara que no es veurà a la Portada.

La categoria Revista us proporcionarà la funcionalitat de convertir Nodes en una Revista Escolar. Aquesta categoria no existeix a la maqueta de Nodes i s’haurà de crear durant l’edició de l’article.

Per fer-ho seguiu aquest procés després de validar-vos com a Administrador (extrem superior dret) amb l’usuari i la contrasenya que us facilitarà el vostre coordinador de seminari:

    1. Afegiu un article nou.
      Aquest és el resultat que heu d’obtenir.
Aneu al Tauler des del desplegable que trobareu sota el nom del centre.
I des d’aquí aneu a Articles ->  Afegeix

Editeu l’article seguint els criteris següents:

  • El títol ha de ser El Nadal
  • Descarregueu i afegiu aquesta imatge com a imatge resum (ho heu de fer des de la caixa Imatge Resum situada a la banda dreta i heu de penjar-la a la mediateca) .
  • Com a resum, afegiu aquest text (ho heu de fer a la caixa Resum situada a la dreta):
Ja ha arribat el Nadal, i així ho hem celebrat a l’escola/institut!
  • Com a contingut de l’article afegiu un d’aquests vídeos de youtube:
    video P5    https://youtu.be/DW5xXiyb-Qg    video ESO1   https://youtu.be/_PSm7f5sAgs
    NOTA:     No cal inserir el codi del vídeo, només cal enganxar l’adreça URL del navegador (WordPress fa la inserció directament)
  • Afegiu també aquest text a sota del vídeo. Si teniu dificultats, seleccioneu el vídeo, polsar tecla de la dreta (–>) i després polsar Intro.
P5: Aquest any a la classe hem preparat la nadala de “L’avet de Nadal”. Realment ens ha sortit molt bé i la cantata va ser tot un èxit! Si algú no va poder assistir, aquí teniu el vídeo.
ESO1: Quina passada! Heu vist com nevava? I els llums de Nadal fets amb paraigües? Realment, amb el dron hem filmat unes imatges espectaculars! 
  • A la caixa Paràmetres, situada també a la dreta, trieu la icona de vídeo del desplegable d’Icones.
  • Heu de situar l’article a 3 categories: a ESO 1 o P5 (segons sigui el vostre centre de Primària o Secundària), a Revista i a Portada.
    NOTA: Si no existeix Revista, creeu-la.
  • Etiqueteu l’article com a Nadal.
    NOTA: Si no existeix l’etiqueta, creeu-la.
  • Publiqueu l’article (caixa Publica a l’extrem superior dret).

Aquí trobareu informació de com publicar un article.
Aquí trobareu informació de com categoritzar un article.
Aquí trobareu informació de com etiquetar un article.
Aquí trobareu informació de les diferències entre el mode resum i el mode sencer, i de com afegir contingut al mode resum.

Observeu que:

  • L’article s’ha publicat a la Portada, a dalt de tot
  • Es veu el text de resum i la imatge de resum
  • La imatge s’adapta a l’espai. En general, és recomanable utilitzar imatges resum panoràmiques.
  • No es veu el contingut (text ampliat ni el vídeo)
  • La icona de vídeo adverteix al visitant que si visitem l’article veurem un vídeo
  1. Editeu de nou l’article i marqueu la casella Mostra contingut sencer de la caixa Paràmetres. Cliqueu al botó Actualitza de la caixa Publica (extrem superior dret).
Aquest és el resultat que heu d’obtenir.
 Observeu que:

  • Ja no es mostra la imatge ni el text resum
  • Es veu el contingut de l’article, incloent el vídeo
  • És convenient treure la icona del vídeo ja que pot donar la sensació que hi ha més vídeos dins de l’article
  • La maquetació no és massa correcta, retallant-se el vídeo que és de format 4:3 i donant una sensació de estirament excessiva. Això ho corregirem a l’apartat següent.
2. Maquetació de la portada
Conceptes previs
    • És possible definir l’amplada que ocupen els articles segons unes distribucions predefinides per fila
    • Es pot definir la distribució d’articles de manera independent per a la primera fila, la segona fila i la resta de files.
    • Es pot fixar un o més articles a dalt de tot de la Portada.
    • Es pot definir un contingut fix a dalt de tot de la Portada, independentment dels articles

Tasques

  1. Modifiqueu la distribució de la primera fila perquè l’article de Fi de curs ocupi 2/3 de l’espai. 
Aneu a Aparença -> Personalitza -> Pàgina d’inici, Fila 1. Un cop fet això, heu de clicar a Desa i Publica (part superior) i tancar (creueta a l’extrem superior esquerre).

 

Aquest és el resultat que heu d’obtenir.
 Observeu que:

  • La nova amplada de l’article s’adapta millor a l’amplada del vídeo.
  • L’article El Nadal ha guanyat en pes visual i per tant és una manera molt natural i elegant de destacar un article, sense utilitzar colors cridaners ni icones en moviment.
  1. Ara destacareu un article antic.
Editeu l’article Notícia 2. Aneu a la caixa Publica (part superior dreta) i feu clic a Edita de l’element Visibilitat:Pública. Marqueu la casella Fixa l’article a la part superior. Cliqueu a Actualitza.
Aquest és el resultat que heu d’obtenir.

I aquesta és la caixa Publica:

  1. Ara modificareu la distribució de la primera fila per a equilibrar els dos articles (cadascun ha d’ocupar la meitat de la fila).
Aneu de nou a Tauler -> Aparença -> Personalitza -> Pàgina d’inici, Fila 1 i trieu 2 articles iguals. Cliqueu a Desa i Publica i tanqueu.
Aquest és el resultat que heu d’obtenir.
    1. Finalment modificareu la distribució de la segona fila a 3 articles. Aneu de nou a Tauler -> Aparença -> Personalitza -> Pàgina d’inici, Fila 2, i trieu 3 articles. Cliqueu a Desa i Publica i tanqueu.

Observeu que:

  • És molt senzill canviar la distribució dels articles per a optimitzar la seva visualització
  • És molt fàcil destacar un article
  • A més a mes es poden ordenar els articles destacats canviant les seves dates de publicació. Els més recents es mostren primer

 

3. Personalització del blog de classe

Conceptes previs

    • Quan es fa clic en una categoria, WordPress genera automàticament una pàgina amb els articles d’aquella categoria.
    • Es pot escriure contingut abans dels articles.
    • Es poden personalitzar els ginys de la barra lateral per a cada categoria.
    • De manera molt senzilla, una categoria de Nodes pot fer la funció de blog de classe, de departament, de projecte…

Tasques

Aneu a personalitzar una mica el blog amb el giny Grup-Classe

  1. Abans d’editar el giny, pujareu una foto a la mediateca que després necessitareu.  Us proposem que pugeu aquesta.

Això ho fareu des de de Multimèdia | Afegeix.

Copieu l’adreça url de la imatge. La trobareu al costat de l’imatge:

    1. A la portada, feu clic sobre la categoria ESO 1A o P5 de l’article Nadal

Observeu que:

  • És una pàgina de categoria amb tots els articles que s’han categoritzat com a ESO 1A o P5
  • La barra esquerra té uns ginys diferents als ginys de portada
    1. Aneu a Personalitza.
Aquí seleccioneu Giny | Categories (Barra esquerra) on trobareu diversos ginys en negreta. Són els ginys que s’apliquen a aquella categoria. Busqueu el giny Grup classe d’ESO 1A o P5A i modifiqueu el seu contingut. Si no hi fos, sempre es podria afegir clicant a Afegeix Giny. Es proposa editar-lo seguint l’exemple
  • La caixa Text html ens permet inserir qualsevol contingut html, també una fotografia. Per fer-ho heu d’enganxar el següent codi html:
<img src=url de la imatge>
on la url és l’adreça que heu copiat abans. Si no teniu o heu perdut l’adreça de l’imatge, aneu a la Mediateca i seleccioneu de nou l’imatge (l’adreça està al costat dret, a la casella URL).
  • L’agenda/calendari: permet vincular un calendari de Google al nostre blog d’aula.
    Per aquesta pràctica bàsica, ens limitarem a seleccionar un calendari Google ja predefinit. Si no està ja seleccionat, trieu Agenda d’exemple i marqueu la casella Calendari.
  • Ompliu informació del tutor/a i l’horari d’atenció a les famílies.
  • Enllaços (menú associat): permet vincular un menú creat prèviament. Per aquesta pràctica bàsica ens limitarem a seleccionar un menú entre els menús ja creats. Seleccioneu el que vulgueu.
  • És molt important definir la visibilitat. Aneu a la caixa Visibilitat situada a la part inferior de la configuració del giny, trieu Mostra, Categoria i el curs adient.
Més informació:
4. Edició de la portada de la Revista
Podeu utilitzar Nodes per a crear la Revista escolar o de l’institut. Únicament heu hagut d’etiquetar bé els articles.
Podeu personalitzar aquesta pàgina perquè tingui un aspecte propi. Us proposem dues formes:
  1. Descripció de la categoria.
    • Aneu a Articles | Categories i seleccioneu la categoria Revista.
    • Ompliu la caixa de Descripció. Podeu afegir text, fotografies o editar el codi html.
  1. Aneu a definir un giny que es visualitzi només a Revista.
Abans d’editar el giny, descarregueu aquesta fotografia i pugeu-la a la Mediateca. (Multimèdia | Mediateca | Afegeix)
  • Aneu a Tauler -> Aparença  -> Ginys. Seleccioneu un giny de tipus Text:
  • Situeu aquest giny a dalt de tot de l’àrea de ginys Categories.
  • Poseu com a títol Nadal 2015
  • Aneu a la Mediateca, cliqueu a sobre de la imatge i copieu la url que es mostra a la dreta de la finestra de Detalls de l’Adjunt.
  • Ompliu el quadre de giny de text amb el codi
<img src=url de la imatge>
  • Si voleu, podeu afegir algun text addicional. Una opció podria ser:
<img src=url de la imatge><b>Especial de Nadal</b>
    • Ara només us quedarà acotar la seva visibilitat. Si no modifiquéssiu res, el giny seria visible a totes les pàgines de la categoria. Simplement haureu de clicar al botó de Visibilitat i seleccionar la categoria Revista.
5. Introducció a la xarxa social

Les tasques de la xarxa social de Nodes les fareu a l’entorn agora.xtec.cat/nodes. Entreu a la pàgina per l’extrem superior dret.

Per accedir ho podeu fer amb el vostre usuari de la xtec clicant primerament a l’enllaç al moodle.

Un cop validats entreu a la xarxa social clicant a la icona xarxa nodes situada a la part superior dreta.

  1.  Interacció en el mur general.
    Aneu a xarxa social des de la icona que teniu a la part superior dreta.
mur
S’obrirà la vostra pàgina d’activitat a on trobareu el vostre mur. Aquí farem 3 entrades:
  • Una entrada amb una imatge. Podeu pujar l’imatge o afegir l’enllaç d’una imatge ja existent. 
mur-imatge
  • Una entrada amb un vídeo. Aquí no cal fer servir la icona: escrivint l’adreça de youtube, wordpress ja ho interpreta.
  • Una entrada amb un enllaç a una pàgina web. Segons la pàgina t’oferirà la possibilitat d’incloure una imatge de miniatura.
    mur-enllaç
Observeu que a sota de l’entrada podeu arribar a tenir fins a cinc botons: Comentari, Preferit, Suprimeix, Inadequat, M’agrada.
  1. Els Nodes
  • Entreu a un Node públic. Feu una entrada al mur i una entrada en un fòrum.
Podeu provar amb el Node Cinema.
  • Sol·liciteu l’entrada a un Node privat.
Podeu provar amb el Node Professorat.

 Observeu que:

  • No es poden veure els Nodes ocults.
  • Que allò que es publica en un node públic es replica al mur general.
  • No es pot entrar directament a un node privat fins que un administrador et dóna permís.

C. Tasques a fer al centre

        • Passeu a l’equip directiu la presentació de Nodes que teniu als materials del Seminari
        • Podeu sol·licitar l’activació del vostre espai Nodes aquí
      • El centre disposa de l’Espai Web Nodes

Expliqueu a l’equip directiu del vostre centre la possibilitat de crear blocs d’aula a Nodes. Podeu trobar els materials i més informació als materials de Nodes a l’Ateneu i també sobre com importar blocs de wordpress i blogger.

Un cop feta la presentació corresponent a l’equip directiu ompliu el següent formulari i envieu-l0.
Important: Les tasques encomanades són requisits per a obtenir la certificació de 20h del seminari.