Els recursos de pàgina de text i pàgina web.

Moodle bàsic com a professor.

7. Els recursos de pàgina de text i pàgina web.

Els recursos que el professorat sol posar amb més freqüència en un curs de Moodle són la Pàgina de text i la Pàgina web. La pàgina de text permet afegir text pur, per exemple per llistar un codi, o bé per donar-li un format senzill, el que genera el mateix Moodle o un de semblant al que generaria un correu electrònic (l'anomenada sintaxi Markdown).

Ara bé, si el que es desitja són pàgines complexes amb taules, imatges, inclusió de recursos multimèdia, etc., aleshores cal elaborar un recurs Pàgina web, de molt fàcil edició amb l'ajut de l'editor HTML que Moodle incorpora.

Crear un recurs Pàgina de text

Activeu l'edició del curs prement el botó Activa l'edició que trobareu a la part superior dreta o, també, des del bloc Administració.
Escolliu el punt on voleu inserir el recurs: a la part comuna del curs, o bé a la setmana o tema corresponent.
Aneu al menú Afegeix un recurs i desplegueu-lo.
Trieu l'opció Compon una pàgina de text:
Aquesta acció fa que s’obri la pàgina d’edició del recurs.
Escriviu el Nom del recurs, que serà el que apareixerà en el curs i feu-ne un petit Resum que podreu formatar amb l’ajut de l’editor HTML de Moodle:
Escriviu el Text complet, és a dir, el contingut del recurs pàgina de text. Ho podeu fer amb tres formats diferents, que haureu d'especificar des del desplegable de la part inferior Formatatge:
- Autoformat de Moodle: el resultat és pràcticament igual a l'entrada, tot i que Moodle crearà enllaços web quan trobi adreces electròniques, les línies en blanc separaran paràgrafs i es crearan emoticones a partir del codi de text.
- Format text: en aquest cas no hi haurà cap mena de formatat automàtic i es conservaran exactament els caràcters que s'han introduït. Molt útil en el cas de llistes de codi, com en aquest exemple de codi LaTeX:
- Format Markdown: a partir d'una sintaxi molt senzilla i en format de text s'aconsegueix un resultat ben formatat i bastant ric. Per exemple, escrivint:# Titular
  obtindreu un titular de primer ordre, i amb ## Titular
  un de segon ordre. Per crear un enllaç a XTEC, per exemple, n'hi ha prou amb
  [XTEC](http://www.xtec.cat)
  Podeu trobar molta més informació sobre aquest format a la web del projecte.
Si premeu el botó Mostra paràmetres la pàgina us mostrarà una sèrie d'opcions per mostrar el recurs:
- La mateixa finestra mostrarà el recurs dins la finestra actual, és a dir, dividirà la pantalla en dues parts: a la superior hi haurà l'encapçalament del curs i la barra de navegació, mentre que a la part inferior es mostrarà el recurs. Molt útil per a usuaris amb poques habilitats tecnològiques perquè els manté dins el curs.
- Nova finestra mostrarà el recurs en una nova finestra emergent. En aquest segon cas podem determinar, a més, quines característiques tindrà la nova finestra, des de la mida fins a barres d'eines, menús, etcètera.
Des del desplegable Visible triem si mostrem o ocultem el recurs i, finalment, fem permanents els canvis prement el botó Desa els canvis.
Ara s'ha d'obrir el recurs bé en la mateixa finestra, bé en una finestra emergent, segons hàgiu triat:
Si torneu al curs trobareu el recurs perfectament identificat i tal com el veuran els estudiants:

Crear un recurs Pàgina web

Activeu l'edició del curs prement el botó Activa l'edició que trobareu a la part superior dreta o, també, des del bloc Administració.
Escolliu el punt on voleu inserir el recurs: a la part comuna del curs, o bé a la setmana o tema corresponent.
Aneu al menú Afegeix un recurs i desplegueu-lo.
Trieu l'opció Compon una pàgina web:
Aquesta acció fa que s'obri la pàgina d'edició del recurs.
Escriviu el Nom del recurs, que serà el que apareixerà en el curs i feu-ne un petit Resum que podreu formatar amb l’ajut de l’editor HTML de Moodle:
A continuació escriviu el contingut de la pàgina web a la casella Text complet amb l'ajut de l'editor HTML.
En acabat, si premeu el botó Mostra paràmetres la pàgina us mostrarà la sèrie d’opcions per mostrar el recurs als estudiants. Trieu la que trobeu més adient.
Des del desplegable Visible trieu si mostreu o oculteu el recurs i, finalment, feu permanents els canvis prement el botó Desa els canvis.
Immediatament Moodle mostra el recurs pàgina web tal com el veuran els estudiants:
Si torneu al curs veureu que ja hi apareix el nou recurs:

Moodle permet visualitzar expressions científiques escrites en llenguatge LaTeX.

Parleu amb el vostre administrador si a l'escriure a l'editor HTML

$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$

no veieu aquesta equació:

Inserir el reproductor multimèdia

Moodle facilita enormement la inclusió de fitxers multimèdia tant a les etiquetes com a l'interior dels recursos de tipus pàgina web. A més, si l'administrador del lloc web ha activat el filtre multimèdia, veureu que alguns fitxers de so o vídeo es presenten a través d'un senzill reproductor, on només cal tocar el botó de posada en marxa perquè se senti o es vegi:

A continuació veureu com aconseguir aquest reproductor per a mp3 i per a vídeo.

Abans de res, contacteu amb l'administrador del vostre lloc Moodle per assegurar-vos que el filtre multimèdia està activat.
Cal disposar del fitxer de so mp3 o de vídeo a la carpeta de fitxers del curs. Com en altres casos, i per qüestió d'ordre, s'ha creat una carpeta, anomenada multimedia, on s'han desat els diferents tipus de fitxers de so, vídeo i animacions Flash:
Creeu un recurs de tipus Etiqueta o bé un recurs Pàgina web. Doneu-li un Nom i escriviu-hi un text amb l'ajut de l'editor HTML. En l'exemple s'ha escrit la frase: Sentir Mozart.
En l'exemple que segueix, es tracta d'inserir un enllaç al fitxer de so de forma que el filtre multimèdia faci aparèixer després el reproductor multimèdia. Però el procediment és el mateix per al reproductor de vídeo.
Seleccioneu el text i premeu la icona .
Això fa que aparegui la finestra Insereix un enllaç; com que heu d'enllaçar un fitxer que és als fitxers del curs, premeu primer el botó Navega per localitzar-lo:
Quan el tingueu a la vista, feu clic sobre el seu nom:
Això fa que l'adreça URL del fitxer aparegui automàticament escrita en la casella URL de la finestreta Insereix un enllaç. Si és el fitxer desitjat, premeu el botó D'acord:
Observareu que es tanca la finestra d'inserció de l'enllaç. Continueu editant el recurs i, quan acabeu, toqueu el botó Desa els canvis per no perdre el vostre treball.
El recurs s'obre i us mostra l'enllaç i el reproductor preparat per funcionar:

Si en lloc d'enllaçar al fitxer de so mp3 haguéssiu enllaçat al fitxer de vídeo, el que obtindríeu seria el reproductor de vídeo:

Ara bé, si haguéssiu fet un enllaç a l'animació Flash no veuríeu cap reproductor, únicament trobaríeu l'enllaç al text i, en fer clic a sobre, la pàgina canviaria i us mostraria l'animació, però hauríeu sortit de Moodle i hauríeu de retrocedir a la pàgina anterior per continuar el curs. Per això es fa necessari incrustar l'animació dins el codi HTML per tal que es mostri dintre de la pàgina. En la secció següent veureu com incrustar animacions Flash i vídeos en el codi HTML.

Incrustar multimèdia: inserció d'un vídeo extern

Aquesta secció pot semblar per a usuaris avançats, però si seguiu les instruccions, fins i tot les usuàries i els usuaris novells podreu incrustar recursos multimèdia als vostres cursos. Començareu incrustant un vídeo penjat en una altra web, a youtube, per exemple, i, en acabat, veureu com incrustar una animació Flash a l'interior d'una pàgina web o a una etiqueta.

Si visiteu el lloc web youtube veureu que hi ha un munt de vídeos educatius que, potser, us pot interessar incloure en les vostres pàgines web de recursos.

Un cop tingueu localitzat el vídeo que voleu incloure observeu que a sota del reproductor hi ha un botó amb el text "Embed".

A la casella URL hi ha l'adreça URL del vídeo per si voleu enllaçar-lo des d'una altra pàgina web. I a la casella Embed hi trobareu el codi HTML necessari per incrustar-lo en una pàgina web, que és el que necessiteu. No cal conèixer el llenguatge HTML per poder incrustar el vídeo, només cal seguir aquestes instruccions, i l'ordinador s'encarregarà de la resta.

Per copiar el codi HTML necessari:

Deixeu el cursor a la casella Embed i premeu el botó dret del ratolí.
Es desplegarà un menú contextual en el que hi haurà un codi HTML ressaltat en blau, cosa que significa que està seleccionat.
Torneu a prémer el botó dret del ratolí, i del menú contextual trieu ara l'opció Copia per copiar-la a la memòria de l'ordinador, a l'anomentat porta-retalls.

Ara esteu en el punt en què teniu a la memòria de l'ordinador el codi necessari per incloure el vídeo al vostre recurs. Només cal inserir-lo:

Creeu o editeu un recurs de tipus pàgina web. Utilitzeu les eines de formatatge de l'editor HTML.
Quan arribi el moment d'inserir el vídeo, situeu el cursor en el punt on voleu inserir el vídeo i premeu la icona que mostra el codi HTML de la pàgina web que esteu fent.
Perquè l'ordinador us retorni l'adreça URL que té en memòria, premeu altre cop el botó dret del ratolí, però triant ara l'opció Enganxa del menú contextual que s'obrirà.
Veureu que ara apareix el codi enganxat en la finestra d'edició (ombrejat de groc en la imatge d'exemple):
Premeu la icona per tornar a l'edició normal del recurs. Probablement us quedi en blanc el lloc on hauria d'aparèixer el vídeo. No patiu, es farà visible quan acabeu d'editar i toqueu el botó Desa els canvis.
En efecte, quan visiteu el recurs ja veureu el vídeo preparat per ser reproduït:

Inserció d'una animació Flash

Partim del supòsit que teniu una animació Flash a la carpeta multimedia, animació.swf en l'exemple següent:

i voleu que es mostri enmig d'un recurs de tipus pàgina web:

Editeu el recurs amb l'ajuda de l'editor HTML.

Quan arribeu al punt on voleu inserir l'animació Flash, premeu la icona

que mostra el codi HTML de la pàgina web que esteu fent.
Escriviu-hi un codi basat en aquest:

El significat d'aquest codi és el següent:

embed	indica que s'incrustarà el codi.
width=“300”	és l'amplada de l'animació. El valor, 300 en l'exemple, indica els píxels que ocuparà.
height=“150”	és l'alçada de l'animació. El valor, 150 en l'exemple, indica els píxels que ocuparà. Aneu molt en compte amb la proporció de les dues mesures; si convé, esbrineu les mides reals de l'animació.
src=“http: ”	és l'adreça URL on cal anar a cercar el fitxer amb l'animació. Per saber exactament quina hi heu de posar en lloc de la que hi ha en l'exemple, aneu a la carpeta on hi ha el fitxer amb l'animació Cliqueu sobre el nom de l'animació Flash amb el botó dret del ratolí Trieu l'opció Copia del menú contextual En acabat, podeu enganxar la URL: Deixant el cursor després de //src="// Prement altre cop el botó dret, però triant ara l'opció Enganxa.
quality=“low”	indica la qualitat amb què es mostra l'animació; podeu triar entre els valors low, baixa, o hight, alta.
loop=“true”	fa que l'animació es repeteixi infinites vegades. Si voleu que només es mostri un sol cop, canvieu el valor a false.
pluginspage=“http:”	és l'adreça URL on cal a anar a cercar el plugin, i és la del fabricant del programari. Aquesta no s'ha de canviar.

Un cop enganxat el codi HTML adequat al vostre fitxer, premeu de nou la icona de l'editor per continuar editant el recurs en format HTML, més amigable.
Observareu que potser no es mostra l'animació. No patiu, es mostrarà quan acabeu l'edició i premeu el botó Desa els canvis.

Activitats:

Creeu un recurs de pàgina web i inseriu en aquesta pàgina com a mínim tres de le següents coses:

Un vídeo de youtube.
Un vídeo de http://www.edu3.cat/ o una altra pàgina similaar.
Un plànol de google maps.
Un fitxer de so amb la vostra veu enregistrada o amb un fitxer trobat a Internet.
Una animació flash. Podeu cercar alguna relacionada amb la vostra assignatura. Si voleu anar ràpid podeu posar la següent: http://cma.aldeae.net/Media/volcan/volcan.swf