L'editor de text HTML de Moodle

 

La majoria de camps per introduir text que presenta Moodle (recursos, missatges de fòrums, etc.) contenen l'editor visual de text HTML per permetre la possibilitat de donar format fàcilment al text introduït. Es tracta d'un editor gràfic de text HTML, és a dir, que funciona en el mode que s'anomena WYSIWYG (de l'anglès What You See Is What You Get). És el mode habitual de treball a qualsevol processador de textos actual (OpenOffice Writer, MS-Word, Corel WordPerfect, etc.).

L'editor HTML proporciona una manera còmoda de composar text HTML (és a dir, text en el llenguatge de les pàgines web), sense necessitat d'inserir les etiquetes de codi HTML necessàries per donar format al text (l'editor HTML ho farà per nosaltres). En aquest sentit l'editor visual de text HTML de Moodle ofereix unes funcions similars a les d'altres programes d'edició visual de pàgines web, com per exemple, l'editor de documents HTML d'OpenOffice, MS-FrontPage, Macromedia Dreamweaver o Mozilla Composer.

Una característica de l'editor de text HTML de Moodle que fa que sigui extremadament útil és que permet copiar i enganxar text amb formats i estructures, a partir de documents generats en qualsevol altre processador de texts que utilitzem habitualment, conservant-se el format i l'estructura original del text.

L'editor de text HTML requereix un navegador web d'última generació. Si s'està utilitzant una versió antiga o bé un navegador poc conegut i no estàndard és possible que l'editor de text HTML de Moodle no funcioni correctament. L'editor ha estat provat amb els navegadors MS-Internet Explorer, versions 6.0 i superiors, Mozilla, versions 1.4 i superiors i Firefox 0.9+, amb els quals funciona sense cap problema.

Quan l'editor de text HTML està activat per a un camp d'introducció de text, hi apareixerà una barra d'eines en la part superior. Aquesta barra d'eines disposa dels botons clàssics de qualsevol processador de textos: negreta, cursiva, subratllat, subíndex i superíndex, etc. També existeixen botons per alinear el text, sagnar els paràgrafs i crear llistes:

Els botons amb les funcions habituals per donar format al text funcionen d'igual manera a com ho fan a qualsevol processador de texts. Vegem, en canvi, el funcionament dels botons d'inserir elements especials:

  • Selecció de colors ( i ): Aquests botons activen una paleta de selecció de colors que apareix en una finestra separada:

Basta fer clic sobre el color desitjat (o introduir el seu codi HTML) i la finestra es tancarà automàticament i el color s'aplicarà a la selecció, o a tot el text subsegüent si no hi ha res seleccionat.

  • Inserir línia horitzontal (): Simplement insereix una línia horitzontal de separació.
  • Inserir hiperenllaç (): Permet inserir un enllaç sobre el text seleccionat (si no hi ha selecció no es crea cap enllaç). En fer clic sobre el botó hi apareix una finestra per introduir les dades de l'hiperenllaç:

En aquesta finestra podem introduir l'URL de la pàgina o recurs al qual apuntam, el text alternatiu que apareixerà en posar el cursor sobre l'enllaç i el marc de destinació. Segons la selecció que facem en aquest darrer camp el recurs al qual apunta l'enllaç s'obrirà en la pàgina o marc actuals o en una nova finestra de navegador.

No només es pot establir enllaços a altres pàgines web externes. També es pot enllaçar amb recursos interns que es trobin a l'espai propi del curs en el servidor. El botó , obre el gestor d'arxius de Moodle, amb la qual cosa es pot recórrer els directoris del lloc web del curs per seleccionar un fitxer (basta fer clic sobre el fitxer en qüestió i el seu URL s'incorporarà directament a la finestra d'inserir enllaç, sense haver de recordar-lo i teclejar-lo manualment). Els detalls de l'ús del gestor de fitxers de Moodle es descriuen al Manual de professor de Moodle, en el capítol 10, Gestió i administració del curs.

  • Anul·lar hiperenllaç (): Simplement elimina el vincle d'un hiperenllaç existent. S'ha de situar el cursor sobre l'hiperenllaç que volem eliminar i, llavors, hem de fer clic en aquest botó per anul·lar el vincle.
  • Inserir una imatge (): Permet inserir una imatge en el text. Hem de tenir en compte que en els documents Web les imatges no són realment incrustades en el text, sinó que s'insereix un vincle al fitxer d'imatge, que ha de residir en un espai accessible via Web (no pot residir al nostre ordinador personal, ja que els altres usuaris no veurien, llavors, la imatge).

Aquest botó obre una finestra que ens permet seleccionar el fitxer d'imatge que volem inserir al text (i pujar-lo al servidor, si no es troba ja allà), així com especificar els atributs de visualització de la imatge (grandària, alineació, etc.):

La part inferior d'aquesta finestra correspon al gestor de fitxers de Moodle. Podem seleccionar qualsevol arxiu d'imatge (en formats adequats per a la Web: gif, jpg, png) que es trobi a l’espai de fitxers del curs, o bé, cercar un arxiu al nostre ordinador i pujar-lo al servidor dins l'espai del curs (si no està en el servidor no es veurà la imatge en la Web). En seleccionar un arxiu s'introduirà automàticament el seu URL al camp corresponent. També tenim, a la part superior de la finestra, els camps per introduir els atributs HTML de la imatge que volem inserir (grandària, alineació, etc.). És obligatori introduir un text alternatiu per a la imatge (aquest és el text que apareixerà al navegador quan deixam reposar el cursor sobre la imatge, que és el que apareixerà als navegadors Web només de text, sense imatges).

Un cop seleccionat el fitxer de la imatge i especificats els seus atributs, podem fer clic sobre el botó 'OK' per executar la inserció de la imatge en el text. Si, en qualsevol moment, volem fer alguna modificació de la imatge hem de seleccionar la imatge i tornar a fer clic sobre el botó , amb la qual cosa tornarà a aparèixer la finestra 'Insereix una imatge' i podrem canviar els seus atributs.

  • Insereix una taula (): Aquest botó permet inserir una taula HTML en el text. Hi apareixerà una petita finestra on podem especificar les característiques de la taula: número de files i columnes i l'amplada total d'aquesta, així com els atributs HTML habituals d'una taula, alineació, gruix del contorn, espai entre cel·les, etc:

  • Codi HTML (): Aquest botó permet visualitzar el codi HTML del text i editar-lo manualment (la barra d'eines quedarà, llavors, desactivada). En qualsevol moment es podrà tornar a l'editor visual de text HTML tornant a fer clic en aquest botó.

Amb l’editor de text HTML de Moodle podeu donar format, per exemple, als missatges que publiqueu en els fòrums. D’aquesta manera, no sols podreu publicar missatges amb text pla, sinó que podreu enriquir l’aspecte d’aquests missatges canviant les característiques de format del text (tipus de lletra, mida, estil, color, alineació, etc.) o afegint altres elements com imatges, enllaços, taules, etc.

Activitat d’entrega obligada 4

Entra al teu curs de pràctiques d’aquest mòdul, Pràctiques amb el Moodle del curs Tutoria Telemàtica i crea un missatge al fòrum Principal d'aquest curs fent servir l'editor de text HTML perquè contengui els elements i característiques de format que s'indiquen a continuació:

  • Color del text del missatge: blau.
  • Ressalta algunes de les parts del text amb negretes i d’altres amb subratllat.
  • Insereix una taula de 3 files per 4 columnes al missatge.
  • Insereix una imatge al cos del missatge (pots fer servir la imatge que vares penjar dins la carpeta creada amb el gestor d’arxius a l’activitat d’introducció 6)
  • Insereix un enllaç cap a la pàgina web inicial del WEIB ( http://weib.caib.es ), que s’obri a una finestra nova.
  • Insereix un enllaç cap a l’arxiu de format .pdf que vares penjar dins la carpeta creada amb el gestor d’arxius a l’activitat d’introducció 6.

Posa-li com a títol al missatge: "Donant format HTML a un missatge" i publica’l al Fòrum Principal de la caixa superior de Recursos i eines generals del curs.