FP SMX m08 Material Paper

Informàtica i comunicacions
Aplicacions web
CFGM.SMX.M08/0.15
CFGM - Sistemes microinformàtics i xarxes
Generalitat de Catalunya
Departament d’Ensenyament
Aquesta col·lecció ha estat dissenyada i coordinada des de l’Institut Obert de Catalunya.
Coordinació de continguts
Anna Castelló Gistau

M. del Mar Sánchez-Colomer Ruiz
Alicia Vila Grifo
Redacció de continguts
Raúl Broceño Corrales

Jordi Cárdenas Guia
Montserrat Madridejos Mora
Nuria Montolio Catalán
Mònica Ramírez Arceda
Oriol Torres Carrió
Primera edició: febrer 2016

© Departament d’Ensenyament
Dipòsit legal: DL B 28678-2015
Llicenciat Creative Commons BY-NC-SA. (Reconeixement-No comercial-Compartir amb la mateixa llicència 3.0 Espanya).
Podeu veure el text legal complet a
http://creativecommons.org/licenses/by-nc-sa/3.0/es/legalcode.ca
CFGM - Sistemes microinformàtics i xarxes 5 Aplicacions web
Introducció
En l’enginyeria de programari s’anomena aplicació web les aplicacions que els

usuaris poden emprar accedint a un servidor web a través d’Internet o d’una
intranet amb un navegador. En altres paraules, és una aplicació de programari que
es codifica en un llenguatge suportat pels navegadors web i es confia l’execució al
navegador.
Les aplicacions web s’han popularitzat per la senzillesa del navegador web com
a client lleuger, la facilitat per actualitzar i mantenir aplicacions sense distribuir i
instal lar programari a milers d’usuaris potencials, poder accedir a la informació
personal des de qualsevol dispositiu connectat a Internet i treballar sobre una
mateixa aplicació diversos usuaris. Aplicacions com correu web, wikis, blogs,
botigues en línia i aquest mateix campus són exemples ben coneguts d’aplicacions
web.
En aquest mòdul estudiarem com funcionen i com s’instal·len algunes d’aquestes
aplicacions i aprendrem les tecnologies bàsiques amb què estan fetes.
En la unitat formativa “Ofimàtica i eines web” veureu com funcionen les aplicaci-
ons en línia més usuals, com el correu web, els calendaris i les eines ofimàtiques.
En la unitat formativa “Fonaments d’HTML i fulls d’estil”, composta per les
unitats “Fonaments d’HTML” i “Fulls d’estil”, us iniciareu en el desenvolupament
d’aplicacions web utilitzant el llenguatge de marques (X)HTML i el llenguatge de
fulls d’estils CSS i també aprendreu les característiques principals que ens oferei-
xen els editors i gestors d’(X)HTML i CSS per tal de desenvolupar aplicacions
web d’una manera més ràpida i productiva.
Al llarg de la unitat formativa “Gestors d’arxiu web” coneixereu les diverses
aplicacions de gestors d’arxius web que hi ha en el mercat, i la manera més
usual d’instal·lar-les i configurar-les en un servidor. Veureu que no deixen de ser
aplicacions web i que s’instal·len de manera molt similar a la resta d’aplicacions
que veureu en aquest mòdul.
En l’actualitat, els gestors de continguts us permeten crear i gestionar webs dinàmi-
ques interactives de manera fàcil i ràpida, sense haver de tenir uns coneixements
de programació gaire exigents. En la unitat formativa “Gestors de continguts”
veureu com crear continguts web d’una manera semiautomàtica amb un gestor de
continguts.
Un altre gran avenç en el món d’Internet són els portals d’aprenentatge a distància
com aquest al qual ara esteu connectats: campus IOC. Veureu què són, com
funcionen, com s’instal·len i com es mantenen en la unitat formativa “Portals web
d’aprenentatge”.
Per treballar els continguts d’aquest mòdul, és imprescindible anar fent les
activitats i els exercicis d’autoavaluació i llegir els annexos. A més, per tal de
facilitar el seguiment dels continguts, és recomanable que reproduïu en el vostre
ordinador tots els exemples incorporats en el text.
Resultats d’aprenentatge
En finalitzar aquest mòdul l’alumne/a:

Ofimàtica i eines Web
1. Instal·la, si s’escau aplicacions web, descrivint les seves característiques i

entorns d’ús.
2. Instal·la aplicacions d’ofimàtica web, descrivint les seves característiques i

entorn d’ús.
Gestors d’arxius web
1. Instal·la, amb ajuda de la documentació tècnica, serveis de gestió de arxius

web, descrivint les seves característiques, entorns d’ús, i verificant la seva
integritat.
Gestors de continguts
1. Instal·la gestors de continguts, identificant les seves aplicacions i configu-

rant los segons requeriment amb l’ajuda de la documentació tècnica.
Portals web d’aprenentatge
1. Instal·la amb ajuda de la documentació tècnica, sistemes de gestió de

aprenentatge a distància, descrivint l’estructura del lloc i la jerarquia de
directoris generada.
Fonaments d’HTML i fulls d’estils
1. Construeix un document HTML emprant una sintaxi i estructura correcte

i fent que el codi sigui llegible i entenedor amb l’ajut de comentaris i
tabulacions dels blocs de codi corresponents.
2. Utilitza les etiquetes amb els seus atributs seguint la sintaxi correcta definida
per l’estàndard.
3. Implementa un lloc web a partir de diversos documents HTML.
4. Coneix i domina eines software per a desenvolupar documents html.
5. Construeix un document CSS emprant una sintaxi i estructura correcte i fent

que el codi sigui llegible i entenedor amb l’ajut de comentaris i tabulacions
dels blocs de codi corresponents.
6. Utilitza i coneix els estils amb els seus atributs seguint la sintaxi correcta
definida per l’estàndard.
7. Implementa un lloc web a partir de diversos documents HTML amb estils.
8. Coneix i domina eines software per a desenvolupar documents amb estils.

Continguts
Ofimàtica i eines web
Unitat 1
1. Aplicacions web. Correu web, calendaris en línia i altres
2. Ofimàtica web
Fonaments d’HTML i fulls d’estils
Unitat 2
Fonaments d’(X)HTML
1. El llenguatge de marques (X)HTML
2. Etiquetes i atributs
3. Editors i gestors d’(X)HTML
Unitat 3
Fulls d’estil
1. El llenguatge de fulls d’estil CSS
2. Regles CSS
Unitat 4
1. Instal·lació de gestors d’arxius web
2. Configuració i ús del servei de gestió d’arxius web
3. Integritat del servei i documentació tècnica
Unitat 5
1. Els sistemes de gestió de continguts
2. Configuració i creació de continguts
3. Administració i manteniment d’un gestor de continguts

Unitat 6
1. Instal·lació de portals web d’aprenentatge
2. Configuració de portals web d’aprenentatge
3. Gestió de portals web d’aprenentatge

Montserrat Madridejos Mora, Oriol Torres Carrió
Aplicacions Web
Aplicacions Web Ofimàtica i eines web
Índex
Presentació 5
Resultats d’aprenentatge 7
1 Aplicacions web 9
1.1 La web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.1.1 Tecnologia de les aplicacions web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.1.2 Impacte social de les aplicacions web . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.1.3 Treball col·laboratiu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
1.1.4 Wiki: exemple d’aplicació web col·laborativa . . . . . . . . . . . . . . . . . . . . . . 20
1.2 Correu web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
1.2.1 Característiques del correu web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
1.2.2 Els clients de correu electrònic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
1.3 Calendaris en línia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
1.3.1 Característiques del Google Calendar . . . . . . . . . . . . . . . . . . . . . . . . . . 48
1.3.2 Altres calendaris en línia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
2 Ofimàtica web 61
2.1 Introducció a les aplicacions d’ofimàtica web . . . . . . . . . . . . . . . . . . . . . . . . . . 61
2.1.1 Característiques dels paquets ofimàtics web . . . . . . . . . . . . . . . . . . . . . . . 62
2.2 Aplicació ofimàtica web: Google Drive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
2.2.1 Accés a Google Drive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
2.3 Ús de Documents de Google Drive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
2.3.1 Creació i gestió de documents de text . . . . . . . . . . . . . . . . . . . . . . . . . . 69
2.3.2 Creació i gestió de fulls de càlcul . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
2.3.3 Creació i gestió de presentacions multimèdia . . . . . . . . . . . . . . . . . . . . . . 72
2.3.4 Creació i gestió de formularis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
2.3.5 Connectar noves aplicacions al Google Drive . . . . . . . . . . . . . . . . . . . . . . 78
2.3.6 Treball col·laboratiu amb Google Drive . . . . . . . . . . . . . . . . . . . . . . . . . 80
Aplicacions Web 5 Ofimàtica i eines web
Presentació
Es coneix per aplicacions web aquelles aplicacions que es poden utilitzar accedint
a un servidor web mitjançant un navegador. El servidor web normalment està
allotjat a Internet, però també podem trobar aplicacions web instal·lades a la
intranet d’una organització.
Abans de l’expansió en l’ús d’Internet, els usuaris utilitzaven sempre programari

que necessitava una instal·lació prèvia a cada ordinador. Aquest tipus d’instal·lació
s’anomena instal·lació local o d’escriptori i cada nova versió del programa
requereix una actualització màquina per màquina.
En un món globalitzat i on l’ús d’Internet és massiu, la necessitat de poder

disposar de dades i aplicacions en qualsevol punt del planeta ha afavorit l’aparició
de moltíssimes aplicacions que es poden utilitzar via web com el correu web,
els calendaris en línia o els paquets ofimàtics. Aquesta necessitat i la millora
de les tecnologies de programació ha permès canviar la manera d’actuar sobre
Internet fins a conformar el fenomen conegut com a Web 2.0. Aquest concepte
va ser encunyat per Tim O’Reilly pels volts de 2004 i representa una nova manera
d’accedir a Internet, de manera més participativa i comunicativa, generant nous
tipus de webs com els blocs, les wikis o les xarxes socials.
El mòdul Aplicacions web us donarà una visió de les aplicacions informàtiques

que s’executen en entorn web d’ús més habitual. Trobareu alternatives web a
aplicacions que, usualment, esteu acostumades a treballar de manera local, com els
paquets ofimàtics, el correu o els gestors de fitxers. També aprendreu a instal·lar i
configurar gestors de contingut web que faciliten la participació i la comunicació
entre els usuaris de la xarxa.
Aquesta unitat formativa se centrarà a conèixer i estudiar el món de la Web 2.0, ple
de noves sigles i termes i en l’ús i configuració d’aplicacions web com el correu
electrònic, els calendaris en línia i els paquets ofimàtics.
L’apartat “Aplicacions web. Correu web, calendaris en línia i altres” serveix

d’introducció al concepte Web 2.0 i, en particular, es treballen eines informàtiques
web com el correu electrònic i els calendaris en línia. Com acostuma a passar
amb totes les aplicacions web, els usuaris hem d’estar habituats a treballar amb
versions beta dels productes. És a dir, amb versions no definitives, però plenament
funcionals, que poden canviar sense previ avís. Tot i que es fa un repàs general
de les aplicacions web de correu electrònic, ens centrarem a treure el màxim
profit d’un servei en particular, el correu web de l’empresa Google, anomenat
Gmail. De la mateixa manera, utilitzarem també el calendari en línia que proveeix
Google, que es diu Google Calendar. Farem una ullada, per últim, a altres tipus
d’aplicacions web com poden ser els àlbums de fotos web, tipus Picasa o Flickr, o
els Mapes de Google.
A l’apartat “Ofimàtica web” es fa una introducció a aquelles aplicacions web ori-

entades a resoldre les tasques més comunes de l’oficina, com elaborar documents,
realitzar càlculs o presentacions multimèdia. El major avantatge d’aquests tipus de
paquets ofimàtics és la seva capacitat de permetre treballar col·laborativament i en
línia. Els exemples i exercicis els farem amb el paquet ofimàtic web més utilitzat
de l’actualitat, Documents de Google, que és el nom en català de Google Docs.
Per treballar els continguts d’aquesta unitat formativa cal fer les activitats i els
exercicis d’autoavaluació. És convenient que repasseu assíduament les introduc-
cions de cada apartat per anar assimilant una gran quantitat nova de vocabulari i
aplicacions relacionades amb la Web 2.0.
En acabar la unitat, l’alumne podrà:
1. Descriure l’origen i evolució dels serveis web de darrera generació.
2. Instal·lar, si s’escau, diferents aplicacions web descrivint les seves caracte-

rístiques i entorns d’ús.
3. Configurar i utilitzar el correu electrònic web. Gestionar comptes d’usuari.
4. Configurar aplicacions de calendari web.
5. Reconèixer les prestacions específiques de les aplicacions instal·lades (cites,

tasques, entre d’altres).
6. Configurar les aplicacions web per integrar-les amb el servei de correu.
7. Cercar i interpretar l’origen i evolució de les aplicacions d’ofimàtica web.
8. Establir la utilitat de les aplicacions d’ofimàtica web.
9. Descriure diferents eines d’ofimàtica web (processador de textos, full de

càlcul, entre d’altres).
10. Configurar aplicacions d’ofimàtica web. Gestionar comptes d’usuari.
11. Aplicar criteris de seguretat en l’accés dels usuaris.
12. Reconèixer les prestacions específiques de cadascuna de les aplicacions

instal·lades.
13. Utilitzar les aplicacions de forma col·laborativa.
14. Cercar i interpretar documentació tècnica en les llengües oficials i en les de

més ús al sector.
15. Documentar adequadament la configuració i gestió de les aplicacions ofi-

màtiques web i altres aplicacions web, les incidències aparegudes i les
solucions aportades.
1. Aplicacions web
Un estudi publicat a finals de l’any 2014 per l’empresa tecnològica Ericsson

preveu que, a l’any 2020, el 90% dels majors de 6 anys tindran un telèfon
intel·ligent (smartphone) estimant, a més, que hi haurà un mínim de 6.100 milions
de connexions a Internet a través d’aquestes dispositius. Val a dir que fer una
afirmació d’aquesta mena és molt arriscat ja que l’evolució dels dispositius mòbils
trenca en mil bocins tota previsió que puguem realitzar. I és que aquesta evolució
està molt lligada a tot el que ofereixen els dispositius mòbils i les seves aplicacions. Els smartphones són
telèfons de nova generació
amb aplicacions pròpies
Cada cop resulta més quotidià que, en tot moment del dia, tinguem a l’abast el d’un ordinador de butxaca.
nostre smartphone o tablet. El motiu d’aquesta necessitat d’estar acompanyat a

tothora d’aquests dispositius rau en allò que ens proporcionen. Buscar quelcom a
Internet no és pas complicat, però filtrar els resultats de la nostra cerca per quedar-
nos amb allò que buscàvem o allò que ens satisfà sí que ho és. Aquí és on les
aplicacions web, enteses com aquelles eines que els usuaris poden fer servir
mitjançant un navegador web, juguen un rol molt important.
Els progressos tecnològics han influït en gran mesura en l’estil de vida, de treball
i d’oci comportant que l’ús de dispositius informàtics intel·ligents vagi camí
d’esdevenir una constant ja que ens permeten connectar-nos a Internet en qualsevol
moment i lloc i accedir a un ampli ventall d’aplicacions web que ens faciliten
accions que podem realitzar en la nostra vida diària, des de consultar el trànsit en
directe, passant per reservar taula en un restaurant fins a buscar un pis turístic on
passar-hi un cap de setmana de vacances.
Sens dubte, un dels avantatges d’aquesta tecnologització del nostre dia a dia
ha estat la immediatesa de la informació. Els portals de noticies recullen
esdeveniments que succeeixen al llarg del dia, modificant els continguts a mesura
que aquests esdeveniments es desenvolupen i donant l’oportunitat als usuaris
que hi accedeixen d’interactuar-hi, ja sigui valorant positivament o negativament
l’interès de la notícia o plasmant-hi un comentari al respecte des del seu ordinador
Les apps (aplicacions
o dispositiu mòbil. mòbils) són programes que
s’instal·len en un dispositiu
mòbil i que es poden
Arribats a aquest punt, és important destacar que, si bé temps enrere les con- integrar a les
característiques tècniques
nexions des de dispositius mòbils a pàgines o aplicacions web no eren gaire del dispositiu. Proporcionen
rellevants, l’eclosió dels smartphones i tablets ha comportat que les connexions accés instantani a un
contingut específic sense
des d’aquests dispositius creixessin notablement respecte de les realitzades a través haver de buscar-lo a
Internet. A més, es poden
de l’ordinador. Val a dir, a més, que la utilització d’aquests dispositius mòbils actualitzar per afegir noves
característiques amb el pas
també es caracteritza perquè l’accés a pàgines i aplicacions web no es realitza del temps.
tant mitjançant el navegador sinó mitjançant aplicacions natives en els sistemes

L’URL (Uniform Resource
operatius mòbils (popularment conegudes com a apps), el disseny de les quals Locator, localitzador
uniforme de recursos) és
incorpora funcionalitats equivalents a les seves correlatives aplicacions web. una adreça formada per
caràcters alfanumèrics
que indica la localització
D’altra banda, resulta pràctic poder accedir a les aplicacions web mitjançant el d’un fitxer o d’un directori
a Internet i que permet
navegador web, i això ha comportat que les aplicacions web hagin adquirit força accedir-hi.
popularitat. En tenim prou amb escriure l’adreça URL de la pàgina web a la barra
de navegació sense necessitat de descarregar cap paquet de programari. Les xarxes
socials i les aplicacions de missatgeria instantània i de correu electrònic s’han
consolidat com les aplicacions web més sol·licitades pels usuaris d’smartphones
i tablets. A tot això, les aplicacions dedicades a la salut, així com aquelles de
temàtica esportiva o les educatives, presenten una gran penetració en determinats
col·lectius.
Els principals avantatges de les aplicacions web són els següents:
• Presenten un estalvi en les despeses de maquinari i programari, ja que per

accedir-hi únicament necessitem un ordinador, un smartphone o una tauleta
amb accés a Internet.
• Són fàcils d’utilitzar, ja que solament es necessita saber navegar per Internet
i disposar d’un correu electrònic per utilitzar-lo com a usuari i rebre les
notificacions.
• Faciliten el treball col·laboratiu, a distància i asíncron entre diversos usuaris.
• Són escalables i de ràpida actualització ja que el procés d’actualització és

molt ràpid i net en existir únicament una versió de l’aplicació en el servidor;
aquest no afecta en res, per tant, ni a l’usuari ni al seu ordinador.
• Es produeixen menys errors ja que les aplicacions web tenen menys pos-
sibilitats de penjar-se i crear problemes tècnics en no haver-hi cap mena
d’implicació en relació amb el maquinari o al sistema operatiu que utilitzi
el client.
• La informació està disponible des de qualsevol dispositiu i lloc que es pugui

connectar a Internet.
Les aplicacions web són, en definitiva, un dels pilars del que s’anomena web
2.0, això és, aquells llocs web que faciliten la compartició d’informació, la
interoperabilitat, el disseny centrat en l’usuari i la col·laboració. En resum,
l’evolució de les aplicacions estàtiques a dinàmiques on la col·laboració de l’usuari
és essencial.
1.1 La web 2.0
En els inicis d’Internet, la publicació de continguts en webs era un procés lent,

laboriós i poc àgil. En conseqüència, les primeres pàgines web oferien la mínima
interacció amb i entre els usuaris ja que els continguts eren estàtics, com si d’un
tauler d’anuncis es tractés.
Mentre que l’anomenat Web 1.0 era un conjunt de pàgines escrites en llenguatge
HTML que oferien informació estàtica als seus visitants, el salt al web 2.0 buscava
potenciar el dinamisme i la interoperabilitat, centrant el disseny en l’usuari i
potenciant la col·laboració. Un lloc web 2.0 permet als usuaris interactuar i

col·laborar entre ells com a creadors de continguts en una comunitat virtual.
El concepte web 2.0 està basat en la concepció de la xarxa d’Internet com una
plataforma que fomenta i potencia la comunicació entre persones i comunitats
(many to many, ‘de molts a molts’, enfront del one to one, ‘d’un a un’, del Web
1.0). La web 2.0 és un beta continu, i això queda demostrat pel seu principal
representant, les aplicacions web, ja que els continguts i les necessitats dels usuaris
obliguen a adaptar-les constantment.
Per exemple, el que inicialment havia de ser un portal per compartir fotos, va
passar a ser en un segon moment un portal de fotos amb un ventall de filtres per
aplicar a les imatges, per derivar posteriorment en un portal de fotos que es podien
comentar i classificar mitjançant hashtags i que permetia també penjar vídeos de
curta durada; finalment va ser adquirit per una altra xarxa social com és Facebook.
Aquesta xarxa social de fotos que va anar evolucionant a partir de la interacció i
les necessitats que manifestaven els seus usuaris és Instagram.
Val a dir que el cas d’Instagram és molt adequat per exposar les diferències que
hi ha entre les aplicacions web i les aplicacions natives per dispositius mòbils
(apps) ja que, inicialment, Instagram es va plantejar i va sortir com una app i,
posteriorment se’n va llençar l’aplicació web. De fet, qualsevol que s’hi vulgui
registrar per pujar les seves fotos i veure les de la resta de usuaris, s’ha de
descarregar i instal·lar prèviament la seva app. Una aplicació per a
dispositius mòbils es manté
en el telèfon i en la tauleta
Arribats a aquest punt cal remarcar la diferència entre els llocs web per dispositius de l’usuari i és, per tant,
idònia per la seva utilització
mòbils (aplicacions web) i les aplicacions per dispositius mòbils (apps). En cap freqüent i repetida. En
conseqüència, respon a una
dels dos casos no influeix quin sigui el sistema operatiu amb el qual funcionen necessitat específica.
els dispositius mòbils (Android de Google o iOS d’Apple, majoritàriament, en el

cas de les apps) sinó l’accés als continguts en si, ja que a les aplicacions web
s’hi accedeix únicament a través d’un navegador web escrivint l’adreça URL de
la pàgina web en la barra de navegació (no es requereix cap descàrrega per part
de l’usuari), mentre que l’accés a les aplicacions per dispositius mòbils es realitza
mitjançant apps específiques (figura 1.1).
F igu r a 1. 1 . Accés a Twitter mitjançant un navegador web (esquerra) i a través de la seva app nativa
Android
Tot i que se l’acostuma a reconèixer com a tal, Android no és un producte creat per Google.
Originàriament el desenvolupava una empresa de Palo Alto (Califòrnia) creada l’any 2003,
que realitzava programari per telèfons mòbils i que fou adquirida per Google l’any 2005.
L’any 2007, Google va anunciar el llançament oficial del sistema operatiu Android i va
aprofitar per arribar a acords amb fabricants de telèfons mòbils per crear el primer dispositiu
Android de la història, que va sortir al mercat a finals de 2008. Era el G1 de T-Mobile, un
model del fabricant HTC que funcionava amb la versió 1.6 (Donut).
Si bé tant per accedir als llocs web per dispositius mòbils (aplicacions web) com
a les aplicacions per dispositius mòbils (apps) es requereix d’accés a Internet per
poder-hi accedir, en el cas de les aplicacions natives per a dispositius mòbils s’ha
de disposar d’accés a Internet per descarregar-les de les botigues d’aplicacions
i instal·lar-les en el dispositiu mòbil. De fet, les aplicacions natives han d’estar
instal·lades al dispositiu, i per les actualitzacions que se’n publiquin sovint l’usuari
ha d’autoritzar la descàrrega des de la botiga corresponent (Apple Store, Google
Play, Windows Store...). En canvi, qualsevol actualització en una aplicació web
s’acostuma a dur a terme sense que els usuaris en siguin conscients. Això és a
causa que, en les aplicacions web, les actualitzacions es realitzen directament en
el servidor, de manera que l’usuari no ha de descarregar-se cap actualització més
enllà de les pròpies del navegador web que acostumi a utilitzar.
Val a dir que, malgrat que tots els dispositius mòbils acostumen a incloure un
navegador web de sèrie (o de fàbrica) preparat per navegar per Internet, comptem
amb una àmplia gamma de navegadors web que podem descarregar i instal·lar,
amb millors complements, dissenyats per potenciar la rapidesa de cerca, millorar
l’experiència d’ús de l’usuari mòbil i adaptar de la millor manera possible l’ús a
les pantalles tàctils.
1.1.1 Tecnologia de les aplicacions web
L’arquitectura bàsica d’una aplicació web està formada pels següents elements:
• Un navegador: actua com a client i realitza peticions sol·licitant recursos als

servidors web. Quan fa una petició a un servidor i li respon enviant-li un
recurs, el mostra a l’usuari.
• Un servidor web: rep peticions de clients (navegadors) i respon a aquestes

peticions enviant un recurs o notificant un error si el recurs no existeix.
• El protocol http: és el protocol basat en TCP/IP que s’utilitza perquè el

navegador realitzi les peticions als servidor web i aquests li responguin.
• L’HTML és el format bàsic dels documents de la web. Es tracta d’un format

de text basat en etiquetes que permet estructurar el contingut de la pàgina.
Considerant que els dispositius mòbils disposen de navegadors, és lògic afirmar

que l’accés a Internet no sols es pot fer mitjançant l’ordinador sinó també
mitjançant els dispositius mòbils. De fet, la possibilitat d’accedir a Internet
mitjançant aquests dispositius mòbils juntament amb l’eclosió de l’ús d’aquests
dispositius va motivar que les aplicacions web s’haguessin d’adaptar a aquest tipus
Les webs responsive són
de dispositius per millorar-ne l’usabilitat mitjançant un canvi en el seu disseny. un exemple de disseny
líquid, és a dir, el
Les aplicacions web es van començar a dissenyar en base al disseny responsive contingut pren la forma
del contenidor, mostrant la
(responsive design). informació segons sigui
necessari. Per tant, blocs
de text, imatges i
El disseny web responsive és una tècnica de disseny web orientada a la correcta columnes senceres
s’ajustaran a l’espai
visualització d’una mateixa pàgina des de diferents dispositius, ja siguin d’ordina- disponible —o no
apareixeran— en funció
dors d’escriptori, telèfons, tauletes... A grans trets, aquesta tècnica redimensiona de si s’hi accedeix des
d’un telèfon, una tauleta o
i col·loca els elements de la pàgina de manera que s’adaptin a l’amplada de cada un ordinador.
dispositiu permetent una correcta visualització i una millor experiència d’usuari.
Disseny responsive o disseny adaptatiu
El disseny web responsive reestructura els elements de la web en la pantalla del dispositiu
per optimitzar tot l’espai disponible i oferir la millor experiència d’usuari. Per aconseguir-ho
s’estableixen unes mesures d’amplada i marges de disseny en grandàries proporcionals,
en lloc d’establir valors fixes en els píxels.
Un disseny web adaptatiu no és tan flexible com el responsive ja que utilitza grandàries
preestablertes per l’ordinador i pels dispositius mòbils.
Cal destacar, per últim, que l’augment de l’accés a Internet mitjançant els
dispositius mòbils ve donat, en gran part, perquè són moltes les persones que
utilitzen aquests dispositius per connectar-se a les xarxes socials, unes aplicacions
web que els permeten estar en contacte amb els seus amics, fer-ne de nous,
compartir continguts i crear comunitats sobre interessos similars (treball, lectures,
jocs, amistat, relacions amoroses...).
1.1.2 Impacte social de les aplicacions web
L’àmbit de les aplicacions web es troba en constant creixement i renovació, per la

qual cosa la seva classificació és susceptible de variar o incloure nous elements en
molt poc temps.
De fet, l’ampli volum d’aplicacions web que han sorgit en els últims anys ha
motivat el disseny i publicació d’una infografia anomenada “El prisma de les
converses” (The Conversation Prism) (vegeu la figura 1.2).
Fi gur a 1 .2 . Prisma de les converses
Aquesta infografia reuneix totes les xarxes socials classificades segons la seva
orientació i la seva utilitat. Creat originalment el 2008, el Conversation Prism
divideix les eines online en categories per presentar d’una forma senzilla i intuïtiva
el mapa d’un món cada cop més complex. Segons el seu autor, l’antropòleg i
analista digital Brian Solis, aquest prisma vol ser una ajuda a professionals de tots
els sectors per prendre consciència de la vastitud de la xarxa i planificar estratègies
de social media més eficaces.
Tot i la varietat de formes i continguts, podem dir que allò que tenen en comú les
xarxes socials és que es tracta d’aplicacions en línia que permeten als usuaris, de
forma descentralitzada, crear un perfil públic, compartir i intercanviar informació
(missatges, fotos, arxius i tot tipus de continguts), col·laborar en la generació

de continguts i participar de forma espontània en moviments socials i corrents
d’opinió. Una xarxa social és una
comunitat d’usuaris que
estableixen relacions
Si bé cada xarxa social té les seves pròpies característiques i finalitat, les podem personals o professionals i
que comparteixen
classificar en dos grups, les xarxes socials “generalistes” i les que tenen continguts coneixements i experiències.
o característiques específiques.
Les xarxes de tipus generalista van dirigides a la població en general, que busca
relacionar-se, intercanviar informació i estar en contacte amb d’altres usuaris
registrats. Dins d’aquesta tipologia de xarxa social podríem citar xarxes socials
com, per exemple, Facebook, Twitter, Instagram o LinkedIn.
Per un altre costat trobaríem les xarxes específiques, que són aquelles que estan
definides en funció d’uns determinats objectius (per exemple, professionals o
acadèmics) condicionant, en conseqüència, les relacions entre els usuaris. Per
exemple, podríem trobar des de xarxes per a usuaris als qui agradi viatjar fins a
xarxes socials de pares i mares que vulguin parlar sobre els seus fills.
Segons el VI Estudi de Xarxes Socials publicat per l’IAB, ja és un 71% de la

població que utilitza Internet de forma activa, i d’aquest percentatge, el 82% són
usuaris de xarxes socials. En el terreny corporatiu, l’estudi conclou que 9 de
cada 10 usuaris de xarxes socials segueix alguna marca, i el 38% consulta les
seves actualitzacions amb molta freqüència. En conseqüència, això comporta
que moltes empreses planifiquin estratègies socials adreçades específicament a les
xarxes socials més rellevants com són Facebook, Twitter, LinkedIn o Instagram. El community manager no
és més que una part dins de
la comunicació d’una
El fet que existeixin diverses xarxes socials adreçades als diferents segments de la empresa o institució que
actua d’acord amb la
societat i que, en un futur proper, en puguin aparèixer de noves, ha obligat a les identitat corporativa de la
companyia i, per tant, amb
empreses no només a tenir-hi presència, sinó també a estar-hi molt actives. Això els objectius establerts en la
seva política de
ha derivat en el sorgiment i la creació de noves figures professionals com, per comunicació.
exemple, el community manager o gestor de comunitats online.
La funció principal d’un community manager és la de gestionar la comunicació

de l’empresa amb l’exterior a través de les xarxes socials, fomentant converses i
debats a la xarxa i reaccionant davant dels comentaris dels usuaris sobre l’empresa.
Lògicament, el sorgiment d’aquesta figura ha comportat l’aparició de diferents
eines específiques destinades a l’exercici d’aquest rol professional, així com al
d’altres figures professionals com són, per exemple, els especialistes de SEM
(search engine marketing, màrqueting en motors de cerca) i de SEO (search engine
optimization, optimització en motors de cerca), que a grans trets s’encarreguen
d’optimitzar la nostra web perquè els usuaris la trobin abans.
El posicionament web (SEO, Search Engine Optimization) és el conjunt d’accions

que ens ajuden a millorar la visibilitat d’un lloc web en els resultats de cerca en
els diferents cercadors. El motiu pel que és necessari el SEO és perquè optimitza
les pàgines web tant pels usuaris com pels motors de cerca ajudant aquests últims
a entendre sobre què tracta cadascuna de les pàgines i si és o no d’utilitat pels
usuaris.
Motors de cerca
El funcionament d’un motor de cerca es pot resumir en dos passos, rastreig i indexació.
Des del punt de vista del rastreig, un motor de cerca recorre les webs recollint dades sobre
aquestes pàgines web, sobre els enllaços a altres pàgines de continguts i sobre aquestes
pàgines enllaçades. Des del punt de vista de la indexació, un cop que una pàgina web ha
estat rastrejada i se n’ha recopilat la informació necessària, aquestes pàgines s’inclouen
en un índex on s’endrecen segons el seu contingut, la seva autoritat i la seva rellevància.
En conseqüència, quan fem una consulta al motor de cerca li resultarà molt més senzill
mostrar-nos els resultats més relacionats amb la nostra consulta.
L’especialista en SEM s’encarrega del màrqueting d’un web en l’àmbit dels

cercadors. Decideix l’audiència a la que adreçarà les seves accions publicitàries,
les paraules clau que cal patrocinar i com fer-ho.
Màrqueting en cercadors (SEM)
El SEM (Search Engine Marketing) consisteix en el posicionament en cercadors mitjançant

enllaços patrocinats o anuncis, que destaquen de la llista de resultats orgànica per estar
situats estratègicament, a la part superior o dreta de la mateixa. És a dir, mitjançant anuncis
no abusius, la nostra web apareixerà en els nostres primers llocs dels buscadors. Aquesta
eina, que funciona mitjançant un sistema de pagament per clic, augmenta la visibilitat de la
nostra web i la posiciona en un lloc preferent. Val a dir que, per gestionar aquest tipus de
posicionament, va sorgir Google AdWords que permet crear campanyes per monitoritzar la
nostra activitat.
Apostar pel màrqueting de continguts suposa obrir una porta a un nou tipus de
relació amb l’usuari. Tota empresa que vol créixer té per objectiu atraure el
màxim trànsit al seu web. Per aconseguir-ho, disposa de les xarxes socials per
proporcionar proximitat i detectar quins perfils de consumidors adquireixen els
seus productes i quins perfils hi podrien estar interessats.
Val a dir que una bona estratègia de màrqueting sol aportar beneficis a mitjà
i llarg termini” però requereix un important volum de feina diària i paciència.
Ara bé, per tal que una empresa aconsegueixi arribar a transmetre una imatge
de proximitat als seus clients potencials haurà d’oferir-los, lògicament, un major
volum d’informació de qualitat sobre els seus productes i serveis. En aquests casos,
el mitjà bàsic per aconseguir-ho serà el blog.
Un blog vindria ser un diari o una bitàcola que té per voluntat i objectiu atraure
l’atenció de lectors de tot arreu. Dins l’àmbit de l’empresa, el blog actua com
aparador per comunicar i donar a conèixer a una audiència general novetats de tot
tipus, des de notícies fins a missatges institucionals (vegeu la figura 1.3).
Figur a 1. 3. Mostra d’un blog
Un blog és una eina bàsica

que les empreses
necessiten per poder créixer
Des d’un punt de vista tècnic, podem citar tres de les millors plataformes per la juntament amb els seus
clients actuals i amb els
creació de blogs com són Blogger, una plataforma propietat de Google, WordPress, seus clients potencials.
una eina de publicació gratuïta (wordPress.com) que és, alhora, un sistema de

gestió de continguts per a blogs autoallotjats (wordPress.org), i Tumblr que permet
crear microblogs socials. Un microblog és un blog
que permet enviar i publicar
continguts de poca
Des del punt de vista del continguts d’un blog, aquests han de ser de qualitat grandària com ara
missatges curts, imatges
i originals per mirar d’aconseguir els millors resultats en les cerques a Internet. individuals o enllaços de
vídeo.
Però l’esforç per realitzar continguts de qualitat ha d’anar acompanyat de difusió:
aquests s’han de donar a conèixer. Per fer-ho podem valer-nos de les xarxes socials,
on els comentaris tendeixen a ser importants en l’experiència de compra dels
usuaris.
Per tant, els continguts del blogs s’han d’adaptar i difondre en les diferents
xarxes socials de més impacte. És per aquest motiu que han sorgit aplicacions
que permeten gestionar diferents xarxes socials alhora des d’un mateix tauler
de control com, per exemple, Hootsuite (figura 1.5) o Tweetdeck. Aquestes
aplicacions web ens permeten escriure actualitzacions, inserir enllaços, pujar

fotos, gestionar comentaris i seguir converses en diferents xarxes socials.
Fi gur a 1 .4 . Mostra del tauler de Hootsuite
Des d’un únic tauler de control, l’usuari pot afegir perfils de xarxes socials; així,
és possible gestionar simultàniament Twitter, Google+, Facebook, LinkedIn o
Wordpress, ubicant-les dins del tauler en forma de columnes amb els continguts
que es vulgui controlar de cadascun dels perfils (retuits, mencions, llistes, el
mur...).
Les xarxes socials de contactes professionals en línia, mitjançant comunitats

virtuals, permeten compartir i intercanviar els nostres coneixements i idees, al
mateix temps que ens permeten conèixer múltiples perfils professionals d’interès o
a altres professionals amb interessos comuns disposats a col·laboracions en l’àmbit
laboral establint sinergies i amb elles contribuir a assolir els nostres objectius
professionals i personals.
1.1.3 Treball col·laboratiu
Compartir és útil. En moltes ocasions treballem en equip i, tant si estem al mateix

lloc com si estem distanciats geogràficament, tenim la necessitat de compartir
informació i actualitzar-la de forma immediata. De fet, l’eclosió dels dispositius
mòbils i el sorgiment del núvol han facilitat en gran mesura el treball col·laboratiu
i el fet que cada cop hi hagi més aplicacions que ens permetin estar connectats
contínuament als nostres projectes.
Moltes de les eines que formen part del que s’anomena cloud computing (eines al
núvol) faciliten tant la compartició com la sincronització de la informació que ges-
tionem en diferents dispositius per tal de permetre’ns treballar col·laborativament.
Informàtica ’al núvol’
El núvol és una metàfora utilitzada per fer referència a serveis que s’utilitzen a través
de Internet. El concepte de núvol ve de l’anglès cloud computing, el nom que s’atorga
al processament i a l’emmagatzematge massiu de dades en servidors que allotgen la
informació de l’usuari. Aquest paradigma es fonamenta en l’accés instantani i en tot
moment a les dades, independentment de la nostra situació geogràfica i dels dispositius
utilitzats.
Un exemple d’aplicació web pel treball col·laboratiu és Dropbox, un servei

multiplataforma d’allotjament d’arxius al núvol que permet compartir carpetes
per emmagatzemar arxius de forma col·laborativa entre els membre de l’equip,
que tindran accés a la versió més actualitzada d’un arxiu des de qualsevol lloc. Un
dels avantatges del servei és que és multiplataforma, de manera que el podrem tenir
instal·lat al nostre ordinador, tauleta i/o telèfon intel·ligent i tindrem sincronitzats
els arxius en tots els dispositius. Un altre dels avantatges de Dropbox és que permet
recuperar els arxius eliminats i les versions desades amb anterioritat (vegeu la
figura 1.5).
Fig ur a 1 . 5 . Mostra de l’aplicació Dropbox per a disposi-

tius mòbils
Si bé el que ofereix Google Drive és un servei similar al de Dropbox com a

repositori d’arxius, té un afegit que el fa més orientat al treball col·laboratiu:
la possibilitat de crear i editar col·laborativament, en temps real i de manera
simultània, documents de text, fulls de càlcul i presentacions des de qualsevol
dispositiu (vegeu la figura 1.6). Encara que no tinguem accés a Internet en el
moment en què vulguem editar qualsevol arxiu, podrem editar-lo i quan tornem
a tenir accés a Internet se sincronitzaran les modificacions amb la resta de
dispositius. A més, Google Drive és compatible amb els arxius de Microsoft
Office, és a dir que podrem editar qualsevol arxiu que ens enviïn al correu
electrònic de Google.
Fi gur a 1 .6 . Aplicació web de Google Drive
El treball col·laboratiu genera un gran volum d’informació, a la qual és important

poder accedir amb rapidesa i eficiència. És per aquest motiu que els princi-
pals serveis de repositoris d’arxiu disposen d’un buscador per realitzar cerques
entre els diferents continguts, principalment, en base als títols dels documents
emmagatzemats. Ara bé, si volem disposar d’una cerca més acurada i relacional
entre els diferents continguts emmagatzemats, necessitem disposar d’una eina que
estructuri de forma organitzada la informació emmagatzemada.
Per tant, per aquelles persones que necessitin una eina de treball col·laboratiu per
elaborar documentació amb un format senzill de crear i editar, que puguin ser
revisats i actualitzats amb freqüència i facilitat i, alhora, entre diversos usuaris
simultàniament (o no), l’eina més adient són les wikis.
L’exemple més conegut de

les wikis és la Wikipedia, 1.1.4 Wiki: exemple d’aplicació web col·laborativa
una enciclopèdia lliure que
va sorgir l’any 2001 i que és
mantinguda per la Fundació
Wikimedia, una organització
sense ànim de lucre. Les wikis són eines senzilles, flexibles i útils pel treball en grup o col·laboratiu.
Wikipedia compta, a dia
d’avui, amb més de 15
Ens permeten guardar informació (en forma de pàgines) i interrelacionar-ne els
milions d’articles (dels quals continguts. A més, tenim la possibilitat de definir-les com a públiques o com a
uns quatre milions són en
anglès i més de 450.000 en privades.
català).
Si volguéssim implementar Les wikis tant poden ser des de pàgines personals fins a comunitats en creixement.
una wiki per a ús personal,
que no hagués de contenir Per exemple, una wiki es pot plantejar per documentar els nostres objectius a curt
un gran nombre de pàgines
i/o usuaris, podríem optar i llarg termini, per ajudar en el disseny d’un producte, per realitzar un treball en
pel programari DokuWiki.
grup o per crear un espai de discussió relacionat amb una afició de diversos (o
molts) usuaris.
MediaWiki és un programari lliure amb llicència GPL molt potent, escalable

i amb una gran quantitat de característiques per processar i mostrar les dades
emmagatzemades en una base de dades. Es caracteritza per l’organització de les
seves pàgines en espais de noms, les pàgines de discussió, així com per oferir la
possibilitat de personalitzar les pàgines que integraran la wiki.
Quan un usuari edita una pàgina per afegir-hi, per exemple, nous continguts
o imatges, MediaWiki ho escriu en la seva base de dades però sense esborrar
les versions anteriors de la pàgina permetent, en conseqüència, que es puguin
revertir els canvis fàcilment. Això garanteix que sempre es pugui controlar que la
informació afegida sigui correcta o d’acord amb els continguts, i corregir-la amb
rapidesa sense perjudicar els continguts de la pàgina.
Si bé el programari MediaWiki es pot instal·lar i pot funcionar sobre qualsevol

sistema operatiu, a continuació podem veure una mostra del procés d’instal·lació,
configuració i funcionament de MediaWiki en Windows 7. El PHP és un llenguatge de
codi obert molt popular
especialment adient pel
Abans d’arrencar amb el procés d’instal·lació de MediaWiki, hem d’instal·lar desenvolupament web i que
pot ser incrustat en HTML.
un servidor web Apache amb suport PHP i una base de dades SQL. En el
L’SQL és un tipus de
nostre cas, considerarem que volem instal·lar la wiki en una xarxa local, i per llenguatge vinculat amb la
gestió de bases de dades
tant descarregarem des de l’adreça http://www.apachefriends.org/es/index.html i de caràcter relacional.
instal·larem el servidor XAMPP que treballi sobre el sistema operatiu del nostre XAMPP és una eina de
ordinador. Un cop haguem descarregat el servidor XAMPP l’instal·larem i, un desenvolupament que ens
permet provar una pàgina
cop fet, procedirem a activar-ne els serveis necessaris pel correcte funcionament web en el nostre ordinador
sense necessitat de tenir
del programari MediaWiki. En aquest cas, haurem de posar en funcionament els accés a Internet.
serveis d’Apache i de MySQL (vegeu la figura 1.7).
F ig ur a 1. 7. Activació dels serveis web (Apache) i la base de dades (MySQL)
Un cop iniciats els serveis del servidor XAMPP, ja podem adreçar-nos a

http://www.mediawiki.org/wiki/Download per descarregar el programari Medi-
aWiki. Un cop descarregat l’arxiu comprimit (no un executable), haurem de
descomprimir-lo dins del directori arrel del nostre lloc web (mai en un sub-
directori). A continuació, haurem de reanomenar el directori descomprimit

(MediaWiki-X.X.X) amb el nom que vulguem que aparegui en l’adreça web
(en el nostre cas, “wiki-ioc”). En conseqüència, l’adreça web resultant serà
http://exemple.com/wiki-ioc/) (vegeu la figura 1.8).
Fi gur a 1 .8 . Descompressió i canvi de nom del directori de MediaWiki
En el cas que no estiguem fent la instal·lació del MediaWiki sobre Linux,

hauríem de canviar els permisos d’accés del subdirectori “config” a 770
perquè el servidor tingui permisos d’escriptura.
Tot seguit, introduirem l’adreça web del nostre directori en la barra de navegació
del nostre navegador web. Com que treballem a nivell local (sobre la pròpia
màquina), haurem de posar “localhost”, sent l’adreça resultant http://localhost/
wiki-ioc.
Per començar a configurar els principals paràmetres de la nostra wiki, haurem

de clicar sobre l’enllaç situat en la cadena de caràcters set up the wiki. En el
procés de configuració del programari MediaWiki ens aniran apareixent pàgines
amb continguts informatius fins que arribem a la pàgina on hem de configurar tot
allò referent a la base de dades (vegeu la figura 1.9).
Figur a 1. 9. Configuració dels paràmetres de la base de dades
Dins dels paràmetres de configuració de la base de dades amb la qual treballarà

MediaWiki, haurem de definir el nom de la base de dades i amb quin usuari s’hi
accedirà. En aquest cas, el nom que assignem a la base de dades amb la qual
treballarà és “wiki-ioc” i l’usuari amb el qual s’hi accedirà serà “root”. Un cop
definits aquests paràmetres, ens pot aparèixer un missatge d’error (vegeu la figura
1.10) ja que, si bé estem configurant els paràmetres de la base de dades amb la
qual treballarà MediaWiki, això no implica ni que s’hagi creat la base de dades ni
que l’usuari existeixi o que la contrasenya introduïda sigui la correcta.
Figur a 1 . 10 . Missatge d’error de MediaWiki

Per tant, davant d’aquest error amb la base de dades del qual ens informa
MediaWiki, haurem de corregir-lo treballant directament dins del gestor de bases
de dades del servidor XAMPP. Per fer-ho, tant podem accedir des del tauler de
control del servidor XAMPP (vegeu la figura 1.11) com mitjançant el navegador
web, adreçant-nos a http://localhost/phpmyadmin.
F igu r a 1. 1 1 . Accés a l’administració del gestor de bases de dades del servidor XAMPP
Un cop dins del gestor de bases de dades del servidor XAMPP, ens trobarem que
la base de dades amb la qual treballarà el programari MediaWiki s’ha de crear
(vegeu la figura 1.12).
F igu r a 1. 1 2 . Creació de la base de dades

Un cop creada la base de dades, haurem de clicar sobre l’enllaç Comprova els
permisos de la base de dades que acabem de crear ja que és recomanable modificar
la contrasenya de l’usuari “root” amb el qual es realitzaran tasques d’administració
dins del programari MediaWiki (vegeu la figura 1.13).
F ig ur a 1. 13. Modificació de la contrasenya de l’usuari root
Quan haguem realitzat els canvis en la base de dades amb la qual treballarà el
programari MediWiki, ja podrem reprendre el procés de configuració de la nostra
wiki i actualitzar els valors que en l’anterior ocasió ens havien donat problemes
(nom de la base de dades i contrasenya de l’usuari “root”). Si tot està ben escrit, el
missatge d’error ja no apareixerà i podrem continuar amb el procés de configuració
de la wiki.
Arribats a aquest punt haurem de definir el nostre usuari per a MediaWiki amb el
qual podrem fer el log in i accedir a crear noves pàgines, o bé a moderar-les (vegeu
la figura 1.14).
F igu r a 1. 1 4 . Definició del nostre usuari de MediaWiki
Un cop finalitzada la instal·lació de MediaWiki, el programari generarà un arxiu

anomenat “LocalSettings.php” que conté tota la configuració que acabem de
definir pel programari MediaWiki i que haurem de guardar dins del directori arrel
de la nostra wiki (en el nostre cas, la carpeta wiki-ioc).
Arribats a aquest punt, ja podem començar a treballar amb la nostra wiki. En

primer lloc, hi accedirem mitjançant el navegador web i hi farem log in amb
l’usuari que hem creat (vegeu la figura 1.15).
F igu r a 1. 1 5 . Accés a la nostra wiki

Un cop dins, ja podrem començar a treballar amb la wiki creant una nova pàgina.
Si introduïm una paraula en el cercador, aquest ens retornarà que no l’ha trobat i
ens oferirà que la creem (vegeu la figura 1.16).
Figur a 1. 16. Elaboració d’una pàgina de la nostra wiki
Com en tota wiki, un cop creada la pàgina, aquesta podrà ser modificada de forma
col·lectiva (per tots aquells usuaris registrats a la wiki que ho desitgin).
Podem concloure que, a partir d’un procés d’instal·lació i configuració molt

senzill, podem arribar a disposar d’una eina de propòsit general tan potent com
és una wiki i que ens pot ajudar a construir una excel·lent base de coneixement
propi (o grupal) a base d’anar-hi ingressant i relacionant tota aquella informació
que considerem important o d’utilitat.
1.2 Correu web
La gran expansió que les telecomunicacions han tingut en la nostra societat en

les últimes dècades ha permès la creació de nous sistemes de comunicació i ha
possibilitat que els sistemes de comunicació tradicionals hagin fet un salt evolutiu.
El cas dels serveis de correu no va ser una excepció. El sistema de comunicació

tradicional mitjançant documents escrits enviats des del remitent al destinatari va
experimentar un canvi tecnològic a principis de la segona meitat del segle XX. Es
va passar d’enviar documents escrits sobre paper a enviar documents en format
digital de forma quasi immediata. Aquest nou sistema d’enviar correu se’l va
La paraula email prové de
anomenar correu electrònic (en anglès, email). Per abreujar, en català es pot la contracció de les paraules
angleses electronic mail.
utilitzar l’expressió traduïda de l’anglès, correu-e.
Des d’aleshores, el correu electrònic s’ha convertit en una eina de comunicació

molt utilitzada tant a nivell individual com a nivell organitzatiu. Gran part de la
informació que es transmet en les empreses es fa a través del correu electrònic.
Inicialment, els programes que permetien utilitzar correu electrònic s’havien d’ins-
tal·lar localment a cada màquina dels diferents usuaris. És el cas dels programes
Microsoft Outlook o Mozilla ThunderBird. Aquests aplicatius necessiten una
instal·lació i una configuració especial per baixar el correu electrònic des del
servidor de correu a l’ordinador local. Aquesta és la gran diferència entre el correu
electrònic tradicional i el correu web.
Es coneix per correu web els serveis de correu electrònic que tenen com a
plataforma principal un espai web.
La utilització de l’arrova (@) dins del correu electrònic

(nom_usuari@domini.extensió) s’atribueix a en Ray Tomlinson, inventor
del correu electrònic, qui necessitava una forma de separar el nom de l’usuari
del nom del domini (les parts fonamentals de tot correu electrònic). Com que
Tomlinson necessitava un caràcter que no formés part del nom de l’usuari, va
optar pel símbol arrova (@) que, en anglès es coneix com at (‘a’) que, tot i que,
històricament, estava present en tots els teclats anglesos, no se’n feia un ús gaire
freqüent. En l’entorn comercial anglès, el símbol arrova (@) s’utilitzava per
expressar preus unitaris (3 chickens @ $5,00, tres pollastres per 5 dòlars).
1.2.1 Característiques del correu web
L’ús massiu d’Internet i la tendència general a utilitzar, cada vegada més, aplica-
cions web, fa que els serveis de correu electrònic web estiguin en auge. A més de
l’inherent avantatge de poder consultar el correu en qualsevol lloc on tinguem una
connexió a Internet i un dispositiu amb un navegador, els serveis actuals de correu
web acostumen a tenir les característiques següents:
• Són gratuïts. Per això en alguns casos tenen publicitat o enllaços a pàgines
patrocinades.
• Donen una gran capacitat d’emmagatzematge que permet no esborrar mai

un missatge.
• Tenen filtres contra el correu brossa, l’spam.
• Són fàcils d’utilitzar, fins i tot en dispositius mòbils.
• Van incorporant noves funcionalitats ja que es van actualitzant periòdica-

ment.
Existeixen nombroses companyies que ofereixen serveis de correu web gratuït per
als seus usuaris. Algunes de les més conegudes són:
• Yahoo, que ofereix Yahoo Mail. Per accedir als seus serveis cal anar a
http://es.mail.yahoo.com. Logo de Yahoo Mail
• Microsoft, que ofereix Hotmail. Actualment, des de l’adreça

http://www.outlook.com s’accedeix a una pàgina de Windows Live,
on se centralitzen tant els serveis de missatgeria instantània (Messenger), Logo del servei web de Microsoft
l’ús en línia de la consola Xbox i el correu web (Outlook.com).
Arribats a aquest punt, cal destacar que, tot i haver-hi diversos proveïdors de correu
web, ens centrarem en Gmail que és el més utilitzat en l’actualitat i que permet
compatibilitzar l’usuari amb altres serveis web que proporciona Google que poden
resultar d’interès i utilitat als usuaris.
• Google, que ofereix Google Mail o, abreujant, Gmail. El 15 d’abril de

2004, Google va revolucionar el món del correu web oferint funcionalitats
innovadores amb Gmail. Va estar en versió Beta fins el 7 de juliol de 2009.
Per accedir a Gmail cal anar a l’adreça http://mail.google.com
Gmail: el correu electrònic web de Google
Des del punt de vista de les principals característiques que diferencien el correu
electrònic de Google, Gmail, de la resta de serveis de correu electrònic podem
destacar, per exemple, l’espai d’emmagatzematge que ofereix. Actualment, Gmail
ofereix un mínim de 25 GB d’espai d’emmagatzematge. Per altra banda, amb la
intenció d’agilitzar la cerca dins de la safata d’entrada, integra una barra de cerca
per paraules clau tant en l’assumpte com en el contingut del correus electrònics.
De fet, amb la finalitat de personalitzar la safata de correu electrònic i atorgar-ne

un major ventall de funcionalitats, s’inclou la possibilitat d’etiquetar els missatges
per tenir-los ben organitzats i fer més fàcils les cerques a la safata d’entrada Logotip de Gmail, el servei de correu
electrònic de Google
(un missatge pot tenir més d’una etiqueta). A més, permet destacar missatges
importants. Per altra banda, també posa a disposició de l’usuari un ampli ventall
de funcions (Labs) entre les quals triar i implementar dins de la safata de correu
electrònic com, per exemple, aturar l’enviament d’un correu electrònic en els 30
segons posteriors a l’execució de l’enviament del correu electrònic.
Gmail és, a més, la porta d’accés a un conjunt d’eines desenvolupades per Google
com són, per exemple, un xat que està integrat i accessible des de la safata com un
servei de videotrucades (Hangouts). A més, també ofereix la possibilitat d’accedir
al Drive o al servei Google Docs que permet crear documents i treballar-hi de
forma col·lectiva amb altres usuaris de Google.
Per últim, és important destacar que la integració amb els dispositius mòbils va
marcar una important innovació a Gmail ja que les apps específiques que es van
llançar per a telèfons intel·ligents (smartphones) i tauletes (tablets) es van convertir
en una important extensió del correu electrònic en la seva versió per escriptori.
Podeu ampliar aquesta informació al web de Google, http://mail.google.com/

mail/help/intl/ca/about.html.
Primers passos en l’ús del Gmail
Per començar a utilitzar el correu web de Gmail hem d’anar a la pàgina d’inici
http://www.gmail.com, escriure un identificador de compte a la casella Nom
d’usuari i la Contrasenya corresponent, i clicar el botó Inicieu la sessió (vegeu
figura 1.17).
F igu r a 1. 1 7 . Finestra principal del correu Gmail
Si deixem activa la casella No tanquis la sessió el navegador guardarà la infor-

mació de l’usuari i la contrasenya, de manera que la propera vegada que se’ns
mostri aquest formulari o introduïm l’adreça web del correu electrònic (http:
//www.gmail.com) no haurem de tornar-les a introduir. Val a dir que aquesta
opció és bona per l’ordinador en el qual treballem sovint, però no pel cas d’un
ordinador públic o que utilitzi altra gent: pot resultar insegur ja que algú altre
podria accedir al nostre correu electrònic sense el nostre consentiment.
La finestra principal del correu Gmail és semblant a la que es mostra a la figura

1.18.
Figur a 1. 18. Finestra principal del correu Gmail
Abans de passar a definir cadascuna de les zones de la interfície web del correu
electrònic de Google, és important destacar la possibilitat que ens ofereix de
gestionar i classificar els correus electrònics que anem rebent en base a cinc
categories predefinides (Principal, Social, Promocions, Notificacions i Fòrums)
entre les quals, tal com es mostra a la figura 1.19, podem seleccionar quines
volem que es mostrin en la nostra safata d’entrada de correu electrònic (quan es
crea un correu electrònic de Gmail apareixen definides, inicialment, les categories
Principal, Social i Promocions). Per exemple, si arrosseguem un correu electrònic
de promoció d’una cadena de menjar congelat a la categoria Promocions, els futurs
correus electrònics que rebem d’aquest mateix remitent entrarà automàticament
dins d’aquesta categoria.
F ig ur a 1 . 19 . Finestra principal del correu Gmail

Per últim, és important destacar que, després de crear el compte de correu

electrònic, podem accedir a dos apartats força rellevants com són Compte i la
Privadesa (vegeu figura 1.20).
F igu r a 1. 2 0 . Finestra principal del correu Gmail
Dins de l’apartat Compte accedim a la configuració del compte de Google. Aquest

apartat de configuració és molt ampli ja que integra, en primer lloc, un apartat
per comprovar la configuració de seguretat del compte (des de la informació de
recuperació del compte passant per un registre dels dispositius mòbils i ordinadors
des d’on ens hi hem connectat fins a la comprovació dels permisos del compte).
Després d’aquest apartat hi ha els apartats corresponents a la informació personal
i d’inici de sessió. A partir d’aquí trobem els apartats relacionats amb les
aplicacions i serveis connectats (des del punt de vista de dispositius mòbils) i de la
gestió del compte ja que, al ser de Google, l’acostuma a relacionar amb els altres
serveis que ofereix (Youtube, Google+...).
És dins de l’enllaç Privadesa que podrem accedir a tota la documentació de

Google relacionada amb la Política de Privadesa i amb les Condicions del servei,
entre d’altres, que hem acceptat en el moment de crear el compte. És aquí on
Google exposa quines dades recull, com les utilitza i en quin grau les comparteix.
Val a dir que la informació recollida dins d’aquests apartats es va actualitzant tant
a criteri de Google com a propietari del servei ofert, com obligats per possibles
canvis en la legislació sobre protecció de dades del país on Google ofereix els seus
serveis.
Correu electrònic de Google: característiques i configuració
Per facilitar una gestió del compte de correu electrònic de Google, hi ha la

possibilitat d’afegir i agrupar els missatges mitjançant etiquetes. Serà així com
tindrem una safata d’entrada ben organitzada perquè les cerques siguin ràpides i
senzilles.
Les etiquetes a Gmail s’utilitzen per classificar els missatges i, per tant, agrupar els
que tenen una temàtica, un destinatari o un remitent comú. Afegir una etiqueta,
tant des d’un dispositiu mòbil com des del client web, és quelcom molt senzill,
principalment, pels missatges que hi ha en la nostra safata d’entrada.
Per començar a definir quines etiquetes predefinides volem tenir disponibles per
assignar, o bé, definir-ne de noves, haurem d’adreçar-nos a l’apartat Configuració
en la nostra safata d’entrada i, un cop dins, ens adreçarem a la pestanya Etiquetes.
En el nostre cas, crearem l’etiqueta IOC per assignar-la a tots aquells correus
electrònics que hi estiguin relacionats (vegeu la figura 1.21).
F ig ur a 1. 21. Creació de noves etiquetes
Un cop creada la nova etiqueta IOC, ja podem assignar als correus electrònics
aquesta etiqueta que acabem de crear (se’n pot assignar més d’una). A més, tal
com mostra la figura 1.22, totes les etiquetes que anem creant, apareixeran en la
banda lateral esquerra de la safata d’entrada perquè, en el cas que hi cliquem, ens
apareguin tots els missatges que tinguin assignada aquesta etiqueta.
F ig ur a 1 . 22 . Assignació d’etiquetes als correus electrònics
A més, també podem assignar colors a les diferents etiquetes (vegeu la figura
1.23) per, així, poder gestionar els nostres correus electrònics fàcilment disposant
d’una safata d’entrada estructurada per etiquetes amb una cerca fàcil i senzilla per
l’organització dels correus electrònics.
F igu r a 1. 2 3 . Assignació de colors a les etiquetes
Si bé el correu electrònic de Google no ofereix la possibilitat d’organitzar els

missatges en carpetes, podem emular-ne aquesta tipologia d’organització mitjan-
çant les etiquetes. Per exemple, els correus electrònics entrants se’ls assigna
l’etiqueta Rebuts, als eliminats se’ls assigna l’etiqueta Paperera i als correus
sortints l’etiqueta Enviats. En conseqüència, podem moure els correus electrònics
a les diferents etiquetes/carpetes que tinguem creades (vegeu la figura 1.24). Un
cop mogut el correu electrònic a la carpeta escollida, aquest desapareixerà de la
safata d’entrada principal i el podrem recuperar mitjançant l’enllaç de la barra
lateral de la safata d’entrada.
F igu r a 1. 2 4 . Assignació de colors a les etiquetes
També podem crear un ventall de filtres perquè els diferents correus electrònics
que ens arribin s’organitzin i etiquetin automàticament en funció de l’origen del
missatge, per a qui és, l’assumpte, les paraules que conté, etc. Per crear aquests
filtres haurem d’adreçar-nos a la Configuració del correu electrònic de Google i,
un cop dins, ens adreçarem a l’apartat Filtres. A l’hora de crear un filtre (vegeu
la figura 1.25), triarem una o diverses opcions segons el que vulguem filtrar. Un
exemple de filtre útil és fer-ne un per als correus electrònics que vinguin de xarxes
socials com ara Facebook o Twitter.
Figur a 1. 25. Definició d’un filtre
Un cop definit els filtres, quan arribi un correu electrònic que compleixi amb
algun dels paràmetres que hi haguem definit, quedarà marcat seguint les premisses
indicades (vegeu la figura 1.26).
Figur a 1 . 26 . Prova del correcte funcionament del filtre definit
És important destacar la idoneïtat d’aplicar automàticament als filtres una etiqueta.

Només hem de seleccionar l’opció i anar al desplegable, triar-ne una de les
existents o crear-ne una de nova.
Per altra banda, el correu electrònic de Google, Gmail, permet el readreçament

d’altres comptes al seu servei de correu. És a dir, podem gestionar des del nostre
compte de Gmail tots els correus electrònics que rebem en la resta de correus
electrònics registrats en d’altres proveïdors de serveis de correu web. Per fer-ho,
haurem d’adreçar-nos a la Configuració de Gmail i, un cop dins, accedirem a la
pestanya Comptes i Importació i d’allí a la secció Importa el correu i els contactes
F igu r a 1. 2 7 . Procés d’importació d’un correu electrònic
Un cop haguem definit de quin compte volem rebre els correus electrònics, haurem
de clicar a Afegir compte i es completarà el desviament del correu electrònic al
nostre compte de correu electrònic de Google.
També podem utilitzar diversos comptes de correu electrònic i redireccionar l’un a

l’altre per no perdre cap correu. Per redireccionar diversos comptes de Google a un
de sol, haurem d’adreçar-nos a l’apartat Configuració i, un cop dins, a la pestanya
Reenviament i POP/IMAP i clicarem a sobre del botó Afegeix una adreça de
reenviament. A continuació, s’obrirà una finestra on introduir el correu electrònic
al que volem reenviar els correus electrònics d’aquest compte. A continuació,
Gmail enviarà un missatge amb un codi de confirmació a aquesta adreça de
correu electrònic. Haurem de clicar en l’enllaç inclòs en el correu electrònic
de confirmació, o bé, haurem de copiar el codi i enganxar-lo en la casella que
apareixerà en el menú de reenviament.
Tant si cliquem en l’enllaç com si copiem el codi proporcionat, el reenviament

estarà actiu tan aviat com guardem les opcions de configuració. A més podrem
escollir entre diverses opcions respecte què fer amb els missatges entrants (vegeu
la figura 1.28).
F igu r a 1. 2 8 . Definició del reenviament

Cal destacar, per últim, que aquesta funció també es pot utilitzar amb qualsevol
altra adreça de correu electrònic, ja sigui de Gmail o no. Si disposem de diverses
adreces de correu electrònic, aquesta és l’opció més ràpida i còmode per consultar-
les totes des d’una única safata d’entrada.
Correu electrònic de Google: contactes i tasques
Els contactes són les adreces de correu electrònic dels nostres coneguts. Última-
ment, les funcionalitats dels contactes són tan completes (no només a Gmail, sinó
també a Yahoo! o Hotmail, per exemple), que funcionen com la millor de les
agendes.
Cada vegada que responem un missatge, automàticament es crea un contacte nou

a la llista. Aquesta és la manera més senzilla de crear un contacte, però la més
completa i que ens permet gestionar altres dades a part de l’adreça de correu, és
fer-ho a través de l’enllaç Contactes (vegeu la figura 1.29).
F ig ur a 1. 29 . Accés a contactes
L’agenda de contactes de Google és utilitzada per molta gent, des dels usuaris
del correu electrònic de Gmail fins aquells que tenen un dispositiu mòbil amb
el sistema operatiu Android, ja que la gran majoria dels dispositius mòbils que
funcionen amb aquest sistema operatiu porten instal·lades, per defecte, aplicacions
creades per Google que ens ofereixen diversos tipus de serveis. En conseqüència,
tots els contactes que tinguem emmagatzemats dins del nostre compte de correu
electrònic de Google s’emmagatzemen i actualitzen en el nostre dispositiu mòbil
amb sistema operatiu Android, i a l’inrevés (vegeu la figura 1.30).
F igu r a 1. 3 0 . Accés web als contactes de Google
Tot i que els Contactes eren inicialment una funcionalitat del servei de Gmail,
l’augment en l’abast de les seves característiques i l’extensió del seu ús van portar
a Google a permetre’n la gestió independentment del servei de correu, mitjançant
l’adreça web http://contacts.google.com havent iniciat sessió a Google prèvia-
ment.
Per la seva part, els Cercles de Google són una potent eina de segmentació de
contactes vinculada a la xarxa social pròpia de Google, Google+. És a dir, els
diferents contactes amb els quals estiguem connectats els podem agrupar en petits
Els cercles de Google+ grups i/o segments. Aquesta segmentació en petits grups facilita que, per exemple,
puguem compartir amb un grup de contactes (o cercle) en concret uns continguts
perquè, per exemple, considerem que podem resultar de l’interès dels contactes
membres. Per exemple, podem definir un cercle amb els contactes de la feina, un
altre cercle amb els contactes amb qui tenim un lligam familiar o un cercle amb
contactes amb qui ens comuniquem en anglès.
Apart del correu electrònic i de l’agenda de contactes, mitjançant la safata

d’entrada de correu electrònic de Google també podem accedir a un gestor de
tasques. Amb aquest servei podrem escriure un llistat de tasques a realitzar i
afegir, per exemple, la data límit per la seva realització i, tal com mostra la figura
1.31, enviar el llistat de tasques per correu electrònic, ordenar-les per la data límit
(venciment) o mostrar aquelles que ja hem realitzat.
Fig ur a 1 . 3 1. Accés al gestor de tasques de Google
Inbox: evolució de la safata d’entrada
L’impacte actual dels dispositius mòbils no sols ha motivat la necessitat d’adaptar

les aplicacions web a aquest segment sinó que, a més, els usuaris han modificat
els seus hàbits d’ús ampliant l’ús inicial del correu electrònic. De fet, si bé
inicialment el correu electrònic era una via àgil de comunicació entre usuaris, el
món empresarial el va adquirir per comunicar-se amb els seus clients fins al punt
que, actualment, podem rebre per correu electrònic factures i rebuts dels diferents
proveïdors de serveis que teníem contractats.
Aquesta evolució del correu electrònic des d’una plataforma de comunicació

fins a un gestor i assistent personal en el nostre dia a dia ha motivat Google a
proposar un replantejament de la safata de correu electrònic en la forma de l’Inbox
(http://inbox.google.com).
Inbox (safata d’entrada, en anglès) no és una safata de correu electrònic ordinari

(vegeu la figura 1.32), sinó una safata d’entrada on cada correu es converteix en
un assumpte que requereix d’una decisió. L’Inbox és, per tant, un assistent que
ens proveeix dels recursos per gestionar el flux de les comunicacions i no oblidar
res que requereixi de la nostra atenció. Per exemple, si detecta que el correu
que hem rebut inclou una factura, automàticament l’emmagatzema en una carpeta
anomenada finances. L’Inbox mostra, a més, la informació més important de cada
correu directament a la vista prèvia. Si ens envien unes fotos, les mostrarà sense
que calgui llegir el missatge sencer.
Així doncs, la proposta de nova safata d’entrada de correu electrònic de Google es

planteja com un gestor de tasques pel dia a dia dels seus usuaris, com ho il·lustra
la icona de la xinxeta que apareix tant en la zona superior de la safata com dins
del correu electrònic. La icona de la xinxeta substitueix la marca destacats, sovint
amb forma d’estrella.
F igu r a 1. 3 2 . Mostra de la finestra principal d’Inbox de Google
En aquest cas, els missatges que tinguin activada la xinxeta sempre es mantindran
en la part superior de la safata d’entrada —tot i que es rebin més correus
electrònics—. En el cas que cliquem la icona de la xinxeta de la safata d’entrada
situada prop del cercador, es visualitzaran tot els correus electrònics marcats amb
aquesta xinxeta. Amb aquesta acció es desplegarà una nova secció d’elements
fixats. Per tornar a la safata d’entrada, s’haurà de clicar de nou sobre la icona de
la xinxeta.
Tant en l’aplicació web com en la aplicació per a dispositius mòbils d’Inbox

(vegeu la figura32), els correus electrònics es poden postposar clicant sobre el petit
rellotge que apareix en la zona superior dreta de la pantalla. Quan postposem un
correu electrònic en el seu rol de tasca (per exemple, una factura que requereix ser
pagada), aquest desapareix de la nostra safata d’entrada i, arribat el moment, hi
tornarà a aparèixer a l’hora definida.
Fig ur a 1 . 3 3 . Mostra de l’aplicació Inbox de Google per

dispositius mòbils
1.2.2 Els clients de correu electrònic
L’ús massiu d’Internet i la tendència general a utilitzar, cada vegada més, aplica-
cions web, fa que els serveis de correu electrònic web hagin esdevingut una eina
d’ús quotidià.
L’enviament de correus electrònics es dóna gràcies al servidors de correu electrò-

nic que en permeten l’intercanvi ja sigui entre usuaris, servidors, clients i servidors.
Aquest tipus de servidor emmagatzema i reenvia els missatges mitjançant els
protocols SMPT, POP i IMAP (vegeu figura 1.34).
El protocol SMTP (Simple Mail Transfer Protocol) és el protocol que s’utilitza

perquè dos servidors de correu intercanviïn missatges.
El protocol POP (Post Office Protocol) s’utilitza per obtenir els missatges guardats
en el servidor i passar-los a l’usuari. Per altra banda, tot i que el protocol IMAP
és similar al POP, el funcionament i les funcionalitats que ofereix són diferents.
Quan s’utilitza un servidor de correu IMAP, els missatges de correu electrònic es
mantenen en el servidor on els usuaris poden llegir-los i esborrar-los.
F igu r a 1. 3 4 . Confirmació del correcte funcionament del Thunderbird
Connectat al servidor POP o IMAP hi trobarem un client de correu electrònic,

això és, un programa d’ordinador utilitzat per llegir i enviar correus electrònics.
A diferència dels clients web de correu electrònic que permeten enviar i rebre
missatges mitjançant una pàgina web, els clients de correu són programes que
s’instal·len al nostre ordinador i que ens permeten gestionar el correu i els
Actualment, els clients de contactes, a més de l’agenda.
correu electrònic han perdut
popularitat perquè els
correus electrònics web
permeten realitzar les seves
Per altra banda, si bé amb el correu electrònic web els correus queden emma-
mateixes tasques i, alhora, gatzemats en el proveïdor web del correu electrònic, en el cas del client de correu
la capacitat
d’emmagatzematge que electrònic tradicional, aquest busca els missatges que arriben al servidor del nostre
ofereixen és molt elevada
en comparació a la que proveïdor d’Internet i els descarrega quan li ho demanem. La connexió amb el
podem tenir amb un client
de correu electrònic. servidor per part del client de correu electrònic es pot realitzar mitjançant dos
protocols diferents, el POP3 o l’IMAP.
En el cas del protocol IMAP, els missatges queden emmagatzemats en el servidor

i poden ser consultats també des d’altres ordinadors o programes de correu, inclòs
webmail. En el protocol POP3 (Post Office Protocol versió 3), els missatges que
es reben en el servidor de correu electrònic són descarregats en l’ordinador on hi
ha instal·lat el client de correu electrònic i esborrats del servidor.
Hi ha clients de correu gratuïts i n’hi ha de pagament. El més utilitzat dins dels

de pagament és l’Outlook de Microsoft, que es pot instal·lar mitjançant la suite
ofimàtica Microsoft Office. En l’àmbit del programari lliure, un dels més coneguts
és Mozilla Thunderbird, que funciona tant en Windows com en Linux i en Mac.
Thunderbird: instal·lació i configuració d’un client de correu electrònic
Mozilla Thunderbird és un client de correu lliure gratuït d’execució ràpida i

multiplataforma que consumeix menys recursos que d’altres alternatives, basat
en el codi desenvolupat dins el projecte Mozilla.
Per descarregar-lo haurem d’adreçar-nos a la pàgina de Filezilla dins del Projecte

Mozilla en català (http://www.mozilla.org/ca/thunderbird), des d’on n’obtindrem
l’aplicació en català. Un cop descarregada i havent executat la seva instal·lació,
se’ns obrirà la finestra principal per començar a utilitzar-la. Abans de fer-ho,
haurem de configurar un compte de correu electrònic, és a dir, haurem de definir
els paràmetres corresponents al servidor de correu electrònic amb què treballem i
els protocols corresponents (POP3 o IMAP).
Abans de configurar el client de correu electrònic Thunderbird, haurem de definir

els seus paràmetres principals (el compte de correu electrònic que vincularem i
amb quins protocols, POP3 o IMAP). En el nostre cas, treballarem amb un compte
de correu electrònic web creat en el proveïdor Gmail i treballarem sobre el protocol
POP3. Per tant, abans d’arrencar la configuració del Thunderbird, haurem de
definir aquests paràmetres en el compte de Gmail amb el qual treballarem. Per
fer-ho, haurem d’accedir al compte de correu electrònic i adreçar-nos a l’opció
Configuració.
Un cop dins de l’apartat Configuració del compte de correu electrònic Gmail,

haurem d’adreçar-nos a la pestanya Reenviament i POP/IMAP i, un cop dins, ens
adreçarem a la pestanya Baixada POP per activar aquest protocol, ja sigui per
a tots els missatges, ja sigui per començar a rebre-hi els missatges que arribin a
partir del moment en què el client de correu electrònic estigui configurat (vegeu
la figura 1.35).
F ig ur a 1. 35. Definició del protocol de correu electrònic en el compte de Gmail
Un cop desats els canvis relacionats amb la configuració del correu electrò-
nic web de Gmail per sincronitzar-lo amb el client de correu electrònic, hau-
rem de realitzar un últim pas. Es tracta de rebaixar el nivell de segure-
tat que estableix Google per accés o vinculacions amb les aplicacions exter-
nes. En aquest cas, haurem d’adreçar-nos a l’apartat de seguretat de Google
(https://www.google.com/settings/security/lesssecureapps) i activar l’accés per a
aplicacions menys segures, tal com mostra la figura 1.36.
F igu r a 1. 3 6 . Definició de l’accés per a aplicacions menys segures de Google
Un cop ja hem definit els paràmetres essencials del compte de correu electrònic de
Gmail perquè treballi amb una aplicació externa com és Thunderbird, ja podem
instal·lar i configurar el client de correu electrònic Thunderbird en el nostre
ordinador.
Un cop Thunderbird ja estigui instal·lat, en obrir l’aplicació accedirem a la finestra

principal de l’aplicació on haurem d’adreçar-nos a l’apartat Crea un compte nou
i clicarem sobre l’opció Correu electrònic.
Val a dir que, més que un correu electrònic, el que farem serà definir un client
de correu electrònic vinculat a un compte ja existent (ja sigui web o definit en
un servidor de correu electrònic). En el nostre cas, clicarem sobre el botó Salta
aquest pas i utilitza l’adreça electrònica que ja tinc.
Se’ns obrirà una finestra on podrem definir el compte de correu electrònic que
vulguem vincular amb el nostre client de correu electrònic i, alhora, amb quin
protocol de correu treballarem. En aquest cas, introduirem el correu electrònic
de Gmail i la contrasenya i POP3 com a protocol. A més, haurem de definir les
adreces web del servidor de correu electrònic des d’on descarregarem els correus
al programari Thunderbird i el servidor al qual es connectarà el client de correu
per enviar els correus electrònics (SMTP), tal com mostra la figura 1.37.
Figur a 1. 37. Finestra de configuració d’un correu electrònic a Thunderbird
El protocol SMTP (Protocol

senzill de transferència de
correus) és el protocol
Un cop Thunderbird hagi certificat la correcta connectivitat amb el servidor de estàndard que permet la
transferència de correus
correu electrònic tant per rebre correus electrònics com per enviar-los, el correu d’un servidor a un altre
mitjançant una connexió
electrònic apareixerà configurat dins del client de correu i ja podrem comprovar punt a punt.
el correcte funcionament del correu que acabem de configurar a Thunderbird

accedint-hi i enviant un correu electrònic de prova (vegeu la figura 1.38).
Figur a 1 . 38 . Enviament d’un correu de prova

Si hem configurat correctament el client de correu electrònic, el correu s’haurà

enviat correctament i també se’n podran rebre (vegeu la figura 1.39).
F igu r a 1. 3 9 . Confirmació del correcte funcionament del Thunderbird
Documentació tècnica
A l’hora de configurar un servei, ja sigui a Google com en un altre proveïdor, és

recomanable consultar i, en la majoria dels casos, seguir la documentació tècnica
on queden contemplades totes les possibles consultes que poden sorgir durant un
procés d’instal·lació o configuració.
Si prenem com exemple la instal·lació i configuració d’un client de correu

electrònic a partir d’un compte de correu electrònic web de Google, Gmail, ens
trobem que Google proporciona informació força detallada contemplant totes les
opcions a les quals podem haver de fer front. Per exemple, si ens adrecem a
l’apartat Configuració del correu electrònic web de Google i, a continuació, a
la pestanya Reenviament i POP/IMAP on podrem configurar el protocol per la
recepció de correus electrònics per part del client de correu electrònic.
Un cop dins de l’apartat podrem accedir a un enllaç que, sota el nom de

Instruccions de configuració, podrem accedir a la documentació tècnica de Google
en relació amb la configuració d’un client de correu electrònic. Per exemple, tal
com mostra la figura 1.40, se’ns desplegarà un seguit d’instruccions en funció del
protocol i se’ns demanarà quin programari de client de correu electrònic volem
configurar.
Figur a 1. 40. Instruccions per la configuració del protocol de correu electrònic
A continuació, haurem de triar amb quin programari de client de correu electrònic

volem configurar-lo. Un cop seleccionat, es desplegarà tots els passos a realitzar
per la correcta configuració del programari (vegeu la figura 1.41).
F ig ur a 1 . 41 . Configuració a partir del programari de client de correu electrònic
La documentació tècnica busca deixar cobertes totes les possibles qüestions que
poden sorgir al llarg d’un procés de configuració i, alhora, proporcionar el major
ventall de pautes i informació amb el llenguatge més senzill i comprensible
possible.
1.3 Calendaris en línia
Els calendaris en línia són aplicacions web que s’utilitzen per gestionar
agendes d’activitats. És a dir, són programes que permeten emmagatzemar
i organitzar informació sobre cites, reunions i esdeveniments en un entorn
web.
L’avantatge principal dels calendaris en línia respecte a les tradicionals agendes

en paper és que aquests permeten compartir la informació amb altres usuaris i, la
majoria, tenen funcions per notificar els esdeveniments d’una manera automàtica,
ja sigui per correu electrònic o amb un missatge al dispositiu mòbil.
Els calendaris en línia també reben el nom de calendaris web. Els més coneguts a
l’actualitat són 30Boxes (http://www.30boxes.com) i Google Calendar, que forma
part del conjunt d’aplicacions web oferides gratuïtament per Google, juntament
amb el correu web Gmail, els àlbums web Picasa, Google Maps, etc.
1.3.1 Característiques del Google Calendar
Google Calendar és una aplicació web de Google consistent en un gestor de

contactes i de temps que, entre d’altres serveis, ens ofereix la possibilitat de crear
calendaris i compartir-los amb aquells usuaris que desitgem mitjançant la seva
adreça de correu electrònic.
Google Calendar també disposa d’una aplicació per a dispositius mòbils amb la
qual rebre notificacions d’esdeveniments i/o crear-ne de nous. Aquests quedaran
sincronitzats automàticament amb la resta d’usuaris i dispositius que tinguin accés
al calendari.
Val a dir que també hi ha la possibilitat de sincronitzar el Calendar amb d’altres

aplicacions d’escriptori, com per exemple el client de correu electrònic Microsoft
Logotip del Google Calendar
Outlook.
Per últim, també hi ha la possibilitat d’accedir-hi fora de línia, podent treballar

amb una versió dels calendaris no connectada a Internet que es sincronitza quan
torna a estar en línia. Aquesta funció és útil quan es preveu que necessitarem
treballar sense connexió, per exemple durant un viatge en avió de llarga durada.
Per accedir al Google Calendar ho podem fer tant mitjançant el compte

de correu electrònic de Google com mitjançant la seva pàgina web d’inici
http://calendar.google.com i accedir amb l’usuari de Google i la contrasenya, o
bé accedir-hi directament des de la safata de correu electrònic, clicant a la icona
de l’aplicació web Calendar, tal com es mostra en la figura 1.42.
Figur a 1. 42. Formulari d’entrada a Google Calendar
Cada usuari que inicia sessió al Google Calendar té associat, per defecte, un
calendari amb el nom de l’identificador del seu compte de Google (vegeu la figura
1.43).
Figur a 1 . 43 . Espai de treball de Google Calendar
Per defecte, la vista del calendari mostra el dia i l’hora actual (segons el fus horari)
i en columna els dies de la setmana en curs.
Ús del Google Calendar
Més enllà del calendari que hi ha per defecte a Google Calendar, és possible crear
tants calendaris personalitzats com desitgem. La manera més senzilla de fer-ho
és clicar al botó que hi ha en la zona lateral esquerra a sota del calendari del mes
en curs (vegeu la figura 1.44). Automàticament, l’espai de treball canvia a una
finestra nova on podem crear i definir els principals paràmetres del nou calendari.
F igu r a 1. 4 4 . Creació d’un nou calendari a Google Calendar
Un cop dins de la nova finestra, podrem escriure un nom pel nou calendari (per
exemple, “Vacunes Blai”), definir una descripció més àmplia per aquest calendari
(per exemple, “Calendari de vacunes pel Blai (gat) d’acord amb les indicacions
del veterinari Andreu”. A més, també podem especificar una ubicació i escollir
un país i un fus horari.
A continuació tenim l’opció de definir com a públic aquest calendari i compartir-

lo amb les condicions que definim dins de l’apartat Configuració del permís. Per
últim, clicarem en el botó situat en la zona superior de la finestra i, així, apareixerà
un nou calendari a sota del que ja tinguem (o ens hagin compartit) i del propi per
defecte (vegeu la figura 1.45, en color verd).
F ig ura 1. 4 5 . Nou calendari, en verd
Crear esdeveniments és tan fàcil com clicar a qualsevol casella del calendari.
Ens apareixerà una finestra on podrem posar títol a aquest esdeveniment, indicar
en quin dels nostres calendaris volem que es guardi i clicar el botó Crea un
esdeveniment (vegeu la figura 1.46).
Figur a 1. 46. Creació d’un esdeveniment
També hi ha la possibilitat de canviar els detalls d’aquest esdeveniment clicant a

l’enllaç Edita l’esdeveniment. Un cop haguem clicat en l’enllaç entrarem en una
pàgina on podrem redefinir la informació de l’esdeveniment o la seva durada, per
exemple (vegeu la figura 1.47).
F igur a 1 . 47 . Edició d’un esdeveniment
Dins de l’edició, també podem definir canvis en la data, com ara que hi hagi una
periodicitat en l’esdeveniment (per exemple, que un esdeveniment aparegui un cop
per setmana). Si marquem l’apartat Repeteix se’ns obrirà una finestra on podrem
definir la periodicitat de repetició que desitgem per l’esdeveniment (vegeu la figura
1.48).
F igu r a 1. 4 8 . Repetició d’un esdeveniment
Configuració i gestió de Google Calendar
La configuració general de Google Calendar es pot canviar clicant en la icona que

acompanya el nom del calendari escollit (vegeu la figura 1.49). Un cop haguem
triat aquesta opció, podrem configurar l’idioma del calendari, el país, el fus horari,
el format de la data (en la cultura anglosaxona posen primer el mes i després el dia,
per exemple), el format de l’hora (rang de 24 h o de 12 h), el dia en què comença
la setmana (dissabte, diumenge o bé dilluns, com nosaltres), la visualització dels
dies del calendari (per dia, setmana, mes o llista general), etc. (vegeu la figura
1.50).
F igu r a 1. 4 9 . Accés a la configuració del calendari

Figur a 1. 50. Configuració del calendari
Google Calendar tant permet crear múltiples calendaris i mostrar-los en una

mateixa vista com compartir-los, ja sigui en la modalitat de ‘solament lectura’
com ‘amb control complet’ ja sigui per usuaris específics o per tothom.
Compartició de calendaris
Un cop haguem creat un calendari, podem fer que la seva informació (o els
esdeveniments continguts) pugui ser compartida amb d’altres usuaris. Per fer-
ho, haurem de clicar sobre la icona del nom del calendari escollit, i clicar
sobre Comparteix aquest calendari. Dins de la finestra que se’ns obrirà per
la compartició del calendari podem comprovar que es distingeixen quatre tipus
d’usuaris dels calendaris de Google que són:
• Usuaris administradors, que poden fer canvis i administrar l’ús compartit.
• Usuaris que poden fer canvis a esdeveniments.
• Usuaris que només poden veure la informació dels esdeveniments.
• Usuaris que només veuen els dies ocupats o lliures.
Per compartir el calendari amb un usuari, haurem d’escriure el seu correu

electrònic dins de l’apartat Comparteix amb persones concretes. La segona
columna del formulari permet escollir el tipus d’usuari o els permisos que volem
atorgar-li en relació amb aquest calendari. A més, en qualsevol moment podem
esborrar la compartició amb l’usuari clicant a sobre del símbol de la paperera que
apareix a la seva dreta (vegeu la figura 1.51).
F igu r a 1. 5 1 . Compartició del calendari al altres usuaris
En el cas que alguns dels usuaris amb els quals volem compartir el calendari no
tinguin un compte de Google, després d’afegir-los dins de l’apartat d’usuaris amb
els quals compartim el calendari, ens apareixerà una finestra emergent demanant-
nos si volem enviar una invitació a aquest usuari (vegeu la figura 1.52).
F igu r a 1. 5 2 . Compartició del calendari al altres usuaris
Tal com mostra la figura 1.53, el receptor de la invitació rebrà un missatge a la seva
bústia de correu electrònic informant-lo que ha estat convidat a compartir aquest
calendari i, a més, aconsellant-li que es creï un compte de correu electrònic.
F igu r a 1. 53 . Correu electrònic amb la invitació a un usuari amb un compte de correu electrònic web
aliè a Google
Per últim, des del punt de vista de les notificacions dels esdeveniments, podem
definir un avís per aquells usuaris que creiem que poden estar-hi interessats. En
aquests casos, Google Calendar permet notificar l’esdeveniment a molta gent
d’una manera fàcil. Si ja tenim creat l’esdeveniment, podem afegir-hi convidats
accedint a l’edició de l’esdeveniment. Un cop dins, ens haurem d’adreçar a
l’apartat Afegeix convidats i hi afegirem les adreces de correu electrònic dels

usuaris a qui vulguem avisar de l’esdeveniment (vegeu la figura 1.54).
F igur a 1. 54. Afegir convidats a l’esdeveniment
Google Calendar també porta control dels contactes que han confirmat la seva
assistència a l’esdeveniment i dels que no. També podem afegir missatges de
notificació als contactes (vegeu la figura 1.55) informant-los del motiu de la
notificació o compartint més informació en relació amb l’esdeveniment.
Figur a 1 . 55 . Afegir missatge a la notificació

Des del punt de vista de les notificacions o recordatoris, també hi ha la possibilitat

de programar l’enviament d’un recordatori amb un període de temps d’antelació
des de la finestra d’edició dels esdeveniments. Per defecte, cada esdeveniment es
pot recordar per correu electrònic o per finestra emergent en el nostre dispositiu
mòbil (vegeu la figura 1.56).
F igu r a 1. 5 6 . Configuració dels recordatoris o notificacions
Abans de que existissin els telèfons intel·ligents, el Google Calendar oferia

la possibilitat d’enviar notificacions per missatges curts de text (SMS,
Short Message Service). Amb l’aparició dels telèfons intel·ligents i les
notificacions, com que tenen unes funcions més completes i fiables, fins i
tot quan no es disposa de connexió, es va descartar aquesta modalitat de
notificació.
Tal com mostra la figura 1.57, en el dia i hora definits dins de l’esdeveniment del
calendari, se’ns obrirà una notificació (i un recordatori, en el cas que ho haguem
seleccionat) en el nostre telèfon intel·ligent mitjançant l’aplicació de calendari que
vingui instal·lada per defecte, o bé, amb l’aplicació Google Calendar.
Fig ur a 1 . 57 . Recordatori d’un esdeveniment
1.3.2 Altres calendaris en línia
Altres exemples de calendaris en línia que no siguin el propi de Google serien, per
exemple, Doodle http://www.doodle.com/es que és un calendari en línia que ens
permet crear enquestes i enviar-les als nostres contactes perquè votin el dia que els
va millor per la trobada/reunió (vegeu figura 1.58). També ofereix la possibilitat de
connectar amb el calendari en línia de Google, Google Calendar. A més, a Doodle
s’hi accedeix des d’Internet, és a dir, que és possible organitzar/canviar/acceptar/-
votar el dia d’una reunió des d’on sigui i des de múltiples plataformes (ordinadors
de sobretaula, smartphones, tauletes...).
F igu r a 1. 5 8 . Mostra d’una enquesta de Doodle
Per un altre costat, trobem el calendari de Hotmail (www.hotmail.com), també

conegut com Windows Live Calendar, que ofereix unes funcions molt semblants
a les de Google Calendar, que presenta un disseny més clar tot i que la plantilla en
la qual es basa és molt similar (vegeu la figura 1.59).
F igu r a 1. 5 9 . Mostra del calendari de Hotmail
Zoho Calendar (https://www.zoho.com/calendar/) és un calendari en línia que, a

més d’oferir les clàssiques opcions que ofereixen la majoria dels calendaris com
són els recordatoris, alarmes o tasques col·laboratives, permet enviar invitacions
a través del correu electrònic mentre es crea un esdeveniment, editar estats
de disponibilitat i sincronitzar-se amb el client de correu electrònic Microsoft
Outlook (vegeu la figura 1.60).
Figur a 1. 60. Mostra del calendari del Zoho
Per últim, una altra opció de calendari en línia és la que ofereix Coolendar
(http://www.coolendar.com/), que canvia el concepte de calendari i el redueix per
mostrar únicament el que importa: allò que s’ha de fer i quan (vegeu la figura
1.61).
F ig ur a 1 . 61 . Mostra del calendari de Coolendar

2. Ofimàtica web
Els programes informàtics que solucionen el tractament automàtic de la informa-

ció donant resposta a tasques d’oficina rutinàries com ara gestionar documents de
text, realitzar càlculs, portar una agenda d’activitats o fer presentacions multimè-
dia s’anomenen aplicacions ofimàtiques o paquets ofimàtics. L’ofimàtica és el
conjunt de tècniques, aplicacions i eines informàtiques que s’utilitzen en funcions
d’oficina per optimitzar, automatitzar i millorar els procediments o les tasques
relacionades.
L’ofimàtica web (també anomenada ofimàtica 2.0) és el servei en línia que

permet editar un text, un full de càlcul o una presentació. Disposa de
característiques avançades com són l’edició compartida de documents, la
publicació en obert de documents a Internet i una forta integració amb el
correu electrònic.
Actualment, el paquet ofimàtic més utilitzat és Microsoft Office. El fet que

sigui dels més emprats i que, a més, treballi amb formats d’arxius tancats, fa
que la resta de paquets ofimàtics tinguin el seu propi format d’arxius i alhora
contemplin la necessitat de ser compatibles amb els formats de Microsoft Office.
Dins dels paquets ofimàtics de pagament també podem destacar iWork, el paquet
ofimàtic d’Apple. En el cas dels paquets ofimàtics de codi obert, podem destacar
Sun Microsystems OpenOffice, així com LibreOffice, que és una bifurcació de
l’OpenOffice.
Per últim, és important destacar que cadascuna d’aquestes aplicacions ofimàtiques,

al contrari que les aplicacions ofimàtiques web, necessiten una instal·lació local a
cada ordinador on s’han d’utilitzar.
2.1 Introducció a les aplicacions d’ofimàtica web
La majoria d’aquests paquets ofimàtics estan formats per programes destinats a

processar textos, fer càlculs o fer presentacions multimèdia. La gran diferència
entre un paquet ofimàtic estàndard (o també anomenat d’escriptori) i un de web
és que l’espai de treball on es desen els documents dels usuaris es troba en un
servidor web i no pas en l’ordinador local de l’usuari. Per tant, no importa el tipus
d’ordinador amb el qual treballeu, ni la plataforma de sistema operatiu que tingueu,
tan sols es necessita un navegador i connexió a Internet per accedir als documents
i als serveis ofimàtics d’aquests programes.
El principal avantatge d’aquests tipus de programes i la seva creixent popularitat

es deu tant a la deslocalització de l’oficina com a la possibilitat de treballar
col·laborativament. Per a un treballador d’una empresa, que ha de fer sovint
reunions fora de la seva oficina, resulta molt còmode saber que l’última versió
d’un document la té al servidor d’Internet i no ha de portar versions en dispositius
d’emmagatzematge extern com discos o llapis de memòria (pen-drives).
També és molt útil utilitzar aquest tipus d’aplicacions quan es tracta de crear
documents i revisar-los entre més d’una persona. La compartició de documents
i la gestió de l’accés a la informació permet estalviar molt de temps i maldecaps
per detectar les últimes modificacions d’un document. Resulta molt més àgil que
el procés d’adjuntar arxius i enviar-los per correu electrònic a tota una llista de
contactes, esperant el retorn per veure’n les modificacions, per exemple.
La majoria d’aplicacions d’ofimàtica web del mercat:
• Permeten tenir els documents en un servidor web.
• Permeten el treball col·laboratiu.
• Permeten controlar qui accedeix a quina informació.
• Són compatibles amb diferents formats de documents (HTML, DOC, TXT,

RTF, ODT, PPT, XLS o PDF).
2.1.1 Característiques dels paquets ofimàtics web
Els paquets d’ofimàtica web més coneguts actualment són el Google Drive, el
Zoho Documents, el Feng Office i el ThinkFree. Aquests quatre productes (vegeu
la taula 2.1) estan disponibles en la seva versió estable definitiva i, per tant, són
plenament funcionals pels nostres objectius d’aprenentatge.
Taul a 2. 1. Adreces web dels principals paquets ofimàtics web
Paquet ofimàtic web Adreça web
Google Drive http://drive.google.com
Zoho http://www.zoho.com
Feng Office http://www.fengoffice.com
ThinkFree http://www.thinkfree.com
Hi ha productes de codi obert, com ara Feng Office, que faciliten la migració de
les dades i afavoreixen la creació d’una comunitat de programadors i usuaris que
milloren el producte dia rere dia. Zoho i ThinkFree estan més orientats a donar
serveis d’empresa i, juntament amb Feng Office, es poden instal·lar als servidors
locals.
Característiques de Google Drive
El Google Drive és un servei de Google que permet emmagatzemar arxius perquè

siguin accessibles des de qualsevol ordinador o dispositiu mòbil en qualsevol lloc.
Per tant, qualsevol actualització serà visible en la resta de dispositius amb els quals
accedim al nostre compte de Google (aquesta actualització es realitza de forma
transparent per l’usuari).
Més enllà d’emmagatzemar arxius, dins d’aquest servei de Google també trobem
una suite ofimàtica en línia que ens permet crear documents de text, fulls de
càlcul, presentacions i formularis, entre d’altres, que quedaran emmagatzemats
directament en el Google Drive.
Google Drive, un dels serveis estrella
de Google, es va anomenar en un
primer moment Google Docs
Característiques de Zoho Docs
Zoho Docs és una suite ofimàtica en línia que permet als usuaris la creació i
edició de documents en línia sense haver d’instal·lar programari o aplicacions en
l’ordinador (com en el cas de Microsoft Office).
El servei també inclou una funció per arrossegar i deixar anar arxius, a més de
que totes les operacions es realitzen en una mateixa pestanya, pel que l’usuari pot
treballar còmodament sense caure en possibles errors o confusions. Zoho Writer
és l’element que correspon al processament de textos.
Aquesta aplicació web inclou fonts, grandària de lletra, colors de text, així com
imatges de fons, revisions d’ortografia, alineació de textos, a més d’opcions de
sangria. A més, els usuaris poden afegir-hi emoticones, símbols, imatges, taules,
enllaços, així com peus de pàgina i, fins i tot, es poden incloure cançons i vídeos
en els documents.
Si bé també es pot treballar amb fulls de càlcul, no s’hi ofereixen gaires caracte-
rístiques més enllà de les pròpies que ofereix el Zoho Writer. En el cas del Zoho
Show, equival a la presentació de diapositives; en aquest cas, presenta un bon Zoho Suite, una bona alternativa a
grapat de característiques com, per exemple, una àmplia selecció de temes de fons l’àrea de l’ofimàtica en el núvol
per escollir, així com opcions per inserir vídeos de YouTube.
Característiques de ThinkFree
ThinkFree Office és una suite ofimàtica en el núvol i multiplataforma (es pot

executar en un dispositiu amb Windows, Linux, Android i Macintosh). Ofereix
un aspecte similar al de la suite de Microsoft Office. Inclou un processador de
textos, un editor de fulls de càlcul, un programa per presentacions i un editor en
format HTML.
Està disponible en diversos idiomes i combina les funcionalitats pròpies d’un

paquet ofimàtic d’escriptori amb els avantatges de treballar en el núvol. Un cop
ThinkFree fou la primera ’suite’
ens registrem en el servei, disposarem d’1GB d’emmagatzematge per crear o ofimàtica en línia compatible amb
Microsoft Office
compartir els nostres documents, treballar de forma col·laborativa, publicar els
nostres documents a Internet (en una adreça exclusiva de thinkfree.com).
Característiques de Feng Office
Feng Office està dissenyat per oferir tot el necessari perquè un usuari pugui
gestionar la seva empresa, des de l’espai necessari per emmagatzemar diferents
arxius o la gestió de projectes fins a la creació de tasques i subtasques i metes
o objectius dels projectes. De fet, es pot accedir a les tasques en funció de
l’estat, prioritat o per aquell a qui estiguin assignades. Respecte als documents (de
text i presentacions), es poden compartir, emmagatzemar o crear directament. A
més, aquests documents es poden complimentar amb notes, calendaris i registres
d’hores realitzades. El Feng Office també permet gestionar comptes de correu
electrònic gestionant, a més, els documents adjunts.
Des del punt de vista de l’administració, Feng Office ens permet crear usuaris,
grups de treball i assignar-los permisos per definir quins usuaris tenen accés a la
informació que necessiten, entre d’altres coses.
Arribats a aquest punt, cal destacar que, tot i haver-hi diverses aplicacions ofimàti-
ques web, ens centrarem en Google Drive ja que és el més utilitzat en l’actualitat
Feng Office és una solució comercial
web de codi obert
i permet compatibilitzar l’usuari amb altres serveis web que proporciona Google
i que poden resultar d’interès i utilitat.
2.2 Aplicació ofimàtica web: Google Drive
Google Drive és una eina que ens proporciona un repositori en línia en el qual
ubicar qualsevol tipus d’arxiu i disposar-ne sempre a través d’Internet.
Respecte als seus principals competidors, Google Drive se’n diferencia perquè dis-
posa d’una suite d’aplicacions d’oficina incorporada on podrem editar documents,
fulls de càlcul i presentacions, tot i que el document hagi estat creat en un altre
programa. El servei disposa a més d’accés a un ampli ventall d’extres com són les
aplicacions de tercers per crear mapes mentals o firmar documents, entre d’altres
opcions.
Per tant, dels paquets
ofimàtics que hem comentat Val a dir, a més, que la seva configuració és senzilla si ja disposem d’un compte
en general, ens centrarem a
partir d’ara en el Google de Google. A més, si utilitzem Gmail és senzill guardar documents adjuntats des
Drive.
del nostre compte de correu electrònic directament al Drive amb tan sols un parell
de clics. A més també podem llegir, sense obrir-los, aquells documents que ens
hagin enviat adjunts mitjançant Gmail.
L’únic imprescindible per utilitzar Documents de Google és una connexió a

Internet, un navegador i un compte de Google.
2.2.1 Accés a Google Drive
Un cop disposem d’una connexió a Internet i un compte de Google ja podrem

accedir al Google Drive http://drive.google.com/. Un cop dins, se’ns obrirà la
finestra principal del Drive i podrem veure les icones dels diferents documents i
carpetes que hi hagi emmagatzemats (vegeu la figura 2.1) —les icones actuen com
a vista prèvia del document amb el qual està vinculat.
Figur a 2. 1. Finestra principal de Google Drive
Val a dir que l’altra via per accedir al Google Drive és mitjançant el correu
electrònic web de Google. En la cantonada dreta superior de la safata d’entrada
de Google podem accedir als diferents serveis vinculats als comptes de Google on,
entre ells, trobem el Google Drive (veure la figura 2.2).
F ig ur a 2 . 2. Accés al Google Drive des del correu electrònic web de Google
Configuració de Google Drive
Per facilitar el treball amb Google Drive és recomanable definir-ne els principals
paràmetres de configuració. Per fer-ho, estant dins de la finestra principal, haurem
d’adreçar-nos a la roda dentada que hi ha a la zona superior dreta (vegeu la figura

2.3), hi clicarem i s’obrirà un desplegable on haurem de triar l’opció Configuració.
F igu r a 2. 3 . Configuració de Google Drive
Un cop dins de l’opció Configuració (vegeu figura 2.4) ja podrem triar, per
exemple, en quin idioma volem que apareguin les diferents opcions del tauler de
control del Google Drive. També se’ns ofereix la possibilitat de Convertir les
càrregues, és a dir, si marquem aquesta opció, quan es pugi un document amb un
format compatible amb els documents que es poden crear amb Google Drive, els
documents passaran a ser editables. Si no la marquem, els documents es pujaran
al Google Drive però, quan els obrim, serà mitjançant un visor de documents, això
és, únicament podríem veure o llegir els continguts però no podríem modificar-los
perquè no tindríem els permisos corresponents.
F igu r a 2. 4 . Apartat ’Configuració’
Per últim, un dels punts forts de tota aplicació ofimàtica web és la sincronització
de les actualitzacions en els documents treballant fora de línia. Si marquem
aquesta opció estem acceptant que les modificacions realitzades en els documents
s’actualitzin en el document emmagatzemat en el Google Drive un cop tornem
a disposar d’accés a Internet, ja sigui des d’un ordinador, un smartphone o una
Google Chrome és un tauleta. Val a dir que, tal com mostra la figura 2.5, l’edició dels documents
navegador web
desenvolupat per Google i guardats al Google Drive i la posterior sincronització s’ha de realitzar mitjançant
compilat a partir de diversos
components i el navegador Google Chrome amb la corresponent instal·lació prèvia de l’aplicació
infraestructures de
desenvolupament
que permetrà aquestes accions.
d’aplicacions de codi obert.
Figur a 2. 5. Apartat ’Fora de línia’
Per últim, hi ha la possibilitat que totes les imatges que s’incrustin en els
documents residents a Google Drive hi quedin emmagatzemades però, en aquest
cas, en una carpeta a part.
2.3 Ús de Documents de Google Drive
Un cop hem entrat a l’entorn de Google Drive, clicant en el botó vermell Nou de
la zona superior esquerra de la finestra principal, tant podem pujar un document
des del nostre ordinador o dispositiu mòbil com crear un nou document. També,
mitjançant el botó Nou tenim la possibilitat de crear una carpeta (seleccionant
Carpeta) per organitzar els documents que tinguem emmagatzemats al Drive,
pujar arxius i carpetes senceres (seleccionant Càrrega de fitxers i Càrrega de
carpetes, respectivament) i presentacions multimèdia (seleccionant Presentació).
Tal com mostra la figura 2.6, l’apartat Més ens dóna accés a altres tipus de
documents per crear com, per exemple, formularis (Formularis de Google),
dibuixos (Dibuixos de Google) o mapes (Google My Maps). Per últim, tenim
l’opció d’accedir a un ampli ventall d’aplicacions de Google que ens permeten
crear documents de formats diferents als que s’ofereixen per defecte al Google
Drive.
F igu r a 2. 6
Si bé mitjançant el botó Nou tenim l’opció de pujar documents (Càrrega de

fitxers) també podem arrossegar els arxius des de l’explorador d’arxius del nostre
ordinador fins al navegador web on tinguem obert el Google Drive (vegeu la figura
2.7).
F igu r a 2. 7
Val a dir que també tenim la possibilitat de pujar carpetes senceres de la mateixa
manera que fem amb els documents, ja sigui mitjançant l’explorador d’arxius o
arrossegant-les fins l’explorador web. Un cop pujats els documents, ja podem
començar a editar-los en línia afegint-hi continguts o modificant-ne els que ja hi
hagi. Tota modificació realitzada quedarà emmagatzemada automàticament en el
document a mesura que hi anem treballant.
2.3.1 Creació i gestió de documents de text
Estant dins del Google Drive podem pujar documents que ja tenim emmagatze-
mats en el nostre ordinador per editar-los en línia i que, alhora, hi quedin guardats,
com també podem crear-ne de nous mitjançant el botó vermell Nou. Haurem de
sol·licitar, doncs, la creació d’un document de Google (document, full de càlcul,
presentació...). El Writely era un
processador de text
individual en xarxa creat per
El processador de textos que integra Google Drive està basat en Writely, un antic la companyia de programari
Upstartle que fou llançat al
processador de textos amb una interfície gràfica molt similar a la dels diferents mercat l’any 2005. Les
seves característiques
processadors de textos que podem comprar, o bé descarregar en el cas de les originals incloïen un lloc per
l’edició col·laborativa de
aplicacions ofimàtiques lliures. La principal diferència amb els processadors de textos, a més de controls en
el seu accés.
textos instal·lables és que disposen d’una oferta d’eines major que la que pot oferir
un processador de textos en línia (vegeu figura 2.8).
F ig ur a 2. 8. Menú del processador de textos
Les seves característiques principals, seguint d’esquerra a dreta el menú, són:
1. Fitxer: permet crear nous documents, canviar-ne el nom, desar, imprimir

i mostrar com a pàgina web, així com descarregar i revisar (dues operacions,
aquestes darreres, no habituals dels processadors de text d’escriptori local), vegeu
la figura 2.9.
F igu r a 2. 9 . Menú ’Fitxer’
L’opció Baixa com a s’utilitza quan volem desar una versió del document web
en un format accessible localment. Per altra banda, quan volem compartir un
document amb algú que no té compte Google o que encara no està habituat
a treballar en format web, podem descarregar el document en el format que
aquella persona utilitza normalment i enviar-li adjunt en un correu electrònic, o
bé aprofitar que ja hi ha aquesta opció i clicar sobre Envia per correu electrònic
com a fitxer adjunt... (vegeu figura 2.10).
F igu r a 2. 1 0 . Enviament per correu electrònic com a arxiu adjunt
Els documents de Google

Drive inclouen el servei
Talkback que ajuda als
usuaris invidents tot llegint
per ells el text.
2. Edita: permet fer i desfer operacions sobre el document, retallar, copiar,
enganxar, seleccionar tot el text, cercar i reemplaçar.
3. Visualitza: permet veure el document en vista normal, amplada fixa o pantalla

completa.
4. Insereix: permet inserir imatges, equacions (hi ha un petit editor d’equacions),

dibuixos (existeix un petit editor gràfic), enllaços web, taules, comentaris i notes
al peu.
5. Format: disposa d’alguns estils predefinits com barrat, superíndex o subíndex

i diferents alineacions (dreta, esquerra, justificat...).
6. Eines: té un corrector ortogràfic i un cercador de paraules al web.
7. Taula: per inserir taules, amb les seves files i columnes.

Els complements són
extensions que afegeixen
8. Complements: permet navegar per la galeria d’extensions i clicar en aquelles funcionalitats i plantilles a
l’editor de text,
que vulguem afegir. presentacions i fulls de
càlcul.
9. Ajuda: ajuda sobre l’ús del programa.
2.3.2 Creació i gestió de fulls de càlcul
Un full de càlcul és un document electrònic que s’utilitza pel processament de

dades numèriques, que es pot utilitzar tant per escriure fórmules per realitzar
càlculs com per realitzar un seguiment de dades i automatitzar processos de càlcul.
Tal com mostra la figura 2.11, amb Google Drive es poden crear els fulls de càlcul
a més d’importar i exportar dades amb diferents formats (XLS de MS Excel, ODS
d’Openoffice Calc i formats genèrics com CSV i TXT). Per crear un full de càlcul
amb Documents de Google heu de clicar a Nou i després escollir Fulls de càlcul
de Google.
F ig ur a 2. 11. Creació i edició d’un full de càlcul
Com en el cas del processador de textos, en els fulls de càlcul de Google

també tenim accés als complements mitjançant l’apartat Complements de la barra
superior. Si hi accedim, podem navegar per la galeria d’extensions i clicar en
aquelles que vulguem afegir.
2.3.3 Creació i gestió de presentacions multimèdia
Per crear una presentació, és a dir, un conjunt de diapositives que integri imatges,
textos, música de fons, etc., heu de clicar a Nou i després escollir Presentació de
Google (vegeu la figura 2.12).
Trobareu un menú amb les següents opcions, d’esquerra a dreta:
Fi gur a 2 .1 2. Creació d’una presentació multimèdia
1. Fitxer: conté les operacions bàsiques de crear una presentació nova, obrir-ne
una de preexistent, anomenar i desar, canviar el nom i imprimir (en PDF). També
estan integrades les operacions de carregar i descarregar presentacions. És a dir,
l’exportació de presentacions la trobeu en aquesta opció del menú amb el nom
Baixa la presentació com a.
2. Edita: permet fer i desfer, retallar, copiar i enganxar i utilitzar un tema

predeterminat o escollir un fons d’un color o d’una imatge en particular.
3. Visualitza: permet visualitzar la reproducció de la presentació i definir amb

quina aproximació (més a prop o més lluny) volem veure la presentació.
4. Insereix: permet inserir dins de cada diapositiva requadres de text, imatges,

dibuixos i taules. És força interessant la utilitat per inserir vídeos. Apareix una
finestra amb un buscador de vídeos directament sobre YouTube, que s’enganxen
directament sobre la diapositiva.
5. Diapositiva: per crear una nova diapositiva dins de la presentació, duplicar

l’última, eliminar-la o afegir notes no visibles a la presentació. També dóna
la possibilitat d’ampliar o reduir el zoom de la imatge (les tecles ràpides són
Ctrl+Shift+cursor dret o cursor esquerre).
6. Format: permet definir els diferents formats tipogràfics pels quadres de text
que s’introdueixin dins de la presentació.
7. Organitza: dóna opcions per col·locar els elements de la diapositiva en diferent

ordre (a dalt, al mig, centrat, al davant, al fons...).
8. Eines: dóna accés a una cerca vinculada a Google d’elements per inserir dins
de la presentació. A més, també dóna accés a un diccionari i a la possibilitat de
crear un diccionari personalitzat.
6. Taula: permet inserir una taula, moure-la, inserir files i columnes així com
eliminar-les.
7. Ajuda: opció d’ajuda per utilitzar l’aplicació.
Per visualitzar la presentació hem de clicar el botó blau que posa Inicia la
presentació que es troba per sota del nom d’usuari, tal com mostra la figura 2.13.
Figur a 2. 13. Sol·licitud d’inici de la presentació
2.3.4 Creació i gestió de formularis
Mitjançant els formularis en línia podem realitzar fàcilment enquestes o una

selecció d’opcions de forma guiada. Un cop enviat el formulari, les respostes
es registren de forma automàtica en un full de càlcul de Google, estalviant-nos la
feina de recopilar i tenint-ho tot mastegat a més d’analitzar el resultat del que s’ha
preguntat.
Per crear un formulari heu d’anar a l’opció del menú Nou i després seleccionar
Formularis de Google. Apareix un entorn de treball com el de la figura 2.14 i la
figura 2.15.
F igur a 2 . 14 . Espai de treball per crear formularis (I)

F ig ura 2. 1 5 . Espai de treball per crear

formularis (II)
Depenent de la informació que convingui recol·lectar podeu anar afegint diferents

tipus de preguntes. Aquestes tenen:
• Un títol.
• Un text d’ajuda: és opcional, surt en un color una mica més suau, a sota del
títol de la pregunta, a mode d’explicació o anotacions sobre la pregunta.
El tipus de pregunta pot ser:
• Text: una casella amb text d’una línia per omplir.
• Paràgraf: un requadre de text per omplir una resposta llarga, de més d’una
línia.
• Múltiples respostes: apareix un botó d’opció (radio button) per cada opció
(pot ser múltiple) que especifiquem. Les opcions són incompatibles.
• Quadres de verificació: apareixen tantes caselles per marcar com opcions

escrivim. Es pot marcar més d’una opció al mateix temps (vegeu la figura
figura 2.16).
• Llista: apareix un desplegable (com l’utilitzat per escollir el tipus de

pregunta del formulari de Google Docs). Només es pot escollir una opció.
• Escala: va bé utilitzar les escales per fer tipus de preguntes la valoració de

les quals es pot graduar, per exemple en una enquesta de satisfacció (1 poc
satisfet, 5 molt satisfet) (Vegeu la figura 2.17).
• Quadrícula: semblant a les escales, però amb les preguntes agrupades en

una taula (vegeu la figura 2.18).
Fig ur a 2. 1 6 . Creació d’una pregunta tipus ’quadre de

verificació’
Fi gura 2 .17 . Creació d’una pregunta tipus ’escala’
Figur a 2. 18. Creació d’una pregunta tipus ’quadrícula’
Podem afegir altres elements dins del formulari com una capçalera de secció o un
salt de pàgina (en el cas que vulgueu fer un formulari amb més d’una pàgina, per
qüestions d’organització). Aquests dos elements els podeu afegir clicant el botó
que hi ha a dalt de la pàgina, dins del requadre blau, Afegeix un element (vegeu
la figura 2.19).
F igu r a 2. 1 9 . Afegir altres elements a un formulari
Un cop ja teniu configurats tots els elements que voleu integrar dins del formulari
heu de clicar el botó Fet i, a continuació, desar-lo, fent clic al botó Desa.
Un cop hem acabat de definir el formulari de Google, ja podem compartir-lo,

ja sigui enviant l’enllaç per correu electrònic o compartint-ne l’adreça per les
principals xarxes socials, tal com mostra la figura 2.20.
F igu r a 2. 2 0 . Enviar el formulari
També podem veure el formulari resultant mitjançant l’accés que hi ha en la barra

superior (com a la figura 2.21).
F igu r a 2. 2 1 . Accés al formulari resultant

Els formularis actius sempre acaben amb un botó Envia (com el de la figura 2.22).
F ig ur a 2. 22. Exemple de formulari actiu
Quan l’usuari ha omplert les caselles i opcions i clica el botó Envia, es crea
automàticament un full de càlcul amb el mateix nom que el formulari i cada fila
emmagatzema dades introduïdes per usuaris diferents.
Totes les respostes que s’introdueixen i són enviades a través del formulari queden
emmagatzemades en un full de càlcul de Google associat a aquest formulari. Val a
dir que, tot i que ja s’hi hagin introduït respostes, sempre podem tornar a editar-lo
o visualitzar-lo accedint a l’opció del menú Formulari, Edita el formulari o Vés
al formulari actiu (vegeu la figura 2.23).
F igu r a 2. 2 3 . Accés a un formulari a través del full de càlcul generat
2.3.5 Connectar noves aplicacions al Google Drive
Si cliquem Connectar més aplicacions tindrem accés a una àmplia gamma

d’aplicacions integrades a Google i que, quan cliquem en una d’elles, aquesta
es connectarà i apareixerà en el menú Crear de Google Drive.
Val a dir que hi ha un avantatge afegit ja que, en tractar-se d’aplicacions con-

nectades a Google, tots els arxius creats en elles quedaran emmagatzemades
directament en el nostre Drive i estaran, per tant, disponibles des de qualsevol
dispositiu i preparades per ser utilitzades.
Quan accedim a l’opció Connectar més aplicacions se’ns obrirà una finestra
(vegeu la figura 2.24) on podrem veure totes les aplicacions que podem triar i
instal·lar.
F igu r a 2. 2 4 . Administració dels permisos de compartició del document compartit
Es tracta d’aplicacions que es poden connectar a Google Drive per accedir-hi

directament. Les que apareixen amb una franja verda i un símbol de validar a
la cantonada superior esquerra són les que ja tenim instal·lades.
Ara bé, és tan gran el volum d’aplicacions que hi ha disponibles que per trobar una
aplicació que s’ajusti a les nostres necessitats disposem d’un desplegable que ens
permet buscar les aplicacions organitzades per categories (vegeu la figura 2.25).
Figur a 2. 25. Desplegable amb les aplicacions organitzades per categories
Si escollim, per exemple, la categoria Productivitat, trobarem les aplicacions que

s’han definit sota aquesta categoria. Si passem el ratolí per sobre de cadascuna
d’aquestes aplicacions, obtindrem una breu descripció de l’aplicació i podrem
connectar-la —i valorar-la en el cas que ja la tinguem connectada al nostre Google
Drive—, tal com mostra la figura 2.26.
F ig ur a 2 . 26 . Valoració i connexió de les aplicacions
Si cliquem sobre l’aplicació obtindrem una descripció més detallada sobre el seu
funcionament, els comentaris dels usuaris i tota la informació necessària. També
podem clicar per instal·lar l’aplicació. En aquest últim cas, ens apareixerà una
confirmació de la correcta instal·lació de l’aplicació.
Un cop l’aplicació estigui instal·lada, automàticament s’obrirà i quedarà accessible

des de Google Drive. A més, tal com mostra la figura 2.27, tot allò que creem
mitjançant aquesta aplicació quedarà emmagatzemat dins del nostre espai de
Google Drive.
F igu r a 2. 2 7 . Instal·lació i ús de l’aplicació
2.3.6 Treball col·laboratiu amb Google Drive
Google Docs és una suite ofimàtica en línia dins de Google Drive que ens permet
la creació i el treball col·laboratiu en l’edició d’un mateix document per part de
diferents usuaris.
Compartir un document perquè més usuaris el puguin editar (o comentar) és tan

senzill com adreçar-se a l’opció que hi ha en la zona superior dreta i introduir
els noms o els correus electrònics de les persones amb qui volem compartir el
document (vegeu la figura 2.28).
F igu r a 2. 2 8 . Menú de permisos del document compartit

Val a dir que, al costat del quadre de text on introduïm el nom o el correu electrònic
de l’usuari a qui volem convidar perquè pugui tenir accés al document, podem
definir quin grau d’accés volem donar-li al document. És a dir, podem donar-
li drets d’edició perquè pugui escriure i/o esborrar el contingut del document
compartit i introduir-hi comentaris.
En el cas que no volguéssim donar permisos d’edició a d’altres usuaris però sí que
ens interessés que puguin llegir el document i comentar-ne els continguts, podem
atorgar-los permisos per comentar, o bé, senzillament per llegir el document i prou
F ig ur a 2. 29. Gestió de permisos per compartir un document de Google Docs
Les opcions de privacitat per compartir un document són tres:
• Totalment públic: no és necessari tenir un compte de Google per accedir-hi.
• Tots els usuaris amb un enllaç: no és necessari tenir un compte Google per
accedir-hi.
• Persones concretes: és necessari que la persona amb qui comparteixes el

document tingui un compte Google per accedir-hi.
A tot això, dins del quadre per executar la compartició del document, tenim un
enllaç anomenat Opcions avançades que ens dóna accés a facilitar la compartició
i ampliar-ne les vies de compartició. En aquest cas, tant podem compartir l’enllaç
d’accés al document compartit mitjançant les principals xarxes socials com afegir
un missatge juntament amb l’enllaç d’accés al document compartit (vegeu la figura
2.30).
F igu r a 2. 3 0 . Opcions avançades per compartir el document
Per últim, un cop els usuaris ja tenen accés al document compartit, com a
propietaris del document (aquest rol és el que ens permet enviar les invitacions
per editar conjuntament el document) també podem modificar els drets d’accés al
document. És a dir, podem canviar els drets d’accés d’un usuari perquè passi de
poder editar el document a, per exemple, únicament llegir el contingut i introduir-
hi comentaris, tal com mostra la figura 2.31.
Figur a 2. 31. Administració dels permisos de compartició del document compartit

Fonaments d'(X)HTML
Raúl Broceño, Mònica Ramírez Arceda
Aplicacions Web
Aplicacions Web Fonaments d'(X)HTML
Índex
Introducció 7
1 El llenguatge de marques (X)HTML 11

1.1 Orígens de l’(X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.2 El client web i els llenguatges que hi intervenen . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.2.1 XHTML i HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.2.2 Llenguatge CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.2.3 Llenguatge JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.3 L’XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.4 La DTD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1.4.1 Les DTD de l’(X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.5 Validació . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
1.6 Diferències entre l’HTML i l’XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
1.6.1 Declaració del tipus de document . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
1.6.2 Tancament d’etiquetes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
1.6.3 Etiquetes buides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
1.6.4 Valors dels atributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
1.6.5 Atributs sense valor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
1.6.6 Sensibilitat a les majúscules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
1.7 Estructura d’un document (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
1.7.1 La declaració de l’XML i la DTD . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
1.7.2 L’element arrel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
1.7.3 La capçalera i el cos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
1.8 Evolució i estàndards actuals d’HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
1.8.1 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
1.8.2 XHTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
1.8.3 Estructura del document amb HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . 31
1.9 Organització de codificació i estructuració dels portals . . . . . . . . . . . . . . . . . . . . . 32
1.9.1 Llegibilitat i organització del codi . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
1.9.2 L’arbre de directoris als portals/apps . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
1.10 Eines d’anàlisi i desenvolupament . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
1.10.1 Eines de desenvolupament dels navegadors . . . . . . . . . . . . . . . . . . . . . . . 37
1.10.2 Instal·lació de connectors al nostre navegador . . . . . . . . . . . . . . . . . . . . . . 37
2 Etiquetes i atributs 39
2.1 Etiquetes del cos del document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.1.1 Tipus d’elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2.1.2 Atributs genèrics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.2 Etiquetes de text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
2.2.1 Paràgrafs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
2.2.2 Els encapçalaments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
2.2.3 Èmfasi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
2.2.4 Citacions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
2.2.5 Salts de línia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
2.2.6 Separadors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
2.2.7 Abreviatures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
2.2.8 Text preformatat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
2.2.9 Codi de programació . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
2.2.10 Etiquetes sense atributs semàntics . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
2.3 Etiquetes estructurals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
2.4 Enllaços . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
2.4.1 Enllaços a pàgines externes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
2.4.2 Enllaços a pàgines locals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
2.4.3 Àncores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
2.5 Imatges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
2.6 Panell de dibuix o llenç . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
2.7 Àudio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
2.8 Vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
2.9 Llistes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
2.9.1 Llistes ordenades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
2.9.2 Llistes desordenades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
2.9.3 Llistes de definició . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
2.9.4 Enniuament de llistes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
2.10 Taules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
2.10.1 Expansió de files i columnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
2.11 Formularis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
2.11.1 Propietats d’un formulari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
2.11.2 Associació de text i controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
2.11.3 Atributs comuns dels controls d’un formulari . . . . . . . . . . . . . . . . . . . . . . 76
2.11.4 Camps de text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
2.11.5 Camps de contrasenya . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
2.11.6 Camp de correu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
2.11.7 Camp d’URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
2.11.8 Camp numèric . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
2.11.9 Camp de rang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
2.11.10 Camps de data o horaris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
2.11.11 Camps de colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
2.11.12 Camp de cerca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
2.11.13 Botons d’opció . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
2.11.14 Caselles de verificació . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
2.11.15 Llistes de selecció . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
2.11.16 Llista de dades: <datalist> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
2.11.17 Generador de claus: <keygen> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
2.11.18 Sortida de resultats: <output> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
2.11.19 Àrees de text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
2.11.20 Botons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
2.11.21 Controls ocults . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
2.12 Marcs flotans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
2.13 Mapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
2.13.1 Mapes gestionats des del client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

2.13.2 Mapes gestionats des del servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
2.14 Objectes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
2.14.1 Tipus MIME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
2.14.2 Connectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
2.14.3 Exemples d’incorporació d’objectes genèrics en una pàgina web . . . . . . . . . . . . 98
3 Editors i gestors d’(X)HTML 101

3.1 Edició i gestió de documents (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
3.1.1 Exemple de gestor d’(X)HTML: Brackets . . . . . . . . . . . . . . . . . . . . . . . . 102
3.2 Funcions principals dels gestors d’(X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . 103
3.2.1 Creació de documents nous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
3.2.2 Afegir extensions a l’editor/gestor Brackets . . . . . . . . . . . . . . . . . . . . . . . 104
3.2.3 Plantilles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
3.2.4 Sintaxi acolorida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
3.2.5 Validació i verificació del codi (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . 110
3.2.6 Accessos ràpids al codi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
3.2.7 Sagnat del codi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
3.2.8 Autocompleció de codi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
3.2.9 Fragments de codi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
3.2.10 Projectes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
3.2.11 Visualització del lloc web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
3.2.12 Treballar amb l’editor d’imatges Adobe Photoshop . . . . . . . . . . . . . . . . . . . 122
3.2.13 Edició ràpida (Quick Edit) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
3.2.14 Altres extensions molt útils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Aplicacions Web 7 Fonaments d'(X)HTML
Introducció
El concepte d’aplicació web ha anat evolucionant molt des dels seus orígens, i
podríem dir que actualment ens trobem en un punt clau d’aquesta evolució. Això
ens porta a fer una diferenciació; fins no fa gaire les aplicacions web es definien
com aquelles aplicacions informàtiques que usualment estan instal·lades en un
servidor web i hi accedim mitjançant un navegador. Aquesta característica feia
que aquestes aplicacions es poguessin consultar des de qualsevol ordinador o
dispositiu amb accés a la xarxa connectant-se al servidor, sense haver d’instal·lar
cap mes programari que un navegador. Igualment son aplicacions adients per
fer servir des de qualsevol sistema operatiu que tingués instal·lat un navegador.
Posteriorment, a causa de la popularització en l’ús d’Internet, la tecnologia i
tècniques han evolucionat forçades per aquest èxit, fins a arribar un punt que
la versatilitat, flexibilitat i recursos disponibles han fet que en molts casos la
comunicació amb el servidor fos puntual i que aquestes aplicacions funcionessin
amb independència, i exclusivament al client o navegador.
El que sí que és cert és que tant si són purament aplicacions web orientades a
comunicar-se amb un servidor com si són aplicacions més orientades al client,
l’ús del navegador (o intèrpret dels llenguatges implicats) és essencial, així com
el coneixement dels llenguatges implicats.
El nostre objectiu en aquesta unitat, és conèixer principalment els navegadors

i la seva capacitat per a interpretar la informació que aporten aquest tipus
d’aplicacions: (X)HTML i CSS principalment i saber que també hi ha altres
llenguatges que poden intervenir, com ara JavaScript.
Quan es planteja la implantació d’una aplicació web es disposa de diverses

opcions, però sovint ens plantejarem agafar una aplicació web de programari lliure
i adaptar-la a les nostres necessitats o bé crear una aplicació des de zero.
Sigui com sigui, tant si creem una aplicació nova com si n’adaptem una feta, és
molt important tenir coneixements de les tecnologies bàsiques amb què estan fetes
les aplicacions web. En aquesta unitat, anomenada Fonaments d’(X)HTML, ens
centrarem en la tecnologia més bàsica: el llenguatge de marques (X)HTML, i
dividirem el seu estudi en tres apartats:
• L’apartat “El llenguatge de marques (X)HTML” pretén iniciar l’alumne en

el llenguatge de marques bàsic que sap interpretar qualsevol navegador,
l’(X)HTML. Es dóna una perspectiva històrica dels llenguatges de marques
més coneguts i de les seves nocions bàsiques. Aquests llenguatges són
els que ha d’utilitzar el dissenyador de la pàgina web per estructurar la
informació que finalment es visualitza en el navegador. Es fa una anàlisi
profunda d’aquesta família de llenguatges i s’especifica com és l’estructura
bàsica d’un document (X)HTML.
• En l’apartat “Etiquetes i atributs” es descriuen les múltiples etiquetes i

atributs de què disposa la família de llenguatges (X)HTML. Els llenguatges
(X)HTML permeten inserir etiquetes que els navegadors saben interpretar.
Es veurà com s’estructuren els documents a partir d’aquestes etiquetes,
marcant cadascuna de les seves seccions. També es veurà com es fan
enllaços a altres documents (X)HTML, com s’insereixen imatges, mapes
i d’altres objectes, com es creen llistes i taules, quines etiquetes tenim per
inserir vídeo i àudio i com es poden crear formularis versàtils per interactuar
amb l’usuari.
• En l’apartat “Editors i gestors d’(X)HTML” s’analitzen les característiques

principals que ens ofereixen els editors i gestors d’(X)HTML per tal de
desenvolupar aplicacions web d’una manera més ràpida i productiva.
Per treballar els continguts de la unitat, heu de llegir amb deteniment el material
proporcionat i realitzar els exercicis i les activitats del material web. A més, en els
annexos del material web podeu trobar el codi dels exemples. És molt convenient
estudiar amb detall aquests exemples observant el codi i el resultat que genera en
un navegador. Els annexos també contenen altra documentació que us pot ajudar
a aprofundir els coneixements de la unitat.
En finalitzar aquesta unitat l’alumne/a:
1. Construeix un document HTML emprant una sintaxi i estructura correctes i fent

que el codi sigui llegible i entenedor amb l’ajut de comentaris i tabulacions dels
blocs de codi corresponents.
• Estructura correctament i identifica cada part d’un document HTML.
• Fa un ús adequat dels comentaris per aclarir parts del codi.
• Tabula correctament els blocs de manera que el codi sigui entenedor.
• Realitza les feines en el temps proposat i amb la metodologia establerta.
2. Utilitza les etiquetes amb els seus atributs seguint la sintaxi correcta definida
per l’estàndard.
• Identifica i usa els atributs propis de cada etiqueta.
• Utilitza el valors adients i entenedors per a cada atribut de les etiquetes.
• Combina les etiquetes de manera adequada seguint l’ordre establert.
• Fa un ús parametritzat de les etiquetes per donar vistositat al document

HTML.
3. Implementa un lloc web a partir de diversos documents HTML.
• Identifica els diferents documents i objectes del lloc web seguint les normes
establertes.
• Estructura correctament l’organització d’arxius dins el lloc.
• Utilitza adequadament els enllaços relatius i absoluts als documents o

objectes del lloc web.
4. Coneix i domina eines software per a desenvolupar documents HTML.
• Utilitza amb habilitat editors HTML.
• Utilitza amb habilitat gestors i entorns de programació HTML avançats.

1. El llenguatge de marques (X)HTML
Les pàgines web contenen informació de tipus divers com ara imatges, vídeo,
àudio o text, distribuïda i estructurada d’una manera molt concreta, i disponible
per ser visualitzada en diferents dispositius com ara tauletes, ordinadors de sobre-
taula, smartphones... Aquesta informació la reben els navegadors, normalment
procedent del servidor, en format text. Aquest text no solament incorpora els
continguts sinó que inclou també marques que indiquen com presentar o distribuir
aquesta informació dins les finestres del navegador. Per aquest motiu fem servir
els anomenats llenguatges de marques per a la web.
Ja que es requereix que qualsevol navegador pugui interpretar la informació d’una

pàgina web escrita amb aquests llenguatges, va ser necessari estandarditzar-los.
Per aquest motiu al món informàtic tenim llenguatges com ara HTML, XHTML,
SGML o XML que són els estàndards més emprats per les aplicacions web, i que
ens permeten codificar un document on el text està acompanyat d’etiquetes que
contenen informació addicional.
Aquestes marques (etiquetes) ens ajuden principalment en dues coses: estructurar

el document web i marcar part de la presentació vers l’usuari final; però hem de
ser molt conscients que tot el que suposa l’estètica final del document és delegat
a un altre llenguatge anomenat CSS (Cascade Style Sheet).
Els documents o pàgines web estan formats per l’estructura realitzada amb
(X)HTML + presentació o estètica realitzada amb CSS, i molt relacionats
entre ells.
El llenguatge de marques més usat en el món web és el llenguatge HTML

(HyperText Markup Language) o, per ser més estrictes, la família de llenguatges
(X)HTML.
1.1 Orígens de l’(X)HTML
L’any 1993, el físic Tim Berners-Lee, treballador del CERN (European Organiza-
tion for Nuclear Research), va descriure el llenguatge HTML. El primer esborrany
no va prosperar i, un temps més tard, Dave Raggett en va proposar un altre, el de
l’HTML+, que tampoc no va prosperar com a estàndard.
Un estàndard web és una especificació normativa referent a aspectes del

World Wide Web. Diversos organismes com el W3C (World Wide Web
Consortium) o l’IETF (Internet Engineering Task Force) s’encarreguen de
decidir aquests estàndards.
IETF
La missió de l’IETF és fer que El 1995, l’IETF va crear un grup de treball per elaborar l’estàndard HTML i va
Internet funcioni millor. L’IETF
produeix documents tècnics sorgir l’HTML 2.0, que incloïa idees dels esborranys elaborats per Berners-Lee i
d’alta qualitat que pretenen
influenciar la manera com la gent Raggett.
dissenya, usa i gestiona Internet.
Però a partir del 1996, l’IETF tancà el seu grup de treball i el desenvolupament
de l’estàndard HTML va ser adoptat pel W3C. La versió que més temps s’ha
mantingut ha estat l’HTML 4.X, i encara podem trobar que gran part de les pàgines
creades la fan servir, tot i que la darrera versió acceptada és l’actual HTML5, que
com ja veurem aporta moltes millores.
El W3C és l’organització
S’ha de tenir en compte que l’HTML es va crear com un llenguatge SGML.
internacional que desenvolupa i
promociona els estàndards web.
L’SGML (Standard Generalized Markup Language) és un conjunt de

normes que estableixen la sintaxi d’un document i alhora un metallenguatge.
Es basa en un sistema d’etiquetes que ens permet l’organització de la
informació del document.
Quan parlem de
metallenguatge, de forma
genèrica, ens referim a un
seguit de normes de sintaxi.
Paral·lelament, a partir de la versió HTML 4.01, es va generar un altre llenguatge,
Al cas que ens ocupa
(SGML) ens concentrem
l’XHTML (eXtensible Hypertext Markup Language). L’XHTML és un llenguatge
principalment en la de marques molt semblant a l’HTML, però en lloc de seguir les regles sintàctiques
flexibilitat que aquest ens
aporta, però no definim un de l’SGML, segueix les d’un altre llenguatge de marques, l’XML (eXtensible
número concret d’etiquetes:
en podem crear de noves. Markup Language), tal com podem veure a la figura 1.1.
Figu r a 1 .1 . Orígens dels llenguatges de marques (X)HTML

En la taula 1.1 podem veure l’evolució històrica tant de l’HTML com de

l’XHTML.
Taul a 1. 1. Versions de l’HTML i l’XHTML
Versió Any
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
Trobareu enllaços amb
més informació sobre la
història i orígens de
L’estàndard actual, que ja trobem en fase de recomanació, és l’HTML5. Aquest l’(X)HTML a la secció
“Adreces d’interès” del
ha substituït l’HTML 4.01 i l’XHTML 1.0, tot i que trobarem moltes aplicacions material web d’aquesta
unitat.
web i portals que encara en fan ús. Val a dir que aquesta darrera versió d’HTML
(HTML5) ja no deriva directament d’SGML.
Recomanacions i esborranys de treball de la W3C
Quan la W3C confecciona un estàndard, aquest passa pels diferents estats que s’enumeren
a continuació:
1. Working Draft (WD) (Esborrany de treball)
2. Candidate Recommendation (CR) (Recomanació candidata)
3. Proposed Recommendation (PR) (Proposta de recomanació)
4. W3C Recommendation (REC) (Recomanació)
Per tant, quan una versió d’un estàndard es considera aprovada s’anomena Recomanació
(recommendation). En canvi, quan s’hi comença a treballar amb l’objectiu de desenvolupar
l’estàndard, s’anomena esborrany de treball (working draft), i pot partir molts canvis.
Actualment, l’HTML5 és una recomanació.
1.2 El client web i els llenguatges que hi intervenen
La base fonamental d’aquesta unitat és l’estudi dels llenguatges de marques que

són interpretades pels clients o navegadors web.
Hem de tenir present que la seva funció és principalment etiquetar elements per
crear estructures, deixant l’estètica per un altre llenguatge com és el CSS, i part de
la interacció i el dinamisme per al Javascript. Així doncs, si mirem la codificació
d’una determinada pàgina web, hi trobarem principalment tres llenguatges:
• (X)HTML i/o HTML5
• CSS
• JavaScript
1.2.1 XHTML i HTML
El llenguatge de marques HTML (Hyper Text Markup Language) és el

llenguatge de marques predominant de les aplicacions web actuals. Permet
descriure tant l’estructura com part de la presentació dels documents que
conformen les aplicacions web, tot i que és molt recomanable que aquesta
part estètica sigui exclusiva de CSS.
El llenguatge HTML ens permet marcar la nostra informació de manera que po-
dem incorporar-hi encapçalaments, paràgrafs, llistes, enllaços, taules, formularis,
imatges, articles, peus de pàgina, àrees de navegació, etc. Però hem de rebutjar
determinar el seu aspecte, tot i que el propi llenguatge ho permeti en alguns
elements.
Per exemple, si volem que el text Fauna i flora a la Garrotxa sigui un

encapçalament, usarem l’XHTML per fer-ho. Però dir que aquest text és
un encapçalament no vol dir, per exemple, que el text Fauna i flora de la
Garrotxa hagi d’aparèixer en negreta i mida de lletra 20 (això seria la seva
aparença i per definir-la usarem CSS, Cascade Style Sheets).
DTDs i sabors
La DTD és una referència que Fins la versió d’HTML 4.01 i la XHTML 1.0 quan parlàvem de la família de
incloem a la part superior dels
documents web anteriors a llenguatges (X)HTML, ens referíem a dues famílies de llenguatges: la família
HTML5, que defineix els
elements, atributs i entitats XHTML i la família HTML, que es distingeixen per complir les normes de sintaxi
permesos en el document.
SGML o les normes de sintaxi XML, respectivament. Cadascuna d’aquestes dues
Els sabors o flavours, el que fan
és establir una relació del
grans famílies tenen diversos sabors o flavours, definits cadascun d’ells per la
document web amb la DTD que
hem inclòs a la part superior, ja
seva DTD (Document Type Definition): strict, transitional o frameset. Aquest
que pot tenir diferents finalitats. panorama va canviar en aparèixer l’HTML5, que no deriva del metallenguatge
SGML i per aquest motiu no li cal una definició pròpia de DTD. Si ens centrem en
les versions HTML 4.01, XHTML 1.0 i HTML5, les dues primeres tenen diferents
sabors fins a l’arribada de l’HTML5 (figura 1.2).
Fi gura 1 .2. Famílies de llenguatges HTML, XHTML i HTML5
La diferència entre els tres sabors esmentats és que cadascun admet diferents
etiquetes, alhora que poden suggerir l’orientació del tipus de document al qual
han sigut inserits:
• Transitional: permet l’ús d’algunes etiquetes que serveixen per a la pre-

sentació (estètica) del document. Això és un inconvenient ja que barreja
l’estructura del document amb la seva presentació.
• Strict: no permet usar gairebé cap marca o atribut que faci referència a
l’estètica del web, de manera que podem separar la semàntica del contingut
de l’estètica final de l’aplicació web.
• Frameset: ens serveix si estem fent la web amb marcs.
Per tant, si observem aplicacions basades en el sabor strict hem de pensar que
probablement van ser fetes per obligar a separar l’estructura de la presentació. Ara
bé, trobarem moltes webs antigues que usen el sabor transitional, ja que aquest
compta amb moltes etiquetes que no són acceptades en el sabor strict.
Actualment, si fem servir HTML5, no cal fer ús d’aquests sabors ja que la

recomanació HTML5 s’ha simplificat molt en aquest aspecte, deixant lliure al
llenguatge HTML5 de les restriccions dels DTD’s.
1.2.2 Llenguatge CSS
El CSS (Cascading Style Sheets) és una tecnologia que permet descriure

l’aspecte que tindrà un document quan es mostri per pantalla o quan
s’imprimeixi, o fins i tot, com s’organitzarà perquè sigui sintetitzat en cas
que s’executi mitjançant programes de lectura de pantalla o screen readers
per qüestions d’accessibilitat, per usuaris amb una discapacitat visual o per
entorns on sigui necessaris aquestes tècniques, entre d’altres.
El CSS s’utilitza per donar estil a documents (X)HTML i així poder separar el
contingut de la presentació.
Exemple d’aplicació de CSS
Si en un document (X)HTML hem definit que un text és un encapçalament, en el document

CSS associat podem definir que el tipus de lletra dels encapçalaments sigui la Verdana
i que la seva mida sigui de 20 píxels, que es visualitzin en negreta i que siguin de color
vermell.
Si en el document (X)HTML hem definit que un text és un paràgraf, en el document CSS

associat podem definir que els paràgrafs tindran fons gris i una vora.
1.2.3 Llenguatge JavaScript

JavaScript és el llenguatge
més popular de
programació per a
navegadors o clients web,
però actualment també
trobarem desenvolupaments Dins del món de programació web, JavaScript és un llenguatge de
web de la part de servidor
en JavaScript. programació interpretat pels navegadors i molt versàtil que ens permet crear
scripts, és a dir, programes estructurats ja que disposa d’estructures de dades,
operadors, funcions, bucles, condicionals i objectes, alhora que pot manejar
esdeveniments i interactuar amb el document.
Aquest llenguatge de programació ens aporta funcionalitats que ni HTML ni CSS

poden donar per sí mateixes, i ens permet que una vegada carregada la plana en
el navegador, aquesta pugui ser modificada tant en estructura com estèticament,
alhora que ens aporta recursos de personalització.
Exemple d’aplicació JavaScript
Imagineu un formulari de registre d’usuaris per un portal on figuren dos camps, un per
posar clau d’usuari i un altre per repetir-la. Si volem verificar que aquesta clau sigui la
mateixa abans de ser enviada amb el botó d’enviament de formulari, ho podem fer amb l’ús
d’aquest llenguatge. Fins i tot podríem mostrar dinàmicament un missatge d’advertiment o
modificar el color de fons d’aquest camp del formulari en cas d’error, per exemple en color
vermell.
1.3 L’XML
L’XML (Extensible Markup Language) és un metallenguatge de marques

que ens serveix per estructurar la informació semànticament, sense tenir en
compte la seva aparença final.
L’XML no ens defineix quines etiquetes podem usar (podem crear-ne de noves),
sinó com s’han d’usar. És a dir, ens diu quina sintaxi hem de fer servir, siguin
quines siguin les etiquetes que usem.
Per exemple, si fem un símil amb les llengües usades normalment, podríem definir
el metallenguatge de les llengües romàniques com un conjunt de normes com ara:
• Hem d’escriure d’esquerra a dreta.
• Les frases han de tenir subjecte i predicat.
• Podem usar certs signes de puntuació.
No direm, però, quines són les paraules que podem usar, ja que això ho definirien
cadascuna de les llengües.
L’objectiu de l’XML és estructurar informació d’una manera organitzada i que

sigui fàcilment llegible per una màquina. Per tal de fer això, es basa en un sistema
d’etiquetes i atributs.
Vegem com s’estructura la informació amb l’XML a partir d’un exemple:

imagineu-vos que tenim la següent recepta per fer una truita a la francesa:
1 Truita a la francesa
2 2 ous, oli i sal
3 Batre els ous, escalfar l’oli en una paella, tirar els ous batuts a la paella i
embolicar la truita.
Una possible estructuració d’aquesta recepta és la següent:
1 <?xml version="1.0" encoding="utf−8"?>

2 <recepta>
3 <!−− Una recepta casolana −−>
4 <titol>
5 Truita a la francesa
6 </titol>
7 <imatge ubicacio="img/truita.png" />
8 <ingredients>
9 <ingredient quant="2">
10 <nom>Ous</nom>
11 </ingredient>
12 <ingredient>
13 <nom>Oli</nom>
14 </ingredient>
15 <ingredient>
16 <nom>Sal</nom>
17 </ingredient>
18 </ingredients>
19 <preparacio>
20 Batre els ous, escalfar l'oli en
21 una paella, tirar els ous batuts a la
22 paella i embolicar la truita.
23 </preparacio>
24 </recepta>
La primera línia ens indica que és un document XML versió 1.0 i que usa la
codificació de caràcters UTF-8.
Hem inventat el nom de les etiquetes (<recepta>, <titol>, <imatge>,

<ingredients>, <ingredient> i <preparacio>) i dos atributs (ubicacio i
quant), però estem seguint un conjunt de regles que fan que es compleixi la sintaxi
de l’XML. Fixeu-vos que aquestes etiquetes ens servirien per marcar qualsevol
Per veure la sintaxi de altra recepta.
l’XML completa podeu
consultar l’annex “Sintaxi
XML” del web d’aquesta Un cop vist aquest exemple, podem dir que un document XML està format per
unitat.
nodes. Aquests nodes poden ser de diversos tipus. A la següent llista es descriuen
alguns dels tipus de nodes més importants:
• Elements: són les etiquetes que ens permeten classificar la informació. La

seva sintaxi és:
1 <element></element>
En cas que l’element no tingui contingut intern, la sintaxi serà:
1 <element />
• Atributs: serveixen per proporcionar informació addicional a un element.

Els atributs sempre tenen associat un valor. La seva sintaxi és la següent:
1 <element atribut="valor"></element>
En cas que l’element no tingui contingut intern, la sintaxi serà:
1 <element atribut="valor" />
• Nodes de text: són els fragments de text del document, la informació que
volem estructurar. La seva sintaxi és:
1 <element>text</element>
• Entitats predefinides: serveixen per representar caràcters especials. La

sintaxi és:
1 &entitat;
• Comentaris: serveixen per introduir comentaris per al programador; es

tracta d’informació que no serà mostrada ni processada. La seva sintaxi
és:
1 <!−− comentari −−>
En l’exemple anterior veiem el document XML amb la informació estructurada

de com fer una truita a la francesa. A la figura 1.3 veiem una representació del
mateix document, indicant els nodes, elements i atributs que té.
Figur a 1. 3. Document XML en què es mostren els diferents tipus de nodes
Els nodes d’un document XML estan relacionats entre si. Podem establir els
diferents tipus de relacions com ara:
• Element arrel: és el node que engloba tots els altres. En l’exemple de la

figura 1.3 l’element arrel és <recepta>.
• Pares i fills: un node és fill d’un altre quan està dins seu en un primer
nivell. En l’exemple de la figura 1.3 l’element <nom> és fill de l’element
<ingredient> i, per tant, l’element <ingredient> és el pare de l’element
<nom>.
• Germans: dos nodes són germans quan tenen el mateix pare. En l’exemple
de la figura 1.3 els elements <titol>, <imatge>, <ingredients> i

<preparacio> són germans ja que l’element <recepta> és el seu pare.
Finalment, els documents XML han de complir les normes de sintaxi següents:
• Els elements s’han de tancar (o amb l’etiqueta de tancament

<etiqueta></etiqueta>, o fent que l’etiqueta es tanqui en ella mateixa
<etiqueta />):
– És correcte: <titol>Truita a la francesa</titol>

– És incorrecte: <titol>Truita a la francesa
• Els elements han d’estar correctament enniuats:
– És correcte: <ingredient><nom>Oli</nom></ingredient>
– És incorrecte: <ingredient><nom>Oli</ingredient></nom>
• Tots els documents tenen un element arrel:
– És correcte:

2 <recepta>
3 ...
4 </recepta>
• És incorrecte:

2 <recepta>
3 ...
4 </recepta>
5 <observacions>
6 ...
7 </observacions>
• Tots els atributs han d’anar entre cometes:
– És correcte: <nom quant=“2”>Ou</nom>

– És incorrecte: <nom quant=2>Ou</nom>
Diem que un document està ben format si respecta totes les regles de sintaxi
de l’XML.
1.4 La DTD
Mentre que l’XML ens defineix la sintaxi d’un document, la DTD (Document Type
Definition) ens defineix quins són els elements i atributs permesos en el document,
l’ordre en què poden disposar-se aquests elements i quins nodes poden anar dins
de quins altres. XML Schema
Tot i que l’ús de les DTD està
molt estès, hi ha una altra manera
de definir els nodes permesos i
La DTD defineix els elements, atributs i entitats permesos en el document i, les seves característiques.
Aquesta alternativa és l’XML
a més, indica com podem combinar aquests nodes. Schema, que ens proporciona
més opcions i més flexibilitat.
Si ho comparem amb les llengües parlades, en el cas de les llengües romàniques,

l’XML ens definiria que hem d’escriure d’esquerra a dreta, entre d’altres. La
DTD, en canvi, ens definiria quines paraules podem usar, és a dir, ens definiria el
vocabulari.
La DTD és un fitxer, amb extensió .dtd, que ens descriu tot el vocabulari de les
etiquetes, els atributs i el seu ordre. No són objecte d’estudi en aquest bloc totes
les possibilitats que la DTD ens permet, però sí preguntar-nos com podem dir a
un document XML o (X)HTML quina DTD ha d’usar. Ens podem trobar diversos
casos, tal com es mostra a continuació.
Per enllaçar el document XML amb la DTD que vulgui adoptar es poden usar les
següents formes:
• Definir la DTD en el mateix document XML. La sintaxi seria la següent:
1 <!DOCTYPE element−arrel [declaracions]>
Per exemple:
1 <!DOCTYPE recepta [
2 <!ELEMENT recepta (titol,plat,ingredients,preparacio)>
3 ...
4 <!ELEMENT preparacio (#PCDATA)>
5 ]>
6 <recepta>
7 ...
8 </recepta>
• Definir la DTD en un fitxer extern. La sintaxi seria la següent:
1 <!DOCTYPE element−arrel SYSTEM "path/nomFitxer.dtd">
Per exemple:
1 <!DOCTYPE recepta SYSTEM "dtds/recepta.dtd">

2 <recepta>
3 ...
4 </recepta>
• Definir la DTD en un fitxer extern públic. La sintaxi seria la següent:
1 <!DOCTYPE element−arrel PUBLIC "identificador" "url">
Per exemple:
1 <!DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11

/DTD/xhtml11.dtd">
2 <html>
3 ...
4 </html>
Per tant, en l’exemple anterior, si volguéssim usar una DTD que està descrita en
un fitxer de nom recepta.dtd, hauríem d’incloure una línia amb la definició de
la DTD, després de la declaració de la versió XML i codificació del document:

2 <!DOCTYPE recepta SYSTEM "recepta.dtd">
3 <recepta>
4 ...
5 </recepta>
Diem que un document valida si està ben format i respecta totes les regles
que especifica la DTD que té associada.
1.4.1 Les DTD de l’(X)HTML

Podeu trobar el llistat de
totes les DTD per a tots
els sabors d’(X)HTML a la La família de llenguatges (X)HTML té diversos “sabors” com hem vist amb
secció “Adreces d’interès”
del web d’aquesta unitat. anterioritat, a excepció d’HTML5 que no li cal una definició de DTD associada. Si
ens centrem en aquestes versions anteriors a HTML5 disposem d’aquest sabors en
una DTD pública que ens ofereix la W3C, mitjançant un enllaç. Enumerem-les:
• HTML 4.01 - Strict
1 <!DOCTYPE html PUBLIC "−//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/

strict.dtd">
• HTML 4.01 - Transitional
1 <!DOCTYPE html PUBLIC "−//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.

org/TR/html4/loose.dtd">
• HTML 4.01 - Frameset
1 <!DOCTYPE html PUBLIC "−//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/

TR/html4/frameset.dtd">
• XHTML 1.0 - Strict
1 <!DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/

xhtml1/DTD/xhtml1−strict.dtd">
• XHTML 1.0 - Transitional
1 <!DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

org/TR/xhtml1/DTD/xhtml1−transitional.dtd">
• XHTML 1.0 - Frameset
1 <!DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/

TR/xhtml1/DTD/xhtml1−frameset.dtd">
• XHTML 1.1
1 <!DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11

/DTD/xhtml11.dtd">
• XHTML Basic 1.0
1 <!DOCTYPE html PUBLIC "−//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/

xhtml−basic/xhtml−basic10.dtd">
• XHTML Basic 1.1
1 <!DOCTYPE html PUBLIC "−//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/

xhtml−basic/xhtml−basic11.dtd">
Pel que fa a l’estàndard HTML5, no disposa d’enllaç a cap DTD perquè no en fa

servir cap. Sí que disposa de DOCTYPE que indica de quin tipus de document es
tracta. </newcontent> DTD i afectació als
elements
Les diferents DTD, sabors i
1 <!DOCTYPE html> elements que afecten: http:
//www.w3schools.
com/tags/ref_html_
Si posem un exemple mes complert, per escriure un document XHTML 1.0 Strict, dtd.asp
les dues primeres línies del document serien:

2 <! DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/
TR/xhtml1/
3 DTD/xhtml1−strict.dtd " >
1.5 Validació
Quan escrivim un document amb llenguatge (X)HTML, deixant de banda

l’HTML5, ens hem d’assegurar que complim la sintaxi SGML o XML (segons
Quan una web valida, s’acostuma a
posar un logotip per informar que si el nostre document és HTML 4.1 o XHTML 1.1 o anteriors, respectivament) i
compleix els estàndards
que respectem la DTD que haguem escollit.
Per poder-ho fer, el W3C ens ofereix un servei de validació de pàgines, on se’ns
diu si la nostra pàgina compleix amb la DTD escollida i si no és així, quins errors
Podeu aprendre més de hem comès.
les eines de validació a
l’Annex “Validació de
documents (X)HTML” del Hem d’anar amb cura en el cas de l’HTML5 ja que no valida amb cap DTD i
material web d’aquesta
unitat. per aquest motiu la W3C especifica que la validació que disposa al seu web és
experimental. Això és perquè la gramàtica que es podia definir amb la DTD
no tenia prou flexibilitat i es va optar per desenvolupar l’HTML5 sense aquestes
restriccions. Hi ha altres gramàtiques a part de la DTD, que ens permeten major
flexibilitat si volem desenvolupar un validador amb una gramàtica concreta, com
és l’XML Schema, també coneguda com a XSD (XML Schema Definition).
1.6 Diferències entre l’HTML i l’XHTML
El llenguatge de marques HTML 4.0 i anteriors estan basats en el metallenguatge

SGML, mentre que l’XHTML 1.1 i anteriors estan basats en el metallenguatge
XML. Com que ens trobem en un moment de canvi, i moltes webs estan pendents
d’actualitzar a la darrera versió d’HTML5, en aquest apartat ens centrarem en
veure quines eren les diferències entre HTML 4.0 i XHTML, ja que no hi ha un
equivalent per HTML5 en XHTML.
Vegem quines són les diferències bàsiques:
• Declaració del tipus de document
• Tancament d’etiquetes
• Etiquetes buides
• Valors dels atributs
• Atributs sense valor
• Sensibilitat a les majúscules

1.6.1 Declaració del tipus de document
En els documents XHTML ha de constar la versió d’XML que estiguem usant, en

els documents HTML no s’ha de posar.
Així doncs, en l’XHTML indicarem la versió d’XML usada, seguida de la DTD.

Per exemple, un document XHTML 1.0 Strict començaria amb les següents dues
línies:

2 <!DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR
/xhtml1/DTD/xhtml1−strict.dtd " >
3 ...
En l’HTML no indicarem la versió d’XML, ja que no és un document d’XML. Per

exemple, un document HTML 4.01 Strict començaria amb la següent línia:

strict.dtd">
2 ...
1.6.2 Tancament d’etiquetes
Si usem l’XHTML, hem de tancar totes les etiquetes que obrim. En canvi, en
l’HTML no és obligatori.
En l’XHTML, quan volem escriure un paràgraf fem:
1 <p>Això és un paràgraf</p>
En canvi, en l’HTML podríem no tancar l’etiqueta:
1 <p>Això és un paràgraf
1.6.3 Etiquetes buides
En l’XHTML les etiquetes buides s’han de tancar “en elles mateixes”. En canvi,
en l’HTML no cal tancar-les.
Per exemple, l’etiqueta <meta> d’un document indica la codificació de caràcters

del document i no té contingut. Si usem l’XHTML, hauríem de tancar l’etiqueta
“en ella mateixa”:
1 <meta http−equiv="Content−Type" content="text/html; charset=utf−8" />

En canvi, en l’HTML no cal que tanquem l’etiqueta (és a dir, no cal posar la /
final):
1 <meta http−equiv="Content−Type" content="text/html; charset=utf−8">
1.6.4 Valors dels atributs
En l’XHTML els valors dels atributs han d’anar sempre entre cometes, en canvi
en el cas de l’HTML no cal (excepte quan el valor de l’atribut conté espais en
blanc):
Per exemple, en l’XHTML el valor de l’atribut alt sempre ha d’anar entre

cometes:
1 <img src="img/laimatge.png" alt="Logotip" />
En canvi, amb l’HTML podem ometre les cometes:
1 <img src="img/laimatge.png" alt=Logotip>
1.6.5 Atributs sense valor
En l’XHTML els atributs sempre han de tenir un valor, i cal usar la sintaxi
atribut=“valor”. En canvi, en l’HTML hi ha atributs que no tenen valor.
Així, per indicar com a marcada una casella de verificació, en l’XHTML es faria
el següent:
1 <input type="checkbox" checked="checked" />
En canvi, en l’HTML aquest atribut no té valor i s’escriu de la següent manera:
1 <input type="checkbox" checked />
1.6.6 Sensibilitat a les majúscules
L’XHTML és sensible a les majúscules. Això vol dir, per exemple, que el caràcter
‘H’ és diferent del caràcter ‘h’. En canvi, l’HTML no és sensible a les majúscules.
Per això, si es vol escriure un encapçalament en XHTML, s’usa l’etiqueta <h1> i

sempre s’ha d’escriure en minúscules:
1 <h1>Títol principal</h1>
En canvi, en l’HTML, com que no distingeix majúscules de minúscules, es pot

emprar l’etiqueta <H1>:
1 <H1>Títol principal</H1>
L’HTML i l’XHTML són prou similars. La gran diferència és que l’XHTML és

més estricte amb les seves regles sintàctiques, però alhora té l’avantatge que és un
llenguatge més homogeni i els ordinadors són capaços d’analitzar-lo millor.
1.7 Estructura d’un document (X)HTML
Qualsevol pàgina (X)HTML té una estructura bàsica. En el cas de versions

anteriors a l’HTML5, el primer que hem de fer és escollir quin sabor de la família
(X)HTML volem fer servir. Aquesta elecció ens limita els elements, els atributs
i la sintaxi que hem d’usar en la confecció de la web, tot i que les etiquetes més
usades són comunes a tots els sabors de la família.
En l’exemple que mostrem a continuació s’ha escollit la DTD (X)HTML 1.0 Strict.
La plantilla base que ha de tenir qualsevol document XHTML amb aquesta DTD
és la següent:
1 <?xml version="1.0" encoding="utf−8"?

2 <!DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1−strict.dtd" >
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
4 <head>
6 <title>Títol de la web</title>
7 </head>
8 <body >
9 <!−− Aquí hi va el contingut de la web −−>
10 </body>
11 </html>
Si, en canvi, no volguéssim usar la sintaxi XML i utilitzéssim una DTD de la

família HTML, per exemple la HTML 4.01 Strict, l’estructura del document seria
la següent:

strict.dtd">
2 <html>
3 <head>
4 <meta http−equiv="Content−Type" content="text/html; charset=utf −8">
6 </head>
7 <body>
9 </body>
10 </html>
Tant si és un document HTML com si és XHTML, el fitxer on escrivim el codi

s’acostuma a desar amb el nom que trobem més escaient i l’extensió .html.
1.7.1 La declaració de l’XML i la DTD
Si usem l’XHTML, hem d’especificar que el document és XML. Això es fa a

la primera línia del document, i se n’indica també la versió i la codificació de
caràcters que fem servir:
Si estiguéssim dissenyant un document HTML, aquesta línia l’hauríem d’ometre,

ja que els documents HTML no són documents XML.
En qualsevol pàgina web anterior a HTML5 s’hauria d’especificar la DTD per tal
de saber amb quin llenguatge de la família (X)HTML estem treballant. Aquesta
especificació ens permet validar la pàgina. És habitual que trobem moltes pàgines
web que no especifiquen quina DTD usen; podem entendre que, o bé no n’usen
cap, o s’han oblidat d’especificar-la, o bé són HTML5. En els dos primers casos,
Podeu consultar un llistat
de les DTD de la família
aquestes pàgines estarien incomplint els estàndards proclamats per la W3C.
(X)HTML a la secció
“Adreces d’interès” del
web d’aquesta unitat. Si usem la DTD XHTML Strict 1.0, la segona línia del nostre fitxer .html haurà
de ser la següent:
1 <!DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1.0 Strict//EN"

2 "http://www.w3c.org/TR/xhtml1/DTD/xhtml1−strict.dtd " >
1.7.2 L’element arrel
Tot document XML ha de tenir un element arrel. En el cas de la família de

llenguatges (X)HTML aquest element arrel és <html>. En el cas particular
d’XHTML hem d’especificar, a més, que estem usant XHTML amb l’atribut
xmlns i la llengua del document amb els atributs xml:lang i lang:

2 <!DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3c.org/TR/xhtml1/DTD/xhtml1−strict.dtd " >
5 ...
6 </html>
1.7.3 La capçalera i el cos
Tot document (X)HTML té dues seccions principals: la capçalera, indicada

mitjançant l’etiqueta <head>, i el cos del document, marcat amb l’etiqueta
<body>.
La capçalera conté elements que faciliten informació diversa de la pàgina, com

ara el títol, l’enllaç amb altres fitxers relacionats amb el document (fulls d’estils,
codi JavaScript...) i metainformació del document, entre d’altres.
Una capçalera mínima seria la següent:
1 <head>
3 <title>La meva pàgina web</title>
4 </head>
En l’apartat “Estructura
del document amb
La marca <meta> serveix per establir metainformació del document i té diferents HTML5” podreu veure
com la marca <meta> ha
funcions, en aquest cas diem que el nostre document s’enviarà amb el tipus estat simplificada en
l’HTML5.
MIME (Multipurpose Internet Mail Extensions) text/html i que el document
està codificat amb UTF-8.
Per què està permès enviar documents XHTML 1.0 com a texthtml?
L’XHTML és un format XML; això vol dir que parlant de manera estricta s’hauria d’enviar
amb un tipus MIME relacionat amb l’XML (application/xhtml+xml, application/xml, o
text/xml). Malgrat tot, l’XHTML 1.0 es va dissenyar amb molta cura, de manera que si el
document està fet amb compte hauria de funcionar també en agents d’usuari pensats per
a l’HTML llegat. Si se segueixen algunes pautes senzilles es pot fer que molts documents
XHTML 1.0 funcionin en navegadors antics. Malgrat tot, els navegadors antics només
interpreten el tipus MIME text/html, de manera que s’ha d’emprar aquest tipus si se’ls
envia documents XHTML 1.0. S’ha de tenir present que enviar documents XHTML als
navegadors com a text/html vol dir que aquests veuran el document com a HTML i no
com a XHTML.
S. Pemberton (ed.). Preguntes més freqüents d’HTML i XHTML.
La marca <title> ens serveix per posar el títol de la nostra web. El navegador
mostra el contingut d’aquesta marca com a títol de la finestra o de la pestanya on
es mostra el document, com podem veure en la figura 1.4.
Fi g ura 1 .4. Visualització del contingut de l’element ’title’ a Firefox
Després de la capçalera, tenim l’element <body>, que conté tot el contingut de la

web.
1 <body>
2 <!−− Contingut de la web −−>
3 </body>
Vegem a continuació un resum de les etiquetes que utilitzem per crear l’estructura
mínima d’un document (X)HTML:
• <html>: element arrel del document.

• <head>: capçalera, espai destinat a contenir informació del document.
• <title>: títol descriptiu de la pàgina web. Normalment apareix a la barra

del navegador, també és el text que s’emmagatzema en els marcadors del
navegador (llista d’adreces d’interès).
• <meta />: metainformació de la pàgina. Podem posar diverses marques

<meta>, que donen informació no visible del document.
• <body>: cos o contingut del document.
1.8 Evolució i estàndards actuals d’HTML
Les tècniques i tecnologies web són en constant evolució, és per aquest motiu que
ara ens volem centrar als estàndard actuals, i les variacions que aquestes suposen
en termes genèrics.
1.8.1 HTML5
La web actual es basa en l’estàndard HTML5. L’anterior versió de l’HTML,

l’HTML 4.01, és de l’any 1999 i l’àmbit del web ha evolucionat molt des de llavors.
L’HTML5 incorpora moltes funcionalitats que en aquell moment no es van tenir
en compte: àudios, vídeos, eines de dibuix, validació de formularis, etiquetatge
semàntic i molt més.
Un parell de webs que ens
informen de l’estat HTML5 va incorporant noves funcionalitats, a vegades forçades pels mateixos
d’implementació d’aquestes
funcionalitats en els
fabricants i els desenvolupadors de navegadors. Per aquest motiu no tots els nave-
diferents navegadors són: gadors implementen totes les funcionalitats a l’instant en què un desenvolupador
• http: s’avança; és a dir, les etiquetes que fem servir no sempre es comporten igual segons
//html5test. el navegador amb què obrim els documents.
com/
• http://caniuse. Un dels avanços més grans ha estat l’afegiment de noves etiquetes que ajuden a
com/ fer la web més eficaç alhora que comprensible, gràcies a l’anomenat etiquetatge
semàntic (semantic markup) . Si abans es feia servir una etiqueta genèrica com
<div> per contenir elements molt diversos, ara tenim diverses etiquetes molt més
específiques com <nav>, <article>, <section> o <footer> entre d’altres, que
farien una funció similar però que en anomenar-se d’aquesta manera indiquen la
funció que compleixen dins d’un document web. Això no solament ajuda a fer
el codi dels documents web més comprensible, sinó alhora ajuda els cercadors
d’Internet que facin ús d’aquestes etiquetes per poder filtrar millor les cerques i,
per extensió, accedir millor al contingut.
1.8.2 XHTML5
Semblaria normal que, si fins HTML 4.0 disposàvem d’una sintaxi basada amb
XML com és la XHTML 1.0, hagués d’existir un equivalent anomenat XHTML5
o XHTML 2.0, però no és així; la flexibilitat va guanyar vers l’etiquetatge estricte.
Per aquest motiu la W3C va decidir centrar-se exclusivament a millorar l’HTML
en la seva darrera versió, HTML5.
De fet el que va desaparèixer va ser la idea de desenvolupar un XHTML 2.0,

però si els desenvolupadors d’HTML5 necessiten pel motiu que sigui recórrer a
l’XHTML, sempre poden codificar l’HTML5 amb l’estil més estricte que ofereix
l’XHTML 1.0.
Un dels casos en què podem recórrer a la validació de l’XML seria el

del llenguatge SVG (Scalable Vector Graphics), que ens permet dibuixar
vectorialment amb sintaxi XML dins d’HTML.
1.8.3 Estructura del document amb HTML5
HTML5 incorpora moltes novetats, una d’elles és l’eliminació de la DTD i la

simplificació de diferents etiquetes del codi, per aquest motiu no podem dir que
existeixi un XHTML per HTML5 com a tal.
L’estructura bàsica sencera d’un document amb HTML5 és:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf−8">
6 </head>
7 <body>
9 </body>
10 </html>
La novetat d’aquest nou estàndard, com veieu, és que s’ha substituït la versió
complicada dels doctypes anteriors a HTML5, com per exemple:

strict.dtd">
Per aquest altre, que pertany a HTML5:
1 <!DOCTYPE html>
Igualment l’etiqueta meta de contingut s’ha simplificat, substituint l’expressió

següent per la que es mostra en segon terme:
1 <meta http−equiv="content−type" content="text/html; charset=UTF−8">
Hi ha dos aspectes, dins de la codificació HTML5 que hem de tenir en compte

quant a referenciar codi JavaScript i CSS, que podeu veure a la taula 1.2.
Taul a 1. 2. Comparativa de la variació en l’ús de la codificació CSS i JavaScript per HTML5
Versions anteriors a HTML5 HTML5
<link type=“text/css” rel=“stylesheet” <link rel=“stylesheet” href=“estil.css”>

href=“estil.css”>
<script src=“funcions.js” <script src=“funcions.js”></script>

type=“text/javascript”></script>
Si preferim, per costum, la sintaxi XML, o fem servir codificacions basades en

tecnologies XML (com SVG) dins d’HTML5, l’estructura del document pot fer-
se servir de la següent manera:
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
6 </head>
7 <body>
9 <svg xmlns="http://www.w3.org/2000/svg">
10 <!−− Aquí hi aniria la codificació SVG, que no és objecte d’estudi en
aquest mòdul−−>
11 </svg>
13 </body>
14 </html>
1.9 Organització de codificació i estructuració dels portals
Hi ha dos aspectes fonamentals dins del desenvolupament de portals: la llegibili-

tat i la organització del codi, és a dir, com organitzem d’una banda el codi dins
d’un document, i de l’altra l’organització dels diferents fitxers que componen el
portal (l’arbre de directoris del portal). Per aquest motiu podríem dir que es
necessita una organització interna al document, lligada a la llegibilitat del codi, i
una d’externa, lligada a com es disposen els documents dins del directori arrel del
portal.
1.9.1 Llegibilitat i organització del codi
La llegibilitat del codi font fa referència a la claredat amb la qual escrivim el

codi, en el sentit que un ésser humà sigui capaç d’entendre’l de manera fàcil i
ràpida, és a dir, la seva estructura i els elements que aquest conté simplement
fent un cop d’ull.
És fonamental que el codi font (X)HTML que generem sigui fàcilment compren-
sible. Hem de pensar que normalment no treballarem sols i fer que allò que
hem desenvolupat sigui llegible, pot ajudar a aquells que treballin amb el nostre
document a entendre què hem fet i per què. Fins i tot, suposant que el document
creat només serà modificat per nosaltres, la llegibilitat també és fonamental per
recordar tot allò que hem fet.
Entendrem per organització del codi font l’estructuració de l’aplicació web

en diversos fitxers així com la classificació d’aquests fitxers en els directoris
que calgui.
Hi ha diverses tècniques per tal que el codi sigui llegible i estigui ben organitzat.
Les més rellevants són els comentaris, el sagnat del codi, l’ús de noms clarificadors
relacionats amb la funció que realitza una part de codi i l’organització dels fitxers.
Comentaris
En un document (X)HTML podem posar anotacions que no són visibles als usuaris
que mirin la web amb el navegador (excepte si examinen el codi font), però que
són útils per al desenvolupador web.
La sintaxi dels comentaris amb (X)HTML és la següent:

1 <!−− comentari −−>
És molt important comentar el codi font, sobretot si es tracta d’un document molt
llarg.
Imaginem que tenim una pàgina web amb una capçalera, un menú per navegar,
seccions centrals amb 3 articles i un peu de pàgina. Podríem posar els següents
comentaris per denotar on comencen cadascuna d’aquestes seccions del nostre
document:
1 <!doctype html>
2 <html>
3 <head>
4 <meta http−equiv="Content−Type" content="text/html; charset=utf−8">
5 <title>Títol de la pàgina web</title>
6 </head>
7 <body>
8 <!−− Capçalera −−>
9 ...
10 <!−− Menú de navegació −−>
11 ...
12 <!−− Secció d’articles −−>
13 ...
14 <!−− Article 1 −−>
15 ...
16 <!−− Article 2 −−>
17 ...
18 <!−− Article 3 −−>
19 ...
20 <!−− Peu de pàgina −−>
21 ...
22 </body>
23 </html>
Sagnat del codi o tabulació
El codi HTML està farcit d’etiquetes que s’obren i es tanquen. Al navegador web
que interpretarà aquest codi no li cal que hi hagi ni salts de pàgina ni tabuladors
per poder interpretar-lo, però els éssers humans necessitem que el codi estigui
organitzat amb salts de línia i sagnats per tal de llegir-lo d’una manera còmoda.
Una tècnica per tal de sagnar el codi és que tot el contingut que hi ha entre una
etiqueta d’inici i la seva etiqueta de tancament corresponent estigui sagnat. Aquest
sagnat es fa sempre, excepte si el contingut és text, ja que això provocaria massa
sagnats. Posem un exemple on es veu com l’etiqueta <p> queda sagnada respecte
l’etiqueta <div> i, en canvi, el text contingut en el paràgraf no el sagnem:
1 <div>
Existeixen principalment 2 <p>Això és el contingut d’un paràgraf</p>
dos “Tipus d’elements”; 3 </div>
els elements de línia (que
ocupen exclusivament
espai a la línia on són
inserits) i els elements de
bloc, que per defecte
ocupen tot l’ample del Si els elements són de línia, tampoc s’acostuma a sagnar el codi. Posem un altre
document visualitzat.
exemple:
1 <div>
2 <p>Això és el contingut d’un paràgraf, ara fem un <a href="http://
elquesigui.org"> enllaç extern</a> i continuem escrivint...</p>
3 </div>
Una altra ajuda per fer més fàcil la nostra tasca de diferenciar codi ve donada
pels editors HTML, que acoloreixen el codi segons els elements que formen
els documents. El que fan és reconèixer el codi i fins i tot el poden arribar a
tabular automàticament si està ben etiquetat, o fer-nos suggeriments a mesura
que l’escrivim.
1.9.2 L’arbre de directoris als portals/apps
Pràcticament la totalitat d’aplicacions web contenen un nombre elevat de fitxers de

diferents tipus i extensions com ara: .html, fulls d’estil amb extensió .css, fitxers
amb codi JavaScript amb extensió .js, imatges, vídeos... Si tenim tots aquests
fitxers barrejats, la nostra aplicació web tindrà una organització caòtica. Hem
d’organitzar la nostra aplicació en directoris. Un exemple per una aplicació no
gaire gran seria l’arbre de directoris següent:
1 |−−web
2 | |−−imatges
3 | | |−−img1.png
4 | | |−−img2.jpg
5 | | |−−img3.gif
6 | | |...
7 | |−−videos
8 | | |−−video1.mpg
10 | | |...
11 | |−−audios
12 | | |−−audio1.ogg
13 | | |−−audio2.mp3
14 | | |...
15 | |−−javascript
16 | | |−−llibreria1.js
17 | | |−−codificacio.js
18 | |−−css
19 | | |−−estil1.css
21 | | |...
22 | |−−pagines
23 | | |−−quisom.html
24 | | |−−seccio1.html
26 | | |−−contacte.html
27 | | |...
28 | |−−index.html
29 | |...
30 |
Com podeu observar, és molt recomanable que cada cop que creem una aplicació
web creem també un directori principal o arrel, on desarem tots els nostres fitxers
o arbre de directoris. En el cas de l’exemple l’hem anomenat web. En aquest
directori podem posar el fitxer principal .html (a l’exemple index.html) i crear
els directoris que ens calguin per posar els fitxers multimèdia (imatges, àudios i
vídeos), els estils de l’aplicació, la carpeta pels fitxers de JavaScript o la carpeta
que conté la resta de pàgines HTML que no siguin l’índex principal.
Nomenament dels fitxers
Per tal d’anomenar els fitxers del nostre portal, hem de seguir igualment algunes
regles d’obligat compliment o opcionals però que unifiquin criteris comuns a tot
el portal.
• No feu servir espais en blanc per anomenar els fitxers. Per exemple: “la
meva plana.html” no seria correcte però sí “la_meva_plana.html”.
• No feu servir lletres accentuades, apòstrofs o lletres que estiguin lligades a

llengües concretes (la ñ en castellà o la ç o l·l en català són un exemple).
• Penseu que els fitxers segons els sistemes operatius són case sensitive, és a
dir, distingeixen entre majúscules i minúscules. És molt millor posar tots
els noms en minúscula, per unificar criteris.
• Feu servir noms breus pels noms dels fitxers de com a màxim 12 caràcters
com a regla general.
• Feu servir noms que donin una idea de la informació que conté la pàgina
o document. Per exemple: contacte.html, home.html, serveis.html són un
bon exemple, però no pagina1.html o lamevaplana.html.
Es pot configurar el servidor
web per tal que en lloc d’
index.html el fitxer d’inici
tingui un altre nom.
És recomanable que el fitxer d’inici de les aplicacions tingui el nom index.html.
Això fa que l’usuari no hagi d’escriure el nom del fitxer per accedir-hi.
L’objectiu d’aquest apartat ha estat veure una organització per planes anomenades
estàtiques que podem obrir directament sense que intervingui una consulta a cap
servidor web, però les aplicacions webs requereixen de fitxers que “s’executen” al
servidor i que retornen planes (X)HTML amb CSS i JavaScript. Aquests fitxers
fan servir altres llenguatges, dels quals el més comú és PHP. Per aquest motiu
veureu que moltes planes de les aplicacions web tenen extensió .php.
1.10 Eines d’anàlisi i desenvolupament
Una vegada vist com s’estructura una pàgina web i com s’organitzen els fitxers
dins d’un portal o aplicació, és important saber com treballen els desenvolupadors
d’interfícies web, quines són les eines habituals de treball al marge dels editors
HTML, per tal de manegar el nostre codi.
L’objectiu d’aquestes eines és veure el funcionament i codificació de les nostres

pàgines directament al navegador on les obrim i modificar-les en viu sense efecte
sobre els fitxers originals, però amb l’objectiu d’orientar-nos a l’hora de fer canvis.
Tenim bàsicament dues opcions:
• Mitjançant les eines de desenvolupament dels mateixos navegadors.
• Afegint funcionalitats de tercers, mitjançant connectors (plug-ins), al nostre

navegador.
1.10.1 Eines de desenvolupament dels navegadors
Cada navegador té les seves pròpies eines de desenvolupament, a les quals podem
accedir bé pel menú o bé per abreviació de teclat. Tenint en compte els principals
navegadors, podeu consultar la taula de resum (taula 1.3):
Tau l a 1 .3 . Abreviacions de teclat per accés a eines de desenvolupament
Abreviació teclat
Chrome o Chromium F12
Firefox Ctrl + Majúscules + I
Internet Explorer F12
Opera(*) Ctrl + Majúscules + I
Principals navegadors i eines de desenvolupament.
(*) Opera anomena a aquestes eines Opera Dragonfly
A continuació (figura 1.5) veiem un exemple amb una plana senzilla amb molt poc
codi, amb l’eina de desenvolupament de Firefox:
Figur a 1. 5. Eina de desenvolupament de Firefox
1.10.2 Instal·lació de connectors al nostre navegador
Hi ha diverses eines per instal·lar, però la més popular és Firebug.
• Si volem fer una instal·lació d’aquesta eina per Firefox hem de fer: Eines >
Complements i cercar per Firebug. Una vegada afegida al nostre navegador,

veurem una nova icona a la barra d’eines del navegador, semblant a un
insecte. Si el cliquem s’obriran totes les eines de què disposa aquest
connector. A continuació veiem un exemple, on hem inspeccionat una de
les pàgines del portal de l’IOC (figura 1.6).
F igu r a 1. 6 . Connector (plug-in) de Firebug a Firefox
• Si volem instal·lar-la per Chrome, haurem d’accedir al menú Finestra >

Extensions i fer una cerca amb el nom Firebug Lite
2. Etiquetes i atributs
Per confeccionar una pàgina web estàtica és necessari saber com es pot estructurar
tota la informació que ha de contenir l’aplicació; actualment amb HTML5. Hem
de saber, doncs, quins elements podem usar, quina sintaxi utilitzen i en quins casos
s’han de fer servir.
A més a més de les etiquetes que conformen l’estructura d’un document, tenim
disponibles una col·lecció d’etiquetes que ens permetran ordenar la informació
que tenim al cos de la web, la qual cosa donarà un significat semàntic a cada
porció d’informació.
Des que es va introduir HTML5 s’han incorporat noves etiquetes i atributs molt
variats, alhora que han quedat en desús unes altres, ja que es va entendre que
hi havia moltes etiquetes que ja donaven la mateixa funcionalitat i no calia ser
redundants, o simplement per diferenciar millor el que és estructura i semàntica
(HTML) del que és estètica (CSS).
En aquest apartat ens centrarem principalment en HTML5 deixant de banda

XHTML, ja que, com ja vam veure a l’anterior unitat, es pot fer servir
puntualment però no té una correlació directa amb la versió actual d’HTML.
Com a regla general podríem dir que les etiquetes tenen atributs i que segueixen
una nomenclatura com la de la figura 2.1.
Figur a 2. 1. Etiquetes i atributs a HTML
A partir d’ara ens centrarem en les etiquetes disponibles a HTML5 i els seus
atributs, tenint en compte que hi ha atributs comuns a totes les etiquetes i d’altres
que poden ser exclusius per a algunes en concret.
2.1 Etiquetes del cos del document
Per dissenyar la part visible d’un document o plana web, partirem del concepte cos
del document (marcat amb l’etiqueta <body>) on hem d’incloure tot el contingut
de la web, és a dir, la informació que volem que vegi l’usuari final de l’aplicació
web, tot i que poden existir minoritàriament elements ocults a l’usuari dins del cos.
A l’interior del <body> o cos, disposarem de diferents elements que, amb els seus
atributs, ens permetran aconseguir aquest objectiu.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF−8">
5 <title>.:: Exemple de document web ::.</title>
6 </head>
7 <body>
8
9 <!−− Aquí disposarem de les etiquetes i atributs visibles a la web −−>
10
11
12 </body>
13 </html>
2.1.1 Tipus d’elements
Els elements HTML5 descendents de l’element <body> es poden classificar en

dos tipus: els elements (block elements) i els elements de línia (inline elements).
Els elements de bloc, com per exemple els títols, els paràgrafs, les llistes
o les taules, els articles, les seccions, etc. són grans estructures que poden
contenir altres elements de bloc, elements de línia, o text.
Normalment, el navegador els mostra com a blocs independents i separa un bloc

d’un altre amb un salt de línia. Per aquest motiu, si posem a una pàgina un element
en bloc, aquest tendeix a expandir-se el màxim permès per la finestra i provoca un
salt de línia. Heu de tenir en compte que aquest comportament és modificable, ja
que podem forçar la grandària dels elements principalment des de CSS.
Els elements de línia, com per exemple els enllaços, les citacions o les
imatges, són petites estructures que representen o descriuen petits trossos
de text o dades. Poden contenir només text o altres elements de línia.
Normalment, el navegador mostra els elements de línia un al costat de l’altre,

dins de l’element de bloc que els conté, o al seu defecte dins del document que
representa l’etiqueta <body>. Podríem dir que un element de línia ocupa l’espai
d’allò que conté, però no s’expandeix més enllà.
Si ho comparem amb un processador de textos, podem pensar en un paràgraf com

un element de bloc i una paraula emfatitzada, per exemple en negreta, com un
element de línia.
A la figura 2.2 podem veure quina és la diferència, entre un element inline

representat per l’etiqueta <span> i un element block representat per l’etiqueta
<div>, tot i que hi ha molts més elements possibles de cada tipus.
Figur a 2. 2. Elements block i inline
2.1.2 Atributs genèrics
Les etiquetes poden tenir atributs que acaben de definir l’element. Hi ha una sèrie
d’atributs comuns a la majoria d’elements:
• Atributs globals
• Atributs de llenguatge
• Atributs d’esdeveniment (event)
Atributs globals
Els atributs globals són atributs genèrics. Són principalment els següents:
• id: identifica l’element. No hi poden haver dos elements en un mateix

document amb el mateix id.
• class: serveix per associar un element a una classe. Més d’un element pot
ser anomenat amb la mateixa classe. Ens és molt útil a l’hora de definir
els estils d’una pàgina, ja que podem especificar característiques comunes
a tots els elements que pertanyin a la mateixa classe.
• style: s’usa per definir l’estil de l’element.
• title: s’usa per posar un text amb una informació breu de l’element. Molts
navegadors mostren aquest text quan es passa per damunt de l’element.
Tot i no ser objecte d’estudi en aquesta unitat, existeixen altres atributs globals com
ara: acceskey, tabindex en totes les versions d’HTML i també contenteditable,
contextmenu, data-*, draggable, dropzone, hidden, spellcheck i translate a la
versió HTML5 que fem servir actualment.
Posem un exemple: imaginem que tenim un paràgraf que volem identificar amb
la cadena descripcio, que pertany a la classe important i que volem que en
passar-hi per sobre ens aparegui un text amb la frase Aquest paràgraf és molt
important. El codi seria el següent:
1 <p id="descripcio" class="important" title="Aquest paràgraf és molt important">

Si passeu per sobre, us n’adonareu del contingut del títol del paràgraf!<
/p>
Atributs de llenguatge
Els atributs de llenguatge ens especifiquen diferents característiques de la llengua

del text contingut a l’element. Són els següents:
• lang: especifica la llengua del text contingut a l’element.
• dir: especifica la direcció de lectura de la llengua del text contingut a

Per saber quins són els
codis associats a cada
l’element.
llenguatge podem visitar
w3schools
Per establir l’idioma en el qual està escrit tot el document, s’acostuma a posar en
l’atribut lang de l’etiqueta <html>:
Si al document HTML volem indicar que està escrit en català farem el següent:
1 <html lang="ca">
2 ...
3 </html>
Igualment amb l’atribut dir, podem assignar-li tres possibles valors: <ltr>,
<rtl> i <auto>, indicant si l’escriptura és d’esquerra a dreta, de dreta a esquerra
o si deixem que el propi navegador detecti de quin tipus és respectivament.
1 <html dir="ltr">
2 ...
3 </html>
Atributs d’esdeveniment (’event’)
Els atributs d’esdeveniment són atributs que associen una acció que es realitzarà
quan es produeixi una determinada interacció de l’usuari cap a l’element que té
aquest atribut. Aquests atributs són molt útils quan s’usen en combinació amb el
llenguatge de programació JavaScript.
La quantitat d’esdeveniments disponibles és força elevada, i des de la versió

HTML5 han augmentat significativament. Podem fer-ne una classificació en 8
grups:
• Finestra (window events): relacionats amb tot allò que té a veure amb
la finestra. Per exemple quan carreguem un document a la finestra del
navegador o quan redimensionem la finestra, entre d’altres.
• Formulari (form events): relacionats amb tots els camps que formin part
d’un formulari. Per exemple quan entrem a un camp d’un formulari per
començar a escriure o seleccionar/modificar un camp.
• Teclat (keyboard events): relacionats amb el teclat. Per exemple quan

cliquem a una tecla o l’alliberem, entre d’altres.
• Ratolí (mouse events): relacionats amb el ratolí. Per exemple, moure’l,

passar per sobre d’un element, clicar-lo, etc.
• Portapapers (clipboard events): quan copiem, retallem o enganxem.
• Mèdia (media events): relacionats amb tot el que té a veure amb imatges,
vídeo o àudio.
• Tàctils (touch events): tenen a veure amb la interacció d’un usuari amb
pantalles tàctils, ja siguin per mòbil, tauleta o qualsevol tipus de pantalles
tàctils.
• Miscel·lània (altres): aquesta classificació agrupa aquells esdeveniments

que no tenen cabuda a cap dels anteriors, per exemple quan es produeix un
error en carregar un arxiu extern al document, si aquest hi fa referència.
Alguns dels més importants són els següents:
• onclick: l’acció es produirà quan es faci un clic amb el ratolí damunt de

l’element.
• ondblclick: l’acció es produirà quan es faci doble clic amb el ratolí.
• onmousedown: l’acció es produirà quan es premi el botó del ratolí.
• onmouseup: l’acció es produirà quan es deixi de prémer el botó del ratolí.
• onmouseover: l’acció es produirà quan estiguem amb el ratolí fora d’un

element i el moguem de manera que passem a estar damunt de l’element.
• onmousemove: l’acció es produirà quan es mogui el ratolí per damunt de

l’element.
• onmouseout: l’acció es produirà quan estiguem amb el ratolí damunt d’un

element i el moguem de manera que deixem d’estar-hi al damunt.
• onkeypress: l’acció es produirà quan es premi una tecla i es deixi anar

damunt de l’element.
• onkeydown: l’acció es produirà quan es premi una tecla damunt de l’ele-

ment.
• onkeyup: l’acció es produirà quan es deixi anar una tecla damunt de

l’element.
• ondrag: l’acció es produirà quan un element sigui arrossegat.
• ondragend: quan un element hagi finalitzat el procés d’arrossegament.

• ondragstart: quan un element comenci el procés d’arrossegament.
• ondrop: quan un element arrossegat sigui alliberat.
• onload: quan hagi finalitzat la càrrega d’una pàgina.
• etc.
Tot i que l’estudi del llenguatge de programació JavaScript està fora de l’abast
d’aquesta unitat, és interessant saber què volen dir aquests atributs. Per exemple,
Per veure un llistat ordenat si tenim el següent fragment de codi:
segons els tipus i quantitat
d’esdeveniments
disponibles podeu visitar 1 <p onclick="obreFinestra()">Aquest és un paràgraf que ens permet obrir una
w3schools finestra</p>
Hem d’interpretar que quan es faci un clic damunt d’aquest paràgraf, s’executarà
una funció que, segons el seu nom, provocarà l’obertura d’una finestra.
2.2 Etiquetes de text
Marcar el text del document vol dir diferenciar les parts d’aquest text per tal de
denotar-ne la major o menor importància, aclarir si una part de text és una citació,
si hi volem fer més o menys èmfasi...
A continuació es detalla un resum de les etiquetes de text més importants:
• Etiquetes corresponents a elements de bloc:
– <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: encapçalaments. El nú-

mero denota el nivell de l’encapçalament, és a dir <h1> és l’encapça-
lament de primer nivell i <h6> l’encapçalament d’últim nivell.
– <p>: paràgraf.
– <br />: salt de línia.
– <hr />: línia separadora.
– <blockquote>: citació de tipus bloc.
– <pre>: text preformatat.
– <div>: capa. Es tracta d’una etiqueta de tipus bloc sense significat
semàntic que ens servirà per agrupar text i/o d’altres elements.
– <header>: encapçalament, no lligat a cap format i amb una clara
orientació semàntica.
– <aside>: element de bloc, que es posiciona al voltant normalment
d’un altre.
– <footer>: posicionat normalment al final de les pàgines.
– <article>: determina que el contingut és un article, independent-
ment dels elements continguts.
– <section>: marca una secció.
• Etiquetes corresponents a elements de línia:
– <em>: text amb èmfasi.

– <strong>: text amb molt èmfasi.
– <q>: citació de tipus línia.
– <cite>: font de la citació.
– <abbr>: abreviació.
– <code>: codi de programació.
– <samp>: sortida d’un programa.
– <kbd>: text introduït per un usuari.
– <var>: variable o paràmetre d’un programa.
– <span>: etiqueta de tipus línia sense significat semàntic que ens
servirà per agrupar text i/o d’altres elements.
2.2.1 Paràgrafs
Entenem per paràgraf un conjunt de frases que estan relacionades entre si. Els
paràgrafs són elements de tipus bloc i l’etiqueta que s’usa és l’etiqueta <p>.
Si, per exemple, tenim un paràgraf que ens explica què és el llenguatge HTML5,
el marquem de la manera següent:
1 <p>HTML5 (acrònim Hyper Text Markup Language versió 5) és el llenguatge d’

etiquetes que
2 fem servir a l’actualitat per l’elaboració de pàgines web, interpretables pels
navegadors.
3 </p>
2.2.2 Els encapçalaments
Els llenguatges d’etiquetes (X)HTML ens permeten crear sis nivells d’encapça-
lament amb les etiquetes <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. Tots aquests
elements són de tipus bloc. L’objectiu del seus ús és la classificació dels continguts
en títol o subtítols, o simplement la creació de diferents nivells de titulars.
A continuació veiem un fragment d’un document HTML5 en què ens expliquen di-
verses característiques d’aquest llenguatge d’etiquetes. Fixem-nos en les etiquetes
d’encapçalament:
1 <h1>HTML5</h1>
2
3 <p>HTML5 és el llenguatge de marques més estès en l’actualitat, per l’elaboraci
ó de pàgines web mitjançant l’ús d’etiquetes i atributs que hi estan
associats.
4 </p>
5
6 <h2>Història</h2>
7
8 <p>El primer llenguatge HTML va ser escrit l’any 1993 pel físic Tim Berners−Lee
i millorat posteriorment per Dave Raggett que el va anomenar HTML+. No va
ser fins a 1995 que va sortir els primers treballs per l’elaboració d’un
estàndard, anomenat HTML 2.0. Anys després gràcies a W3C van arribar a
popularitzar durant molts anys la versió HTML4 per l’elaboració de pàgines
web, i posteriorment es van incorporar millores gràcies a l’estàndard
HTML5, que és la versió que fem servir en l’actualitat.</p>
9
10 <h2>Parts d’un document HTML</h2>
11 <p> Podem dir que tot document HTML5 conté bàsicament dues parts: el head i el
body, que tenen les seves respectives etiquetes associades.
12 </p>
13
14 <h3>Head</h3>
15
16 <p>En aquesta part del document, fem les definicions i crides a altres fitxers,
que no són visibles pels usuaris, a excepció del títol del document.</p>
17
18 <h3>Body</h3>
19
20 <p>En aquesta part, disposem de totes les etiquetes que volem que siguin
visibles pels usuaris, i que determinen principalment l’estructura dels
documents HTML vers els navegadors.</p>
En la figura 2.3 podeu veure com es visualitzaria aquest exemple en un navegador.

Fixem-nos que, normalment, els navegadors posen un estil per defecte a cadascuna
de les etiquetes. Així doncs, el text marcat amb <h1> és més gran que el marcat
amb <h2>, aquest és més gran que el marcat amb <h3> i així successivament.
F igu r a 2. 3 . Exemples d’etiquetes d’encapçalament

2.2.3 Èmfasi
Quan volem posar èmfasi a una part de text perquè volem destacar-ne la importàn-
cia, tenim a la nostra disposició dues etiquetes. L’etiqueta <em> serveix per donar
èmfasi i l’etiqueta <strong> per donar molt d’èmfasi.
Imaginem que tenim un paràgraf del qual volem destacar algunes paraules:
1 <p>SVG és un estàndard per la creació de <em>gràfics vectorials bidimensionals<

/em>
2 basat en <strong>XML</strong> i que pot incorporar animacions amb l’ajuda de
3 <strong>SMIL.</strong></p>
Per defecte, la majoria de navegadors mostren el text marcat amb <em> en lletra
cursiva i el text marcat amb <strong> amb lletra negreta, com es veu en la figura
2.4.
Fig ur a 2 . 4. Exemple d’etiquetes d’èmfasi
Dues etiquetes més que podem confondre fàcilment amb <strong> i <em>
Les etiquetes <b> (negreta) i <i> (cursiva) porten a vegades a confusió. Aquestes etiquetes
defineixen directament l’estil del text que contenen, no el significat semàntic.
Per posar alguns exemples pràctics podríem dir que moltes vegades, per qüestió
exclusivament estètica fem servir la negreta, per exemple a titulars o un logo o perquè
volem que a un dispositiu mòbil es vegi millor el text. Això no té associat una finalitat
semàntica d’èmfasi i per aquest motiu hauríem de fer servir l’etiqueta <b> en comptes de
<strong>.
Passa el mateix amb les etiquetes <em>, que denoten que volem marcar un text amb èmfasi
i <i>, que especifica que el text estigui en cursiva.
Heu de pensar també, que hi ha lectors de pantalla (screen readers) per a persones amb
manca de visió, que no tenen en compte l’estètica però sí totes les qüestions relacionades
amb l’èmfasi que l’autor d’un document vol destacar.
És recomanable fer ús d’<strong> i <em>, ja que hem d’intentar delegar l’estètica de la

pàgina web al CSS en lloc de delegar-la a l’HTML, per aquest motiu millor fer un ús puntual
de <b> i <i>.
2.2.4 Citacions
Quan volem fer referència a un text que no hem escrit nosaltres hem de fer servir
les citacions. Tenim tres etiquetes diferents per descriure-les: <blockquote>,
<q> i <cite>. El seu ús el podeu veure a la següent llista:
• <blockquote>, si la citació és tot un paràgraf.
• <q>, si la citació és enmig d’un element de bloc (per exemple, dins d’un
paràgraf).
• <cite>, ens serveix per marcar l’origen de la citació (l’autor de la citació,

el títol...).
Posem un exemple d’ús d’aquestes etiquetes. Imaginem que estem fent un lloc
web on volem posar una citació de l’escriptor Manuel de Pedrolo:
1 <p>
2 La frase <q>En cap moment no es pot dir <em>per
3 sempre</em></q> de l’escriptor <cite>Manuel de Pedrolo</cite>
4 apareix en el seu llibre <cite>Diari 1986</cite>. Aquí tenim
5 la cita sencera:
6 </p>
7 <blockquote>
8 <p>
9 En cap moment no es pot dir <em>per sempre</em>. En canvi,
10 sempre hi ha un moment en què cal dir <em>mai més</em>.
11 Però: no és el mai més un per sempre? Tanmateix, el per
12 sempre se situa en el temps, mentre el mai més és
13 intemporal.
14 </p>
15 </blockquote>
Cal destacar que dins l’etiqueta <blockquote> no podem escriure text directa-
ment sinó que hem d’afegir una altra etiqueta de bloc (<p>, <div>...).
La figura 2.5 ens mostra el text anterior interpretat per un navegador.

Fi gura 2 .5. Exemple d’etiquetes per a citacions
2.2.5 Salts de línia
Si volem forçar un salt de línia podem usar l’etiqueta <br>. No hem d’abusar
d’aquesta etiqueta i només l’hem d’utilitzar en els casos necessaris. Per exemple,
s’ha de forçar un salt de línia en cada vers d’un poema o bé en les línies d’una
cançó. En canvi, no s’ha d’usar per simular paràgrafs ni per deixar més espai
entre paràgrafs (això es podrà fer amb CSS).
Posem, per exemple, un fragment de la poesia de Joan Brossa, “Oda a Louis

Armstrong”:
1 <p>
2 Col · locades les peces a cada banda<br>
3 del tauler, a les caselles negres,<br>
4 moc una peça endavant.<br>
5 El contrari en juga una de seva.<br>
6 </p>
El navegador ens fa un salt de línia cada cop que troba l’etiqueta <br /> tal com
podem veure en la figura 2.6.
Fig ur a 2. 6 . Exemple amb etiqueta per a salts de línia

d’un poema de Joan Brossa
2.2.6 Separadors
Si volem posar un separador horitzontal podem usar l’etiqueta <hr />, que ens
crea una barra horitzontal. Tot i això, com que ens és molt fàcil posar línies
separadores amb CSS, aquesta etiqueta està caient en desús.
2.2.7 Abreviatures
Si en un text trobem una abreviatura també tenim l’etiqueta adequada per

assenyalar-la que és <abbr>. Posem un exemple d’ús:
1 <p> El metallenguatge XML <abbr title="Extensible Markup Language">MB</abbr>

2 ens permet definir etiquetes pròpies. </p>
En la figura 2.7 veiem com ens mostraria aquest text un navegador.
Figu r a 2 .7 . Exemple de l’etiqueta abreviatura
2.2.8 Text preformatat
Si volem posar un fragment de text tal com està escrit en el fitxer de text HTML,
hem d’usar l’etiqueta <pre> que ens indica que aquell fragment de text està
preformatat. Aquesta etiqueta fa que tot allò que hi estigui contingut aparegui
exactament igual en el navegador. És a dir, es respecten els espais, els salts de
línia, etc.
Vegem, com a exemple, una estructura de directoris “dibuixada” mitjançant

caràcters. El codi és el següent:
1 <pre>
2 |−−web
3 | |−−imatges
4 | | |−−img1.png
5 | | |−−img2.jpg
6 | | |−−img3.gif
7 | | |...
8 | |−−videos
11 | | |...
12 | |−−audios
13 | | |−−audio1.ogg
14 | | |−−audio2.mp3
15 | | |...
16 | |−−javascript
17 | | |−−llibreria1.js
18 | | |−−codificacio.js
19 | |−−css
22 | | |...
23 | |−−pagines
24 | | |−−quisom.html
27 | | |−−contacte.html
28 | | |...
29 | |−−index.html
30 | |...
31 </pre>
Aquest codi es visualitza com veiem en la figura 2.8.
Fig ur a 2 . 8 . Exemple de text preformatat

2.2.9 Codi de programació
Si en una pàgina web volem incloure codi de programació, tenim diverses

etiquetes que ens ajuden a formatar aquest codi. A continuació s’exposen aquestes
etiquetes i l’ús que tenen:
• <code>: ens serveix per marcar codi de programació en si.
• <samp>: serveix per posar el text obtingut en la sortida d’un programa.
• <kbd>: s’usa per dir a l’usuari què ha de teclejar.
• <var>: serveix per marcar variables o paràmetres de programes.
Tots aquests elements són elements de línia.
En les línies de codi següents, que són un exemple de codificació amb JavaScript,
podem veure com es poden usar les etiquetes descrites:
1 <p>En prémer el botó ens apareixerà el text <samp>Introdueix el teu nom:</samp>

</p>
2
3 <p>La línia de codi <codi>var <var>nom</var> = prompt("Introdueix el teu nom:",
"");</codi>
4 fa que l’aplicació web ens demani el nostre nom i el desa a la variable <var>
nom</var>.</p>
5
6 <p>Recordeu que per tancar la finestra podem usar la combinació de tecles <kbd>
Alt</kbd> +
7 <kbd>F4</kbd></p>
Aquest codi el podem veure en un navegador tal com es mostra en la figura 2.9.
Fig u ra 2 . 9 . Exemple amb etiquetes per representar codi de programació

2.2.10 Etiquetes sense atributs semàntics
Hi ha dues etiquetes que no tenen un significat semàntic concret. Això ens serveix
per delimitar un tros de text o dades que no s’adeqüen a cap de les etiquetes
existents. Divitis
Amb el pas del temps, cada cop
Per crear un element de bloc genèric usem l’etiqueta <div> i per crear un element s’ha fet més ús de l’etiqueta
<div> per tal de maquetar
de línia genèric usem l’etiqueta <span>. pàgines web. Aquest fenomen
s’anomena a vegades divitis, i fa
referència a l’abús d’aquesta
L’etiqueta <div> ha estat, i és, especialment útil a vegades per maquetar o fer el etiqueta. La nova versió
d’HTML, l’HTML5, incorpora
layout d’un document, és a dir, crear àrees d’agrupacions de contingut per donar- noves etiquetes per establir la
capçalera i peus de pàgina de la
li estructura a un document o bé una estètica concreta amb l’ajuda de CSS a tota web, el menú, les seccions...
Això ens permetrà no haver
l’agrupació. d’usar tantes etiquetes <div>.
Actualment <div> és fa servir moltíssim, però altres etiquetes d’HTML5 han

substituït part del seu ús, amb funcions similars a la que afegeixen una orientació
semàntica al contingut. Aquestes etiquetes les veurem detalladament en altres
apartats, però un exemple il·lustratiu seria per exemple l’etiqueta <footer>, que
serveix per crear el peu del document, ja que és un element bloc com el <div>,
però ens informa alhora que la ubicació d’aquest bloc és a la part inferior de la
pàgina.
També heu de pensar que pels cercadors de contingut (Google, Yahoo, etc.)
aquesta informació semàntica és molt útil per filtrar contingut.
En l’exemple següent observem l’ús de l’etiqueta <div> per a la creació de

diverses capes ubicades a diferents àrees del document visible per l’usuari: la
capçalera, la barra lateral, el cos de la web i el peu de pàgina.
1 <div id="capcalera">
2 <!−− contingut de la capçalera (logo, títol, navegació interna...)−−>
3 </div>
4
5 <div id="lateral">
6 <!−− contingut del menú lateral (enllaços d’interès, informació...) −−>
7 </div>
8
9 <div id="contingut">
10 <!−− contingut (el contingut de la pàgina) −−>
11 </div>
12
13 <div id="peu">
14 <!−− contingut del peu de pàgina (informació sobre drets d’autoria, crèdits,
aspectes
15 legals)−−>
16 </div>
Heu de pensar que gràcies a aquesta estructura, un cop haguem incorporat l’ús
de CSS, podrem maquetar la pàgina web al nostre gust, però és molt aconsellable
no assignar noms als id’s que indiquin una posició exacta, ja que actualment les
pàgines modifiquen les posicions dels blocs en funció de la pantalla amb la qual
les consultem, és a dir, no és el mateix un disseny per veure amb mòbil, o amb una
tauleta, o amb un ordinador; és el que s’anomena disseny adaptatiu o responsive
web design (RWD) en anglès.
2.3 Etiquetes estructurals

Blogs
Un blog (en anglès, blog) o
bitàcola, és una pàgina web que
Moltes pàgines web disposen d’una estructura similar o tenen àrees molt diferen-
actua com a diari personal. Els
blogs estan dissenyats perquè
ciades: tenen una capçalera, un menú de navegació, un cos on va el gruix de la
cada article tingui data de informació, articles, seccions amb informació concreta i un peu de pàgina. Així
publicació i l’article més nou
aparegui el primer. doncs, quan maquetem una web podem dividir-la en diferents seccions. A més,
moltes webs estan conformades principalment d’articles com, per exemple, els
blogs, els diaris o portals d’informació.
En les versions anteriors d’(X)HTML, en no haver-hi etiquetes específiques per

designar tots aquests apartats dels llocs web, s’acabava usant l’etiqueta genèrica
<div> amb un identificador que definia aquella capa de la pàgina. També
s’usaven altres estratègies com la maquetació amb taules o marcs, estratègies que
actualment s’han quedat obsoletes per la seva poca flexibilitat.
HTML5 inclou diverses etiquetes que solucionen aquest problema. Les veiem
Logotip típic per a la sindicació
Sindicació webweb
llistades a continuació:
La sindicació web és una tècnica
que permet que els articles d’un
lloc web estiguin disponibles des • <section>: secció genèrica del document que agrupa contingut similar.
d’un altre lloc web.
• <header>: capçalera d’un document o secció.
• <footer>: peu d’un document o secció.
• <nav>: un bloc de navegació.
• <article>: especifica un article: una notícia, article d’un blog... Se suposa

que pot ser distribuït de manera independent, per exemple per a la sindicació
de continguts.
• <aside>: relacionat amb una àrea que envolta altre contingut d’un mateix
element contenidor.
Posem a continuació un exemple de maquetació d’una web amb dues columnes,

capçalera, peu de pàgina, barra de navegació i uns quants articles.
Vegem primer com es podria fer amb HTML5 i divs:
1 <!DOCTYPE html>
2 <head>
4 <meta charset=utf−8">
5 </head>
6 <body>
7 <div id="cap">
8 ...
9 </div>
10 <div id="menu">
11 ...
12 </div>
14 ...
15 </div>
16 <div id="cos">
17 <div id="article1">
18 ...
19 </div>
20 <div id="article2">
21 ...
22 </div>
23 </div>
24 <div id="peu">
25 ...
26 </div>
27 </body>
28 </html>
Vegem ara com podríem codificar aquest mateix document usant algunes les
etiquetes estructurals d’HTML5:
1 <!DOCTYPE html>
2 <head>
3 <meta charset=utf−8">
5 </head>
6 <body>
7 <header>
8 ...
9 </header>
10 <nav>
11 ...
12 </nav>
13 <aside>
14 ...
15 </aside>
16 <section>
17 <article>
18 ...
19 </article>
20 <article>
21 ...
22 </article>
23 </section>
24 <footer>
25 ...
26 </footer>
27 </body>
28 </html>
2.4 Enllaços
Destins dels enllaços

L’èxit de la WWW (World Wide Web) és el fet de poder “navegar”, és a dir, de El destí d’un enllaç no ha de ser
sempre un altre document
poder saltar d’un document a un altre a partir d’enllaços. Aquesta manera de (X)HTML. Pot ser una imatge,
un fitxer de so, un fitxer de
navegar va ser revolucionària ja que als documents impresos, la lectura i ordenació vídeo...
dels continguts és vertical, mentre que els enllaços permeten en tot moment saltar
d’un contingut a l’altre, i no necessàriament s’ha de donar una lectura vertical,
i afegir contingut relacionat en qualsevol moment. El sistema que ens permet
aquesta navegació s’anomena hipertext.
L’hipertext
“L’hipertext és un sistema d’organització i presentació de dades que permet a l’usuari de

moure’s amb gran facilitat entre ítems relacionats.”
Gran Diccionari de la llengua catalana, Gran Enciclopèdia Catalana
L’etiqueta que té HTML per crear hiperenllaços és l’etiqueta <a>. Els elements
<a> són elements de línia, ja que podem posar enllaços envoltats de text.
Per indicar quin és el destí del nostre enllaç usem l’atribut href. També és
convenient usar l’atribut genèric de tipus global title per posar una breu
descripció de l’enllaç.
2.4.1 Enllaços a pàgines externes
Si volem fer un enllaç a una pàgina externa a la nostra aplicació web hem de saber
l’URL complet del document al qual volem fer l’enllaç.
Imaginem que volem fer un enllaç a un article que es pot trobar a l’URL http://
www.creativebloq.com/web-design/10-top-html5-resources-413919, però
que el text que volem que aparegui en el navegador és simplement “Recursos
HTML5”. El codi que hem d’introduir és el següent:
1 <p><a href="http://www.creativebloq.com/web−design/10−top−html5−resources
−413919" title="Article HTML 5">Recursos HTML5
2 5</a></p>
La majoria de navegadors ens mostraran l’enllaç anterior de color blau i subratllat.

A més, quan ens hi posem a sobre apareixerà el text que haguem posat en l’atribut
title.
2.4.2 Enllaços a pàgines locals
Si l’enllaç que volem fer està dirigit a un document HTML local, és a dir, a un
document que pertany a la mateixa aplicació web, posem, com a valor de l’atribut
href, el camí relatiu al fitxer al qual volem fer l’enllaç.
Com a exemple, imaginem que estem codificant un fitxer de nom index.html,

que és la pàgina d’inici del portal o aplicació, en el qual tenim un menú amb
diferents enllaços que van a les diferents seccions del lloc web. Aquí teniu el
fragment de codi del fitxer index.html:
1 <nav>
2 <a href="index.html" title="Tornar a la pàgina d’inici">Inici</a>
3 <a href="seccions/fotos.html" title="Fotos de la web">Veure les fotos</a>
4 <a href="seccions/activitats.html" title="Activitats actuals">Activitats</a>
5 <a href="seccions/projectes.html" title="Projectes actuals">Projectes</a>
6 <a href="contacte.html" title="Formulari de contacte">Contacte</a>
7 </nav>
En aquest exemple estem suposant que els fitxers de l’aplicació estan organitzats
amb la següent estructura de directoris:
1 |−−web
2 |−−seccions
3 | |−−fotos.html
4 | |−−activitats.html
5 | |−−projectes.html
6 |
7 |−−index.html
8 |−−contacte.html
La gran majoria de navegadors visualitzarien el codi anterior com es reflecteix en

la figura 2.10. A més, a la majoria de navegadors podem veure l’URL destí a la
barra d’estat del navegador quan ens situem damunt de l’enllaç.
F ig ur a 2. 10 . Exemple d’enllaç a pàgines locals
2.4.3 Àncores
Alguns documents HTML són molt extensos i ens pot interessar navegar dins la
mateixa pàgina. Per poder fer això hem de fer servir l’atribut global id de les
etiquetes per forçar els punts on volem anar, i posteriorment crear enllaços que hi
apuntin, que posicionaran la pàgina en el lloc concret quan hi cliquem.
Els punts on volem anar s’anomenen àncores. Si, per exemple, volem fer una
àncora a un element <h2> hem d’escriure el codi següent:
1 <h2 id="seccio1">Secció 1</h2>
Un cop tenim feta l’àncora, hi podem enllaçar des de qualsevol punt del text fent
un enllaç a l’àncora. Els enllaços a àncores es caracteritzen perquè el destí es
denota amb el valor de l’atribut id de l’element al qual volem enllaçar precedit
del caràcter #. Si volem enllaçar a l’àncora creada en l’exemple anterior, escriurem
el codi següent:
1 <a href="#seccio1" title="Secció 1">Anar a la secció 1</a>
Imaginem ara un text molt llarg amb diferents seccions. Per tenir una bona
navegabilitat podem crear un petit índex a l’inici del document que tingui enllaços
cap a les diferents parts del document. A més, també podem fer enllaços que ens
condueixin a l’inici del document:
1 <h1 id="dalt">Seccions</h1>
2
3 <div id="menu">
7 </div>
8
10 <p>...</p>
11 <p><a href="#dalt" title="A dalt">Anar a dalt</a></p>
12
14 <p>...</p>
16
18 <p>...</p>
Si el que volem és enllaçar a una àncora des d’un altre document podem fer el
següent:
1 <a href="seccions.html#seccio1" title="Secció 1">Anar a la secció 1</a>
2.5 Imatges
Les imatges són un recurs molt utilitzat en el desenvolupament web. A part de

fer més atractiva la nostra aplicació, ens permeten donar informació d’una manera
visual.
Tot i això, hem de vigilar de no abusar de posar massa imatges: hem d’anar amb
cura tant amb el nombre d’imatges, com amb el pes i mida d’aquestes imatges.
El pes d’aquestes imatges pot fer que la navegació per la nostra aplicació sigui
massa lenta, ja que s’ha de descarregar al navegador per tal que sigui visible. Per
aquest motiu es recomana:
• Fer servir imatges comprimides amb JPEG, PNG, GIF, etc. per tal de reduir
els temps de descàrrega.
• Ajustar la grandària de les imatges per tal que s’ajusti a la pàgina prèviament
a introduir-les a la maquetació, i evitar fer servir els seus atributs (width o
height) per reduir-ne la grandària.
L’etiqueta que ens serveix per inserir una imatge és l’etiqueta <img>. Es tracta
d’un element de línia que no té etiqueta de tancament: es tanca en ella mateixa.
L’atribut src ens servirà per dir on està ubicada la imatge: podem posar un URL
extern o el camí del fitxer, si disposem de la imatge localment. També usarem
l’atribut alt, que ens servirà per posar un text alternatiu, en el cas que el navegador
no pogués mostrar o accedir a la nostra imatge. Aquest atribut també és útil pels
screen readers, és a dir, software llegeix les planes web i les textualitza per tal de
ser escoltades per persones amb dèficit visual.
Si, per exemple, volem inserir una imatge que tenim al directori de nom imatges
que es diu logo.png i, si no es pot visualitzar aquesta imatge, volem que surti el
text “Logo de la web”, hem d’escriure el codi següent:
1 <img src="imatges/logo.png" alt="Logo de la web" />
En el cas que vulguem que una imatge sigui un enllaç, haurem d’enviar correc-
tament les etiquetes <a> i <img>. Per exemple, si volem incorporar el logotip
del W3C per destacar que la nostra pàgina ha passat el nivell de conformitat
d’accessibilitat AA i, a més, volem enllaçar aquesta imatge cap al validador en
línia que ens ofereix el W3C (i així mostrar que realment el nostre document és
vàlid), posarem el codi següent: Els nivells de conformitat
d’Accessibilitat es
fonamenten en la valoració
1 <a href="http://www.w3.org/WAI/WCAG2AA−Conformance" title="Explanation of WCAG d’uns indicadors regulats
2.0 Level Double−A Conformance"> pel W3C, que determinen
2 <img height="32" width="88" quin nivell d’assoliment de
conformitat compleix una
3 src="http://www.w3.org/WAI/wcag2AA" pàgina web dels tres que
4 alt="Level Double−A conformance, existeixen A, AA i AAA. Un
5 W3C WAI Web Content Accessibility Guidelines 2.0"> nivell superior (AAA) indica
que és una pàgina molt més
6 </a> accessible per a tothom.
En la figura 2.11 podem veure com es veu el codi anterior en el navegador.
Fi g ura 2 .11 . Exemple d’imatge amb enllaç
2.6 Panell de dibuix o llenç
HTML5 incorpora una etiqueta que ha revolucionat el món web: es tracta de

l’etiqueta <canvas>. Aquesta etiqueta defineix un panell de dibuix o llenç.
No és l’objectiu d’aquest
Si la combinem amb l’ús del llenguatge de programació JavaScript, es poden curs aprendre JavaScript. El
codi aquí mostrat només és
aconseguir efectes fascinants, tant dibuixant com animant. Ara bé, sense usar a tall d’exemple. Un molt
JavaScript no podem treure gaire partit d’aquesta etiqueta. bon portal per aprendre a
dibuixar formes bàsiques, el
trobareu als
desenvolupadors de Mozilla
Vegem un exemple, usant una mica de JavaScript:
1 <!doctype html>
2 <html>
3 <head>
5 <title>.:: Càmera amb Canvas</title>
6 </head>
7 <body>
8 <canvas id="canvas">
9 El teu navegador no suporta l’etiqueta <canvas>.
10 </canvas>
11 <script>
12 var canvas = document.getElementById(’canvas’);
13 var ctx = canvas.getContext(’2d’);
14
15 canvas.width = 700;
16 canvas.height = 500;
17
18 // fons
19 ctx.fillRect(0, 0, canvas.width, canvas.height);
20
21 // Quadrat central
22 ctx.fillStyle = ’rgba(255, 255, 0, 1.0)’;
23 ctx.fillRect(200, 200, 250, 150);
24
25 //Triangle
26 ctx.beginPath();
27 ctx.moveTo(450,270);
28 ctx.lineTo(540,320);
29 ctx.lineTo(540,220);
30 ctx.fillStyle = ’rgb(255, 255, 0)’;
31 ctx.fill();
32
33 // cercle gran
34 ctx.beginPath();
35 ctx.arc(240, 140, 60, 0, (Math.PI/180)*360, false);
37 ctx.fill();
38
39 // cercle petit
40 ctx.beginPath();
41 ctx.arc(370, 160, 40, 0, (Math.PI/180)*360, false);
43 ctx.fill();
44
45 </script>
46 </body>
47 </html>
Veiem en la figura 2.12 el resultat del nostre codi tal com es veuria en el navegador.
Fi gura 2.1 2 . Una imatge iconogràfica d’una càmera feta amb el llenç d’HTML5 i
JavaScript
L’exemple aquí mostrat és extremadament simple. S’ha de tenir en compte que

amb aquesta etiqueta i JavaScript més avançat es poden arribar a fer animacions
espectaculars.
2.7 Àudio
Per reproduir so usarem l’etiqueta <audio>, que permet la reproducció de fitxers

de so, i que tenim disponible exclusivament a HTML5. Els atributs més rellevants
són:
• autoplay: si l’activem posant autoplay=“autoplay”, el so començarà a

sonar un cop el fitxer s’hagi carregat.
• controls: si l’activem posant controls=“controls”, es mostraran uns

controladors a l’usuari (per engegar l’àudio, pausar-lo, canviar el volum...)
• loop: si l’activem posant loop=“loop”, un cop acabat de reproduir el so,

tornarà a començar.
• src: especifica on és el fitxer d’àudio que volem reproduir. Si volem que el

navegador tingui diverses alternatives, és millor usar l’etiqueta <source>,
que anirà dins de l’etiqueta <audio>.
L’etiqueta <source> s’insereix dins l’etiqueta <audio> i ens serveix per donar
diverses alternatives de format de fitxer al navegador, ja que no tots els navegadors
suporten tots els formats. Així, si el navegador no suporta un format d’àudio, en
podrà escollir un altre. A la taula 2.1 es mostren les compatibilitats per diversos
navegadors i formats d’àudio.
Tau la 2 . 1 . Taula de compatibilitats navegadors i formats d’àudio
Navegador MP3 Wav Ogg
Firefox Suportat Suportat Suportat
Chrome Suportat Suportat Suportat
Opera Suportat Suportat Suportat
Safari Suportat Suportat No suportat
Internet Explorer Suportat No suportat No suportat
Navegadors i formats d’àudio.

Per convertir formats
d’àudio i fins i tot
manipular àudio, existeix
programari exclusiu. Un
dels més estesos és
Audacity.
Imaginem que volem reproduir un enregistrament d’àudio en una web en format

.ogg. Per si el navegador de l’usuari no pot reproduir ”.ogg”, volem oferir també el
format ”.mp3” . A més, volem que l’enregistrament es reprodueixi indefinidament
i volem que l’usuari disposi dels controls per pausar o posar en marxa l’àudio. Si
els fitxers són enregistrament_audio.ogg i enregistrament_audio.mp3, el
codi seria el següent:
1 <audio controls autoplay loop>

2 <source src="enregistrament_audio.ogg" type="audio/ogg">
3 <source src="enregistrament_audio.mp3" type="audio/mpeg">
4 El teu navegador no suporta l’etiqueta d’àudio.
5 </audio>
En aquest cas, el navegador intentaria reproduir el fitxer

enregistrament_audio.ogg i si no pogués reproduiria
enregistrament_audio.mp3. Si no suportés aquesta etiqueta donaria el
missatge d’error a l’usuari.
El resultat de l’ús d’aquesta etiqueta, és el que mostra la figura 2.13, tot i que
depenent del navegador l’estètica del reproductor pot variar.
Fig u ra 2 . 1 3 . Reproducció d’àudio amb l’etiqueta ”<audio>”
Igualment l’etiqueta <audio> es pot combinar amb codi JavaScript per tenir un
millor control i donar-li molts més usos, per exemple a l’hora de fer llistes de
reproducció o jocs.
2.8 Vídeo
De la mateixa manera que amb l’àudio, tenim l’etiqueta <video>, per reproduir
vídeo en HTML5. Els atributs més rellevants són:
• autoplay: si l’activem posant autoplay=“autoplay”, el vídeo es comen-

çarà a reproduir un cop s’hagi carregat.
• controls: si l’activem posant controls=“controls”, es mostraran uns

controladors a l’usuari (per començar a reproduir el vídeo, pausar-lo,
canviar el volum...)
• loop: si l’activem posant loop=“loop”, un cop acabat de reproduir el

vídeo, tornarà a començar.
• src: especifica on és el fitxer de vídeo que volem reproduir. Si volem que el

navegador tingui diverses alternatives, és millor usar l’etiqueta <source>,
que anirà dins de l’etiqueta <video>.
• height i witdh: especifiquen respectivament l’alçada i l’amplada en píxels

del reproductor de vídeo.
• muted: si l’activem posant muted=“muted”, el vídeo no tindrà so.
• poster: serveix per posar la URL d’una imatge mentre el vídeo es

descarrega o fins que l’usuari premi el botó d’inici de reproducció.
L’etiqueta <source> actua igual que en l’etiqueta <audio>: s’insereix dins

l’etiqueta <video> per tal de donar diverses alternatives de format al navegador,
ja que no tots els navegadors són capaços de reproduir tots els formats de vídeo
disponibles. A la taula 2.2 teniu una llista de compatibilitats:
Tau l a 2 .2 . Taula de compatibilitats navegadors i formats de vídeo
Navegador MP4 WebM Ogg
Firefox Darreres versions Suportat Suportat
Chrome Suportat Suportat Suportat
Opera Darreres versions Suportat Suportat
Safari Suportat No suportat No suportat
Internet Explorer Suportat No suportat No suportat
Navegadors i formats de vídeo.
Vegem un exemple d’inserció d’un vídeo amb aquesta etiqueta:
1 <video width="500" height="500" controls="controls">

2 <source src="media/anunci.ogv" type="video/ogg" />
3 <source src="media/anunci.mp4" type="video/mp4" />
4 El teu navegador no té suport per a l’etiqueta de vídeo.
5 </video>
2.9 Llistes
Les llistes són el recurs que ens serveix per fer una enumeració. Hi ha tres tipus
de llista: les llistes ordenades, les llistes desordenades i les llistes de definició.
Tot i que inicialment, les llistes ordenades <ol> i desordenades <ul> són molt
diferenciades, des de CSS podem modificar l’estètica i arribar a obtenir el mateix
aspecte.
2.9.1 Llistes ordenades
Les llistes ordenades són les llistes en què necessitem que els elements estiguin
numerats. Per marcar l’inici i el final de la llista usem l’etiqueta <ol> (ordered
list) i per marcar cada element de la llista usem l’etiqueta <li> (list item).
Imaginem que estem fent una recepta de cuina i volem enumerar els passos que
hem de seguir. El codi seria el següent:
1 <h2>Preparació</h2>
2 <ol>
3 <li>Batre els ous</li>
4 <li>Escalfar l’oli en una paella</li>
5 <li>Tirar els ous batuts a la paella</li>
6 <li>Embolicar la truita</li>
7 </ol>
En la figura 2.14 podem veure la visualització de l’exemple en un navegador,

juntament amb una llista ordenada.
F igu ra 2 .1 4 . Exemple de llista ordenada

2.9.2 Llistes desordenades
Les llistes desordenades són les llistes en què no necessitem que els elements
estiguin numerats, és a dir, no cal tenir en compte l’ordre de l’enumeració. Per
marcar l’inici i el final de la llista usem l’etiqueta <ul> (unordered list) i per
marcar cada element de la llista usem l’etiqueta<li> (list item).
Si, per exemple, volem llistar tots els ingredients necessaris per fer una truita a la
francesa, ho codifiquem de la manera següent:
1 <h2>Ingredients</h2>
2 <ul>
3 <li>Ous</li>
4 <li>Sal</li>
5 <li>Oli</li>
6 </ul>
En la figura 2.15 podem veure la visualització d’aquesta llista no numerada.
F ig ur a 2. 15 . Exemple de llista no ordenada
2.9.3 Llistes de definició
Les llistes de definició es caracteritzen per ser una enumeració de definicions de

termes. Per tant, els ítems de les llistes de definició estan formats per dos elements:
el terme i la definició d’aquest terme. Per marcar l’inici i el final de la llista
usem l’etiqueta <dl> (definition list); per a cadascun dels termes s’usa l’etiqueta
<dt> (definition term), i per a cadascuna de les definicions s’usa l’etiqueta <dd>
(definition description).
Si per exemple volguéssim definir els termes HTML, CSS i JavaScript, podem
usar aquest tipus de llistes, que es visualitzen com mostra la figura 2.16.
1 <dl>
2 <dt>HTML</dt>
3 <dd>Llenguatge de marques dissenyat per estructurar textos i relacionar−los
en forma
4 d’hipertext.</dd>
5
6 <dt>CSS</dt>
7 <dd>Llenguatge creat per definir l’aspecte de documents estructurats amb HTML
principalment.</dd>
8
9 <dt>JavaScript</dt>
10 <dd>Llenguatge de programació interpretat, que fem servir principalment al
navegador, per donar més dinamisme als documents HTML.</dd>
11 </dl>
F igu r a 2. 1 6 . Llista de definició
2.9.4 Enniuament de llistes
Si volem fer llistes complexes, és a dir, inserir llistes dins d’altres llistes, també
podem fer-ho. Només hem de vigilar d’obrir i tancar les etiquetes correctament:
si volem encapsular una llista, ja sigui numerada o no numerada. Aquesta llista
ha de ser dins d’un ítem (<li>) de la llista mare.
Com a exemple, podem pensar els passos per la realització d’un disseny web de
l’entorn client:
1 <h1>Fases en la realització d’un disseny web.</h1>

2 <ol>
3 <li>Realització de l’esbós.</li>
4 <li>Realització del prototip.
5 <ol>
6 <li>Escollir eines de disseny.
7 <ul>
8 <li>Eina de creació tipogràfica</li>
9 <li>Eina de creació de l’esquema de colors</li>
10 <li>Eina de dibuix</li>
11 </ul>
12 </li>
13 <li>Creació de la guia d’estil.</li>
14 </ol>
15 </li>
16 <li>Realització del layout.
17 <ul>
18 <li>Elecció llenguatges.</li>
19 <li>Proves a diferents navegadors.</li>

20 <li>Proves a diferents resolucions.</li>
21 </ul>
22 </li>
23 <li>Entrega de les plantilles al client.</li>
24 </ol>
Aquest exemple es veuria com es mostra en la figura 2.17.
F ig ur a 2. 17. Exemple d’enniaument de llistes
2.10 Taules
Les taules són un recurs que ens permet mostrar informació tabulada en files i
columnes.
Antigament molts llocs web feien servir les taules per maquetar la seva estructura,
és a dir, si per exemple, la web té un menú lateral i un cos, es codifica una taula
de dues columnes i es posa el contingut de la web en les cel·les d’aquesta taula.
Actualment no és treballa així, i hem d’evitar aquesta pràctica, ja que complica el
codi innecessàriament, i dóna poca flexibilitat a l’hora de redistribuir columnes en
dissenys per mòbils o tauletes, és a dir, no es pot fer una web adaptativa.
Per maquetar actualment hem de fer ús dels elements <div> conjuntament amb
fulls d’estils CSS, o elements estructurals i semàntics com ja hem vist a apartats
anteriors. Podem usar etiquetes com ara, <header>, <footer>, <section>,
<aside>, etc.
L’ús de taules té molta utilitat quan és per presentar informació tal com ho
faríem amb full de càlcul; taules que acompanyen informació estadística,
llistes de resultats, llistats comparatius, enumeració tabulada, etc.
Hem de restringir, doncs, l’ús de les taules a la informació tabular. A continuació,

enumerem les etiquetes bàsiques per fer taules:
• <table>: estableix on comença i on acaba una taula. Els seus atributs són:
– summary: petit resum del propòsit de la taula.

– width: amplada de la taula.
– border: indica la mida de la vora de la taula.
– cellpadding: indica l’espai entre les vores de la cel·la fins al
contingut de la cel·la.
– cellspacing: indica l’espai entre cel·les.
• <caption>: títol associat a la taula.
• <tr>: estableix on comencen i acaben cadascuna de les files d’una taula.

Els seus atributs són:
– align: alineació horitzontal.

– valign: alineació vertical.
• <td>: estableix on comencen i acaben cadascuna de les cel·les d’una fila.

Els seus atributs són:
– rowspan: nombre de files d’expansió.

– colspan: nombre de columnes d’expansió.
• <th>: cel·la de capçalera. Té els mateixos atributs que l’etiqueta <td>.
• <thead>: ens permet agrupar les diferents files de la taula que formen la
capçalera d’aquesta taula. Els seus atributs són:
– align: alineació horitzontal.

– valign: alineació vertical.
• <tfoot>: ens permet agrupar les diferents files de la taula que en formen
el peu. Té els mateixos atributs que l’etiqueta <thead>.
• <tbody>: ens permet fer diferents agrupacions de files de la taula. Té els

Grups de columnes
mateixos atributs que l’etiqueta <thead>.
Igual que podem fer agrupacions
de files d’una taula, també es
poden agrupar les columnes Per crear una taula, hem de marcar l’inici i el final amb l’etiqueta <table>. Dins
d’una taula usant les etiquetes
<colgroup> i <col>. Podeu d’aquest element hem de posar tants elements <tr> com files tingui la taula.
trobar més informació de com
fer-ho a Finalment, dins de cada element <tr> hem de posar tants elements <td> com
http://www.w3.org/
TR/html401/struct/ columnes tingui la taula. Si les cel·les són cel·les de capçalera, és a dir, tenen
tables.html#h-11.2.4 certa rellevància, en lloc de posar l’etiqueta <td> posem l’etiqueta <th>.
De vegades voldrem agrupar les files en grups, per denotar quines files formen
la capçalera de la taula, quines el peu i si hi ha diferents agrupacions en les files
que conformen el cos de la taula. Per tal de fer això, usem les etiquetes <thead>,
<tfoot> i <tbody>, respectivament.
Imaginem que volem fer una taula de 7 files i 2 columnes. La primera fila és la
capçalera de la taula; les cinc següents conformen el cos de la taula, i l’última és
el peu. Tindrem el codi següent, el resultat del qual es pot veure en la figura 2.18:
1 <table border="1">
2 <thead>
3 <tr>
4 <th>Alumne</th>
5 <th>Nota</th>
6 </tr>
7 </thead>
8 <tfoot>
9 <tr>
10 <th>Mitjana</th>
11 <th>5</th>
12 </tr>
13 </tfoot>
14 <tbody>
15 <tr>
16 <td>Albert Pàmies</td>
17 <td>3</td>
18 </tr>
19 <tr>
20 <td>Sara Ortega</td>
21 <td>10</td>
22 </tr>
23 <tr>
24 <td>José González</td>
25 <td>6,5</td>
26 </tr>
27 <tr>
28 <td>Laia Nieto</td>
29 <td>4,5</td>
30 </tr>
31 <tr>
32 <td>Raúl Valverde</td>
33 <td>6</td>
34 </tr>
35 </tbody>
36 </table>
Fig ur a 2 . 1 8. Taula simple

Observem que, en el codi, la fila que fa de peu de taula es pot escriure abans que
les que fan de cos, ja que el navegador ja sap que és el peu, atès que està marcat
amb l’etiqueta <tfoot>.
2.10.1 Expansió de files i columnes
Les taules simples ens permeten fer una quadrícula de x files i y columnes, però
ens podem trobar amb la necessitat de voler fusionar cel·les tan horitzontalment
com verticalment. Per aconseguir aquest objectiu l’etiqueta <td> disposa de dos
atributs: colspan i rowspan.
L’atribut colspan serveix per fusionar dues o més cel·les horitzontalment. L’atri-
but es posa a la cel·la que ha d’ocupar més d’una columna i se li dóna com a valor
el nombre de columnes que ha d’ocupar.
L’atribut rowspan serveix per fusionar dues o més cel·les verticalment. L’atribut
es posa a la cel·la que ha d’ocupar més d’una fila i se li dóna com a valor el nombre
de files que ha d’ocupar.
Imaginem que volem posar l’horari escolar que es veu en la figura 2.19. Per
aconseguir-ho hem d’escriure el codi següent:
1 <table border="1">
2 <caption>Horari</caption>
3 <thead>
4 <tr>
5 <th> </th>
6 <th>Dilluns</th>
7 <th>Dimarts</th>
8 <th>Dimecres</th>
9 <th>Dijous</th>
10 <th>Divendres</th>
11 </tr>
12 </thead>
13 <tbody>
14 <tr>
15 <td>16.00−16.55</td>
16 <td rowspan="2">Bases de dades</td>
17 <td rowspan="2">Xarxes</td>
18 <td rowspan="2">Programació Estructurada</td>
19 <td>Xarxes</td>
20 <td>Bases de dades</td>
21 </tr>
22 <tr>
23 <td>16.55−17.50</td>
24 <td rowspan="2">Sistemes Operatius</td>
25 <td rowspan="2">Xarxes</td>
26 </tr>
27 <tr>
28 <td>17.50−18.45</td>
29 <td>Programació Estructurada</td>
31 <td>Bases de dades</td>
32 </tr>
33 </tbody>
34 <tbody>
35 <tr>
36 <td>18.45−19.15</td>
37 <td colspan="5">Pati</td>
38 </tr>
39 </tbody>
40 <tbody>
41 <tr>
42 <td>19.15−20.10</td>
45 <td rowspan="2">FOL</td>
46 <td rowspan="2">Programació Estructurada</td>
47 <td rowspan="2">RAT</td>
48 </tr>
49 <tr>
50 <td>20.10−21.05</td>
51 <td rowspan="2">Sistemes Operatius</td>
52 <td>Sistemes Operatius</td>
53 </tr>
54 <tr>
55 <td>21.05−21.45</td>
56 <td> </td>
57 <td> </td>
58 <td>Tutoria</td>
59 <td> </td>
60 </tr>
61 </tbody>
62 </table>
Figur a 2. 19. Taula amb expansions de files i columnes
2.11 Formularis
Els formularis web ens serveixen per interactuar amb l’usuari i perquè aquest
usuari ens pugui transmetre informació. Aquesta informació es pot processar de
diferents maneres, segons les necessitats de l’aplicació web.
Tècnicament, un formulari no és altra cosa que un fragment de codi HTML que

conté uns elements característics anomenats controls o camps. Tenim diversos
tipus de control: camps de text, camps de contrasenya, botons d’opció (radio
buttons), caselles de verificació (checkbox), camps per introduir fitxers, llistes de
selecció, àrees de text i botons. En la figura 2.20 podeu veure un exemple de
formulari amb part d’aquests controls.
F igu r a 2. 2 0 . Controls d’un formulari bàsics
El tipus d’elements que es mostren a la figura es corresponen amb:
1. Camps de tipus text
2. Camps de tipus password
3. Camp de tipus email
4. Llista de selecció
5. Botons d’opcions
6. Camp de tipus file
7. Caselles de verificació
8. Àrea de text
9. Botons de tipus submit i reset de formulari
Cadascun dels controls d’un formulari ha de tenir l’atribut name, amb el qual
s’identifica la dada que es vol enviar.
Posem un exemple: tenim un camp de text l’objectiu del qual és que l’usuari
introdueixi el seu nom i suposem que l’usuari introdueix “Pau”. Si el valor de
l’atribut name del camp de text és nom (name=“nom”), la informació que s’enviarà
és nom=Pau. Fixem-nos en el codi d’aquest formulari:
1 <h3> :: Formulari de registre al Portal:: </h3>

2 <form name="formulari" method="POST" action="proces.asp">
3 <fieldset>
4 <legend>Dades personals</legend>
5 <input type="hidden" name="oculto" value="0">
6 <div>
7 <label for="inom">Nom:</label>
8 <input type="text" name="nom" id="inom" placeholder="Nom">
9 <label for="icognoms">Cognoms:</label>
10 <input type="text" name="cognoms" id="icognoms" placeholder="Cognoms">
11 </div>
12 <div>
13 <label for="idni">DNI:</label>
14 <input type="text" name="idni" placeholder="P.ex: 45987989X">
15 </div>
16 <div>
17 <label for="iusername">Username:</label>
18 <input type="text" id="iusername" name="username">
19 <label for="iclau">Clau:</label>
20 <input type="password" id="iclau" name="clau">
21 <label for="ireclau">Repetir Clau:</label>
22 <input type="password" id="ireclau" name="reclau">
23 </div>
24 <div>
25 <label for="iemail">E−Correu:</label>
26 <input type="text" name="email" id="iemail" placeholder="usuari@domini.org"
>
27 <label for="ifranjaedat">Franja d’edat: </label>
28 <select name="edat" id="ifranjaedat">
29 <option value="menor16">Menor que 16 anys</option>
30 <option value="menor21">Entre 16 i 21 anys</option>
31 <option value="major21">Major de 21 anys</option>
32 </select>
33
34 </div>
35 <div>
36 Sexe:
37 <input type="radio" name="sex" id="ihome" value="home">
38 <label for="ihome">Home</label>
39 <input type="radio" name="sex" id="idona" value="dona">
40 <label for="ihome">Dona</label>
41 </div>
42 <div>
43 </div>
44 <div>
45 <label for="ipais_code">Codi País:</label>
46 <input type="text" id="ipais_code" name="pais_code" pattern="[A−Za−z]{2}"
placeholder="Codi del pais dos caracters">
47 <label for="izip_code">Codi ZIP:</label>
48 <input type="text" id="izip_code" name="zip_code" pattern="[0−9]{5}"
placeholder="El codi postal">
49 </div>
50 <div>
51 <label >Imatge Personal:</label>
52 <input type="file" name="imatge" id="iimatgepersonal">
53 </div>
54 </fieldset>
55 <fieldset>
56 <legend>Altres dades d’interès</legend>
57 <div>Interessos:<br>
58 <input type="checkbox" name="interessos" value="css">
59 CSS
60 <input type="checkbox" name="interessos" value="html5">
61 HTML5
62 <input type="checkbox" name="interessos" value="javascript">
63 Javascript
64 </div>
65 <div><label>Coneixements:</label><br>
66 <input type="checkbox" name="coneixaments" value="xarxessociales">
67 Xarxes Socials
68 <input type="checkbox" name="coneixaments" value="programaciohtml">
69 Programació HTML
70 <input type="checkbox" name="coneixaments" value="programacioCSS">
71 Programació CSS
72 <input type="checkbox" name="coneixaments" value="Disseny">
73 Disseny
74 </div>
75 <div>
76 <label>Comentaris:</label><br>
77 <textarea rows="10" cols="50" name="coment">Aquí disposeu d’espai per
escriure</textarea>
78 </div>
79 </fieldset>
80 <div>
81 <input type="submit" value="Enviar"><input type="reset" value="Esborrar">
82 </div>
83 </form>
Des de l’aparició d’HTML5 el número de tipus de camps es va incrementar

significativament, tot i que no tots els navegadors els suporten tots. Per veure el
seu comportament disposem de planes informatives, on s’indica el tipus de camp
i la versió a partir de la qual el navegador l’ha va integrar si és el cas.
• htmltest.com
• caniuse.com
2.11.1 Propietats d’un formulari
Tota agrupació de camps d’un formulari va emmarcada dins l’etiqueta <form>.

Hem de tenir en compte que podem disposar de més d’un formulari per pàgina
i que cada formulari tindrà els seus camps i que a l’hora d’enviar igualment
cada formulari indicarà qui serà qui processi la informació. L’etiqueta <form>
té diferents atributs, que ens serveixen per dir com volem trametre la informació
que omple l’usuari. A continuació s’enumeren cadascun d’aquests atributs:
• action: el valor d’aquest atribut és el destí on ha d’anar a parar la

informació que l’usuari ha posat en el formulari. Normalment és un URL
amb l’script o programa que ha de processar les dades del formulari, però
també podem fer que la informació es dirigeixi a una adreça de correu
electrònic.
• name: indica el nom que té el formulari, i n’és una referència unívoca.
• method: ens permet dir de quina manera enviem la informació. Tenim dues
possibilitats: si el valor de l’atribut és get enviem la informació juntament
amb l’URL de destí, i d’aquesta manera és visible a la barra de navegació.
Si el valor de l’atribut method és post, la informació s’envia dins de la
capçalera HTTP que fa la petició.
A continuació es mostra un formulari amb dos camps de text que demanen a

l’usuari el seu nom i clau d’accés, i un botó per enviar les dades. Suposem que al
servidor hi ha un script fet amb llenguatge PHP anomenat processa.php, que és
qui rep les dades i les gestiona. Suposem primer que el mètode d’enviament és de
tipus get:
1 <form name="formulariacces" action="processa.php" method="get">

2 <div>
3 <label for="id_nom">Escriu el teu nom: </label>
4 <input type="text" name="nom" id="id_nom"/>
5 </div>
6 <div>
7 <label for="id_clau">Escriu la teva clau: </label>
8 <input type="password" name="clau" id="id_clau" />
9 </div>
10 <div>
11 <input type="submit" value="Envia les dades" />
12 </div>
13 </form>
Si l’usuari entra de nom Sara i de contrasenya secreta, quan premi el botó

per enviar el formulari anirem a parar a l’URL següent: http://elquesigui.org/
processa.php?nom=Sara&clau=secreta.
Suposem que canviem el mètode d’enviar les dades pel mètode de tipus post:
1 <form action="processa.php" method="post">

2 ...
3 </form>
L’URL que veuríem seria http://elquesigui.org/processa.php, però les dades

s’haurien enviat igualment dins la capçalera HTTP.
Capçalera HTTP
Per tal de veure les capçaleres HTTP quan s’usa el mètode POST, podríem usar un
analitzador de xarxes, com pot ser el programa Wireshark. Un exemple de capçalera HTTP
amb POST fent la captura amb aquest programa ens retornaria el següent:
1 POST /processa.php HTTP/1.1

2 Host: localhost
3 User−Agent: Mozilla/5.0 (X11; U; Linux i686; ca; rv:1.8.1.12)
Gecko/20080129 Iceweasel/2.0.0.12 (Debian−2.0.0.12−1)
4 Accept: text/xml,application/xml,application/xhtml+xml,text/html;
q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
5 Accept−Language: ca,es;q=0.8,en−us;q=0.5,en;q=0.3
6 Accept−Encoding: gzip,deflate
7 Accept−Charset: ISO−8859−1,utf−8;q=0.7,*;q=0.7
8 Keep−Alive: 300
9 Connection: keep−alive
10 Referer: http://localhost/formulari_complet.html
11 Content−Type: application/x−www−form−urlencoded
12 Content−Length: 28
13 nom=Sara&clau=secreta
• enctype: aquest atribut ens indica el tipus de contingut que enviem amb
el formulari (quan el mètode és de tipus post). Per defecte, el valor
és application/x-www-form-urlencoded. Si el formulari ens permet
enviar un fitxer hem de canviar aquest valor per multipart/form-data.
2.11.2 Associació de text i controls

Accessibilitat
L’etiqueta <label> està pensada
fonamentalment per tal que la L’etiqueta <label> ens serveix per associar els elements de text explicatius dels
nostra web sigui accessible.
Amb aquesta etiqueta els lectors
controls amb els controls corresponents. L’atribut for de l’etiqueta <label>
de web per a persones cegues ens permet posar l’identificador (atribut id) del control al qual volem associar
llegeixen el formulari en l’ordre
correcte, associant cada text amb l’etiqueta.
el seu control. També serveix
perquè en fer clic damunt del text
contingut en l’etiqueta <label> Per dir que el text Escriu el teu nom està associat al control amb identificador
el control associat rebi el focus.
nom escriurem el següent:
1 <label for="identificadornom">Escriu el teu nom:</label>

2 <input type="text" name="nom" id="identificadornom" />
El resultat és el següent:
F i g ura 2 . 2 1. Camp d’entrada de dades de tipus ”text”
2.11.3 Atributs comuns dels controls d’un formulari
En un formulari, podem
Hi ha uns quants atributs, a part del globals, que podem assignar a cadascun dels
saltar de control en control controls d’un formulari. Els més destacables són els següents:
sense necessitat d’usar el
ratolí o pulsació tàctil,
prement la tecla del
tabulador.
• tabindex: indica la posició en l’ordre de tabulació.
• disabled: si l’establim (disabled=“disabled”), el control queda desha-

bilitat.
• autocomplete: si aquest atribut està activat, amb el valor on, el navegador

intentarà autocompletar el camp. Per desactivar-lo, el valor és off.
• autofocus: si activem aquest atribut (autofocus=“autofocus”), quan es

carregui la pàgina, el control amb aquest atribut tindrà el focus.
• pattern: permet posar una expressió regular que haurà de complir el text
introduït per l’usuari.
• placeholder: mostra el text que posem com a valor en el control. Aquest

text desapareixerà només rebre el focus.
2.11.4 Camps de text
Els camps de text són els camps en què l’usuari pot introduir un text relativament
curt, en cas que sigui llarg es recomana fer servir una altra etiqueta i tipus
anomenat <textarea>, que veurem en un altre apartat. Per crear un camp de text
usem l’etiqueta <input type=“text” />. A més, tenim els atributs següents:
• name: nom del control.
• value: valor per defecte del camp de text.
• readonly: si l’establim (readonly=“readonly”), el control és de només

lectura, no s’hi pot escriure.
• maxlength: nombre màxim de caràcters que permetrem escriure en el

control.
• size: mida del control.
Seguint l’exemple de l’associació de text i controls, que hem vist amb anterioritat,
hem afegit al camp que mesuri l’espai que ocuparien 30 caràcters però que hi
permetem que se n’escriguin fins a 100. Això seria:
1 <label for="identificadornom">Escriu el teu nom:</label>

2 <input type="text" name="nom" size="30" maxlength="100" id="identificadornom">
Seguretat de les
contrasenyes
No hem de pensar que la
informació que posem en els
camps de contrasenya és segura
ja que si no s’usa el protocol
https la informació circula per
la xarxa sense xifrar.
2.11.5 Camps de contrasenya
Els camps de contrasenya són els camps en què l’usuari pot introduir una contra-
senya, ja que el text que s’introdueix queda “camuflat” amb asteriscos o punts. Per
crear un camp de contrasenya usem l’etiqueta <input type=“password” /> i
els mateixos atributs que utilitzem per als camps de text. Un exemple de camp de
contrasenya seria el següent:
1 <label for="identificadorclau">Escriu una clau:</label>

2 <input type="password" name="clau" size="10" maxlength="15" id="
identificadorclau" />
El resultat d’aquest codi és el següent:

F i g ura 2 . 2 2. Camp de contrasenya o clau
2.11.6 Camp de correu
Abans d’HTML5 no existia aquest tipus d’entrada i fèiem servir el tipus text
controlant amb JavaScript el valor introduït. L’etiqueta email serveix per escriure
una adreça de correu electrònic. Si el navegador detecta que el que ha escrit
l’usuari és invàlid, mostrarà un error. Vegem el codi en un exemple:
1 <label for="mail">E−mail:</label>
2 <input type="email" id="email" name="email" />
Les expressions regulars
són patrons que ens
indiquen condicions que
han de complir determinats Com hem dit abans, fent servir l’atribut pattern a una etiqueta de tipus text,
textos. Per exemple al
correu, ha d’existir un podríem arribar a fer el mateix fent ús d’una expressió regular.
domini TLD, ha de contenir
el caràcter @, no es pot fer
servir caràcters no
alfanumèrics per començar,
etc.
2.11.7 Camp d’URL
url: serveix per escriure un URL. Si el navegador detecta que no compleix el

patró correcte per a un URL mostrarà un error. Vegem un exemple:
1 <label for="enllac">URL:</label>
2 <input type="url" id="enllac" name="enllac" />
2.11.8 Camp numèric
number: serveix per escriure un nombre. A més, podrem fer restriccions del
nombre introduït a partir dels següents atributs:
• min: mínim valor permès.
• max: màxim valor permès.
• step: especifica quins nombres permetem segons el salt indicat. Per

exemple, si step=“2”, els nombres permesos seran: -2, 0, 2, 4, 6...
• value: especifica el nombre per defecte que apareixerà al control.

Vegem un exemple d’aquest control:
1 <label for="nota">Nota de l’examen:</label>

2 <input type="number" id="nota" name="nota" min="0" max="10" />
2.11.9 Camp de rang
range: és una barra de desplaçament que simula un nombre en un rang. Per tal
d’establir el rang disposem dels mateixos atributs que el tipus number: min, max
i step.
1 <label for="rang">Rang:</label>
2 <input name="rang" id="rang" type="range" value="0" min="0" max="100"/>
2.11.10 Camps de data o horaris
date, month, week, time, datetime i datetime-local: aquests tipus ens

serveixen per poder seleccionar una data/hora, tot i que el seu comportament no
és el mateix segons el navegador que fem servir, ja que aquests tipus encara no
són plenament integrats en tots els navegadors.
Vegem un exemple:
1 <label for="data">Data:</label>
2 <input type="date" id="data" name="data" />
El resultat pel navegador Chrome i Firefox és el següent:
Fig ur a 2 . 23 . Camp date al navegador Chrome

F i g ura 2 . 2 4. Camp date al navegador Firefox
Si volguéssim fer servir altres tipus com ara month, time, etc, hauríem de
substituir l’atribut type de l’etiqueta input pel valor corresponent.
2.11.11 Camps de colors
El camp de tipus color serveix per a camps que han de contenir un color. El codi
seria:
1 <label for="color">Color:</label>
2 <input type="color" id="color" name="color" />
El resultat és el següent al navegador Chrome:
Fig u ra 2 . 2 5 . Visió del camp de tipus ”color” al navegador Chrome

El resultat és el següent al navegador Firefox:
Fi g ura 2 .26 . Visió del camp de tipus ”color” al navegador Firefox
2.11.12 Camp de cerca
Serveix per a camps de cerca i cal fer servir el valor search per l’atribut type de
la etiqueta input. El seu comportament és molt semblant a un camp de tipus text.
El codi seria:
1 <label for="cerca">Cerca:</label>
2 <input type="search" id="cerca" name="cerca" />
2.11.13 Botons d’opció
Els botons d’opció ens permeten triar una i només una de les opcions que se’ns
ofereixen. Per crear un botó d’opció usem l’etiqueta <input type=“radio” />.
A més, tenim els atributs següents:
• name: nom del control. És molt important fer servir el mateix nom per
agrupar botons d’opcions que pertanyen a la mateixa selecció, de forma que
exclusivament un sigui seleccionable alhora.
• checked: determina si el control està seleccionat.
• value: si està seleccionat, estableix quin valor es tramet.
• size: determina la mida del control en píxels.
Habitualment, no només posem un botó d’opció sinó que en posem diversos

d’associats entre si. Per exemple, si demanem el sexe de la persona, tenim dos
botons d’opció, un per senyalar que és dona i l’altre per senyalar que és home.
El codi d’aquest exemple seria el següent:
1 <input type="radio" id="sexe_dona" name="sexe" value="dona"/>

2 <label for="sexe_dona">Dona</label>
3 <input type="radio" id="sexe_home" name="sexe" value="home"/>
4 <label for="sexe_home">Home</label>
Fixem-nos que per tal que el formulari sàpiga que aquests botons d’opció estan
relacionats, donem el mateix valor a l’atribut name.
Vegem un altre exemple, en què apareixen tres botons d’opció i com es mostra en
el navegador (figura 2.27):
1 <h2>Fes la selecció de franja d’edat</h2>

2 <input type="radio" name="edat" id="edat_menor" value="menor"/>
3 <label for="edat_menor">Menys de 18 anys </label>
4 <input type="radio" name="edat" id="edat_major" value="major" checked="checked
"/>
5 <label for="edat_major">De 18 a 65 anys </label>
6 <input type="radio" name="edat" id="edat_jubilat" value="jubilat"/>
7 <label for="edat_jubilat">Més de 65 anys</label>
F i g ura 2 . 2 7. Selecció exclusiva per botons d’opcions
Observem que els tres controls tenen el mateix valor en el camp name (edat).
Així, quan trametem el formulari, ens arriba una de les tres possibilitats següents:
edat=menor o bé edat=major o bé edat=jubilat. També observem que hi
ha una selecció marcada per defecte amb l’atribut checked assignat al valor
checked.
2.11.14 Caselles de verificació
Les caselles de verificació ens permeten triar una opció o més de diverses
possibilitats. Per crear una casella de verificació usem l’etiqueta <input
type=“checkbox” />. A més, tenim els mateixos atributs que amb els botons
d’opció.
En aquest cas l’atribut name no ha de ser el mateix ja que es pot prémer una o més
d’una de les caselles de verificació. Fixem-nos en l’exemple i com es mostra en
el navegador (figura 2.28):
1 <form method="get" action="processa.php">

2 <h2>Coneixements:</h2>
3 <input type="checkbox" name="coneixements" value="xarxes" id="xarxes">

4 <label for="xarxes">Xarxes Socials</label>
5 <input type="checkbox" name="coneixements" value="html" id="html">
6 <label for="html">Programació HTML</label>
7 <input type="checkbox" name="coneixements" value="css" id="css">
8 <label for="css">Programació CSS</label>
9 <input type="checkbox" name="coneixements" value="disseny" id="disseny">
10 <label for="disseny">Disseny</label>
11 <button type="submit">Enviar</button>
12 </form>
En aquest cas, si preméssim les caselles Programació HTML i Programació CSS

s’enviaria: coneixaments=html&coneixaments=css, a la plana processa.php
del servidor, per tal que la processés.
Fi g ura 2 .28 . Selecció per tipus de camp ”checkbox”
2.11.15 Llistes de selecció
Les llistes de selecció tenen dos formats: les llistes de selecció simple, que ens
deixen escollir una única opció d’un llistat de possibilitats i les llistes de selecció
múltiple, que ens deixen escollir més d’una opció (prement la tecla Ctrl mentre
seleccionem les diverses opcions).
La funció de la llista de selecció simple és similar als botons d’opció (només es pot
triar una opció), mentre que la funció de la llista de selecció múltiple és similar a
les caselles de verificació (podem triar més d’una opció). Malgrat això, el format
de presentació i el funcionament del control és diferent.
Per crear una llista de selecció usem dues etiquetes:
• L’etiqueta <select> ens serveix per dir on comença i s’acaba la llista de

selecció. Tenim els atributs següents:
– name: nom del control.

– size: nombre d’opcions visibles.
– multiple: si l’establim (<select multiple=“multiple”>) farà
que aquesta llista sigui una llista de selecció múltiple.
• Per a cadascuna de les opcions usem l’etiqueta <option>. Aquesta etiqueta

està continguda dins de l’etiqueta <select> que al seu torn conté el text de
l’opció que s’ha de seleccionar. Té els atributs següents:
– value: determina el valor que s’envia si se selecciona aquesta opció.

– selected: si l’establim (selected=“selected”) aquesta opció està
seleccionada per defecte. Hem de tenir en compte que si la llista és de
selecció simple, només haurem de tenir una opció amb aquest atribut,
mentre que si és de selecció múltiple podem posar-lo en més d’una
opció.
Un exemple de llista d’opció és el següent:
1 <form method="get" action="processa.php">

2 <label for="municipi">Marca els muncipis que has visitat:</label><br>
3 <select name="municipi" id="municipi" multiple="multiple">
4 <option value="Calafell">Calafell</option>
5 <option value="Coma−ruga">Coma−ruga</option>
6 <option value="Cubelles">Cubelles</option>
7 <option value="Cunit">Cunit</option>
8 <option value="Sant Salvador">Sant Salvador</option>
9 <option value="Sant Vicenç de Calders">Sant Vicenç de Calders</option>
10 <option value="Segur de Calafell">Segur de Calafell</option>
11 </select><br><br>
12 <button type="submit">Enviar</button>
13 </form>
En aquest cas, es permet que l’usuari marqui diverses opcions. Si per exemple,
marca que ha visitat les poblacions Sant Salvador i Segur de Calafell, s’envia
municipi=Sant+Salvador&municipi=Segur+de+Calafell. La figura 2.29
recull com es mostra en un navegador.
Fig u ra 2 . 2 9 . Exemple de llista de selecció
Si volem fer seleccions classificant les diferents opcions de la llista en grups

posant-los un títol descriptiu, podem usar l’etiqueta <optgroup>, com es veu en
l’exemple següent:
1 <h2>Selecciona estació destí </h2>

2 <select name="estacio" id="estacio" size="11">
3 <optgroup label="Barcelona">
4 <option value="Sans"selected="selected">Barcelona Sants</option>
5 <option value="Passeig Gracia" >Barcelona Passeig de Gràcia</option>
6 <option value="Franca">Barcelona Estació de França</option>
7 <option value="Clot">Barcelona El Clot</option>
8 </optgroup>
9 <optgroup label="Terrassa">
10 <option value="Terrassa Centre">Terrassa Centre</option>
11 <option value="Terrassa Est">Terrassa Est</option>
12 </optgroup>
13 </select>
El contingut de l’atribut label de l’element <optgroup> es mostra com un títol

descriptiu, però no es pot seleccionar. Podem veure aquesta llista en la figura
2.30.
F igur a 2. 30 . Exemple de llista de selecció amb agrupació
2.11.16 Llista de dades: <datalist>
L’etiqueta <datalist> és una llista de dades que podem associar a diferents tipus
de camp <input>, i que pot funcionar igualment a tall de suggeriment. Quan
l’usuari vol introduir un valor en un camp, l’ajudarem a completar-ho amb valors
llistats dins del <datalist>, tot i que pot escollir de propis. A més a més, podem
canviar/ajudar allò que introdueix l’usuari pel valor correcte. Això pot ser molt
útil per a codis en els quals l’usuari en sap la descripció, però no el codi.
És imprescindible que establim l’atribut id de l’etiqueta <datalist> per tal de

poder associar la llista de dades amb el control <input>. En el control <input>
tindrem l’atribut list, on haurem de posar l’ id de l’element <datalist>
Dins de l’element <datalist> tindrem diversos elements <option> amb els se-
güents atributs:
• label: allò que escriurà l’usuari
• value: valor amb el qual substituirem allò que escriu l’usuari
Vegem un exemple: suposem que volem que l’usuari de la nostra aplicació web
hagi d’escriure el codi d’un aeroport. Normalment els usuaris saben les ciutats o
la zona on hi ha l’aeroport, però no saben el codi. Podríem ajudar-lo mitjançant
un <datalist>:
1 <form action="accio.php">
2 <label for="aeroport">Aeroport: </label>
3 <input type="text" id="aeroport" name="aeroport" list="codis_aeroports" />
4 <datalist id="codis_aeroports">
5 <option label="Barcelona" value="BCN"></option>
6 <option label="El Prat" value="BCN"></option>
7 <option label="Bilbao" value="BIO"></option>
8 <option label="Girona" value="GRO"></option>
9 <option label="Menorca" value="MAH"></option>
10 <option label="Mahó" value="MAH"></option>
11 </datalist>
12 <input type="submit" value="Envia dades" />
13 </form>
En la figura 2.31 podem veure com el control ajuda l’usuari, i en la figura 2.32
podem veure què passa quan l’usuari selecciona l’ajuda que se li ofereix.
F i g ura 2 . 3 1. Ajuda a l’usuari amb les dades de la llista
F i g ura 2 . 3 2 . Canvi de text pel valor de la llista
Com hem apuntat abans, la llista de dades pot fer-se servir amb altres tipus
d’inputs, com ara range, color, time, datatime-local, date, week o moth,
tot i que això depèn del navegador on les visualitzem, ja que no tots tenen
aquests tipus d’inputs i cal consultar-ho amb anterioritat a algun portal com ara
www.html5test.com o www.caniuse.com.
A mode d’exemple, amb el següent codi podem veure un <input type=“time”>

amb una llista de selecció.
1 <label>Escull una hora:</label>

2 <input type="time" list="hores" />
3 <datalist id="hores">
4 <option label="Mitjanit">00:00</option>
5 <option label="Matinada">06:00</option>
6 <option label="Migdia">12:00</option>
7 <option>18:00</option>
8 </datalist>
El comportament a un navegador Chrome es mostra a la següent figura:
Fig ur a 2 . 3 3 . Llista de dades pel tipus ”time” al navega-

dor Chrome
I el resultat si escollim les 06.00h de la matinada.

Fig ur a 2 . 3 4 . Llista de dades pel tipus ”time” al navega-
dor Chrome
2.11.17 Generador de claus: <keygen>
La seguretat a la xarxa és un factor que cada cop ha esdevingut més important atesa
la immensa quantitat de traspàs de dades sensibles a través de la xarxa. És per això
que HTML5 incorpora una etiqueta que fa que l’enviament de dades sigui més
segur. L’etiqueta s’anomena <keygen> i si l’usem es generen un parell de claus
per tal de comunicar-se amb el servidor web a qui se li vol enviar la informació.
D’aquest parell de claus, la clau privada s’emmagatzema en el client i la pública

s’envia al servidor.
Vegem com s’usa aquesta etiqueta:
1 <form action="accio.php" method="get">

2 <label for="usuari">Usuari:</label>
3 <input type="text" name="usuari" id="usuari" />
4 <label for="enc">Encriptació:</label>
5 <keygen name="enc" id="enc" />
6 <input type="submit" value="Envia dades" />

7 </form>
2.11.18 Sortida de resultats: <output>
L’etiqueta <output> serveix per mostar els resultats d’alguna operació feta
generalment amb Javascript.
Tot i que haurem d’usar una mica de JavaScript per tal de veure’n la utilitat. Com
a exemple, suposem que l’usuari entra un preu sense IVA i l’IVA a aplicar i volem
que es vagi recalculant el preu amb IVA si canviem els valors. El codi seria el
següent:
1 <form oninput="preu_amb_iva.value = preu_sense_iva.value * (1 + iva.value /

100) ">
2 <label for="preu_sense_iva">Preu sense IVA: </label>
3 <input id="preu_sense_iva" name="preu_sense_iva" type="number" />
4 <label for="iva">IVA: </label>
5 <input id="iva" name="iva" type="number" />
6 <label for="preu_amb_iva">Preu amb IVA: </label>
7 <output id="preu_amb_iva" name="preu_amb_iva" for="preu_sense_iva iva"></
output>
8 </form>
En la figura 2.35 podem veure el resultat obtingut al navegador després d’introduir

el preu sense IVA i l’IVA.
Fig u ra 2 . 3 5 . Resultat d’una operació en un formulari
2.11.19 Àrees de text
Les àrees de text permeten que l’usuari de l’aplicació web enviï una porció de
text més gran que amb els camps de text. L’etiqueta que ens permet inserir una
àrea de text és <textarea>. Els atributs que podem usar amb aquesta etiqueta
són els següents:
• cols: amplada, en caràcters.
• rows: alçada, en nombre de línies.

• readonly: si l’establim (readonly=“readonly”), el control és de només

lectura, no s’hi pot escriure.
Vegem un exemple de control d’àrea de text en què deixem a l’usuari cinc files i
trenta columnes visibles per escriure. El text que està entre les etiquetes d’inici i
fi és el text que surt per defecte a l’àrea de text:
1 <textarea name="comentari" id="comentari" cols="30" rows="5">Escriu aquí els

teus
2 comentaris</textarea>
2.11.20 Botons
Els botons d’un formulari ens serveixen per fer accions quan els premem. Tenim
tres tipus de botons:
• Botó d’enviament de formulari: quan es prem aquest botó el formulari es

tramet. És a dir, les dades són enviades al destí que hem posat en l’atribut
action de l’element <form>. Per inserir un botó d’aquest tipus usem
l’etiqueta <input type=“submit” />. Disposem, a més, de l’atribut
value, que ens indica el text que apareix en el botó.
• Botó de restabliment del formulari: quan es prem aquest botó el formulari

torna a posar-se en l’estat inicial. És a dir, s’esborra tot allò que ha escrit
l’usuari i es posen les dades per defecte del formulari. Per inserir un botó
d’aquest tipus usem l’etiqueta <input type=“reset” />. Amb l’atribut
value podem indicar el text que apareix al botó.
• Botó genèric: podem inserir botons en els quals podem afegir noves
funcions mitjançat codi de programació. Per poder fer això usem l’etiqueta
<button>. El valor que ens apareix al botó és allò que posem entre l’inici i
el final de l’etiqueta. Podem posar tant text com imatges. Aquest control té
els atributs següents:
– type: defineix quin tipus de botó és. Pot prendre els valors següents:
submit (amb la mateixa funció que els botons d’enviament de formu-
lari), reset (amb la mateixa funció que els botons de restabliment de
formulari) o button (botó genèric).
– name: nom del control
– value: valor que es tramet quan premem el botó.
Posem com a exemple els botons de restabliment de formulari i el d’enviament de

formulari:
1 <input type="reset" value="Esborrar formulari" />

2 <input type="submit" value="Enviar formulari" />
Fixem-nos que l’etiqueta <button> no es tanca en ella mateix i per tant podem
inserir qualsevol cosa dins del botó com, per exemple, una imatge o el text que ha
d’aparèixer:
1 <button><img src="envia.png" alt="Enviament de dades" /></button>
2.11.21 Controls ocults
En alguns casos ens pot interessar tenir en un formulari un control amb un valor
concret, però que no sigui ni visible ni directament modificable per l’usuari final.
Per inserir un control d’aquest tipus s’usa l’etiqueta <input type=“hidden” />.
Els atributs que s’usen amb aquest control són els següents:
• value: valor que es tramet.
Per exemple, si volem enviar seccio=segona, hem d’escriure el codi següent:
1 <input type="hidden" name="seccio" value="segona" />
2.12 Marcs flotans
En ocasions ens interessa introduir contingut dins d’una pàgina d’una altra pàgina.
En aquests casos el que fem servir són els marcs flotants amb l’ús de l’etiqueta
<iframe>, indicant amb l’atribut src l’origen del contingut a mostrar dins del
marc creat.
Un exemple de codificació per mostrar el contingut dins d’una pàgina del portal
de l’IOC per defecte, seria el següent:
1 <iframe width="500px" height="400px" src="http://ioc.xtec.cat/educacio/" name="

marcflotant_a"></iframe>
2 <p><a href="http://www.w3c.es/" target="marcflotant_a">Mostrar portal W3C</a></
p>
3 <p>Quan cliquem a l’enllaç obrim la pàgina principal del portal www.w3c.es a l’
interior del marc flotant.</p>
A l’etiqueta <iframe> hem afegit l’atribut width i height per donar-li una
amplada i alçada respectivament al marc flotant, i també hem fet ús de l’atribut
name per posar-li un nom i posteriorment fer-ho servir a l’etiqueta <a>. Això ens
permet indicar-li amb l’atribut target de l’enllaç, quin marc flotant serà el destí
de l’enllaç quan cliquem, és a dir, posarà el contingut que marca l’enllaç a dins
del marc flotant. A la figura 2.36 veiem el resultat del codi anterior.
F igur a 2. 36 . Marc flotant amb contingut dinàmic
2.13 Mapes
La combinació de l’etiqueta <a> amb l’etiqueta <img> ens permet fer que una
imatge sigui alhora un enllaç. Però si el que volem és que segons el punt d’una
imatge on premem ens porti a un enllaç o a un altre, haurem de recórrer a un altre
recurs: els mapes sensibles.
Els mapes sensibles són imatges que presenten múltiples enllaços segons la
zona on se situï el cursor.
Hi ha dos tipus de mapes, els mapes gestionats des del client i els mapes gestionats
des del servidor.
2.13.1 Mapes gestionats des del client
La primera tasca que cal fer quan confeccionem un mapa sensible gestionat des
del client és dividir la imatge en zones. Per tal de fer això hem de delimitar Eines de confecció de
mapes
aquestes zones establint-ne les coordenades.
Confeccionar un mapa “a mà” i
obtenir les coordenades
Hi ha diversos programes de dibuix que ens permeten veure les coordenades de necessàries pot arribar a ser molt
laboriós. Existeixen diversos
cada punt de la imatge. També tenim eines específiques per a la creació de mapes programes que ens poden ajudar
en aquesta tasca. Podem posar
d’imatges que ofereixen aquesta possibilitat. com a exemples el programa
kimagemapeditor o el connector
imagemap del programa de
Si volem utilitzar mapes sensibles, hem de fer dues actuacions: declarar el mapa tractament d’imatges GIMP.
i assignar-lo a una imatge. Vegem com podem fer aquests dos passos:
1. La declaració d’un mapa es fa amb una etiqueta <map> i diverses etiquetes

<area> seguint la sintaxi següent:
1 <map name="nom_mapa">
2 <area shape="..." coords="..." href="..." alt="..." />
3 ...
4 </map>
A l’etiqueta <map> hi establim el nom del mapa i a les etiquetes <area> hi definim
cadascuna de les zones del mapa. Els atributs per fer-ho són els següents:
• shape: defineix la forma de la zona, que pot ser rectangular (rect), circular
(circ) o poligonal (poly).
• coords: defineix les coordenades de la zona, seguint la normativa següent:
– Si es tracta d’un rectantgle (rect), cal indicar les coordenades x1 , y1 ,

x2 i y2 , on x1 i y1 són les coordenades de l’extrem superior esquerre i
x2 i y2 les de l’extrem inferior dret.
– Si es tracta d’un cercle (circ), cal indicar les coordenades x, y i r, on
x i y són les coordenades del centre del cercle i r és el radi d’aquest
cercle.
– Si es tracta d’un polígon (poly), cal indicar les coordenades x1 , y1 , x2 ,
y2 , x3 , y3 ... on cada parella xi , yi defineix un vèrtex del polígon. La
darrera parella s’uneix a la primera per tancar el polígon.
• href: defineix l’enllaç on s’anirà si l’usuari prem sobre la zona.
• nohref: si l’establim (nohref= ””) indiquem que la zona no té cap enllaç

definit.
• alt: incorpora el text que es presenta si no es pot presentar la imatge.
2. L’assignació d’un mapa a una imatge es fa amb l’atribut usemap de l’etiqueta

<img>. La sintaxi és la següent:
1 <img src="cami_imatge" usemap="#nom_mapa" />
El nom del mapa sempre ha d’anar precedit del símbol # i ha de coincidir amb
l’atribut name de l’etiqueta <map>.
Imaginem que tenim la imatge que es veu en la figura 2.37 i volem que en prémer
sobre qualsevol de les quatre figures es faci una consulta a la Viquipèdia que
correspongui a cadascuna d’elles. El codi complet seria el següent:
1 <img id="figures" src="rbfiguresbasiques.png" border="0" width="516" height="

468" orgWidth="516" orgHeight="468" usemap="#figures" alt="4 figures bà
siques" />
2 <map name="figures" id="ifigures">
3 <area shape=’rect’ id=’rectangle’ coords=’96,77,219,202’ href=’http://ca.

wikipedia.org/wiki/Rectangle’ alt="rectangle" />
4 <area shape=’circle’ coords=’347,140,63’ href=’http://ca.wikipedia.org/wiki/
Cercle’ alt="cercle" />
5 <area shape=’polygon’ coords=’121,262,194,263,225,371,89,372’ href=’http://ca.
wikipedia.org/wiki/Trapezoide’ alt=’trapezoide’ />
6 <area shape=’polygon’ coords
=’324,260,372,260,372,295,407,295,408,340,371,342,371,376,325,376,325,342,290,340,291,295,326,295’
href=’http://ca.wikipedia.org/wiki/Geometria’ alt=’creu’ />
7 </map>
Fi gura 2 .37 . Mapa de tipus client
2.13.2 Mapes gestionats des del servidor
L’objectiu dels mapes gestionats des del servidor és enviar al servidor les coorde-
nades del punt on s’ha premut. En el servidor hi haurà un programa que sap com
s’han de gestionar aquestes coordenades (per exemple, enviar a una altra pàgina
segons on s’hagi premut). Per tal de fer això hem d’usar l’atribut ismap=“ismap”
de l’etiqueta <img>. Per exemple:
1 <a href="mapaservcoord.html"><img src="imatges/linux.png" alt="linux" ismap="

ismap" /></a>
Això fa que si premem les coordenades 5,15 de la imatge anem a la pàgina

mapaservcoord.html?5,15. La pàgina de destinació pot agafar la part de l’URL
que conté les coordenades i gestionar-les com convingui.
2.14 Objectes
Altres etiquetes HTML5 per
a objectes concrets
HTML5 incorpora etiquetes
L’etiqueta <object> neix per oferir una solució universal a la inclusió de qualsevol
pròpies per inserir objectes de
diversos tipus. Per exemple
tipus de fitxers en els documents HTML, de manera que els navegadors rebin la
tenim l’etiqueta <audio> per a informació necessària per tractar l’objecte (fitxer incrustat en el document).
inserir so o l’etiqueta <video>
per a inserir vídeos. Tot i això,
HTML5 continua conservant Com a regla general, l’etiqueta <object> serveix per definir un objecte o
l’etiqueta genèrica <object>
que ja existia a HTML4, amb component extern al navegador que s’encarrega de reproduir l’objecte (so, anima-
l’objectiu d’englobar qualsevol
tipus d’objecte. ció, vídeo, connectors, documents...). Per aconseguir una reproducció correcta,
l’etiqueta <object> ha de permetre declarar l’objecte, la seva ubicació i el seu
tipus, i unes etiquetes optatives especials, <params>, permeten acabar de definir
els valors o paràmetres que aquest necessiti.
La sintaxi genèrica és la següent:
1 <object atribut1="valor1" atribut2="valor2" ... atributN="valorN">

2 <param name="nom" value="valor">
3 <param name="nom" value="valor">
4 ...
5 </object>
Un atribut bàsic en la declaració d’un objecte és l’atribut type que permet

indicar al navegador el tipus d’objecte que ha de carregar. El navegador ha
d’utilitzar aquesta informació per esbrinar si disposa d’alguna aplicació adequada
per reproduir l’objecte, i n’ha d’avortar la càrrega si no en disposa.
De tot això es dedueix que hi ha dos punts importants perquè un objecte es pugui
reproduir correctament:
1. El tipus d’objecte ha d’estar ben identificat en el document HTML. Per a

això, cal utilitzar els tipus MIME.
2. El navegador ha de tenir instal·lada alguna aplicació adequada per tal

de reproduir l’objecte. Les aplicacions que possibiliten aquesta funció
s’anomenen connectors (en anglès, plugins).
L’etiqueta <object> disposa dels següents atributs:
• data: nom del fitxer per reproduir amb la seva ubicació.
• type: cadena amb el tipus MIME adequat a l’objecte.
• width: amplada en píxels del control.
• height: alçada en píxels del control.
Per exemple, si volem reproduir un arxiu de música, hem de fer el següent:
1 <object data="musica.mp3" type="audio/mpeg">

2 <p>Aquest objecte no ha pogut ser reproduït.</p>
3 </object>
En nombre de paràmetres, depèn de quin objecte vulguem encastar, en podrem

posar uns o uns altres.
2.14.1 Tipus MIME
MIME és l’acrònim anglès de Multipurpose Internet Mail Extensions

(extensions multipropòsit de correu d’Internet). Es tracta d’un estàndard
que especifica com un programa (inicialment, de correu o navegador web)
ha de transferir arxius multimèdia (vídeo, so i, per extensió, qualsevol arxiu
que no estigui codificat en US-ASCII).
L’estàndard MIME adjunta un fitxer de capçalera a cada fitxer, que especifica el

tipus i el subtipus del contingut del fitxer principal. Gràcies a aquesta informació,
tant el servidor com el navegador poden gestionar i presentar correctament les
dades.
En la utilització diària d’Internet, ens beneficiem dels tipus MIME. Cada vegada
que sol·licitem una pàgina d’Internet, s’obre un diàleg entre el nostre navegador
i el servidor que proporciona la pàgina. El nostre navegador demana la pàgina i
el servidor, abans d’enviar-la, confirma que existeix i comprova el tipus de dades
que conté. Això darrer es fa mitjançant el tipus MIME que correspongui.
La gestió del tipus MIME en el web té lloc en tres punts ben diferenciats:
1. En el servidor, que ha de ser capaç de gestionar diversos tipus MIME i tenir-los

activats.
2. En la pàgina web, en què l’autor pot fer referència a tipus MIME, tot i que
és merament consultiu. Els enllaços a arxius externs (fulls d’estils, scripts de
JavaScript, objectes incrustats...) es feien servir en versions anteriors a HTML5
indicant el tipus de l’arxiu enllaçat amb l’atribut type. A continuació posem
alguns exemples, tot i que si no l’indiquem als dos primers casos, el navegador ja
dóna per defecte un comportament adequat:
• Enllaços a fulls d’estils:
1 <link rel="stylesheet" type="text/css" href="estils.css" />

2 <!−− A les darreres versions de navegadors funciona igualment aquesta altre
definició−−>
3 <link rel="stylesheet" href="estils.css" />
• Crida a scripts JavaScript:
1 <script type="text/javascript" src="codi.js"></script>

2 <!−− A les darreres versions de navegadors funciona igualment aquesta altre
definició−−>
3 <script src="codi.js"></script>
• Definició d’objectes:
1 <object data="musica.mp3" type="audio/mpeg">

2 <p>Text alternatiu</p>
3 </object>
3. En el navegador del client, que ha d’estar capacitat per interpretar els tipus
MIME que el servidor li envia i, fins i tot, ha de poder informar el servidor dels
tipus MIME que pot acceptar.
Per permetre aquesta funció, el navegador ha de tenir instal·lades les aplicacions

adequades als diferents tipus MIME que interessi gestionar. Són els anomenats
Logotip d’IANA
IANA
connectors (plugins) del navegador.
L’organisme que s’encarrega de
registrar els tipus MIME és Actualment, els tipus MIME s’agrupen en vuit categories, i cada tipus MIME s’i-
l’IANA, acrònim anglès
d’Internet Assigned Numbers dentifica pel nom compost: categoria/tipus. De vegades, es parla de tipus/subtipus.
Authority (Agència d’Assignació
de Números d’Internet). A la Les vuit categories són les següents: application, audio, image, message, model,
seva pàgina web podem trobar la
llista completa de tipus/subtipus multipart, text i video. Cadascuna està formada per un conjunt més o menys gran
MIME.
de tipus MIME, i cadascun dels tipus acostuma a dur associades una extensió
d’arxius o més d’una.
La taula 2.3 recull alguns dels tipus MIME amb les extensions de fitxers més
habituals.
Taul a 2. 3. Recull de tipus MIME i extensions de fitxers associades
Tipus/Subtipus MIME Extensions de fitxers Tipus/Subtipus MIME Extensions de fitxers
image/png .png video/x-msvideo .avi
image/gif .gif application/pdf .pdf
image/jpeg .jpg, .jpeg, .jpe application/postscript .ai, .eps, .ps
image/tiff .tif, .tiff application/rtf .rtf
audio/x-wav .wav application/gzip .gz
audio/x-midi .mid application/x-tar .tar
text/plain .txt application/zip .zip
text/richtext .rtf, .rtx application/x-java-vm .class
video/mpeg .mpeg, .mpg, .mpe application/x-java- .jar

archive
2.14.2 Connectors
Per reproduir fitxers encastats dins les pàgines web com a objectes genèrics, els
navegadors necessiten tenir instal·lat el connector adequat.
Els connectors (plugins) són aplicacions informàtiques que interactuen amb

una altra aplicació per afegir-hi una funció o utilitat específica.
És a dir, si en un document web s’hi ha incrustat un objecte (<object>) que

fa referència a un document d’un cert tipus MIME, el navegador que l’hagi de
reproduir ha de disposar d’un connector adequat per a aquell tipus MIME. Per
exemple moltes vegades trobem que certs navegadors necessiten de la instal·lació
d’un pluging específic per reproduir objectes de tipus Flash d’Adobe.
El fet que el sistema operatiu disposi d’una aplicació que pugui reproduir un de-
terminat arxiu (corresponent a un tipus MIME) no és garantia que els navegadors
instal·lats en aquell sistema tinguin instal·lat el connector corresponent.
Els navegadors, en rebre pàgines web que contenen tipus MIME no suportats,
haurien d’oferir a l’usuari, tal com recomana el W3C, la possibilitat d’instal·lar-los
d’una manera senzilla.
Si es vol saber els connectors que es tenen instal·lats al navegador Firefox s’ha
d’escriure about:plugins a la barra de navegació. El navegador ens mostra un
document HTML amb la informació corresponent de tots els connectors instal·lats,
com es veu en la figura 2.38. La informació que dóna és molt interessant:
connectors instal·lats (versió i nom del fitxer corresponent) i, per a cada connector,
la relació de tipus MIME als quals pot donar servei.
F igu r a 2. 3 8 . Pantalla de connectors instal·lats a Firefox
2.14.3 Exemples d’incorporació d’objectes genèrics en una pàgina

web
A continuació es mostren diversos exemples de com podem incrustar alguns tipus

de mitjans multimèdia a la nostra web. En tots els exemples, si no es pot accedir al
mitjà, es mostra un text que ofereix la possibilitat de baixar el fitxer directament.
• Inserció d’un fitxer PDF d’extensió .pdf.
1 <object data="documentacio.pdf" type="application/pdf" width="100%" height="

100%">
2 <p>Sembla que no tens un connector per veure el contingut del fitxer PDF.
3 Baixa−te’l de: <a href="myfile.pdf">Fes click i es descarregarà</a></p>
4 </object>
• Inserció d’un vídeo en format .mpg:
1 <object data="media/EntrevistaStallman.mpg" type="application/x−mplayer2" width

="500" height="500">
2 No es pot accedir al vídeo. Baixa−te’l d’<a href="media/EntrevistaStallman
.mpg">aquí</a>
3 </object>
• Inserció d’un fitxer àudio en format .mp3:

1 <div class="canco">
2 <h2>01 − Requiem for a fish</h2>
3 <object data="media/01−TheFreakFandangoOrchestra−Requiemforafish.mp3" type="
audio/mpeg" width="250" height="250">
4 <param name="autoplay" value="false" />
5 <param name="autoStart" value="0" />
6 No es pot accedir a l’àudio. Baixa−te’l d’<a href="media/01−
TheFreakFandangoOrchestra−Requiemforafish.mp3">aquí</a>
7 </object>
8 </div>
• Inserció d’un format .swf (aplicació Flash):
1 <object type="application/x−shockwave−flash" data="media/calculator.swf" width=

"400"
2 height="400">
3 <param name="src" value="media/calculator.swf" />
4 </object>
3. Editors i gestors d’(X)HTML
Per tal d’editar documents (X)HTML, en tenim prou amb qualsevol editor de text
pla. Tot i així, existeixen eines més elaborades que ens faciliten la feina. Són els
anomenats editors HTML o gestors HTML.
3.1 Edició i gestió de documents (X)HTML
Un editor (X)HTML és un programa que permet crear i modificar fitxers

sense format i que dóna facilitats per a l’edició de documents (X)HTML.
Un gestor (X)HTML, a més de permetre editar documents (X)HTML,
ofereix funcionalitats avançades per gestionar el codi i administrar el nostre
lloc web.
Per a un llistat dels editors
d’HTML més coneguts,
D’editors i gestors (X)HTML en tenim moltíssims a la nostra disposició. Depe- consulteu l’Annex “Llistat
d’editors i gestors
nent de les nostres necessitats i de la nostra manera de treballar n’escollirem un o (X)HTML més coneguts”
del material web
altre, ja que cadascun d’ells té els seus avantatges i els seus inconvenients. d’aquesta unitat.
Tot i que podem fer múltiples classificacions d’aquests editors i gestors, una
diferència important és com es generen els documents (X)HTML, depenent de
si els creem visualment o mitjançant l’edició del codi font:
• Els editors de text amb facilitats per a l’edició d’(X)HTML són editors
de text que tenen diverses funcionalitats que ens fa més còmoda l’edició
dels fitxers (X)HTML.
• Els editors WYSIWYG (What you see is what you get, ‘Allò que veus és
allò que obtens’) ens permeten generar els documents (X)HTML a partir
d’una interfície gràfica amb la qual podem dibuixar la pàgina resultant. Tot
i que aquests editors són molt fàcils d’usar, ja que en molts casos no cal ni
saber (X)HTML per fer-ho, hem d’anar amb compte perquè poden generar
molt codi no desitjat (etiquetes buides, salts de línia...).
Aquests editors i gestors ens ofereixen un gran nombre de funcionalitats. Llistem

a continuació les més interessants:
• Creació de documents nous d’una manera ràpida i còmoda.
• Gestió de plantilles de diversos documents.
• Sintaxi acolorida per a una millor llegibilitat dels documents.

• Validació del codi.
• Accés ràpid al codi amb l’ajuda de marcadors.
• Configuració del sagnat i de l’estil del codi.
• Autocompleció del codi amb tancament automàtic d’etiquetes.
• Inserció d’etiquetes i atributs mitjançant auxiliars.
• Gestió de fragments de codi.
• Gestió de projectes.
• Connectors addicionals que donen més funcionalitats al gestor.
La unió de totes aquestes característiques fa que la nostra tasca de disseny web

sigui molt més agradable i alhora més productiva.
3.1.1 Exemple de gestor d’(X)HTML: Brackets
Dins del món de la codificació web, i particularment dins la codificació per

l’entorn client, és a dir, pels llenguatges orientats a ser interpretats pels navegadors
(HTML, CSS i JavaScript), es fan servir molts editors amb característiques
comunes i alhora diferenciades. Entre els més destacats trobem Sublime, Coda,
Bluefish, Dreamweaver o Brackets. Nosaltres farem servir aquest últim per
Logotip de Brackets
il·lustrar les funcionalitats més destacades dels editors disponibles.
Brackets és un editor i gestor de disseny web, creat amb codificació JavaScript,

WYSIWYN
Un editor WYSIWYN (What HTML i CSS. L’objectiu d’aquest editor és pretendre que el programador tingui un
You See Is What You Need, ‘Allò
que veus és allò que necessites’),
control total del codi que produeix, alhora que proporciona eines innovadores dins
dóna a entendre que la interfície
gràfica que ens ofereix és tot el
del món dels editors, tant per desenvolupadors com per dissenyadors web. Ofereix
que es necessita per a fer un lloc un gran nombre de funcionalitats instal·lables com a extensions, per generar codi
web, en molts casos el que
permet és veure el resultat de manera ràpida i fàcil i disposar d’ajudes per a la codificació.
directament sobre el que s’està
codificant.
Brackets és un programa multiplataforma i, per tant, es pot instal·lar a Linux, Mac
OS X i Windows.
Inicialment el desenvolupament de Brackets va ser promogut per Adobe, que va

iniciar el projecte com a experiment obert per treballar en comunitat. Ràpidament
va tenir prou acceptació com per continuar desenvolupant-lo. Actualment la
comunitat d’usuaris, és força activa i participativa, i té com a objectiu millorar les
funcionalitats, desenvolupar extensions, temes o fer traduccions per a Brackets.
Les seves característiques i funcionalitats principals són:
• Editor amb interfície WYWIWYG (What You Write Is What You Get, ‘Allò
que escrius és allò que obtens’).
• Interfície per treballar amb múltiples documents.

• Suport per a diversos llenguatges de marques i de programació: CSS, SCSS,

HTML, JavaScript, VBSCRIPT, JSON, PHP, CPP, C#, Java, Scala, Ruby,
Python, SASS, LUA, SQL, BASH, tot i que podem afegir de nous.
• Acolorit de la sintaxi per a tots els llenguatges suportats.
• Validadors de sintaxi.
• Gestió de projectes, amb les seves preferències.
• Gestió de fragments de codi (en anglès, snippets).
• Formatador de codi.
• Autocompleció de codi.
• Auxiliars per a la generació de codificació..
• Suport per treballar amb fitxers remots usant FTP, SFTP, ...
• Facilitat per treballar amb eines de control de versions.
• Cerca i reemplaçament avançats.
• Integració de programes i eines externes.
• Diverses eines d’edició: conversió de tabuladors a espais, extracció d’es-

pais...
• Documentació en línia.
• Marcadors pel codi.
• ...
Veiem, doncs, que Brackets ens ofereix un munt d’eines que un editor de text pla
no ofereix.
3.2 Funcions principals dels gestors d’(X)HTML
Tot i que disposem de moltíssims gestors d’(X)HTML de múltiples complexitats,

molts d’ells ofereixen funcions similars.
Quan escollim l’entorn de treball amb el qual volem confeccionar un lloc web i
seleccionem un gestor d’(X)HTML, és important analitzar les funcions que aquest
ofereix per tal que s’adapti a tots els requisits del nostre lloc web.
Com que nosaltres ens centrarem en Brackets, hem de fer la instal·lació baixant
aquest programari de la pàgina oficial que és brackets.io.
Brackets és un programari mantingut per una àmplia comunitat oberta de desen-

volupadors, tot i que està suportat i va ser promogut per Adobe. Pels que
estan acostumats a altres gestors, veuran que Brackets aporta eines molt potents
i orientades sobretot a treballar en la part de desenvolupament de client, és

a dir, a treballar pels navegadors i la programació que hi ha associada. Al
desenvolupament inicial d’aquest gestor varen participar-hi dissenyadors web, i
la seva aportació va ser fonamental per donar un sentit innovador a l’ús d’un nou
gestor d’(X)HTML, CSS i JavaScript, tot i que també pot treballar amb molts més
llenguatges.
És important saber que Brackets és un editor/gestor lleuger i per aquest motiu,

abans de tot, haurem d’aprendre com incorporar noves funcionalitats mitjançant
extensions que ens puguin ser útils.
3.2.1 Creació de documents nous
Brackets funciona com qualsevol editor de text i podem crear un fitxer (X)HTML
de zero. Una bona pràctica és crear abans una carpeta per cada portal que vulguem
desenvolupar. D’aquesta manera dins crearem l’arbre de directoris amb totes
aquelles carpetes que siguin necessàries, com per exemple imatges, CSS, vídeo,
àudio, JavaScript, documents, etc.
Per crear aquest document nou hem d’accedir al menú File > New. Com veurem
a la part esquerra (Working files) ens ha creat un nou fitxer, però no li ha assignat
cap nom. Per tal d’assignar-n’hi hem d’accedir de nou al menú File i clicar a Save.
Si el que volem és guardar un document de tipus HTML, no ens hem d’oblidar
d’escriure’n l’extensió quan ens demani el nom del fitxer. A l’exemple de la figura
3.1 hem escollit index.html.
Fig u ra 3 . 1 . Creació d’un nou document HTML a Brackets
3.2.2 Afegir extensions a l’editor/gestor Brackets
Brackets disposa d’un administrador d’extensions (Extension Manager) que ens

permet escollir quines extensions afegirem al nostre editor. L’accés a l’adminis-
trador el podem trobar a:
1. Menu File > Extension Manager, tal com podeu veure a la figura figura 3.2.
2. Mitjançant l’accés a la icona de la dreta en forma de peça de Lego. Es pot accedir a l’administrador
d’extensions de Brackets mitjançant
la icona d’extensions.
Fi g ura 3 .2. Accés a l’administrador d’extensions de Brackets per menú
Una vegada entrem a l’administrador veurem tres icones a la part superior, tal com
podeu veure a la figura figura 3.3. Si volem saber les
extensions enregistrades
per Brackets, ho podem fer
visitant el següent enllaç:
• Available (Disponibles): ens dóna un llistat de totes les extensions que tenim https:
disponibles per Brackets, de les quals podem escollir-ne qualsevol i clicar //brackets-registry.
aboutweb.com/
al botó Install.
• Themes (Temes): dóna la possibilitat de canviar l’entorn de treball i escollir

una altra estètica, en algun cas inspirades en altres editors coneguts.
• Installed (Instal·lades): ens proporciona un llistat de totes les extensions

que tenim instal·lades, bé per actualitzar-les o esborrar-les.
F igu r a 3. 3 . Accés a l’administrador d’extensions a Brackets (//Extension manager//)
Brackets també disposa d’altres formes d’afegir noves extensions. La que hem fet
servir és la que porta el propi administrador d’extensions, que ens dóna un llistat
(indicador 1 de la figura), i ens permet clicar directament a Install.
També ho podem fer indicant directament l’URL que conté l’extensió (indicador 2
de la figura 3.4) o bé baixar prèviament l’extensió (és un fitxer ZIP) i arrossegant-
la a l’àrea marcada amb Drag .zip here (o en català ‘Arrossega aquí l’extensió’),
marcada amb l’indicador 3 de la figura 3.4.
F igu r a 3. 4 . Diferents formes d’instal·Lar extensions a Brackets

3.2.3 Plantilles
Una plantilla, en anglès template, és l’estructura bàsica d’un document a

partir de la qual codifiquem la resta del document.
Molts editors d’(X)HTML disposen de plantilles pròpies per tal de generar

documents (X)HTML bàsics. Alguns gestors també ens permeten editar aquestes
plantilles i adaptar-les al nostre gust o, fins i tot, gestionar diverses plantilles
creades per nosaltres mateixos.
Si ens centrem en Brackets, com que els documents HTML habituals tenen una
estructura molt coneguda, i com que podem fer servir diferents versions d’HTML
(algunes d’elles disposen de referències al DTD que les valida), existeix una
extensió que ens facilita crear documents a partir de plantilles HTML comuns.
A partir d’aquestes plantilles escriurem el codi propi. Per tal d’instal·lar aquesta
funcionalitat hem d’anar a l’administrador d’extensions (Extension manager) i
cercar l’extensió HTML Templates. Una vegada instal·lada veurem que dins del
menú edit tenim un altre ítem, anomenat HTML Templates..., tal com es veu a
la figura 3.5.
Fi g ura 3 .5. Funcionalitat per afegir plantilles HTML a documents

Si premem a l’enllaç HTML Templates..., s’obrirà una nova finestra, tal com
mostra la figura 3.6, que ens deixa escollir entre dos tipus de plantilles:
• Standard doctypes: dins trobarem plantilles per HTML5, HTML4 i

XHTML 1.1 bàsiques. A nosaltres ens interessa principalment escollir
HTML5, ja que és el darrer estàndard.
• Framework templates: aquestes plantilles fan referència a diferents codifi-

cacions bàsiques per fer ús de Frameworks. Un Framework no és més que un
conjunt de tècniques, codi i recursos agrupats per diferents desenvolupadors,
que tenen com a fi facilitar treballs complexos i que fan servir normalment
llibreries de codi desenvolupats per ells mateixos.
Fig u ra 3 . 6 . Diàleg de selecció de plantilles HTML
Si al primer desplegable escollim com a plantilla l’opció HTML5, obtenim un

document amb el següent codi HTML editable:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf−8" />
5 <title></title>
6 </head>
7 <body>
8 </body>
9 </html>
Finalment, a partir d’aquesta estructura bàsica podem començar a codificar el

nostre document.
3.2.4 Sintaxi acolorida
La majoria d’editors de llenguatges de programació mostren el codi font amb

diversos colors de tal manera que el codi resulti més llegible per als éssers humans.
Els editors i gestors d’(X)HTML tenen aquesta funcionalitat i marquen de diferents
colors les etiquetes, els atributs, el text... A més, habitualment permeten que
l’usuari pugui canviar aquests colors segons el seu gust.
Brackets disposa d’aquesta característica: només hem d’obrir un document

(X)HTML o crear-ne un de nou i veurem que els diferents elements que conformen
el document són de diversos colors que ens faciliten la lectura. Hem de tenir en
compte que podem escollir quin tipus de llenguatge estem fent servir a Brackets.
Normalment aquest procés ja es fa automàticament una vegada hem desat el fitxer
amb l’extensió correcta. Si més no, podem dir-li a Brackets que en faci servir un
altre. Això ho fem des de la part inferior dreta de la finestra de Brackets, tal com es
veu a la figura 3.7, podem escollir un gran nombre de llenguatges de programació.
Fig ur a 3 . 7 . Elecció de llenguatge de programació a

Brackets
Un exemple de com Brackets acoloreix el codi HTML i CSS es mostra a la figura

3.8, on els atributs, elements i etiquetes es mostren agrupats per diferents colors:
F igu r a 3. 8 . Sintaxi acolorida a Brackets
Brackets permet crear

temes propis, on podem
marcar els diferents colors
que es faran servir en funció
del codi. Per fer això hem
Brackets no disposa d’un entorn per configurar manualment aquests colors dins
de saber com programar un del propi programari, com disposen d’altres editors. Del que sí que disposa és
tema nou, i principalment
programar amb d’una àmplia gamma de temes disponibles fàcilment instal·lables. Cada un d’ells
CSS.https://github.
aplica els seus propis colors a les etiquetes o codificació que elaborem.
com/adobe/
brackets/wiki/
Creating-Themes Aquests temes els podem descarregar des de l’administrador d’extension. Una
vegada baixats i instal·lats ens demanarà segurament reiniciar Brackets per tal que
els canvis tinguin efecte.
3.2.5 Validació i verificació del codi (X)HTML
Tot i que existeixen validadors en línia, és molt còmode que l’editor que utilitzem
ens ofereixi la possibilitat de validar el nostre codi des del mateix editor. És
per això que la majoria de gestors d’(X)HTML ens ofereixen alguna manera de
validar-lo. Alguns gestors ho fan a mesura que escrivim, mentre que d’altres ho
fan mitjançant la crida d’una ordre des d’un menú.
Brackets disposa d’una extensió per validació del codi (X)HTML per validar
respecte als suggeriments del W3C, és l’anomenat Brackets W3Validation.
Posteriorment a la instal·lació, cada vegada que desem un fitxer, a la part de sota

de la finestra pot sortir o bé una icona verda de verificació correcta, indicant que
ha estat correctament validat, o bé una icona d’advertiment de color groc, indicant
que té errors de validació. Si cliquem sobre aquesta darrera icona, es mostrarà un
panell inferior on se’ns indicaran els errors trobats.
F ig ur a 3. 9. Extensió de validació amb l’W3C
A la figura 3.9 es mostra un exemple dels advertiments que es produeixen si afegim

errors al codi. En aquest cas no hem tancat una etiqueta <a>.
3.2.6 Accessos ràpids al codi
Quan es treballa amb molts fitxers i/o amb documents de moltes línies de codi,
és molt útil usar marcadors (en anglès, bookmarks) per tal d’accedir a una línia
de codi de manera ràpida. La majoria de gestors d’(X)HTML ens ofereixen una
manera de navegar fàcilment pels nostres documents per tal de poder accedir
ràpidament a aquells llocs dels documents on anem sovint.
En el cas del Brackets hem d’instal·lar prèviament una de les dues extensions
disponibles actualment. En el nostre cas escollirem la desenvolupada per Jeffry
Booher i que podem cercar posant Bookmarks al gestor d’extensions de Brackets,
tal com es mostra a la figura 3.10 :
Fig u ra 3 . 1 0 . Extensió Brackets Editor Bookmarks
Posteriorment a la instal·lació veurem que dins del menú Navigation tenim tres
nous ítems (veure figura 3.11):
• Toogle Bookmark: aquest ítem ens permet posar/treure un marcador, en

funció d’on tenim posicionat el cursor.
• Next Bookmark: navegar al següent marcador a partir d’on tenim posicionat

el nostre cursor.
• Previous Bookmark: navegar al marcador anterior a partir d’on tenim

posicionat el nostre cursor.
És força important fer servir les abreviacions de teclat, ja que ens permetrà anar
molt més ràpid per posar o treure un marcador o bé navegar d’un marcador a un
altre amb agilitat.
Fig u ra 3 . 1 1 . Menú de navegació pels diferents marcadors a Brackets

El resultat de l’afegiment de marcadors es mostra a la figura 3.12, on veiem que

a les línies 8 i 11 del codi s’han afegit el marge esquerre dos indicadors de color
blau, per indicar justament els marcadors de què disposem.
Fi g ura 3 .12 . Indicadors de marcadors a Brackets
Segurament heu vist que al marge inferior de la figura també hi ha un panell que
indica on són posicionats el marcadors i el fitxer els afecta. Aquest panell ens
facilita també navegar pels diferents marcadors, i per activar-lo hem d’anar al menú
View, tal com es mostra a la figura 3.13.
Fi g ura 3 .13 . Activació del panell de marcadors a Brackets
3.2.7 Sagnat del codi
Per tal que un document sigui llegible és molt important que el codi estigui ben
sagnat. Si usem un editor de text pla hem de sagnar el codi a mà, o bé amb espais
o bé amb tabuladors.
Els editors avançats ens ofereixen ajuda per tal de sagnar el codi automàticament.
La majoria d’aquests editors fan que a mesura que escrivim el codi es vagi sagnant
sense que nosaltres ens haguem de preocupar de les tabulacions. Alguns fins i tot
també permeten fer un sagnat automàtic un cop el document ja està editat.
Brackets ens ofereix diversos mecanismes per tal de sagnar el codi. Principalment
en tenim dos, que podem observar a la figura 3.14 i a la figura 3.15 respectivament.
F i g ura 3 . 1 4. Escollir els espais de sagnat
Automàtic: aquest tipus de sagnat afegeix automàticament les tabulacions a

mesura que escrivim el nostre codi. A la part inferior dreta, veurem que podem
escollir entre Tab Size o Spaces, i en ambdós casos escollir l’amplada dels
caràcters per fer les tabulacions, o bé el nombre d’espais de caràcters a afegir
automàticament, a mesura que escrivim i creem noves línies.
Postedició: per tal de fer servir aquesta opció, hem d’instal·lar amb anterioritat
una extensió anomenada HTML Beauty.
Fig u ra 3 . 1 5 . Elecció de l’extensió per formatar codi amb Brackets
Una vegada instal·lat veurem amb facilitat com podem formatar el codi, de forma
que ens en faciliti la lectura i comprensió. Això ho podem fer des del propi menú
accedint a Edit > Beauty o bé per abreviació de teclat, Cmd-Shift-L(Mac) /
Ctrl-Shift-L(Win i Linux).
3.2.8 Autocompleció de codi
Una característica de molta utilitat de la majoria de gestors d’(X)HTML és

l’autocompleció de codi. Aquesta funcionalitat fa que, a mesura que anem
escrivint, l’editor ens suggereixi quina etiqueta o atribut podem posar.
En el cas de Brackets, quan obrim una etiqueta amb < ens ofereix un desplegable
amb totes les etiquetes disponibles. A més, a mesura que escrivim els caràcters
de l’etiqueta, l’autocompleció de codi s’hi adapta i ens mostra només les etiquetes
que comencen pels caràcters que ja hem escrit. Això mateix passa quan estem
escrivint els atributs de les etiquetes i, fins i tot, quan escrivim els valors dels
atributs, tal com es mostra en la figura 3.16.
Figur a 3. 16. Autocompleció de codi
Alguna vegada quan escrivim el codi i l’esborrem no apareixen aquests suggeri-

ments. Una forma d’activar-los és mitjançant el teclat (en Windows i Linux amb
Ctrl + Espai, en el cas de Mac amb ˆ + Espai). Una altra forma és dins del menú
Edit, tal com es veu a la figura 3.17, activant Show Code Hints.
Fig u ra 3 . 1 7 . Mostrar suggeriments per la codificació
3.2.9 Fragments de codi
Sovint hi ha fragments de codi que usem molt i que, o bé els hem de reescriure de
nou o bé els copiem i enganxem des d’altres documents.
Un fragment de codi, en anglès snippet, és un tros de codi que usem molt

habitualment i que, per tant, el volem reutilitzar sovint.
Alguns gestors d’(X)HTML ens ofereixen la possibilitat d’administrar col·leccions

de fragments i així poder reutilitzar-los tants cops com vulguem, podríem dir
que tenen gestors de fragments de codi (snippets) propis, que bé ens permeten
crear els nostres fragments personalitzats o simplement ens proposen alguns ja

preestablerts i útils. En ambdós casos, podem afegir parts variables, de forma que
una vegada afegit el codi, i mitjançant el teclat tinguem la possibilitat de donar
valor a parts d’aquest codi, com per exemple posar un valor a un cert atribut d’un
element o etiqueta HTML. Hem de diferenciar
plantilles de fragments de
codi, en anglès snippets, ja
De la mateixa manera que amb altres casos, Brackets disposa de diferents exten- que les plantilles són molt
més orientades a dotar un
sions per afegir aquesta nova funcionalitat. Per tal de saber de quines disposem, nou document d’una
estructura comuna a tota la
hem de fer servir l’administrador d’extensions i cercar per snippets. Com veurem plana, mestre que els
fragments de codi són
n’hi ha un munt de diferents. Nosaltres escollirem una que és bastant potent i trossets reutilitzables i
comuns, que podem inserir
que compleix els nostres propòsits: Brackets Snippets (by edc). Aquesta extensió de forma puntual a una
plana web, tants cops com
ens permet afegir fragments de codi per diferents llenguatges web; HTML, CSS i desitgem.
JavaScript.
Una vegada instal·lada, hem d’activar els snippets que desitgem fer servir des de
l’administrador d’snippets. Això es fa des del marge dret de la finestra de Brackets,
on veurem la icona d’una bombeta. Una vegada cliquem a la icona, veurem que
a la part inferior de Brackets apareix l’administrador de fragments de codi, tal
com podem veure a la figura 3.18, o en anglès Snippets Manager.
F ig ur a 3. 18. Elements principals de l’extensió Snippets per Brackets
Els elements principals de què disposa aquesta extensió són:
1. Per l’activació del gestor de fragments de codi
2. Per veure el llistat de fragments de codi segons llenguatges disponibles

3. Creació de nous snippets personalitzables
4. Selecció d’un snippet per a la seva modificació
5. Visualització del resum d’un snippet concret
Per tal d’afegir qualsevol fragment de codi, simplement hem d’escriure la paraula
que fa referència al llistat. Si volem afegir el fragment que ens crea un enllaç com
el marcat a la figura, dins del document HTML que estem editant a la posició
desitjada, clicarem a la lletra a i posteriorment clicarem a l’ENTER.
1. Creació d’un fragment sense parts variables
Imaginem que en els nostres llocs web acostumem a posar una nota al peu de
pàgina on s’informa de l’autoria del lloc:
1 <div id="peu">
2 <p>Aquesta pàgina web ha estat dissenyada per l’Institut Obert de Catalunya.
Per a més informació dirigiu−vos a l’<a href="htp://ioc.xtec.cat"
title="Pàgina web de l’IOC">IOC</a></p>
3 </div>
Per tal de fer-ho hem de clicar a New. S’obrirà un formulari, en el qual hem
d’omplir els diferents camps, tal com mostra la figura 3.19.
F igu r a 3. 1 9 . Creació d’un nou fragment de codi
1. Trigger: abreviació que farem servir perquè s’afegeixi el codi al document

que estem editant
2. Description: breu descripció per tenir una referència de què fa aquest

fragment
3. Scope: aquí indiquem el llenguatge on aquest fragment de codi té validesa

4. Text: és la codificació que volem afegir quan cridem aquest snippet, amb
l’abreviació de teclat corresponent. Al nostre cas PEUIOC.
5. Element nou creat i l’abreviació de teclat associada.
2. Creació d’un fragment amb parts variables
Quan es crea un fragment de codi hi podem inserir paràmetres de substitució

(en anglès, placeholders), que s’ompliran quan usem el fragment.
Imaginem que volem crear un fragment que ens generi un petit formulari que
demani usuari i contrasenya. El tros de codi seria el següent:
1 <form action="accio_formulari" method="metode_formulari">

2 Usuari: <input type="text" id="id_usuari" name="name_usuari" />
3 Contrasenya: <input type="text" id="id_contrasenya" name="name_contrasenya"
/>
4 <input type="submit" value="text_boto" />
5 </form>
Volem que les cadenes de text accio_formulari, metode_formulari,

id_usuari, name_usuari, id_contrasenya, name_contrasenya i text_boto
siguin variables, és a dir, que quan vulguem utilitzar aquest fragment se’ns demani
per omplir aquestes cadenes.
Els passos a seguir són els mateixos que per crear un fragment senzill, excepte
en l’últim pas, on haurem de marcar dins del camp Text, és a dir, on inseríem el
codi dels textos variables (paràmetres de substitució) amb la sintaxi que indica al
requadre groc de la figura. La sintaxi definitiva quedarà de la següent manera:
1 <form action="${1:Action}" method="${2:Metode}">

2 Usuari: <input type="text" id="${3:ID_Usuari}" name="${4:Nom_Usuari}" />
3 Contrasenya: <input type="text" id="${5:ID_Clau}" name="${6:Nom_Clau}" />
4 <input type="submit" value="text_boto" />
5 </form>
La figura 3.20 mostra aquest procés.
Figur a 3. 20. Creació d’un fragment de codi amb text variable a Brackets
Una vegada introduïda i desada, simplement escriurem FORM al document

HTML que estem editant i clicarem a ENTER. Posteriorment podrem navegar
pels diferents textos variables (els que hem d’omplir), amb la tecla TAB del nostre
teclat, i introduir els valors corresponents.
3.2.10 Projectes
Les aplicacions web acostumen a estar compostes per més d’un fitxer. A més,
sovint voldrem tenir un seguit de preferències associades a tots els fitxers que
conformen la nostra aplicació o crear tot una estructura per defecte, és a dir, si
tenim plantilles per creació de documents, per què no també tota una estructura
d’arbre de directoris on figurin fins i tot referències a llibreries molt conegudes
dins del desenvolupament web? És per aquests motius que molts editors i gestors
usen els anomenats projectes.
Un projecte és l’entorn de treball d’una aplicació en desenvolupament.

Aquest entorn de treball inclou els fitxers de l’aplicació, estructura i les seves
preferències associades.
Les extensions existents fins a la data actual no disposen d’un fitxer específic on
es guarden les preferències d’un projecte. Brackets prioritza el seu funcionament
a la creació d’una carpeta que contingui el projecte com a tal, i mitjançant alguna
extensió facilita la creació d’estructures predeterminades. Aquest és el cas de
l’extensió Brackets New Project (figura 3.21).
Com a qualsevol altra extensió de Brackets , el que fem és fer servir l’administrador
d’extensions i cercar per la paraula Project, i posteriorment instal·lar-la.
F igu r a 3. 2 1 . Extensió New Projects for Brackets
Una vegada instal·lada dins del menú File, ens apareix una nova opció anomenada
New Project. Si cliquem, s’ens obrirà una nova finestra on ens dóna la possibilitat
de crear un nou projecte, a partir d’unes estructures comunes molt conegudes dins
del món de desenvolupament web. Aquestes estructures ja creen automàticament
els directoris principals del projecte i també afegeixen referències a altres llibreries
comunes. Per exemple llibreries que ens faciliten la interacció amb l’usuari, que
aporten dinamisme al projecte (com ara animacions o efectes) o bé ens aporten
compatibilitat amb navegadors antics. No és objecte d’estudi en aquesta unitat
saber quin és l’objectiu de cadascuna d’aquestes estructures, però sí la possibilitat
que Brackets aporta en la generació de nou projectes, tal com es pot veure a la
figura 3.22.
Figur a 3. 22. Nou projecte a Brackets
3.2.11 Visualització del lloc web
Tots els gestors d’(X)HTML ofereixen algun mètode per poder visualitzar el lloc
web que s’està editant. S’acostuma a usar una o ambdues de les tàctiques següents:
• Previsualització en un navegador intern: el gestor té un navegador integrat

que ens permet veure la nostra pàgina web dins del mateix gestor.
• Previsualització en un o més navegadors externs: podem dir-li al gestor

quin és el nostre navegador preferit i mitjançant un menú i/o un botó s’obre
aquest navegador amb el nostre document (X)HTML. En alguns casos, ens
poden permetre especificar més d’un navegador.
Brackets no disposa del primer d’aquest mecanismes, ja que està molt orientat a
adaptar-se al que els navegadors existents requereixen. En contraposició ofereix
una eina innovadora dins del món del desenvolupament, anomenada Live Preview.
Live Preview (o vista prèvia en viu, en català), ens permet estar modificant el codi
i visualitzant-ne el resultat al navegador, sense la necessitat de desar cada vegada
que fem una prova. Aquest mecanisme és especialment útil perquè redueix molt el
temps empleat a fer proves, que moltes vegades són mínimes. És molt semblant al
que les eines de desenvolupament dels navegadors ofereixen, que treballen d’una
forma similar, o bé connectors per navegadors com ara firebug. L’avantatge de
Live Preview per Brackets és que disposem de tota la potència d’un editor web,
combinat amb la modificació de codi en viu, que fa tot el procés d’edició molt mes
dinàmic.
Per tal d’activar el Live preview podem fer servir dos mètodes, o bé accedim a File
> Live Preview (o al seu defecte l’abreviació de teclat que ens proporciona), o
bé la icona d’un llamp, que tenim a mà dreta de la finestra. Això farà que Chrome
s’obri, ja que és el navegador per defecte que Brackets fa servir, tal com observem
a la figura 3.23.
F igu r a 3. 2 3 . Live Preview a Brackets: finestra de Brackets i la seva previsualització en viu a Chrome
A la figura podem veure un petit requadre de color blau a la finestra del navegador.
Això indica quina part estem editant dins del nostre codi font. El petit punt
blanc al costat del nom del fitxer, indica que aquest fitxer, no ha estat desat; això
no impedeix que puguem veure els resultats i modificacions que introduïm a la
finestra del navegador, i desar el fitxer quan ho creiem convenient.
En cas de que vulguem provar les nostres pàgines a altres navegadors, tenim la
possibilitat d’obrir directament el fitxer o accedir a l’URL corresponent on es troba,
des de qualsevol altre navegador.
3.2.12 Treballar amb l’editor d’imatges Adobe Photoshop
En moltes ocasions, abans de posar-nos a programar codi HTML, CSS o Ja-

vaScript per a la creació de pàgines web, partim d’un prototip realitzat per
dissenyadors amb l’editor d’imatges Photoshop d’Adobe. Això és així ja que
en moltes ocasions es fa servir aquest prototip per mostrar als clients com s’ha
realitzat un disseny abans d’invertir temps a desenvolupar-ho, o bé, si es tracta
d’un desenvolupament propi, per projectar allò que volem realitzar.
Aquest prototip el fem servir com a plantilla, on disposem els elements dibuixats
en capes independents. Brackets ha aportat una extensió innovadora que ens
permet extreure directament informació de les plantilles realitzades amb Photos-
hop i importar els seus continguts a l’editor d’una manera molt simple. Aquesta
extensió s’anomena Extract i ve preinstal·lada a Brackets per defecte.
Per tal de fer ús d’aquesta extensió la primera vegada hem d’acceptar la llicència
d’ús, que no suposa cap pagament. Posteriorment farem un ús normal d’aquesta
potent eina.
Els passos que hem de fer són:
Activar Extract for Brackets, mitjançant la icona a mà esquerra, o bé dins del

menú View selecionar Show Extract for Brackets. (Preview). Veurem que s’obre
un prototip (de fet és un fitxer PSD) a la part inferior de la finestra, tal com es
mostra a la figura 3.24, tot i que en podem obrir d’altres mitjançant el botó Open
a PSD...
Posteriorment tenim la possibilitat d’afegir contingut i/o característiques del fitxer

PSD a la plana que estem desenvolupant al nostre editor (X)HTML.
Per posar un exemple, volem afegir la imatge d’una rodona de color negre al
document web. Si prenem com a referència la figura, haurem de:
• Seleccionar la imatge a incloure amb un clic (vegeu el punt 2 de la figura

3.24). Aquesta imatge pertany a una capa del disseny fet amb Photoshop
(vegeu el punt 1 de la figura 3.24).
• Escriure l’etiqueta <img dins del document que estem editant, i clicar a espai
(vegeu el punt 3 de la figura 3.24). Veurem que s’obrirà un menú contextual
amb els suggeriments, alguns d’ells relatius a la imatge seleccionada.
• Escollir quina propietat d’aquesta imatge volem incloure (width, height, etc)
o bé la imatge directament per l’atribut src (vegeu punt 4 de la figura 3.24).
F ig ur a 3. 24. Ús de l’eina Extract for Brackets

3.2.13 Edició ràpida (Quick Edit)
Brackets disposa d’una altra eina molt útil i diferenciadora de la majoria d’editors
(X)HTML, és l’anomenada Edició ràpida, o Quick Edit en anglès. Aquest eina ens
permet que a mesura que escrivim el codi HTML, podem consultar directament les
propietats CSS associades a les etiquetes i atributs que estem editant, sense haver
d’obrir els fitxers corresponents en una altra finestra o pestanya, sinó directament
al document, i desar els canvis. Fins i tot podem crear noves regles (New rules en
anglès) a mesura que editem, i que afecten a altres fitxers, que tenen a veure amb
l’estètica com ara els fitxers CSS.
Per accedir a aquesta eina hem d’anar al menú Navigate > Quick Edit o
mitjançant l’abreviació de teclat proposada (Ctrl + E per Windows i Linux). Si
l’etiqueta seleccionada ja té regles estètiques marcades (CSS), veurem que s’obre
just a sota una àrea per editar-la, o crear-ne de noves. Si l’etiqueta seleccionada
no té cap regla, ens permetrà crear-ne una de nova, mitjançant el botó New Rule
(Nova regla). En qualsevol dels dos casos ens mostra el fitxer on es guarda aquesta
nova regla.
Com a exemple, a la figura 3.25 podem veure que estem posicionats sobre
l’etiqueta <h1> (vegeu el punt 1 de la figura 3.25), que estem fent una edició ràpida
(Quick edit), que disposem d’una àrea per editar la regla marcada (vegeu el punt
2 de la figura 3.25) i que aquesta regla afecta al fitxer main.css, que és codificació
CSS.
F igu r a 3. 2 5 . L’eina d’edició ràpida de Brackets
3.2.14 Altres extensions molt útils
Són moltes les extensions disponibles per a Brackets. A continuació disposeu

d’una petita selecció d’algunes de les més útils.
• Unused Files: aquesta extensió ens permet trobar dins del nostre codi
referències a fitxers que no es fan servir, és a dir, que tenim dins de la nostra
carpeta de projecte, però que no són referenciades dins de cap dels fitxers
que formen el projecte (figura 3.26).
F ig ur a 3. 26. Extensió per trobar fitxers que no es fan servir
• Files Icons: afegeix icones a l’arbre de fitxers que tenim a mà esquerra.

D’aquesta manera podem identificar millor quin tipus de fitxer és (figura
3.27).
F ig ur a 3 . 27 . Extensió per afegir icones i facilitar reconeixement dels fitxers
• Barckets CSS Color: quan codifiquem amb CSS, podem trobar amb facilitat
els colors dins del codi, ja que posa un petit requadre al costat de cada línia
que fa referència a colors (figura 3.28). Per tal d’activar-ho, hem d’anar al
menú View > Enable Css Color Preview.
F igu r a 3. 2 8 . Extensió per afegir indicadors de colors als CSS oberts amb Brackets
• Emmet: aquesta extensió ens permet editar de manera molt ràpida codi
(X)HTML. La idea principal és usar una sintaxi molt similar als selectors
CSS per tal de generar codi (X)HTML.
Aquí en teniu un exemple, amb l’abreviació corresponent que hem d’escriure:
1 div#pagina>div.logo+ul#nav>li*5>a
per obtenim el codi HTML:
1 <div id="pagina">
2 <div class="logo"></div>
3 <ul id="navigation">
4 <li><a href=""></a></li>
5 <li><a href=""></a></li>
6 <li><a href=""></a></li>
7 <li><a href=""></a></li>
8 <li><a href=""></a></li>
9 </ul>
10 </div>
Fulls d'estil
Mònica Ramírez Arceda, Raúl Broceño
Aplicacions Web
Aplicacions Web Fulls d'estil
Índex
Introducció 5
1 El llenguatge de fulls d’estil CSS 9

1.1 Història i orígens del CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.2 El CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.3 Ubicació dels estils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.4 Sintaxi bàsica de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.4.1 Les regles arrova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.4.2 Comentaris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.5 Cascada i herència . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.5.1 Cascada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.5.2 Herència . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2 Regles CSS 21
2.1 Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.1.1 Selectors de tipus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.1.2 Selectors de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.1.3 Selectors d’identificador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.1.4 Selectors d’atribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.1.5 Selector universal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.1.6 Selectors de descendents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.1.7 Selectors de fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.1.8 Selectors de germans adjacents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.1.9 Selector general de germans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.1.10 Agrupament de selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.2 Pseudoclasses i pseudoelements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.2.1 Pseudoclasses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.2.2 Pseudoelements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.3 Propietats bàsiques de format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2.3.1 Mesures i colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2.3.2 Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2.3.3 Aspecte del text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
2.3.4 Color i fons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
2.4 El model de caixa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
2.4.1 Marges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
2.4.2 Farciment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
2.4.3 Vores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
2.5 El format visual dels elements d’un document . . . . . . . . . . . . . . . . . . . . . . . . . . 67
2.6 Més efectes amb CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
2.6.1 Transformacions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
2.6.2 Transicions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Aplicacions Web Fulls d'estil
2.6.3 Animacions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
2.6.4 Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
2.6.5 Columnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
2.6.6 Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
2.7 Exemples pràctics amb CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
2.7.1 Fer menús amb llistes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
2.7.2 Maquetació de webs sense ús de taules . . . . . . . . . . . . . . . . . . . . . . . . . 90
2.7.3 Simulació de marcs amb CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
2.8 Editors i gestors de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
2.8.1 Autocompleció de codi CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
2.8.2 Creació de regles CSS amb Edició Ràpida . . . . . . . . . . . . . . . . . . . . . . . . 97
2.8.3 Color picker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
2.8.4 Creació gradients linears . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Aplicacions Web 5 Fulls d'estil
Introducció
Les aplicacions web, a més d’oferir informació, han d’oferir una estètica atractiva
i usable a l’usuari. Un bon desenvolupador web ha d’intentar trobar l’equilibri
entre l’estètica i la usabilitat de l’aplicació.
En aquesta unitat, anomenada Fulls d’estil, es detalla el funcionament bàsic del

llenguatge CSS, que ens permet aportar un disseny estètic als nostres documents
(X)HTML. Tot i que els navegadors ja ofereixen una estètica bàsica als documents
(X)HTML per defecte, tota aplicació professional disposa d’una estètica més
elaborada que fa que l’aplicació sigui més valorada pels usuaris.
L’apartat “El llenguatge de fulls d’estils CSS” pretén donar els conceptes bàsics
del llenguatge CSS. Es dóna una perspectiva històrica de l’evolució del llenguatge
i s’introdueix tant la sintaxi bàsica com els conceptes que donen força a aquest
llenguatge: la cascada i l’herència.
L’apartat “Regles CSS” detalla més profundament com es confeccionen les regles
CSS, és a dir, de quins selectors i de quines propietats, amb els seus valors,
disposem. És a dir, es veurà com podem fer que els nostres documents (X)HTML
tinguin colors, elements decoratius, diferents tipus de font... A més veurem
com aquest llenguatge també ens permet maquetar el nostre document, és a dir,
posicionar cadascun dels elements (X)HTML al lloc on desitgem. També es
detallen les novetats que ens aporta l’última versió de CSS, el CSS3, amb la qual
podrem crear efectes visuals molt sofisticats com ara transformacions, transicions
o animacions. Finalment, s’estudiarà com els editors i gestors de CSS ens poden
ajudar a ser més productius en la nostra tasca d’edició de fitxers CSS.
Per realitzar aquesta unitat és indispensable tenir coneixements bàsics

d’(X)HTML, ja que el llenguatge CSS és un llenguatge que enriqueix l’(X)HTML.
Per treballar els continguts de la unitat heu de llegir amb deteniment el material
proporcionat i realitzar els exercicis i les activitats del material web. A més, en els
annexos del material web podeu trobar el codi dels exemples. És molt convenient
estudiar amb detall aquests exemples observant el codi i el resultat que genera en
un navegador. Els annexos també contenen d’altra documentació que us pot ajudar
a aprofundir en la unitat.
1. Construeix un document CSS emprant una sintaxi i estructura correcta i fent

que el codi sigui llegible i entenedor amb l’ajut de comentaris i tabulacions dels
blocs de codi corresponents.
• Estructura correctament i identifica cada part d’un document CSS.
• Fa un ús adequat dels comentaris per aclarir parts del codi.
• Tabula correctament els blocs de manera que el codi sigui entenedor.
2. Utilitza i coneix els estils amb els seus atributs seguint la sintaxi correcta
definida per l’estàndard.
• Identifica i usa els atributs propis de cada estil.
• Utilitza el valors adients i entenedors per a cada estil.
• Combina les etiquetes de manera adequada seguint l’ordre establert.
• Fa un ús parametritzat dels estils per donar vistositat al document.
3. Implementa un lloc web a partir de diversos documents HTML amb estils.
• Identifica els diferents documents i objectes del lloc web seguint les normes
establertes.
• Estructura correctament l’organització d’estils.
• Utilitza adequadament els nivells d’aplicació dels estils en el web.
4. Coneix i domina eines software per desenvolupar documents amb estils.
• Coneix i utilitza amb habilitat editors CSS.
• Coneix i utilitza amb habilitat gestors i entorns de programació CSS

avançats.
1. El llenguatge de fulls d’estil CSS
En els orígens del web i en les seves primeres versions, el llenguatge de marques
HTML era un llenguatge fàcil d’aprendre i molt reduït quant a les marques i
l’estructura. Tot va canviar quan van aparèixer els primers navegadors que eren
capaços de representar recursos gràfics per afegir a la informació textual.
Exemples de marques
D’aquesta manera, el nombre de llocs web va començar a créixer i, amb ell, el visuals del llenguatge
HTML
nombre de marques que l’especificació HTML preveia. L’objectiu era construir
L’HTML clàssic ofereix marques
llocs web cada vegada més atractius i, per a això, l’HTML havia d’incloure noves com <b>, <u>, <i> o <font>,
que són marques de visualització
marques destinades a aconseguir efectes visuals. i no aporten res a l’estructura del
document representat.
Per tal d’evitar que l’(X)HTML fos el responsable de la part estètica i visual de
la web, es van idear els fulls d’estil, és a dir, es va dissenyar el llenguatge CSS
(Cascading Style Sheets).
1.1 Història i orígens del CSS
El que ara coneixem com a CSS va aparèixer quan l’W3C va rebre 9 propostes
diferents per a fulls d’estil, de les quals en va seleccionar dues: Cascading HTML
Style Sheets (CHSS), proposta per Håkon Wium Lie el 1994 i Stream-based Style
Sheet Proposal (SSP). D’aquí van néixer les Cascading Style Sheets (CSS), la
primera versió de les quals, anomenada CSS level 1, va ser proposada com a
estàndard a finals de l’any 1996.
El maig de l’any 1998 es va publicar l’estàndard CSS Level 2. Deu anys més tard,
el 2008, se’n va fer una revisió i es va publicar el CSS Level 2 Revision 1, conegut
com a CSS2.1.
Procés d’estandardització
segons l’W3C: http://
Actualment s’ està treballant amb el CSS3. En aquest cas l’especificació està www.w3.org/Style/
dividida en mòduls, alguns dels quals ja han esdevingut estàndards i en d’altres 2011/CSS-process
encara s’hi està treballant, és a dir, per una part tenim estàndards i per una altra
una tecnologia en continu desenvolupament.
Finalment hem de tenir en compte que una vegada tenim un nou estàndard, aquest
no és immediatament assolit per tots els navegadors alhora, i és molt útil recórrer a
pàgines com caniuse.com per veure si determinades característiques ja han sigut
implementades, per quins navegadors i en quina versió d’aquests navegadors.
Es pot veure un gràfic amb l’evolució històrica del CSS en la figura 1.1.
F igu r a 1. 1 . Línia de temps dels estàndards CSS
Com podeu observar a partir de la versió CSS3, els estàndards es tracten en mòduls
per separat, com ara els colors, selectors o namespaces, tal com mostra la figura
1.1.
1.2 El CSS
Fins fa poc, és a dir abans d’HTML5, per tal de forçar que l’estètica del document
recaigués en el CSS i no en l’(X)HTML, es disposava de les versions Strict
d’(X)HTML, on les etiquetes permeses tenien com a objectiu només marcar
l’estructura i semàntica del document i no la presentació. La versió Transitional
d’(X)HTML tenia més marques relacionades amb la visualització i la presentació
de la web, però s’aconsellava no usar aquest tipus de marques, ja que barregen
estructura i presentació del document. A més, tot i tenir marques per a la visua-
lització, molts cops es necessita oferir efectes visuals que cap sabor d’(X)HTML
era capaç de proporcionar. En l’actualitat, com que HTML5 és més flexible en
l’ús d’etiquetes i atributs, alhora que HTML5 ha eliminat algunes etiquetes que
tenien a veure amb el format i no amb l’estructura dels documents, es deixa al
programador un marge per treballar, tot i que s’aconsella de donar un format estètic
a la web amb l’ús dels fulls d’estil, i deixar exclusivament l’estructura per HTML.
La finalitat de l’ús de fulls d’estil és, doncs, a més d’incorporar el disseny

estètic a la nostra aplicació web, mantenir l’estructura i el disseny separats.
Validació de fulls d’estil

De la mateixa manera que Usar fulls d’estil ens proporciona els avantatges següents:
podem validar documents
(X)HTML, també podem validar
els nostres fulls d’estil per
comprovar que segueixen els • Possibilitat de mantenir el codi.
estàndards proposats per l’W3C.
• En el camp de disseny, el CSS és més potent que les marques de disseny

que ofereix l’(X)HTML.
• El CSS és un llenguatge senzill.
• Es poden especificar diferents fulls d’estil per a un sol document (X)HTML.

Per exemple, podem tenir l’estil per a la pàgina web quan es visita amb el
navegador i l’estil per a quan volem imprimir aquesta pàgina.
• Els fulls d’estil es poden reutilitzar des de diferents documents (X)HTML.

El gran inconvenient dels fulls d’estil és que no tots els navegadors es comporten
de la mateixa manera davant del mateix full d’estil. Això es deu al fet que
alguns navegadors no compleixen els estàndards establerts i, amb això, obliguen el
programador a codificar diferents fulls d’estil (un per a cada navegador). Tot i això,
en els últims anys els navegadors cada cop s’acosten més a complir els estàndards
proposats.
Especificacions CSS
“Els fulls d’estil estan formalment descrits en dues especificacions de l’W3C: CSS1 i
CSS2. CSS1 es va emetre el desembre de 1996 i descriu un model de formatació
simple, principalment per a presentacions basades en la pantalla. CSS1 té al voltant de
50 propietats (per exemple color i mida de font). CSS2 s’enllestia el maig de 1998 i està
basada en CSS1. CSS2 inclou totes les propietats del CSS1 i n’afegeix al voltant de 70
més com, per exemple, propietats per descriure presentacions auditives i salts de pàgina
[...]. Si voleu llegir les especificacions de CSS, les podeu trobar a:
• http://www.w3.org/TR/REC-CSS1
• http://www.w3.org/TR/REC-CSS2”
Håkon Wium Lie; Bert Bos (1999). Cascading Style Sheets: Designing for the Web (capítol
2).
Disponible a: http://www.w3.org/Style/LieBos2e/enter
A la versió CSS3, es publiquen els anomenats snapshots, que són instantànies del procés
on es troba el desenvolupament dels diferents mòduls, ja que es va passar a treballar de
forma modular. http://www.w3.org/Style/CSS/
1.3 Ubicació dels estils
El CSS ens defineix quin aspecte han de tenir els elements (X)HTML. És per això
que hem d’associar d’alguna manera aquestes propietats als elements.
Podem ubicar les propietats CSS en diferents localitzacions:
• A l’etiqueta: afegint les propietats CSS directament a l’element usant

l’atribut style. Posem un exemple: suposem que volem que un determinat
paràgraf estigui centrat amb lletra vermella. Hem de tenir en compte que
aquesta forma d’incloure codificació CSS s’ha de fer servir puntualment, o
per fer proves, però no permet reutilitzar el codi en diverses etiquetes.
El codi és el següent:
1 <p style="text−align:center; color:red">Paràgraf centrat vermell</p>
• A la capçalera del document (X)HTML: podem posar les diferents

propietats CSS dins de l’element <style> que està ubicat dins de l’element
<head>. Per exemple, si volem que tots els paràgrafs estiguin centrats i amb
lletra vermella, el codi és el següent:
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF−8" lang="ca">
5 <title>Document HTML</title>
6 <style>
7 p {
8 text−align:center;
9 color:red
10 }
11 </style>
12 </head>
13 <body>
14 <p>Paràgraf centrat vermell</p>
17 </body>
18 </html>
L’avantatge de l’ús d’incloure CSS a la capçalera, és que el codi CSS es pot

reaprofitar a dins de tot el document i permet que diverses etiquetes comparteixin
les característiques estètiques que codifiquem.
• En un document extern: posem totes les propietats dins d’un document

amb extensió .css i des del document (X)HTML enllacem aquest full
d’estil amb l’ajuda de l’etiqueta <link>, filla de l’element <head>. Si
volem tenir tots els paràgrafs centrats amb lletra vermella, el document
(X)HTML és:
1 <!doctype html>
2 <head>
3 <meta charset="UTF−8" lang="ca">
5 </head>
6 <body>
8 </body>
9 </html>
El fitxer estils.css té el contingut següent:
1 p {
3 color:red;
4 }
L’avantatge d’usar documents externs per establir les propietats CSS és que podem
reutilitzar un mateix full d’estil per a diferents documents (X)HTML.
1.4 Sintaxi bàsica de CSS
Un full d’estil és un conjunt de regles que defineixen l’estètica final dels

documents (X)HTML que l’usen. Cadascuna d’aquestes regles està formada
per un selector i per un conjunt de declaracions.
Una declaració està formada per una propietat amb el seu valor associat.
El selector ens serveix per definir a quin o a quins elements volem aplicar les
declaracions de la regla. Les declaracions són les diverses característiques que
han de complir els elements que concorden amb el selector. A cada propietat de
cada declaració hi posem el valor que s’escaigui.
La sintaxi genèrica d’una regla és, doncs, la següent:

1 selector{
2 declaració_1
3 ...
4 declaració_n
5 }
on la sintaxi de cada declaracio_i és:

1 propietat_i: valor_i;
Per exemple, si volem que tots els paràgrafs tinguin lletra de mida 10pt i un fons
de color gris hem de definir la regla següent:
1 p {
2 font−size: 10pt;
3 background−color: gray;
4 }
En aquesta regla, p és el selector que té dues declaracions: font-size:

10pt; i background-color: gray;. En la primera declaració font-size:
10pt;, font-size és la propietat i 10pt és el valor. En la segona declaració
background-color: gray;, background-color és la propietat i gray és el
valor.
1.4.1 Les regles arrova
Hi ha un conjunt de regles especials que s’anomenen regles arrova o at-rules en

anglès. Aquestes regles es caracteritzen perquè comencen pel caràcter @.
Enumerem a continuació quines són aquestes regles i com s’utilitzen:
• Regla @import: la regla @import ens serveix per incloure, en el nostre full
d’estil, fulls d’estil externs. Si, per exemple, volem incloure en el nostre full
d’estil totes les propietats que hi ha en el document mesestils.css, hem

d’escriure la línia següent:
1 @import "mesestils.css";
• Regla @media: la regla @media serveix per diferenciar per quin mitjà
s’ofereixen les propietats que conté aquesta regla. La sintaxi genèrica és
la següent:
1 @media mitjà{
2 propietats
3 }
on mitjà pot ser print (per imprimir) o screen (per mostrar per pantalla), entre
d’altres.
Imaginem, per exemple, que volem que, quan imprimim el document (X)HTML,
la lletra tingui una mida de 10pt, però que, quan es miri per pantalla, tingui una
mida de 12pt. També volem que en ambdós casos l’alçada de la línia sigui d’1.2.
En el nostre full d’estil hem d’introduir el codi següent:
1 @media print {
2 body{ font−size: 10pt }
3 }
4 @media screen {
5 body { font−size: 12pt }
6 }
7 @media screen, print {
8 body { line−height: 1.2 }
9 }
Avui en dia amb l’augment dels diferents tipus de dispositius representa que
tenim moltes mides de pantalles diferents (smartsphones, tablets, ordinadors,
etc.), aquesta regla ha estat molt útil per aplicar diferents regles CSS de forma
condicional, és a dir, aplicar regles diferents CSS, segons el tipus de pantalla
o la seva orientació. Aquest tipus de programació se l’ha anomenat Disseny
Adaptatiu (en anglès Responsive Web Design o RWD), i a la combinació de la
regla @media amb les condicions que podem afegir, se l’ha anomenat media-
queries.
• Regla @font-face: especifica una font no inclosa en el navegador que

l’usuari es descarregarà.
Vegem un exemple:
1 @font−face {
2 font−family: DeliciousRoman;
3 src: url("Delicious−Roman.otf");
4 }
5
6 p {
7 font−family: DeliciousRoman, Helvetica, Arial, sans−serif;
8 }
En aquest exemple, en la regla @font-face estem definit una font. Per tal de
definir-la li posem un nom: això es fa amb la propietat font-family i en aquest
cas hem triat el nom DeliciousRoman. A més, és imprescindible especificar
on es troba aquesta font, per tal que el navegador la pugui descarregar i usar,
i això es fa amb la propietat src. Veiem que en aquest exemple la font és
Delicious-Roman.otf.
Un cop definida la font, podem usar-la en qualsevol regla. Veiem com a l’exemple
una regla que ens defineix que tots els paràgrafs (selector p) usaran com a
font DeliciousRoman. Si aquesta font no estigués disponible, s’usaria la font
Helvètica, si aquesta tampoc la tingués l’usuari, s’usaria la font Arial. Finalment,
si no es disposés de cap d’aquestes fonts, s’usaria sans-serif.
• Regla @charset: especifica quin és el joc de caràcters que farem servir

dins del fitxer CSS.
1 @charset "UTF−8"; /* activa el joc de caràcters pel full d’estil a

Unicode UTF−8 */
2 @charset ’iso−8859−15’; /* activa el joc de caràcters pel full d’estil Latin−9
(Llengües de l’oest d’Europa, amb el símbol de l’euro) */
• Regla @supports: en CSS3 nivell 3, disposem d’aquesta regla arrova que

ens dóna la possibilitat d’especificar una o diverses condicions, que en cas
de complir-se posaran en marxa les regles CSS a aplicar. La nomenclatura
bàsica és la següent:
1 @supports <condició_a_complir> {
2 /* regles CSS que apliquem en cas de que la condició anterior es compleixi
*/
3 }
Un exemple pràctic seria:

1 @supports (display:flex) {
2 section { display: flex }
3 ...
4 }
Al codi anterior ens diu que si existeix per la propietat display el valor flex,
apliqui a tots els elements HTML de tipus section d’aquesta propietat.
• Regla @page: la fem servir per modificar propietats CSS, a l’hora d’im-
primir un document, però hem de tenir en compte que pot actuar sobre un
nombre de propietats CSS limitat.
1.4.2 Comentaris
Com en tot llenguatge, la llegibilitat és imprescindible si treballen en grup. És per

això que CSS ofereix una manera de comentar els fulls d’estil.
Si en un full d’estil volem posar comentaris destinats a l’aclariment del codi CSS,
hem de fer servir la sintaxi següent:
1 /* comentaris */
Posem un exemple:
1 /* Estil per a totes les capçaleres del document */

2 h1 {
3 text−align: center; /* Text centrat per destacar la importància*/
4 color: red; /* Color de lletra vermella per emfatitzar el text */
5 }
1.5 Cascada i herència
Dues de les característiques que fan que els fulls d’estil tinguin una gran potència
és la cascada i l’herència.
La cascada es refereix a la possible combinació de diferents fulls d’estil.

L’herència fa referència a la capacitat que tenen els elements del document
(X)HTML d’heretar propietats dels seus elements antecessors.
1.5.1 Cascada
Les sigles CSS volen dir Cascading Style Sheets (‘Fulls d’estil en cascada’). Però,
què vol dir cascada en aquest àmbit? Doncs vol dir que podem combinar diferents
fulls d’estil i que les propietats de tots ells es van acumulant. Això ens és molt
útil quan pensem en llocs web grans, on podem tenir un full d’estil bàsic i anar
incorporant-hi altres fulls d’estil, segons les nostres necessitats.
Ara caldria preguntar-nos: si podem combinar diferents fulls d’estil, pot donar-
se el cas que hi hagi propietats que es contradiguin? Si es dóna aquest cas, com
se soluciona? Quina propietat té prioritat? Per solucionar aquest problema hi ha
establerta la jerarquia següent, en ordre de prevalença:
1. Propietats establertes per l’autor de la web: les propietats que estableix

l’autor es poden ubicar en diferents llocs i, segons aquesta ubicació, la propietat té
més o menys prioritat. La jerarquia és la següent, per ordre de quina preval sobre
les altres:
• Propietats establertes en l’atribut style d’un element o Inline style.
• Propietats establertes en l’element <style> del document (X)HTML, o

Internal Style Sheet.
• Propietats establertes en un full d’estil extern, o External Style Sheet.

D’aquesta manera podem dir que l’ordre de prioritat ve marcat per la proximitat
amb l’element que l’afecta, sent la més prioritària Inline Style i la menys External
Style Sheet.
2. Propietats establertes per l’usuari: els navegadors permeten a l’usuari

establir diferents propietats d’estil: mida de la lletra, colors...
3. Propietats establertes pel navegador: els navegadors tenen un estil predeter-

minat per a cadascun dels elements (X)HTML. Si no s’ha establert cap propietat
en els ítems anteriors, les propietats del navegador són les que prevalen.
Posem un exemple que mostri la jerarquia d’estils dins de les propietats que
defineix l’autor del web. Imaginem que tenim els següents fitxers:
• El fitxer index.html:
1 <!doctype html >

2 <html lang="ca">
3 <head>
4 ...
6 <style>
7 p {
8 color: red;
9 }
10 </style>
11 </head>
12 <body>
13 <h1>Encapçalament</h1>
14 <p style="color: blue">Un paràgraf</p>
15 <p>Un altre paràgraf</p>
16 </body>
17 </html>
• El fitxer estils.css:
1 p {
2 color: green;
3 }
4 h1 {
5 color: violet;
6 }
En l’exemple anterior, podríem pensar que les tres declaracions que apareixen
estan en contradicció: el full d’estil estils.css té una regla que ens diu que
tots els paràgrafs tindran la lletra de color verd; l’element <style> del document
index.html ens diu que tots els paràgrafs d’aquest document seran de color
vermell, i l’etiqueta style del primer paràgraf del document index.html ens
diu que aquest paràgraf serà de color blau. La pregunta és: de quin color seran
aquests paràgrafs i per què?
La resposta correcta és que el primer paràgraf serà de color blau perquè l’atribut
style és la ubicació amb més alta jerarquia mentre que el segon paràgraf serà
de color vermell ja que no té cap atribut style, però la regla que apareix
dins l’element <style> preval damunt la regla que apareix en el document
estils.css.
Per últim, s’ha de fer notar que el color de lletra de l’encapçalament <h1> serà
violeta, tal com està establert al fitxer estils.css, ja que és l’única regla que
tenim que faci referència a l’etiqueta <h1>.
Posem un altre exemple per mostrar la poca prevalença de les propietats establertes
pel navegador. Imaginem el següent fitxer (X)HTML:
1 <!doctype html >
2 <html lang="ca">
3 <head>
4 ...
5 </head>
6 <body>
7 <p>Un paràgraf amb una <strong>paraula molt emfatitzada</strong></p>
8 </body>
9 </html>
Si mirem aquest fitxer amb la majoria de navegadors, ens adonarem que la cadena
paraula molt emfatitzada apareix en negreta. Això es deu al fet que, en
absència de la definició de cap estil per part de l’autor de la web, el navegador
decideix que per emfatitzar molt una cadena la posarà en lletra negreta.
Modifiquem el codi anterior, afegint un estil per a l’etiqueta <strong>:

1 <!doctype html>
2 <html lang="ca">
3 <head>
4 ...
5 <style>
6 strong {
7 font−weight: normal;
8 color:red;
9 }
10 </style>
11 </head>
12 <body>
13 <p>Un paràgraf amb una <strong>paraula molt emfatitzada</strong></p>
14 </body>
15 </html>
Si ara visualitzéssim la web, ens adonaríem que la cadena paraula molt

emfatitzada ja no apareix en negreta, a causa de la declaració font-weight:
normal i a més apareix de color vermell gràcies a la declaració color:red. Això
ens mostra que les propietats establertes per l’autor prevalen per sobre de les
propietats establertes pel navegador.
En el cas de la prevalença entre les propietats establertes per l’autor de la web i

les propietats establertes per l’usuari, hi ha la possibilitat d’invertir l’ordre posant
la cadena !important després de la declaració.
Aquest fet ens pot servir perquè la pàgina sigui més accessible, ja que si, per
exemple, un usuari té problemes de visió, li permetem que pugui fer la lletra més
gran, tot i que l’aplicació estigui pensada per ser visualitzada amb una lletra més
petita.
Imaginem doncs que dissenyem una web on volem que la font sigui petita, però que
volem permetre que l’usuari la canviï, si així ho desitja, mitjançant la configuració
apropiada del seu navegador. Per fer-ho, codificarem la següent regla CSS:
1 body{
2 font−size: small !important;
3 }
Finalment, es podria donar el cas que ens trobem dues regles en el mateix nivell
de jerarquia. Com se soluciona aquest “empat”? Doncs bé, si ens trobem en el cas
que les propietats “empaten”, l’última propietat escrita és la que “guanya”. Per
exemple, fixeu-vos en el codi següent en un full d’estil extern (i suposant que no
hi ha més regles que se superposin en el fitxer HTML des d’on es cridi aquest full
d’estil):
1 p{
2 color:red;
3 }
4 ...
5 p{
6 color:green;
7 }
8 ...
En aquest cas la lletra dels paràgrafs serà sempre de color verd, ja que és l’última
regla escrita en el document CSS. La regla on diu que el color de lletra dels
paràgrafs serà de color vermell queda completament invalidada.
Moltes vegades, com que no marquem cap propietat per CSS sobre elements, i
atès que el navegador porta per defecte algunes propietats ja establertes, aquestes
s’apliquen per defecte. Si no volem que això sigui així, és molt habitual que
els desenvolupadors facin servir un full d’estil extern on “inicialitzen” totes les
propietats preestablertes pel navegador. Un exemple d’això el podem trobar a
l’anomenat reset css de meyerweb.com.
A l’annex trobareu el fitxer
reset.css agafat de la web
El codi que faríem servir per afegir aquest reset css, l’afegiríem com un document meyerweb.com
extern abans (a l’exemple reset.css) que la resta de fitxers CSS externs que féssim
servir (a l’exemple estilspropis.css). Tal com indica l’exemple següent:
1 <!doctype html>
2 <html>
3 <head>
5 <title>Exemple de document amb reset CSS </title>
6 <link rel="stylesheet" href="css/reset.css" />
7 <link rel="stylesheet" href="css/estilspropis.css" />
8 <!−− En podem afegir d’altres −−>
9 </head>
10 <body>
11
12 Cos del document
13
14 </body>
15 </html>
1.5.2 Herència
Tots els elements d’una pàgina (X)HTML, amb l’excepció de l’element arrel
<html>, estan continguts en un altre element.
Quan parlem d’herència ens referim al fet que tot element hereta les propietats
dels seus elements antecessors. Malgrat tot, hem de tenir en compte el següent:
• No totes les propietats s’hereten. Aquesta característica està descrita en

l’especificació de CSS corresponent.
• Si volem forçar l’herència en una propietat, podem introduir-hi el valor

inherit.
• Si posem un valor a una propietat, aquest valor preval sobre el valor heretat.
• Els elements hereten el valor computat, no el valor especificat. És a dir, si

una propietat té per valor un valor relatiu (per exemple, un percentatge), el
valor heretat és el resultat calculat.
Posem un exemple per veure l’herència de CSS en acció, considerem el següent

codi:
1 <! DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/
TR/xhtml1/
2 DTD/xhtml1−strict.dtd " >
4 <head>
5 ...
6 <style>
7 body{
8 font−size: small;
9 }
10 p {
11 color: gray;
12 }
13 strong {
14 font−style: italic;
15 }
16 </style>
17 </head>
18 <body>
19 <p>Un paràgraf amb una <strong>text molt emfatitzat</strong></p>
20 </body>
21 </html>
Fixem-nos que l’element <strong> és a dins de l’element <p>, que està contingut
a l’element <body>. Això vol dir que la cadena text molt emfatitzat tindrà
les següents propietats: evidentment estarà en cursiva perquè així ho especifica
la propietat font-style: italic de tots els elements <strong>, però a més,
com que aquest element <strong> és a dins de l’element <p> i el color de lletra
de tots els paràgrafs és el gris, tal com diu la propietat color: gray, la cadena
també serà de color gris. És més, com que l’element <p> és a dins de l’element
<body>, <strong> també hereta la declaració font-size: small. En resum,
la cadena text molt emfatitzat tindrà lletra petita, serà de color gris i estarà
en cursiva.
2. Regles CSS
Per tal de donar forma estètica a una web, necessitem moltes funcionalitats
diferents: colors, fonts, posicionament dels elements... A partir de la codificació
de regles CSS, amb els seus selectors i propietats, podem aconseguir els nostres
objectius.
L’especificació CSS
Com que en l’actualitat l’estàndard que fem servir és CSS3, i aquest està en estableix més selectors i
propietats que les que es
contínua transformació, ens trobem que no tots els navegadors han adoptat algunes presenten en aquests
materials. Trobareu un
de les propietats, o si ho han fet, moltes vegades necessiten un prefix abans de la llistat complet a l’Annex
“Referències ràpides” del
propietat, per tal que funcionin correctament. Aquests prefixos el farem servir, material web d’aquesta
unitat.
quan així sigui necessari, als codis exemples d’aquesta unitat i són:
• -moz-: prefix per al navegador Firefox.
• -ms-: prefix per al navegador Internet Explorer.
• -webkit-: prefix per als navegadors Chrome i Safari.
• -o-: prefix per al navegador Opera.
2.1 Selectors
Un selector és la part de la regla CSS que identifica l’element o elements

del document (X)HTML dels quals volem definir propietats.
Hi ha diferents tipus de selectors: des dels més simples, on només és posa la marca
(X)HTML a la qual volem modificar l’estètica, fins a combinacions complexes
d’aquests selectors.
2.1.1 Selectors de tipus
Els selectors de tipus són els selectors més simples: es tracta únicament d’espe-
cificar l’etiqueta (X)HTML. Afecten a tots els elements (X)HTML amb aquella
etiqueta.
La sintaxi genèrica és la següent:
1 etiqueta {
2 declaracions
3 }
Imaginem que volem que tots els encapçalaments de primer ordre, amb marca
<h1>, siguin de color blau. El codi és el següent:
1 h1 {
2 color: blue;
3 }
Però, i si no volem modificar l’aparença de tots els elements d’un mateix tipus?
Per aconseguir això hem d’usar altres tipus de selectors, com ara els selectors de
classes o els selectors d’identificadors.
2.1.2 Selectors de classe
Els selectors de classe serveixen per associar propietats a tots els elements que
tinguin l’atribut class d’igual valor. Si en el document (X)HTML tenim:
1 <etiqueta class="nomclasse">...</etiqueta>
podem introduir la regla següent amb un selector de classe:
1 etiqueta.nomclasse {
2 declaracions
3 }
Això fa que a tots els elements etiqueta que tinguin l’atribut class amb valor
nomclasse se’ls apliquin les propietats especificades.
També podem definir un selector de classe més genèric, que no depengui de

l’etiqueta de l’element. És a dir, podem definir la regla següent:
1 .nomclasse {
2 declaracions
3 }
Aquesta regla fa que qualsevol element amb l’atribut class amb valor nomclasse
compleixi les declaracions especificades.
Posem un exemple: volem que tots els paràgrafs siguin de color verd, excepte els
de classe destacat, que són de color vermell. El codi CSS és el següent:
1 p {
2 color: green;
3 }
4
5 p.destacat {
6 color: red;
7 }
Qualsevol paràgraf amb etiqueta <p> tindrà el color de lletra verd, però si
introduïm un paràgraf amb classe destacat, <p class=“destacat”>, la lletra
d’aquest paràgraf serà de color vermell.
Si el que volem és que qualsevol element amb class=“destacat” tingui la lletra

vermella, hem d’escriure el codi següent:
1 .destacat {
2 color: red;
3 }
Això implica que més d’un element, o fins i tot elements de diferent tipus, poden
compartir el mateix nom de classe.
2.1.3 Selectors d’identificador
Els selectors d’identificador serveixen per associar unes propietats a l’element

que té un determinat identificador. L’identificador d’un element (X)HTML es
declara amb l’atribut id de l’element. Hem de tenir en compte que en un document
(X)HTML no hi pot haver dos elements amb el mateix identificador. Si en el
document (X)HTML tenim:
1 <etiqueta id="nomidentificador">...</etiqueta>
podem escriure la regla següent amb un selector d’identificador:
1 etiqueta#nomidentificador {
2 declaracions
3 }
Podem introduir la mateixa regla prescindint de quin element porti l’identificador,

és a dir, podem especificar:
1 #nomidentificador {
2 declaracions
3 }
Si, per exemple, volem que el paràgraf amb identificador principal, <p
id=“principal”>, estiguin centrats haurem d’escriure:
1 p#principal {
2 text−align: center;
3 }
Si no ens importa l’etiqueta, és a dir, si volem que l’element amb identificador

principal, sigui quin sigui l’element, estigui centrat haurem d’escriure:
1 #principal {
3 }
2.1.4 Selectors d’atribut
Els selectors d’atribut serveixen per aplicar les propietats de la regla als elements
que tenen un atribut concret. El selector següent:
1 tag[atribut] {
2 declaracions
3 }
afecta tots els elements (X)HTML amb la següent sintaxi:

1 <etiqueta atribut="valor">...</etiqueta>
Per veure les diferents

unitats de mesures
Per exemple, si volem que hi hagi un marge dret de 2em en tots els elements <img>
disponibles, podeu
consultar el subapartat
que tinguin establert l’atribut title, hem d’escriure el següent:
“Mesures i colors”.
1 img[title] {
2 margin−right: 2em;
3 }
Els elements afectats per aquesta regla seran similars al següent:

1 <img src="imatges/river.png" alt="River" title="riv" />
En canvi, si tinguéssim un element com el següent:

1 <img src="imatges/river.png" alt="River" />
no es veuria afectat per la regla, ja que no disposa de l’atribut title.
Els selectors d’atribut permeten diverses variants. Una d’aquestes variants és que
podem jugar amb el valor de l’atribut. Per exemple, si volem establir un marge
dret de 4em en totes les imatges que tenen establert l’atribut title i que, a més,
aquest atribut té per valor river, la regla CSS hauria de ser la següent:
1 img[title="river"] {
3 }
En aquest cas l’element

1 <img src="imatges/river.png" alt="River" title="river" />
seguiria veient-se afectat, però un element com el següent:

1 <img src="imatges/river.png" alt="River" title="riv" />
no tindria el marge dret a 4em ja que no compliria allò que diu el selector: el valor
de title és riv, no river.
També podem filtrar per més d’un atribut. Per exemple, imaginem que ara volem
seleccionar tots els elements <img> que tenen l’atribut title i que són de classe
preferent, com el següent element:
1 <img src="imatges/river.png" alt="River" title="riv" class="preferent" />
La regla CSS seria:
1 img[title][class="preferent"] {
3 }
Finalment, podem filtrar segons una part del valor de l’atribut. Disposem de dues
fórmules per fer-ho:
• [atribut˜=“valor”]: s’usa per seleccionar els elements que tenen com

a atribut una llista de paraules separades per espais, una de les quals és
exactament valor.
• [atribut|=valor]: s’usa per seleccionar els elements que tenen com a

atribut una llista de paraules separades per guions, començant per valor.
Posem un exemple per a cada cas:
1 img[alt~="Riu"] {
2 border: solid;
3 }
4
5 p[lang|="en"] {
6 font−family: "Times New Roman", serif;
7 }
La primera regla selecciona les imatges en les quals l’atribut alt té per valor una
cadena que conté la paraula Riu, com per exemple alt=“Riu Muntanyes”. La
segona regla selecciona els paràgrafs que tenen com a valor de l’atribut lang,
paraules que comencen amb en, com en-US o en-cockney.
En la figura 2.1, es poden veure els resultats de tots aquests exemples.

Fig u ra 2 . 1 . Exemples dels selectors d’atribut
CSS3 afegeix tres nous selectors d’atribut. Vegem-los:
• element[atributˆ=“text”]: selecciona elements amb aquest atribut,

el valor del qual comença per text.
• element[atribut$=“text”]: selecciona elements amb aquest atribut,

el valor del qual acaba amb text.
• element[atribut*=“text”]: selecciona elements amb aquest atribut,

el valor del qual conté text.
2.1.5 Selector universal
El selector * s’anomena selector universal i afecta tots els elements del document.
La sintaxi és la següent:
1 * {
2 declaracions
3 }
Per exemple, la següent norma:
1 * {
2 font−size: 12px;
3 }
faria que tot el text del document tingués una mida de 12px, independentment de
l’etiqueta que l’envolti.
2.1.6 Selectors de descendents
Diem que un element és descendent d’un altre quan aquest element està contingut
en l’altre, no importa a quin nivell. Per tant, un selector de descendents ens permet
seleccionar tots els elements que estan continguts en un altre. La sintaxi genèrica
és la següent:
1 etiqueta etiqueta_descendent {
2 declaracions
3 }
Per exemple, si volem posar en blau tots els elements <em> continguts en un
paràgraf hem d’escriure:
1 p em {
2 color: blue;
3 }
Aquesta regla afectaria tant al text èmfasi com al text paraula del següent codi
(X)HTML, ja que els dos elements <em> són descendents d’un element <p>:
1 <p>Paràgraf amb una paraula amb <em>èmfasi</em>. Aquesta altra <span><em>

paraula</em></span> és a dins d’un <span> que conté un <em></p
>
Podem posar més nivells i barrejar altres tipus de selectors. Imaginem un

exemple més complex: volem posar amb lletra vermella tots els elements de
classe destaca que estiguin continguts en paràgrafs que alhora estan continguts
en elements <div>:
1 div p .destaca {
2 color: red;
3 }
A quin tipus d’element afectaria aquesta regla? Vegem-ne un exemple:

1 <div>
2 <p> Aquesta <span class="destaca">paraula</span> l’hem de destacar.</p>
3 </div>
En aquest cas el text paraula apareixeria en vermell, ja que l’element <span> és

un element de classe destaca descendent d’un element <p> que és descendent
d’un element <div>.
2.1.7 Selectors de fills
Un element és fill d’un altre si és descendent de primer nivell.
Per exemple, en el següent codi (X)HTML:

1 <p><span class="destaca">Els orígens dels <em>fulls d’estil</em></span> es
remunten als anys 90.</p>
L’element <em> és fill de l’element <span>, però no és fill de l’element <p>.
Els selectors de fills ens permeten seleccionar els fills d’un determinat element.
El símbol que hem d’usar és >:
1 etiqueta > etiqueta_filla {
2 declaracions
3 }
Per exemple, suposem que tenim les regles següents en el nostre document CSS:
1 body > p {
2 font−weight: bold;
3 }
4
5 div ol > li p {
6 text−decoration: underline;
7 }
La primera línia de l’exemple fa que tots els paràgrafs que són fills de <body>
estiguin en lletra negreta.
La segona regla és una mica més complexa: el selector afecta tots els elements
<p> que són descendents d’un element <li>, on l’element <li> ha de ser fill d’un
element <ol> que, alhora, ha de ser descendent d’un element <div>.
Aquests dos exemples combinats amb el codi (X)HTML següent fan que observem
el resultat que es mostra en la figura 2.2 en el nostre navegador:
1 <body>
2 <p>paràgraf en negreta</p>
3 <div>
4 <p>paràgraf normal</p>
5 <div>
6 <ol>
7 <li>
8 <p>paràgraf subratllat</p>
10 </li>
11 <li>
12 <div>
14 </div>
15 </li>
16 <li>
17 <div>
18 text no subratllat
19 </div>
20 </li>
21 </ol>
22 <ul>
23 <li>
26 </li>
27 <li>
28 <div>
30 </div>
31 </li>
32 </ul>
33 </div>
34 </div>
35 </body>
F igu r a 2 . 2 . Exemple d’ús de selec-

tors de fills
En aquest exemple, veiem com el primer paràgraf està en negreta perquè es fill de
<body>. En canvi, el segon paràgraf no està en negreta ja que, tot i ser descendent
de <body>, no n’és fill directe.
En el cas de les llistes veiem que només apareixen subratllats aquells paràgrafs
descendents dels elements <li> que són fills directes d’un <ol>. Veiem també
que el text que no està en un paràgraf no està subratllat ja que la regla només
afecta els paràgrafs descendents de <li>. Finalment, podem observar que tots
aquells paràgrafs descendents de la llista no numerada tampoc estan subratllats, ja
que tot i ser descendents d’un element <li>, aquest no és fill d’un element <ol>,
sinó que és fill d’un element <ul>.
2.1.8 Selectors de germans adjacents
Els selectors de germans adjacents ens permeten, donat un element, atorgar

propietats al seu germà immediatament posterior. El símbol usat és el +:
1 etiqueta + etiqueta_adjacent {
2 declaracions
3 }
Per exemple, considerem el següent fragment de codi:
1 <h1>Encapçalament <h1></h1>
2 <h2>Encapçalament <h2> (germà adjacent)</h2>
3 <h2>Encapçalament <h2> (germà no adjacent)</h2>
Si volguéssim reduir l’espai vertical que hi ha entre l’<h1> i l’<h2> que el segueix
immediatament, hem de definir la regla següent:
1 h1 + h2 {
2 margin−top: −5mm;
3 }
Obtindrem el resultat que podem veure en la figura 2.3, on el text Encapçalament

<h1> i Encapçalament <h2> (germà adjacent) estan més junts. El segon
element <h2> és a la distància per defecte, ja que, tot i ser un germà de l’element
<h1> (estan al mateix nivell), no és un germà adjacent d’aquest element.
F igu r a 2. 3 . Exemple de selector de germans adjacents

Complicant una mica la regla anterior, podem fer que la regla només s’apliqui si
l’element <h1> és de la classe obert (class=“obert”):
1 h1.obert + h2 {
2 margin−top: −5mm;
3 }
2.1.9 Selector general de germans
A la versió actual de CSS (CSS3) disposem del selector selector general de

germans, representat amb el símbol ˜, que permet seleccionar tots els germans
d’un element, siguin adjacents o no.
Vegem un exemple:
(X)HTML
1 <h1>...</h1>
2 <p>...</p>
3 <div>
4 <p>...</p>
5 </div>
6 <p>...</p>
CSS
1 h1 ~ p {
2 color: gray;
3 }
En aquest cas, el text del primer i del tercer paràgrafs que apareixen en el codi
(X)HTML serien de color gris. El segon paràgraf no ho seria perquè no és germà
d’un element <h1>.
2.1.10 Agrupament de selectors
Si diversos selectors tenen les mateixes propietats, podem agrupar-los separant els
selectors per una coma. La sintaxi és la següent:
1 selector1, selector2, selector3 {

2 declaracions
3 }
Per exemple, les regles següents:
1 h1 {
2 font−family: sans−serif;
3 color: orange;
4 }
5
6 h2 {
8 color: orange;
9 }
10
11 h3 {
13 color: orange;
14 }
són equivalents a la regla següent, on hem agrupat els tres selectors:
1 h1, h2, h3 {
3 color: orange;
4 }
Posem un altre exemple, on no coincideixin totes les declaracions. Imaginem que

tenim les següents regles:
1 h1 {
4 color: orange;
5 }
6
7 h2 {
10 color: orange;
11 }
12
13 h3 {
16 color: orange;
17 }
Podem observar que la primera declaració és diferent per a cadascuna de les regles,
però la resta de declaracions són iguals. Podríem obtenir els mateixos resultats
codificant el següent:
1 h1 {
3 }
4
5 h2 {
7 }
8
9 h3 {
11 }
12
13 h1, h2, h3 {
15 color: orange;
16 }
2.2 Pseudoclasses i pseudoelements
Les pseudoclasses i els pseudoelements serveixen per afegir alguns efectes

addicionals a alguns selectors. La seva sintaxi genèrica és:
1 selector:pseudo_classe_o_pseudoelement {
2 declaracions
3 }
2.2.1 Pseudoclasses
A continuació enumerem les pseudoclasses existents amb la seva descripció i

alguns exemples:
• :first-child: selecciona un element que és el primer fill d’un altre

element. Per exemple,
CSS
1 /* Els paràgrafs fills de div.nota tindran un sagnat d’1em */

2 div.nota > p {
3 text−indent: 1em;
4 }
5
6 /* El primer paràgraf fill dels elements div.nota tindrà un sagnat de 2em */
7 div.nota > p:first−child {
9 }
(X)HTML
1 <p> Paràgraf exterior al <div></p>

2 <div class="nota">
3 <p>Primer paràgraf fill de <div></p>
4 <p>Segon paràgraf fill de <div></p>
5 </div>
6 </body>
En la figura 2.4 podem veure el resultat d’aquest exemple.
Fig ur a 2. 4 . Exemple de pseudoclasse

:first-child
• :link: permet definir l’estil dels enllaços de la nostra pàgina, quan encara
no s’han visitat.
• :visited: permet definir l’estil dels enllaços de la nostra pàgina, quan ja

s’han visitat.
Aquestes dues pseudoclasses ens permeten modificar el comportament per defecte

dels enllaços, és a dir, substituir el color blau i subratllat pels enllaços no visitats
(link) i el color lila i subratllat pels enllaços visitats (visited), per altres colors i
format de text (vegeu figura 2.5).
F ig ur a 2. 5 . Com-
portament per defec-
te dels enllaços no vi-
sitats i visitats
Posem un exemple de les dues pseudoclasses anteriors:
CSS
1 /* Quan l’enllaç no està visitat tindrem lletres negres i fons blanc */
2 a:link {
3 color: black;
4 background−color: white;
5 }
6
7 /* Quan l’enllaç s’hagi visitat tindrem lletres blanques i fons negre */
8 a:visited {
9 color: white;
10 background−color: black;
11 }
(X)HTML
1 <p><a href="http://fsf.org">Enllaç normal</a></p>
2 <p><a href="http://gnu.org">Enllaç visitat</a></p>
Podem veure el resultat d’aquest exemple en la figura 2.6.
Fi g ura 2 .6 . Exemple de
pseudoclasses :link i :visited
• :active: permet definir l’estil dels elements quan s’activen (quan premem
el ratolí damunt seu).
• :hover: permet definir l’estil dels elements quan passem per damunt seu.
És molt comú fer servir aquestes dues pseudoclasses, en combinació amb link i
visited, per donar major dinamisme als enllaços, tot i que active i hover es fan
servir també per altres tipus d’elements.
• :focus: permet definir l’estil dels elements quan reben el focus.
Posem un exemple de les tres pseudoclasses anteriors:
CSS
1 /* Els enllaços (visitats i no visitats) són de lletra blanca damunt de fons
negre */
2 a:link, a:visited {
3 color:white;
4 background−color:black;
5 }
6
7 /* Quan hi passem per damunt tindran una vora negra, la lletra serà negra i el
fons blanc */
8 a:hover {
9 border: solid thin black;
10 color: black;
11 background−color:white;
12 }
13
14 /* Quan els premem, la lletra serà blanca i el fons vermell */
15 a:active {
16 color:white;
17 background−color:red;
18 }
19
20 /* Quan ens situem en un control de formulari <input> tindrà
21 una vora vermella puntejada, i un farciment de 2px */
22 input:focus {
23 border: red 2px dotted;
24 padding: 2px;
25 }
(X)HTML
1 <p><a href="http://fsf.org">Enllaç</a></p>
2 <p><a href="http://gnu.org">Enllaç pel qual passo per sobre</a></p>
3 <p>Camp de text no actiu: <input type="text" name="input" /></p>
4 <p>Camp de text actiu: <input type="text" name="input" /></p>
Una mostra del que veuríem la tenim en la figura 2.7.
Fi g ura 2 .7. Exemple de les pseudoclasses :active, :hover i :focus

• :lang: permet definir les propietats segons l’idioma.
Per exemple, si volem establir que els paràgrafs que tenen l’atribut lang amb
valor ca (<p lang=“ca”>...</p>) estiguin amb lletra vermella, hem de definir-
ho amb la regla següent:
1 p:lang(ca) {
2 color: red;
3 }
La versió actual de CSS (CSS3) incorpora a més, les següents pseudoclasses:

Incorporar exemples
d’aquestes pseudoclasses
• :last-child: selecciona els elements indicats, però amb la condició que
siguin l’últim fill del seu element pare.
• :nth-child(nombre ): selecciona els elements indicats, però amb la

condició que sigui el fill n-èsim del seu element pare.
• :nth-last-child(nombre ): funciona com la pseudoclasse anterior, però

els fills es comencen a comptar pel final.
• :nth-of-type(nombre ): selecciona els elements indicats, però amb la

condició que sigui el fill n-èsim d’aquest tipus. Com a valor, a més de posar
nombres, podem posar ‘odd’ que recuperarà tots els fills en posició senar o
‘even’ que recuperarà tots els fills en posició parell.
• :nth-last-of-type(numero): funciona com la pseudoclasse anterior,

però els fills es comencen a comptar pel final.
• :empty: selecciona l’element, però amb la condició que aquest no tingui

fills (ni altres elements ni text).
2.2.2 Pseudoelements
Pseudoelements en CSS3
A continuació enumerem els pseudoelements que tenim disponibles, juntament
La sintaxi dels pseudoelements
en CSS3 canvia lleugerament: en amb la seva descripció i alguns exemples:
lloc de posar : es posarà ::.
Així doncs, per exemple, el
pseudoelement :first-element
ara serà ::first-element. • :first-line: permet definir l’estil de la primera línia de l’element.
• :first-letter: permet posar propietats d’estil a la primera lletra de

l’element.
• :after: permet introduir contingut al final de l’element. Haurem d’afegir

la propietat content amb el valor desitjat.
• :before: permet introduir contingut a l’inici de l’element. Haurem

d’afegir la propietat content amb el valor desitjat.
A continuació exposem un exemple on participen tots aquests pseudoelements.

Se’n poden observar els resultats en la figura 2.8.
CSS
1 /* Els paràgrafs de classe ll tindran una amplada de 20em */
2 p.ll {
3 width: 20em;
4 }
5
6 /* La primera línia dels paràgrafs de classe ll estan en negreta */
7 p.ll:first−line {
8 font−weight:bold;
9 }
10
11 /* La primera lletra dels paràgrafs de classe ll està flotant a
12 l’esquerra amb lletra de tipus monospace tres cops més gran */
13 p.ll:first−letter {
14 float: left;
15 font−size: 300%;
16 font−family: monospace;
17 }
18
19 /* Davant de cada paràgraf de classe pf hi haurà el text
20 ’Paràgraf: ’, després hi haurà un logotip del navegador
21 Firefox */
22 p.pf:before {
23 content: "Paràgraf: ";
24 }
25
26 p.pf:after {
27 content: url("imatges/firefox.png");
28 }
(X)HTML
1 <p class="pf">Això és un paràgraf </p>
2 <p class="pf">Això també és un paràgraf </p>
3 <p class="ll">Això és un paràgraf d’amplada 20em on la primera lletra és molt
gran i la
4 primera línia està en negreta...</p>
Fi gura 2 .8. Exemple dels pseudoelements :first-line, :first-letter, :after i :before
CSS3 (la versió actual de CSS) incorpora el pseudoelement ::selection, que

afecta allò que l’usuari ha seleccionat amb el ratolí.
2.3 Propietats bàsiques de format
Podeu trobar unes guies

de referència ràpida de Per tal de definir les declaracions d’una regla tenim disponibles un seguit de
totes les propietats de
CSS (per a CSS1, CSS2 i propietats que ens permeten modificar l’aparença dels elements (X)HTML: els
CSS3) a l’Annex
“Referències ràpides” del colors, la tipografia...
unitat.
2.3.1 Mesures i colors
Mesures
Algunes de les propietats que podem establir en el full d’estil tenen com a valor una
unitat de mesura que ens indica la mida de la propietat (mides de lletra, amplades,
marges...). Aquestes unitats de mesura poden ser unitats relatives o absolutes:
La unitat de mesura ”em”
Una de les unitats de mesura més
usades, és la mesura em. 1em és
• Les unitats relatives les podem mesurar de molt diverses maneres:
equivalent a la mida de la font
actual. Per tant, 2em és dues
vegades la mida de la font actual.
– em: relativa a la mida del tipus de lletra usat. Hem de tenir en compte
que aquesta unitat té com a referència el seu contenidor.
Per exemple, si un element es
mostra amb una mida de 10pt,
llavors 2em equival a una mida
– rem: relativa a la mida del tipus de lletra general, és a dir, té com a
de 24pt. referència la unitat que fa servir l’element arrel (root), i no l’element
contenidor.
– px (Pixels): possiblement és la mesura més popular i té a veure amb
la resolució que ofereixen les pantalles que mostren l’HTML.
– %: unitat percentual.
– ex: relativa a l’alçada de la lletra x. Canvia si es canvia la font que
fem servir.
– ch: similar a l’anterior, però és relativa al caràcter numèric 0.
També disposem d’unitats relatives al viewport, és a dir, a l’amplitud de la finestra

del navegador.
• vw (viewport width): 1vw equival a (1/100) de l’amplada de la finestra, és

a dir, 1%. Per reflectir un valor del 15% hauríem de posar 15vw.
• vh (viewport height): el mateix funcionament que l’anterior però respecte

a l’alçada (height).
• vmin: el funcionament és molt similar als anteriors, però hi ha una avaluació

prèvia de quin eix, x o y, és menor i selecciona com a referent l’eix que ho
sigui.
• vmax: idèntic a l’anterior, però agafant com a referent l’eix que sigui més
gran dels dos.
• Les unitats absolutes es poden mesurar amb centímetres, amb mil·límetres

, amb polzades o amb punts.
– cm: centímetres.
– mm: mil·límetres.
– in: polzades (inches)
– pt (punts): és una mesura física, i equival a 1/72 part d’una polzada.
– pc (piques): és molt semblant a l’anterior 1pc equival a 12pt.
Un altre factor a tenir en
Quant a les unitats relatives, hem de destacar que una distància definida en px compte és que els
navegadors per defecte
no canvia si l’usuari canvia la mida del text en el seu navegador o si l’usuari tenen un valor habitual de
font de 16px, per aquest
canvia la mida de la finestra del navegador, però sí que canvia si l’usuari canvia la motiu 1em = 16px = 0.17in
= 12pt = 1pc = 4.2mm =
resolució de la pantalla. En canvi, una distància definida en em o en percentatge 0.42cm
és proporcional a la mida de la font establerta pel navegador. Per tant, si l’usuari

canvia la mida del text en el seu navegador, la mesura augmenta o disminueix
proporcionalment.
Colors
Podeu trobar totes les

Algunes propietats tenen com a valor un color (color de la lletra, color de fons...). paraules clau amb el seu
color corresponent a
Els colors es poden expressar amb paraules clau o amb el model RGB. l’Annex “Colors per a
CSS” del material web
d’aquesta unitat.
Les paraules clau expressen el color que volem mostrar en anglès, de manera
que és molt senzill de recordar: red és vermell, green és verd, blue és blau...
L’inconvenient d’usar paraules clau per fer referència a un color és que estem
limitats a usar un cert nombre de colors, només aquells que tenen associat un
nom.
En canvi, amb RGB podem obtenir tota la gamma de colors, és a dir, fem ús dels
tres components de color bàsics (Red Green Blue). RGB ens permet especificar
quina tonalitat volem de cadascun dels colors bàsics: el vermell, el verd i el blau.
Per a cada color bàsic podem donar un valor comprès entre 0 i 255. Aquest valor
el podem especificar en base decimal o en base hexadecimal. Per exemple, el color
vermell tindrà el valor màxim de vermell i 0 per al verd i el blau.
Si el volem escriure amb base decimal haurem de posar:
1 rgb(255,0,0)
Amb aquesta expressió diem que volem 255 de vermell, 0 de verd i 0 de blau.
Si el volem expressar amb valor hexadecimal haurem d’escriure:
1 #FF0000
Amb aquesta expressió estem dient, que volem FF de vermell (el nombre FF en
hexadecimal és el nombre 255 en decimal), 00 de verd i 00 de blau. Així doncs, si
expressem el color en hexadecimal, els dos primers dígits corresponen al vermell,
els dos següents al verd i els dos últims al blau.
CSS ens dóna la possibilitat de simplificar l’escriptura si els dos caràcters d’un
component de color són iguals, i deixar exclusivament 1 per cada parell, és a dir,
el color #FF0000 es pot simplificar per #F00, o en altre exemple és que el color
#AACC66 es pot simplificar per #AC6
Dos colors molt comuns són el blanc i el negre. El blanc (white), és la suma
dels tres colors bàsics, per tant el podem expressar com #ffffff o bé com
rgb(255, 255, 255). En canvi, el negre és l’absència dels colors bàsics, per
tant és #000000 o bé rgb(0, 0, 0).
Un petit resum orientatiu amb els colors bàsics, el trobeu a la figura 2.9.
F i g ura 2 .9 . Exemples de colors amb paraules clau i el

seu equivalent numèric
Imatge extreta de la web del w3c

(http://www.w3.org/TR/CSS21/syndata.html#value-def-color)
Colors amb transparència o RGBA
Els navegadors més importants suporten una altra manera d’establir el color,
l‘rgba, que accepta un quart paràmetre a més més dels tres colors bàsics. Aquest
quart paràmetre és l’anomenat canal alfa, que determina la transparència del color
i pot agafar valors compresos entre el 0.0 (transparència total) i l’1.0 (opacitat
total). Per exemple, per posar un vermell mitjanament transparent escriuríem:
1 rgba(255,0,0,0.5)
2.3.2 Fonts
El llenguatge CSS ens permet descriure les fonts del text contingut a cadascun
dels elements (X)HTML.
Les propietats de què disposem per descriure les fonts del nostre document són
les següents:
• font-family: canvia el tipus de font. Es poden posar diversos tipus,

separats per una coma, de manera que si el navegador no disposa del primer
tipus, usa el segon, si no té el segon, usa el tercer i així consecutivament.
Hem de tenir en compte que podem establir com a valor una de les famílies
genèriques existents. Si usem una família genèrica, ens assegurem que el
navegador posi almenys una font similar a la que nosaltres volem. Les famílies
genèriques són:
• serif: els caràcters tenen petits acabats en els seus extrems.
• sans-serif: els caràcters no tenen petits acabats en els seus extrems.
• monospace: tots els caràcters tenen la mateixa amplada.
Podeu veure la diferència entre aquestes grans famílies a la figura 2.10, la figura
2.11 i la figura 2.12.
Figu r a 2. 10 . Exemple de font de la família serif
CC Attribution-Share Alike 3.0 Unported

(http://commons.wikimedia.org/wiki/File:Serif_and_sans-
serif_03.svg)
Figu r a 2. 1 1 . Exemple de font de la família sans-

serif
CC Attribution-Share Alike 3.0 Unported

(http://commons.wikimedia.org/wiki/File:Serif_and_sans-
serif_01.svg)
Figu r a 2 . 1 2. Exemple de font de la família

monospace
Public domain
(http://commons.wikimedia.org/wiki/File:Monospace_font.svg)
Vegem un exemple:
1 body{
2 font−family: Gill, Helvetica, sans−serif;
3 }
En aquest cas tots els elements descendents de <body> heretaran aquesta propietat.
El navegador intentarà usar la font Gill. Si no la té, intentarà usar l‘Helvetica.
Finalment, si tampoc la té, usarà una font de la família genèrica sans-serif.
• font-style: permet posar la lletra en cursiva. Si volem que la lletra estigui

en cursiva establirem el valor a italic. Si volem treure la lletra cursiva,
posarem el valor normal. Vegem un exemple:
1 h1, h2, h3 {
2 font−style: italic;
3 }
4
5 h1 em {
6 font−style: normal;
7 }
Amb aquestes regles estem aconseguint que tot el text inclòs en les etiquetes
<h1>, <h2> i <h3> estigui en lletra cursiva, excepte els elements <em> descendents
d’<h1>, que no ho estaran.
• font-variant: serveix per establir el valor small-caps. Si volem

anul·lar aquest valor, haurem d’establir el valor normal. D’altra banda,
small-caps converteix els caràcters que estan en minúscules a majúscules,
però amb una tipografia més petita. Vegem-ne un exemple:
1 h3 {
2 font−variant: small−caps;
3 }
• font-weight: serveix per posar la lletra en negreta. Per posar-la usarem

el valor bold i per treure-la usarem el valor normal. Un exemple seria el
següent:
1 p {
2 font−weight: normal
3 }
4
5 h1 {
6 font−weight: bold
7 }
Existeixen altres valors relatius anomenats bolder o lighter, aquests el que fan
és enfosquir o aclarir la font en funció del seu element pare, respectivament.
Al subapartat “Mesures i
colors” d’aquesta unitat
podeu trobar més
informació respecte les
• font-size: aquesta propietat ens permet definir la mida de la lletra. La
unitats de mesura. podrem establir tant en unitats relatives com en unitats absolutes, tot i que,
normalment, és més recomanable usar unitats relatives. Vegem un exemple:
1 p {
3 }
4
5 @media print {
6 p {
7 font−size: 12pt;
8 }
9 }
En aquest exemple estem distingint la mida dels paràgrafs: quan es mostrin per
pantalla tindran una mida de 16px, quan s’imprimeixin tindran una mida de 12pt.
• font: aquesta propietat és un resum de les propietats anteriors. Si establim

aquesta propietat, podem posar els valors de les propietats anteriors separats
per un espai en blanc. Vegem-ne diversos exemples:
1 p#par1 {
2 font: bold x−large monospace;
3 }
4
5 p#par2 {
6 font: normal small−caps small fantasy;
7 }
8
9 p#par3 {
10 font: oblique bold 120% cursive;
11 }
12
13 p#par4 {
14 font: x−large/110% ’New Century Schoolbook’, serif;
15 }
En la figura 2.13 trobarem la visualització d’aquests exemples.
F ig ur a 2. 13 . Propietats de font
2.3.3 Aspecte del text
CSS disposa de diverses propietats per definir com es mostrarà el text del nostre
document. Vegem-les:
El sagnat és la introducció
• text-indent: aquesta propietat ens permet establir el sagnat en alguna d’espai en blanc al
començament d’una línia de
de les unitats de mesura existents. Aquesta unitat pot ser tant positiva com text.
negativa. Per exemple, vegem diferents regles per tal de comparar text sense
sagnat, amb sagnat positiu i amb sagnat negatiu, respectivament:
1 p#par1 {
3 }
4
5 p#par2 {
7 }
8
9 p#par3 {
10 text−indent: −1em;
11 }
La figura 2.14 ens mostra el resultat d’aquestes regles.
F igu ra 2 .1 4 . Exemple de la propietat text-indent
• text-align: amb aquesta propietat podrem establir el tipus d’alineació.

Els valors disponibles són: center pel text centrat, left pel text alineat
a l’esquerra, right pel text alineat a la dreta i justify si volem el text
justificat. Vegem un exemple de text centrat:
1 p{
2 background−color: #11ffa1;
3 }
4 p#esquerra{
5 text−align: left;
6 }
7 p#dreta{
8 text−align: right;
9 }
10 p#centrat{
12 }
13 p#justificat{
14 text−align: justify;
15 }
La figura 2.15 ens en mostra el resultat.

Fi gura 2 .15 . Alineació de text amb CSS
• text-decoration: ens permet posar una línia a sota per subratllar el

text (underline), a sobre (overline) o ratllant el text (line-through).
També ens permet fer que el text parpallegi mitjançant el valor blink.
Vegem-ne un exemple:
1 p#par1 {
2 text−decoration: none;
3 }
4
5 p#par2 {
6 text−decoration: underline;
7 }
8
9 p#par3 {
10 text−decoration: overline;
11 }
12
13 p#par4 {
14 text−decoration: line−through;
15 }
16
17 p#par5 {
18 text−decoration: blink;
19 }
La figura 2.16 ens mostra el resultat d’aquestes regles.
Fi g ura 2 .16 . Exemples de la propietat text-decoration

• letter-spacing: incrementa la distància entre lletres. Com a valor

usarem qualsevol unitat de mesura. Un exemple seria:
1 blockquote {
2 letter−spacing: 0.1em;
3 }
• line-height: estableix l’alçada o espai entre cadascuna de les línies,

respecte la seva base (baseline). Per exemple:
1 p {
2 line−height: 2em;
3 }
• word-spacing: incrementa la distància entre paraules. Per exemple:
1 h1 {
2 word−spacing: 1em;
3 }
• text-transform: converteix les lletres a majúscules posant el valor

uppercase; a minúscules posant el valor lowercase, o posa la primera
lletra de cada paraula en majúscula i la resta en minúscula posant el valor
capitalize. Si volem anul·lar aquesta propietat, hem de posar el valor
none. Vegem-ne dos exemples:
1 h1 {
2 text−transform: uppercase;
3 }
4
5 .titol {
6 text−transform: capitalize;
7 }
• white-space: defineix com s’han de tractar els espais en blanc que

continguin l’element, ja siguin per salts de línia, tabulacions o espais en
blanc directament. Els valors que pot assumir són: normal, pre, nowrap,
pre-wrap i pre-line. A continuació tenim una taula per aclarir el seu
funcionament.
Taul a 2. 1.
Linies noves Espais i tabulacions Text embolicat (Text
wrapping)
normal Es col·lapsen Es col·lapsen Embolicat
pre Es mantenen Es mantenen No embolicat
nowrap Es col·lapsen Es col·lapsen No embolicat
pre-wrap Es mantenen Es mantenen Embolicat
pre-line Es mantenen Es col·lapsen Embolicat

Veiem un exemple amb una plana sencera amb HTML, on hem afegit salts de línia
i tabulacions, per veure les diferències:
1 <!doctype html>
2 <html>
3 <head>
5 <title>Exemples white−space</title>
6 <style>
7 p{
8 border: 1px solid red;
9 width: 150px;
10 }
11 p#par1{
12 white−space: normal;
13 }
14 p#par2{
15 white−space: pre;
16 }
17 p#par3{
18 white−space: nowrap;
19 }
20 p#par4{
21 white−space: pre−wrap;
22 }
23 p#par5{
24 white−space: pre−line;
25 }
26 </style>
27 </head>
28 <body>
29 <p id="par1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
30 Aenean commodo ligula eget dolor.</p>
39 </body>
40 </html>
El resultat d’aquesta codificació la veiem a la figura 2.17:

F igu r a 2. 1 7 . Comportament de la propietat white-space a CSS
Trobareu el codi dels

exemples a l’Annex “Codi
font dels exemples” del CSS3 afegeix diverses propietats que ens permeten donar mes efectes al text
unitat. contingut als elements. Enumerem-ne algunes:
• text-shadow: permet posar una ombra al text. Aquesta propietat té quatre

valors separats per espais, els dos primers obligatoris:
– ombra horitzontal: unitat de mesura amb la posició horitzontal de

l’ombra.
– ombra vertical: unitat de mesura amb la posició vertical de l’ombra.
– borrositat: unitat de mesura que denota a partir d’on la vora es fa
borrosa.
– color: color de l’ombra.
Vegem uns exemples:
CSS
1 p.ombra {
2 font−size: 1.5em;
3 }
4
5 p.ombra1 {
6 text−shadow: 5px 10px;
7 }
8
9 p.ombra2 {
10 text−shadow: 5px 10px 1px gray;
11 }
HTML
1 <p class="ombra ombra1">Text amb ombra.</p>

2 <p class="ombra ombra2">Text amb ombra borrosa i color.</p>
• word-wrap: si en un text tenim una paraula molt llarga que no cap a

l’element contenidor, aquesta propietat ens permet fer que la paraula es
pugui tallar en diferents línies. Els valors d’aquesta propietat són:
– normal: la paraula sobrepassa els límits de l’element i no es pot tallar

en línies.
– break-word: permetem que la paraula es talli en més d’una línia.
Vegem alguns exemples:
CSS
1 p.tall {
2 word−wrap: break−word;
3 }
HTML
1 <p class="tall">Text amb una paraula llaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarga.</p>

2 <p>Text amb una paraula llaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarga.</p>
• text-overflow: aquesta propietat ens serveix per especificar com s’ha

de comportar el navegador quan el text queda tallat. Tenim tres valors
possibles:
– clip: el text queda tallat

– ellipsis: es posen punts suspensius
– una cadena de text: es posa aquest text
Vegem alguns exemples:
HTML
1 <p class="desbordament desbordament1">Text amb una paraula

llaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarga.</p>
2 <p class="desbordament desbordament2">Text amb una paraula
llaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarga.</p>
CSS
1 p.desbordament {
2 overflow: hidden;
3 }
4
5 p.desbordament1 {
6 text−overflow: clip;
7 }
8
9 p.desbordament2 {
10 text−overflow: ellipsis;
11 }
Els resultats de tots aquests exemples es poden veure en la figura 2.18.
F igu r a 2. 1 8 . Exemples d’alguns efectes de text incorporats a CSS3
2.3.4 Color i fons
El CSS ens permet posar colors i imatges a la nostra web, tant pel que fa a la lletra
com pel que fa al color o imatge de fons de cada element. Vegem quines propietats
ens permeten fer-ho:
En el subapartat “Mesures
i colors” d’aquesta unitat
podeu trobar més • color: permet canviar el color de lletra. Vegem, per exemple, dues maneres
informació respecte els
valors dels colors. per establir que el text inclòs en els elements <em> serà de color vermell:
1 em {
2 color: red;
3 }
4
5 em {
6 color: rgb(255,0,0);
7 }
• background-color: permet canviar el color de fons de l’element o

elements. Per exemple, per posar de color vermell el color de fons dels
elements <h1>, posaríem:
1 h1 {
2 background−color: #FF0000;
3 }
• background-image: permet posar una imatge com a fons de l’element o

elements. Si volem que no hi hagi cap imatge, s’estableix el valor none.
Per defecte, quan posem una imatge com a fons d’un element, aquesta es
repeteix tan horitzontalment com verticalment al llarg de l’amplada i alçada
de l’element.
Per a posar una imatge de fons de tot el document, per exemple, el selector hauria
de ser l’element <body>:
1 body {
2 background−image: url("fons.png");
3 }
• background-attachment: aquesta propietat s’ha de fer servir juntament

amb la propietat background-image i serveix per establir si la imatge
de fons ha de quedar fixa o no. Si volem que quan pugem i baixem pel
document la imatge resti immòbil, el valor haurà de ser fixed. Si, al
contrari, volem que la imatge acompanyi al text quan pugem i baixem pel
document, el valor serà scroll. Vegem-ne un exemple:
1 body {
3 background−attachment: fixed;
4 }
• background-repeat: aquesta propietat s’ha de fer servir juntament amb la

propietat background-image i serveix per establir si volem que la imatge
de fons es repeteixi (repeat) o no (no-repeat). A més, si volem que es
repeteixi només horitzontalment, posarem el valor repeat-x i si volem que
només es repeteixi verticalment posarem repeat-y. Vegem-ne un exemple:
1 body {
2 background: white url("fons.png");
3 background−repeat: repeat−y;
4 }
• background-position: aquesta propietat s’ha de fer servir juntament

amb la propietat background-image i serveix per especificar la posició
on es dibuixarà la imatge de fons. Aquesta propietat s’acostuma a usar en
conjunció amb la declaració background-repeat: no-repeat;. Com
a valor d’aquesta propietat es donen dues paraules clau separades per un
espai en blanc. La primera paraula clau correspon a l’eix de les X i pot ser
left si volem la imatge alineada a l’esquerra; center si volem la imatge
centrada, o right si la volem alineada a la dreta. La segona paraula clau
correspon a l’eix de les Y i pot ser top si volem la imatge a dalt de l’element,
center si la volem centrada verticalment o bottom si la volem a baix de
l’element. En lloc d’aquestes paraules clau es poden posar percentatges que
corresponguin al posicionament X-Y de la imatge dins de l’element.
Suposem que volem tenir una imatge a l’extrem superior dret com a fons d’un
document. Vegem com establiríem la propietat background-position usant
paraules clau o percentatges:
1 body {
3 background−repeat: no−repeat;
4 background−position: right top; /* usant paraules clau */
5 }
6
7 body {
10 background−position: 100% 0%; /* usant percentatges */
11 }
• background: aquesta propietat és un resum de les propietats anteriors. Si

establim aquesta propietat, podem posar els valors de les propietats anteriors
separats per un espai en blanc. Vegem-ne diversos exemples:
1 body {
2 background: red;
3 }
4
5 p {
6 background: gray url("fons.png") no−repeat fixed left top;
7 }
Aquest exemple ens diu el següent: el color de fons del document serà vermell.
A més, el color de fons dels paràgrafs serà gris amb una única imatge de fons de
nom fons.png que estarà situada a l’extrem superior esquerre del paràgraf i que
estarà fixada.
Vegem un altre exemple:
1 p {
2 background: #AFABFF url(imatges/firefox.png) no−repeat center 5%;
3 }
La figura 2.19 ens mostra el resultat visual d’aquest últim exemple.

Fig ur a 2 . 19 . Propietats de background
CSS3 ens permet jugar a posar múltiples imatges de fons. Imagineu que voleu
posar una imatge de tipus patró (pattern) a un document, de forma que es repeteixi
com a fons, i alhora voleu posar una altra imatge única de fons a la part superior
dreta amb un logotip, com si fons una marca d’aigua. El codi podria ser aquest:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #fons {
6 background−image: url(’imgs/logocss3p.png’), url(’imgs/honeycomb.png’);
7 background−position: right top, left top;
8 background−repeat: no−repeat, repeat;
9 padding: 15px;
10 }
11 </style>
12 </head>
13 <body>
14
15 <div id="fons">
16 <h1>Lorem Ipsum</h1>
17 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor.Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor.Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
21 </div>
22
23 </body>
24 </html>
El resultat és:
F igu r a 2. 2 0 . Múltiples imatges de fons
Amb CSS3 també podem tenir més control respecte la imatge de fons a partir de
les següents propietats:
• background-size: permet establir la mida de la imatge de fons. Com

a valor podem posar la mida de la imatge en unitats o en percentatges.
També podem posar el valor cover que escala la imatge per tal que ocupi
tot l’element o el valor contain, que escala la imatge a la màxima mida
visible.
Vegem-ne uns exemples:
CSS
1 p {
2 border: 2px #8246D2 solid;
3 padding: 25px;
4 width: 25%;
5 margin−right: 50px;
6 float: left;
7 background−image: url(imatges/linux.png);
9 }
10
11 p.fons1 {
12 background−size: 25px 50px;
13 }
14
15 p.fons2 {
17 }
18
19 p.fons3 {
20 background−size: cover;
21 }
22
23 p.fons4 {
24 background−size: contain;
25 }
HTML
1 <p class="fons1">Imatge de fons de 25px d’amplada i 50px d’alçada</p>

2 <p class="fons2">Imatge de fons de 50px d’amplada i alçada</p>
3 <p class="fons3">Imatge de fons que cobreix tot l’element.</p>
4 <p class="fons4">Imatge de fons el màxim de gran per tal de poder−la veure
sencera.</p>
En la figura 2.21 veiem el resultat d’aquests exemples.
Figur a 2. 21. Exemple de diferents mides de la imatge de fons
• background-origin: propietat que permet especificar on es posarà la

imatge. Els valors poden ser border-box per col·locar la imatge a la
vora; padding-box per col·locar la imatge al farciment de l’element, o
content-box per col·locar la imatge com a fons del contingut de l’element.
Vegem-ne uns exemples:
CSS
1 p.orig{
2 background−image: url(imatges/firefox.png);
3 border−width: 10px;
5 }
6
7 p.orig1 {
8 background−origin: border−box;
9 }
10
11 p.orig2 {
12 background−origin: padding−box;
13 }
14
15 p.orig3 {
16 background−origin: content−box;
17 }
HTML
1 <p class="orig orig1">Paràgraf amb imatge a la vora.</p>

2 <p class="orig orig2">Paràgraf amb imatge al farciment.</p>
3 <p class="orig orig3">Paràgraf amb imatge en el contingut de l’element.</p>
En la figura 2.22 podem veure el resultat d’aquests exemples.
F igu r a 2. 2 2 . Exemples de posicionament de la imatge de fons
2.4 El model de caixa
Hi ha diverses propietats, com els marges o les vores de cada element, que hem
d’establir a partir de l’anomenat model de caixa. Per entendre aquest model
hem de pensar cada element del document (X)HTML com si fos una caixa. De
cadascuna d’aquestes caixes podem distingir els components següents:
• El contingut (en anglès, content) de l’element: text o altres elements.
• El farciment (en anglès, padding): espai entre el contingut i la vora de la

caixa.
• La vora (en anglès, border): vora que delimita la caixa.
• El marge (en anglès, margin): espai entre la vora de la caixa i la resta

d’elements.
A més, cada caixa té quatre segments: el superior (top), l’inferior (bottom),

l’esquerre (left) i el dret (right). Podem observar tots aquests components en
la figura 2.23.
Figur a 2. 23. El model de caixa
Per tal d’establir i configurar cadascun dels components d’una caixa, el llenguatge
CSS ens ofereix les propietats pertinents.
A banda d’aquest model de caixa, que és l’estàndard que fan servir la majoria de
navegadors, Internet Explorer disposa del seu propi, en el qual l’amplada (width)
no coincideix amb el contingut (content), sinó que és la suma del contingut +
farciment + la vora.
Com a resum podríem establir que, per tal de saber l’amplada total d’una caixa,
tenim el model estàndard del W3C i el model de IE, i el càlcul queda de la següent
manera:
Model W3C
amplada total = margin-left + border-left + padding-left + width +

padding-right + border-right + margin-right
Model Internet Explorer en versions anteriors a IE6
amplada total = margin-left + width + margin-right
És per aquest motiu que hem d’anar amb compte amb quin navegador visualitzem
les pàgines que desenvolupem.
Per altra banda, CSS3 ens permet modificar el model de caixa respecte al seu
comportament per defecte. Això ho podem fer amb la propietat box-sizing.
A aquesta propietat li podem assignar tres valors diferents: content-box,
padding-box i border-box, per tal que la propietat width computi tenint
en compte únicament el contingut (context-box), el contingut + el farciment
(padding-box) o la totalitat dels tres (border-box). El valor més habitual és
aquest darrer, que per altra banda se sembla al de IE<6.
A l’exemple següent veiem el model de caixa clàssic (per defecte) i el que

modifiquem mitjançant la propietat box-sizing. aquesta propietat ens indica
que al primer paràgraf, hem de sumar tant el contingut (200px), com el farciment,
com les vores per obtenir l’amplada total.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 h3{
6 background−color: #00ffcc;
7
8 }
9 #clasica{
10 width: 200px;
11 padding: 15px;
13 }
14 #incloufinsvora{
15 width: 200px;
16 padding: 15px;
18 box−sizing: border−box;
19 }
20 </style>
21 </head>
22 <body>
23 <h3>200px de contingut + 30px de padding (15px per costat) + 10px de vora (5
px per costat) = 240px</h3>
24 <p id="clasica">
25 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
26 </p>
27 <h3>200px d’amplada que inclou 30px de padding (15px per costat) + 10px de
vora (5px per costat).</h3>
28 <p id="incloufinsvora">
29 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
30 </p>
31 </body>
32 </html>
El resultat vist al navegador és:
Figur a 2. 24. Model de caixa per defecte i modificat mitjançant ”box-sizing:border-box”
Les vores del model de caixa s’han ampliat amb les següents propietats en CSS3:
• border-top-left-radius, border-top-right-radius,
border-bottom-left-radius, border-bottom-right-radius:
aquestes propietats ens permeten fer vores arrodonides. Com a valor es
posa un nombre que correspon al radi de la vora corresponent.
• border-radius: la funcionalitat d’aquesta propietat és la mateixa que la de

les propietats anteriors, però la mida establerta afecta les quatre cantonades
de la caixa.
HTML
1 <h2>Vores arrodonides</h2>
2 <p class="arrodonit1">Paràgraf amb vora arrodonida de radi 25px.</p>
3 <p class="arrodonit2">Paràgraf amb les vores superior esquerra i inferior dreta
arrodonides amb un radi de 30px.</p>
CSS
1 p {
2 border: 2px #CD1C7E solid;
3 padding: 10px;
4 width: 25%;
6 float: left;
7 }
8
9 p.arrodonit1 {
10 border−radius: 30px;
11 }
12
13 p.arrodonit2 {
14 border−top−left−radius: 30px;
15 border−bottom−right−radius: 30px;
16 }
El resultat d’aquest exemple es pot observar en la figura 2.25.
F igu ra 2 .2 5 . Vores arrodonides amb CSS3
• box-shadow: permet posar una ombra a la caixa. Aquesta propietat pren 6

valors separats per espais, els dos primers obligatoris. Aquests valors són
els següents:
– ombra horitzontal: unitat de mesura que indica la posició de l’ombra

horitzontal.
– ombra vertical: unitat de mesura que indica la posició de l’ombra
vertical.
– borrositat: unitat de mesura que denota a partir d’on la vora es fa
borrosa.
– mida: la mida de l’ombra
– color: el color de l’ombra
– inset: si posem aquesta paraula clau, l’ombra de la caixa serà interna.
Vegem alguns exemples d’ombres:
HTML
1 <p class="ombres ombres1">Paràgraf amb ombra gris posicionada a 20px cap a baix
i cap a la dreta.</p>
i cap a la dreta i amb una borrositat de 5px a la vora.</p>
i cap a la dreta, amb una borrositat de 5px a la vora i una mida de 15px.
</p>
4 <p class="ombres ombres4">Paràgraf amb una vora <em>inset</em></p>
CSS
1 p {
2 border: 2px #CD1C7E solid;
3 padding: 10px;
4 width: 25%;
6 float: left;
7 }
8
9 p.ombres {
10 margin−bottom: 50px;
11 }
12
13 p.ombres1 {
14 box−shadow: 20px 20px gray;
15 }
16
17 p.ombres2 {
18 box−shadow: 20px 20px 5px gray;
19 }
20
21 p.ombres3 {
22 box−shadow: 20px 20px 5px 15px gray;
23 }
24
25 p.ombres4 {
26 box−shadow: 20px 20px 5px 5px gray inset;
27 }
En la figura 2.26 podem veure el resultat dels exemples anteriors.
Fi g ura 2 .26 . Ombres amb CSS3
Una altra propietat molt interessant ens serveix perquè l’usuari pugui redimensio-
nar una caixa:
• resize: Permet redimensionar la caixa. Té els següents valors:
– horizontal: la caixa es pot redimensionar horitzontalment.

– vertical: la caixa es pot redimensionar verticalment.
– both: la caixa es pot redimensionar tant horitzontalment com vertical-
ment.
– none: la caixa no es pot redimensionar.
Per exemple,
1 p {
2 resize: both;
3 }
2.4.1 Marges
Per establir els marges d’un element tenim les següents propietats:
• margin-top, margin-right, margin-bottom i margin-left: aquestes

propietats ens serviran per establir cadascun dels marges de la caixa (supe-
rior, dret, inferior i esquerre, respectivament). Vegem-ne un exemple:
1 p {
2 margin−top: 1em;
4 margin−bottom: 3em;
5 margin−left: 4em;
6 }
• margin: Aquesta propietat serveix per resumir totes les propietats

margin-*. Es poden introduir d’un a quatre valors separats per espai:
– 1 valor: la mesura introduïda afecta els quatre marges.

– 2 valors: el primer valor especifica els marges superior i inferior i el
segon valor especifica els marges esquerre i dret.
– 3 valors: el primer valor especifica el marge superior, el segon valor
especifica els marges esquerre i dret i el tercer valor especifica el marge
inferior.
– 4 valors: el primer valor especifica el marge superior, el segon valor
especifica els marge dret, el tercer valor especifica el marge inferior i
el quart valor especifica el marge esquerre.
Vegem-ne alguns exemples:
1 body {
2 margin: 1em 2em 3em 4em;
3 }
4
5 p.tipus1 {
6 margin:2em;
7 }
8
9 p.tipus2 {
10 margin:5em 2em;
11 }
En la figura 2.27 podem veure quin aspecte tindrien els paràgrafs de tipus 1 i de
tipus 2. S’hi han afegit vores per tal que les distàncies dels marges es visualitzin
millor.
F ig ur a 2. 27 . Propietats de margin
Hem de tenir en compte que l’àrea que ocupa el margin no se li pot associar cap
color de fons amb cap propietat de la mateixa caixa. Per tal de crear l’efecte que el
fons és d’un color, o fins i tot una imatge, hem de posar aquesta caixa dins d’una
altra, i posar-li a aquesta última color.
2.4.2 Farciment
Per establir els marges d’un element tenim les següents propietats:
• padding-top, padding-right, padding-bottom i padding-left:

aquestes propietats ens serviran per establir cadascun dels farciments de
la caixa (superior, dret, inferior i esquerre, respectivament). Vegem-ne un
exemple:
1 body {
2 padding−top: 1em;
3 padding−right: 2em;
4 padding−bottom: 1em;
5 padding−left: 2em;
6 }
• padding: aquesta propietat serveix per resumir totes les propietats

padding-*. Podem posar 1, 2, 3 o 4 valors, tal com es fa a la propietat
margin. Vegem-ne alguns exemples:
1 p#par1 {
2 padding:2em;
3 }
4
5 p#par2 {
6 padding:5em 2em;
7 }
En aquest cas, el paràgraf amb identificador par1 tindrà un farciment de 2em pels
quatre costats. El paràgraf amb identificador par2 tindrà un farciment superior i
inferior de 5em i un farciment tant a la dreta com a l’esquerra de 2em.
En la figura 2.28 podem veure quin aspecte tindrien aquests paràgrafs. S’hi han
afegit vores per tal que les distàncies dels marges es visualitzin millor.
F igu ra 2 .2 8 . Exemple de la propietat padding
2.4.3 Vores
Per establir les vores d’un element tenim les següents propietats:
• border-top-width, border-right-width, border-bottom-width i

border-left-width: aquestes propietats especifiquen el gruix de cadas-
cuna de les vores superior, dreta, inferior i esquerra, respectivament. Com
a valors podem posar thin per a una vora prima, medium per a una vora
mitjana o thick si volem una vora gruixuda. Si volem tenir un major control
del gruix de les vores, podem usar també una unitat de mesura com a valor
de la propietat. Vegem-ne un exemple:
1 h1 {
2 border−top−width: thin;
3 border−right−width: thick;
4 border−bottom−width: medium;
5 border−left−width: thick;
6 }
• border-width: aquesta propietat ens serveix per resumir les propietats

border-*- width. Podem posar 1, 2, 3 o 4 valors, tal com es fa a la
propietat margin. Vegem l’exemple anterior resumit en una sola propietat:
1 h1 {
2 border−width: thin thick medium;
3 }
• border-top-color, border-right-color, border-bottom-color i

border-left-color: amb aquestes propietats podem especificar el color
de cadascuna de les vores superior, dreta, inferior i esquerra, respectivament.
1 p {
2 border−top−color: black;
3 border−right−color: red;
4 border−bottom−color: green;
5 border−left−color: blue;
6 }
• border-color: aquesta propietat resumeix totes les propietats

border-*-color. Podem posar 1, 2, 3 o 4 valors, tal com es fa a la
propietat margin. Vegem, per exemple, com podríem establir que totes les
vores siguin del mateix color:
1 p {
2 border−color: gray;
3 }
En aquest cas estem fent que tots els paràgrafs tinguin una vora de color gris.
• border-top-style, border-right-style, border-bottom-style i

border-left-style: aquestes propietats defineixen els estils de cadascu-
na de les vores superior, dreta, inferior i esquerra, respectivament. Tenim
diversos estils disponibles, enumerem-los:
– none o hidden: no té vora.

– dotted: la vora és puntejada.
– dashed: la vora són petits guionets.
– solid: la vora és una línia contínua.

– double: la vora són dues línies contínues.
– groove: la vora es mostra enfonsada, com si estigués per sota del
nivell de la superfície de la pantalla.
– ridge: la vora es mostra sortida, com si estigués per sobre del nivell
de la superfície de la pantalla.
– inset: la vora està enfonsada i fa que l’element que té la vora sembli
que estigui per sota del nivell de la superfície de la pantalla.
– outset: la vora està enfonsada i fa que l’element que té la vora sembli
que estigui per sobre del nivell de la superfície de la pantalla.
Vegem un exemple:
1 #caixa {
2 border−top−style: solid;
3 border−right−style: dotted;
4 border−bottom−style: solid;
5 border−left−style: dotted;
6 }
• border-style: Aquesta propietat resumeix totes les propietats

border-*-style. Podem posar 1, 2, 3 o 4 valors, tal com es fa a la
propietat margin. Vegem-ne un exemple:
1 #caixa {
2 border−style: solid dotted
3 }
4
5 span.boto{
6 border−style: outset;
7 background−color: gray;
8 }
9
10 span.boto:hover {
11 border−style: inset;
12 }
En aquest exemple veiem que l’element amb identificador caixa tindrà una vora
superior i inferior amb una línia contínua. A dreta i esquerra de l’element tindrà
una línia puntejada. Les dues regles següents volen simular que els elements
<span> de classe boto semblin botons: en el seu estat normal semblaran un botó
sense prémer, però quan hi passem per sobre semblaran un botó premut.
• border-top, border-right, border-bottom i border-left: aquestes

propietats ens serveixen per posar el gruix, l’estil i el color de la vora,
però de manera que només afecti la vora superior, de la dreta, inferior i
de l’esquerra, respectivament. Els tres valor aniran separats per un espai en
blanc. Vegem-ne un exemple:
1 h1 {
2 border−top: thick solid red;
3 border−right: thick dotted green;
4 border−bottom: thick solid yellow;

5 border−left: thick dotted blue;
6 }
• border: aquesta propietat és un resum de totes les propietats anteriors. Allò

que es posi en aquesta propietat afectarà les quatre vores de la caixa. Vegem-
ne un exemple:
1 p.tipus1{
2 border: black medium solid;
3 }
4
5 p.tipus2{
6 border: red 10px dashed;
7 }
8
9 p.tipus3{
10 border: gray 1px dotted;
11 }
Podem veure els resultats d’aquestes regles en la figura 2.29.
F ig ur a 2. 29 . Propietats de border
2.5 El format visual dels elements d’un document
El format visual dels elements d’un document ens defineix com són les caixes
(és a dir, els elements (X)HTML vistos com a caixes) en el document i el
comportament d’aquestes caixes envers la resta de caixes de la pàgina.
Veurem a continuació quines propietats ens ajuden a definir aquest format:
• display: aquesta propietat ens ajuda a establir el tipus de caixa que defineix
l’element. Pot tenir els següents valors:
– block: l’element serà un element de bloc. És a dir, generarà un salt

de línia en finalitzar el text de l’element, i tendeix a ocupar l’amplada
màxima possible dins del seu contenidor, sempre que no es modifiqui
la propietat width per escurçar-ho.
– inline: l’element serà un element de línia. És a dir, no generarà un

salt de línia en finalitzar el text de l’element, i ocuparà exclusivament
l’espai del que conté, si aquest no és alterat amb una altra propietat.
– inline-block: és una mescla dels dos elements anteriors. Situa els
elements en línia però aquests es comporten com si fossin de block.
Per tant, permetrà definir les propietats width, height, margin-top
i margin-bottom que no són accessibles en els elements de línia.
Un dels seus usos principals és mostrar els elements de les llistes de
manera horitzontal.
– list-item: l’element es comportarà com un element d’una llista. Per
tant, per defecte, tindrà un petit símbol davant del text de l’element.
– none: l’element amb aquesta propietat no genera cap caixa, no és
visible ni ocupa espai en el document. És el cas d’elements com
<script>, <input type=“hidden”>, etc.
– run-in: fa que la caixa sigui de bloc o de línia segons el context.
– table, inline-table, table-row-group, table-column,
table-column-group, table-header-group,
table-footer-group, table-row, table-cell i table-caption:
l’element es comporta com els corresponents elements d’una taula.
Tenint presents aquests valors podem deduir que en els navegadors, els paràgrafs,
és a dir els elements <p>, tenen per defecte el valor block; el text emfatitzat, és a
dir els elements <em>, tenen per defecte el valor inline, i els ítems d’una llista,
és a dir els elements <li>, tenen per defecte el valor list-item.
Vegem com podem invisibilitzar les imatges:
1 img {
2 display: none;
3 }
Vegem un altre exemple: imaginem que volem mostrar un text amb 3 columnes.
Podríem fer-ho de la següent manera:
(X)HTML
1 <div id="contingut">
2 <div id="principal">
3 <div id="esquerra">
4 Lorem ipsum dolor sit amet...
5 </div>
6 <div id="centre">
7 Vivamus fermentum semper porta...
8 </div>
9 <div id="dreta">
10 Suspendisse lectus leo...
11 </div>
12 </div>
13 </div>
CSS
1 #contingut {
2 display: table;
3 border−spacing: 5px;
4 }
5
6 #principal {
7 display: table−row;
8 }
9
10 #esquerra, #centre, #dreta {
11 display: table−cell;
12 }
La visualització d’aquest codi es pot veure en la figura 2.30.
Figur a 2. 30. Exemple de text en 3 columnes amb display: table*
• position: amb aquesta propietat podem definir la posició de la caixa

envers la resta de caixes del document, o respecte al mateix document o
finestra. Es poden posar els següents valors:
– static: l’element es posiciona en l’ordre que toca, tal com apareix al

document. Aquest és el valor per defecte.
– relative: l’element es posiciona relativament a la posició que li
pertocaria. A més, l’espai que hauria d’ocupar no es col·lapsa.
– absolute: l’element es posiciona relativament a la caixa contenidora.
L’espai que hauria d’ocupar es col·lapsa.
– fixed: l’element es posiciona relativament a la caixa contenidora,
però es queda fixat en desplaçar-nos pel document.
Aquesta propietat no té sentit si no la combinem amb les propietats següents:
• top, right, bottom i left: amb aquestes propietats podem posicionar

la caixa amb un desplaçament superior, cap a la dreta, inferior i cap a
l’esquerra, respectivament.
• width i height: amb aquestes propietats podrem indicar les mides de la

caixa, amplada i alçada, respectivament.
Vegem un exemple que combina les propietats de posicionament anteriors:
HTML
1 <div class="bloc">
2 <h2>position, top, left, right, bottom</h2>
3 <p>1er paràgraf normal</p>
4 <p id="elem2">2n paràgraf amb posicionament relatiu. L’espai que ocuparia
aquest paràgraf es manté.</p>
5 <p id="elem3">3r paràgraf amb posicionament absolut. No es manté cap espai
en el seu lloc original.</p>
6 <p>4t paràgraf normal</p>
7 </div>
8 <div class="bloc" id="elem4">
9 Aquest text té posició fixa.
10 </div>
12 <h2>height, width</h2>
13 <p id="elem5">Paràgraf amb amplada 15em i alçada 3em. Si el text és llarg,
surt de la seva caixa...</p>
14 </div>
CSS
1 div.bloc {
2 border−color: #DAA520;
3 }
4
5 #elem2 {
6 position:relative;
7 top: 4em;
8 left: 15em;
9 }
10
11 #elem3 {
12 position:absolute;
13 top: 20em;
14 left: 25em;
15 }
16
17 #elem4 {
18 position:fixed;
19 top:90%;
20 left:88%;
21 width:8em;
22 height:3em;
23 font−size:xx−small;
24 padding:0.5em;
25 }
26
27 #elem5 {
28 width:15em;
29 height:3em;
30 background−color:#DAA520;
31 }
Podem observar els resultats d’aquestes regles en la figura 2.31:

Figu ra 2. 31 . Exemple de les propietats de posicionament
• min-width, min-height, max-width i max-height: serveixen per deter-

minar les dimensions mínimes i màximes que poden prendre les caixes,
sigui quina sigui la mida de la finestra del navegador.
• float: aquesta propietat fa que la caixa quedi flotant a l’esquerra (si

establim el valor left) o a la dreta (si establim el valor right). Per exemple,
si volem que les imatges ens quedin com un objecte flotant, escriuríem la
següent regla:
1 img {
2 float: right;
3 }
Vegem un exemple més complet:
HTML
1 <h2>float</h2>
2 <p><img src="imatges/firefox.png" alt="logo firefox" class="esq" />La imatge
que hi ha al principi del paràgraf està flotant a l’esquerra del parà
graf.</p>
3 <p><img src="imatges/firefox.png" alt="logo firefox" class="dre" />La imatge
que hi ha al principi del paràgraf està flotant a la dreta del paràgraf.
</p>
4 <p>Diversos elements <div> flotants a l’esquerra, l’un al costat de l’
altre:</p>
5 <div>
6 <div class="quadradet"></div>
9 ...
10 </div>
CSS
1 .esq {
2 float:left;
3 }
4
5 .dre {
6 float:right;
7 }
8
9 div.quadradet {
10 background−color:#4682B4;
11 float:left;
12 width:2em;
13 height:2em;
14 margin:0.5em;
15 }
En la figura 2.32 podem veure el resultat d’aquest exemple.
F i g ura 2 . 3 2. Exemple de la propietat float
• clear: aquesta propietat serveix per desactivar els elements flotants al

voltant de l’element que tingui aquesta propietat. Segons el valor que posem,
eliminarem els elements flotants a la part esquerra amb el valor left, els
de la part dreta amb el valor right o a ambdós costats amb el valor both.
Per anul·lar aquesta propietat usarem el valor none.
Vegem un exemple: imagineu que en un document volem que les imatges quedin
flotant a l’esquerra. Ara bé imaginem que en un paràgraf concret no volem que la
imatge quedi flotant. Ho podríem codificar de la següent manera:
HTML
1 <h2>clear</h2>
2 <p><img src="imatges/linux.png" alt="tux" />La imatge que està al principi del
paràgraf està flotant a l’esquerra.</p>
3 <p class="noflotis">A aquest paràgraf li hem eliminat els objectes flotants.</p
>
CSS
1 img {
2 float: left;
3 }
4
5 .noflotis {
6 clear:both;
7 }
El resultat d’aquest codi el podem veure en la figura 2.33.
F ig ur a 2. 33 . Exemple de la propietat clear
• z-index: estableix la profunditat d’una caixa en l’eix de les Z. El valor és

un nombre que defineix aquesta profunditat. Com més petit sigui el valor
més al fons se situarà la caixa.
Vegem un exemple:
HTML
1 <h2>z−index</h2>
2 <p id="par1">El paràgraf groc queda per sota.</p>
3 <p id="par2">El paràgraf de fons vermell queda per sobre.</p>
4 <p id="par3">El paràgraf groc queda per sobre. Hem posat un z−index amb valor
superior.</p>
5 <p id="par4">El paràgraf de fons vermell queda per sobre.</p>
CSS
1 #par1, #par2, #par3, #par4 {

2 height: 8em;
3 width: 10em;
4 position:relative;
5 }
6
7 #par1, #par3 {
8 background−color: #DAA520; /* groc */
9 }
10
11 #par2, #par4 {
12 background−color: #DA4B17; /* vermell */
13 }
14
15 #par2 {
16 top:−6em;
17 left:4em;
18 }
19
20 #par3 {
21 top:−5em;
22 left:0em;
23 z−index:2;
24 }
25
26 #par4 {
27 top:−11em;
28 left:4em;
29 z−index:1;
30 }
En la figura 2.34 podem veure el resultat d’aquest exemple:
F ig ura 2. 3 4 . Exemple de la propietat z-index
• overflow: indica què fer quan el contingut mesura més que la caixa. Els
possibles valors són:
– visible: el contingut es veu sobrepassant la taula.

– hidden: el contingut sobrant no es veu.
– scroll: apareix una barra de desplaçament.
– auto: apareix una barra de desplaçament només si és necessària.
Vegem un exemple on es mostren els diferents comportaments d’aquesta propietat

segons el valor que especifiquem:
HTML
1 <h2>overflow</h2>
2 <p id="par1">Paràgraf on és visible (visible) el text que no cap en la caixa
corresponent, establerta amb width i height. </p>
3 <p id="par2">Paràgraf on queda ocult (hidden) el text que no cap en la caixa
corresponent, establerta amb width i height. </p>
4 <p id="par3">Paràgraf amb barres de desplaçament (scroll).</p>
5 <p id="par4">Paràgraf amb barres de desplaçament (auto) només si el text és
massa llarg per a la caixa corresponent.</p>
CSS
1 #par1, #par2, #par3, #par4 {

2 width:20em;
3 height:3em;
4 background−color:#DAA520;
5 margin−bottom:1em;
6 }
7
8 #par1 {
9 overflow:visible;
10 }
11
12 #par2 {
13 overflow:hidden;
14 }
15
16 #par3 {
17 overflow: scroll;
18 }
19
20 #par4 {
21 overflow: auto;
22 }
El resultat d’aquest codi el podem veure en la figura 2.35.
F ig ur a 2. 35 . Exemple de la propietat overflow

2.6 Més efectes amb CSS3
Molts navegadors encara no

han adoptat algunes de les
propietats especificades a
L’actual versió de CSS, el CSS3, incorpora efectes que ajuden a fer més atractius
CSS3. En aquests materials
s’especifiquen aquelles que
els llocs web. Gràcies a aquests efectes podem prescindir encara més de l’ús de
es consideren més l’HTML o de JavaScript.
rellevants i/o que estan ja
suportades per la majoria
de navegadors més
importants.
2.6.1 Transformacions
Les transformacions ens permeten canviar la posició i la mida d’un element. Tot
i que la majoria dels navegadors tenen implementades les transformacions 2D,
encara hem de posar un prefix a la propietat tal com veureu als exemples (consulteu
l’apartat “Regles CSS” per tenir més detalls dels prefixos).
Transformacions 3D
La propietat transform() també
Les transformacions 2D es fan a partir de la propietat transform. Els diferents
ens permet fer transformacions valors d’aquesta propietat permeten que s’apliquin diversos efectes sobre els
3D a partir dels valors
rotateX(graus) i elements afectats:
rotateY(graus).
Per saber com funciona la

transformació matrix(), • translate(x,y): traslladem l’element x unitats a la dreta i y unitats cap
aneu a les `“Adreces
d’interès” del material web avall. Si x és negatiu es traslladarà cap a l’esquerra i si y és negatiu es
d’aquesta unitat.
traslladarà cap a dalt.
• rotate(angle): rotem l’element segons l‘angle especificat.
• scale(x,y): modifiquem la mida de l’element, l’amplada es multiplica pel

factor x i l’alçada pel factor y.
• skew(angleX, angleY): gira l’element en angleX respecte l’eix de les X

i en angleY respecte l’eix de les Y.
• matrix(val1, val2, val3, val4, val5, val6): s’aplica una trans-

formació matemàtica a partir de sis valors.
Vegem un exemple per a cada transformació possible:
CSS
1 p {
3 padding: 10px;
4 width: 25%;
6 float: left;
7 }
8
9 p.translate{
10 −moz−transform: translate(30px,10px);
11 −ms−transform: translate(30px,10px);
12 −webkit−transform: translate(30px,10px);
13 −o−transform: translate(30px,10px);
14 transform: translate(30px,10px);
15 }
16
17 p.rotate{
18 −moz−transform: rotate(20deg);
19 −ms−transform: rotate(20deg);
20 −webkit−transform: rotate(20deg);
21 −o−transform: rotate(20deg);
22 transform: rotate(20deg);
23 }
24
25 p.scale{
26 −moz−transform: scale(0.75,1.25);
27 −ms−transform: scale(0.75,1.25);
28 −webkit−transform: scale(0.75,1.25);
29 −o−transform: scale(0.75,1.25);
30 transform: scale(0.75,1.25);
31 }
32
33 p.skew{
34 −moz−transform: skew(10deg, 30deg);
35 −ms−transform: skew(10deg, 30deg);
36 −webkit−transform: skew(10deg, 30deg);
37 −o−transform: skew(10deg, 30deg);
38 transform: skew(10deg, 30deg);
39 }
40
41 p.matrix{
42 −moz−transform: matrix(0.9, −0.05, −0.375, 1.375, 0, 0);
43 −ms−transform: matrix(0.9, −0.05, −0.375, 1.375, 0, 0);
44 −webkit−transform: matrix(0.9, −0.05, −0.375, 1.375, 0, 0);
45 −o−transform: matrix(0.9, −0.05, −0.375, 1.375, 0, 0);
46 transform: matrix(0.9, −0.05, −0.375, 1.375, 0, 0);
47 }
HTML
2 <p>Paràgraf sense transformació</p>
3 <p class="translate">Paràgraf traslladat 30px a la dreta i 10px cap avall.</p
>
4 </div>
6 <p class="rotate">Paràgraf amb 20 graus de rotació.</p>
7 <p class="scale">Paràgraf escalat en un factor 0.75x1.25</p>
8 </div>
10 <p class="skew">Paràgraf girat amb angles de 10 graus i 30 graus.</p>
11 <p class="matrix">Paràgraf amb una transformació matrix.</p>
12 </div>
En la figura 2.36 podem veure els resultats obtinguts.

F igu r a 2. 3 6 . Exemples de transformacions 2D
2.6.2 Transicions
Les transicions són efectes que permeten que un element passi de tenir un estil a
tenir-ne un altre. Per aconseguir aquests efectes tenim les següents propietats:
• transition-property: especifica la propietat CSS respecte la qual s’apli-

ca la transició.
• transition-duration: el temps que dura la transició.
• transition-timing-function: especifica la corba de velocitat de la

transició. Pot tenir els següents valors:
– linear: tota la transició es dóna a la mateixa velocitat.

– ease: l’inici de la transició serà lent, després serà ràpid i acabarà
lentament.
– ease-in: l’inici de la transició serà lent.
– ease-out: el final de la transició serà lent.
– ease-in-out: l’inici i el final de la transició seran lents.
Per saber com funciona el
valor cubic-bezier de la
propietat
transition-timing-function, • cubic-bezier(p1x,p1y,p2x,p2y): ens permet definir les velocitats de
aneu a les “Adreces
d’interès” del material web la transició a partir de les coordenades de dos punts que configuren una
d’aquesta unitat.
corba de Bézier.
• transition-delay: especifica després de quant temps començarà la

transició.
• transition: és una propietat resum de les anteriors. El seu valor

són els valors separats per espais de transistion-property,
transition-duration, transition-timing-function i
transition-delay.
Una transició s’executa quan una propietat canvia. Una manera de provocar aquest
canvi es pot fer usant la pseudoclasse :hover. Vegem-ne alguns exemples:
Aquests exemples tenen
Imaginem que volem emular unes pestanyes a partir de les quals es va desplegant animació. A l’Annex “Codi
font dels exemples” del
una caixa amb text. Podríem tenir el següent codi CSS: material web d’aquesta
unitat podeu trobar el codi
font i provar-lo amb el
1 .canvimida{ navegador.
3 width: 25%; Els navegadors encara
necessiten que posem el
4 float: left; seu prefix a la propietat
5 overflow: hidden; transition.
6 /* L’element tindrà inicialment 1em d’alçada */
7 height: 1em;
8 /* Transició de l’element a una altra alçada */
9 −moz−transition: height linear 2s;
10 −webkit−transition: height linear 2s;
11 −o−transition: height linear 2s;
12 transition: height linear 2s;
13 }
14
15 .canvimida:hover {
16 /* Quan passem pel damunt l’element tindrà 10em */
17 height: 10em;
18 }
19
20 .canvimida p, .canvimida h2{
21 margin: 0;
22 padding: 0;
23 }
24
25 .canvimida h2{
26 font−size: 1em;
27 background−color: #44D084;
28 color: black;
31 }
que s’aplicaria al següent codi HTML:
2 <div class="canvimida">
3 <h2>Ítem 1</h2>
4 <p>Explicació de l’ítem 1 amb text i tot allò que vulguem</p>
5 </div>
7 <h2>Ítem 2</h2>
9 </div>
11 <h2>Ítem 3</h2>
13 </div>
14 </div>
Cada cop que passem per cadascun dels ítems, el paràgraf inferior es desplegarà
lentament (durant 2 segons).
Posem un altre exemple: com que podem aplicar tantes transicions com vulguem,
imaginem que volem que quan passem per damunt d’un títol canviïn els colors de
fons i de lletra gradualment. Ho podríem fer de la següent manera:
1 .canvicolor {
3 width: 25%;
4 height: 3em;
6 margin−bottom: 2em;
7 /* Inicialment els colors són blanc pel color */
8 /* de lletra i verd pel color de fons */
9 color: white;
10 background−color: #44D084;
11 /* Definició de la transició del color de lletra */
12 −moz−transition: color ease−out 1s;
13 −webkit−transition: color ease−out 1s;
14 −o−transition: height ease−out 1s;
15 transition: height ease−out 1s;
16 /* Definició de la transició del color de fons */
17 −moz−transition: background−color ease−out 1s;
18 −webkit−transition: color ease−out 1s;
19 −o−transition: height ease−out 1s;
20 transition: height ease−out 1s;
21 }
22
23 .canvicolor:hover{
24 /* Quan passem per sobre els colors de lletra */
25 /* i de fons s’intercanviaran */
26 color: #44D084;
27 background−color: white;
28 }
Aquestes regles es podrien aplicar a :
1 <div class="canvicolor">
2 <h3>Títol</h3>
3 </div>
2.6.3 Animacions
Un keyframe és un punt
clau, al que li podem afegir CSS3 incorpora animacions amb les quals podrem fer que els nostres elements
una acció concreta, per
aquest motiu la regla canviïn les seves propietats en un espai de temps. Vegem com fer-ho.
@keyframes, marca
diferents punts claus, dins
dels que podem associar El primer que hem de fer es declarar una regla @ anomenada @keyframes.Amb
diferents accions o canvis
de propietats CSS. aquesta regla direm des de quina propietat partim i fins a quina propietat volem
Fixem-nos que hem anar. Vegem alguns exemples:
d’establir la regla CSS
genèrica que en algun
moment adoptaran tots els Volem que el fons d’un element vagi canviant de color. Podríem establir la següent
navegadors i una regla per
a cada navegador que ja la regla:
suporta, però amb el seu
prefix. 1 @keyframes canvicolorfons{
2 0% {background−color: red;}
Aquests exemples tenen 3 25% {background−color: yellow;}
animació. A l’Annex “Codi
4 50% {background−color: blue;}
font dels exemples” del
material web d’aquesta 5 100% {background−color: green;}
unitat podeu trobar el codi 6 }
font i provar-lo amb el 7 @−moz−keyframes canvicolorfons{
navegador.
9 25% {background−color: yellow;}

11 100% {background−color: green;}
12 }
13 @−webkit−keyframes canvicolorfons{
15 25% {background−color: yellow;}
17 100% {background−color: green;}
18 }
Amb aquesta regla aconseguim que inicialment el color de fons estigui en vermell,
després del 25% del temps que dura un cicle de l’animació, el fons haurà
transicionat fins al color groc, quan estiguem a la meitat del temps el fons serà
de color blau i finalment el color de fons transicionarà fins al color verd.
Ara volem que un element es mogui d’esquerra a dreta de la pantalla i, a més, a

mida que es mou l’element, aquest roti. Establirem la següent regla:
1 @keyframes mou{
2 0% {margin−left: 0}
3 25% {margin−left: 25%}
6 }
7 @−moz−keyframes mou{
8 0% {margin−left: 0; }
9 25% {margin−left: 25%; −moz−transform: rotate(120deg);}
12 }
13 @−webkit−keyframes mou{
14 0% {margin−left: 0; }
15 25% {margin−left: 25%; −webkit−transform: rotate(120deg);}
18 }
Amb aquesta regla aconseguim que a mida que passa el temps l’element vagi
augmentant el seu marge esquerre i, per tant, es vagi movent cap a la dreta i que
vagi rotant fins tornar a la seva posició inicial ja que dóna una volta completa de
360 graus.
Un cop tenim l’animació definida l’hem d’aplicar. Per tal d’aplicar-la i especificar
alguna configuració de l’animació, podem usar les següents propietats:
Per veure el significat dels
valors de la propietat
• animation-name: el nom de l’aplicació que volem aplicar. Ha de coincidir animation-timing-function
vés a l’apartat
amb el nom d’alguna regla @keyframes definida. “Transicions” d’aquesta
unitat.
• animation-duration: especifica el temps que triga una animació en

completar un cicle.
• animation-timing-function: especifica la corba de velocitat de la

transició. Pot tenir els següents valors: linear, ease, ease-in, ease-out,
ease-in-out i cubic-bezier(p1x,p1y,p2x,p2y).
• animation-delay: especifica quant temps ha de passar abans que l’anima-

ció comenci.
• animation-iteration-count: especifica quants cops es produirà l’a-

nimació. Si volem que es repeteixi infinitament, podem posar el valor
infinite.
• animation-direction: amb aquesta propietat podem fer que quan es

repeteixi un cicle l’animació es faci en sentit contrari. Pot tenir dos valors:
– normal: l’animació sempre es repeteix en l’ordre establert.

– alternate: l’animació es produeix en ordre invers en els cicles
parells.
• animation-play-state: especifica en quin estat està l’animació. Pot tenir

dos valors:
– running: l’animació està funcionant.

– paused: l’animació està pausada.
• animation: és la propietat resum de totes les anteriors. La sintaxi és la

següent:
1 animation: name duration timing−function delay iteration−count direction;
A partir de les animacions que s’han definit en els exemples anteriors, vegem com
aplicar-les. Farem ús de la propietat resum animation:
HTML
2 <div class="canvicolor">
3 <h3>Títol</h3>
4 </div>
5 </div>
6
8 <div class="canviposicio">
9 <h3>Títol</h3>
10 </div>
11 </div>
CSS
1 .canvicolor {
Els navegadors encara 2 −moz−animation: canvicolorfons 5s linear 0s infinite alternate;
necessiten que posem el 3 −webkit−animation: canvicolorfons 5s linear 0s infinite alternate;
seu prefix a la propietat 4 animation: canvicolorfons 5s linear 0s infinite alternate;
animation.
5 }
6
7 .canviposicio {
8 width: 25px;
9 −moz−animation: mou 5s linear 0s infinite alternate;
10 −webkit−animation: mou 5s linear 0s infinite alternate;
11 animation: mou 5s linear 0s infinite alternate;
12 }
En cadascuna de les regles anteriors hem establert quina animació hem d’usar,
canvicolorfons i mou, respectivament. En tots dos casos fem que un cicle
d’animació duri 5 segons, que la velocitat de l’animació sigui constant durant tot
el cicle, que es facin infinits cicles i que l’animació vagi anant cap endavant i cap
endarrere alternativament.
2.6.4 Gradients
En moltes ocasions volem afegir transicions entre 2 o més colors, per posar un
estil concret a diferents àrees de les pàgines web. Antigament això es resolia amb
imatges, però aquesta és una tècnica poc eficient; bé perquè en canviar l’amplada
o alçada de la finestra del navegador, les imatges no s’ajustaven bé, o simplement
per l’augment de temps de descàrrega que suposen aquestes imatges afegides.
CSS3 ens permet mitjançant codificació fer transicions entre diferents colors,
siguin lineals o radials.
Gradient Lineal
En aquest cas hem d’indicar en quina direcció volem que es faci la transició
de colors, i igualment indicar-li un origen i un final, mitjançant l’elecció de les
paraules top/right/bottom/left o bé un angle.
Sintaxi: linear-gradient(sentit, color1, color2, ..., colorN);
Si volem fer un gradient aplicat a un fons, i que aquest passi per tres colors diferents
(#FF0000, #00FF00, #0000FF), distribuïts d’esquerra a dreta, haurem de fer servir
el següent codi:
1 #gradient {
2 background: −webkit−linear−gradient(left, #FF0000 , #00FF00, #0000FF);
3 background: −o−linear−gradient(right, #FF0000 , #00FF00, #0000FF);
4 background: −moz−linear−gradient(right, #FF0000 , #00FF00, #0000FF);
5 background: linear−gradient(to right, #FF0000 , #00FF00, #0000FF);
6 }
Les possibilitats de treballar

amb gradients són moltes,
Podem veure que el primer paràmetre varia segons el navegador on volem ja que podem variar
visualitzar la web, així ens trobem que amb left, right o to right. Per altra banda aspectes com l’opacitat del
colors, l’angle d’aplicació
reparteix els colors de forma equitativa, és a dir, a l’esquerra tenim el color vermell dels gradients (amb graus),
o en quin percentatge
(#FF0000), al 50% passem pel color verd (#00FF00) i al 100% hem d’estar al color s’aplica un color
determinat.Si voleu ampliar
blau (#0000FF). El resultat d’aquesta codificació el veiem a la figura 2.37: la informació, podeu visitar
mzl.la/3cwqUJJ
F igur a 2. 37
Gradient Radial
L’ús d’aquest gradient parteix del centre de l’àrea afectada, per iniciar els canvis
de colors marcats. El seu funcionament és molt similar al del gradient lineal,
on també l’indiquem els colors per on ha de passar mitjançant paràmetres que
segueixen la següent sintaxi:
Sintaxi: radial-gradient(shape size at position, color1, color2,...., colorN);
Un exemple de codificació similar a l’anterior, però havent substituït una gradació

lineal per una circular és la següent:
1 #gradient {
2 background: −webkit−radial−gradient(#FF0000 , #00FF00, #0000FF);
3 background: −o−radial−gradient(#FF0000 , #00FF00, #0000FF);
4 background: −moz−radial−gradient(#FF0000 , #00FF00, #0000FF);
5 background: radial−gradient(#FF0000 , #00FF00, #0000FF);
6 }
El resultat, com veiem a la figura 2.38 és:
Fig u ra 2 . 3 8
2.6.5 Columnes
El text d’un element es distribueix en una única columna. CSS3 incorpora una
propietat per fer que el text d’un element es pugui distribuir en més d’una columna.
Aquesta característica es pot aconseguir a partir de les següents propietats:
• column-count: nombre màxim de columnes de l’element.
• column-width: suggereix l’amplada de les columnes. El navegador s’en-

carrega de calcular quantes columnes amb aquesta amplada poden entrar.
• columns: propietat resum per a les dues propietats anteriors. L’ordre dels
valors és el següent: column-width column-count.
• column-gap: determina l’espai entre columnes.
Entre les columnes hi ha una línia de la qual podem establir els atributs:
• column-rule-color: color de la línia.
• column-rule-style: estil de la línia. Pot prendre els següents valors:

none, hidden, dotted, dashed, solid, double, groove, ridge, inset
o outset.
• column-rule-width: el gruix de la línia.
• column-rule: propietat resum de les anteriors propietats. L’ordre

dels valors és el següent: column-rule-width column-rule-style
column-rule-color.
Imaginem que volem maquetar el text dels paràgrafs en tres columnes, amb una
separació de 50px entre elles i una línia puntejada que les separi. Establiríem la
següent regla:
Els navegadors encara
1 p { necessiten que posem el
seu prefix a les propietats
2 column−count: 3; que generen columnes en
3 column−rule: 5px dotted #458FD1; els elements.
4 −moz−column−count: 3;
5 −moz−column−gap: 50px;
6 −moz−column−rule: 5px dotted #458FD1;
7 −webkit−column−count: 3;
8 −webkit−column−gap: 50px;
9 −webkit−column−rule: 5px dotted #458FD1;
10 }
El resultat d’aquest exemple el podem veure en la figura 2.39.
Figur a 2. 39. Exemple de la maquetació en columnes amb CSS3
2.6.6 Media Queries
Un dels avanços més importants que va possibilitar CSS3, va ser la capacitat

de donar una resposta condicional en funció de la mida del navegador, i aplicar
diferents regles quan variem aquesta mida. Una de les eines que fem servir per tal
de fer-ho són les media queries.
Les media queries es fan servir conjuntament amb altres tècniques per realitzar el
que s’anomena disseny adaptatiu per a la web o RWD (Resposive Web Design),
és a dir, variar diferents aspectes de disseny i regles CSS perquè s’adaptin a
diferents dispositius, ja siguin smartphones, tablets, pantalles d’escriptori, etc.
La declaració de les media queries la podem fer o bé dins del mateix document
HTML o en diferents documents associats al document HTML.
• Dins del document HTML:
1 <style>
2 @media screen and (min−width: 1200px){
3 }
4 </style>
• Associant un document extern:
1 <link rel="stylesheet" media="screen and (min−width: 1200px)" href="estil_gran.

css" />
En ambdós exemples veiem dues seccions importants: la que a l’exemple diu

screen, que es refereix a les media type o tipus de mitjà, i la que ens parla
de la grandària mínima amb l’atribut min-width, anomenada media features o
característiques del mitjà.
Media types
El tipus de mitjans poden ser molt variats, i ens descriuen per quin mitjà volem
aplicar les regles CSS que escollim. El llistat de mitjans és el següent:
• all: per qualsevol dispositiu.
• braile: per dispositius tàctils de Braile.
• embossed: per impressores de Braile paginades.
• handheld: per dispositius de mà o amb poca amplada de banda.
• print: el fem servir per impressores
• projection: el fem servir per projectors
• screen: per qualsevol pantalla.
• speech: per dispositius que sintetitzen veu.
• tty: per dispositius amb un joc de caràcters limitat, com ara terminals.
• tv: el fem servir per televisors.

Media features
Les media features, es referencien a característiques del mitjà com ara la resolució,
l’orientació o l’amplada del dispositiu o del navegador entre d’altres, i la seva
utilitat fer-les servir com a condicions per aplicar unes regles CSS o unes altres.
• width i height: dimensions de l’àrea de visualització, és a dir, la que el

dispositiu renderitza. Admet valors fixos o relatius.
• device-width i device-height: amplada i alçada del dispositiu de sortida.
• aspect-ratio: relació entre amplada i l’alçada del dispositiu.
• device-aspect-ratio: igual a l’anterior però referit a la resolució de la

pantalla.
• color: número de bits per cada component de color.
• color-index: nombre d’entrades a la taula de color del dispositiu.
• orientacion: podem fer servir dos valors landscape (horitzontal) o

portrait (vertical).
• monochrome: nombre de bits per pixel a la memòria del quadre de vídeo

monocromàtic.
• resolution: resolució del dispositiu expressat en dpi (punt per polzada) o

dpcm (punts per centímetre)
• device-pixel-ratio: densitat de pixel, és a dir, punts per pixel. Els valors

habituals són 1.5 o 2 en dispositius amb pantalles de retina.
Totes les media features
admeten el prefix max- o
Vegem-ho amb un exemple pràctic: imaginem que tenim un div identificat pel id min-, a excepció de
contenidor que conté dos quadres de color, identificats per quadre1 i quadre2. orientation.
Volem que aquests quadres estiguin a mà esquerra i dreta respectivament flotant

dins del contenidor, de forma que si escurcem l’amplada del navegador per sota
de 600px, els dos quadres es mantinguin en aquestes posicions. Però també volem
que passada una amplada mínima de 600px no es desplacin més, ja que quedarien
molt apartats entre ells. Les codificacions per fer-ho són:
HTML:
1 <div id="contenidor">
2 <div id="quadre1"></div>
3 <div id="quadre2"></div>
4 </div>
CSS:
1 #quadre1 {
2 width: 100px;
3 height: 100px;
4 background−color: coral;
5 margin: 10px;
6 float: left;
7 }
8 #quadre2 {
9 width: 100px;
10 height: 100px;
11 background−color: coral;
12 margin: 10px;
13 float: right;
14 }
15 @media all and (min−width:600px){
16 #contenidor{
17 width:600px; /*Forcem que el div contenidor no superi mai una amplada de 600
px quan el navegador la supera*/
18 }
19 }
Per sobre de 600px d’amplada del navegador el quadre contenidor no supera els
600px, tal com es mostra a la figura 2.40:
F igu r a 2. 4 0 . Funcionament de les media queries
2.7 Exemples pràctics amb CSS
L’art del CSS no és saber-se totes les propietats que hi ha de memòria sinó saber-
les combinar adequadament per aconseguir els efectes desitjats. Hi ha centenars
de tècniques per a problemes comuns.
Casos típics on és necessari dominar les propietats CSS són fer menús a partir de
llistes o maquetar webs sense usar taules.
2.7.1 Fer menús amb llistes
A l’Annex “Codi font dels

exemples” del material Gairebé tot web disposa d’un menú de navegació que ens permet anar enllaçant
web d’aquesta unitat
trobareu més exemples de amb les diferents seccions del lloc. Una manera molt elegant de fer aquests menús
menús fets amb llistes.
és pensar-los com una llista amb ítems (i subítems, si s’escau). El problema que
tenim és que les llistes són “lletges”.
Vegem com podem fer un menú “bonic” a partir d’una llista. Es tracta d’un menú
vertical que té l’aspecte que mostra la figura 2.41.
Fig u ra 2 . 4 1. Menú fet

amb una llista
El codi (X)HTML és molt simple. Es tracta simplement d’una llista desordenada:

Si estiguéssim usant
1 <div id="menu"> (X)HTML5 en lloc d’usar
<div id=“menu” usaríem
2 <ul> l’etiqueta <nav>.
3 <li><a href="index.html">Inici</a></li>
4 <li><a href="seccio1.html">Secció 1</a></li>
5 <li><a href="sexxio2.html">Secció 2</a></li>
6 </ul>
7 </div>
A continuació combinarem diverses de les regles CSS existents per tal d’acon-
seguir que aquesta simple llista desordenada acabi essent un menú atractiu i
accessible per a l’usuari.
Primer de tot, hem de dir a la llista que no volem pics a cada ítem, i això
ho podem aconseguir aplicant una propietat específica de llistes que es diu
list-style-type. A més, traiem marges i farciments i hi posem una vora:
1 #menu ul {
2 list−style−type: none ;
3 margin: 0;
4 padding: 0;
5 border: thick solid #D68EFF;
6 }
A cada ítem de la llista hi canviem el color de fons:
1 #menu ul li {
2 background−color: #B20298;
3 }
Ara definim l’estil dels enllaços: canviem el color de la lletra, traiem el subratllat,
fem que les lletres siguin sempre majúscules i hi posem una mica de farciment.
Hem de destacar que la declaració display: block serveix perquè l’enllaç
passi a ser un element de bloc (per defecte, és un element de línia) i així poder
prémer l’enllaç en tot el bloc, no només on hi ha les lletres de l’enllaç:
1 #menu ul li a {
2 color: white;
3 text−decoration: none;
4 text−transform: uppercase;
5 display: block;
6 padding: 0.2em 0.2em 0.2em 0.4em;
7 }
Finalment, definim quina estètica han de tenir els enllaços quan hi passem per
damunt. En aquest cas, els canviem el color de lletra i de fons, i hi fem aparèixer
una vora a l’esquerra:
1 #menu ul li a:hover {
2 background: #CC4ABD;
3 border−left: 0.3em solid #58014B;
4 color: #58014B;
5 }
2.7.2 Maquetació de webs sense ús de taules
Podem trobar molts llocs web on la maquetació està feta a partir de taules. L’ús de
taules per maquetar és feixuc i hem d’evitar-lo. En aquest exemple mostrem com
podem fer una maquetació sense taules (tableless) fent ús únicament de la marca
<div> i de CSS.
La maquetació que ens proposem fer és la d’un lloc web típic, amb una capçalera,
una barra lateral per al menú, el cos de la pàgina amb el contingut del lloc i un
peu de pàgina. El resultat desitjat el podeu observar en la figura 2.42.
F igu r a 2. 4 2 . Maquetació tableless

El codi (X)HTML és força senzill, simplement marquem amb marques <div>

cadascuna de les capes que formen el web. Englobem tot el contingut en un <div>
contenidor, on posem la resta de capes (cap, lateral amb el menu, cos i peu):
Si uséssim HTML5, usaríem
1 <body> les noves etiquetes
estructurals (<header>,
2 <div id="contenidor"> <nav>, <footer>...) en lloc
3 <div id="cap"> d’usar etiquetes <div> amb
4 <h1>Títol de la web</h1> identificadors.
5 <h2>Subtítol de la web</h2>
6 </div>
8 <div id="menu">
9 <ul>
10 <li><a href="index.html">Inici</a></li>
13 </ul>
14 </div>
15 </div>
16 <div id="cos">
17 <div id="inici">
18 <h3>Inici</h3>
19 <p>..</p>
20 </div>
21 </div>
22 <div id="peu">
23 <p>Peu de página </p>
24 </div>
25 </div>
26 </body>
Ara definim les regles pertinents per aconseguir els nostres objectius.
En la marca <body> definim totes les propietats genèriques: color de fons, color
de lletra i tipus de lletra. A més, posem el text centrat (perquè Internet Explorer
entengui que volem el contingut centrat) i traiem qualsevol tipus de marge.
1 body {
2 text−align: center ;
3 background−color:#FFC7FC;
4 color: #58014B;
5 font: small sans−serif;
6 margin: 0;
7 }
Al <div> amb identificador contenidor hem de dir-li que no ocupi tota la pàgina
(li diem que n’ocupi només un 80%), que quedi centrat (això s’aconsegueix posant
els marges esquerre i dret amb valor auto) i que el fons sigui blanc. A més, fem
que tot el text del web estigui alineat a l’esquerra.
1 #contenidor{
2 width: 80%;
3 margin: 0px auto;
6 }
La capçalera i el peu de pàgina tenen propietats comunes: tenen la mateixa imatge

de fons, el color de lletra és blanc i en negreta, i el text està centrat.
1 #cap, #peu{
2 background−image: url("imatges/banner−web.png");
5 color:white;
6 }
Especifiquem també les propietats que només afecten la capçalera: volem que els
títols que contingui no tinguin marges:
1 #cap h1, #cap h2{

2 margin:0;
3 }
Posem, a més, les mides per defecte que han de tenir tots els encapçalaments <h1>
i <h2> de la pàgina:
1 h1 {
2 font−size: 5em;
3 }
4
5 h2 {
6 font−size: 4em;
7 }
Per al peu de pàgina també tenim propietats específiques: la lletra ha de ser petita i
fem que no pugui tenir cap element flotant. Així, la barra lateral, que és un element
flotant, mai no es posarà per damunt del peu de pàgina.
1 #peu {
2 font−size: small;
3 clear: both;
4 }
Ara definim la barra lateral: és un element flotant a l’esquerra i té una amplada

del 15% de la pàgina:
1 #lateral {
2 width: 15%;
3 float: left;
4 }
Per maquetar el cos del web diem que el marge esquerre és d’un 15%, que és
just l’espai que ocupa la barra lateral. A més, posem una mica de farciment a
l’esquerra, perquè el text del cos no quedi enganxat al menú.
1 #cos {
2 margin−left: 15% ;
3 padding−left: 1em ;
4 }
Amb totes aquestes regles hem aconseguit el nostre objectiu: tenim una web
bonica, ben estructurada, amb un codi (X)HTML senzill i sense fer ús de taules.
2.7.3 Simulació de marcs amb CSS
L’ús de marcs no és gens aconsellable. A partir d’un ús intel·ligent de les propietats

CSS podem simular marcs sense usar-los. Vegem com.
L’exemple mostrarà una web amb una capçalera i un peu de pàgina, un menú
lateral esquerre i una part central de la web amb el contingut de cada secció.
Suposarem que el contingut de cada secció no és molt llarg, de manera que
posarem el contingut de totes les seccions en el mateix document (X)HTML. Si
ho preferíssim, podríem crear diverses pàgines repetint la mateixa estructura que
aquí es presenta.
El codi del cos del document seria el següent:
1 <body>
2 <div id="contenidor">
3 <div id="cap">
4 <h1>Títol de la web</h1>
5 <h2>Subtítol de la web</h2>
6 </div>
8 <div id="menu">
9 <ul>
10 <li><a href="#inici">Inici</a></li>
11 <li><a href="#seccio1">Secció 1</a></li>
12 <li><a href="#seccio2">Secció 2</a></li>
13 </ul>
14 </div>
15 </div>
16 <div id="cos">
17 <div id="inici">
18 <h3>Inici</h3>
19 <p>...</p>
20 <p>...</p>
21 <p>...</p>
22 </div>
23 <div id="seccio1">
24 <h3>Secció 1</h3>
25 <p>...</p>
26 <p>...</p>
27 <p>...</p>
28 </div>
29 <div id="seccio2">
30 <h3>Secció 2</h3>
31 <p>...</p>
32 <p>...</p>
33 <p>...</p>
34 </div>
35 </div>
36 <div id="peu">
37 <p>Peu de pàgina </p>
38 </div>
39 </div>
40 </body>
Per tal de simular els marcs hem de fer que les capes cap, lateral, cos i peu
estiguin fixades i que si el contingut de cada secció, que s’anirà mostrant a la
capa cos, no hi cap, ens aparegui una barra de desplaçament. Aquests objectius
els aconseguirem amb una combinació de les propietats position: fixed i
overflow:auto.
Primer posicionarem la capa contenidor per tal que no ocupi la totalitat de la

finestra. Tindrà una amplada del 80%, amb un marge del 10% per cada costat.
1 /* Contenidor que ho engloba tot (capçalera, columnes i peu) */
2 #contenidor{
3 /* El contingut de la web ocuparà el 80% d’amplada de la finestra*/
4 width: 80%;
5 /* Centrem el contenidor */
6 margin: 0px auto;
7 /* Text alineat a l’esquerra */
9 /* Fons de color blanc */
11 }
Ara posicionarem cadascuna de les capes principals:

1 #cap {
2 /* Posició fixada*/
3 position: fixed;
4 /* Posició de la capçalera: la posem a dalt de tot */
5 top: 0;
6 /* Mides de la capçalera */
7 width: 80%;
8 height: 25%;
9 /* Si el text sobrepassa l’alçada de la capçalera quedarà ocult */
10 overflow:hidden;
11 }
12
13 #peu {
15 position: fixed;
16 /* Posició del peu de pàgina */
17 top: 90%;
18 /* Mides del peu de pàgina */
19 width: 80%;
20 /* Si el text sobrepassa el peu de pàgina quedarà ocult */
21 overflow:hidden;
22 }
23
24 #lateral {
26 position: fixed;
27 /* Posició de la columna esquerra, coincideix amb l’alçada de la capçalera
*/
28 top: 25%;
29 /* Mides de la columna esquerra */
30 width: 12%;
31 height: 65%;
32 /* Si el text sobrepassa l’alçada de la columna quedarà ocult */
33 overflow:hidden;
34 /* Color de fons */
36 }
37
38 #cos {
40 position: fixed;
41 /* Posició del cos, coincideix amb l’alçada de la capçalera */
42 top: 25%;
43 /* Posicionem a 10% (marg esquerre del contenidor) + 12% (amplada columna
esquerra)*/
44 left: 22%;
45 /* Establim marge i farciment */
46 margin−left: 0%;
47 padding−left: 1%;
48 /* Mides del cos. */
49 /* L’amplada: 67% + 1% (padding) + 12% (columna esquerra) = 80% (amplada
total del contenidor) */
50 width: 67%;
51 height: 65%;
52 /* Si el text sobrepassa l’alçada del cos de la web quedarà ocult */
53 overflow:hidden;
54 /* Color de fons */
56 }
Finalment, hem de fer que els <div> que siguin fills de la capa cos ocupin
tota l’alçada de la capa cos i si el text és molt llarg ens aparegui una barra de
desplaçament. Això ho aconseguirem amb la següent regla:
1 #cos>div{
2 /* Els <div> de dins el cos ocuparan tota l’alçada possible */
3 height: 100%;
4 /* Si el text sobrepassa l’alçada del <div> apareixerà una barra de desplaç
ament */
5 overflow: auto;
6 }
Si a les regles anteriors li afegim més regles que estilitzin tots els elements
aconseguim el resultat que es veu en la figura 2.43.
Figur a 2. 43. Simulació de marcs amb CSS
2.8 Editors i gestors de CSS
Per saber més de

La majoria d’editors i gestors d’(X)HTML també donen suport i facilitats per Brackets aneu a l’apartat
a l’edició de CSS. Per tant, a més de les funcionalitats de què ja disposem pel “Editors i gestors
d’(X)HTML” de la unitat
fet d’usar un gestor d’(X)HTML (fragments de codi, accessos ràpids al codi...), “Fonaments d’(X)HTML”
disposem d’ajudes amb l’objectiu concret de generar codi CSS.

Així doncs, tot i que l’edició de regles CSS es pot fer amb qualsevol editor de text,
tindrem facilitats per a l’edició de les regles i dels estils.
Com a exemple, veurem algunes de les facilitats ens ofereix Brackets, relatives a
CSS. Alguns gestors ofereixen característiques similars.
Per tal de saber com
instal·lar una extensió a
Brackets, consulteu la Unitat Aquestes facilitats són:
2, l’apartat “Editors i gestors
d’(X)HTML”.
És molt recomanable
• Autocompleció de codi CSS
instal·lar l’extensió CSS
Color Preview, tal com
vàrem veure a la Unitat 2, al
• Creació de regles CSS amb Edició Ràpida
parlar dels editors i gestors
(X)HTML. • Color picker
• Creació gradients linears
2.8.1 Autocompleció de codi CSS
El CSS és un dels diversos llenguatges suportats pel Brackets. Per tant, disposem
de l’autocompleció de codi a mesura que anem escrivint. En la figura 2.44 podeu
veure com se’ns mostren totes les possibilitats que tenen a veure amb propietats
de text, i a la figura 2.45 els valor que pot acceptar la propietat text-align.
Aquestes ajudes es mostren a mesura que escrivim el codi, però si volem forçar que
apareguin, també ho podem fer mitjançant el menú Edit > Show code Hits o
l’abreviació de teclat Ctrl + Space.
Fig u ra 2 . 4 4 . Suggeriments per propietats

En quan als valors que pot assolir una propietat:
F ig ur a 2. 45 . Suggeriments per valors de propietats
2.8.2 Creació de regles CSS amb Edició Ràpida
Moltes vegades a mesura que escrivim HTML volem afegir una nova regla. Per
tal de fer-ho hem d’obrir el fitxer on la volem ficar (External Style Sheet), o
simplement anar a la capçalera del document HTML per editar l’estil dins de
l’etiqueta <style> (Internal Style Sheet). Això pot ser una feina prou pesada,
de localització de l’element que volem modificar, dins del codi CSS. Brackets
disposa d’una eina molt potent per tal de facilitar aquesta tasca, és l’anomenada
Edició Ràpida (Quick Edit). Per tal d’activar-la solament ens hem de posar dins
l’etiqueta a la qual volem afegir/modificar una regla i pitjar Cmd + E, o mitjançant
el menú Navigate > Quick Edit. S’obrirà l’edició ràpida (vegeufigura 2.46),
on podem afegir/modificar la regla, bé en un determinat fitxer o be escollint-ne un
altre, en el cas que aquesta etiqueta disposi d’una distribució de regles a diferents
fitxers.
Fi g ura 2 .46 . Edició ràpida amb Brackets
2.8.3 Color picker
Una ajuda a l’hora d’escollir colors, és l’extensió Brackets Color Picker, que
afegeix la possibilitat d’afegir colors amb un selector visual, tal com mostra la
figura 2.47.
F igu ra 2 .4 7 . Selecció de color amb l’extensió Color Picker
Per tal d’afegir aquesta possibilitat, hem d’instal·lar l’extensió amb el gestor
d’extensions de Brackets. L’adreça on figura aquesta extensió és Backets Color
Picker (vegeu figura 2.48)
F igu r a 2. 4 8 . Gestor d’extensions amb Color Picker instal·lat
Una vegada instal·lat i actiu podem accedir amb aquesta extensió, quan escrivim
una propietat dins de CSS, del tipus colors, ja sigui color o background-color,
i cliquem CMD/CTRL + ALT + K.
2.8.4 Creació gradients linears
Podem afegir a l’edició ràpida noves característiques que ens facilitin certes
tasques. Aquest és el cas de Brackets Gradient Editor, disponible a través del
gestor d’extensions de Brackets o a l’adreça Brackets Gradient Editor.
Una vegada instal·lat, si estem editant un gradient amb CSS, com per exemple:
1 #gradient {
2 background: linear−gradient(rgb(137, 157, 52) 11%, blue 77.3%); /* Estàndard
*/
3 }
Ens hem de posicionar dins de la codificació linear-gradient i activar l’edició

ràpida o Quick Edit (Cmd + E). S’obrirà un diàleg com el mostrat a la figura 2.49,
per tal de manipular els colors del gradient:
Fi g ura 2 .49 . Dialeg per creació de gradients de colors.

Gestors d'arxius web
Montserrat Madridejos Mora, Jordi Cárdenas Guia
Aplicacions Web
Aplicacions Web Gestors d'arxius web
Índex
Presentació 5
1 Instal·lació de gestors d’arxius web 9

1.1 Evolució històrica dels gestors d’arxius web . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.2 Característiques i funcionalitats bàsiques dels gestors d’arxius web . . . . . . . . . . . . . . . 16
1.3 Classificació de les aplicacions de gestors d’arxius web . . . . . . . . . . . . . . . . . . . . . 20
1.4 Procés d’instal·lació d’un gestor d’arxius web: OpenKM . . . . . . . . . . . . . . . . . . . . 21
1.4.1 Instal·lació d’OpenKM en Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
1.4.2 Instal·lació d’OpenKM en Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
1.5 Funcionalitats bàsiques del gestor d’arxius web OpenKM . . . . . . . . . . . . . . . . . . . . 32
1.5.1 Format de la informació que es pot gestionar . . . . . . . . . . . . . . . . . . . . . . 33
1.5.2 Treball col·laboratiu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
1.5.3 Capitalització del programari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
1.5.4 Arquitectura de l’aplicació . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
1.5.5 Organització per nivells d’OpenKM . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
1.5.6 Entorns d’ús del gestor d’arxius OpenKM . . . . . . . . . . . . . . . . . . . . . . . . 44
1.5.7 Instal·lació del gestor d’arxius documentals . . . . . . . . . . . . . . . . . . . . . . . 48
2 Configuració i ús del servei de gestió d’arxius web 49

2.1 Primeres passes de la configuració . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
2.1.1 Estructura de fitxers d’un gestor d’arxius web: OpenKM . . . . . . . . . . . . . . . . 51
2.1.2 Arxius de configuració per defecte de l’aplicació . . . . . . . . . . . . . . . . . . . . 55
2.1.3 Arxius de configuració personalitzada . . . . . . . . . . . . . . . . . . . . . . . . . . 66
2.1.4 Consola de configuració . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
2.2 Administració d’usuaris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
2.2.1 Afegir nous usuaris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
2.2.2 Modificar i eliminar usuaris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
2.3 Administració de grups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
2.3.1 Creació de grups i subgrups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
2.3.2 Afegir i eliminar usuaris a un grup/subgrup . . . . . . . . . . . . . . . . . . . . . . . 72
2.4 Administració del contingut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
2.4.1 Creació d’espais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
2.4.2 Afegir o crear nous arxius a l’espai . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
2.4.3 Compartir contingut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
2.4.4 Cerca de contingut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
2.4.5 Copiar i enganxar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
2.5 Entorn d’usuari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
2.5.1 Accés a l’entorn del gestor d’arxius web . . . . . . . . . . . . . . . . . . . . . . . . . 77
2.5.2 Pàgina principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
2.5.3 Altres espais de configuració . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
2.5.4 Àrea de treball . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Aplicacions Web Gestors d'arxius web
3 Integritat del servei i documentació tècnica 85

3.1 Indexació dels arxius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
3.2 Mecanismes de seguretat del sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
3.2.1 Rols i permisos als usuaris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
3.2.2 Convidar usuaris o grups a un contingut . . . . . . . . . . . . . . . . . . . . . . . . . 87
3.2.3 Autenticació d’usuaris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
3.2.4 Connexió segura amb SSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
3.3 Cerca i interpretació de documentació tècnica . . . . . . . . . . . . . . . . . . . . . . . . . . 89
3.4 Documentació dels gestors d’arxius web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
3.4.1 Documentació del procés d’instal·lació i configuració d’OpenKM . . . . . . . . . . . 92
3.4.2 Documentació de les incidències i solucions . . . . . . . . . . . . . . . . . . . . . . 93
3.5 Desinstal·lació d’OpenKm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Aplicacions Web 5 Gestors d'arxius web
Presentació
Des de l’aparició dels primers sistemes de fitxers, els sistemes operatius han
necessitat una eina que permetés als usuaris treballar amb el sistema de fitxers
i que mostrés el contingut del disc dur d’una manera amigable i fàcil de gestionar.
Aquesta eina és el gestor d’arxius, que s’encarrega de fer d’intermediari entre les
dades del sistema i nosaltres.
Amb l’aparició de les xarxes d’ordinadors es va crear un protocol capaç de

transferir fitxers basat en una arquitectura client-servidor, l’FTP (de l’anglès
File Transfer Protocol, Protocol de transferència d’arxius). Tot i així, aquest
mecanisme de transferència (que encara s’utilitza avui dia), resulta de certa
complicació per als usuaris que no tenen coneixements tècnics en informàtica.
Quan es va produir la gran expansió comercial d’Internet, cap a mitjan anys

noranta del segle XX, la necessitat de disposar dels arxius va passar de ser una
necessitat local a una necessitat global, és a dir, de poder disposar dels nostres
arxius a través d’Internet des de qualsevol part del món.
Aquest conjunt de fets va impulsar el naixement d’aplicacions web que permetes-

sin tenir accés als arxius de manera remota i senzilla, els gestors d’arxius web.
Al llarg d’aquesta unitat formativa coneixereu les diverses aplicacions de gestors

d’arxius web que hi ha en el mercat, i la manera més usual d’instal·lar-les i
configurar-les en un servidor. Veureu que no deixen de ser aplicacions web i que
s’instal·len de manera molt similar a la resta d’aplicacions que heu vist, i que
veureu, en aquest mòdul.
En l’apartat “Instal·lació dels gestors d’arxius web”, fareu un repàs de la història

dels gestors d’arxius fins a l’aparició dels gestors d’arxius web. Analitzareu les
característiques i funcionalitats dels gestors d’arxius, i seguireu els passos per
instal·lar un gestor d’arxius documental.
En l’apartat “Configuració i ús del servei de gestió d’arxius web”, aprendreu a

configurar l’aplicació, a gestionar els espais del gestor, i descobrireu la potència
de cerca que pot tenir un gestor quan es fan servir les dades que informen del
contingut dels arxius (metadades). També aprendreu a crear i administrar els
comptes d’usuari.
L’apartat “Integritat del servei i documentació tècnica” explica la manera com

s’indexen els arxius en el gestor, i els mecanismes de seguretat de què disposa
per autenticar els usuaris i tenir un control dels seus rols i permisos. Aquests
mecanismes seran molt útils a l’hora d’implantar l’aplicació web en un entorn
empresarial.
Aquesta unitat formativa és eminentment pràctica, i és convenient anar seguint tots

els passos de configuració amb molta atenció, tenint cura de cada detall. Per això
convé que aneu fent les activitats proposades, i els exercicis d’autoavaluació, així
com tenir coneixement de la documentació tècnica, per poder arribar a instal·lar i
configurar l’aplicació sense problemes i amb el màxim de garanties. El fet que les
aplicacions web que s’expliquen tinguin llicència GPL permetrà que les pugueu
utilitzar sense problemes, fins i tot per a un ús comercial.
En acabar la unitat heu d’haver assolit les fites següents:
1. Establir la utilitat d’un servei de gestió d’arxius web.
2. Descriure diferents aplicacions de gestió d’arxius web.
3. Instal·lar i adaptar una eina de gestió d’arxius web.
4. Crear i classificar comptes d’usuari en funció dels seus permisos.
5. Gestionar els arxius i els directoris del gestor.
6. Aplicar criteris d’indexació sobre els arxius i directoris.
7. Comprovar la seguretat del gestor d’arxius.

més ús del sector.
9. Documentar adequadament la configuració dels serveis de gestió d’arxius

web, les incidències aparegudes i les solucions aportades.
1. Instal·lació de gestors d’arxius web
La gestió de la informació és un aspecte de creixent importància a mesura que

s’estén l’ús d’Internet. El volum de dades dels usuaris augmenta, fins al punt que
pot esdevenir una necessitat poder-hi accedir d’una manera remota i compartida;
en aquest sentit, fer-ho des d’un navegador és cada cop més comú.
A l’hora de gestionar continguts de diversos formats, els gestors d’arxius web

simplifiquen el treball dels tècnics. Diversos són els contextos on és recomanable
la utilització d’eines basades en l’ús de navegador: empreses de diferent mida,
universitats o centres educatius. En aquest context, la
paraula web fa al·lusió a l’ús
del protocol d’aplicació
HTTP per a la transferència
de pàgines web. Així, doncs,
Un gestor d’arxius web és una aplicació web que permet consultar i el terme gestors d’arxius
web fa referència a
manipular un sistema d’arxius remot. aplicacions gestores
d’arxius basades en web
accessibles a través dels
nostres navegadors
Des de l’aparició del protocol FTP l’any 1971, passant per la invenció pel d’Internet (per exemple, el
Firefox o l’Internet Explorer).
programa ping per part del científic Mike Muuss el 1983, l’ús de les xarxes ha
anat guanyant en precisió i senzillesa. Els gestors d’arxius web han esdevingut, La paraula arxiu, en el
en aquest sentit, una fita important dels darrers anys. context d’Unix, es refereix a
un conjunt de fitxers
agrupats en un de sol
(normalment comprimits),
Una característica del programari és que sol evolucionar en el temps. A la figura però al llarg d’aquest
1.1 podeu veure quin era l’aspecte del programa File Thingie, un gestor de fitxers material utilitzarem les
paraules fitxers i arxius
web basat en el llenguatge de programació PHP. indistintament.
F igur a 1. 1. Interfície web del File Thingie File transfer protocol (FTP)
L’FTP és un protocol de xarxa
amb arquitectura client-servidor
que es remunta a l’any 1973 i
que va ser dissenyat per
intercanviar i manipular arxius a
través d’una xarxa d’ordinadors
que utilitzi el protocol IP, com
ara Internet. Inicialment, l’FTP
es cridava a través d’una consola
o terminal i tota la interfície era
en mode text, però més endavant
es van desenvolupar interfícies
de tipus gràfic que el suporten.
PHP (PHP: Hypertext

Preprocessor) és un
llenguatge de programació
que s’utilitza per generar
pàgines web dinàmiques.
Interfície web d’un gestor d’arxius web basats en PHP, el File Thingie
Avui en dia existeixen diferents aplicacions per gestionar els arxius web. Cal
estudiar les diferents possibilitats que hi ha al mercat i utilitzar aquell gestor que
més s’adapti als requisits sol·licitats pels usuaris.
1.1 Evolució històrica dels gestors d’arxius web

John Socha és l’autor de
Norton Commander. Si
voleu seguir a l’autor podeu
consultar el seu blog: http: Per trobar l’origen dels gestors d’arxius web hem de viatjar fins l’any 1978. Aques-
//blogs.socha.com/ ta data marca l’inici del desenvolupament d’aquest tipus de programes, on un bon
exemple dels mateixos són els CMS (conversational monitor system, ‘sistema de
gestió de continguts’), que van anar evolucionant fins arribar a un punt important:
l’aparició dels OFM (orthodox file managers, ‘gestor d’arxius ortodox’). Els OFM
mostraven informació referent als fitxers utilitzant tres finestres (dues s’ocupaven
de mostrar informació i l’altra era una línia de comandes).
Un altre exemple és Flist (1981) (figura 1.2), que permetia visualitzar una llista
de tots els fitxers i mostrar-los de manera ordenada en funció d’algun dels seus
atributs. Aquest gestor estava format per tres àrees clarament visibles: en la part
superior es mostrava informació genèrica de la llista; en la part central una llista
indicava per columnes els tipus de fitxers i els seus atributs; i, finalment, en la part
inferior hi havia un petit menú que permetia fer certes operacions sobre la llista o
sobre els fitxers seleccionats amb una X de la llista.
F igu r a 1. 2 . Vista de la interfície de Flist
Interfície del gestor d’arxius Flist sobre IBM VM/SP CMS
Després van aparèixer altres programes que van fer servir Flist com a font d’inspi-
Ranger
(http://nongnu.org/ranger/) ració, com el Filelist o el Fulist, que funcionaven en altres sistemes operatius.
és un exemple actual de
programes Orthodox.
Un dels OFM més famosos és Norton Commander. Al voltant de l’any 1986
aparegué aquest programa (figura 1.3), que ja incloïa una interfície gràfica
molt primitiva, encara en mode text. Aquesta categoria de gestors d’arxius es
caracteritzava per dividir la pantalla en dos menús (superior i inferior), i tres
finestres, dues de les quals mostraven una llista dels fitxers continguts en una
carpeta, mentre que l’última incloïa l’intèrpret d’ordres (shell) del sistema. A
més, també es permetia l’ús del ratolí per interaccionar amb la interfície, i es
podia amagar i modificar la mida dels dos taulers en cas que fos necessari obtenir
una vista més àmplia de l’intèrpret d’ordres.
Figur a 1. 3. Menú principal de Norton Commander
Interfície gràfica en mode text del gestor d’arxius Norton Commander
L’evolució dels sistemes operatius cap a sistemes amb entorn de finestres va

propiciar l’aparició dels navigational file managers (també anomenats ‘gestors de
tipus navegador’). Aquests gestors utilitzen la interfície gràfica per comunicar-se
amb l’usuari i permetre que aquest gestioni els fitxers. El programa Windows
Explorer, un navigational file manager integrat al sistema operatiu Microsoft
Windows, va ser una de les eines més populars en el seu temps (hem de retrocedir
fins l’any 1995!). Altres gestors molt importants van ser el Finder per a sistemes
Mac OS X, en el qual es fonamenta l’actual iTunes. Per a distribucions Linux
disposem d’alguns bons exemples com Dolphin o Nautilus (vegeu la figura 1.4)
que pertanyen al mateix format de programari. Nautilus va tenir un alt grau
d’acceptació per part dels
usuaris de distribucions
Linux.
F igu r a 1. 4 . Finestres de navegació del Nautilus
Interfície del Nautilus File Manager
Aviat es va produir un canvi disruptiu en l’escena informàtica: la representació

de fitxers i directoris com si fossin objectes físics. Actualment aquesta és la
concepció que molts usuaris tenen de l’emmagatzematge de la informació, basat
en l’abstracció. El nom tècnic del programari que s’adscriu a aquest principi és
spatial file manager (‘gestor espacial d’arxius’). De forma resumida, consisteix a
mostrar en una finestra el contingut d’un directori, permetent a l’usuari arrossegar
qualsevol contingut des d’un origen fins a un destí. Alguns dels gestors més
habituals que utilitzen aquesta gestió dels espais són Finder (a partir de la versió
5), Konqueror (a partir de la versió 2.9) o Windows Explorer.
En el moment d’aparèixer en escena aquesta tipologia de programes va destacar

l’original manera que tenien de gestionar les finestres i de representar els arxius i
les carpetes. Aquest tipus de gestors d’arxius trencaven amb l’estructura rígida
de les tres finestres i intentaven imitar la manera com una persona treballa
amb els documents físics. Així, cada carpeta (antigament anomenada directori)
corresponia a una única finestra, la mida de la qual era gran o petita en funció de
la quantitat d’arxius que inclogués (si n’hi havia massa per fer-los encabir en una
finestra es mostraven en forma de llista), i els arxius només es podien veure tots
alhora en una finestra.
Aquests nous tipus de gestors d’arxius suposaren també un salt evolutiu en la

manera de visualitzar gràficament els arxius. En els gestors d’arxius previs, la
visualització es limitava a una llista, mentre que en aquesta nova generació de
programari els fitxers es mostraven amb tot tipus de detalls visuals i amb icones
que els identificaven gràficament.
Així, doncs, s’aconseguia imitar la manera com una persona treballaria amb
carpetes de documents a l’oficina: obrir l’arxivador, consultar les carpetes
disponibles, obrir-ne una i disposar el contingut damunt una taula. De la mateixa
manera, es podia aplicar la metodologia de manera “virtual”: obrir el gestor
d’arxius (l’arxivador), consultar les carpetes disponibles (de manera jeràrquica),
seleccionar-ne una i obrir-la virtualment en una finestra que distribuís de manera
espacial les icones que representen cada fitxer (equivaldria a disposar-ne el
contingut damunt la taula). GNOME
GNOME és un dels molts
Contemporàniament, i amb l’expansió d’Internet a mitjan anys noranta, va aparèi- entorns d’escriptori per a
sistemes operatius semblants a
xer la categoria dels gestors d’arxius que es fan servir avui dia, els gestors d’arxius Unix (com Linux, Solaris, Irix...)
que incorporen gestors d’arxius
de navegació, o també anomenats exploradors. El més famós és l’explorador de entre d’altres components amb la
filosofia de fons d’imitar un
Windows (figura 1.5), però també hi trobem el Mac OS X Finder, entre molts escriptori d’oficina. D’altres
entorns d’escriptori que també
d’altres. incorporen els seus propis
gestors d’arxius són KDE o
Xfce.
En aquest cas, els gestors de fitxers intenten imitar el funcionament dels navega-
dors d’Internet. Entre les característiques més destacades hi ha la barra d’ubicació
(o barra d’adreces) que indica en cada moment el camí del fitxer o carpeta que
s’està consultant; la presència de dos botons, el d’avançar i el de retrocés, que
permeten tenir un control sobre les ubicacions visitades; i un tauler que ofereix
una vista en arbre del sistema de fitxers.
F igur a 1. 5. Finestra de l’explorador de Windows XP
Interfície gràfica de l’explorador de Windows XP
Els gestors d’arxius locals de tipus explorador són els predominants en els sistemes
operatius actuals, i han esdevingut un model a imitar pels gestors d’arxius basats
en web. L’ús d’Internet com a mitjà de comunicació comporta nous desafiaments
com són la sincronització d’arxius entre clients i servidor, o la fiabilitat de la
transmissió.
Des de l’aparició del programari lliure ha sorgit una àmplia gamma de gestors
d’arxius basats en webs gratuïts, escrits majoritàriament en el llenguatge, del
costat del servidor, PHP i, del costat del client, Javascript, o d’altres que permetin
més interacció amb l’usuari. N’és un exemple l’AjaXplorer que, a més dels
llenguatges esmentats, empra la tècnica de desenvolupament Ajax (figura 1.6) per
proporcionar una interacció encara més dinàmica.
F igu r a 1. 6 . Pàgina principal d’AjaXplorer
Interfície web de l’AjaXplorer
Com hem pogut veure, els gestors d’arxius han sofert una gran evolució des dels
primers exponents com el Flist, on es mostraven els fitxers en forma de llista,
fins als actuals exploradors, com el de Windows, que tenen un entorn gràfic
amb múltiples eines i operacions per treballar amb els fitxers. A la taula 1.1 es
mostra un quadre resum de l’evolució dels gestors d’arxius web en relació amb
Podeu veure un exemples els programes que s’han pres com a referència didàctica.
de clon basat en web de
Norton Commander per a
diverses plataformes al Taul a 1. 1. Resum de l’evolució dels gestors d’arxius web
següent enllaç:
http://www.rmonet.com/ Gestor d’arxiu de Creadors del Any Categoria Característiques
commander/. referència programari
Flist IBM VM/SP CMS 1981 Llista d’arxius La seva interfície

gràfica és textual i
mostra visualment
una llista de tots
els fitxers de disc.
Disposa també
d’un petit menú
per dur a terme
operacions sobre
els fitxers. És un
dels primers
gestors de fitxers
que es van crear.
Tau l a 1.1 (continuació)
Gestor d’arxiu de Creadors del Any Categoria Característiques

referència programari
Norton Peter Norton 1986 Ortodoxos Màxim exponent

Commander Computing de la segona
generació. Està
constituït per tres
finestres, dues que
mostren la llista de
fitxers i una tercera
amb l’intèrpret
d’ordres del
sistema. La
interfície gràfica
encara és textual,
però permet
interaccionar amb
les dues finestres i
utilitzar el ratolí.
Avui dia encara
se’n poden trobar
clons basats en
web.
Nautilus Eazel 2001 Espacials Comença la

generació dels
gestors d’arxius en
mode gràfic.
Gestionen les
finestres i els
fitxers i carpetes
de manera
espacial, com si
s’anessin obrint
carpetes i
documents
físicament damunt
d’una taula.
Windows Microsoft 2001 Exploradors Disposen de

Explorer XP funcionalitats
característiques
dels navegadors
web, com botons
d’avançar i de
tornar enrere,
barra d’adreces de
fitxers...
AjaXplorer AjaXplorer 2007 Basats en web Implementen quasi

les mateixes
funcionalitats que
els de tipus
explorador, però a
més incorporen
operacions
típiques
d’administració
d’arxius remots,
com càrrega i
descàrrega de
fitxers, validació
d’usuaris...
Opendocman Opendocman 2015 Basat en web Programat en PHP,

(DMS) presenta un
front-end molt
pràctic i intuïtiu.
Owncloud OwnCloud Inc. 2015 Basat en núvol Lliure i open

source, sincronitza
l’escriptori i el
núvol.
Tau la 1 . 1 (continuació)
Gestor d’arxiu de Creadors del Any Categoria Característiques

referència programari
Alfresco Alfresco Software 2015 Basat en web Desenvolupat en

Inc. Java, presenta
diferents versions i
llicències.
Dropbox Dropbox 2014 Basat en núvol Presenta versions

gratuïtes i de
pagament, permet
compartir arxius
amb altres usuaris.
Mark P. McCahill va
desenvolupar el protocol
Gopher, base del programa
GopherVR, i predecessor
del World Wide Web. Una corrent que no va tenir èxit va ser evolucionar l’Spatial File Manager cap al
3D. La intenció era utilitzar el posicionament 3D i característiques volumètriques
per tal d’identificar els diferents continguts. Exemples d’aquesta orientació són el
GopherVR, BumpTop o fsn.
Pel que fa al futur dels gestors d’arxius web, és possible que passi per desenvolupar
interfícies gràfiques més riques en l’experiència interactiva, com és el cas de nous
gestors d’arxius en 3D que ja estan en fase de desenvolupament; malgrat tot, pot
ser que aquest tipus de tecnologia encara trigui molts anys a arribar.
1.2 Característiques i funcionalitats bàsiques dels gestors d’arxius

web
Els gestors d’arxius són una eina que us ha de permetre explorar i consultar els
fitxers que hi hagi emmagatzemats en el vostre disc dur. Sense ells, la gestió dels
vostres fitxers podria esdevenir una tasca massa feixuga i difícil de dur a terme.
Habitualment els gestors d’arxius mostren els continguts de forma jeràrquica,

mitjançant diferents plafons o pantalles. El seu objectiu és mostrar el màxim
d’informació útil possible de forma ordenada i intuïtiva. L’entorn de treball
acostuma a ser editable amb el propòsit de millorar l’eficiència en l’ús per part
de l’usuari.
Si mirem d’establir una comparació amb el món real, ho podem comparar amb un
arxivador de documents dels que acostuma a haver-hi a les oficines. Un arxivador
s’organitza en carpetes etiquetades que contenen un o diversos documents. Quan
ha passat un cert temps i s’han acumulat molts documents i decidim fer una
ullada a tot el que hem anat recopilant, què fem? Obrim el calaix i fem un
primer cop d’ull a les etiquetes de les carpetes per tenir una noció d’allò que
contenen i en seleccionem una del nostre interès per consultar els documents que
hi ha guardats en el seu interior. D’igual manera, amb el gestor d’arxius podem
consultar els noms de les carpetes del nostre disc dur; en un costat de la interfície
Recordeu que un fitxer és
una entitat lògica composta (normalment una finestra) es mostra l’índex, i en l’altre costat, el contingut de la
per una seqüència de bytes
(1 byte = 8 bits), guardada carpeta que s’està consultant (els nostres fitxers). En la figura 1.7 en podeu veure
per un sistema de fitxers.
la comparació.
Figur a 1. 7. Analogia entre l’arxivador i un gestor d’arxius
Tot i que potser no en som conscients, els gestors d’arxius els trobem simplificats
sovint dins d’altres aplicacions, com per exemple en els casos en què volem
guardar algun document que hem editat i l’aplicació ens mostra una finestra on ens
demana on volem desar l’arxiu. En la figura 1.8 podeu veure el desplegable que
apareix amb les unitats de disc del sistema, algunes carpetes i la carpeta activa, i
dins el requadre gran el contingut de la carpeta que s’està consultant, de la mateixa
manera com ho fan els gestors d’arxius natius.
F igur a 1 . 8. Finestra “Anomena i desa” amb gestor d’arxius incorporat
Aquest conjunt de característiques que hem vist relatives als gestors d’arxius són
aplicables també als gestors d’arxius web. Tots els gestors d’arxius web permeten
fer d’una manera o una altra càrregues de fitxers al servidor (si no, es perdria el
sentit de gestió remota), i per fer-ho, en última instància del procés, acaben cridant
al gestor local (acostuma a haver-hi sempre un botó que diu navegar) perquè
l’usuari pugui explorar el sistema de fitxers i seleccionar els que vol carregar al
servidor.
Els gestors d’arxius web imiten els gestors d’arxius locals en el sentit que ofereixen
funcionalitats molt similars accessibles a través d’Internet per poder gestionar
remotament els nostres fitxers. El fet de permetre l’accés remot suposa l’ús d’una
sèrie de tecnologies que estan involucrades directament o indirectament en la
creació d’aquest tipus d’aplicacions a través de la xarxa, com per exemple els
llenguatges XML, PHP i ASP, les tècniques de desenvolupament web Ajax, els
servidors de pàgines web, les bases de dades, etc. que permeten aprofitar al màxim
el canal d’Internet per tenir una comunicació rica amb l’usuari.
Un dels grans avantatges de treballar amb una interfície web és que no cal
instal·lar cap aplicació de la banda del client. Altres protocols com l’FTP o
el WebDAV requereixen instal·lar algun tipus de programari o fer cert tipus
de configuracions que poden resultar incòmodes per a usuaris no familiaritzats
amb les xarxes. En canvi, per fer funcionar els gestors d’arxius web només
cal tenir un navegador (normalment amb l’opció de Javascript activada, ja que
sovint s’utilitzen llenguatges del costat del client per dinamitzar la interacció amb
Quan parlem d’aplicacions l’usuari).
de la banda del client ens
referim a programes que cal
que l’usuari instal·li al seu
dispositiu per tal de poder
L’ús compartit de la informació és una característica molt important dels gestors
accedir a un determinat d’arxius. Compartir informació entre diversos usuaris és una funcionalitat bàsica
servei o aplicació.
en molts dels entorns de treball actuals, i com a tal ha de ser suportada pels gestors
Dins el protocol HTTP hi ha
les extensions WebDAV. d’arxius. L’absència d’aquesta característica resta punts per a qualsevol gestor
Gràcies a aquestes
extensions es poden d’arxius.
manipular i editar fitxers de
forma concurrent o
multiusuari. La majoria de gestors d’arxius web incorporen funcionalitats que en part són he-
rència dels gestors d’arxius locals i en part provenen de les necessitats imposades
per la transmissió a través de la xarxa. Les característiques més importants són:
• Manipulació d’arxius:
– Crear carpetes i arxius: permeten la creació de directoris i fitxers en

el servidor.
– Reanomenar: permeten canviar el nom dels fitxers.
– Eliminar: es poden eliminar fitxers del servidor.
– Copiar: es realitza una còpia del fitxer.
– Moure: les carpetes i els fitxers es poden moure d’una ubicació a una
altra.
– Cerca d’arxius: molts ofereixen la possibilitat de cercar fitxers
d’acord amb atributs del fitxer i fins i tot dins del propi fitxer.
– Edició de fitxers: dins del propi gestor s’obre una finestra amb el
contingut del fitxer, normalment de tipus text, del qual se’n permet
l’edició sense obrir aplicacions externes. Alguns incorporen ressaltat
de paraules segons els llenguatges de programació.
• Administració i seguretat:
– Canvi dels permisos dels fitxers i carpetes: fa possible un control

d’accés per part dels usuaris a fitxers i carpetes.
– Administració dels usuaris: permet la creació, modificació i esborrat
de comptes d’usuari.
– Càrrega/Descàrrega: aquesta funció és la que permet copiar arxius
de l’ordinador local al servidor de l’aplicació web.
– Selecció múltiple d’arxius: alguns permeten fer càrregues múltiples
d’arxius en el servidor.
• Característiques addicionals:
– Preferències d’usuari.
– Paperera de reciclatge.
– Compressió de fitxers abans de la descàrrega.
– Canviar l’idioma de la interfície.
– Sistema d’autenticació d’usuaris (Serial, LDAP, Basic HTTP auth...).
Alguns gestors d’arxius web, a més de les funcionalitats bàsiques, incorporen

funcionalitats avançades com ara: WYSIWYG és un acrònim
de what you see is what you
get, i es refereix a aquelles
aplicacions d’edició de
continguts en què l’usuari
• Reproductor d’àudio. És habitual treballar amb fitxers d’àudio, per tant és pot veure quin serà el
molt útil disposar d’un reproductor per accedir al contingut. resultat final d’un determinat
contingut a mesura que hi
treballa.
• Reproductor de vídeo. Els fitxers multimèdia els podem trobar al gestor, i
és una ajuda poder executar el vídeo sense un programa extern.
• Miniatura d’imatges. La presentació de les imatges en aquest format permet

realitzar d’un cop de vista una consulta a molta informació visual.
• Navegació dins dels arxius comprimits (ZIP, TAR...). Sense la necessitat de

descomprimir el fitxer es pot revisar el seu contingut.
• Consola del sistema (o intèrpret d’ordres). En determinades ocasions és

necessari accedir a l’intèrpret d’ordres, aquesta característica evita sortir
del gestor.
• Transferència de fitxers amb altres protocols (FTP, WebDAV...). El protocol

de transferència de fitxers pot variar.
• Arrossegar i deixar anar (drag and drop en anglès) és una acció típica que
implementen moltes aplicacions informàtiques i consisteix en la possibilitat
d’arrossegar (o transferir) objectes de la finestra d’una aplicació a una
altra aplicació o objecte receptor. Se selecciona l’objecte d’origen clicant
damunt seu i, sense deixar de prémer el botó del ratolí, s’arrossega fins a la
destinació, moment en el qual s’ha de deixar de prémer el botó.
• Visualitzar/editar el fitxer dins del gestor mateix. El fet de no requerir un

altre programa per a determinades edicions es valora força.
• Barra de navegació que indica en tot moment el camí del fitxer o directori
que s’està consultant fins a l’arrel. Aquesta característica és de gran ajuda
per situar el context del contingut.
• Editor HTML (WYSIWYG). Disposar de la característica del WYSIWG es

tradueix en un estalvi de temps. WYSIWYG és l’acrònim de la frase anglesa
“What You See Is What You Get” i es refereix al fet que el que es veu durant
l’edició del contingut es correspon al que es veurà al resultat final.
• Menús contextuals. L’accés ràpid i directe a diverses funcionalitats permet

millorar la productivitat.
• Tecles d’accés directe. Permeten augmentar la rapidesa en determinades

accions.
• Gestió de la base de dades: alguns permeten la creació de repositoris

en bases de dades com MySQL i la seva gestió. L’objectiu és poder
emmagatzemar dades del sistema i que els administradors puguin consultar-
les a través de la interfície web del gestor.
• Arquitectura de connectors: certs gestors han orientat l’arquitectura de

l’aplicació de manera que pugui ser fàcilment extensible mitjançant l’ús de
connectors que s’hi afegeixen i augmenten les seves funcionalitats.
• Control de gestió de versions: resulta de gran utilitat poder recuperar

edicions antigues de fitxers.
• Creació de categories: les categories us permetran ordenar els fitxers

depenent de les vostres necessitats d’una forma personalitzada.
• Automatització de processos: el programa facilita l’execució de processos

de forma automàtica.
• Control de tasques: permet gestionar el temps i els equips humans, de cara

a augmentar el rendiment i l’eficàcia de l’organització.
El control de gestió de
versions consisteix a • Sincronització de tasques: permet que un número controlat de tasques
emmagatzemar els canvis
que es produeixen en un s’esdevinguin de forma sincronitzada i automatitzada, alliberant de feina
determinat ítem.
al responsable de sistemes i de documentació.
• Gestió de projectes: la relació entre la documentació i els projectes (sigui

quin sigui el perfil professional) es gestiona amb facilitat.
Una vegada conegudes les característiques dels gestors d’arxius web ja es pot
donar el següent pas: avaluar la idoneïtat d’utilitzar-lo en un entorn concret. De
cara a prendre la decisió correcta, convé alinear les necessitats del client, les
possibilitats del sistema i les característiques de l’aplicació web.
1.3 Classificació de les aplicacions de gestors d’arxius web
Les primeres aplicacions gestores d’arxius web daten de l’any 2005. En aquest
moment van començar a sorgir aquests tipus d’aplicacions tant de tipus privatiu o
de pagament com oberts o amb llicències de tipus GPL.
Els gestors d’arxius web es caracteritzen de la resta d’aplicacions gestores d’arxius

remots pel fet que els clients (navegadors web) no necessiten cap programari
d’instal·lació ni de configuració. En tractar-se d’aplicacions web, tota aquesta
feina es trasllada a la banda del servidor (servidors web).
Com a clients de l’aplicació web, només cal saber com funciona la interfície i
tenir instal·lat un navegador que suporti Javascript, o VBScript. El Javascript és
L’accés des de dispositius mòbils ja
és un requeriment
suportat per la gran majoria de navegadors, però el VBScript només és suportat

per l’Internet Explorer, el navegador creador seu, Microsoft.
Les aplicacions web són fàcils de mantenir i actualitzar sense distribuir ni

instal·lar programari en milers d’ordinadors i, a més, per naturalesa (s’executen
en navegadors web) són compatibles amb múltiples plataformes.
Avui dia, en el mercat podeu trobar una gran gamma de gestors d’arxius basats en
web, però tots ells tenen en comú que implementen les funcionalitats bàsiques de
manipulació d’arxius. A més, cadascun d’ells, en funció de la tecnologia amb què
s’hagi desenvolupat, ofereix una sèrie de funcionalitats addicionals o avançades
que en conformen la diferència amb la resta.
Podem classificar les aplicacions gestores d’arxius web en dos grans grups:
• No documentals: aquest grup es caracteritza perquè la seva única funció és

mostrar els arxius, en forma de llistes o d’icones, i permetre una manipu-
lació bàsica dels fitxers. Exemples d’aquest grup són: Pydio, l’eXtplorer
(en aquest cas fins i tot existeix l’extensió per a Joomla!), o el PHPFile
Navigator2.
• Documentals: si bé aquest grup de vegades s’inclou com a component

dels gestors de continguts empresarials, es tracta de gestors d’arxius en el
sentit que permeten fer càrregues/descàrregues de fitxers al servidor i dur a
terme les tasques bàsiques de manipulació d’arxius com ara les de copiar,
moure, eliminar a la paperera de reciclatge, carregar fitxers al servidor,
etc. La característica principal és que permeten controlar tot el cicle de
vida d’elaboració d’un document electrònic, des de la creació fins a la
publicació web o compartició amb altres usuaris. Són exemples d’aquest
grup: OpenKM, Alfresco (mòdul DM), Nuxeo, o Knowledge Tree, entre
d’altres.
Document electrònic
Segons l’article 5 de la Llei
Actualment hi ha al mercat aplicacions de gestors d’arxius web molt potents, tant 56/2007, es considera document
electrònic “la informació de
privatius com lliures. En aquest mòdul farem servir el programari OpenKM, en la qualsevol naturalesa en format
electrònic arxivada en un suport
versió gratuïta, en el qual es basaran també els exemples utilitzats. OpenKM és un electrònic segons un format
determinat i susceptible
programa que ofereix moltes solucions pràctiques i esdevé una molt bona opció d’identificació i tractament
diferenciat”.
per començar a treballar amb aquest tipus de programari. Utilitzarem la versió
gratuïta, que permet fer ús de la majoria de funcionalitats.
1.4 Procés d’instal·lació d’un gestor d’arxius web: OpenKM
El programari OpenKM és una aplicació web que permet realitzar la gestió de

documents. Aquest programa disposa d’una interfície gràfica per gestionar el back-
end i permet accedir als usuaris utilitzant un navegador web.
OpenKM es pot instal·lar en sistemes operatius Linux, Mac OS X i Microsoft

Windows (és un programa multiplataforma). Necessitareu tenir instal·lat el JDK
(Java Development Kit).
La instal·lació de l’aplicació web OpenKM l’haureu d’iniciar consultant el seu

web oficial (http://www.openkm.com/) o bé obtenint el paquet instal·lador per la
vostra plataforma. Les versions de prova i lliures són:
• Openkm-6.4.14-windows-installer.exe (Windows)
• Openkm-6.4.14-linux-installer.run (Linux)
• Openkm-6.4.14-linux-x64-installer.run (Linux x64)
Per poder accedir a la descàrrega us haureu d’identificar i introduir un correu vàlid

F igu r a 1. 9 . Podeu seleccionar rebre més informació abans de realitzar la descàrrega del programa
Si és la primera vegada que treballeu amb aquest programa i voleu veure què tal és,
us recomanem utilitzar el wizard. La instal·lació amb el wizard simplifica molt
el procés d’instal·lació, i anirà parant aquest procés cada vegada que requereixi
Per saber quina versió de
Java teniu instal·lada cal alguna dada per la vostra part.
que escrigueu java
-version a l’intèrpret de
comandes. En el cas de que treballeu sobre la plataforma Microsoft Windows heu de seguir
els següents passos:
1. Accediu al web www.openkm.com.
2. Cliqueu a Descargar OpenKM.
3. Descarregueu el fitxer Openkm-6.4.14-windows-installer.exe (Windows)
4. Obriu la carpeta on s’hagi descarregat el fitxer i executeu-lo.
Si esteu treballant sobre plataformes Linux, els passos seran els següents:
1. Accediu a la web www.openkm.com.
2. Cliqueu a Descargar OpenKM amb la versió més adient (32 o 64 bits).
3. Descarregueu el fitxer Openkm-6.4.14-linux-installer.run (Linux versió 32

bits) o Openkm-6.4.14-linux-x64-installer.run (Linux x64 bits).
4. Obriu el directori on s’hagi descarregat el fitxer i executeu-lo.
Podeu utilitzar la taula 1.2 per comparar algunes de les característiques que
presenten les diferents versions d’OpenKM. L’expressió anglesa nightly
build fa referència a aquells
projectes que cada nit són
Tau l a 1 .2 . Comparació entre les versions d’OpenKM compilats automàticament
de nou a partir del sistema
Community Cloud Professional de control de canvis;
equivaldria a parlar d’un
sistema de build
Recomanat per a Entorns on la informació Empreses que tenen la Entorns empresarials automatitzat.
emmagatzemada no necessitat de gestionar que necessiten màxima
sigui crítica, ja que no eficientment la disponibilitat i fiabilitat
s’inclou assistència informació a cost reduït. on el capital intel·lectual
professional. Permet un estalvi de sigui crític.
Imprescindible disposar cost en infraestructura,
de personal tècnic personal IT
qualificat. especialitzat.
Mida del repositori Petits Petits i mitjans Tots
Usuaris Reduïts Escalable segons Sense límit

demanda
Suport remot No Per tècnics d’OpenKM. Per tècnics d’OpenKM.

Temps de resposta Temps de resposta
garantit. Resolució garantit. Resolució
d’incidències. d’incidències.
Actualitzacions. Actualitzacions.
Consells de Consells de
configuració. configuració.
Incidències Fòrum públic Resolució immediata. Resolució immediata.

Seguiment d’incidències Seguiment d’incidències
mitjançant un servei mitjançant un servei
web. Actualitzacions per web. Actualitzacions per
corregir errors. corregir errors.
Suport telefònic No Sí Sí
Suport local No Mitjançant la xarxa de Mitjançant la xarxa de

partners certificats partners certificats
d’OpenKM. d’OpenKM.
Revisions trimestrals No Sí Sí
Actualitzacions i Nightly build Verificat Verificat

manteniment
Font d’informació: http://www.openkm.com/es/producto/comparacion-entre-versiones.html
A la pàgina web d’OpenKM podreu consultar més informació de cadascuna de les

diferents versions del programa. És recomanable que dediqueu el temps necessari
a estudiar els avantatges i desavantatges de cada versió en funció de les necessitats
del client.
1.4.1 Instal·lació d’OpenKM en Windows
Hem fet servir l’assistent per instal·lar el programa en un sistema amb Windows.
El fitxer emprat és el que es mostra en la figura 1.10.
F i g ura 1 . 1 0. Fitxer d’instal·lació
Per iniciar la instal·lació, cal navegar fins a la carpeta que conté aquest fitxer i
executar-lo. Tot seguit apareixerà la finestra que es mostra en la figura 1.11.
F igu r a 1. 1 1 . Finestra de benvinguda
Aquesta finestra ens dóna la benvinguda i espera que es premi Next per continuar.
La següent finestra que apareixerà ens demana que acceptem la llicència per anar
al següent pas de la instal·lació (figura 1.12).
Figur a 1. 12. Contingut de la llicència
A continuació cal indicar el directori on s’instal·larà OpenKM (figura 1.13).
F ig ur a 1 . 13 . Directori objectiu
Tot seguit, l’assistent de la instal·lació ens informa que ha finalitzat amb èxit
(figura 1.14).
F igu r a 1. 1 4 . Instal·lació amb èxit
L’última finestra que apareix ens pregunta si es desitja veure el fitxer Readme. Es
recomana fer-ho per revisar quins són els passos a seguir per posar en marxa el
programa (figura 1.15).
F igu r a 1. 1 5 . Última finestra
Abans d’intentar accedir a l’OpenKM reviseu on s’ha instal·lat el programa i

l’script que heu d’executar per iniciar Tomcat.
1.4.2 Instal·lació d’OpenKM en Linux
La instal·lació en un sistema amb Linux es pot realitzar mitjançant la descàrrega

directa del paquet instal·lador des de la pàgina web d’OpenKM, o bé realitzar la
instal·lació des de la consola de terminal. És interessant seguir el procediment
d’instal·lació des de terminal.
Primer de tot cal descarregar el paquet d’OpenKM, amb la línia:
1 $ sudo wget http://downloads.sourceforge.net/project/openkm/6.3/openkm−6.3.0−

community−linux−x64−installer.run
A través d’aquesta comanda es descarrega un fitxer de més de 300 MB (vegeu la

figura 1.16).
Figu ra 1. 16 . Descàrrega del fitxer
Un cop descarregat el fitxer cal canviar els permisos i executar-lo:
1 $ sudo chmod +x openkm−6.3.0−community−linux−x64−installer.run

2 $ sudo ./openkm−6.3.0−community−linux−x64−installer.run
Si no hi ha cap problema, aquesta serà la resposta del sistema (figura 1.17).
Fi gur a 1 .1 7. Feedback del sistema
Tot seguit s’obrirà una finestra de benvinguda. Cliqueu a Forward per prosseguir
(figura 1.18).
Fig u ra 1 . 1 8 . Benvinguda
És necessari acceptar l’acord de la llicència (figura 1.19).
Fig u ra 1 . 1 9 . Llicència
Abans de seguir cal que decidiu quina serà la ubicació del programa i indiqueu-la
dins del quadre de text (figura 1.20).
Fi g ura 1 .20 . Directori destí
Una vegada s’hagin pres aquestes poques decisions, només caldrà prémer Forward
(figura 1.21).
Fi gura 1 .21 . Iniciar la instal·lació
Una barra de procés indicarà el percentatge de fitxers instal·lats (figura 1.22).

Fig u ra 1 . 2 2 . Estat de la instal·lació
Quan finalitzi la instal·lació apareixerà una finestra informativa (figura 1.23).
Fig u ra 1 . 2 3 . Fi de la instal·lació
És interessant que obriu el fitxer Readme. Aquest fitxer us indicarà les comandes
necessàries per gestionar el servei (figura 1.24).
Fi gura 1 .24 . Fitxer Readme
Finalment, caldrà iniciar el servei Tomcat amb la comanda:

1 $ sudo /opt/openkm−6.3.0−community/tomcat/bin/startup.sh
Si tot és correcte, al terminal apareixerà el que podeu veure a la figura 1.25.
Fig u ra 1. 25 . Servei iniciat
Ara ja és accessible el servidor web des de qualsevol navegador, tan sols escrivint
l’adreça:
1 http://localhost:8080/OpenKM
Recordeu que per defecte les dades d’accés són:

1 usuari: okmAdmin
2 contrasenya: admin
Recordeu que el servei es pot aturar des del terminal amb la comanda:
1 $ sudo /opt/openkm−6.3.0−community/tomcat/bin/shutdown.sh
1.5 Funcionalitats bàsiques del gestor d’arxius web OpenKM
La necessitat de disposar de la informació en tot moment, des de qualsevol ubi-

cació i utilitzant diferents dispositius, fa que l’ús de gestors d’arxius documentals
sigui habitual. Qualsevol organització veurà la necessitat d’incorporar a la seva
infraestructura un d’aquests programes, sobretot quan el volum d’informació
que cal gestionar és elevat. Sense cap mena de dubte la digitalització de la
documentació implica la necessitat d’aplicar un gestor.
El programari OpenKM és una aplicació web que permet realitzar la

El control de versions gestió documental d’una organització. Utilitza estàndards i tecnologies open
permet recuperar en
qualsevol moment una source.
versió anterior del
document.
Resulta de molt interès que un programa gestor d’arxius inclogui altres funciona-
litats. En el cas d’OpenKM s’inclouen control de versions, workflow, comentaris,
metadades i un llarg reguitzell d’utilitats que us resultaran molt profitoses. Això sí,
val a dir que dependrà de les vostres necessitats, o de l’organització, si finalment
utilitzeu tot el potencial d’aquest programa; però com a mínim disposareu d’una
eina molt completa que us ofereix múltiples opcions molt vàlides.
OpenKM ofereix quatre grans funcionalitats:
• Recopilació de la informació: el programa permet a l’usuari treballar

amb un ampli ventall de formats, en un entorn visual i utilitzant diferents
mecanismes i tecnologies.
• Col·laboració: la gestió de la informació la realitza tenint sempre en compte

l’existència de múltiples clients que requereixen compartir informació.
• Capitalització: és habitual requerir de més d’una aplicació per realitzar

una tasca global. OpenKM integra solucions que permeten prescindir de
programes auxiliars.
• Arquitectura: l’arquitectura de l’usuari o del servidor no és un problema

per a OpenKM. L’únic requeriment del servidor que no té alternativa és la
necessitat de disposar de Java 1.7 o superior.
1.5.1 Format de la informació que es pot gestionar
La possibilitat de treballar amb diferents formats resulta de gran utilitat. Si

l’objectiu d’un gestor de fitxers és adaptar-se a les necessitats de diferents usuaris
caldrà, sense cap dubte, que el programa gestor no posi cap impediment en funció
dels formats en què es troba la informació. Per altra banda, si el gestor de fitxers
és web, és molt important que el seu bon funcionament no depengui del navegador
client que utilitzi l’usuari.
OpenKM permet treballar utilitzant qualsevol dels navegadors web més usuals.
Això és un gran avantatge, ja que no caldrà instal·lar cap programa addicional a
l’equip de l’usuari final.
OpenKM fa servir AJAX per dissenyar la interfície d’usuari. Aquesta interfície

és molt intuïtiva i presenta moltes similituds amb escenaris habituals d’un entorn
d’usuari. Aquesta característica proporciona a l’usuari un alt grau de confiança
a l’hora de manipular les dades. Així mateix, el programa permet configurar
l’idioma. Existeixen paquets d’idiomes predefinits i si no disposeu del que
necessiteu podeu realitzar la traducció de les etiquetes mitjançant un entorn de
treball preconfigurat.
Una característica important és la possibilitat d’obtenir previsualitzacions dels

fitxers multimèdia sense necessitat de realitzar una descàrrega prèvia.
Si ho preferiu podeu utilitzar la consola del vostre equip per realitzar l’administra-
ció del programa, no només és possible des de l’entorn web. La configuració de
l’entorn de treball de l’administrador, en la seva versió gràfica, és molt intuïtiu i
permet un aprenentatge molt ràpid i clar de l’eina.
L’escriptori de treball permet arrossegar i deixar anar els documents, una caracte-
rística que s’agraeix molt ja que facilita la tasca de moure blocs d’informació.
Podeu accedir al programa des de dispositius mòbils i tauletes digitals. No només

en permet l’accés, sinó que també l’aparença resulta agradable i de fàcil ús.
Aquesta característica resulta molt útil i permet prescindir d’ordinadors.
Tractant temes de compatibilitats és necessari que tingueu en compte que

OpenKM és compatible amb els Add In de Microsoft Office des de la versió 2000
fins a la versió 2013. Els Add In són uns complements que permeten millorar
les capacitats dels programes que admeten els formats del paquet ofimàtic de
Microsoft. Podeu reforçar el vostre gestor amb:
• MS Outlook Add In: complements com Hotmail Connector, Duplicate

Email Remover o Outlook Password són exemples molt populars.
• MS Word Addin: Mind-O-Mapper, Omnipage File Converter o Free Legal

Forms són tres dels complements més ben valorats.
Disseny de la interfície gràfica per
mòbils
• MS Excel Add In: Analysis Toolpak, Solver o PowerPivot són utilitzades
en el món empresarial.
• MS PowerPoint Add In: Web Video Player, VisualBee o Tick Tock Clock
són utilitats que permetran millorar la potència del vostre gestor.
La compatibilitat amb OpenOffice AddOn és possible des de la versió 3.2. Ope-

nOffice AddOn proveeix d’extensions que suposen un augment de les possibilitats
dels diferents mòduls del paquet OpenOffice.
OpenKM permet treballar amb el programa de reconeixement òptic (OCR). Des

del gestor de fitxers web podreu escanejar i emmagatzemar documents en format
paper. És capaç de llegir binaris, escala de grisos o imatges en color. Realitza
extracció de text, amb suport de diccionaris anglès, francès, italià, alemany,
espanyol i holandès. També és capaç de realitzar recerques de dades en format
TIFF.
L’OpenKM us permet capturar correu electrònic utilitzant servidors POP3 i IMAP.

És possible realitzar la configuració del compte d’usuari, importar text, HTML i
adjunts. Una de les característiques més potents és que també realitza captura de
metadades. Així mateix, es pot configurar la importació automàtica i l’ordenació
per filtres.
Si treballeu amb Google Contacts us permet sincronitzar amb aquest servei, per
tant si teniu els usuaris vinculats a Google Contacts no caldrà que en torneu a
introduir totes les dades a l’OpenKM. També és capaç de realitzar importacions
des de fitxers amb formats EML i MSG.
Una dada curiosa és que OpenKM pot treballar amb codis de barres lineals. Els
formats suportats són els següents (és extensible a altres formats):
• Codabar
• Code 39
• Code 93
• Code 128
• EAN-8 i EAN-13
• ITF
• UPC-A i UPC-E
• RSS-14.
• RSS Expanded
També suporta diferents formats de codis de barres de dues dimensions (és

extensible a altres formats):
• Data Matrix
• PDF 417
• QR Code
• Aztec
Una de les eines més potents d’OpenKM és la relacionada amb l’antivirus; per
tal de garantir la seguretat de la informació realitza l’escanejat del documents que
s’hi afegeixen.
OpenKM incorpora Desktop Sync. Aquest sincronitza automàticament, o si ho

preferiu, de manera manual, les carpetes d’OpenKM i l’escriptori del vostre
ordinador. També és capaç d’importar carpetes des d’un altre ordinador.
Una característica que moltes empreses agrairan és la possibilitat de treballar amb

factura electrònica, i és que OpernKM extreu factures en format XML, valida
factures emprant signatura digital, descarrega factures electròniques en format
PDF i pot enviar notificacions.
Aquest gestor de fitxers web incorpora un client de signatura electrònica que

habilita la signatura electrònica de documents.
Sense sortir del programa existeix la possibilitat, mitjançant l’Scanner Client, de

capturar imatges des d’un escàner, realitzar conversions de documents a format
PDF, establir valors en les metadades quan afegeix els documents a OpenKM,
afegir i eliminar imatges en PDF, i comprimir a PDF group 4.
OpenKM inclou també la possibilitat de treballar amb Wordpress. Des del

programa es poden publicar i editar continguts (tant text com imatges) i afegir
metadades a la publicació.
1.5.2 Treball col·laboratiu
La gestió de documents de forma col·laborativa en un programa com OpenKM és

molt important. Les necessitats actuals de les empreses solen implicar el treball
en equip, i en conseqüència l’ús compartit de recursos. Un gestor documental ha
de tenir la capacitat de manipular sota el mateix entorn la documentació privada
de cada usuari, i la documentació en comú d’un equip de treball.
És important conèixer les característiques reals en l’àmbit de la col·laboració

que ofereix OpenKM. A continuació es mostren algunes de les possibilitats més
importants que el programa ofereix: ZIP és un format de
compressió desenvolupat
per Phillip Walter Katz
• Pujada massiva de documents utilitzant fitxers ZIP
• Descàrrega de carpetes com fitxers ZIP
• Bloqueig/desbloqueig de documents
• Gestió de favorits
• Seleccionar carpeta d’inici per defecte

• Suport de plantilles de documents
• Documents personals per a cada usuari
• Paperera de reciclatge per a cada usuari
• Notificació d’esdeveniments per correu electrònic
• Enviament de l’adreça web del document per correu electrònic
• Enviament de documents per correu electrònic
• Notes en els documents
• Missatgeria
• Servei de comunicació
• Extracció de metadades dels documents
• Identificador únic del document
• Etiquetes d’usuari
• Etiquetes del tesaurus
• Núvol d’etiquetes
• Classificació per categories
• Fòrums
• Generació de documents amb assistent
• Marca d’aigua en documents
• Catalogació automàtica configurable
• Extracció intel·ligent de paraules clau
• Operacions amb múltiples documents de forma simultània
• Transformador de text a àudio
• Expiració de documents
El previsualitzador de documents és un estri emprat usualment, ja que permet

evitar la descàrrega en local de documentació errònia. La previsualització verifica
que el fitxer seleccionat és el que interessa. Imagineu que necessitéssiu accedir
a una determinada informació i dubtéssiu del nom del fitxer que conté aquestes
dades. L’opció clàssica seria descarregar el fitxer on sospitem que hi ha allò
que busquem i comprovar-ne el contingut; en cas de no haver encertat hauríem
de reiniciar el procés... i així fins a tenir èxit. En canvi, la previsualització ens
permet “donar un cop d’ull” al contingut i determinar si és el que volem abans de
realitzar cap descàrrega. No penseu únicament en l’entorn de treball que utilitza
un ordinador i una connexió a la xarxa amb gran ample de banda, sinó també en
l’usuari que només pot utilitzar un smartphone i té poca cobertura de dades.
No tots els formats es poden previsualitzar; la versió actual del programa permet
fitxers dels tipus següents:
• AutoCAD
• MS Office
• Open Office
• PDF
• Vídeo i so
• Imatges
• DICOM
El control de versions de la documentació emmagatzemada al repositori facilita

la recuperació de moltes dades de forma clara i precisa. En el treball col·laboratiu
impera la necessitat d’usar algun mètode de control de versions. Quan dos o més
usuaris accedeixen a la mateixa font de dades i hi poden introduir canvis, es fa
necessària la presència d’un àrbitre, d’un gestor que faciliti l’ordre i les prioritats,
i informi dels canvis; si a més ens permet accedir a versions anteriors del mateix
contingut i als comentaris de cada revisió, serà perfecte.
El control de versions que realitza OpenKM presenta les següents característiques:
• Utilitza el model check-in/check-out
• Permet afegir comentaris a les versions
• Permet accedir a versions anteriors del document
• Permet restaurar versions anteriors del document
• Permet compactar l’històric per alliberar espai
L’entorn de treball d’OpenKM s’organitza en un plafó. La idea és integrar en una

única finestra totes les eines necessàries per al treball. De la mateixa manera que
en el món físic organitzem una zona de treball o un espai d’estudi amb tot allò que
necessitem abans de començar a treballar, aquest gestor permet que cada usuari
endreci el seu entorn de treball segons les seves necessitats. Per fer-ho compta
amb les següents característiques:
• Vista d’usuari
• Vista general
• Novetats d’usuaris
• Vista de workflow
• Vista de correu electrònic
• Núvol de documents, recerca i navegació
• Servei RSS
• Integració amb OpenMeetings
El treball en equip implica l’enviament de documentació entre usuaris. Aquesta

documentació ha de ser visualitzada, revisada, aprovada, etc. per alguna de les
parts. Com solen actuar els usuaris que no fan servir gestors de fitxers? És força
usual enviar un correu demanant l’atenció necessària i adjuntant un fitxer que cal
tractar, però això implica una gran inversió de temps i els resultats sovint no són
els esperats. Aquí és on prenen protagonisme els workflows o fluxes de treball.
Un workflow és un mecanisme que permet tenir control sobre el procés que segueix
un document.
Cal destacar les possibilitats que ofereix OpenKM per treballar amb fluxos de
treball:
• Suporta workflows paral·lels i en sèrie
• Permet assignar tasques a grups o usuaris
• Permet monitoritzar tasques workflow
• Habilita la notificació de missatges de correu, configurable
• Permet iniciar un workflow automàticament
A nivell d’organització de treball és de gran utilitat coordinar tasques que estiguin

relacionades amb el gestor. En aquest sentit, OpenKM ofereix la possibilitat de
controlar la gestió de tasques sense dependre d’un programa auxiliar. OpenKM
permet:
• Crear tasques
• Assignar, controlar i completar tasques
• Gestionar estats i projectes relacionats amb tasques
• Configurar notificacions de missatges de correus electrònics
Una altra eina d’ús habitual en les organitzacions és el calendari. OpenKM inclou
un calendari que organitza la gestió del temps vinculada a les tasques que es
programen (vegeu la figura 1.26). Des del calendari es pot:
• Crear tasques
• Moure o modificar la durada de les tasques
• Realitzar vistes per mes, setmana o dia

Figur a 1. 26. Vista del calendari
Una vegada estudiat el perfil col·laboratiu d’OpenKM cal avaluar les seves
capacitats i comprovar que encaixin amb les necessitats de l’usuari.
1.5.3 Capitalització del programari
Una de les situacions que tot administrador de sistemes defuig és la de tenir molts
programes diferents per realitzar la seva tasca.
El concepte de capitalitzar s’aplica quan un únic programa té reunides totes

les solucions necessàries per desenvolupar una tasca, sense la necessitat
d’utilitzar altres programes.
Un gestor d’arxius web ha de proveir els programes o les funcionalitats que un

usuari necessiti per usar i manipular els continguts. Si pensem en una biblioteca
física, en l’espai ocupat per prestatgeries plenes de llibres, és fàcil que aparegui
en aquesta imatge la persona encarregada del manteniment i actualització del fons,
l’arxivador de fitxes, l’índex de continguts, etcètera. De la mateixa manera que
en una biblioteca no hi ha llibres i prou, sinó que hi ha tot un seguit de processos
i eines que ens faciliten la consulta a un catàleg, un gestor d’arxius web, com és
OpenKM, ha de proveir eines afegides.
Una de les eines més importants és el motor de recerca de documents. Al marge

que la informació estigui ben ordenada, cal disposar d’un mecanisme que permeti
realitzar una recerca ràpida i efectiva; en aquest sentit, OpenKM ofereix: Paraula clau: text que
relaciona una paraula amb
un contingut. Accelera el
resultat de recerca.
• Recerca de documents per contingut, paraules clau, data de modificació,
autor i tipus.
• Indexació automàtica els documents.
• Recerca per sinònims.

• Recerques ordenades per rellevància.
• Recerca utilitzant propietats de grup.
• Emmagatzemar consultes.
• Recerques avançades utilitzant XPATH i SQL.
• Novetats d’usuari.
• Recerques a partir d’una estructura jeràrquica de directoris.
• Seleccionar els objectes de recerca, carpetes, correus electrònics o docu-

ments.
• Utilitzar els tags (etiquetes) d’usuari per localitzar documents.
• Utilitzar metadades per localitzar documents.
• Opcions de recerca simple i avançada.
• Ordenar els resultats segons diversos criteris.
Stemming és un algoritme • Opcions de descàrrega.

que permet reduir una
paraula a la seva arrel. Un
exemple el podeu trobar en • Suport per stemming, stop words i sinònims.
el següent enllaç de
Snowball:
http://snowball.tartarus.org/ • Servei push de novetats (basat en les consultes d’usuari).
algorithms/spanish/stemmer.
html
En algunes ocasions fem la descripció d’un objecte utilitzant altres objectes.

OpenKM utilitza metadades en les propietats de grup, la qual cosa permet realitzar
consultes amb un gran ventall de possibilitats.
Les metadades són dades que descriuen altres dades.
En relació amb l’ús de metadades, OpenKM:
• Pot afegir les seves propietats de grups al sistema (metadades).
• Admet diferents formats (inputs, llistes simples, etcètera).
• Permet la internacionalització dels valors de les metadades.
OpenKM inclou l’ús de tesaurus, que és una llista de paraules que representen
conceptes. Cada vegada més és habitual afegir aquesta eina en els gestors, ja que
facilita la vinculació de les dades.
El tesaurus d’OpenKM destaca per les següents característiques:
• Vista dels documents a l’estructura del tesaurus
• Extracció automàtica de paraules clau
• Mòdul d’entrenament
La seguretat és un dels aspectes més importants que ha de cobrir amb excel·lència

un bon gestor de fitxers web. Internet és clau en l’elecció dels sistemes de seguretat
utilitzats a OpenKM, i això vol dir que les expectatives de protecció són molt altes.
La seguretat en OpenKM cobreix moltes capes: DBMS són les sigles de
Sistema de Gestió de Bases
de Dades. Poden ser
jeràrquics, en xarxa,
• Plug-in per autentificació basat en JAAS relacionals o orientats a
objectes.
• Suport per a LDAP, Active Directory, DBMS, etcètera
• Granular ACLs
• Flexibilitat a l’opció d’herència de les ACLs
• Seguretat per usuari i rols
• Permisos en carpetes i documents
• Enregistrament de totes les operacions
• Suport per comunicacions SSL
• Encriptació i desencriptació de documents
• Signatura electrònica
L’administració del programa juga un paper molt important en el procés de decisió

del gestor a utilitzar. Un administrador busca un programa robust, segur, que
compleixi els requisits del client i que sigui fàcil d’administrar. OpenKM no
només és fàcil d’administrar, sinó que en un entorn web permet administrar
pràcticament la totalitat del programa, en la majoria dels casos sense necessitat
d’haver d’accedir al terminal.
El següent llistat mostra algunes de les tasques que pot realitzar un administrador:
• Mostrar els usuaris connectats
• Desblocar i cancel·lar documents editats
• Oferir una vista del repositori
• Recerques avançades
• Diari d’activitat
• Importació d’informació des del sistema de fitxers
• Exportar el repositori al sistema de fitxers
• Administració del workflow
• Gestió d’informes
• Importació de tesaurus
• Vista dels paràmetres de configuració

• Quotes d’usuari
• Perfils d’usuari
• Programador de tasques
• Tasques intel·ligents
• Macros
Hi ha característiques que OpenKM no pot realitzar directament, o bé programes

que són molt útils però no estan inclosos en el paquet d’instal·lació. Això no és
problema, ja que OpenKM permet la integració d’altres programes. Alguns dels
que es poden integrar a OpenKM són:
• Kofax
• Abby Flexicapture
• Flexibar
• 2D barcode reader
• Active Directory
• LDAP
• CAS
• Canon IW DS
• WebServices
• CMIS
• Rest
• Sincronització automàtica amb escriptoris
En funció de les necessitats i característiques del client caldrà integrar algunes

solucions externes. En definitiva es tracta d’ampliar al camp de treball del gestor.
1.5.4 Arquitectura de l’aplicació
L’arquitectura client-servidor
és aquella on hi ha un OpenKM es basa en una arquitectura client-servidor. El client utilitza qualsevol
extrem (client) que demana
un recurs o un servei a un dels navegadors més habituals. La part de servidor requereix:
proveïdor (servidor).
• Java 1.7 o superior
• Apache Tomcat
• GNU/Linux, Unix, Windows 2000, Windows XP, Windows 2003, Windows

Vista
• Repositori emmagatzemat en el sistema de fitxers, MySQL, PostgreSQL,

Oracle, MS SQL Server
OpenKM permet que l’administrador realitzi una configuració avançada per tal
d’acabar de proveir al gestor d’arxius característiques extra. Per exemple, una de
les configuracions avançades més utilitzades és la instància addicional d’OpenKM
configurada com a mirror server.
Un mirror server és una estratègia d’emmagatzematge de dades molt efectiva, però

d’elevat cost. Consisteix a duplicar la informació, fet que garanteix l’accés a les
dades en el supòsit que el principal servidor patís una fallida.
1.5.5 Organització per nivells d’OpenKM
OpenKM està organitzat en nivells. Aquests nivells, o capes, es comuniquen amb

els seus nivells veïns i els envien i en reben informació.
La funcionalitat dels nivells, com en tota aplicació, és la de permetre repartir

responsabilitats en les tasques per tal d’oferir una modularitat en l’aplicació
que permeti reutilitzar, ampliar o modificar cadascuna de les parts quan sigui
necessari, amb el menor impacte possible sobre la resta de l’aplicació i garantint
una estabilitat estructural.
Típicament, les aplicacions web es creen sobre arquitectures de només tres nivells,
en les quals es defineixen les responsabilitats següents:
• Nivell de presentació: defineix la manera com es mostrarà la informació

de cara a l’usuari. Gestiona els components de la interfície d’usuari.
• Nivell lògic o de domini: aquesta capa coordina la informació entre la capa

superior i la inferior, i pren decisions lògiques.
• Nivell físic o de dades: la informació s’emmagatzema persistentment en la

base de dades o en el sistema de fitxers.
Les aplicacions web que proporcionen un gran nombre de funcionalitats, i que

tenen com a objectiu arribar a un gran nombre d’usuaris, són molt més complexes
i necessiten tenir una arquitectura en més de tres nivells que permetin graus
d’abstracció més profunds.
La distribució en capes permet oferir al sistema una escalabilitat, administració

i flexibilitat fàcils. En el cas que calgui afegir molts més usuaris i ampliar les
funcionalitats, serà possible fer-ho sense patir gaires complicacions causades per
una arquitectura tancada.
OpenKM està dissenyat sobre una arquitectura multinivell. Aquesta s’organitza

en quatre grans nivell on podeu identificar deu mòduls molt importants:
• Interfície d’usuari: els usuaris accedeixen a l’aplicació mitjançant un

navegador. La interfície d’usuari Web 2.0 està fonamentada en GWT
i permet treballar des dels navegadors Firefox, Internet Explorer, Safari,
Chromium, Google Chrome i les últimes versions d’Opera. L’accés des
jQuery Mobile és una interfície
de dispositius mòbils és possible, ja que la interfície d’usuari està basada en
d’usuari basada en HTML5
JQuery Mobile, els AddIns per Microsoft Office i el protocol WevDAV.
• API: el gestor implementa el protocol CMIS, que permet utilitzar protocols

web per interconnectar diferents sistemes de gestió documental i repositoris.
• Capa de seguretat: OpenKM utilitza Spring Security per centralitzar la

gestió dels accessos permesos als usuaris en funció de les credencials.
L’autenticació es pot realitzar mitjançant un servei CAS, LDAP o una base
de dades.
• Core: tots els tipus d’objectes que s’emmagatzemen al repositori són

gestionats i processats de forma centralitzada.
• Motor de workflow: el motor utilitzat és el JBPM. OpenKM està implemen-

tat amb l’arquitectura Java EE, la qual cosa possibilita connectar de forma
transparent amb altres motors de workflow.
• Emmagatzematge: el mapeig de dades OMR es realitza mitjançant Hiber-

nate. El programa suporta PostgreSQL, MySQL, Oracle, MS SQL Server,
DB2, etcètera.
• Motor de recerca: el gestor utilitza Lucene. Tots els objectes amb els quals
treballa OpenKM són indexats per aquest motor, exceptuant els objectes
binaris, que seran afegits a una cua d’indexació.
• Catalogació i metadades: OpenKM té la capacitat de lectura i processament

dels formats de codis de barres. OpenKM s’integra amb diversos motors
OCR.
• Antivirus: el motor d’antivirus processa tots els objectes binaris. OpenKM

pot integrar-se amb la majoria d’antivirus.
• Estadístiques i informes: OpenKm genera informes amb estadístiques sobre

l’ús dels continguts allotjats i de l’estat del sistema.
1.5.6 Entorns d’ús del gestor d’arxius OpenKM
L’elecció de l’entorn de programari on instal·larem i utilitzarem l’OpenKM no

és gaire problemàtica. Des del punt de vista del client OpenKM l’únic que es
necessita és un navegador web dels més habituals. Pel que fa al servidor que
allotjarà el gestor, requereix Java (versió 1.7 o superior) i Apache Tomcat.
Existeixen distribucions d’OpenKM per a:

• GNU/Linux
• Unix
• Windows 2000
• Windows XP
• Windows 2003
• Windows Vista
• Windows 7
• MacOS
El repositori que utilitza el programa s’emmagatzemarà en un sistema de fitxers

que pot ser:
• MySQL
• PostgreSQL
• Oracle
• MS SQL Server
És molt important saber quina versió d’OpenKM necessiteu i quin serà el volum
d’informació que s’haurà de gestionar. Depenent d’aquestes dues variables els
requisits mínims de maquinari seran els que es mostren a la taula 1.3.
Tau l a 1 .3 . Requeriments segons instal·lació
Volum d’usuaris Capacitat del RAM Cores Disc dur

repositori
<25 10 - 60 GB 1 GB – 2 GB 1 - 2 Cores 30 – 180 GB SATA

(1.86 GHz)
>50 >150 GB 2 GB – 4 GB 2 - 4 Cores 250 – 500 GB

(2.2 GHz) SATA
Entre 100 i 300 >500 GB 8 GB – 16 GB 8 - 16 Cores 1 TB SATA-2

(3.6 GHz)
>300 >2 TB >16 GB >16 Cores (3.6 SAN

Ghz)
<50 Entre 20 i 50 GB 2 GB – 4 GB 2 - 4 Cores (1.86 60 - 150 SATA

Ghz)
S’aplicarà una o altra configuració depenent de les característiques de l’entorn.
Cal destacar que l’última opció és possiblement la més aconsellable. Es tracta

d’instal·lar en una màquina virtual el programa, sempre que no s’excedeixin els
50 usuaris i el repositori gestioni un volum de dades inferior a 50 GB.
Elecció del SO
El fet d’emprar el gestor d’arxius web OpenKM no serà decisori de cara a escollir
un sistema operatiu, ja que aquest paquet funciona perfectament en els sistemes
operatius més comuns.
La part de client d’OpenKM és accessible des del navegador web. En dispositius

mòbils, l’accés des de les plataformes més habituals es realitza sense problemes.
La part servidor del programa presenta diferents paquets en funció del sistema
operatiu ja instal·lat, sigui aquest de Microsoft, UNIX, GNU/Linux o MacOS.
Elecció del sistema gestor de bases de dades relacional
OpenKM treballa amb una base de dades incrustada (embedded). Utilitza

Hibernate per mapejar dades OMR, i suporta bases de dades relacionals com
PostgreSQL, MySQL, Oracle, MS SQL Server o DB2.
Serà l’estructura de sistemes ja implantada pel client la que decideixi quin sistema
gestor de base de dades relacional cal utilitzar, ja que OpenKM s’adaptarà al
sistema establert.
Elecció del servidor d’aplicacions web
OpenKM utilitza el servidor d’aplicacions web Tomcat. No es pot triar un paquet

diferent. Es recomana la instal·lació de la versió de Tomcat que acompanya
l’instal·lador del gestor d’arxius web. És possible aprofitar una preinstal·lació de
Tomcat al sistema i fer conviure OpenKM amb altres aplicacions que comparteixin
el servidor d’aplicacions web (vegeu la figura figura 1.27).
F igu r a 1. 2 7 . Contingut del directori on s’instal·la Tomcat
Si es dóna el cas que en el vostre sistema teniu OpenKM i una altra aplicació amb
Tomcat, necessitareu editar el fitxer C:\openkm-6.4.14\tomcat\conf.xml i
modificar els ports 8005, 8080 i 8009. Recordeu-vos de documentar tots els
canvis!
Piles de programari suportades per OpenKM
El programa OpenKM organitza els seus paquets instal·ladors en quatre grups:
• Instal·ladors
• Entorn de desenvolupament
• Utilitats
• Instal·lacions
Els instal·ladors per a la versió de prova Professional són:
• Openkm-6.4.14-linux-installer.run (Linux)
Els instal·ladors per a la versió Community són:
• Openkm-6.3.0-community-windows-installer.exe (Windows)
• Openkm-6.3.0-community-linux-installer.run (Linux)
• Openkm-6.3.0-community-linux-x64-installer.run (Linux x64)
• Openkm-6.3.0-tomcat-bundle.zip (totes les plataformes)
• Openkm-6.3.0-war.zip (totes les plataformes)
L’entorn de desenvolupament només pot ser Openkm-6.3-community-portable-

dev-1.0 (Windows).
Les utilitats poden ser:
• OpenKMAddIn-6.1.1 (Windows)
• OpenKM Digital Signature Client 1.0.2 (Windows)
• OpenKM Scanner 1.0.4 (Windows)
• OpenKM Desktop Sync 1.1.1 for OpenKM 6.2.zip (totes les plataformes)
• OpenKM Joomla Explorer (totes les plataformes)
• Bonita-OpenKM-connector
Pel que fa a les instal·lacions amb assistent, tant la versió Professional Trial com
la versió Community disposen d’un assistent d’instal·lació.
Abans de decidir quina versió o entorn hem d’utilitzar, és imprescindible realitzar

un estudi de la situació, de les necessitats i de les característiques del sistema.
1.5.7 Instal·lació del gestor d’arxius documentals
OpenKM disposa d’un paquet d’instal·lació guiada. Per utilitzar-lo cal descarregar
el paquet (versió Windows):
1 openkm−6.4.14−windows−installer.exe
Aquest paquet també instal·larà el JDK (Java developement kit) a la mateixa

carpeta on s’hagi instal·lat l’OpenKM.
Si es requereix fer una instal·lació no atesa heu de tenir en compte dos requisits:
• Tenir instal·lat OpenKM-Tomcat
• Tenir instal·lat Java JDK 1.7 o superior
En sistemes Microsoft Windows, descarregueu de la pàgina web

www.openkm.com i descomprimiu el fitxer OpenKM-6.x.x-community-tomcat-
bundle.zip.
En distribucions Linux, descarregueu de la pàgina web www.openkm.com i

executeu: $ unzip OpenKM-6.x.x-community-tomcat-bundle.zip.
En sistemes MacOS X, descarregueu de la pàgina web www.openkm.com i

executeu la línia: $ unzip OpenKM-6.x.x-community-tomcat-bundle.zip
En aquest mòdul hem optat per utilitzar dues piles de programari de la versió
Professional Trial:
Hem decidit utilitzar la plataforma Windows i la distribució Ubuntu per tal

de comparar el programa des de dues vessants: la de l’usuari final i la de
l’administrador del sistema.
2. Configuració i ús del servei de gestió d’arxius web
Una vegada instal·lada l’aplicació de gestió d’arxius web, cal configurar l’entorn
per tal d’adaptar-lo a les necessitats de l’usuari final i segons les característiques
de l’estructura informàtica de l’entitat.
Per realitzar una correcta configuració caldrà realitzar un treball previ identificant
les necessitats de l’usuari, així com decidir la millor disposició de la informació,
el seu accés i el seu manteniment. La gestió dels usuaris i rols també és una part
important a treballar.
L’accés al programa es pot realitzar amb dos perfils bàsics: el d’administrador

i el d’usuari. L’accés en mode administrador permet gestionar el programa i
configurar-lo segons les necessitats corporatives. L’accés en mode usuari permet
utilitzar el programa modelat amb les configuracions realitzades per l’administra-
dor.
Per poder accedir al programa primer cal iniciar Tomcat. Si esteu treballant amb
un sistema Microsoft ho podeu fer de dues maneres: %CATALINA_HOME% és la ruta
on s’ha instal·lat Tomcat.
• Escriviu la línia %CATALINA_HOME%\bin\startup.bat.
• Escriviu la línia %CATALINA_HOME%\bin\catalina.bat start.
Per iniciar Tomcat en una distribució Linux ho podeu fer de dues maneres:
• Escriviu la línia %CATALINA_HOME%/bin/startup.sh.
• Escriviu la línia %CATALINA_HOME%/bin/catalina.sh start.
Un cop iniciat el servei, podeu obrir un navegador web i escriure la següent URL: Únicament els usuaris amb
rol administrador
(ROLE_ADMIN) poden
1 http://localhost:8080/OpenKM/ accedir a configurar el
programa.
Us apareixerà un quadre on es demana un usuari i una contrasenya. En aquest cas,

i davant la necessitat d’entrar amb perfil d’administrador, s’utilitzaran unes dades
generades per defecte:
1 usuari: okmAdmin
Abans de prosseguir fixeu-vos que amb aquesta primera pantalla de validació

podeu canviar l’idioma si ho necessiteu (vegeu la figura 2.1).
F igu r a 2. 1 . Idiomes a OpenKM
OpenKm permet instal·lar paquets d’idiomes.
A la figura 3.1 podeu veure que quan accediu al programa us apareixerà un

escriptori on s’organitza la informació en cinc grans blocs:
• Barra de Menú
• Barra d’eines
• Taxonomia
• Gestor de documents
• Propietats del document i de la carpeta
Cada bloc és important, ja que representa tasques concretes per treballar amb
els continguts. Cal realitzar un estudi de cadascun d’aquests blocs per acabar de
comprendre el funcionament d’aquest gestor.
Figur a 2. 2. Entorn de treball
L’entorn de treball és clar i precís.
Aquest és l’aspecte que presenta inicialment el perfil d’administrador. L’usuari

no administrador no tindrà accés a tot aquest entorn. Totes les accions de
configuració que es realitzin sobre aquest entorn gràfic modificaran fitxers de
configuració. Si es prefereix, es pot treballar directament sobre els fitxers i no
utilitzar l’entorn gràfic d’administració.
2.1 Primeres passes de la configuració
Una de les tasques bàsiques de l’administrador de sistemes és adaptar el progra-

mari a les necessitats del client. OpenKM ofereix dues possibilitats per configurar
el programa una vegada instal·lat:
• Editar fitxers de configuració.
• Utilitzar l’entorn gràfic per configurar el programa.
Es recomana utilitzar les dues vies. Hi ha canvis de configuració que exigiran

editar directament fitxers i, per altra banda, determinades accions són molt
més eficients si es realitzen des d’un entorn gràfic. No cal dir que per dur a
terme aquesta tasca tan important és imprescindible que el sistema de fitxers
estigui correctament estructurat i l’entorn gràfic sigui descriptiu i intuïtiu; ambdós
aspectes són proveïts per OpenKM.
2.1.1 Estructura de fitxers d’un gestor d’arxius web: OpenKM
Quan s’instal·la un gestor d’arxius web s’estructuren totes les dades en directoris.
És necessari conèixer la disposició i continguts d’aquests directoris si s’han
de realitzar determinades configuracions. Igualment és necessari tenir certs

coneixements de gestió i administració de fitxers.
Generalment, les dues maneres que tenim de rebre una aplicació web són:
• Comprimida en un arxiu seguint el format WAR: aquest tipus de format

s’utilitza per distribuir aplicacions basades en Java que segueixen les
especificacions Java Platform de Sun Microsystems. Els arxius que es fan
servir en aquest tipus d’aplicacions són arxius escrits en JSP, classes de Java,
arxius XML, pàgines estàtiques HTML, etc. Que totes juntes conformen
l’aplicació en ella mateixa.
Java Platform és l’antic
J2EE, i es tracta d’una de
les plataformes de
programació de Java que
permet executar programari
en un servidor d’aplicacions. • Comprimida en un arxiu amb format ZIP o TAR.GZ: aquest tipus és
el més comú per a aplicacions desenvolupades per a servidors web (com
Apache Web Server) amb llenguatge script de servidor PHP.
Aneu amb compte...
... de no confondre l’Apache amb
el Tomcat. Quan es parla
d’Apache ens estem referint al
OpenKm és un programa desenvolupat sobre la tecnologia Java J2EE, especifica-
servidor de pàgines web (o
servidor HTTP) Apache, i quan
ció que permet una compatibilitat molt elevada.
es parla de Tomcat ens estem
referint al servidor d’aplicacions
web escrites en llenguatge Java
L’aplicació està ben empaquetada en un arxiu en format WAR (de l’anglès web
Apache Tomcat, que també
incorpora un servidor de pàgines
application archive, o arxiu d’aplicació web) i permet ser instal·lada en qualsevol
web. Tot i així, es recomana servidor d’aplicacions que compleixi el J2EE, com és el cas d’Apache Tomcat,
utilitzar el Tomcat només per fer
servir aplicacions web, i utilitzar que a més pot fer també la funció de servidor web.
l’Apache per a les pàgines web.
Els llenguatges script de

Els arxius WAR estan organitzats de manera específica seguint una estructura
servidor... jeràrquica. Realment, si disposem d’un programa de compressió de fitxers de
...són llenguatges de
programació que permeten crear ben segur podrem obrir el fitxer i veure que el seu contingut no és més que fitxers
pàgines web dinàmiques capaces
de comunicar-se amb el servidor, i directoris comprimits en un únic fitxer.
en el moment que la pàgina és
sol·licitada, per obtenir
informació actualitzada (per El nom de l’arxiu WAR normalment correspon al nom de la carpeta on s’ubicarà
exemple, informació allotjada en
una base de dades) o algun l’aplicació, i el contingut de les carpetes més significatives és:
servei ofert pel servidor mateix
(per exemple, enviar un correu
electrònic). Exemples més
comuns de llenguatges script de • /: és l’arrel principal de l’arxiu a partir de la qual pengen la resta d’arxius
servidor són: ASP (privatiu),
JSP o PHP. (pàgines escrites amb JSP, pàgines web estàtiques, estils, scripts, animaci-
ons Flash, i altres recursos) i carpetes.
• /WEB-INF: aquesta carpeta conté l’arxiu web.xml, que defineix l’estructu-

ra de l’aplicació web (defineix tot allò de l’aplicació que necessita saber el
servidor per fer-la funcionar), i altres carpetes com ara:
– /classes: que conté les classes necessàries per fer funcionar l’aplicació
en el servidor.
– /lib: conté llibreries de Java per poder executar l’aplicació.
D’aquesta informació es pot extreure que els arxius que ens permetran “jugar” amb
els paràmetres de l’aplicació estaran ubicats a la carpeta /WEB-INF/classes.
En la figura 3.2 podeu veure el contingut complet de la carpeta WEB-INF:

Figur a 2. 3. WEB-INF
Contingut de la carpeta WEB-INF
El servidor Tomcat situa tots els seus fitxers dins de la carpeta \tomcat que el
programa d’instal·lació ha creat a:
1 C:\openkm−6.4.14\tomcat
Les carpetes més importants són:
• /bin: aquí podem trobar els arxius necessaris per iniciar / aturar el servidor
d’aplicació, scripts que permeten automatitzar els processos d’inicialització
i aturada del servei, i altres arxius executables.
• /conf: arxius de configuració del servidor. Especialment interessants són

els arxius server.xml, que ens permeten modificar paràmetres de configu-
ració de Tomcat com el número de port, directori on són les aplicacions,
propietats de l’amfitrió (host), etc., i l’arxiu web.xml que especifica els
paràmetres comuns per instal·lar les aplicacions web a Tomcat.
Aneu amb compte de no
confondre el terme en
anglès host, amb la paraula
en català hoste. La paraula
• /webapps: directori on s’han d’instal·lar les aplicacions web (arxius host, en el context de
xarxes, es refereix a
en format WAR). Aquest directori representarà el directori arrel de qualsevol dispositiu final
com un ordinador, un telèfon
les aplicacions. Qualsevol recurs que requereixi l’aplicació penjarà IP, una impressora, una
càmera, etc., que pot actuar
d’aquest node. Si establim una analogia entre el camí d’aquesta carpeta com a servidor (ofereix
serveis) o com a client
en el nostre servidor i l’adreça web que escriurem quan vulguem (utilitza serveis del servidor).
En un context lingüístic, la
accedir a una pàgina web d’una aplicació, podem veure que les paraula hoste es refereix a
convidat, que traduït a
peces “encaixen”: carpeta d’instal·lació del servidor en local (arrel l’anglès correspon a la
paraula guest.
de les aplicacions web): C:\openkm-6.4.14\tomcat\webapps.
Adreça web que accedeix a la pàgina principal de l’aplicació:
http://[nom_servidor_a_Internet] / [nom_aplicació] /
[web_principal, per exemple: index.html, inici.jsp, etc.]. L’equivalent
a accedir en local d’aquest recurs seria (encaixant les dues
parts):C:\openkm-6.4.14\tomcat\webapps\[nom_aplicació]
\[web_principal, per exemple: index.html, inici.jsp,

etc.].
Qualsevol recurs (imatge, document de text, etc.) que utilitzi una pàgina web
allotjada en el servidor, es podrà referenciar sempre indicant el camí de tres
maneres diferents:
• Relativa al servidor: des de l’arrel del servidor passant

per les subcarpetes fins on està ubicat l’arxiu. Per exemple:
/carpeta1/carpeta2/nom_arxiu.extensio
• Relativa a la pàgina web: des de l’arrel on està ubicada la pàgi-

na web passant per les subcarpetes fins on està l’arxiu. Per exemple:
carpeta1/carpeta2/arxiu.extensio
• Absoluta: s’indica el camí des de l’arrel del disc del servidor. Per exemple:
file:///C:/carpetaA/carpetaB/carpeta1/carpeta2/nom_arxiu.extensio, on C
és la unitat de disc del servidor i /carpetaA/carpetaB és on està instal·lat
el servidor.
Si, per exemple, hem instal·lat una aplicació web en el servidor, i des d’una de les
pàgines web volem accedir a un recurs amb una etiqueta HTML que sol·licita una
imatge per mitjà de l’etiqueta <img>, ho podem fer de la manera següent:
• Situació de partida: Aplicació instal·lada al servidor: OpenKM

Lloc on està ubicat el web que sol·licita el recurs: a la carpeta de
l’aplicació OpenKm.
Carpeta d’imatges de l’aplicació: imatges.
Nom imatge: imatge1.png.
• Relativa al servidor: <img src=’/openkm-6.4.14/imatges/imatge1.png’

width=220 height=58 alt=“OpenKm” title=“OpenKm”>
• Relativa a la pàgina web: <img src=‘imatges/imatge1.png’

width=220 height=58 alt=“OpenKM” title=“OpenKM”>
• Absoluta: <img src=’file:///C:/openkm-

6.4.14/tomcat/webapps/OpenKM/imatges/imatge1.png’ width=220
height=58 alt="OpenKm" title="OpenKm">
A partir d’ara, per referir-nos a la carpeta d’instal·lació del Tomcat, també podrem
fer servir l’etiqueta següent: <TOMCAT_HOME> (C:\openkm-6.4.14\tomcat en
el nostre cas).
Quan s’inicia el servidor Tomcat, llegeix el contingut dels fitxers ubicats

a /webapps i instal·la qualsevol fitxer que tingui extensió WAR. D’aquest
procés se’n diu desplegar l’aplicació, i consisteix a descomprimir els fitxers
i les carpetes que conté l’arxiu WAR dins del mateix directori (/webapps).
Conèixer l’estructura ajudarà a l’administrador del sistema a corregir configuraci-

ons diverses i a detectar i solucionar errors. També és molt important conèixer la
disposició de la informació per assegurar-ne el manteniment.
2.1.2 Arxius de configuració per defecte de l’aplicació
Actualment la majoria de programes es configuren des d’un entorn de finestres. En

ocasions aquests programes no implementen totes les possibilitats de configuració
en l’entorn gràfic, per això és necessari conèixer els fitxers bàsics de configuració.
Les versions més actuals d’OpenKM gestionen la configuració des de l’entorn

de finestres accedint amb perfil d’administrador. En altres casos s’utilitzen
fitxers que permeten realitzar canvis en les configuracions de comportament i de
funcionament de l’aplicació web.
La utilització d’assistent durant la instal·lació no permet realitzar gaires modifica-

cions, però, en tot cas, es recomana seguir les indicacions i deixar els directoris
de destí que indica l’assistent.
Heu de tenir en compte la dependència de Tomcat. Qualsevol canvi que

realitzeu que afecti al contenidor de servlets requereix reiniciar el servidor
per veure l’efecte dels canvis. No oblideu aquest detall, sobretot quan ja
esteu treballant activament amb l’OpenKM en un entorn professional real.
Java és una part bàsica per al funcionament d’OpenKM. Cal saber que el paquet
JDK s’instal·la en el directori C:\Archivos de Programa\java\jdkXXX, en el qual
XXX representa la versió del JDK (que en aquest cas és la v1.6.0_07). Les carpetes
principals són:
• \java: conté el jre de Java.
• \tomcat: aquí s’ha instal·lat Apache Tomcat.
• \tomcat\bin: conté els fitxers que inicien el servei.
El programa OpenKM pot configurar-se sense la necessitat de dependre de

l’entorn gràfic. Cal dir, però, que aquesta opció és força més feixuga i no
recomanada per a usuaris novells. A partir de la versió 5.1 encara és més difícil
realitzar canvis sense utilitzar l’entorn web.
OpenKM ofereix la possibilitat de modificar un ampli ventall de configuracions

i així aconseguir un entorn de treball adient a les vostre necessitats. El fitxer
imprescindible per realitzar aquests canvis és:
1 Openkm.cfg
En versions anteriors a la 5.1 aquest era el fitxer central de configuració. Sempre

que es faci una modificació en aquest fitxer i necessiteu que els canvis es realitzin
Els arxius de configuració a continuació, haureu de reiniciar la part servidor.
per defecte d’OpenKM són
en el directori:
C:\openkm-6.4.14\tomcat. El fitxer OpenKM.cfg us permetia canviar paràmetres. En versions actualitzades
Aquesta carpeta també és aquest fitxer conté la informació d’accés a la base de dades:
anomenada carpeta de
configuració d’OpenKM.
1 hibernate.dialect=org.hibernate.dialect.HSQLDialect
2 hibernate.hbm2ddl=none
A continuació es mostren algunes de les possibles configuracions que es poden

editar:
• Canviar la mida màxima dels fitxers que es pugen al repositori, que per
defecte és de 64MB. Si per exemple voleu canviar aquest valor per 120 MB
heu de variar la línia:
1 max.file.size=120
• Canviar el nom del repositori i la ruta per arribar-hi: en el cas que necessiteu
realitzar una instal·lació a mida i sigui imprescindible indicar una ruta i un
fitxer diferents haureu d’editar la línia:
1 repository.config=[ruta]/repository.xml
• Canviar el rol per defecte: el rol per defecte que es crida quan s’obre el
programa és ROLE_USER. Si voleu especificar un rol creat per vosaltres:
1 default.user.role=ROL_PARTICULAR
ROL_PARTICULAR és un
rol que vosaltres heu creat
anteriorment. • Canviar el rol d’administrador per defecte: per temes de seguretat és
recomanable crear un perfil administrador lligat a un usuari i no utilitzar
el perfil ROLE_ADMIN:
1 default.admin.role=EL_VOSTRE_ROL_ADMINISTRADOR
EL_VOSTRE_ROL_
ADMINISTRADOR és un rol
que vosaltres heu creat • Número màxim d’elements mostrats a les llistes de la interfície gràfica: cada
anteriorment i que té els
permisos d’administrador. vegada que realitzeu una consulta apareixeran en pantalla els resultats. Des
d’aquí podeu escollir la quantitat de dades que apareixen per la finestra:
1 max.search.results=35
• Canviar l’adreça URL d’accés a l’aplicació: depenent de com estigui

estructurat el vostre sistema informàtic i segons quines siguin les polítiques
d’ús de la vostra corporació, necessitareu especificar l’URL que s’utilitza
per accedir a l’aplicació:
1 application.url=http://el_vostre_domini.com/OpenKM/index.jsp
Veureu que OpenKM utilitza bastants fitxers amb extensió XML per al tractament
de dades. És recomanable que estudieu les bases d’aquest tipus de fitxers, ja que
us permetrà anar un pas més enllà en la configuració del programa. XML
L’XML és un llenguatge de
L’XML es proposa com un estàndard d’intercanvi d’informació estructurada entre marques (semblant a l’HTML),
que permet definir nous
diverses plataformes, segur, fiable i fàcil. llenguatges per a diferents
necessitats. Per entendre el
concepte, així com l’HTML
Hi ha una sèrie de fitxers molt importants, són els arxius amb l’extensió properties defineix una estructura sobre
quins camps han de tenir les
(com per exemple: catalina. properties, logging.properties, etc.). Aquests pàgines web, amb l’XML ens
podríem inventar una estructura
fitxers s’encarreguen d’aspectes de configuració de l’aplicació. Si obriu un de com s’han d’enviar
documents d’una empresa a
d’aquests fitxers qualsevol, veureu que indiquen una llista de variables amb el través d’Internet. L’estructura
del document, en aquest cas,
seu corresponent valor; permeten, alhora, definir aspectes de comportament i només seria interpretada per
l’emissor i el destinatari.
configurar paràmetres, per exemple:
1 package.access=sun.,org.apache.catalina.,org.apache.coyote.,org.apache.tomcat.,
org.apache.jasper.
També és molt important el contingut de la carpeta C:\openkm-

6.4.14\tomcat\webapps\OpenKM\WEB-INF. S’anomena carpeta arrel de
configuració d’Alfresco (<configRoot>). Aquí estan ubicades les característiques
Recordeu que el contingut
bàsiques de l’aplicació. de la carpeta /WEB-INF
forma part del
desplegament de l’aplicació
Aneu amb molt de compte amb les modificacions que realitzeu. No oblideu fer web en format WAR.
Aleshores, si s’actualitza
còpies de seguretat abans de cap canvi. També heu de posar cura amb el tema l’aplicació, s’actualitzarà
de les actualitzacions de l’aplicació. Si heu realitzat canvis en la configuració i l’arxiu WAR, i tot el
contingut de la carpeta
voleu mantenir-los, és possible que en realitzar actualitzacions automatitzades els /WEB-INF quedarà
reemplaçat pel contingut de
vostres canvis desapareguin. Documenteu bé tot el que realitzeu l’actualització.
Configuració bàsica en entorn gràfic
Configurar un gestor d’arxius web és una tasca que és molt senzilla si es disposa
d’un entorn de treball basat en finestres. Un entorn intuïtiu i la simplificació de les
tasques es fa possible gràcies a un bon back-office. I aquest és el cas del programa
OpenKM.
Accedint amb el perfil d’administrador a OpenKM disposareu d’un entorn gràfic

on realitzar la gran majoria d’accions sobre el programa.
Per poder administrar la configuració d’OpenKM en un entorn de finestres heu

d’utilitzar un navegador web i indicar l’URL:
1 http://localhost:8080/OpenKM/
Empreu l’usuari i contrasenya d’accés amb perfil administrador:
1 usuari: okmAdmin
Accedireu a l’entorn d’administració. Cliqueu a la pestanya Administració, que

trobareu a l’extrem dret de la finestra. Si accediu a aquest apartat veureu que canvia
el contingut de l’escriptori. Des d’aquí podeu realitzar les principals tasques
d’administració del sistema.
Inicialment necessitareu configurar unes determinades variables d’OpenKM si

voleu que algunes característiques del programa funcionin correctament. El fitxer
de configuració OpenKM.cfg us permetrà realitzar les configuracions oportunes.
Si ho preferiu, podeu utilitzar el mateix entorn web d’OpenKM per realitzar
aquests canvis de configuració. Per veure les variables de configuració haureu
de clicar a la icona Config per accedir al plafó d’administració del programa. La
primera clau que apareix és de les més pràctiques, ja que permet gestionar el fitxer
de diari del programa. Els valors principals que s’enregistraran els podeu veure a
la figura 2.4, i són:
• LOGIN: indica quan un usuari ha iniciat la sessió.
• LOGOUT: indica quan un usuari ha tancat la sessió.
• CREATE_.*: indica quan un usuari ha creat un document o una carpeta.
• DELETE_.*: indica quan un usuari ha eliminat un document o una carpeta.
• PURGE_.*: indica quan un usuari ha eliminat un document o una carpeta

de la brossa.
• MOVE_.* indica quan un usuari ha mogut un document o una carpeta.
• COPY_.* indica quan un usuari ha copiat un document o una carpeta.
• CHECKOUT_DOCUMENT: indica quan un usuari ha comprovat un docu-

ment o una carpeta al repositori.
• CHECKIN_DOCUMENT: indica quan un usuari ha registrat un document

o una carpeta al repositori.
• MISC_TEXT_EXTRACTION_FAILURE: indica quan ha succeït un error

durant l’execució d’una consulta.
F igu r a 2. 4 . Configuració de claus
Clicant a la icona Config accedireu a la configuració de les claus.

Per realitzar accions sobre les variables heu d’utilitzar les icones situades a la
dreta:
• Si cliqueu la icona del llapis, que està situada a la dreta de la pantalla, podreu
editar aquests valors.
• Amb la icona del símbol de prohibició eliminareu la clau.
Totes les claus que apareixen en aquesta finestra de configuració són importants
i no es descriuran una a una aquí, però cal destacar-ne algunes que demostren la
usabilitat d’aquest programa. Per exemple es destaca:
• application.url: és l’URL que s’empra per carregar l’aplicació.
• keep.session.alive.interval: indica l’interval de temps (per defecte són 5

minuts) entre sessions.
• max.search.results: limita el número de resultats mostrats a la interfície

d’usuari.
• principal.identifier.validation: és l’expressió que valida usuaris i rols.
• system.execution.timeout: indica el temps màxim permès per executar una

comanda (per defecte són 5 minuts).
• system.ftp.port: indica el número de port utilitzat per sessions FTP.
Si cliqueu a la icona de Mime types (figura 2.5) podreu consultar i editar el tipus
de contingut de les dades dels arxius.
F ig ur a 2. 5. Finestra Mime types
Des de la finestra Mime types podreu editar les correspondències amb les extensions.
Si per exemple necessiteu editar la configuració referent a Argo UML heu de clicar
al llapis que hi ha a la dreta del nom de l’aplicació i configurar la finestra (figura
2.6):
F igu r a 2. 6 . Edició Mime types
La capacitat d’edició dels tipus Mime es pot realitzar en entorn de finestres.
Com podeu observar, també es pot canviar la imatge que representa el tipus de
fitxer.
Clicant a la icona Statistics (figura 2.7) accedireu a informació rellevant del pro-
grama. L’administrador consultarà aquesta finestra per veure l’estat de l’aplicació,
obtenint molt clarament dades sobre el perfil d’informació emmagatzemada i estat
del sistema.
F igu r a 2. 7 . Presentació de dades
La presentació de dades en mode gràfic aporta molta informació rellevant.
Per a un administrador de sistemes, la informació que obtindrà de les estadístiques

és vital. Aquestes dades permeten prendre decisions més ajustades a l’èxit i
fan possible anticipar-se a problemes. Això fa que es puguin planificar plans de
millora i de no incórrer en situacions que puguin posar en perill la integritat de la
informació.
Amb la finestra de configuració de Metadata (figura 2.8) s’accedeix a la configu-

ració de les metadades utilitzades pel programa.
Figur a 2. 8. Metadades
Les metadades s’agrupen segons l’etiqueta, el nom o la informació.
L’ús de les metadades és molt interessant en els perfils de treball relacionats amb
la gestió de documentació. Les metadades permeten arribar a documents gràcies
a descripcions, a relacions amb paraules, amb usuaris... Força sovint un usuari
necessita documentació vinculada a un projecte en concret, però desconeix el nom
del document; l’ús de les metadades li permetrà accedir a la informació buscant
documentació relacionada amb el projecte.
Clicant a la icona d’Users (figura 2.9) accedireu a un dels apartats més útils
d’aquest tipus de programes. Des d’aquí podreu crear nous usuaris, activar-los,
assignar perfils, configurar el correu de contacte, veure l’activitat, etcètera.
F igur a 2 . 9. Finestra Users
La finestra Users permet realitzar tasques d’administració d’usuaris.
La finestra de Profiles (figura 2.10) us permetrà crear perfils. Utilitzar perfils

i configurar-los des d’aquí us permetrà definir configuracions genèriques d’una
forma molt senzilla. Entre les diferents opcions que teniu podeu limitar la quota
de càrrega, aplicar filtres quan el número d’usuaris connectats és molt alt, canviar
la font del text, el format de les dades o fins i tot canviar l’aparença del programa.
F igu r a 2. 1 0 . Finestra Profiles
La finestra Profiles conté totes les característiques reconfigurables.
Clicant a la icona Reports podreu generar informes relacionats amb el funciona-

ment de l’aplicació, ús i estat. Aquesta funcionalitat acaba sent de molta utilitat,
ja que la facilitat que té l’aplicació per generar informes que recullen les dades
més rellevants del sistema us ajudarà en la presa de decisions i, sobretot, a arribar
a ser proactius.
La icona Logs és de les més utilitzades quan el programa es troba en fase

d’adaptació al client. Aquí es mostrarà el registre de totes les accions realitzades
sobre el programa.
Per exemple, en qualsevol moment podeu veure quins usuaris estan connectats
al sistema. OpenKM assigna un únic identificador de sessió que es vincula amb
el moment en què un usuari es valida en el sistema fins que es desconnecta. Un
paràmetre que obteniu i que pot resultar interessant és la IP remota utilitzada per
accedir al sistema.
La icona Automation us permetrà automatitzar accions en funció de condicions

o regles que s’hagin executat. Les accions que es poden realitzar són gairebé
qualsevol operació sobre els elements existents al programa.
La icona Crontab (figura 2.11) us durà a un entorn que farà possible programar
tasques en el temps. Resulta de gran utilitat enviar, per exemple, correus que
informin de la realització de tasques automàtiques.
Figur a 2. 11. Crontab
La interfície gràfica de Crontab.
En determinats entorns de treball caldrà gestionar molt bé les tasques programades

i treballar en equip amb l’administrador de sistema i l’administrador de xarxa. És
força comú haver de realitzar configuracions d’aquest perfil amb l’autorització
d’altres persones o en les finestres de temps que ens indiquin.
La icona OMR permet accedir a la gestió del reconeixement de marques òptiques.

Per utilitzar OMR s’ha de crear una plantilla, pujar-la a OpenKM, pujar el fitxer
ASC i crear un fitxer FILE. Per més informació sobre
OMR visiteu: http:
La icona OCR Templates permet crear plantilles que tenen la capacitat d’identificar //www.cse.iitd.
ernet.in/~aseth/
camps en documents i adquirir el valor d’aquests camps. Un cas típic és escanejar udai/OMRProj/
una factura i obtenir automàticament el nom del titular, l’identificador de la factura README.html
i la quantitat total que cal abonar. Si en l’entorn real de treball on s’ha instal·lat
OpenKM encara existeix el paper, caldrà digitalitzar documentació i extreure’n
dades. Ray Kurzweil és un dels
referents en el
reconeixement òptic de
La icona Folder Style permet ajustar l’aspecte de les icones que es vinculen amb caràcters.
les carpetes. Els possibles valors que es poden modificar són:
• Read-only with children icon
• Read-only with subscription icon
• Read-only with children and subscription icon
• Read-write icon
• Read-write with children icon
• Read-write with subscription icon
• Read-write with children and subscription icon
La icona Language dóna accés al tractament de les llengües. Des d’aquí es poden
afegir nous idiomes, crear un idioma propi o fins i tot modificar un idioma ja
instal·lat. Aquest apartat és força útil ja que garanteix l’adaptació de l’entorn de

treball a les necessitats de l’usuari final.
La icona Import s’utilitza per importar un repositori. En aquesta acció existeix

la possibilitat d’activar diverses opcions. Si el que es necessita és importar
documents que ja existeixen al programa, no cal marcar cap opció. És necessari
marcar opcions quan el que es requereix és importar un repositori prèviament
exportat d’OpenKM. Si anteriorment s’ha exportat un repositori amb metadades
cal que es marqui la casella Metadata, de la mateixa manera si s’ha exportat
un repositori amb la seva història, caldrà marcar l’opció History per recuperar
aquestes dades.
La icona Export realitza una exportació del repositori actiu. És imprescindible

marcar les caselles Metadata i History si s’han utilitzat aquests atributs i es volen
emmagatzemar per a un ús futur.
La icona Utilities mostra en pantalla tota una sèrie d’opcions molt profitoses per a
l’administrador. Disposar d’aquestes opcions farà possible no sortir de l’entorn de
treball d’OpenKM per realitzar tasques d’administració lligades amb el sistema.
Configuració del repositori i de la base de dades
La gestió i manteniment de la informació no és una tasca senzilla. Amb el temps

s’han anat desenvolupant i millorant tècniques per realitzar aquestes tasques.
Un repositori és una eina que permet emmagatzemar i mantenir la

informació de forma centralitzada.
Generalment un repositori és el mètode més utilitzat per programes que necessiten

treballar amb un cert volum de dades. S’encarrega d’organitzar jeràrquicament els
continguts, permetent la recerca de text, control de versions, moviment de dades,
recerca de canvis, etc.
OpenKM no és un repositori, sinó que utilitza el d’Apache Jackrabbit, que és

de codi obert. Tot i que existeix des de l’any 2004, el seu ús continua sent
molt generalitzat. Un dels punts forts d’aquest programa és l’opció de realitzar
Jackrabbit utilitza el servei
web d’Amazon per
l’emmagatzematge en remot o al núvol.
emmagatzemar dades al
núvol
El repositori utilitzat està situat a:
1 $TOMCAT_HOME/repository
Identificareu les configuracions del repositori perquè van precedides de:
1 repository.*
Un possible exemple de configuració bàsica és:
1 <!DOCTYPE Repository
2 PUBLIC "−//The Apache Software Foundation//DTD Jackrabbit 1.4//EN"
3 "http://jackrabbit.apache.org/dtd/repository−1.4.dtd">
4 <Repository>
5 <FileSystem .../>
6 <Security .../>
7 <Workspaces .../>
8 <Workspace .../>
9 <Versioning .../>
10 <SearchIndex .../> <!−− optional −−>
11 <DataStore .../> <!−− optional −−>
12 </Repository>
Els elements indicats tenen les següent funcions:
• FileSystem: és el sistema de fitxers virtual.
• Security: configuració d’autenticació i autorització.
• Workspaces: configuració de diferents espais de treball.
• Workspace: plantilla de l’espai de treball per defecte.
• Versioning: configuració del control de versions.
• SearchIndex: configuració de l’índex de cerca.
• DataStore: configuració de l’emmagatzematge de dades.
Com es pot observar és possible una configuració total del repositori si es coneixen
els camps editables. Es recomana fer una còpia de seguretat abans de realitzar cap
canvi. També és necessari que, una vegada s’ha realitzat qualsevol canvi, es facin
totes les proves necessàries sobre el sistema per comprovar que no s’ha generat
cap incidència.
Configuració de la interfície web
OpenKm permet canviar la configuració del client web utilitzant WebDAV. Per
activar WebDAV en el vostre cas heu de fer un petit canvi a la configuració:
Milton WebDAV és una API
per a Java.
1 system.webdav.server=on
WebDAV és compatible amb gairebé tots els sistemes operatius. Per utilitzar-lo
cal instal·lar eines, per exemple, en el cas de Windows:
• Webdrive: és l’opció més recomanada.
• Netdrive: molt fàcil d’utilitzar, però presenta alguns problemes, sobretot

relacionats amb la gestió de versions.
Per començar a treballar amb WebDAV indiqueu al vostre navegador:

1 http://host:8080/OpenKM/webdav/okm:root
Si s’utilitza una distribució Linux s’ha d’utilitzar Savannah. Aquest projecte no és

part del projecte GNU, per tant heu de tenir clares les limitacions que això suposa.
2.1.3 Arxius de configuració personalitzada
Resulta indispensable adequar l’entorn de treball a les necessitats de l’usuari. Tot i

que entre usuaris hi ha moltes similituds, hi ha aspectes personals que són diferents
per a cada usuari, per tant és necessari poder configurar l’aplicació amb un cert
nivell de personalització.
OpenKm ofereix la possibilitat de realitzar una personalització profunda de

l’entorn de treball. Configurar la llengua dels menús, permetre la integració amb
OpenOffice, configurar el servei de missatgeria interna o configurar el correu són
petits exemples que resulten molt útils.
Per personalitzar la configuració es fa mitjançant l’entorn de finestres d’Adminis-

tració. Algunes característiques que us poden resultar de gran utilitat són:
• Canviar l’idioma utilitzat per defecte a la interfície d’usuari:
1 default.lang=es−ES
• Permetre la conversió de fitxers PDF a SWF serà possible si teniu instal·lat

OpenOffice i afegiu la línia:
1 system.pdf2swf=/usr/bin/pdf2swf
• La previsualització d’imatges requereix tenir instal·lat el programa Image-

Magick i indicar la línia:
1 system.imagemagick.convert=/usr/bin/convert
• Integrar OpenOffice.org:
1 system.openoffice.path=/usr/lib/openoffice
2 system.openoffice.tasks=5
3 system.openoffice.port=2222
• Configurar el correu:
1 subscription.message.subject=OpenKM − {0} − {1};

2 subscription.message.body=Document: <a href=\"{0}\">{1}</a>
3 notify.message.subject=OpenKM − NOTIFICATION − {0}
4 notify.message.body=Document: <a href=\"{0}\">{1}</a>
• Canviar la imatge que s’associa a l’aplicació:

1 logo.login
2 logo.mobile
3 logo.report
4 logo.tiny
En un entorn empresarial cal revisar aquesta configuració. La utilització dels skins

corporatius són una pràctica necessària i en alguns casos imprescindible.
Altres configuracions personalitzades més tècniques poden referir-se a:
• Configuració del correu: les subscripcions permeten que el servidor enviï

correus informatius als usuaris. El fitxer a editar és:
1 C:\openkm−6.4.14\tomcat\conf\server.xml
El codi per configurar un correu de Gmail seria:
1 <Resource name="mail/OpenKM" auth="Container" type="javax.mail.Session"

2 mail.transport.protocol="smtp"
3 mail.smtp.auth="true"
4 mail.smtp.host="smtp.gmail.com"
5 mail.smtp.port="465"
6 mail.smtp.user="Aquí aniria l’usuari de GMAIL"
7 password="Contrasenya"
8 mail.smtp.from="Correu"
9 mail.smtp.quitwait="false"
10 mail.smtp.starttls.enable="true"
11 mail.smtp.socketFactory.class="javax.net.ssl.SSLSocketFactory"
12 mail.debug="true"/>
• Integrar SWFTools: per fer possible la previsualització de documents

cal convertir els fitxers PDF en SWF. SWFTool permet realitzar aquesta
conversió, i per habilitar-la heu d’editar la configuració del programa amb
la línia:
1 system.swftools.pdf2swf=/usr/bin/pdf2swf −T 9 −f ${fileIn} −o ${fileOut}
Per a sistemes Windows:
1 system.pdf2swf=c:/program files/swftools/pdf2swf.exe
Per a distribucions Linux cal instal·lar SWFTools i afegir la línia:
1 system.swftools.pdf2swf=/usr/bin/pdf2swf
Per instal·lar SWFTools
podeu consultar la web
* Canviar de port: és fàcil que el port 8080 ja l’estigueu utilitzant. Si és així podeu http://wiki.swftools.
canviar aquest valor editant el fitxer: org/wiki/Installation
1 C:\openkm−6.4.14\tomcat\conf\server.xml
Si per exemple voleu que el port d’accés sigui el 8090 en comptes del 8080 canvieu
la línia:
1 <Connector port="8080" redirectPort="8443" connectionTimeout="20000" protocol="

HTTP/1.1" address="0.0.0.0"/>
per:
1 <Connector port="8090" redirectPort="8443" connectionTimeout="20000" protocol="

HTTP/1.1" address="0.0.0.0"/>
Hi ha diversos aspectes que l’administrador d’OpenKM no pot decidir. Per

exemple, el port que s’utilitza per establir la connexió pot estar marcat per les
necessitats del sistema i es requerirà del concurs de l’administrador del sistema.
2.1.4 Consola de configuració
L’entorn de treball més utilitzat per l’administrador és la consola de configuració

o terminal. Aquesta utilitat permet executar comandes per realitzar comandes i
l’anàlisi (testing) de l’estat del sistema.
OpenKM disposa d’un entorn anomenat Utilities que permet utilitzar un ventall
d’eines d’administració del programa.
Des de la pestanya d’administració heu de clicar la icona terminal. Algunes de les

possibilitats que teniu són:
• Anàlisi (testing) del correu
• Esborrar la memòria temporal
• Anàlisi del repositori
A la següent imatge teniu l’aspecte d’aquesta finestra:
F igu r a 2. 1 2 . Terminal
Opcions de Terminal.
Com podeu observar OpenKm intenta arribar a poder realitzar totes les configu-
racions possibles des de l’entorn gràfic. Aquest aspecte es valora molt, sobretot
tenint en compte l’eficàcia del mateix i la senzillesa de l’ús. Està clar que no hi
són totes les opcions possibles en aquest entorn gràfic, i no es pot deixar de revisar
el sistema des de la interfície de comandes.
2.2 Administració d’usuaris
Molt probablement l’administració d’usuaris sigui la tasca que més temps d’in-
versió requereix. La persona encarregada de gestionar les altes, baixes i modifi-
cacions del usuaris requerirà d’una sèrie de dades com ara el perfil, rol, correu
electrònic, i un determinat temps per dedicar-se a administrar usuaris.
El programa OpenKM disposa de les tècniques més efectives per facilitar l’ad-
ministració d’usuaris, però és necessari que la persona encarregada d’aquesta
responsabilitat realitzi un estudi previ de les necessitats del client. OpenKM és
una eina potent, però cal administrar-la correctament.
2.2.1 Afegir nous usuaris
Amb els permisos d’administrador es poden crear usuaris, modificar el seu

perfil, eliminar-los, deshabilitar-los i gestionar les seves comunicacions amb el
programa.
En qualsevol moment es pot canviar el rol de l’usuari connectat. Si us fixeu

a la part superior dreta de la pantalla detectareu l’opció Role list. Utilitzant
aquesta opció canviareu el perfil de l’usuari connectat. Aquesta possibilitat és
molt útil quan esteu connectats com a administradors i necessiteu saber com queda
configurat l’entorn de treball si fóssiu un usuari de diferent rol.
Si és la primera vegada que accediu a aquesta part del programa es veurà un entorn
de treball amb el següent aspecte:
F ig ur a 2. 13. Usuaris
Finestra que pertany al procés de creació d’usuaris.
Per crear un usuari heu de clicar sobre de la icona que és un cercle de color verd i
conté el símbol ”+”.
Quan es crea un usuari (figura 2.14) s’ha d’especificar:
• Id: identificador d’usuari que s’utilitzarà per accedir al programa.

• Password: contrasenya d’accés.
• Confirm password: torneu a escriure la contrasenya per comprovar que no

hi ha cap error.
• Name: nom de l’usuari.
• Mail: adreça de correu on s’enviaran les notificacions.
• Active: marqueu aquesta opció perquè l’usuari resti actiu.
• Roles: cada usuari pot desenvolupar diferents rols dins del programa.
Fig ur a 2 . 1 4. Creació d’usuaris
Finestra de dades per a la creació d’un nou usuari.
Quan valideu les dades l’usuari ja estarà actiu al sistema. Si alguna de les dades
no és correcta s’avortarà l’acció. Per a llengües com la nostra haureu d’excloure
caràcters com la “ç”, accents o espais.
Una dada curiosa és que OpenKM permet vincular a un usuari adreces de correu
i comptes de Twitter. Aquest detall permet entendre la necessitat d’actualització
no només davant dels canvis tecnològics, també en referència a l’ús social de la
tecnologia.
2.2.2 Modificar i eliminar usuaris
Per modificar les dades d’un usuari ja creat cal que cliqueu a la icona llapis que
referencia al compte d’usuari objectiu. Utilitzant aquesta icona es pot modificar
qualsevol camp dels que defineixen els usuaris. A l’instant següent de validar
qualsevol canvi es pot comprovar que tinguin efecte immediatament.
Per eliminar un usuari s’ha de clicar a sobre de la icona senyal de prohibit.

L’eliminació de l’usuari es produeix després de validar l’acció.
2.3 Administració de grups
L’administració dels diferents perfils és molt important en un programa que té

per objectiu l’emmagatzematge i compartició documental en xarxa. OpenKM
administra els conjunts d’usuaris utilitzant grups, perfils i rols.
L’administració de grups és una de les tasques principals de

l’administrador d’OpenKM.
Els grups fan referència a grups de propietats. Per exemple, en la logística

d’una empresa podem crear un grup amb les propietats que han de tenir els
treballadors del magatzem: podrà consultar l’estoc, la distribució i ubicació i
l’agenda d’entrades-sortides; podrà modificar l’estoc.
El perfil es relaciona amb les propietats del grup i amb la configuració de l’entorn
de treball de l’OpenKM. Així, al perfil es decidirà quines parts del programa seran
visibles, a quin grup es pertany o fins i tot si es té accés al xat intern.
Un rol descriu les característiques que es relacionen amb un o diversos

usuaris.
L’administració del programa utilitzant rols simplifica molt totes les tasques. Per
exemple, si hem de compartir una carpeta amb molts usuaris ho podem fer de dues
maneres: la primera seria donar permisos usuari a usuari, i la segona opció seria
vincular els permisos de la carpeta a un determinat rol (rol al qual pertanyen tots
els usuaris que hagin de tenir accés a la carpeta). Els dos rols més habituals són
el de l’administrador i el de l’usuari base.
Una de les parts més importants de la gestió d’usuaris és l’assignació de rols.

Per poder accedir al programa cada usuari ha de pertànyer als rols ROLE_USER
o ROLE_ADMIN. Utilitzant la finestra Seguretat d’un document o una carpeta,
s’assignaran els permisos vinculats al rol. Els permisos que es poden administrar
sobre els continguts són:
• Lectura: permet accedir al contingut.
• Escriptura: permet editar el document i guardar els canvis.
• Esborrat: permet eliminar el contingut.
• Seguretat: permet modificar els permisos.
Per exemple podria interessar crear un rol de visitant. Aquest nou rol donaria
accés a certs continguts i tindria permís de lectura. No podria modificar res ni
crear cap contingut nou. Podríem assignar un usuari amb identificador “visitant”
i contrasenya “visitant” que permetria l’accés restringit.
2.3.1 Creació de grups i subgrups
La creació de grups simplifica molt l’administració del gestor. És important

realitzar una planificació i un estudi de quins són els grups necessaris, de les
característiques que han de tenir i del manteniment que requerirà aquest sistema.
Per crear un nou rol heu de clicar a sobre de la icona de crear un nou rol i introduir
el nom que identificarà el rol.
2.3.2 Afegir i eliminar usuaris a un grup/subgrup
El programa OpenKM treu profit a la gestió de perfils en funció del rol i dels grups
de propietat. Per afegir un o diversos rols a un usuari cal utilitzar el procés d’edició
de l’usuari i afegir el rol escaient. Si no existeix un rol a mida del que necessiteu
podeu crear nous rols.
L’administració de grups es pot realitzar en qualsevol moment i els canvis aplicats

funcionen a l’instant. En tot moment es pot afegir un usuari o bé treure’l segons
sigui el cas.
2.4 Administració del contingut
L’ús d’OpenKM suposa un estalvi de temps i una eficàcia en la gestió i adminis-

tració del contingut. L’anàlisi i distribució de la informació continguda es realitza
coordinant totes les característiques del programa.
L’espai Taxonomia (figura 2.15) permet accedir a l’entorn de cada usuari amb les
característiques i continguts que li són assignats.
Fig ur a 2 . 1 5. Taxonomia
Vista de la taxonomia des d’un mòbil.
El resultat final és el resum de la configuració prèvia de molts aspectes vinculats

amb l’usuari. La valoració es calcularà en gran part per com acabi sent l’entorn
de treball desenvolupat per a l’ús de l’usuari final.
2.4.1 Creació d’espais
Per mostrar com crear espais personalitzats es pot provar de crear una carpeta des
de la Taxonomia (figura 2.16). Per realitzar aquesta acció bastarà amb clicar amb
el botó dret a sobre d’una carpeta i clicar a l’opció Crear carpeta.
F igu r a 2 . 1 6 . Carpeta
Creació d’una carpeta.
Les propietats d’aquesta carpeta marcaran qui pot accedir-hi i amb quins permisos.
2.4.2 Afegir o crear nous arxius a l’espai
A causa de les àmplies possibilitats d’OpenKM no només es poden afegir arxius,

també es poden crear nous arxius.
Per afegir un document cal clicar a sobre de la icona full amb un símbol ”+” verd:
F igu r a 2. 1 7 . Document
Afegir un document.
i navegar per l’estructura de directoris fins a trobar el document que es desitja

vincular:
F igu r a 2. 1 8 . Seleccionar
Selecció d’un document.
Si es dóna el cas que es requereix moure el document a un altre destí, s’ha de clicar
amb el botó dret a sobre del document i pitjar l’opció Mover:
Figu ra 2. 1 9. Afegir
Afegir un document.
2.4.3 Compartir contingut
Un dels potencials d’OpenKm és compartir continguts. L’assignació de rols i

perfils fa possible que diferents usuaris treballin sobre els mateixos documents
o que accedeixin a diversos documents (figura 2.20).
F ig ur a 2. 20. Perfil d’usuari
Carpetes subscrites a un perfil d’usuari.
Els permisos dels continguts (figura 2.21) aquí també juguen un paper protago-
nista. Dependrà dels permisos que es pugui accedir per consultar, modificar o
eliminar el contingut.
F igu r a 2. 2 1 . Permisos
Resum dels permisos d’una carpeta.
Tot administrador d’OpenKM necessitarà un full de directrius per determinar qui

té o no accés a un contingut i en cas positiu quines en són les limitacions.
2.4.4 Cerca de contingut
L’ús de Lucene augmenta les prestacions d’OpenKM. Cal destacar d’aquesta

llibreria que no limita les recerques pel nom, sinó que també utilitza el contingut
Més informació de dels fitxers.
Lucene:
https://lucene.
apache.org/core/ A la part superior dreta de la finestra hi ha l’espai habilitat per introduir les dades
de cerca.
Podem escriure la cadena de cerca que ens interessi en el camp situat al costat
de la lupa i després clicar a sobre la lupa per buscar la cadena introduïda dins
del repositori de dades. Cal saber, però, que les cadenes de cerca han de tenir un
mínim de 3 caràcters, i es poden utilitzar comodins com: * (comodí per a múltiples
caràcters), ? (comodí per a un sol caràcter); però mai poden posar-se en la primera
posició de la cadena de cerca. Per exemple, cadenes com: *abc, o ?abc no són
vàlides.
2.4.5 Copiar i enganxar
OpenKM es comporta com una aplicació d’usuari bàsica en algun aspecte, i

així permet realitzar accions com ara copiar i enganxar continguts utilitzant les
combinacions de tecles Ctrl + C i Ctrl + V.
També es podrà treballar amb el botó dret del ratolí per accedir a les possibles
accions que pot rebre el contingut.
OpenKM finalment oferirà la possibilitat d’arrossegar continguts des d’un origen

a un destí.
2.5 Entorn d’usuari
OpenKM treballa en dos entorns: l’entorn client i l’entorn servidor. El vostre

client requereix conèixer quin és l’aspecte, les característiques i la metodologia
de treball que es trobarà en l’entorn client. Perquè l’entorn client funcioni

correctament és imprescindible que la part servidor estigui funcionant; sinó és
així no es podrà accedir al programa. L’entorn client és la part del
programa que utilitza
l’usuari i l’entorn servidor
Per realitzar una bona tasca amb l’entorn d’usuari caldrà primer adequar-lo a les és la part del programa que
utilitza l’administrador.
necessitats de l’usuari final.
2.5.1 Accés a l’entorn del gestor d’arxius web
Per accedir en mode usuari podem utilitzar un navegador web instal·lat a un

ordinador, una tauleta o qualsevol altre dispositiu mòbil. En qualsevol cas el que
cal és indicar l’adreça web on es troba allotjat el programa. La següent imatge
mostra l’aspecte que presenta la primera pantalla accedint des d’un telèfon amb
sistema operatiu Android:
Fig ur a 2 . 2 2. OpenKM a Android
Aspecte d’OpenKM carregat en un sistema Android.
En el cas concret de la instal·lació d’OpenKM en un servidor amb IP 193.168.1.33,

l’adreça utilitzada al navegador del telèfon és:
1 http://193.168.1.33:8080/OpenKM/
És interessant gestionar dominis a la intranet corporativa per tal d’evitar que els
usuaris hagin d’escriure una adreça IP al navegador. Per exemple, seria més fàcil Una intranet és una LAN
(Xarxa d’Àrea Local) que
escriure: permet utilitzar eines
d’Internet. Augmenta la
usabilitat de la xarxa
1 http://NomEmpresa.com/Documents informàtica de qualsevol
corporació.
La primera vegada que utilitzeu OpenKm no hi haurà usuaris configurats a part

de l’administrador, per tant, per accedir-hi necessiteu les següents dades:
1 Usuari: okmAdmin
2 Contrasenya: admin
Si preferiu accedir des d’un ordinador els passos són els mateixos:
1. Obriu un navegador client.
2. Indiqueu l’adreça:
1 http://localhost:8080/OpenKM/
Entrant amb l’usuari administrador la finestra que apareix és:
F igu r a 2. 2 3 . Administrador
Visió que tindrà l’administrador d’OpenKM.
Si us fixeu a la part inferior esquerra apareix Conectado como Administrador.

necessiteu crear un usuari per canviar de perfil.
Necessiteu qualsevol dels navegadors més comuns per accedir al programa (figura
2.24).
Figur a 2. 24. Tomcat
Imatge de l’inici del servidor Tomcat.
Recordeu que per accedir a l’entorn usuari és imprescindible que primer l’hagi iniciat el
servei. Si és la primera vegada que instal·leu OpenKM i no l’heu utilitzat mai heu d’executar
al servidor:
• En sistemes Windows:
1 C:\openkm−6.4.14\tomcat\bin\catalina.bat start
• En distribucions Linux:
1 /opt/openkm−6.4.14/tomcat/bin/catalina.sh start
Cal revisar l’accés al programa des de diversos navegadors. És possible que

configuracions puntuals es mostrin diferents, des del punt de vista de l’aspecte,
depenent del navegador web utilitzat.
2.5.2 Pàgina principal
La pàgina principal de treball que ofereix l’OpenKM està clarament organitzada.

Quan accediu al sistema veureu que l’escriptori es divideix en cinc parts:
• Opcions de menú
• Barra d’eines
• Arbre de carpetes
• Gestor de documents
• Propietats dels documents i carpetes
Cada part realitza unes determinades tasques. És imprescindible conèixer les

diferents funcionalitats de cada part per realitzar un ús eficient de l’eina.
F igu r a 2. 2 5 . Distribució lògica
Les diferents parts es distribueixen lògicament.
Aquest entorn de treball és àmpliament reconfigurable en funció dels requisits

de l’usuari. Cal invertir temps per acabar d’identificar les funcions bàsiques i la
ubicació dels diferents espais.
Opcions de Menú
Les opcions de menú que conté ofereixen totes les opcions possibles dels elements
del programa. Podeu utilitzar qualsevol opció que no estigui ombrejada. Les
possibles opcions estan agrupades en:
• Arxiu: podreu crear carpetes, afegir documents o escanejar, entre altres.
• Edició: accions sobre l’element seleccionat.
• Eines: estris que us permetran canviar la configuració de l’entorn de treball.
• Marcadors: possibilita la creació de dreceres.
• Plantilles: les plantilles simplifiquen molt processos.
• Ajuda: ajuda diversa sobre diferents aspectes relacionats amb el programa.
Fi gu ra 2 . 2 6 . Menú
Opcions de Menú.
Existeixen dreceres de teclat que estalvien força temps. Tot i així és recomanable
una primera fase de descobriment de les moltes possibilitats que contenen les
opcions de Menú.
Barra d’eines
La barra d’eines (figura 2.27) conté els botons amb les funcions bàsiques que
qualsevol administrador utilitzarà més freqüentment. Podeu utilitzar qualsevol
botó mentre no estigui ombrejat.
Figur a 2. 27. Eines
A la barra d’eines podeu utilitzar les que no estiguin ombrejades.
Per defecte aquí teniu la gran majoria d’utilitats que més es necessiten. Disposar
d’aquests elements a la barra d’eines agilitza les tasques. Aquesta barra és
editable.
Arbre de carpetes
L’arbre de carpetes (figura 2.28) està situat a la part esquerra de l’escriptori de

treball. Aquí teniu representada l’estructura jeràrquica de la informació. Es mostra
el repositori ordenat i agrupat en directoris.
Figu r a 2 . 2 8 . Arbre de carpe-

tes
Aspecte de l’arbre de carpetes.
Rebre visualment la jerarquia de l’estructura ajuda molt a comprendre la logística

de la documentació. En motes ocasions aquesta visió ordenada dels continguts es
pot aparellar amb perfils o grups, fet que facilita moltes tasques.
Gestor de documents
El gestor de documents (figura 2.29) permet veure tota la informació necessària

dels fitxers i carpetes. Disposeu d’opcions per treballar amb els continguts: des-
carregar un document, editar un document, comprovar un document al repositori,
bloquejar i desbloquejar documents, etc.
F ig ura 2 .2 9 . Gestor
Accés al gestor des d’un telèfon mòbil.
OpenKM permet arrossegar continguts fins a aquest espai, facilitant molt la feina
de l’usuari. També l’accés és possible des de dispositius mòbils, tot i que en
aquests casos la manipulació de la informació es torna més feixuga.
Propietats del document i de la carpeta
Aquí veureu característiques dels fitxers i de les carpetes com ara quan es va crear,
les subscripcions o el control de versions (figura 2.30).
F igu r a 2. 3 0 . Propietats
Propietats de la carpeta.
Cal parar atenció a les propietats, ja que gran part de les incidències que es puguin
gestar tindran el seu origen, i també la solució, en aquest lloc. Els procediments
estipulats per l’organització en referència al tractament de la informació seran
cabdals per a la correcta gestió de les propietats de documents i carpetes.
2.5.3 Altres espais de configuració
A sota de Taxonomia disposeu de més espais de configuració del sistema:
• Categories: les categories permeten relacionar documents de diferent ori-

gen (figura 2.31). Teniu la possibilitat de crear una estructura de categories
i veure àgilment tots els documents relacionats amb la categoria. Un
document pot estar enllaçat a més d’una categoria.
• Thesaurus: és un llibre que llista una sèrie de vocables que tenen un

significat semblant. Aquests llibres són molt útils per a la classificació de
documents.
• Plantilles: aquí emmagatzemareu les plantilles que necessiteu. Si ho

necessiteu podeu crear un arbre de continguts amb l’objectiu d’organitzar
millor les plantilles.
• Documents personals: aquesta és l’àrea privada de cada usuari.
• Correu electrònic: per configurar un compte de correu haureu d’anar a

administrar els usuaris i des d’allà introduir les dades. OpenKM té un
compte de correu compatible amb POP i IMAP.
• Paperera: els documents eliminats apareixeran aquí i teniu la possibilitat de

restaurar-los.
F ig ur a 2. 31. Categories
Finestra utilitzada per afegir categories.
No s’han de confondre aquests espais. No es tracta d’un calaix de sastre on han

anat a parar funcionalitats difuses. Es tracta d’utilitats importants que requereixen
tenir un ràpid accés; per aquest motiu tenen un perfil protagonista i l’usuari les
troba al principal entorn de treball.
2.5.4 Àrea de treball
L’àrea de treball d’OpenKM canvia en funció de les necessitats del client. La part
més variable és la zona central de l’àrea de treball.
Depenent de la pestanya seleccionada podreu estar a:
• L’escriptori de treball (vista d’usuari)
• Recerca de continguts
• WorkFlow
• Administració
Abans d’entrar a realitzar configuracions específiques i de realitzar accions sobre

documentació és important que navegueu pels diferents escenaris i veieu quines
són les utilitats que ofereixen.
3. Integritat del servei i documentació tècnica
En general, una de les funcionalitats de qualsevol programa informàtic és permetre

l’accés a la informació, però també assegurar la seva integritat. Diversos són els
mecanismes que s’utilitzen per aconseguir aquests objectius i per poder portar-los
a terme cal disposar d’una bona documentació.
El programa OpenKM s’encarrega de facilitar la gestió del repositori, la recupera-

ció de documents, la importació per lots, l’exportació de documents, l’encriptació
de la informació, la possibilitat d’utilitzar un diari d’activitat, l’automatització
de tasques o l’ús de Workflows accions que us permetran realitzar una curosa
administració segura i controlada de la informació. La seguretat informàtica
implica: confidencialitat,
integritat, disponibilitat i
autenticació o autentificació.
3.1 Indexació dels arxius
Els programes que s’encarreguen d’emmagatzemar informació han de permetre

realitzar recerques i accés a les dades invertint un temps molt petit. No es poden
permetre trigar gaire a mostrar la informació sol·licitada.
La indexació d’arxius permet accelerar els temps de cerca dels arxius

emmagatzemats en l’aplicació i, per tant, en facilita també l’accés.
La funcionalitat d’indexar arxius no està implementada sempre. OpenKM és un

gestor que sí que gaudeix d’aquesta capacitat, de fet, un gestor d’arxius web que
es consideri bo hauria d’implementar aquesta característica.
OpenKm utilitza per defecte un indexat molt flexible mogut per Apache Lucene.
Part del seu potencial es basa en l’ús adaptable a l’idioma. Amb versions
anteriors a la 5.1 editant el fitxer OpenKM.cf g podeu configurar a mida la
propietat hibernate.search.analyzer. Amb versions posteriors accedint amb rol
administrador ho podreu configurar a la finestra d’administració. Per exemple, per tractar
xinès simplificat es
requereix el paquet
Per defecte OpenKM utilitza org.apache.lucene.analysis.standard.StandardAnalyzer, org.apache.lucene.analysis.cn.smart
que funciona sobre l’idioma anglès. Si voleu realitzar canvis disposeu de les
opcions:
• org.apache.lucene.analysis.en.EnglishAnalyzer (idioma anglès)
• org.apache.lucene.analysis.es.SpanishAnalyzer (idioma espanyol)
• org.apache.lucene.analysis.fr.FrenchAnalyzer (idioma francès)
• org.apache.lucene.analysis.it.ItalianAnalyzer (idioma italià)

• org.apache.lucene.analysis.de.GermanAnalyzer (idioma alemany)
• org.apache.lucene.analysis.el.GreekAnalyzer (idioma grec)
Si es dóna el cas que heu configurat l’analitzador de recerques

abans d’iniciar el programa, l’indexat Lucene es crearà utilitzant
org.apache.lucene.analysis.standard.StandardAnalyzer, però si voleu
realitzar un canvi necessitareu fer un rebuild des de la interfície gràfica:
Administració/Rebuild indexes.
3.2 Mecanismes de seguretat del sistema
Qualsevol aplicació que funcioni en un entorn compartit requereix algun mecanis-

me de seguretat que permeti controlar qui entra o qui surt del sistema, i què pot
fer o no pot fer un usuari sobre els objectes que conformen l’aplicació.
L’administració de la seguretat es realitza amb la gestió dels permisos que poden

tenir fitxers i carpetes assignats als usuaris i als rols.
La gestió dels accessos, ja sigui a nivell del control d’usuari o bé amb l’administra-
ció de la seguretat de les connexions, és també un punt important a tenir en compte.
Per exemple, OpenKM incorpora ClearOS LDAP, que és una de les opcions més
utilitzades com a millores de seguretat.
Al gestor OpenKm la seguretat s’aplicarà en diferents línies: els usuaris tindran

uns determinats rols i permisos que els permetran l’accés a determinats continguts,
el control d’aquests perfils es realitza mitjançant grups, l’autenticació d’usuaris
es realitza mitjançant mecanismes i protocols segurs i les connexions estan
OpenLDAP és una implementació
lliure i de codi obert utilitzada a
protegides amb protocols de seguretat.
ClearOS.
3.2.1 Rols i permisos als usuaris
Un rol és un perfil que es pot relacionar amb un o diversos usuaris, igualment un

usuari pot tenir diferents rols. Per exemple, si l’administrador del programa es diu
Miquel tindrà un usuari anomenat id_Miquel, depenent de la tasca que hagi de fer
aquest usuari serà més útil treballar amb rol d’administrador, o en determinades
ocasions fer-ho amb rol d’usuari bàsic.
OpenKM treballa amb un entorn de rols i, per tant, quan assigneu o traieu
permisos, en realitat, sempre s’estaran aplicant les configuracions de seguretat
OpenKm utilitza per defecte sobre els rols.
l’autenticació sobre
HSQLDB (HyperSQL
DataBase). Els paràmetres que es poden gestionar són:
• Lectura: permet accedir al contingut i consultar-lo.

• Escriptura: permet accedir al contingut i modificar-lo.
• Eliminar: permet eliminar l’objecte.
• Seguretat: permet gestionar la seguretat de l’objecte.
Els dos rols predefinits a OpenKM són: ROLE_ADMIN i ROLE_USER. El rol

ROLE_USER és obligatori per a tots els usuaris. OpenKm l’utilitza internament
en la gestió de connexions. El rol ROLE_ADMIN permet administrar privilegis,
veure tots els continguts i realitzar accions sense cap restricció (vegeu la figura
3.1).
F ig ur a 3. 1. Carpetes
Informació referent a la seguretat de la carpeta.
És molt important ajustar el rol dels usuaris. Un usuari ha de tenir els privilegis
imprescindibles per realitzar amb garanties la seva tasca, però no n’ha de tenir mai
excés de permisos.
3.2.2 Convidar usuaris o grups a un contingut
La correcta creació i administració d’usuaris requereix una tasca prèvia de

planificació. Dependrà de les necessitats dels usuaris, de la naturalesa de la
informació i de l’estructura de l’organització, la decisió d’establir una estratègia
de gestió d’usuaris o no.
Els gestors d’arxius web han d’estar correctament organitzats per esdevenir útils en
tot el seu potencial. L’elecció de les característiques que han de tenir els diferents
usuaris i grups és un dels punts més importants a tenir en compte per tenir èxit.
Si s’ha planificat correctament, convidar usuaris o grups a pocs o molts continguts

no requerirà molta dedicació, però una mala planificació pot provocar una pèrdua
de temps enorme.
És important que identifiqueu els rols, grups i usuaris en funció dels continguts
als quals no han de tenir accés. El més habitual no és compartir un document amb
un usuari en concret, sinó que gairebé sempre compartireu un document amb un
grup que reuneix les mateixes característiques. També serà molt important deixar
ben clar quins són els permisos vinculats a cada rol.
3.2.3 Autenticació d’usuaris
L’autenticació d’usuaris no comença i acaba amb la comparació entre l’usuari i

contrasenya indicats per l’usuari. És necessari implementar protocols segurs de
comunicació, polítiques de permisos i administració de rols.
Per permetre la connexió d’un usuari al programa s’utilitza el protocol CAS.

Aquest protocol permet l’accés a diferents parts de l’aplicació sense la necessitat
d’identificar-se constantment. Perquè funcioni haureu de connectar mitjançant
CAS: Central Authentication una connexió HTTPS.
Service
3.2.4 Connexió segura amb SSL
Un programa com OpenKM ha d’oferir solucions en molts diversos àmbits. En

el cas de l’administració de connexions segures el programa necessita utilitzar
determinades eines externes. Un exemple és vincular el protocol SSL al programa.
SSL (Secure Sockets Layer) és un conjunt de protocols que tenen per

objectiu assegurar comunicacions segures a Internet mitjançant l’encriptació
de dades.
Si per exemple el vostre sistema operatiu és Ubuntu i voleu treballar amb SSL heu
de seguir els següents passos:
1. Permetre accedir al mòdul dins la configuració d’Apache:
1 $ sudo mkdir /etc/apache2/ssl

2 $ sudo /usr/sbin/make−ssl−cert /usr/share/ssl−cert/ssleay.cnf /etc/apache2/ssl/
apache.pem
3 $ sudo a2enmod ssl
2. Comprovar que el port 443 està escoltant (reviseu /etc/apache2/ports.conf):

Fig ur a 3. 2. L’accés des de dispositius

mòbils també requereix mesures de seguretat
Seguretat.
3.3 Cerca i interpretació de documentació tècnica
Podeu treballar amb OpenKm en la seva versió gratuïta o bé la versió de pagament.

Una de les principals diferències és que la versió gratuïta ofereix documentació
tècnica suficient i accés a fòrums de debat, mentre que la de pagament permet
realitzar consultes als tècnics.
Amb la versió gratuïta la documentació a la qual es té accés està escrita en gran part
en anglès. Trobareu algunes traduccions en castellà, però es recomana consultar
la versió original. El nivell d’anglès necessari és bàsic, es traca de documentació
tècnica.
Els fòrums vinculats a OpenKm ofereixen molta informació. Aquí trobareu la

solució a problemes que altres usuaris s’han trobat en el passat. Si us topeu amb
algun problema tècnic no dubteu a buscar algun fil de treball al fòrum, guanyareu
molt de temps.
La quantitat d’informació accessible des d’Internet és incalculable. Cada segon

que passa s’hi afegeixen, modifiquen i destrueixen continguts. És per aquest motiu
que si realitzeu una cerca d’informació referent a OpenKM obtindreu un número
molt elevat de respostes. Tot i que es recomana explorar la xarxa, a continuació
teniu una sèrie d’enllaços que estan revisats i us poden resultar de gran ajuda:
• http://www.openkm.com/: pàgina principal d’OpenKm. Aquí trobareu

molta informació comercial i petits detalls tècnics que us ajudaran molt a
ubicar el programa.
• http://wiki.openkm.com/: pàgina principal de la documentació d’O-

penKM. Basada en una plataforma wiki organitza la documentació en tres
gran blocs: instal·lació, usuaris i desenvolupadors.
• http://wiki.openkm.com/index.php/Installation_Guide: apartat de-

dicat a la instal·lació del programa. És molt recomanable que llegiu aquesta
part. Teniu informació bàsica, de tractament de la base de dades, seguretat,
correu o còpies de seguretat.
• http://wiki.openkm.com/index.php/User_Guide: aquí teniu la guia

d’usuari. Per començar és suficient. Tot el que ha de saber un usuari bàsic
està en aquesta guia.
• http://wiki.openkm.com/index.php/Curso_Workflow: a l’apartat
de desenvolupadors disposeu d’aquest curs. Conté vídeos explicatius dels
conceptes més importants dels Workflow.
• http://wiki.openkm.com/index.php/Repository_backup: aquesta
secció us indicarà com realitzar una còpia del repositori.
• http://wiki.openkm.com/index.php/Repository_import: aquesta
secció us indicarà com importar un repositori ja existent.
• http://wiki.openkm.com/index.php/Repository_view: l’adminis-
tració del repositori és una tasca molt delicada. Abans de fer res seria
recomanable que miréssiu aquesta web.
• http://wiki.openkm.com/index.php/Activity_log: aquí teniu un petit

manual per estudiar els logs des de la interfície gràfica.
• http://wiki.openkm.com/index.php/Automation: OpenKM permet

establir regles per generar automatismes. Dins de les funcions de l’admi-
nistrador del sistema hi ha realitzar aquestes tasques.
• http://wiki.openkm.com/index.php/Scripting_-_OpenKM_6.2: la
realització d’scripts vinculats a l’OpenKM esdevé molt important si arribeu
a un determinat punt de desenvolupament a mida.
Per interpretar la documentació tècnica sempre és bo tenir com a referència

glossaris de terminologia informàtica que ens ajudin a comprendre els conceptes:
• http://www.google.com/Top: directori de Google sobre terminologia

És important disposar d’informació, informàtica en català. Accediu a la categoria Informàtica, i a continuació a
però és igual d’important tenir facilitat
d’accés a aquesta informació. la categoria Terminologia.
• http://en.wikipedia.org: la Wikipedia és una molt bona aliada, i cal tenir

ben present que les definicions dels articles poden ser millors o pitjors, més
completes o menys, en funció de l’idioma que hàgim escollit. Així, si
cerquem conceptes informàtics, ben bé sempre la informació més completa
la trobareu si seleccioneu l’idioma anglès del menú de l’esquerra de la
pàgina web. El motiu és que actualment la majoria de programari prové
de països anglosaxons per motius econòmics i empresarials.
Aprendre a fer cerques avançades a Google tampoc no està mai de més: heu
d’accedir a la secció Query Input i, dins l’apartat Part I: Query Input, clicar
a l’enllaç Special Characters: Summary. És un resum dels paràmetres que es
poden fer servir per refinar les cerques que fem a Google, en el qual s’explica
detalladament l’ús dels operadors.
També pot resultar molt eficaç consultar llibres o parts de llibres gratuïtament per
cercar documentació tècnica. Wikilibros és una pàgina web especialitzada en la
difusió de llibres gratuïts, a l’estil Wikipèdia però enfocada als llibres.
L’idioma, segons el nivell que tingui cadascú, pot resultar un inconvenient

per interpretar algunes paraules de vocabulari, que no és tècnic, però ajuda a
comprendre’l. Per això, és molt recomanable tenir sempre a mà un bon diccionari
en línia que ens permeti consultar paraules i, si és el cas, traduir pàgines web
senceres:
• http://translate.google.es: traductor de pàgines web de Google. Només

cal escriure la pàgina web i automàticament us la tradueix.
• http://www.wordreference.com/es: diccionari d’anglès a castellà i vice-

versa. També permet treballar amb molts altres idiomes i accedir a fòrums
que complementen els continguts.
Com a últim consell, si estem cercant documentació específica sobre un gestor

d’arxius, el primer que hem de fer és investigar a fons la pàgina web principal on
hem trobat el gestor d’arxius, i buscar altres referències a fòrums o bitàcoles que
puguin debatre o comentar el programa.
3.4 Documentació dels gestors d’arxius web
El procés de documentació és una tasca imprescindible. Imagineu què passaria si

no es documentés la feina feta, on aniríem a buscar solucions? Sempre que ens
topem amb algun problema anem a buscar-ne les possibles causes i les solucions
a la documentació del programa o als fòrums que tracten el tema. L’administrador
ha de contribuir al procés de documentació afegint material.
És una bona pràctica documentar el procés d’instal·lació, configuració,

manteniment i desinstal·lació d’OpenKM. Aquesta acció és una ajuda per
l’administrador i per l’equip d’informàtics.
En moltes ocasions seguireu els passos que indica un desenvolupador durant el

procés d’instal·lació d’un nou programa i tindreu problemes. Cal deixar escrit el
punt on es detecta el problema, què l’ha originat i quin efecte ha produït. Seria
molt interessant reportar també si aquesta acció ha provocat alguna cosa en una
altra aplicació.
La consulta de fitxers de log ajuden molt a documentar, ja que són una font enorme
de dades i accions, algunes de les quals poden passar desapercebudes.
3.4.1 Documentació del procés d’instal·lació i configuració

d’OpenKM
La versió d’OpenKM utilitzada durant la instal·lació no requereix de molta

intervenció per part del tècnic. El paquet d’instal·lació conté tot el necessari per
fer funcionar el gestor sense la necessitat de canvis.
Tot i així és una bona oportunitat utilitzar una versió reduïda o d’anàlisi (testing)
per fer una documentació base. És molt important identificar totes les decisions
que s’han pres durant el procés d’instal·lació per l’anàlisi de situacions posteriors.
En cas contrari, la no generació de documentació pot provocar errors més greus i

fins i tot influir en el mal funcionament d’altres programes instal·lats al sistema.
Durant la instal·lació d’OpenKM és important que anoteu la data i l’hora exacta

de totes les accions que realitzeu. Per exemple, és força habitual que instal·leu una
versió d’avaluació en un sistema on ja hi ha un Tomcat instal·lat; no serà casualitat
que sorprenentment aquell Tomcat instal·lat i que funcionava correctament deixi
de funcionar. Coneixent quan heu realitzat les vostres accions i quan s’han generat
problemes en altres zones, podreu establir relacions i recuperar els sistemes.
Durant el procés d’instal·lació de l’aplicació és recomanable documentar tota una

Habituament s’instala el sèrie de punts que es detallen a continuació:
programari en una màquina
servidor.
• Elecció i justificació de les versions de programari utilitzades. Sobretot pel
que fa a la versió del JRE (Java Runtime Environment).
• Característiques de la màquina que allotjarà el programari.
• Si ha calgut, canvis de configuracions de programes externs a OpenKM.
• Dispositius utilitzats: mòbil, tauleta, ordinador, etcètera.
• Altres aspectes. Pràcticament cada instal·lació és diferent a la resta en

funció de l’entorn on s’executa.
La documentació no es realitza en acabar un procés; sempre s’ha de documentar

al mateix temps que es treballa. No seguir aquesta premissa durà a situacions
on s’oblida reportar dades, i recordeu que s’ha de reportar tot. Per exemple, en
distribucions Linux és habitual haver de visitar un repositori en la recerca de
versions més actuals d’alguns mòduls, doncs abans de fer-ho anoteu què heu
d’actualitzar i per què.
A mode d’exemple, dades documentals importants són:
• Mòduls addicionals instal·lats que complementen l’ús i les funcionalitats de

l’aplicació.
• Aspectes de configuració relacionats amb la interfície gràfica de l’usuari,

com per exemple la facilitat d’accés en determinats espais de l’aplicació, la
visualització i l’organització dels arxius, etc.
• Aspectes de configuració relacionats amb l’aplicació mateixa que permeten

adaptar les funcionalitats a les necessitats de l’organisme, persona o empresa
que utilitzi l’aplicació, com ara la configuració específica de la base de
dades, configuració del servei de correu de l’aplicació, configuració del
motor de cerca, etc.
• Configuració del servidor de l’aplicació web adaptada a les necessitats reals

que pugui tenir l’aplicació, com podria ser una forta demanda d’usuaris que
faran servir l’aplicació, control de seguretat, etc.
Una bona manera de començar a fer la documentació és consultar l’índex de la guia

d’instal·lació de l’aplicació. Es poden analitzar visualment els punts de l’índex que
s’han anat fent durant el procés d’instal·lació i fer-ne una concreció, adaptada a les
necessitats de documentació que es creguin necessàries.
Tota la documentació necessària per realitzar la instal·lació d’OpenKM i configu-

rar el programa segons els requeriments la trobareu a:
• La web oficial d’OpenKM.
• La wiki oficial d’OpenKM.
Podreu accedir a documentació referent a:
• Instal·lació bàsica per a Windows, Linux i Mac.
• Instal·lació i configuració detallada.
• Primers passos amb el gestor d’arxius documentals web, amb l’entorn

col·laboratiu, etc.
3.4.2 Documentació de les incidències i solucions
Al llarg del temps de vida de l’aplicació web, poden sorgir moltes situacions
imprevistes que poden provocar diversos tipus d’incidències en el funcionament
de l’aplicació, i per extensió en el funcionament de l’empresa o l’organització que
l’estigui fent servir.
Per mirar de fer front a totes aquestes circumstàncies adverses, cal fer un esforç
i imaginar-se totes les situacions que són potencialment probables de succeir.
Després cal mirar de trobar-ne la solució i fer-ne una documentació. Un fòrum arreplegarà molta
informació i pot ser una molt
bona opció per ajudar-vos a
Tant les situacions que són probables que arribin a passar, com les que succeiran, documentar.
cal que estiguin adjuntes a la documentació d’instal·lació i configuració de

l’aplicació web. Documentar una incidència pot consistir senzillament a fer una
breu descripció del problema i una descripció de la solució que s’ha trobat, si és
que se n’ha trobat alguna, o indicar que encara està pendent de resoldre’s.
A banda de mirar de preveure les situacions de risc també convé disposar d’eines i
documentació tècnica que ens puguin ajudar a afrontar les situacions inesperades.
Com més coneixement tinguem del funcionament i implementació de l’aplicació
web, més fàcil serà que hi puguem trobar una solució.
Resulta de gran utilitat conèixer els codis d’error d’una aplicació. Gràcies a la
pràctica de documentar els errors apareguts en diferents entorns es pot generar
una llista. OpenKM codifica els errors utilitzant un codi amb la plantilla: OKM-
XXX-YYY.
• OKM: indica que es tracta un codi d’OpenKM
• XXX: indica l’origen de l’error.
• YYY: indica la causa de l’error.
A mode d’exemple, uns orígens d’error estarien identificats:
• OKM-001 Problema amb l’obtenció de carpetes del servidor.
• OKM-002 Problema amb l’obtenció de documents del servidor.
• OKM-003 Problema amb la connexió remota amb el servidor.
• OKM-004 Problema descarregant una carpeta del servidor..
• OKM-005 Problema pujant un document al servidor.
• OKM-006 Problema amb la sessió de servidor.
• OKM-007 Problema d’autenticació.
• OKM-008 Problema amb una consulta.
• OKM-009 Problema amb les propietats dels grups (metadata).
• OKM-010 Problema amb la notificació d’un servei.
Algunes de les causes dels problemes estan identificades com:
• 001 Causat pel repositori.
• 002 No funciona l’objecte.
• 003 No existeix l’objecte.
• 004 Causat per estar bloquejat.
• 005 Causat per estar desbloquejat.
• 006 Causat per un motiu general.

• 007 Causat per un motiu general (la documentació no especifica diferència

amb el codi 006).
• 008 Causat per l’entorn GWT.
• 009 Causat per denegació d’accés.
• 010 Causat per no suportar el tipus mime.
Tota la llista de codificació d’errors es troba a: http://wiki.openkm.com/index.

php/Error_codes
Totes aquestes situacions han de quedar ben documentades en un arxiu on s’indiqui

clarament la causa del problema i la solució aportada, en cas d’haver-la trobat.
Arxius de registre
La depuració d’errors es realitza a OpenKM bàsicament consultant els fitxers de

log que genera el propi programa. Els fitxers de log són a la carpeta:
1 C:\openkm−6.4.14\tomcat\logs
o bé al directori:
1 var/lib/tomcat/logs
OpenKM genera molta informació que emmagatzema en aquests logs, i per

detectar errors o extreure’n informació molt precisa de l’ús del programa és un
molt bon recurs. La següent línia de codi mostra el tràfic que s’ha generat entre
un client i el servidor durant el procés de desactivació del xat d’un usuari:
1 0:0:0:0:0:0:0:1 − − [26/Feb/2015:18:43:45 +0100] "GET /OpenKM/admin/img/action/

chat_disconnected.png HTTP/1.1" 200 717
Si necessiteu extreure dades molts precises d’un cas en concret és recomanable

netejar el registre i fer una nova adquisició de dades. Atenció, netejar el registre
no vol dir eliminar-lo; netejar el registre implica realitzar una còpia de seguretat
de l’original abans d’eliminar-ne el contingut.
Per iniciar un procés de depurat cal:
1. Pareu Tomcat.
2. Feu una còpia de seguretat de tots els logs i esborreu-ne els antics.
3. Editeu el fitxer C:\openkm-6.4.14\tomcat\conf\log4j.properties
4. Indiqueu la classe que voleu depurar (heu de tenir alguna dada de l’error
que s’està produint)
Tomcat registra les accions que es
realitzen sobre la plataforma.
5. Inicieu Tomcat.
6. Intenteu reproduir les mateixes accions que generaven l’error.

7. Quan es produeixi l’error reviseu el contingut del fitxer C:\openkm-

6.4.14\tomcat\logs\catalina.log.DATA_ACTUAL
Davant de qualsevol situació que genera errors hauríeu d’anar directament a

consultar el registre de logs i estudiar què ha passat.
3.5 Desinstal·lació d’OpenKm
Per desinstal·lar OpenKM s’ha de parar primer el servei d’OpenKM. Amb Win-
dows:
1 C:\openkm−6.4.14\tomcat\bin\shutdown.bat
i amb Linux:
1 $ /RUTA/openkm−6.4.14−community/tomcat/bin/shutdown.sh
A continuació cal que s’executi el programa de desinstal·lació. En sistemes

Windows:
1 C:\openkm−6.4.14\uninstall
i en distribucions Linux:
1 $ /RUTA/openkm−6.2.4−community/uninstall
Sempre és recomanable realitzar la desinstal·lació seguint les indicacions del

desenvolupador i no optar per esborrar els fitxers directament.
Montserrat Madridejos Mora, Jordi Cárdenas Guia
Aplicacions Web
Aplicacions Web Gestors de continguts
Índex
Introducció 5
1 Els sistemes de gestió de continguts 9

1.1 Evolució dels sistemes gestors de continguts . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.2 Selecció d’un sistema de gestió de continguts . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.3 Instal·lació del sistema de gestió de continguts Joomla! . . . . . . . . . . . . . . . . . . . . . 13
1.3.1 Requisits per a la instal·lació de Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.3.2 Dades necessàries per a la instal·lació . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.3.3 Tipus d’instal·lacions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.3.4 Instal·lació de XAMPP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.3.5 El paquet d’instal·lació de Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
1.3.6 Preparar la instal·lació de Joomla! a Ubuntu . . . . . . . . . . . . . . . . . . . . . . . 24
1.3.7 Configuració de la instal·lació de Joomla! . . . . . . . . . . . . . . . . . . . . . . . . 27
1.3.8 Configuració de la base de dades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
1.3.9 Informació general de la instal·lació de Joomla! . . . . . . . . . . . . . . . . . . . . . 30
1.3.10 Iniciar la instal·lació de Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
1.3.11 Comprovar la instal·lació de Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2 Configuració i creació de continguts 35

2.1 Accés al gestor de continguts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.1.1 Accés en mode usuari al front-end i al back-end . . . . . . . . . . . . . . . . . . . . . 37
2.1.2 Accés en mode administrador al front-end i al back-end . . . . . . . . . . . . . . . . . 39
2.2 Els temes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2.2.1 Plantilles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2.2.2 Categories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
2.2.3 Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
2.2.4 Menús . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
2.2.5 Mòduls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
2.3 Gestió d’usuaris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
2.3.1 Crear un usuari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
2.3.2 Crear un grup nou . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
2.4 Gestor multimèdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
2.5 Missatgeria del Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
3 Administració i manteniment d’un gestor de continguts 83

3.1 Administració de components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
3.1.1 Anuncis - Pancartes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
3.1.2 Contactes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
3.1.3 Canals d’informació . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
3.2 Extensions de Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
3.2.1 Instal·lació d’extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
3.2.2 Deshabilitar i desinstal·lar extensions . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Aplicacions Web Gestors de continguts
3.2.3 Gestió de mòduls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

3.2.4 Gestió de complements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
3.2.5 Gestió de plantilles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
3.2.6 Gestió d’idiomes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
3.3 Seguretat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
3.3.1 Recuperar la contrasenya d’administrador . . . . . . . . . . . . . . . . . . . . . . . . 113
3.3.2 Còpies de seguretat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
3.4 Rendiment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
3.5 Actualització de versió . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
3.5.1 Actualitzar Joomla! a la darrera versió . . . . . . . . . . . . . . . . . . . . . . . . . . 119
3.6 Migració . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Aplicacions Web 5 Gestors de continguts
Introducció
Internet s’ha convertit en un pilar de l’anomenada societat de la informació.

Una de les principals aplicacions d’Internet és la navegació web, que permet
visualitzar continguts multimèdia localitzats a qualsevol lloc del món de manera
fàcil i immediata. Podeu accedir a aquests continguts multimèdia des del vostre
ordinador, i també amb els cada vegada més popularitzats nous dispositius mòbils,
que us permeten navegar sense estar lligats a una connexió física estàtica.
En el món actual, qualsevol organització, empresa, institució o associació neces-

sita tenir una presència a Internet que sigui flexible, moderna i amigable. En la
pàgina web es pot explicar el que fa el propietari de l’empresa o la companyia que
l’ha creat. És oberta 24 hores al dia, 7 dies a la setmana, 365 dies a l’any.
Al començament, la creació de les pàgines web era relativament complicada.

S’havia de codificar el codi HTML de la pàgina a mà amb un editor. No calia
ser un expert, però per obtenir resultats atractius s’havia de tenir un interès en el
tema. Una vegada creat el contingut estàtic de la pàgina web, aquest s’havia de
carregar al servidor web mitjançant un programa de transferència de fitxers.
Per obtenir resultats dinàmics i interactius, com ara la gestió d’usuaris o l’en-
viament de missatges a un fòrum, el creador de la web havia d’estudiar un
llenguatge de programació, com PHP. Això feia que la creació de webs dinàmiques
quedés restringida a professionals del camp o s’hagués de contractar una empresa
especialitzada per fer-ho.
En l’actualitat, els gestors de continguts us permeten crear i gestionar webs dinà-

miques interactives de manera fàcil i ràpida, sense haver de tenir uns coneixements
de programació gaire exigents.
En aquest mòdul d’aplicacions web podeu veure diferents eines relacionades amb
el treball amb connexió a Internet: programari que s’instal·la al vostre ordinador
i que necessita Internet per poder oferir les seves funcions i aplicacions que
directament es trobaven en servidors web remots. En aquesta unitat veureu com
crear continguts web d’una manera semiautomàtica amb un gestor de continguts.
Això ens servirà per introduir una unitat que està centrada en la creació de portals
web amb finalitats educatives.
En l’apartat “Instal·lació d’un gestor de continguts” es fa un resum de les caracte-

rístiques dels gestors de continguts, s’enumeren alguns dels gestors de continguts
més populars actualment i finalment s’explica com instal·lar pas a pas un gestor de
continguts en una màquina local. A més a més, s’hi fa la instal·lació d’un sistema
wiki per tal d’elaborar la documentació del projecte.
En l’apartat “Configuració i creació de continguts” veureu els diferents paràmetres

de configuració del gestor de continguts i les diferents eines que Joomla! ofereix
per treballar a l’administrador. També veureu com crear contingut en el lloc web
i menús per estructurar la navegació dins del lloc.
En l’apartat “Administració i manteniment” s’explica com funcionen les extensi-

ons i els components de Joomla!. Instal·lareu un component per crear fòrums de
discussió en el vostre lloc web. Podreu aprendre com millorar la seguretat del
vostre lloc una vegada està en funcionament fent còpies de seguretat, actualitzant
el sistema a la darrera versió i seguint alguns fàcils consells de seguretat.
Per aprofitar millor el contingut d’aquesta unitat és important que aneu fent les
activitats de cada apartat. Penseu en quina web voleu obtenir al final com a
resultat i aneu utilitzant les activitats per anar afegint contingut a la vostra web.
És important que aneu creant la documentació dins de la wiki a mesura que aneu
configurant el portal web i no fer-la tota al final.
En acabar la unitat, heu de ser capaços del següent:
1. Identificar els requisits necessaris per instal·lar gestors de continguts.
2. Gestionar usuaris amb rols diferents.
3. Personalitzar la interfície del gestor de continguts.
4. Fer proves de funcionament.
5. Fer tasques d’actualització del gestor de continguts, especialment les de

seguretat.
6. Instal·lar i configurar els mòduls i menús necessaris.
7. Activar i configurar els mecanismes de seguretat proporcionats pel gestor

de continguts.
8. Habilitar fòrums i establir regles d’accés.
9. Fer còpies de seguretat dels continguts del gestor.

més ús en el sector.
11. Documentar adequadament la instal·lació del gestor de continguts, les

incidències que hi han aparegut i les solucions que s’hi han aportat.
1. Els sistemes de gestió de continguts
La influència de la innovació tecnològica en tots els sectors actuals, ja sigui l’àmbit

domèstic o el món industrial, crea noves necessitats i estimula l’aparició de nous
productes.
Les pàgines web són el mirall emprat per mostrar la informació que es té la
necessitat de comunicar. I amb el pas del temps creix el volum d’informació a
gestionar i mantenir i també augmenta el número d’actors implicats en aquestes
tasques. Aquesta situació provoca la necessitat d’utilitzar una eina de treball
específica: un gestor de continguts.
Un gestor de continguts proporciona l’entorn de treball idoni per actualitzar,

mantenir i ampliar una pàgina web amb la col·laboració simultània de dos o
més usuaris.
L’ús de gestor de continguts proporciona un estalvi molt important en temps. Al

mercat existeixen productes d’accés lliure amb llicències de codi obert. L’ús del
gestor no és exclusiu de pàgines web que treballin amb molts continguts. La
flexibilitat d’aquests programes i la seva escalabilitat els fan realment útils per
a qualsevol usuari que s’encarregui d’una pàgina web. Podem anomenar els
sistemes gestors de
continguts com a Content
El primer que cal fer per a la creació del vostre portal web és instal·lar i configurar Management Systems
(CMS) o Web Content
l’eina que fareu servir per crear-lo: un gestor de continguts. Management (WCM).
No es recomana instal·lar el primer gestor que trobeu. Investigueu una mica les
característiques dels diferents productes que existeixen i analitzeu les necessitats
del client final. Comprovareu que una mateixa solució no es pot aplicar a tots els
casos.
Les tasques pròpies del professional responsable del sistema de gestió de contin-
guts són:
• Instal·lar-lo
• Administrar-lo
• Documentar tots els processos i tasques relacionats
S’entén per administrar un gestor de documents el fet d’adaptar-lo a les necessitats

del client i estar al dia de les seves actualitzacions, ja sigui des del punt de vista
estètic i de continguts com des del punt de vista de la seguretat. A la figura 1.1 es
pot veure què es pot realitzar amb el gestor Joomla!
F igu r a 1. 1 . Administració de Joomla!
Opcions del Panell de Control de Joomla!.
Un gestor de continguts pot tenir, entre altres, alguna de les característiques

següents:
• Identificar diferents tipus d’usuari i els seus rols (allò que podran veure i fer
aquests usuaris).
• Crear continguts de manera ràpida i senzilla.
• Separar el contingut de la seva presentació. Això permet modificar fà-

cilment l’aparença, sense haver de canviar els continguts. A més a més,
ens permet aprofitar els continguts per a diferents usos (per exemple per
visualitzar una mateixa web des d’un ordinador de sobretaula o des d’un
telèfon mòbil).
Hi ha diferents tipus de gestors de continguts en funció de quin sigui el resultat

final que es vol obtenir (un centre de recursos d’una empresa, la documentació
d’un projecte...). Ens centrarem en els gestors de continguts enfocats a obtenir
com a resultat un portal web.
1.1 Evolució dels sistemes gestors de continguts
Els gestors de continguts ja s’utilitzaven a la dècada dels anys 70 del passat segle,
però ha estat tan gran l’evolució en l’àmbit del tractament de la informació, que
hi ha poques semblances entre una aplicació d’aquell temps amb una aplicació
El llenguatge de
programació C++ va ser
actual.
creat l’any 1983 per Bjarne
Stroustrup. És un dels L’any 1984 ja era una realitat fer públiques dades emmagatzemades en un ordi-
llenguatges més populars
que han existit. nador personal, però va caldre esperar a l’any 1995 perquè l’arribada d’Internet
possibilités l’existència dels embrions dels gestors de continguts actuals. Abans
que això succeís, utilitats independents com ara bases de dades, editors d’imatges
i paquets ofimàtics, s’encarregaven de gestionar la informació. En alguns casos

es realitzaven programes a mida amb llenguatges de programació com C++.
Una primera idea de CMS és la que va realitzar l’empresa Illustra Information
Technologies amb el seu programa Illustra. Aquest feia servir una versió comercial
del sistema de gestió de bases de dades Postgres i s’utilitzava com a repositori dels
continguts web.
Un dels exemples a destacar és RedDot CMS, aparegut l’any 1993 i que va acabar
treballant sobre les plataformes ASP.NET i Java. A l’any 1995 va aparèixer el
primer gestor de continguts de codi obert: Portland Pattern Repository. L’any
2000 l’eina PHPNuke popularitza els gestors de continguts i, poc després, a l’any La seguretat al núvol condiciona els
CMS.
2001 irromp a l’escenari el CMS Drupal, un gestor de codi obert que va fer-se amb Font:FutUndBeidl(www.flickr.com)
una part important del mercat. Quatre anys més tard, el 2005, aparegueren els
CMS Alfresco i Joomla!, que es convertiren en la competència directa de Drupal. WAI
La Web Accessibility Initiative
Els actuals CMS apliquen estàndards CSS, XML, XHTML, WAI, etc. i estan (WAI) és una branca del World
Wide Web Consortium que vetlla
dissenyats per treballar amb un ventall molt ampli d’aplicacions, llenguatges de per l’accessibilitat de la Web.
programació i bases de dades.
1.2 Selecció d’un sistema de gestió de continguts

James Robertson és un
dels principals experts
mundials dedicats a estudiar
Per escollir el gestor de continguts més adient s’han de revisar els següents quatre les diferents estratègies i
dissenys que s’han d’aplicar
punts: a les intranet. És l’autor que
proposa aquests quatre
punts.
1. Creació del contingut
2. Gestió del contingut
3. Publicació
4. Presentació
No és necessari que l’usuari que hagi de crear continguts tingui coneixements

tècnics. El creador del contingut ha de centrar tota la seva atenció en el contingut
i no en el programa.
WYSIWYG és l’acrònim de
la frase anglesa What You
La solució més habitual és proporcionar a l’usuari un editor WYSIWYG on es pot See Is What You Get (el que
veus és el que obtens).
veure en temps real com quedarà publicat el contingut.
Els CMS poden incloure altres eines d’edició, però en funció dels coneixements
dels usuaris creadors de continguts potser no en trauran tot el rèdit. No s’ha de
confondre l’ús de les eines de creació de continguts amb les eines que permeten
donar als continguts una estructura, l’aspecte visual o el format de les pàgines.
Gestió del contingut
La configuració de l’estructura de la web es realitza amb una eina que representa

la informació en una estructura jeràrquica. Sempre es permet realitzar canvis en
aquesta estructura.
El contingut està relacionat amb els usuaris, i aquests es poden relacionar i agrupar
entre ells.
Tots els continguts creats es dipositaran en una base de dades i, a més a més,
es registraran amb tota la informació que això suposa (data de creació i de
modificació, usuari que crea el document i qui l’edita, etcètera).
Publicació
Quan es finalitza l’edició d’un contingut aquest es pot publicar. Publicar vol
dir que la informació sigui visible a la web. Es poden crear continguts i
emmagatzemar-los al gestor perquè s’ha decidit retardar la seva data de publicació;
igualment es pot decidir despublicar un contingut visible a la pàgina web.
Presentació
L’accés a la pàgina web i al seu contingut és possiblement la part més important

per a l’usuari. El lector de la web necessita accedir-hi des de diferents navegadors i
dispositius, per tant serà tasca del gestor de continguts gestionar-ne l’accessibilitat.
En moltes ocasions treballar aquest apartat implica la gestió d’un equip de
professionals. El binomi entre l’administrador del sistema i el dissenyador web
resulta molt interessant en aquest cas: el primer organitza i manté el background
de l’aplicació i el segon es preocupa de l’accessibilitat i de l’aspecte visual.
En el mercat hi ha una gran quantitat de gestors de continguts, tant de codi obert i

gratuïts, com de programari comercial i privatiu. Aquesta és una petita llista dels
gestors de continguts de codi obert més populars:
• Joomla!: el 2005 apareix aquest programari ideat per a la gestió de contin-

guts i és un dels més populars. Està programat en PHP, és multiplataforma
i utilitza llicència GNU General Public.
El nom Joomla prové de la
paraula àrab jumla, que es
pronuncia Jumla i que vol dir
‘tots junts’ o ‘en conjunt’. • Drupal: des de la seva aparició l’any 2001 és un referent dels CMS, sobretot
per la seva especialització en el treball sobre blogs. Està programat en PHP,
és multiplataforma i utilitza la llicència GPLv2/GPLv3.
• WordPress: l’any 2003 irromp en l’escenari dels gestors de continguts

especialitzats en blogs. Els últims anys ha superat en ús a Drupal i és una
alternativa seriosa a Joomla!. Programat en PHP, és multiplataforma i amb
llicència GPL.
• Hippo CMS: és un modern gestor de continguts aparegut el 1999. És

molt utilitzat en l’àmbit empresarial tant amb perfil web com intranet. Està
programat en Java, és multiplataforma i amb llicència Apache 2.0.
Hi ha una infinitat d’altres gestors de continguts, com ara Alfresco, Plone,

Symphony, Django, PostNuke... No farem una descripció de cadascun, però tenen
unes característiques semblants. Els gestors de continguts es poden diferenciar
en la manera com s’administren els continguts, la seva implementació interna
(llenguatge de programació i base de dades utilitzada) o a quin sector estan
orientats (empresarial, educatiu...).
Escollirem Joomla! com a gestor de continguts per a aquest curs, ja que és molt
fàcil d’utilitzar, proveeix moltes extensions i és un dels gestors de continguts més El logotip del CMS Joomla! ajuda a
il·lustrar el significat de "Tots junts"
populars i, per tant, dels que tenen una comunitat de desenvolupadors més activa.
Una gran quantitat de llocs web actuals estan dissenyats utilitzant Joomla!, com
ara:
• http://ioc.xtec.cat/educacio/. La pàgina web de l’IOC utilitza Joomla!.
• http://www.cabothouse.com/. Aquest és un exemple d’una pàgina de

disseny. Joomla! interactua amb un bon disseny.
• http://www.ptotoday.com/. En aquest cas es gestiona una gran quantitat

d’informació dinàmicament.
• http://community.joomla.org/showcase/sites.html. Aquí trobareu molts

exemples de pàgines web que utilitzen Joomla!.
L’administrador no ha de realitzar necessàriament la tasca de manteniment del

web. El més habitual és que un professional del disseny treballi en equip amb
l’administrador, i un es dediqui a la part artística i l’altre a la part tècnica.
1.3 Instal·lació del sistema de gestió de continguts Joomla!
Quan s’acaba decidint instal·lar un sistema de gestió de continguts com Joomla!

és necessari realitzar un estudi previ dels requisits del programa, de les diferents
versions del programa i dels punts forts i febles que presenta.
Si necessiteu que el programa funcioni en local la quantitat de paràmetres a tenir

en compte seran petits, però si la instal·lació ha de pertànyer a una intranet o bé
heu de donar servei a través d’Internet cal que reviseu els paràmetres de la xarxa
i del sistema informàtic.
1.3.1 Requisits per a la instal·lació de Joomla! Zlib (www.zlib.net) és una

llibreria de programari
utilitzada en la compressió
de dades.
Per instal·lar i usar el Joomla! necessiteu un servidor web (preferiblement
Apache), una base de dades (preferiblement MySQL) i el llenguatge script de Joomla!
servidor PHP, juntament amb els mòduls específics del MySQL, XML i Zlib La versió de Joomla! utilitzada
ha estat desenvolupada per al
funcionant. servidor web Apache versió 2.x
+, tot i que funciona
correctament en altres servidors
En la taula 1.1 podeu veure les versions mínimes i recomanades dels programes (com l’IIS de Microsoft).
que heu de tenir instal·lats perquè el Joomla! funcioni correctament. Es pot dir el mateix de les bases
de dades. El MySQL és l’opció
òptima, encara que amb SQL
Server i PostgreSQL també
funciona.
Taul a 1. 1. Versions de programari necessàries
Programari Versió recomanada Mínima Web
PHP 5.3.10 + 5.4 + http://php.net
MySQL (requerix suport 5.1 + 5.1 + http://www.mysql.com

InnoDB)
Apache 2.x + 2.x + http://www.apache.org/
Joomla! també suporta les opcions alternatives de programari que es mostren a la

taula 1.2
Taul a 1. 2. Versions de programari alternatives
Programari Versió recomanada Mínima Web
SQL Server 10.50.1600.1+ 10.50.1600.1+ http://www.microsoft.com/sql
PostgreSQL 8.3.18 + 8.3.18 + http://www.postgresql.org/
Nginx 1.1 1.0 http://wiki.nginx.org/
Microsoft IIS 7 7 http://www.iis.net/
Cal que us assegureu que teniu les funcionalitats del MySQL, XML i Zlib
activades dins de la vostra instal·lació del PHP. Això ho podeu comprovar en el
fitxer de configuració php.ini a la carpeta d’instal·lació del PHP (depèn del sistema
El nom Ubuntu prové de la on ho heu instal·lat, consulteu la documentació de la vostra instal·lació).
paraula zulú ubuntu, que vol
dir ‘humanitat vers els
altres’. De la mateixa manera, el Joomla! ha estat testat en moltes variants dels sistemes
operatius GNU/Linux, Apple Mac OSX i Microsoft Windows. Pot funcionar
en altres plataformes, però no està tan documentat. El present material ha
estat elaborat sobre una instal·lació en un ordinador amb el GNU/Linux amb la
distribució Ubuntu. Per tant, les captures de pantalla i els directoris que es veuran
corresponen a aquest sistema. Hi poden haver petites diferències respecte d’altres
sistemes, que els alumnes haureu de resoldre, ja que no es poden cobrir totes les
possibles combinacions de sistemes operatius i distribucions. A l’enllaç podeu
trobar gratuïtament la darrera versió de l’Ubuntu.
Joomla! funciona correctament sobre la gran majoria de navegadors web. Els

equips de desenvolupadors del projecte Joomla! testegen regularment el producte
La distribució Linux Ubuntu permet
treballar amb Joomla! sobre diferents plataformes per revisar les diferents funcionalitats. Els materials
actuals estan realitzats utilitzant el navegador Chrome (versió 42.0.2311.135) i
Per obtenir més informació sobre sistemes Windows i Ubuntu.
de l’Ubuntu en català,
visiteu http:
Una vegada conegudes les necessitats de Joomla! només caldrà buscar la màquina
//www.ubuntu.cat/.
adient i aplicar les opcions de configuració més eficients.
En el moment de generar
una contrasenya s’ha de
contemplar que: contingui 1.3.2 Dades necessàries per a la instal·lació
més de sis caràcters dels
quals dos siguin numèrics,
no ha de contenir dades
refernts a l’usuari i una Abans de realitzar la instal·lació de Joomla! és necessari que decidiu una sèrie de
mateixa contrasenya no
s’ha d’utilitzar per a més dades molt importants que haureu d’indicar a la primera etapa de la instal·lació:
d’un ús.
• Nom del lloc: nom de la pàgina web.

• Descripció: escrit que utilitzaran els motors de cerca. El més apropiat és

que no excedeixi els 25 mots.
• Adreça de correu electrònic de l’administrador: aquest serà el correu

on l’administrador rebrà les notificacions. Si per exemple es perd la
contrasenya aquest correu rebrà un enllaç que permetrà realitzar les accions
de recuperació de contrasenyes.
• Nom d’usuari de l’administrador: el nom per defecte de superusuari és

admin, però es recomana canviar-lo per un altre identificador.
• Contrasenya d’administrador: aquesta és la contrasenya del superusuari

que s’indica en el punt anterior.
• Lloc fora de línia: si marqueu l’opció Sí el vostre web indicarà que es

troba fora de línia quan s’accedeixi des d’Internet. Si marqueu No el lloc
web romandrà publicat quan s’accedeixi des d’Internet.
Joomla! necessita una base
de dades instal·lada per
poder funcionar.
El següent pas serà configurar la base de dades, i necessitareu disposar d’una sèrie
de dades:
• Tipus de base de dades: podeu escollir entre diversos tipus de base de

dades.
• Nom del servidor: on està instal·lada la base de dades. Si esteu treballant

en local el més habitual és que es trobi a localhost.
• Nom d’usuari: identificador utilitzat per accedir a la base de dades. És

imprescindible que aquest usuari disposi de tots els permisos necessaris per
treballar amb la base de dades.
• Contrasenya: contrasenya per tenir accés a la base de dades.
• Nom de la base de dades: identificador de la base de dades.
• Prefix de la taula: les taules que es crearan a la base de dades vinculada al

Joomla! utilitzaran aquest prefix. Aquest prefix el podeu indicar vosaltres
o bé es generarà automàticament.
• Processar base de dades antiga: si existeix una base de dades antiga

lligada al Joomla! s’eliminarà o bé se’n realitzarà una còpia de seguretat.
Tots aquests valors es poden canviar una vegada estigui la instal·lació realitzada,
però es recomana no fer-ho i indicar en aquesta finestra les dades definitives.
L’últim pas a realitzar abans d’iniciar la instal·lació és decidir si instal·leu dades

d’exemple (així hi haurà algun contingut d’exemple a la web), si voleu rebre
els paràmetres de la configuració quan finalitzi la instal·lació (opció molt útil
per documentar el procés) i revisar les dades configurades que s’aplicaran a la
instal·lació.
Si no heu de realitzar cap canvi ja podeu clicar al botó Instal·lar.

Quan finalitza el procés d’instal·lació es mostra una pantalla amb informació molt
important. Primer de tot cal esborrar la carpeta emprada per a la instal·lació.
Aquest pas el podeu realitzar des d’aquesta mateixa finestra clicant al botó
Esborrar de la carpeta d’instal·lació. També des d’aquí podreu accedir al lloc
amb el botó Lloc (és el front-end) o bé accedir a l’administració amb el botó
administrador (fack-End).
1.3.3 Tipus d’instal·lacions
El gestor de continguts Joomla! s’utilitza en entorns locals i en entorns remots.

L’elecció del tipus d’instal·lació dependrà de les necessitats de l’organisme que
gestioni la informació.
Un dels grans avantatges de l’ús de Joomla! és que les úniques diferències que hi
ha treballant amb aquests tipus d’instal·lacions es troben a l’inici de la instal·lació.
Instal·lació en local
La instal·lació en local (el que en anglès s’anomena localhost) fa referència a un

servidor web i una base de dades que està instal·lada, configurada i funcionant
directament en el vostre ordinador. Al contingut de les webs es pot accedir des del
propi ordinador o des de qualsevol altre que es trobi en la mateixa xarxa d’àrea
local. Com a administrador teniu accés directe a la màquina en què està instal·lat
el programari.
Instal·lació en remot
Quant a una instal·lació en un host remot, aquesta es fa en una màquina que està
accessible a través d’Internet. Aquesta màquina pot ser pròpia, o pot estar llogada
a una companyia d’hostatge (hosting). No teniu accés directe a la màquina on
s’està executant el servidor web, i per fer modificacions dels fitxers s’ha de fer
remotament o s’han de fer les modificacions en fitxers locals i carregar els canvis
al servidor mitjançant un programa de transferència de fitxers, com un client de
l’FTP.
Els repositoris són servidors
que tenen les darreres
versions dels paquets d’una
Joomla! permet accedir a una demo en línia on testejar el producte: https://demo.
distribució del GNU/Linux joomla.org/. Aquesta opció permet explorar el programari abans de realitzar cap
en particular. És molt fàcil
baixar i instal·lar els paquets actuació sobre el vostre sistema.
amb el gestor de paquets
que sol venir inclòs en la
mateixa distribució. Quan es decideix implantar per primera vegada Joomla! una de les opcions més
Podeu trobar en la secció aconsellables és utilitzar el paquet XAMPP.
“Annexos” d’aquesta unitat
una guia d’instal·lació dels
serveis necessaris, tant Moltes distribucions del GNU/Linux vénen amb tot allò necessari directament en
per un sistema GNU/Linux
com per Microsoft la distribució mateixa o en els repositoris per baixar. Segons el tipus de distribució,
Windows. la instal·lació s’ha de fer d’una manera o d’una altra.
És molt important que tingueu a mà les dades de nom d’usuari i

contrasenya de la base de dades MySQL que acabeu d’instal·lar. Escriviu
en un lloc segur aquesta informació, ja que la necessitareu per configurar el
Joomla! i la wiki en la vostra màquina.
XAMPP prové de l’acrònim
de X (qualsevol sistema
La instal·lació de Joomla! i de XAMPP requerirà que treballeu en equip amb operatiu), Apache, MySQL,
PHP i Perl.
la persona encarregada del manteniment del sistema que ha d’allotjar ambdós
paquets de programari. És molt possible que necessiteu permisos d’administració
en diverses etapes de la instal·lació.
1.3.4 Instal·lació de XAMPP
Per la facilitat del procés d’instal·lació i del manteniment que suposa, s’instal·larà
el paquet XAMPP.
El paquet de programari lliure XAMPP conté el servidor Apache la base de

dades de MySQL i les eines necessàries per utilitzar el PHP i el llenguatge
de programació Perl.
PHP
El primer que cal és descarregar el fitxer d’instal·lació de la web: https://www. PHP és un llenguatge de
programació interpretat que
apachefriends.org/es/download.html s’executa en el servidor. PHP va
ser dissenyat per crear pàgines
web dinàmiques.
Les versions per a diferents plataformes són:
• XAMPP per a Windows 5.5.24 & 5.6.8
• XAMPP per a Linux 5.5.24 & 5.6.8
• XAMPP per a OS X 5.5.24 & 5.6.8
Una vegada descarregat el fitxer d’instal·lació només cal executar-lo i seguir el

procés que s’indica. La utilització de tallafocs,
antivirus o els permisos de
l’usuari utilitzat poden
El primer que apareix a la instal·lació, tal i com es veu a la figura 1.2, és la provocar que el procés
d’instal·lació pateixi parades
presentació del programa. Com es pot veure l’empaquetat s’ha realitzat sobre i requereixi de la interacció
de l’administrador.
Bitnami, que també ofereix WordPress, Drupal, MediaWiki i eXo Platform.
F igu r a 1. 2 . XAMPP
Finestra inicial de la instal·lació de XAMPP
La següent finestra és molt important (figura 1.3), ja que permet seleccionar els
components a instal·lar. Cal destacar que estan preseleccionats Apache i PHP.
F igu r a 1. 3 . XAMPP, components
Selecció de components a instal·lar

A continuació cal indicar el directori on s’instal·larà XAMPP. Per defecte aquesta

es realitzarà al directori arrel (figura 1.4), dins de la carpeta anomenada xampp,
però podeu seleccionar el directori més adient per al vostre cas particular.
Fi g ura 1 .4. XAMPP, perfil d’instal·lació
Sel·leccioneu el directori destí de la instal·lació del programa
Una vegada seleccionats els components i escollida la ubicació destí només cal
iniciar la instal·lació del XAMPP (figura 1.5).
Fi g ura 1 .5. XAMPP, inici de la instal·lació
Procès inicial on es realitza el tractament de fitxers

Automàticament es realitzen tots els processos necessaris i s’apliquen els pocs

tocs de configuració que recauen en l’usuari. La barra de procés indica l’estat de
la instal·lació (figura 1.6).
Figu r a 1. 6. XAMPP, interacció
Durant la instal·lació el programa anirà informant del procés
Quan finalitza la instal·lació una finestra ens avisa i, a continuació, automàtica-

ment apareixerà el panell de control, tal i com es pot observar a la figura 1.7.
Depenent de la màquina el temps que triga a aparèixer en pantalla aquest panell
varia.
Fig u ra 1 . 7 . XAMPP, panell de control
Panell de control amb tots els serveis parats
Aquest panell de control és un exemple perfecte del funcionament de XAMPP.

Des d’aquí es té tot el control sobre el programari instal·lat; podeu iniciar i parar
serveis, obrir terminals per realitzar tasques administratives, podeu automatitzar

processos... De moment només cal clicar a sobre dels botons Start per iniciar els
serveis (figura 1.8).
Fi g ura 1 .8. XAMPP, panell de control 2
Activació de tots els serveis
PID és l’identificador del

procés. Aquest valor
numèric és únic per a cada
Quan s’activen els serveis s’assigna un PID i s’obren uns determinats ports. És procés.
necessari que el tallafocs permeti aquest accés i que l’administrador de sistemes i

xarxa en tingui constància.
Ja heu de tenir el servidor web funcionant. Abans de continuar, assegureu-vos

que el servidor estigui funcionant correctament. Per fer la comprovació, creeu un
petit fitxer PHP i comproveu que hi podeu accedir des d’un navegador web. És
important entendre que no és el navegador el que està obrint el fitxer directament,
sinó que està fent una petició web al servidor que acabeu d’instal·lar de la mateixa
manera que la faria si el servidor s’estigués executant en una màquina remota.
Això vol dir que el client (en aquest cas el navegador web) fa una petició d’un
fitxer PHP al servidor. Aquest fitxer serà processat pel servidor, qui tornarà al
client la resposta al fitxer PHP en forma d’un resultat web codificat amb l’HTML.
Per comprovar això, podeu veure el codi resultant del fitxer amb l’opció Vegeu
codi font de la pàgina del vostre navegador.
A més a més, el fitxer que demanareu no serà una pàgina web estàtica confecciona-
da amb l’HTML, sinó una de dinàmica amb el PHP. Per tant, estareu comprovant el
funcionament del servidor, ja que aquests fitxers no són interpretables directament
per part del navegador web.
Si esteu treballant amb Windows i heu realitzat la instal·lació per defecte aneu al
directori:
Un editor de text pla...
1 C:\xampp\htdocs
... és el que no afegeix
informació extra, com ara
informació de format, al text que
s’escriu. Podeu fer servir
Creeu un fitxer anomenat info.php i utilitzant un editor de text pla escriviu a programes com el Gedit al
l’interior: GNU/Linux o el Bloc de Notes
al sistema Windows.
1 <?php
2 // La informació actual de PHP és:
3 phpinfo();
4 ?>
Aquest fitxer l’haureu de guardar en el directori principal del servidor web. En el

cas de la instal·lació de l’Apache a l’Ubuntu, la ruta és:
1 /var/www
Si preferiu no editar codi teniu l’opció de carregar directament la informació que

ja proporciona XAMPP. Obriu el navegador i escriviu l’adreça:
1 http://localhost/xampp/
Cliqueu l’enllaç que trobareu a l’esquerra i que està etiquetat com a phpinfo() i
apareixerà tota la informació del PHP (figura 1.9).
Fi gur a 1 .9 . XAMPP instal·lat correctament!
Comprovació de la instal·lació de XAMPP amb la informació de PHP
Farem una breu explicació del contingut del fitxer per comprendre què estem fent.
En el codi es marquen el començament i el final de codi PHP amb <?php i ?>
perquè el servidor sàpiga on comença el codi PHP que ha d’interpretar (la majoria
de les vegades, el codi PHP està barrejat amb codi HTML).
La línia que comença amb // serveix per indicar que tot el contingut de la línia
són comentaris adreçats al programador. L’intèrpret del servidor no farà cas
d’aquesta línia. Finalment es fa una crida a la funció phpinfo(), que ens retornarà
informació relativa a la instal·lació del PHP. El servidor, quan interpreta aquest
fitxer, substitueix tot aquest codi amb un codi HTML, que forma la pàgina web.
Esborreu el fitxer info.php del directori del servidor web després de

comprovar que funciona correctament i que teniu la informació que
necessiteu. Deixar aquest fitxer en el servidor web és un risc de seguretat.
Si necessiteu aquesta informació més endavant, la podeu trobar des d’una
opció del menú d’ajuda del Joomla!
A partir d’ara assumirem que teniu un sistema funcionant com a servidor web amb
l’Apache, MySQL i PHP.
1.3.5 El paquet d’instal·lació de Joomla!
El programa gestor de continguts Joomla! per funcionar necessita que el servidor

web estigui instal·lat i activat.
La descàrrega de l’última versió del programa Joomla! es recomana que es realitzi

des de la pàgina web oficial:
1 http://www.joomla.org/
Si cliqueu a Download us apareixerà l’accés a la versió 3.4 Full Package (vegeu

figura 1.10), utilitzada per elaborar aquests materials.
F ig ur a 1. 10. Paquet Joomla!
Descàrrega del paquet d’instal·lació de Joomla!
Necessitareu disposar al
vostre equip d’un programa
descompressor que permeti
Es descarregarà un fitxer en format ZIP al vostre equip dins de la carpeta de extreure el contingut del
fitxer ZIP.
descàrregues configurada al vostre navegador web.
Heu de moure el fitxer ZIP a la carpeta que utilitzareu per a la instal·lació. Si esteu realitzant la
instal·lació en un servidor
necessitareu utilitzar un
Descomprimiu el contingut del fitxer mitjançant el menú contextual del programa servidor FTP per transferir
els fitxers des de la màquina
o bé des de la línia de comandes, que en el cas d’una distribució Linux serà: local al servidor.
1 $ sudo unzip Joomla_3.4.1−Stable−Full_Package.zip [DESTÍ]

Del resultat de descomprimir el fitxer n’obtindreu una carpeta amb el contingut de

la figura 1.11.
F igu r a 1. 1 1 . Instal·lació de Joomla!
Directori de màquina local del paquet instal·lador de Joomla!
Aquesta carpeta l’haureu d’esborrar quan finalitzi tot el procés d’instal·lació.
Ara ja teniu tot allò necessari per iniciar la instal·lació del programa Joomla! al
vostre equip local o al servidor remot. Cal recordar la importància de realitzar
una bona documentació de tot el procés, deixant constància dels passos seguits i
registrant les incidències trobades, així com les solucions aplicades.
1.3.6 Preparar la instal·lació de Joomla! a Ubuntu
La instal·lació de Joomla! en un sistema operatiu Ubuntu es realitza d’una forma

gairebé tutoritzada en la seva totalitat. Només cal respondre una sèrie de preguntes
referents a la configuració del vostre sistema. Per començar cal descarregar el
fitxer d’instal·lació (figura 1.12).
F igu r a 1. 1 2 . Paquet de dades de Joomla! descarregat
Fitxer d’instal·lació de Joomla! en local
Per poder instal·lar Joomla! és imprescindible tenir funcionant a l’equip destí una
sèrie de paquets. La instal·lació la podeu realitzar amb la línia que es pot veure a
la figura 1.13.
Fi gura 1 .13 . Instal·lació de paquets
Línia de consola per instal·lar paquets necessaris
Si tot funciona correctament i es té accés al repositori de fitxers es mostraran

els paquets a instal·lar i us demanarà per primera vegada que interaccioneu. Si
contesteu S continuarà la instal·lació (figura 1.14).
F ig ur a 1. 14. Arbre de dependències
Generació de l’arbre de dependències del paquet de Joomla!
La instal·lació del paquet demana una contrasenya vàlida per a l’usuari root de
MySQL (figura 1.15):
F igu r a 1. 1 5 . Configuració de la base de dades
Paraula de pas per a l’usuari root a MySQL
Sempre es demana tornar a introduir la contrasenya per tal de comprovar que

aquesta dada és coneguda per l’usuari que està realitzant la instal·lació. No oblideu
aquesta contrasenya, la necessitareu més endavant (figura 1.16).
F igu r a 1. 1 6 . Confirmació de contrasenya de MySQL
S’ha de tornar a introduir la paraula de pas per a l’usuari root a MySQL
Una vegada finalitzada la instal·lació del MySQL i per assegurar-vos que tot
funciona correctament podeu intentar accedir utilitzant una finestra del terminal
(figura 1.17):
Figur a 1. 17. MySQL accessible
Prova d’accés al MySQL
Ja podeu descomprimir el fitxer d’instal·lació de Joomla! i iniciar-ne la ins-

tal·lació.
Reviseu els permisos del fitxer d’instal·lació i de la carpeta que utilitzareu!
Per descomprimir podeu utilitzar la línia que apareix a la figura 1.18.
F ig ur a 1 . 18 . Tractament del fitxer d’instal·lació
Descompressió del fitxer d’instal·lació des de la consola
A partir d’aquí la instal·lació es realitza utilitzant un navegador web i els passos

són idèntics independentment del sistema operatiu utilitzat, per tant cal que obriu
el vostre navegador preferit i indiqueu a la barra d’adreces l’adreça web:
1 http://localhost/joomla/installation/index.php
1.3.7 Configuració de la instal·lació de Joomla!
Una vegada preparat tot l’entorn d’instal·lació de Joomla! cal configurar uns
paràmetres bàsics d’instal·lació. Per començar podeu escollir l’idioma que
s’utilitzarà, tal com es mostra a la figura 1.19.
F igu r a 1. 1 9 . Idioma
Selecció de l’idioma en la configuració d’instal·lació
Si es canvia l’idioma es pot observar que immediatament també canvia l’idioma

de l’entorn d’instal·lació.
Els paràmetres a indicar són:
• Nom del lloc: és l’identificador del lloc web.
• Descripció: aquí heu d’escriure una descripció acurada del lloc web. El
que estigui escrit en aquesta capsa és utilitzat pels motors de cerca.
• Adreça de correu de l’admin: aquesta és l’adreça de correu electrònic de

l’administrador del Joomla!. S’utilitza aquesta adreça per enviar notificaci-
ons del CMS.
• Nom de l’administrador: identificador de l’usuari amb perfil Super User

(superusuari). Aquest usuari té el rang més gran dins del Joomla!.
• Contrasenya de l’administrador: paraula de pas de l’usuari administra-

dor.
• Confirmar la contrasenya de l’administrador: heu de tornar a escriure

la contrasenya de l’usuari administrador.
• Lloc fora de línia: podeu deixar la web fora de línia mentre hi treballeu.
Una contrasenya ha de ser única per a cada entorn, ha d’utilitzar lletres,

números i símbols, alterneu majúscules i minúscules, no utilitzeu dades
personals com a contrasenya, no deixeu rastre de la contrasenya i canvieu-la
periòdicament.
A la figura 1.20 es pot veure un exemple de configuració:

Figur a 1. 20. Resum de la instal·lació
Finestra de configuració amb dades
1.3.8 Configuració de la base de dades

Si esteu realitzant una
instal·lació en local
habitualment el nom del
Una vegada configurada la instal·lació de Joomla! és necessari configurar els servidor és localhost.
paràmetres de la base de dades que utilitza el CMS per treballar. Necessiteu saber:
• Tipus de base de dades: podeu escollir entre MySQL, MySQLi i MySQL

(PDO).
• Nom del servidor: identificador del servidor que allotja la base de dades.
• Nom d’usuari: identificador amb accés a la base de dades.
• Contrasenya: paraula de pas per accedir a la base de dades.
• Nom de la base de dades: nom de la base de dades que utilitzarà Joomla!.
• Prefix de taula: les taules de Joomla! les identificareu amb aquest prefix.
• Processar l’antiga base de dades: podeu realitzar una còpia de seguretat de

la base de dades de Joomla! que es trobi ja instal·lada o bé podeu reemplaçar-
la amb aquesta instal·lació.
La figura 1.21 mostra una fitxa emplenada amb dades:
F igu r a 1. 2 1 . Resum de la base de dades
Finestra de configuració amb dades de la base de dades
1.3.9 Informació general de la instal·lació de Joomla!
Abans de finalitzar el procés de configuració i iniciar la instal·lació de Joomla!

s’ofereix una pantalla on es resumeixen totes les dades de la instal·lació. A més a
més de poder fer l’última revisió es poden acabar de configurar alguns detalls:
• Instal·lar dades d’exemple: si es desitja es poden afegir dades fictícies

a la instal·lació i així veure algunes de les possibilitats de Joomla! amb
exemples.
• Configuració per correu electrònic: aquesta opció permet enviar al comp-

te de correu de l’administrador la configuració de Joomla!. És recomanable
utilitzar aquesta possibilitat, ja que és el nucli de la documentació de
Joomla!.
• Incloure les contrasenyes al correu electrònic: poc recomanable enviar

per correu les contrasenyes.
Per exemple, a la figura 1.22 es mostra com podria quedar la configuració final:
Figur a 1. 22. Configuració final
Finestra resum de la configuració
1.3.10 Iniciar la instal·lació de Joomla!
Ara només cal clicar al botó Instal·lar situat al marge superior dret i s’iniciarà la
instal·lació de Joomla! (figura 1.23):
Figur a 1 . 23 . Joom-la! Instal·lant-se
El procés d’instal·lació és molt ràpid
Quan finalitza la instal·lació de Joomla! és molt important esborrar el directori

d’instal·lació. Aquest pas es pot realitzar a mà, però es recomana utilitzar el botó
habilitat que apareixerà en pantalla quan s’acabi la instal·lació (figura 1.24):
F igu r a 1. 2 4 . Esborrar la carpeta d’instal·lació
Important no saltar-se aquest pas!
Arribats a aquest punt ja es pot donar per instal·lada l’aplicació.
1.3.11 Comprovar la instal·lació de Joomla!
Per comprovar la correcta instal·lació de Joomla! es poden realitzar dos exercicis:
• Accedir al front-end: escriviu a la barra de direccions del navegador web

l’adreça:
1 localhost/joomla
i apareixerà la pàgina web (figura 1.25):

Figur a 1. 25. Front-end de Joomla!
A Joomla podem accedir al //Front-end// i al //Back-end//
En aquests moment l’únic usuari que existeix és el superusuari (Super user), que
podeu utilitzar per validar l’accés i es podrà carregar la pàgina web amb un usuari
registrat (figura 1.26):
F ig ur a 1 . 26 . Accedint al Front-end de Joomla!
Front-end de Joomla! amb un usuari validat
• Accedir al back-end: escriviu a la barra de direccions del navegador web

l’adreça:
1 localhost/joomla/administrator
i apareixerà la pàgina web (figura 1.27):

F igu r a 1. 2 7 . Back-end de Joomla!
Finestra d’accés al Back-end del programa
Utilitzeu les dades del superusuari (Super user) per comprovar que s’accedix sense
problemes al back-end (figura 1.28):
F igu r a 1. 2 8 . Back-end de Joomla! amb un usuari
Aspecte del Back-end de Joomla accedint amb un usuari amb privilegis

2. Configuració i creació de continguts
Un dels objectius principals de qualsevol gestor de continguts web és permetre

de forma molt senzilla configurar i crear continguts. Però abans de fer res és
important tenir clar l’objectiu de la web. Per aquest motiu, abans d’entrar al gestor
cal que us contesteu les següents preguntes:
1. Per a què ha de servir la pàgina web?
2. Quin tipus d’informació s’haurà de gestionar?
3. Quin pes tindrà tota aquesta informació?
4. Qui serà l’usuari habitual que consultarà la web?
5. Com s’interactuarà amb la web?
6. Quin temps pots dedicar al manteniment i gestió de la web?
Quan tingueu respostes clares a aquestes preguntes serà el moment d’abordar la

configuració del gestor de continguts i començar a crear continguts que l’omplin.
El primer pas per a la creació d’un lloc web és la preparació i instal·lació del
programari necessari per fer-lo funcionar en la màquina que finalment allotjarà el
lloc web. Aquesta preparació inclou la instal·lació d’un servidor web, un servidor
de bases de dades, un llenguatge de creació de pàgines web dinàmiques i un
programari de gestor de continguts (vegeu figura 2.1).
F ig ur a 2. 1. Gestió de continguts
Eficiència i efectivitat es donen la mà amb Joomla!
Una vegada fet això, podeu començar a treballar sobre el lloc web. El primer
pas que heu de fer en aquest apartat és una petita visita a l’aparença del lloc
web (el front-end) i a la interfície de configuració reservada als administradors
(l’anomenat back-end).
A continuació veureu els diferents menús de configuració global del lloc. Les
opcions d’aquests menús controlen com es comportarà el lloc web quan sigui
visitat pels usuaris. També veureu algunes eines útils per als administradors, com
ara els serveis de missatgeria i el gestor de continguts multimèdia del lloc.
En un lloc web complex és normal tenir diferents tipus d’usuaris amb permisos
diferents dins del lloc. El Joomla! permet una gestió dels usuaris del lloc web i un
control de les accions que podran fer. Al mateix temps defineix una sèrie d’usuaris
d’administració per a la gestió del lloc web.
El CMS Joomla! està desenvolupat per The Joomla Project Team.
El vostre lloc web serà un espai on compartir informació que es podrà visitar
des de qualsevol lloc del món a través d’Internet. La informació en el Joomla!
està organitzada en forma d’articles. Quan el vostre lloc creixi en continguts, la
quantitat d’articles es pot multiplicar i fer-ne molt difícil la gestió. El Joomla!
permet una organització jeràrquica dels articles definint categories i seccions.
De la mateixa manera que la informació està estructurada internament en el vostre

web en articles i seccions, la manera d’accedir a aquesta informació també es pot
estructurar mitjançant l’ús de menús de navegació en el lloc web. El Joomla! conté
una gran quantitat de tipus de menús diferents que permeten accedir de diferents
maneres al contingut del vostre lloc i crear contingut nou.
2.1 Accés al gestor de continguts
A un gestor de continguts es pot accedir per dues vies diferents: el front-end i el

back-end.
Els programes informàtics que interactuen amb les persones necessiten utilitzar
eines visuals per mostrar la informació.
El front-end d’una pàgina web és la part visible per a qualsevol usuari quan
es carrega al navegador l’adreça web.
Per accedir al front-end de Joomla! cal escriure l’adreça:
1 http://localhost/joomla
Per mantenir i administrar un lloc web és necessari accedir a la seva configuració.

Normalment aquesta configuració es pot realitzar en un entorn de finestres.
El back-end d’una pàgina web és el programa que permet configurar i

administrar els continguts que es mostren al front-end.
El back-end és l’entorn de treball de l’administrador, i com a eina de treball bàsica

requereix un ampli coneixement de totes les seves possibilitats.
El panell de control permet configurar el gestor de continguts i està situat

al back-end del programa.
S’ha de tenir molta cura amb els accessos al back-end. És imprescindible controlar
quins usuaris hi tenen accés i quins són els permisos de què disposen. Una
incorrecta administració d’accessos pot tenir efectes desastrosos en la web.
Per accedir al back-end de Joomla! cal escriure l’adreça:
1 http://localhost/joomla/administrator
No heu de confondre aquestes vies d’accés al gestor de continguts amb els modes
d’accés. Els dos modes d’accés a un gestor documental són:
1. Mode Usuari
2. Mode Administrador
Aquests dos perfils tenen característiques molt diferenciades que cal treballar amb
més profunditat.
2.1.1 Accés en mode usuari al front-end i al back-end
L’accés en mode usuari al front-end mostra la informació penjada al servidor web.

Si acabeu d’instal·lar Joomla! l’aspecte no aporta gairebé res especial. Escriviu a
la barra d’adreces web del vostre navegador:
1 http://localhost/joomla/
i es carregarà una pàgina semblant a la que es mostra a la figura 2.2.
Figur a 2. 2. Accés al front-end per a un usuari
Vegeu l’apartat “Crear un

usuari” d’aquesta unitat, on
s’explica com crear usuaris.
A continuació es mostrarà l’aspecte del back-end per a un usuari diferent al

superusuari.
Primer escriviu a la barra d’adreces web del navegador:
1 http://localhost/joomla/administrator/
i es carregarà la pàgina web tal com es mostra a la figura 2.3.
Fig u ra 2 . 3 . Accés al back-end per a un usuari
Què ha passat? Doncs que amb Joomla! teniu la possibilitat de gestionar permisos
d’usuaris i, per seguretat, en aquest cas l’usuari jcasadejust no pot accedir al back-
end de la pàgina web.
2.1.2 Accés en mode administrador al front-end i al back-end
L’accés al front-end de la pàgina web amb un usuari administrador es realitza

primer carregant la web:
i ara utilitzant un compte de superusuari per validar l’accés. La figura 2.4 mostra
el resultat:
Figur a 2. 4. Accés al front-end per a un usuari administrador
Si s’ha instal·lat Joomla! en

un servidor web extern s’ha
d’indicar al navegador web:
http://www.
Tal com es pot comprovar, l’aspecte del front-end no varia quan el Joomla! s’acaba direccio_web.com/
d’instal·lar i hi accedim amb un usuari administrador o un usuari normal. administrator
Accedint al back-end, però, sí que podem observar-hi canvis. A la barra d’adreces

del navegador web escriviu:
1 localhost/joomla/administrator
A continuació escolliu un identificador d’usuari amb perfil administrador i la

contrasenya corresponent i inicieu la sessió.
Si les dades introduïdes són correctes accedireu al panell de control de Joomla!

(vegeu figura 2.5).
F igu r a 2. 5 . Accés al back-end per a un usuari administrador
Per finalitzar la sessió amb aquest usuari podeu desplegar el botó situat al marge
superior dret de la pantalla i clicar a Desconnecta.
2.2 Els temes
La gestió i estructura dels continguts a Joomla! es realitza amb els topics o temes.
Aquests temes són la base del funcionament del gestor de continguts i és necessari
conèixer la utilitat de cadascun d’ells. Els temes són:
• Plantilles: les plantilles permeten gestionar de forma eficient el format

en què es mostra la informació a la web. El seu objectiu és integrar el
contingut i les aplicacions. En resum, s’encarreguen de presentar les dades
als visitants de la web.
• Categories: les categories i subcategories s’utilitzen per organitzar i mos-

trar els continguts d’una forma lògica.
• Articles: els articles són els continguts bàsics que Joomla! mostra a la web.
• Menús: els menús marquen la navegació de la web.
• Mòduls: els mòduls són extensions de Joomla! que afegeixen funcionalitats

al CMS.
2.2.1 Plantilles
Quan accediu a una pàgina web i navegueu pels diferents apartats podeu compro-
var que l’aspecte és sempre igual. El fons de la pantalla, la forma i color dels
botons, l’estil del text... aquesta homogeneïtat es valora molt positivament per
part de l’usuari que visita la pàgina web.
Una plantilla és una extensió que canvia l’estil de la pàgina web.

Plantilla és Template en
català.
A Joomla! podeu trobar dos tipus de plantilles:
• Plantilles front-end: s’utilitzen per controlar l’aspecte en què es mostren

els continguts a la pàgina web.
• Plantilles back-end: s’utilitzen per controlar l’aspecte del panell de control

i tot l’entorn de configuració i gestió del CMS.
Utilitzar plantilles millora l’eficiència en el manteniment de la pàgina web, i a més

a més, simplifica molt la tasca d’actualització de l’aspecte de la pàgina web i de la
pàgina de gestió. Es pot utilitzar Internet per descarregar plantilles ja dissenyades,
algunes gratuïtes i d’altres de pagament, o bé es pot optar per dissenyar una
plantilla exclusiva i carregar-la a Joomla!. Les plantilles també agrupen tots els
estils que s’han creat amb elles.
Un estil agrupa una sèrie de característiques del text, com ara la font o el
color, o de les imatges.
És recomanable tenir relacionats els estils amb les plantilles abans de començar
a configurar el front-end o el back-end, d’una altra manera augmentarà el temps
invertit a aplicar canvis en l’aspecte de la pàgina web.
Gestionar plantilles
La gestió de plantilles es realitza des del Gestor de plantilles: Estils i el Gestor de

A tall d’exemple, s’utilitza
plantilles: Plantilles. l’estil Qualify que és un estil
que es pot instal·lar.
Des d’aquest entorn d’estils es poden gestionar les plantilles que s’apliquen al
front-end i al back-end. Per defecte ja s’instal·len estils, per aquest motiu la
primera vegada que accediu a aquesta finestra veieu que ja hi ha estils marcats.
Podeu identificar l’estil utilitzat per defecte perquè està marcat amb una estrella
groga.
Podeu canviar l’estil per defecte seleccionant el que desitgeu i clicant a sobre de
l’estrella de la seva columna Per defecte. A la figura 2.6 s’ha marcat Isis com
l’estil per defecte per al back-end i Qualify com l’estil per defecte per al lloc web.
F igu r a 2. 6 . Gestor de plantilles: estils
Les plantilles es poden:
• Editar: es poden modificar els detalls de l’estil.
• Duplicar: es realitza una còpia de l’estil. Recomanable quan es realitzen

determinades modificacions.
• Esborrar: eliminar un estil.
Instal·lar plantilles
La instal·lació de plantilles (figura 2.7) es realitza des del panell de control. Un

dels camins que es poden seguir és clicar a sobre del menú Extensions i allà clicar
a sobre de Gestor d’extensions.
Si és la primera vegada que accediu a aquest menú comprovareu que disposeu

de l’opció d’afegir una pestanya anomenada Instal·lar des de la web. Aquesta
pestanya és molt útil, ja que ofereix una gran funcionalitat. Si l’activeu es
carregarà en pantalla un entorn que us permet navegar per diferents opcions
ordenades per categories. També podeu utilitzar una paraula clau per fer una cerca
general.
F igu r a 2. 7 . Instal·lació d’una plantilla
Per instal·lar qualsevol extensió podeu utilitzar una de les quatre possibilitats que
Joomla! ofereix:
• Instal·lar des de la web: navegant per les diferents categories escolliu què
necessiteu instal·lar i el programa us porta a la pàgina web del desenvolupa-
dor del producte. Des d’allà s’inicia i es guia la instal·lació.
• Pujar l’arxiu del paquet: prèviament necessiteu obtenir l’arxiu que conté
el complement a instal·lar. Una vegada adquiriu el fitxer caldrà seleccionar-
lo i pujar-lo.
• Instal·lar des del directori: heu d’indicar el directori on s’ubiquen els

fitxers d’instal·lació.
• Instal·lar des de l’adreça URL: heu d’indicar l’adreça de la pàgina web

on es troben les dades d’instal·lació.
Exemple d’instal·lació d’una plantilla
Per practicar la instal·lació d’una plantilla s’utilitzarà una de les pàgines web més
comunes:
1 http://www.freshjoomlatemplates.com/
Accedint a aquesta pàgina web podeu previsualitzar molts exemples de plantilles.

Les pàgines web que tracten aquest tema sempre ofereixen imatges de la plantilla
instal·lada perquè es pugui escollir amb més dades. En aquest cas es selecciona la
plantilla Free Responsive Joomla Template (vegeu figura 2.8).
F ig ur a 2. 8. Plantilla Free Responsive Joomla Template
Cliqueu al botó de descàrrega per obtenir el fitxer:
1 Qualify.zip
Aquest fitxer l’heu de carregar des de la fitxa Puja l’arxiu de paquet que trobeu a
Gestor d’extensions: Instal·la (vegeu figura 2.9).
F igu r a 2. 9 . Càrrega de la plantilla Qualify.zip
Una vegada carregat el fitxer és necessari obrir el gestor de plantilles i assignar

l’estil de la plantilla que acabeu d’instal·lar (vegeu figura 2.10).
F igu r a 2. 1 0 . Asignació de la plantilla Qualify
Aquest estil s’aplicarà només al front-end, per tant si voleu veure l’aspecte que té
només cal carregar la pàgina web:
El resultat obtingut és el que es veu a la figura 2.11.
F igu r a 2. 1 1 . Aspecte de la plantilla Qualify

Com es pot comprovar l’aspecte canvia. A més a més si ara hi voleu accedir
veureu que no apareix la possibilitat d’introduir el nom d’usuari i la contrasenya.
Això succeeix perquè heu activat la plantilla sense vincular-li el mòdul Dades
d’accés. Per realitzar aquesta operació heu d’anar a Gestor de mòduls/ Mòdul
Dades d’accés i indicar la posició on voleu que apareguin les capses per introduir
usuari i contrasenya (vegeu figura 2.12). Us heu d’assegurar de seleccionar la
posició del grup Qualify.
F igur a 2. 12. Canvis a la plantilla Qualify
Després de guardar els canvis apareixerà el missatge de la figura 2.13.
F ig ura 2. 1 3 . Missatge d’èxit de l’actualització del mòdul
Així, la pàgina web ja tindrà un espai on poder indicar l’usuari i la contrasenya,

tal com mostra la figura 2.14.
F igu r a 2. 1 4 . Aspecte final de la plantilla modificada
Editar estils
Els estils instal·lats es poden editar per aconseguir un aspecte de les pàgines web el
més proper possible als requeriments del client. Habitualment l’estil el varia una
persona especialment dedicada als aspectes visuals i estètics de la pàgina web.
L’edició d’estils es realitza utilitzant tres fitxes:
• Detalls: s’indica la localització de l’estil. Es pot especificar si s’aplica per

defecte.
• Avançat: aquest fitxa aplega totes les característiques bàsiques de configu-

ració de l’estil.
• Assignació als menús: es seleccionen els menús als quals s’aplicarà la

plantilla.
La fitxa Detalls mostra informació de l’autor de la plantilla, dels requeriments

tècnics que pot tenir, si està assignada o no per defecte i la plantilla amb la qual
està vinculada, tal com mostra la figura 2.15.
Figur a 2. 15. Fitxa Detalls de l’edició d’estils
Un Bootstrap permet variar

l’aspecte de la pàgina en
funció del dispositiu que la
Des de la fitxa Avançat es té accés als camps (vegeu figura 2.16): consulti. Twitter Bootstrap,
per exemple, permet utilitzar
plantilles, formularis,
botons,etc. Un dels
projectes més coneguts és
• Alçada de plegat (%): aquesta és l’alçada amb la qual s’obren les columnes GitHub.
addicionals, s’ha de tenir en compte que es tracta d’un valor percentual.
• Alçada d’expansió (%): alçada amb la qual es tanquen les columnes

addicionals, s’ha de tenir en compte que es tracta d’un valor percentual.
• Logotip: imatge que es mostrarà com a logotip de la pàgina web.
• Títol del lloc: etiqueta del lloc.
• Descripció del lloc: és un text que descriu la pàgina web.
• Posició de navegació: fa referència a la barra de navegació, aquesta pot anar

abans o després del contingut.
• Components que requereixen Bootstrap: es pot crear una llista dels

components que necessiten Bootstrap.
• Color de la plantilla: es poden definir diferents colors preestablerts per la

plantilla.
• Imatge de la capçalera: aquest espai permet indicar una imatge per a la

capçalera.
• Color de fons: establiment del color de fons de la plantilla.

F igu r a 2. 1 6 . Fitxa Avançat de l’edició d’estils
A la fitxa Assignació als menús s’assigna la plantilla als diferents menús que pugui
tenir el portal web, tal com mostra la figura 2.17.
F igu r a 2. 1 7 . Fitxa Assignació als menús de l’edició d’estils
2.2.2 Categories
Els gestors de continguts treballen amb una gran quantitat de dades de diferents
formats. Administrar tota aquesta informació és complex i requereix de mètodes
eficients de treball. La majoria de CMS utilitza categories per realitzar aquesta
tasca.
Les categories permeten mostrar i editar continguts de forma controlada

mitjançant classificacions.
Al CMS Joomla! existeix una categoria anomenada Uncategorised que s’assigna

a qualsevol contingut per defecte.
Utilitzar categories no és un tema intranscendent. S’ha de planificar una estructura

abans de començar a crear categories i assignar-les. Per exemple, si es tracta de
planificar un portal de notícies necessitem saber quins temes es tractaran, en quin
àmbit, etcètera. Una opció seria:
• Notícies
• Local
• Internacional
• Política
• Economia
• Borsa
• Tecnologia
• Art
• Esports
– Futbol
– Bàsquet
• Tenis
• Motor
• El temps
• Publicitat
Com es pot veure hi ha subcategories que permeten gestionar millor els continguts.
La quantitat de categories i subcategories anirà en funció de les necessitats reals
del seu ús. Un excés de categories alentirà la gestió dels continguts i una manca
de categories acumularà massa informació sota la mateixa categoria.
Exemple de categoria
Per crear categories s’ha d’accedir al Gestor de categories/Afegeix una nova/Arti-

cles categoria des del menú Contingut.
Per exemple, us demanen crear una categoria anomenada Esports que tindrà una
subcategoria anomenada Bàsquet. Inicialment teniu les següents dades:
• Títol: Esports
• Descripció: Categoria per a notícies relacionades amb activitats esportives
• Pare: sense principal
• Estat: publicat
• Accés: públic
• Idioma: tots
• Etiquetes: Esports
• Nota: Notícies esportives
• Nota de versió: El superusuari (Super user) ha fet una modificació en

l’autoria (primer s’ha creat la categoria i després s’ha assignat a un altre
usuari)
• Creat per: Jordi Casadejust Moliner
• Metadescripció: Notícies esportives d’actualitat
• Metaparaules clau: esport, salut, espectacle, bàsquet, opinió, actualitat
• Autor/a: Jordi Casadejust Moliner
• Robots: utilitza global
• Permisos: sense canvis
• Presentació alternativa: utilitza la global
• Imatge: cap
• Text alternatiu: Notícies esportives
Totes aquestes dades s’han d’aplicar ara a la configuració de la categoria. Per fer-
ho cal accedir al Gestor de categories/Articles i allà clicar a sobre del botó Nou
(vegeu figura 2.18).
Figur a 2. 18. Gestió de les categories dins de Gestor de categories/Articles
La pantalla que apareix s’organitza en quatre fitxes: Categoria, Publicant, Permi-

sos i Opcions.
Una vegada donat el títol Esports ja podeu començar a configurar la categoria.
La fitxa Categoria conté una descripció de la categoria i els camps:
• Pare: aquesta categoria pot pertànyer a una altra categoria, o bé pot tractar-
se d’una categoria Principal
• Estat: una categoria pot estar publicada o no
• Accés: perfil d’usuari que pot accedir a aquesta categoria
• Idioma: llengua que s’aplica a aquesta categoria
• Etiquetes: etiquetes vinculades
• Nota: detall de la categoria
• Nota de la versió: detall de la versió de la categoria
A la figura 2.19 es mostren tots els camps a tenir en compte de la fitxa Categoria:
F ig ur a 2 . 19 . Fitxa Categoria
La següent fitxa a analitzar és l’anomenada Publicant. Aquesta fitxa presenta els

camps (vegeu figura 2.20):
• Data de creació: data en la qual es va crear la categoria
• Creat per: identificador de l’usuari que ha creat la categoria
• Data de modificació: data de l’últim canvi realitzat a la categoria
• Modificat per: indica l’usuari que ha realitzat l’última modificació a la

categoria
• Clics: el nombre de vegades que s’ha vist aquesta categoria
• ID: identificador d’aquesta categoria a la base de dades
• Metadescripció: descripció de la categoria. Les paraules que s’utilitzin en

aquesta descripció seran utilitzades pels motors de cerca
• Metaparaules clau: paraules (separades per comes) que s’afegiran a les

paraules utilitzades a la metadescripció
• Autor/a: identificació de la persona que ha creat la categoria
• Robots: aquest camp s’utilitza per donar instruccions als robots que
gestionen aquesta pàgina
F igu r a 2. 2 0 . Camps de la fitxa Publicant
La següent fitxa a observar és Permisos. Des d’aquí s’ajustarà el perfil d’usuari que
hi té accés. A la figura 2.21 es poden veure totes les possibilitats de configuració:
F igu r a 2. 2 1 . Camps de la fitxa Permisos

La fitxa Opcions presenta els següents camps:
• Presentació alternativa: es pot canviar la presentació predeterminada
• Imatge: imatge vinculada a la categoria
• Text alternatiu: els usuaris que hi accedeixin i no tinguin permís sobre

aquesta categoria visualitzaran el text que s’introdueixi aquí
A la figura 2.22 es poden observar els camps a omplir:
F igur a 2. 22. Camps de la fitxa Opcions
Una vegada desada la categoria ha d’aparèixer a la finestra Gestor de categori-

es/Articles la categoria Esports (vegeu figura 2.23).
F ig ur a 2 . 23 . Apareix la categoria Esports afegida
S’hi pot veure l’estat actiu, l’accés públic, l’idioma i l’identificador assignat.
Per crear la subcategoria Bàsquet s’han de seguir els mateixos passos descrits
anteriorment excepte en la selecció de la categoria pare, ja que en aquest cas s’ha
d’escollir Esports, tal i com es pot veure a la figura 23.
Si torneu a la finestra Gestor de categories/Articles podeu comprovar que apareix

la categoria Bàsquet que depèn de la categoria Esports (vegeu figura 2.24).
Fig u ra 2. 2 4 . Dependència entre categories
Afegint una subcategoria Bàsquet a Esports us queda la dependència que es mostra

a la figura 2.25.
F igu r a 2. 2 5 . La categoria Bàsquet depèn d’Esports
2.2.3 Articles
Una pàgina web gestionada per un CMS ha de disposar d’una jerarquia per ordenar
els continguts i d’un objecte que pugui contenir la informació que es desitgi
publicar.
Un article és el contenidor de la informació que s’ha de presentar a la pàgina

web.
A Joomla! existeixen els articles de contingut estàtic, que no pertanyen a la

jerarquia Secció/Categoria/Contingut.
Crear un article
Quan creeu un article heu d’indicar un títol i omplir 6 fitxes amb dades relatives
al contingut i a la configuració. Les fitxes són:
• Contingut
• Publicant
• Imatges i enllaços
• Opcions
• Configura la pantalla d’edició
• Permisos
Contingut
La pestanya de Contingut permet editar la informació que es mostrarà a l’article.
Segueix la línia clàssica d’un editor de text força senzill, on les possibilitats de
canvi d’estil són força limitades. Si es desitja es pot caviar l’editor emprat utilitzant
el botó Canviar d’editor.
A la part dreta de la pantalla es mostra la informació actualitzada de l’estat de

l’article:
• Estat: marca si aquest ítem està publicat, despublicat, classificat o s’ha

mogut a la paperera.
• Categoria: marca la categoria a la qual pertany. Si acabeu d’instal·lar

el programa i no heu creat cap categoria no podreu canviar la categoria
d’Uncategorised
• Destacat: si destaqueu un article apareixerà a l’apartat de Destacats de la

pàgina web
• Accés: l’accés a aquest article estarà permès per al perfil Public, Guest,
Registered, Special o Super users
• Idioma: llengua en què es mostrarà l’article
• Etiquetes: paraules que es relacionaran amb l’article i permetran que aquest

article aparegui en determinades cerques d’informació
• Nota de versió: si cal es pot afegir un comentari en referència a l’article i a

les seves diferents versions
Publicació d’informació
Amb la pestanya Publicant es configuren totes les variables lligades a aspectes de
publicació:
• Inici de publicació: data a la qual s’editarà l’article a la web
• Final de publicació: data a la qual deixarà d’estar publicat l’article a la web
• Data de creació: data a la qual es va crear l’article
• Creat per: identificador de l’usuari que ha creat l’article
• Creat per àlies: com a creador de l’article apareixerà l’àlies aquí introduït
i no l’identificador d’usuari
• Data de modificació: data de l’últim canvi realitzat a l’article
• Modificat per: indica l’usuari que ha realitzat l’última modificació a

l’article
• Revisió: el nombre de vegades que ha estat revisat aquest article
• Clics: el nombre de vegades que s’ha vist aquest article
• ID: identificador d’aquest article a la base de dades
• Metadescripció: descripció de l’article. Les paraules que s’utilitzin en


• Clau de referència: aquest camp s’utilitza per emmagatzemar informació

d’algun recurs extern
gestionen aquesta pàgina. Per exemple es pot indicar que no s’indexi aquest
article
• Autor/a: qui ha creat aquest article
• Drets de contingut: especifica els drets d’ús de l’article i els seus contin-
guts
• Referència externa: aquest camp s’utilitza per registrar una referència

externa
Imatges i enllaços
• Imatge introductòria: la imatge que aquí s’indica acompanyarà el text de

l’article
• Imatge flotant: controla la posició de la imatge. Pot ser global, dreta,

esquerra o cap
• Text alternatiu: el text indicat aquí es mostrarà en el cas que no es pugui

carregar la imatge
• Títol: títol de la imatge
• Imatge per l’article sencer: imatge per a la visualització d’un únic article
• Enllaç A, B, C: configura l’enllaç que apareixerà a l’article
• Text de l’enllaç A, B, C: text vinculat a l’enllaç
• Adreça URL de la finestra de destí: indica com s’obrirà l’enllaç (segons la

configuració global, a la finestra actual, en una nova finestra, en una finestra
emergent o en un pop-up)
Opcions
• Mostra títol: si està activat es mostrarà el títol de l’article
• Títols enllaçats: aquesta opció converteix el títol de l’article en un enllaç

al propi article
• Mostra etiquetes: mostra les etiquetes per a cada article
• Mostra el text d’introducció: aquesta opció fa que es continuï veient el

text introductori quan s’accedeix al contingut de l’article
• Posició de la informació de l’article: les diferents possibilitats d’aquest

camp permeten organitzar de diferents formes el bloc de la informació
• Mostra categoria: si està activat es mostrarà al títol de l’article la categoria

a la qual pertany
• Categoria enllaçada: si es mostra la categoria i aquesta opció està marcada

a Sí el títol enllaça a una llista que conté els articles de la mateixa categoria
• Mostra categoria principal: aquesta opció pot mostrar la categoria princi-

pal a la qual pertany l’article
• Categoria principal enllaçada: si es mostra la categoria principal i aquesta

opció es troba marcada com a Sí es carregarà un llistat amb tots els articles
de la categoria a la qual pertany l’article
• Mostra autor/a: permet mostrar l’autoria de l’article
• Autor/a enllaçable: si està activat enllaçarà a la pàgina web relacionada

amb l’autoria de l’article
• Mostra la data de creació: si està activat mostrarà la data en la qual es va

crear l’article
• Mostra data de modificació: data de l’última modificació realitzada a

l’article
• Mostra data de publicació: mostra la data i l’hora en què es va publicar

l’article
• Mostra navegació: si s’activa aquesta opció apareixeran enllaços de nave-

gació als articles (es pot accedir als articles anterior i posterior)
• Mostra icones: activat mostra les icones d’imprimir i enviar per correu
• Mostra la icona “Imprimeix”: si està activat mostra la icona d’imprimir
• Mostra la icona “Correu”: activat mostra la icona d’enviar per correu
• Mostra votacions: aquesta opció mostra la valoració dels lectors de l’article
• Mostra la quantitat de vegades que s’ha fet clic cobre l’enllaç: activat
mostra el número de vegades que s’ha clicat a sobre de l’article
• Mostra els enllaços no autoritzats: quan es configura a Sí es mostraran

els enllaços a continguts als usuaris no registrats. Es mostren només els
enllaços, no el contingut
• Posicionament dels enllaços: mostra els enllaços a sobre o a sota del

contingut
• Text ‘Continua llegint...‘: personalitza el text utilitzat
• Presentació alternativa: canvia la presentació predeterminada
Configura la pantalla d’edició
• Mostra opcions de publicació: permet mostrar la barra d’opcions de la

publicació
• Mostra opcions de l’article: permet mostrar les opcions de l’article
• Imatges d’administrador/a i enllaços: mostra els camps utilitzats per

inserir imatges i enllaços al back-end
• Imatges de lloc web i Enllaços: mostra els camps utilitzats per inserir
imatges i enllaços al front-end
Permisos
Aquesta pestanya permet gestionar què pot fer cada perfil d’usuari als continguts.
És important tenir en compte a la columna Selecciona nova configuració quina és

l’elecció que es marca:
• Heretat: si aquesta opció està permesa, dependrà del valor de la configura-

ció global, als grups superiors i des de la categoria
• Denegat: no importa el permís que s’hauria d’heretar, a partir d’aquí es

denega
• Permès: es permet l’accés, però només serà possible si no està denegat a la

configuració global, als grups superiors i des de la categoria
Quan es desin els canvis quedarà reflectit l’estat dels permisos finals a la columna
Configuració calculada.
Exemple d’article de nova creació
Per crear un article s’ha d’utilitzar la finestra Gestor d’articles/ Afegeix un nou
article. En aquest entorn cal introduir una sèrie de dades bàsiques que s’extrauran
majoritàriament del mateix article que s’ha de publicar. Si per exemple us arriba
un article amb les següents dades:
• Títol: Presentació de la nova equipació
• Contingut: Aquesta tarda tindrà lloc al pavelló municipal la presentació de

la nova equipació de l’equip de bàsquet del poble
• Estat: publicat
• Categoria: Bàsquet
• Destacat: sí
• Accés: públic
• Idioma: tots
• Etiquetes: Bàsquet, Esports, Pavelló
• Inici de publicació: 2015-06-18
• Final de publicació: 2015-06-20
• Data de creació: 2015-06-18
• Autor: Jordi Casadejust Moliner
• Metaparaules clau: pavelló, equipació, bàsquet, nova
• Drets de contingut: Creative Commons
• Imatge introductòria: pilota de bàsquet
• Text alternatiu: Presentació de la nova equipació de bàsquet
El resultat de traduir totes aquestes dades a l’entorn de Joomla! consisteix a editar

les diferents fitxes de gestió dels articles. Primer de tot cal escriure el títol, i a
continuació el cos de l’article s’ha d’editar a la fitxa Contingut (vegeu figura 2.26).
F ig ur a 2. 26. Fitxa Contingut d’un article
A la fitxa Publicant s’introdueixen les dades relatives a la publicació de l’article,

F igu r a 2. 2 7 . Fitxa Publicant
Si es cal afegir imatges s’utilitza la fitxa Imatges i enllaços(figura 2.28).
F igu r a 2. 2 8 . Fitxa Imatges i enllaços
Seguint les indicacions de l’article no cal tractar les variables de les fitxes Opcions,
Configura la pantalla d’edició i Permisos.
Una vegada introduïdes totes les dades cal desar l’article utilitzant el botó Desar
i si tot ha anat bé apareixerà el missatge de la figura 2.29.
F ig ura 2 . 2 9 . Missatge d’èxit
Editar un article
L’edició d’un article ja creat es realitza a Gestor d’articles/Articles. Si per exemple

volem editar l’article Presentació de la nova equipació (figura 2.30).
Figur a 2. 30. Editant Presentació de la nova equipació
N’hi ha prou a clicar a sobre per accedir a la pantalla d’edició, que és la mateixa
que s’utilitza quan es crea un article nou (figura 2.31):
Figur a 2 . 31 . Pantalla per editar l’article Presentació de la nova equipació
Publicar i despublicar article
Publicar o despublicar un article és l’acció que fa que aquest contingut aparegui o

no a la pàgina web.
Es pot publicar un article en qualsevol moment, si l’usuari té els permisos

necessaris.
Per exemple, a la figura 2.32 apareixen dos articles: Notícies i Presentació de la

nova equipació:
Fig u ra 2 . 32 . Quadre de control de la publicació d’articles
L’article Notícies està publicat perquè apareix el símbol de selecció de color verd,
en canvi Presentació de la nova equipació té assignada una creu vermella, cosa
que significa que no està publicat. Per publicar aquest article només cal clicar a
sobre de la icona i canviarà pel símbol de selecció de color verd.
Destacar un article
Els articles de Joomla! es poden destacar. Un article destacat es mostra a la

portada del front-end. Per destacar un article s’ha de clicar a sobre de l’estrella
que apareix vinculada a l’article, tal com mostra la figura 2.33.
F igu r a 2. 3 3 . L’article ’A on ens pot localitzar’ està destacat
L’article A on ens pot trobar està publicat i destacat, mentre que l’article Les
nostres notícies està publicat però no està destacat.
Arxivar un article
Els articles que s’arxiven no
són localitzats pel filtre de
text.
Quan la quantitat d’articles creix molt és habitual que alguns quedin desfasats. És
llavors el moment d’arxivar aquests articles.
Per arxivar un article cal seleccionar-lo i clicar al botó Arxiva (figura 2.34).
Fi gu ra 2 .3 4 . Botó Ar-
xiva que cal seleccionar
Per desarxivar un article és necessari accedir al Gestor d’articles/ Articles i fer una
recerca on l’estat sigui Classificat. Apareixeran tots els articles arxivats (figura
2.35).
F igu r a 2. 3 5 . L’article ’A on ens pot localitzar’ està arxivat
Desplegant les opcions d’acció es pot desarxivar l’article i tornarà al seu estat
anterior.
Bloquejar un article
Quan un usuari des del back-end o el front-end obre un article per editar-lo, el
programa Joomla! bloqueja aquest article. Això evita que un altre usuari pugui
accedir a l’article i generi conflictes a la base de dades.
En alguna ocasió un mal ús d’aquesta propietat fa que un article estigui bloquejat

per un usuari que ha oblidat desbloquejar-lo.
Per desbloquejar un article cal anar a Gestor d’articles/Articles, marcar l’article

bloquejat i prémer el botó Desbloca (figura 2.36).
Fig u ra 2 . 3 6. Botó per

desbloquejar un article
Revisar les versions d’un article
Un article que formi part de Joomla! pot ser editat al llarg del temps. Aquest CMS
permet explorar els canvis realitzats en un arxiu i mostrar les diferents versions.
Seleccionant un article i editant-lo (pantalla Gestor d’articles/Edita un article)

apareix un botó anomenat Versions (figura 2.37).
Fi gu ra 2 . 37 . Botó de
versions d’un article
Clicant a sobre d’aquest botó apareix una finestra emergent (figura 2.38).
F igu r a 2. 3 8 . Historial de versions de l’article
Aquest historial permet comparar les versions seleccionades. Per aquest cas el
resultat és el de la figura 2.39.
F igu r a 2. 3 9 . Vista comparada de l’article
En aquesta vista es poden identificar els canvis realitzats amb molt de detall.
2.2.4 Menús
Joomla! té de forma predeterminada un menú amb un únic ítem (Inici) que està
associat a la pàgina principal.
Un ítem de menú indica el component que apunta la pàgina.
El component d’articles com_content també està associat a l’ítem Inici.

Un component apunta a una vista determinada.
Aquest ítem de menú predeterminat permet que en ser cridat aparegui com a
pàgina d’inici.
Afegir un menú
A Joomla! els menús s’administren des del Gestor de menús/Menús (figura 2.40).
F ig ur a 2. 40. Pantalla per gestionar i crear menús
Clicant al botó Nou s’obrirà una pantalla que permet afegir els camps necessaris
per al nou menú (figura 2.41):
F igur a 2 . 41 . Camps del nou menú
2.2.5 Mòduls
La visualització de les pàgines que formen part de l’entorn que es gestiona amb
Joomla! requereix una extensió que permeti el manteniment i control centralitzat.
Un mòdul és una extensió utilitzada per mostrar continguts i/o mèdia al

voltant d’un context principal.
El mòdul Últimes novetats
està vinculat al component
com_content, i el que fa és Un exemple de mòdul és el d’inici de sessió. Cada element assigna un mòdul, que
mostrar un enllaç als últims
components. a la vegada pot estar assignat a un component. Els mòduls poden no estar vinculats
Les pàgines gestionades a components i poden ser únicament codi HTML.
amb Joomla! necessiten
com a mínim un mòdul de
menú. La gestió dels mòduls es realitza des del back-end. Des d’aquí es poden afegir i
editar els mòduls de Joomla!.
Des de la pantalla de gestió de mòduls es tenen els següents controls:
• Estat: indica si el mòdul està publicat o no.
• Títol: nom del mòdul. Aquestes etiquetes es poden editar.
• Posició: indica on es col·loca el mòdul. Aquesta posició diu si el mòdul va

a dalt, a l’esquerra, a baix, a la dreta, etc. Les posicions es defineixes a la
plantilla utilitzada a la pàgina.
• Tipus: és el nom que li dóna al mòdul el sistema. Normalment Joomla!

instal·la per defecte 20 mòduls estàndard.
• Pàgines: l’ítem de menú on es mostrarà aquest mòdul. Si està indicat Totes

vol dir per tots els ítems de menú. Es poden seleccionar els ítems que
interessin.
• Accés: qui té accés a aquest ítem. L’accés pot ser Public, Guest, Registered,
Special o Super Users.
• Idioma: indica la llengua que s’aplica a aquest mòdul.
• ID: és l’identificador únic per aquest ítem. És un valor numèric assignat

automàticament per Joomla! i no és possible canviar-lo.
La barra d’eines que ofereix el gestor de mòduls permet realitzar les següents
opcions:
• Nou: obre la finestra d’edició per crear un nou mòdul.
• Edita: obre la finestra d’edició per al mòdul seleccionat. Si cliqueu a sobre

del nom del mòdul accedireu també a la finestra d’edició.
• Duplica: fa una còpia del mòdul seleccionat. Aquesta còpia es genera

immediatament i anomena al nou mòdul igual que l’original afegint un
número entre parèntesi.
• Publicar: si es publica un mòdul es fa accessible des de la web.
• Despublicar: si es despublica un mòdul no es podrà accedir al seu contingut

des de la web.
• Desbloca: fa accessible un mòdul.

• Automàtic: processa automàticament el mòdul seleccionat.
• Paperera: envia a la paperera el mòdul seleccionat.
Exemple de creació d’un nou mòdul
Accedint al Gestor de mòduls/Mòduls apareixen en pantalla totes les possibilitats:
• Adreça URL inclosa: permet mostrar un marc inclòs en una lloc específic.
• Anuncis - Pancartes: mostra els anuncis actius del com_banners.
• Articles - Articles Relacionats: permet mostrar altres articles relacionats

amb el que en aquell moment s’estigui mostrant.
• Articles - Notícies d’actualitat: mostra un nombre determinat d’articles

específics pertanyents a una o diverses categories.
• Articles arxivats: mostra una llista dels mesos del calendari que continguin
articles arxivats.
• Articles de la categoria: mostra els articles d’una o diverses categories.
• Canals electrònics: mostra un canal electrònic sindicat.
• Categories d’articles: mostra una llista de categories a partir d’una

categoria principal.
• Cercar: mostra un camp de cerca.
• Codi HTML personalitzat: crea el teu propi mòdul HTML emprant un

editor visual (WYSIWYG).
• Dades d’accés mostra un formulari de dades d’accés.
• Els més populars: mostra una llista dels articles amb el major nombre de
visites.
• Estadístiques: mostra informació sobre la instal·lació del teu servidor i

estadístiques del lloc web.
• Etiquetes populars: mostra les etiquetes més usades.
• Etiquetes similars: mostra enllaços a altres ítems amb etiquetes similars.
• Imatge aleatòria: mostra una imatge aleatòria des del directori que selec-
cionis.
• Menú: mostra un menú a la part pública del lloc.
• Mòdul de cerca senzilla: mòdul de cerca pel sistema de cerca senzilla.
• Peu de pàgina: mostra la informació de copyright de Joomla!.
• Qui està en línia: mostra la quantitat de convidats.

• Ruta de navegació: mostra la ruta de navegació.
• Selector d’idioma: mostra una llista d’idiomes de contingut disponibles.
• Sindicació del lloc: sindicació de notícies.
• Template Selector: permet canviar de plantilla d’una forma molt senzilla.
• Usuaris recents: mostra els últims usuaris que s’han registrat al teu lloc.
• Últimes novetats: mostra una llista dels articles més actuals que s’hagin
publicat.
Si, per exemple, seleccioneu el mòdul Estadístiques i el configureu com a la figura

2.42.
F igu r a 2. 4 2 . Configuració del mòdul Estadístiques
apareixerà al front-end la informació que es mostra a la figura 2.43, que són dades
del servidor, del lloc i de les visites.
Fig u ra 2. 4 3 . Informació
estadística al front-end
2.3 Gestió d’usuaris
La gestió d’usuaris és un punt cabdal en l’administració d’un CMS. Hem de

recordar que un gestor de continguts no només s’encarrega d’emmagatzemar
informació, sinó que també ha de possibilitar-hi l’accés d’una forma eficient i
simultània a diferents usuaris.
Un usuari és una persona o un grup de persones que s’identifica per accedir

a uns continguts.
La gestió d’usuaris està directament relacionada amb la utilització de permisos i la

seva assignació. Les accions associades a aquesta tasca es realitzen des del panell
de control.
El CMS Joomla! permet treballar amb grups d’usuaris. Realitzar agrupacions és

una tasca bàsica que simplifica la gestió dels usuaris.
Un grup és un conjunt d’usuaris que tenen certes característiques comunes.
A Joomla! existeixen els grups de front-end:
• Guest: té accés a la web pública i als articles públics.
• Registered: té els mateixos privilegis que el grup Guest, i a més a més pot
veure els articles registrats.
• Author: té els privilegis del grup Registered, i a més a més pot crear
articles, editar articles de la seva propietat i veure continguts etiquetats com
a especials.
• Editor: té els privilegis del grup Author, i a més a més pot editar tots els
articles, fins i tot els que no estan publicats.
• Publisher: té els privilegis del grup Editor, i a més a més pot publicar tots
els articles.
Els grups que trobem al back-end són:
• Manager: té els mateixos privilegis que el grup Publisher i se li afegeix la

possibilitat d’accedir al back-end.
• Administrator: té els mateixos privilegis que el grup Manager, i a més a

més pot crear nous usuaris i instal·lar extensions.
• Super users: té els mateixos privilegis que el grup Administrator, i a més a

més pot canviar plantilles i la configuració global.
2.3.1 Crear un usuari
La gestió d’usuaris es realitza des del panell de control a l’apartat de Gestor

d’usuaris. L’opció a escollir la trobeu al marge superior esquerre de la pantalla
en forma de botó.
Per la creació d’un usuari disposeu de tres fitxes de dades que s’han d’omplir. La
primera fitxa inclou els detalls del compte d’usuari:
• Nom: nom de l’usuari.
• Usuari: identificador que utilitzarà al Joomla!.
• Contrasenya: contrasenya d’accés (s’haurà de confirmar).
• Correu electrònic: adreça de correu electrònic vàlida i a la qual l’usuari

tingui accés.
• Rebre correus del sistema: si s’activa aquesta opció s’enviaran a l’adreça

de correu indicada anteriorment indicant dades del sistema relacionades
amb l’usuari.
• Bloca aquest usuari/a: si s’activa aquesta opció l’usuari deixarà de tenir

accés al sistema, però no s’eliminarà.
La segona fitxa assignarà el nou usuari a un grup.
La tercera fitxa s’utilitza per configurar l’estil de plantilla i inclou els camps:
• Idioma administració: si aquest usuari té permisos d’administrador tindrà

configurat el programa amb l’idioma aquí indicat.
• Idioma lloc: indica l’idioma en què es veurà la pàgina web (front-end).
• Editor: es pot seleccionar qualsevol dels editors instal·lats.
• Lloc d’ajuda: pàgina web d’ajuda utilitzada per l’usuari.
• Fus horari: permet seleccionar una zona horària.
Exemple de creació d’un nou usuari
Per crear un usuari heu d’utilitzar el Gestor d’usuaris/es / Usuaris i clicar al botó
Nou.
Com a exemple utilitzem el següent supòsit fictici:
• Nom de l’usuari: Jordi Casadejust Moliner
• Usuari: jcasadejust
• Contrasenya: J2dJMo3!
• Correu electrònic: jcasadejust@joomlaioc.cat
• Ha de rebre correus de sistema: Sí (voleu que aquest usuari estigui informat

dels canvis produïts al sistema)
• Bloca a aquest usuari: No (no voleu bloquejar aquest usuari)
• Requereix la reinicialització de la contrasenya: Sí (així forceu que l’usuari

introdueixi una contrasenya nova la primera vegada que accedeixi al portal)
Aquestes dades queden introduïdes tal com mostra la figura 2.44.

F igu r a 2. 4 4 . Dades del nou usuari
Validant les dades amb el botó Desa apareix el missatge de la figura 2.45.
Fig ura 2 . 45 . Missatge d’èxit d’usuari creat
La millor prova per revisar que aquest usuari pot accedir al portal és utilitzar les
dades (vegeu figura 2.46).
Figu r a 2. 46 . Finestra per validar l’accés del nou usuari
El primer que apareix en pantalla és una finestra que permet editar el perfil.
Recordeu que s’ha marcat l’opció de forçar la reintroducció de la contrasenya
d’accés, per tant el primer que s’ha de fer és establir una nova paraula de pas.
També es poden canviar altres paràmetres com ara l’editor de text a utilitzar, el
fus horari o l’idioma del lloc (vegeu figura 2.47).
Figur a 2. 47. Canvi de contrasenya del nou usuari
En el cas d’aquest exemple és obligatori canviar la contrasenya per un nou valor.

Una vegada canviada la contrasenya es mostrarà la pantalla de la figura 2.48.
F igu r a 2. 4 8 . Resum de la informació del nou perfil d’usuari
Si torneu al back-end i obriu Gestor d’usuaris/es / Usuaris podeu comprovar que

apareix el nou usuari creat (vegeu figura 2.49).
F igu r a 2. 4 9 . Usuari donat correctament d’alta al back-end
Des del punt de vista de l’administrador hi ha dades que poden ajudar molt quan
hi ha problemes amb l’ús del programa. Per exemple aquí es pot veure quan va
accedir per última vegada l’usuari (2015-06-18 15:47:18) i l’identificador que té
assignat (727).
2.3.2 Crear un grup nou
Els camps bàsics per crear un grup són:
• Títol del grup: text identificador per al grup.
• Grup principal: és necessari marcar un grup principal per al nou grup

creat.
Exemple de creació d’un nou grup
Per necessitats de l’organisme on s’ha instal·lat Joomla! us demanen crear un grup

editor que crearà només notícies esportives.
Les variables que defineixen els grups han de correspondre al màxim amb la
realitat. Així, en aquest cas es crearà un grup anomenat Autor_esports que pertany
al grup principal Author (vegeu figura 2.50).
Figur a 2. 50. Detalls de grup
Després de clicar al botó Desa i si no hi ha cap problema es crearà el grup i apareix

un missatge de confirmació que es pot veure a la figura 2.51.
Fig ur a 2 . 5 1. Missatge d’èxit en la creació de

grups
Si es vol afegir un usuari a aquest grup cal anar a Gestor d’usuaris/es / Usuaris,
seleccionar un usuari i editar-lo a la fitxa Grup d’usuaris/es assignats. Per exem-
ple, si seleccioneu l’usuari jcasadejust podeu marcar Autor_esports i Registered
(tal com mostra la figura 2.52).
F igu r a 2. 5 2 . Assignació de grups d’usuaris
Si torneu a Gestor d’usuaris/es / Usuaris veureu que el perfil de l’usuari jcasa-

dejust ha canviat i ara pertany als grups Registered i Autor_esports (vegeu figura
2.53).
Fi gur a 2 .5 3. Dades del grup d’usuaris modificat

2.4 Gestor multimèdia
El gestor multimèdia és una eina que permet gràficament la gestió de continguts.

En un entorn gràfic es poden realitzar les accions de:
• Carregar: puja fitxers al Joomla!
• Crear nou directori: es crea un nou directori
• Esborrar: elimina un contingut
La figura 2.54 mostra el gestor multimèdia:
F ig ur a 2. 54. Vista en miniatures del gestor multimèdia
També es poden carregar els continguts en vista de detall, tal com es mostra a la
figura 2.55.
F igur a 2 . 55 . Vista en detall del gestor multimèdia

Des de totes dues pestanyes podeu crear carpetes escrivint el nom a la caixa i
fent clic al botó Crea una carpeta. Per penjar un fitxer podeu trobar a baix la
caixa per penjar fitxers: de primer seleccioneu el fitxer fent clic al botó Navega, i
posteriorment al botó Comença a penjar.
Per esborrar fitxers i carpetes ho podeu fer de dues maneres. Podeu fer clic
directament a la icona blava amb forma d’aspa que hi ha al costat de cada fitxer
i carpeta, o seleccionant una sèrie de fitxers i carpetes (fent clic als quadres de
selecció que hi ha al costat de cada fitxer i carpeta) i posteriorment fent clic al
botó Esborra a la part superior de la pantalla. Assegureu-vos que les carpetes són
buides abans d’esborrar-les, ja que el Joomla! no permet esborrar carpetes que
contenen a l’interior fitxers o subcarpetes.
Heu de recordar que les imatges que carregueu al vostre lloc tardaran molt més a
baixar per part dels usuaris que visiten el vostre lloc web. Els temps de càrrega
i descàrrega que experimenteu vosaltres són molt curts perquè esteu treballant
directament sobre la mateixa màquina que alberga el lloc web, i per tant no feu
servir la infraestructura de la xarxa. Els usuaris que visiten el lloc web faran servir
una connexió a Internet que no necessàriament ha de ser molt ràpida. Per això es
recomana no fer servir imatges de mida excessivament gran.
2.5 Missatgeria del Joomla!
La missatgeria és un component de Joomla! amb el qual es poden enviar missatges

entre usuaris del back-end. Sense sortir de Joomla! es poden llegir, escriure,
enviar i esborrar missatges. Per facilitar la tasca de gestionar enviaments a molts
usuaris també és possible gestionar missatges a grups.
Per enviar un missatge cal anar a Gestor de missatges privats: Missatges i es

mostrarà la pantalla de la figura 2.56.
F igu r a 2. 5 6 . Nou missatge
Per crear un nou missatge s’ha de clicar al botó Nou (figura 2.57).
Fi gu ra 2 . 5 7 . Botó de nou missatge

En aquests moments apareix una pantalla on s’han d’omplir els diferents camps
del missatge. Per seleccionar el destinatari és necessari clicar al botó de contacte
que hi ha a la dreta del destinatari (vegeu figura 2.58).
Fig ur a 2.5 8. Selecció del destinatari
S’obre una finestra amb els usuaris amb permís s’accés al back-end i podeu
seleccionar el destinatari tal com mostra la figura 2.59.
F ig ur a 2 . 59 . Selecció del destinatari de la llista de contactes
Ara només queda escriure l’assumpte i el cos del missatge (figura 2.60).
F ig ur a 2 . 60 . Missatge amb totes les dades
I clicar al botó Envia (figura 2.61).

F ig ura 2 . 6 1. Botó per

enviar el missatge
Joomla! avisarà si el missatge s’ha enviat correctament amb el que podem veure
a la figura 2.62.
F igu r a 2. 6 2 . Missatge confirmant l’enviament
Quan l’usuari abarrufx accedeixi al back-end es trobarà a la part inferior de la

finestra un avís que té un missatge (figura 2.63).
F igu r a 2. 6 3 . Missatge rebut
Si l’usuari clica a sobre de l’u entrarà a la pantalla de missatgeria i veurà que té

un missatge del superusuari (figura 2.64).
F igu r a 2. 6 4 . Missatge rebut del superusuari
Si l’usuari clica a sobre del missatge accedeix al contingut (figura 2.65).

Figur a 2. 65. Contingut del missatge

3. Administració i manteniment d’un gestor de continguts
Una vegada instal·lat un gestor de continguts i havent estudiat les seves caracterís-
tiques principals cal establir els processos de manteniment i administració.
Un gestor de continguts ha de tenir extensions que facilitin la seva

administració i manteniment.
És habitual disposar d’extensions del propi programa o desenvolupades per altres

col·lectius que fan més efectiva la feina de la persona responsable del gestor de
continguts. L’ús d’aquestes eines normalment queda reservada a un únic usuari,
generalment de perfil més aviat tècnic i amb capacitat de treball sobre el sistema
informàtic de la corporació.
Els complements, mòduls i connectors que podeu trobar per Internet creats per
desenvolupadors independents us proporcionen centenars d’afegits que poden
donar més qualitat i funcionalitat al lloc. Les plantilles proporcionen una forma
de canviar fàcilment l’aspecte extern del lloc web sense haver de modificar el
contingut. Una de les extensions més útils per al vostre lloc web és la inclusió
d’un sistema de fòrums de discussió. Els fòrums de discussió permeten als usuaris
interactuar entre ells i amb els gestors del lloc.
La tasca de l’administrador d’un lloc web no acaba quan aquesta està en funciona-
ment. És molt important treballar els aspectes de seguretat del lloc per assegurar-
vos que el vostre lloc no patirà atacs que provenen d’Internet. Fer còpies de
seguretat freqüentment i actualitzar el sistema a les darreres versions dels paquets
són alguns dels aspectes de seguretat fonamentals dels llocs web.
3.1 Administració de components
Un dels ítems més utilitzats per mantenir i administrar un gestor de continguts són
els components.
Els components són petites porcions de codi que s’executen i serveixen per
mostrar informació al front-end.
Exemples de components són els anuncis, la cerca intel·ligent, la missatgeria o

la sindicació d’articles. Qualsevol gestor de continguts hauria de poder treballar
amb aquests components.
3.1.1 Anuncis - Pancartes
La publicitat, ja sigui interna del lloc web o provinent d’una font externa, és un
recurs molt utilitzat també a les pàgines d’Internet. Aquesta publicitat cal que
sigui àgil, fàcil de gestionar i efectiva.
Un bàner (banner en anglès) és un anunci que es publica dins d’una pàgina

web.
Es poden incloure bàners a un portal web gestionat amb Joomla!. És habitual

utilitzar imatges fixes o en moviment. Una possibilitat que ofereixen els bàners és
utilitzar el seu contingut per enllaçar amb un altre contingut, com per exemple la
pàgina web de l’anunciant.
Per organitzar la gestió de bàners, el Joomla! us proporciona categories, clients i

bàners. Heu de crear almenys una categoria i un client abans de crear un bàner.
La gestió d’anuncis amb Joomla! es realitza al back-end i cal accedir a Compo-

nents - Anuncis - Pancartes, tal com mostra la figura 3.1.
F igu r a 3. 1 . Camí a seguir per crear un bàner
La pantalla Gestor d’anuncis/Anuncis conté les accions necessàries per tractar els
bàners. Com podeu comprovar apareixen els mateixos botons que podeu trobar
per exemple a la gestió dels articles:
• Nou: obre una finestra que dóna accés a la introducció de les dades del nou
bàner.
• Edita: permet canviar un bàner ja creat.
• Publicar: presenta el bàner a la pàgina web.
• Despublicar: treu el bàner de la pàgina web.

• Arxiva: classifica el bàner.
• Desbloca: força l’alliberació del bàner, això succeeix quan un usuari

s’apropia del bàner per un temps llarg.
• Automàtic: es processa automàticament el bàner.
• Paperera: s’emmagatzema el bàner a la brossa.
Crear un anunci amb Joomla!
Per crear un anunci nou s’ha d’accedir a Gestor d’anuncis/Anuncis i clicar al botó
Nou. Apareix una pantalla identificada Gestor d’anuncis/Nou anunci on es pot
indicar el títol del bàner i introduir tota la informació necessària per mitjà de tres
fitxes:
• Detalls: conté la informació bàsica del bàner.
• Detalls de la pancarta: mostra estadístiques vinculades a les visites al

bàner.
• Publicant: dades referents a la publicació del bàner.

Les imatges utilitzades han
d’estar al directori
/images/banners/.
A la fitxa Detalls s’han d’introduir les dades:
• Tipus: tipologia de l’anunci, que pot ser una imatge o un cas personalitzat
• Imatge: imatge que formarà part de l’anunci
• Ample: l’amplada que es tindrà l’anunci
• Alçada: l’alçada de l’anunci
• Text alternatiu: text vinculat a la imatge
• Adreça URL de l’anunci: si es clica a sobre de l’anunci es redireccionarà

la navegació a l’adreça web aquí indicada
• Descripció: text descriptiu de l’anunci
• Estat: estat de l’anunci, que pot ser Publicat, Despublicat, Classificat o

Mogut a la Paperera
• Categoria: categoria a la qual pertany l’anunci
• Fix: els anuncis fixos tenen prioritat
• Idioma: idioma assignat per a l’anunci
• Nota de la versió: nota de l’element

A la figura 3.2 es pot veure una fitxa Detalls amb dades per a un nou anunci:
F igu r a 3. 2 . Fitxa Detalls
A la fitxa Detalls de la pancarta els camps de configuració són:
• Impressions màximes: el límit d’impressions de l’anunci. És possible

indicar que aquest valor sigui il·limitat.
• Impressions totals: acumulat de les impressions del bàner. Aquest valor

es pot resetejar.
• Clics totals: número de clics que s’han aplicat a sobre de l’anunci. Aquest
valor es pot resetejar.
• Client: limita el client vinculat al bàner.
• Tipus d’acord: definició temporal del contracte amb el client.
• Informe d’impressions: es registren les impressions.
• Informe de clics: es registra el número de clics.
A la figura 3.3 es pot veure una fitxa Detalls de la pancarta amb dades:
F igu r a 3. 3 . Fitxa Detalls de la pancarta

L’ultima fitxa a tractar és la Publicant on els camps a tenir en compte són:
• Inici de la publicació: data a la qual es publicarà el bàner.
• Final de la publicació: últim dia que el bàner estarà publicat.
• Data de creació: data en la qual es va crear el bàner.
• Creat per: usuari que crea el bàner.
• Creat per àlies: àlies utilitzat per l’usuari.
• Data de modificació: data de l’última modificació del bàner.
• Modificat per: usuari que ha modificat en última instància el bàner.
• Revisió: revisió del bàner.
• ID: valor numèric que identifica el bàner.
• Metaparaules clau: etiquetes utilitzades pels cercadors.
• Utilitza prefix propi: valor del mateix bàner o del client.
• Prefix de Metaparaules clau: es buscaran les paraules clau que comencin

amb aquest prefix.
A la figura 3.4 veiem un exemple de la fitxa Publicant amb dades.
F ig ur a 3. 4. Fitxa Publicant
Quan es desa el bàner es torna a la pantalla Gestor d’anuncis/Anuncis i apareix el

missatge, tal com es veu a la figura 3.5.
F ig ur a 3 . 5. Missatge d’èxit
Categories dels anuncis
Les categories del anuncis es gestionen des de la pantalla Gestor de categories/A-

nuncis - Pancartes. Els mateixos controls utilitzats en la gestió d’anuncis tornen
a aparèixer novament aquí: Nou, Editar, Publicar, etc.
No s’han de confondre les categories del anuncis amb altres categories de Joomla!.
La figura 3.6 mostra una categoria d’anunci de nova creació:
F igu r a 3. 6 . Creació d’una nova categoria d’anunci
Clients dels anuncis
Els anuncis han d’estar vinculats a un client. Per gestionar els clients cal anar
a la pantalla Gestor d’anuncis/Clients. Clicant al botó Nou s’accedeix a Gestor
d’anuncis/Nou client on és necessari introduir les dades:
• Nom del contacte: identificació de la persona de contacte
• Correu del contacte: correu electrònic per contactar
• Tipus d’acord: acord relacionat amb l’anunci
• Informe d’impressions: registrar el número de vegades que es veu
• Informe de clics: registrar el número de vegades que es clica
• Altres: informació addicional
• Estat: es defineix l’estat del client
• Nota de la versió: opcionalment es pot aportar una nota de la versió
A la fitxa Metadates es poden aportar les paraules clau per ser identificades pels
motors de recerca. També es pot treballar amb el prefix corresponent.
Una fitxa de client amb dades seria la de la figura 3.7.

Figur a 3. 7. Dades del client d’un anunci
Informes dels anuncis
Joomla! permet visualitzar estadístiques del anuncis. Accedint a la pantalla Gestor

d’anuncis/Seguiment es pot generar un informe com el de la figura 3.8
F ig ur a 3 . 8. Dades de seguiment d’un anunci
3.1.2 Contactes
És molt probable que vulgueu que els usuaris que visitin el vostre lloc web es posin
en contacte amb vosaltres. Per fer això podríeu publicar un article amb les vostres
dades de contacte. Però és possible que el vostre lloc web necessiti mostrar les
dades de contacte de molts usuaris, per exemple si és un lloc web d’una empresa
gran o un institut. Per a aquests casos us podria ser útil fer una classificació dels
contactes per departaments.
Per treballar amb aquestes dades de contactes, el Joomla! proporciona la gestió

de categories i contactes.
Gestió de categories de contactes
Podeu crear diferents categories on es classificaran els vostres contactes. Per acce-
dir al gestor de categories, feu clic en el menú Components/Contactes/Categories.
Veureu una llista de les categories que teniu definides en el lloc web. La primera
vegada que entreu, aquesta llista estarà buida. Les columnes de la llista us donen
diferent informació sobre les categories. Teniu un filtre de selecció per poder fer un
filtratge entre totes les categories si en teniu més de les que es poden veure en una
pantalla. A les pestanyes de dalt podeu triar que la llista mostri les categories o bé
els contactes. Feu clic al botó Nou de la barra d’eines per crear una nova categoria.
Veureu el formulari de creació de categories, aquest formulari és el mateix que es
fa servir per crear les categories d’articles, encara que aquí molts dels paràmetres
no es fan servir. L’únic paràmetre necessari per introduir és el títol i l’àlies (aquest
últim, de la mateixa manera com passa en altres formularis de creació del Joomla!,
si el deixeu en blanc el mateix Joomla! l’omplirà per vosaltres).
Gestió de contactes
Per accedir al gestor de categories feu clic en el menú Components/Contactes/.

Veureu una llista dels contactes que heu creat en el lloc web. La primera vegada
que entreu aquesta llista estarà buida. A cada columna de la llista es mostra un
dels paràmetres del contacte. Teniu un filtre de selecció per poder filtrar entre els
diferents contactes: per categoria, per estat (si està publicat o no) o pel nom. Si feu
clic en el botó Paràmetres, podreu escollir la configuració global que s’aplicarà
a tots els contactes. Entre les coses que podeu configurar hi ha quins camps dels
contactes voleu que es mostrin i si voleu que es mostrin icones juntament amb els
camps dels contactes.
Per crear un contacte heu d’haver creat prèviament almenys una categoria de
contactes. Feu clic en el botó Nou de la barra d’eines per crear un nou contacte.
Apareixerà el formulari de creació de contacte (vegeu figura 3.9).
F igu r a 3. 9 . Formulari per crear un nou contacte
En aquesta pantalla s’ha d’introduir el nom del contacte i a la fitxa Nou contacte:
• Usuari/a enllaçat: usuari de Joomla!
• Imatge: una imatge que identifiqui el contacte
• Posició: càrrec utilitzat pel contacte
• Correu-e: adreça de correu electrònic
• Adreça: adreça postal
• Localitat: població del contacte
• Província: província del contacte
• Codi postal: codi postal de la localitat
• Estat: país
• Telèfon: número de telèfon
• Mòbil: número de telèfon mòbil
• Fax: número de fax
• Pàgina web: adreça web del contacte
• Primer camp d’ordenació: part del nom a utilitzar com a primera ordena-
ció
• Segon camp d’ordenació: part del nom a utilitzar com a segona ordenació
• Tercer camp d’ordenació: part del nom a utilitzar com a tercera ordenació
A la fitxa Altres informacions es pot indicar text extra relacionat al contacte (vegeu
figura 3.10).
F ig ur a 3. 10. Fitxa Altres informacions
A la fitxa Publicant (figura 3.11) s’accedeix a les dades de publicació del contacte:
• Inici de la publicació: data opcional que indica quan s’inicia el contacte

• Final de la publicació: data opcional que marca la finalització de la

publicació del contacte
• Data de creació: data a la qual es va crear el contacte
• Creat per: identificador de l’usuari que ha creat el contacte
• Creat per àlies: es mostrarà un pseudònim i no l’identificador de l’usuari
• Data de modificació: data de l’ultim canvi realitzat al contacte
• Modificat per: indica l’usuari que ha realitzat l’última modificació al

contacte
• Clics: el nombre de vegades que s’ha vist aquest contacte
• ID: identificador d’aquest contacte a la base de dades
• Metadescripció: descripció del contacte

• Autor/a: identificació de la persona que ha creat el contacte
• Drets: publicació dels drets del contacte
A la fitxa Mostra (figura 3.12) es poden configurar diferents paràmetres que poden
aparèixer relacionats amb el contacte.
Figur a 3. 12. Fitxa Mostra
I a la fitxa Formulari (figura 3.13) apareixen els camps que tindrà el formulari
d’alta dels contactes:
F ig ur a 3 . 13 . Fitxa Formulari
3.1.3 Canals d’informació
Cada dia és possible que consulteu una gran quantitat de llocs web a Internet, fins
i tot més d’una vegada al dia. Si la quantitat de llocs web que visiteu és molt gran,
la tasca de consultar totes les pàgines per veure si hi ha hagut cap novetat és molt
llarga. A més a més, moltes vegades una pàgina no haurà canviat des de la darrera
vegada que l’heu visitada, i això fa que l’esforç de visitar-la sigui inútil.
Els canals d’informació us permeten resumir en una llista unificada les novetats
d’altres llocs web; d’aquesta manera no heu d’anar individualment comprovant
les novetats d’aquestes pàgines.
Els canals d’informació, en anglès RSS (Really Simple Syndication), són uns
formats de sindicació que serveixen per recollir contingut que es publica freqüent-
ment (com ara notícies, blogs, etc.) en un format estàndard. Després, es pot afegir
a una altra pàgina un lector d’RSS on es mostraran les novetats de sindicació
perquè es puguin llegir fàcilment.
Gestió de categories dels canals d’informació
Les categories us permeten classificar els canals d’informació com vulgueu.

Per exemple podríeu classificar tots els canals d’informació de notícies en una
categoria i en una altra els canals de blogs. Tots els canals d’informació que definiu
en el vostre lloc web han d’estar dins d’una categoria.
Podeu accedir al gestor de categories dels canals d’informació des del menú
Components/Sindicacions d’articles/Categories. En el gestor de categories podeu
veure una llista de les categories dels canals d’informació creades en el lloc web.
La primera vegada que hi entreu aquesta llista estarà buida. Les columnes de la
llista us donen una informació diferent sobre les categories.
Teniu un filtre de selecció per poder fer un filtratge entre totes les categories si
teniu més de les que es poden veure en una pantalla. En les pestanyes de dalt podeu
canviar que la llista mostri, o bé les categories, o bé els canals d’informació. Feu
clic en el botó Nou de la barra d’eines per crear una nova categoria (figura 3.14).
Figur a 3. 14. Fitxa Categoria
En la creació de categories de canals electrònics intervenen quatre fitxes:
• Categoria: descripció de la categoria
• Publicant: dades referents a la publicació de la categoria
• Permisos: perfil d’accés a la categoria
• Opcions: configuració alternativa
A la fitxa Categoria s’indiquen els valors:
• Descripció: text que descriu la categoria
• Pare: aquesta categoria pot pertànyer a una altra categoria, o bé pot tractar-
se d’una categoria Uncategorised
• Estat: una categoria pot estar publicada, despublicada, classificada o a la

paperera
• Accés: perfil d’usuari que pot accedir a aquesta categoria
• Idioma: llengua que s’aplica a aquesta categoria
• Etiquetes: etiquetes vinculades. Aquestes etiquetes han de ser úniques
• Nota: detall de la categoria
• Nota de la versió: detall de la versió de la categoria
A la fitxa Publicant els paràmetres són:
• Data de creació: data a la qual es va crear la categoria
• Creat per: identificador de l’usuari que ha creat la categoria
• Data de modificació: data de l’últim canvi realitzat a la categoria

• Modificat per: indica l’usuari que ha realitzat l’última modificació a la

categoria
• Clics: el nombre de vegades que s’ha vist aquesta categoria
• ID: identificador d’aquesta categoria a la base de dades
• Metadescripció: descripció de la categoria. Les paraules que s’utilitzin en


• Autor/a: identificació de la persona que ha creat la categoria
A la figura 3.15 es mostra una fitxa amb dades d’exemple:
A la fitxa Permisos (figura 3.16) es gestionen els permisos que han de tenir els
usuaris i visitants que vulguin tenir accés a la pàgina web:
F igu r a 3. 1 6 . Fitxa Permisos

A la fitxa Opcions (figura 3.17) es pot configurar una presentació alternativa, una
imatge i/o un text alternatiu.
F ig ur a 3. 17. Fitxa Opcions
Gestió de canals d’informació
Podeu accedir al gestor de canals d’informació a la pantalla Gestor de canals

electrònics/Canal electrònic. En aquest gestor podeu veure una llista dels canals
d’informació que teniu al vostre lloc web. La primera vegada que entreu, aquesta
llista estarà buida. Les columnes de la llista us donen una informació diferent sobre
les categories. Podeu filtrar els diferents canals d’informació escrivint una paraula
a la caixa de filtre que hi ha a dalt de la llista. També podeu filtrar entre els diferents
canals d’informació seleccionant una categoria o un estat en els desplegables que
podeu trobar dalt de la llista a la dreta. En les pestanyes de dalt podeu triar que la
llista mostri els canals d’informació, o bé les categories.
En la barra d’eines es troben els botons per treballar amb els canals d’informació.
Feu clic al botó Nou de la barra d’eines per crear un nou canal d’informació i
accedireu a una pantalla on heu d’indicar un títol, l’enllaç a l’RSS i una descripció,
F igu r a 3. 1 8 . Creació d’un nou canal d’informació
Notícies del Servei Català de Trànsit
Com en el cas del articles i categories els camps a configurar són gairebé els
mateixos:
• Estat: un canal pot estar publicat o no
• Accés: perfil d’usuari que pot accedir a aquest canal
• Idioma: llengua que s’aplica a aquest canal
• Etiquetes: etiquetes vinculades al canal
• Nota: detall del canal
• Nota de la versió: detall de la versió del canal
Es poden afegir dues imatges des de la fitxa Imatges i cal revisar les dades de la
fitxa Publicant.
A la fitxa Mostra trobeu els camps:
• Nombre d’articles: el número d’articles que es mostraran com a màxim
• Vida de la memòria cau: els minuts que triga la memòria cau a actualitzar-
se
• Direcció de l’idioma: direcció que segueix l’idioma
• Imatge del canal electrònic: inserir la imatge vinculada amb el canal
• Descripció del canal electrònic: mostra o oculta la descripció del canal
• Contingut de la sindicació: mostra el continguts dels articles
• Quantitat de caràcters per cada article del canal: quantitat de caràcters

que s’inclouen
• Presentació alternativa: presentació diferent a la predeterminada

• Ordre de la presentació de la sindicació: l’ordre en què es mostra
La figura 3.19 mostra una configuració bàsica de la fitxa Mostra.
F ig ur a 3. 19. Fitxa Mostra
Una vegada configurat tot i carregat el mòdul apareixerà a la web el canal de

notícies, com per exemple el que trobem a la figura 3.20.
Fi gu ra 3 . 20. Canal de notícies a la web
3.2 Extensions de Joomla!
Un portal web pot necessitar noves funcionalitats. El CMS utilitzat per gestionar-
lo pot quedar limitat, i donada aquesta situació és necessari trobar una solució.
Una extensió és un paquet que afegeix noves funcionalitats.
El CMS Joomla! està contínuament complementat amb noves extensions pel fet de
ser un programa molt utilitzat i tenir una comunitat molt àmplia de programadors.
Els complements són Hi ha diferents tipus d’extensions al Joomla!, com ara:

coneguts com a connectors
(o plug-in en anglès).
• Mòduls: s’utilitzen per mostrar continguts o mèdia
• Complements: afegeixen una característica o un servei
• Plantilles: determinen l’aspecte del front-end i del back-end
• Gestor d’idiomes: permet la configuració i instal·lació de diferents llengües
Des del Gestor d’extensions es pot:
• Instal·lar
• Actualitzar
• Gestionar
• Descobrir
• Utilitzar base de dades
• Rebre avisos
• Instal·lar idiomes
• Actualitzar llocs
La figura 3.21 mostra la pantalla del Gestor d’extensions:
Fig ur a 3 . 21 . Gestor d’extensions

3.2.1 Instal·lació d’extensions
A Joomla! es poden instal·lar extensions per quatre vies diferents:
1. Instal·lar des de la web
2. Pujar l’arxiu del paquet
3. Instal·lar des del directori
4. Instal·lar des de l’adreça URL
Utilitzar una via o una altra dependrà sobretot de les característiques del sistema
informàtic. Si no hi ha cap impediment la instal·lació des de la web és la via més
còmoda.
Instal·lar des de la web
Instal·lar des de la web és una de les formes més còmodes d’instal·lar noves
extensions al Joomla!. Aquest tipus d’instal·lació consisteix a navegar per un arbre
de categories buscant l’extensió desitjada, o bé utilitzar un cercador, tal com es
pot veure a la figura 3.22.
F ig ur a 3. 22. Instal·lació d’extensions des de la web
Pujar l’arxiu del paquet
Pujar l’arxiu del paquet d’instal·lació és un mètode molt interessant quan s’ha
pogut descarregar el fitxer amb anterioritat. L’únic que cal és utilitzar l’entorn
de la figura 3.23 per navegar per l’arbre de directoris de la màquina fins arribar a
l’arxiu del paquet i pujar-lo.
F igu r a 3. 2 3 . Instal·lació pujant l’arxiu del paquet
Instal·lar des del directori
Aquesta opció consisteix a utilitzar un directori temporal on es troba el paquet de

l’extensió. En el cas d’utilitzar una instal·lació en remot caldrà utilitzar un servidor
FTP.
Al camp Directori d’instal·lació s’especifica el directori on es carregaran els

fitxers i subdirectoris del paquet. Prement el botó Instal·la es procedeix a la
instal·lació.
A la figura 3.24 es pot veure el camí del directori:
F igu r a 3. 2 4 . Instal·lació des del directori
Instal·lar des de l’adreça URL
Utilitzant aquesta opció no cal descarregar cap arxiu, només s’ha d’especificar
l’adreça web on està ubicat el paquet de l’extensió (vegeu figura 3.25).
F igu r a 3. 2 5 . Instal·lació des d’una adreça web
Clicant al botó Instal·la automàticament s’iniciarà la instal·lació de l’extensió de

Joomla!.
3.2.2 Deshabilitar i desinstal·lar extensions
Des de la pantalla Gestor d’extensions/Gestiona es poden deshabilitar i desins-

tal·lat les extensions de Joomla! (figura 3.26).
F ig ur a 3. 26. Desinstal·lar una extensió
Abans de desinstal·lar una extensió heu d’estar totalment segurs que la voleu
desinstal·lar. Una vegada desinstal·lada, es perd per complet l’extensió i en alguns
casos totes les dades que hi tingui associades.
Si n’esteu segurs, seleccioneu les extensions que voleu desinstal·lar i feu clic al
botó Desinstal·la de la barra d’eines.
3.2.3 Gestió de mòduls
Des de la finestra de Gestor de mòduls/Mòduls es poden afegir i editar els mòduls

de Joomla!.
Les pàgines web gestionades amb Joomla! necessiten com a mínim 1 mòdul
menú.
Exemples de mòduls són les notícies o els anuncis. Alguns mòduls estan enllaçats
a determinats components, sent el cas més clar el mòdul menú (mod_mainmenu)
que està enllaçat amb el component Menú.
La instal·lació per defecte de Joomla! ja inclou una sèrie de mòduls, i l’usuari pot
decidir instal·lar-ne de nous. A la figura 3.27 es poden veure mòduls d’una pàgina
ja editada:
F igu r a 3. 2 7 . Mòduls d’una pàgina web ja editada
Exemple Mòdul Dades d’accés
Per afegir un mòdul és necessari accedir a la pàgina Gestor de mòduls/Mòduls i

clicar al botó Nou. A continuació apareix un llistat dels mòduls disponibles, com
podeu veure a la figura 3.28.
F igu r a 3. 2 8 . Mòdul Dades d’accés
Si per exemple cliqueu a sobre del mòdul Dades d’accés accedireu a configurar el
nou mòdul (figura 3.29).
Figur a 3. 29. Configuració del mòdul Dades d’accés
A part del títol, els camps que cal emplenar a la fitxa Mòdul són:
• Text inicial: escrit que es mostra al formulari d’entrada
• Text final: text que es mostrarà abans del formulari d’accés
• Redirecció de connexió: pàgina a la qual es redirecciona l’usuari quan

s’identifica correctament
• Redirecció de desconnexió: pàgina a la qual es redirecciona l’usuari quan

es desconnecta correctament
• Mostra benvinguda: aquesta opció permet mostrar o ocultar el missatge

de benvinguda
• Mostra el nom d’usuari: es mostra el nom d’usuari després d’identificar-se
• Xifra accés: utilitzant SSL es xifren les dades d’accés
• Mostra etiquetes: es poden seleccionar el text o les icones que mostren els
camps
• Mostra títol: apareix el títol
• Posició: on es col·loca el mòdul
• Estat: pot estar publicat, despublicat o a la paperera
• Inici de publicació: data de publicació del mòdul
• Final de publicació: data en què deixa d’estar publicat el mòdul
• Accés: permisos que han de tenir els usuaris que vulguin accedir al mòdul
• Ordre: ordre en què apareixerà el mòdul
• Idioma: llengua assignada
• Nota: text extra sobre el mòdul

3.2.4 Gestió de complements
La gestió de complements s’efectua des de la finestra Gestor de complements/-

Complements. Des d’aquí es podran editar, habilitar, deshabilitar i desbloquejar
els complements.
Com es pot veure a la figura 3.30, els complements poden ser de diferents tipus
i tenir diferents elements. Per defecte la instal·lació de Joomla! ja inclou tots els
complements bàsics.
F igu r a 3. 3 0 . Complements instal·lats
Exemple Autenticació - Joomla
Si per exemple cliqueu a sobre del complement Autenticació - Joomla accedireu

a la informació del complement (figura 3.31).
F igu r a 3. 3 1 . Detalls del complement Autenticació - Joomla
En aquest cas veieu que es tracta d’un mòdul que té per objectiu gestionar
l’autenticació dels usuaris. Podeu observar que està habilitat i és públic.
Exemple afegir un fòrum
Un fòrum (també conegut com a fòrum de discussió) és una pàgina web que dóna
suport a discussions i opinions en línia d’una sèrie d’usuaris. Els fòrums solen
tenir diferents temes de discussió ordenats en diferents categories, on els usuaris
poden opinar.
La manera més senzilla d’incloure un fòrum al vostre lloc web és instal·lar un

component de fòrum al Joomla! i configurar-lo correctament.
Hi ha molts components de fòrums disponibles per al Joomla!. Podeu trobar una

llista dels més popular a http://extensions.joomla.org/ i fent una recerca o bé
des de Gestor d’extensions: Instal·la.
Instal·lareu un component de fòrum que és molt potent i al mateix temps senzill

d’utilitzar: Kunena Forum. Baixeu la darrera versió de Kunena. Baixarà un fitxer
comprimit ZIP que conté el component de fòrum. Instal·leu el component des del
gestor d’extensions (figura 3.32). Trobareu una opció de menú nova a la pestanya
de components del Joomla! anomenada Kunena Forum, feu clic per començar a
editar el fòrum.
F ig ur a 3. 32. Instal·lació d’un fòrum amb Kunena
També podeu optar per l’opció d’instal·lar-lo des de Gestor d’extensions/Instal·la

(figura 3.33). Si seguiu aquesta via haureu de clicar a sobre del botó Install i
confirmar (figura 3.34).
F igu r a 3. 3 3 . Instal·lació de Kunena
F igu r a 3. 3 4 . Instal·lació de Kunena des de la web
Si tot va correctament apareixerà una finestra d’instal·lació (figura 3.35).
F ig ura 3 . 3 5 . Evolució de la instal·lació de Kunena des

de la web
i finalitzarà correctament (figura 3.36).
F i g ura 3 . 3 6 . Finalització de la instal·lació de Kunena des

de la web
Ara ja apareixerà Kunena al menú de components (figura 3.37).

Figur a 3. 37. Kunena al menú de components
Si l’obriu veureu l’entorn de gestió que presenta (figura 3.38).
Figur a 3 . 38 . Dashboard de Kunena
3.2.5 Gestió de plantilles
La gestió de plantilles es realitza des de Gestor de plantilles/Estils. En aquesta

finestra es poden marcar per defecte, editar, duplicar i esborrar els estils i veure
l’aspecte de les plantilles (figura 3.39).
F igu r a 3. 3 9 . Estils d’exemple del gestor de plantilles
Com es veu a la figura 3.39 cada estil pot ser marcat per defecte al front-end i
al back-end. També s’indica l’assignació, la localització, la plantilla vinculada i
l’identificador que li correspon.
Edició de l’estil
Per editar un estil cal estar a Gestor de plantilles/Estils i clicar a sobre de qualsevol
estil. Si per exemple es clica a sobre de l’estil Beez3 - Default es mostra la
informació de la figura 3.40 a la fitxa Avançat:
F igu r a 3. 4 0 . Estil Beez3 . Default
Aquests són els camps més importants pel que fa a l’estil i són modificables per
tal d’adequar-se a les necessitats de la pàgina web.
3.2.6 Gestió d’idiomes
Des de la pantalla Gestor d’idiomes/Idiomes instal·lats es poden instal·lar diferents

idiomes per al front-end i per al back-end.
A la figura 3.41 es veu un exemple on els idiomes disponibles per al front-end són
el català i l’anglès:
Figur a 3. 41. Idiomes disponibles: català i anglès
En aquest cas l’idioma per defecte és el català.
Per instal·lar un nou idioma cal clicar al botó Instal·la idioma (figura 3.42).
Figu r a 3 . 4 2. Botó Instal·la idi-

oma
Apareixerà un llistat com el de la figura 3.43.
F ig ur a 3. 43. Llistat d’idiomes
Si no aparegués cap idioma cliqueu al botó Troba idiomes (figura 3.44).
Figu r a 3 . 4 4 . Botó Troba idio-

mes
Si necessiteu instal·lar l’holandès el seleccioneu de la llista (figura 3.45).
F ig ur a 3. 45. Instal·lar l’holandès
Després cliqueu al botó Instal·lar. Quan finalitzi la instal·lació i tot hagi anat
correctament apareixerà el missatge de la figura 3.46.
F igu r a 3. 4 6 . Idioma instal·lat
Si torneu a Gestor d’idiomes/Idiomes instal·lats veureu que ara també apareix

l’idioma holandès (figura 3.47):
F igu r a 3. 4 7 . Idioma instal·lat i preparat
Aquest idioma també estarà automàticament disponible per al back-end (figura

3.48):
F igu r a 3. 4 8 . Idioma instal·lat i preparat també al back-end.
No s’ha d’oblidar que podeu instal·lar tots els idiomes que necessiteu, però només
un serà per defecte.
3.3 Seguretat
Instal·lar un gestor de continguts és una tasca senzilla. Però una vegada acabada
la feina de tenir el lloc web actiu s’ha de continuar treballant per assegurar-ne el
funcionament, especialment en qüestions de seguretat.
El vostre lloc web fa servir quatre tecnologies diferents: Apache, PHP, MySQL
i Joomla!, a part del sistema operatiu. La seguretat s’ha de revisar en totes, ja
que els possibles atacants poden aprofitar vulnerabilitats en qualsevol d’aquestes
tecnologies.
Contínuament apareixen problemes de seguretat que són resolts en les noves

versions dels paquets dels programes. Per això és molt important tenir la darrera
versió dels programes que utilitzem per tenir un lloc web menys vulnerable.
Joomla! està dissenyat per ser un sistema segur, per tant la instal·lació per defecte
ja us dóna un lloc web amb una seguretat elevada. Així i tot hi ha certes accions
que podeu fer per assegurar encara més el funcionament del vostre lloc web.
La millor manera d’estar informat sobre els problemes de seguretat del Joomla!
és subscriure’s a un fòrum de seguretat per veure alertes sobre nous problemes.
Podeu accedir a un d’aquests fòrums a **Seguretat Informàtica**.
Aquests són alguns dels consells de seguretat que podeu seguir per obtenir un lloc
web més segur:
• Una vegada acabada la instal·lació no oblideu d’esborrar la carpeta Installa-

tion i tots els arxius que conté. Si un atacant aconsegueix accedir a aquesta
carpeta, podria reinstal·lar el sistema de nou i esborrar tot el lloc web.
• Feu còpies de seguretat freqüentment.
• Actualitzeu els paquets dels programes i de Joomla! a la darrera versió per

solucionar nous problemes de seguretat.
• Feu les proves de funcionament a un servidor local, en lloc del servidor

on finalment es connecten els usuaris. Quan comproveu que tot funciona
correctament, actualitzeu el contingut en el servidor final.
• Si els usuaris poden penjar contingut al lloc, poden introduir codi PHP al
text enviat per fer accions no permeses al lloc. Editeu la configuració dels
editors de text que poden fer servir els usuaris en el gestor de connectors per
netejar el text que hi poden incloure.
3.3.1 Recuperar la contrasenya d’administrador
La gestió de contrasenyes és un punt molt important dins de les tasques de

l’administrador del gestor de continguts. Què passa quan s’extravia la contrasenya
de l’administrador? És possible que sense aquesta contrasenya el manteniment de
la web quedi completament aturat.
S’ha de valorar la vulnerabilitat del CMS. Des de la gestió d’usuaris es poden

regenerar les contrasenyes si s’hi accedeix amb els permisos necessaris, però si
queda anul·lat l’accés del compte d’usuari que pot realitzar aquesta tasca podem
tenir problemes.
Un mètode per recuperar l’accés és editar el fitxer:

1 configuration.php
Que trobareu a l’interior del directori:

1 /xampp/htdocs/Joomla
Canvieu al fitxer els permisos a 644 i editeu el fitxer afegint la línia:

1 public $root_user=’myname’;
En la qual myname és l’identificador d’un usuari que tenia accés i ara tindrà accés
d’administrador. Ara heu d’accedir al back-end de Joomla! amb aquest usuari
que ara té permisos d’administrador i restaurar el compte d’administrador que ha
extraviat la contrasenya.
F igu r a 3. 4 9 . Accés amb jcasadejust
A la figura 3.49 es demostra com la línia que es mostra tot seguit, afegida al fitxer
configuration.php, possibilita l’accés com a superusuari a un usuari que abans no
tenia aquest privilegi.
1 public $root_user=’jcasadejust’;
3.3.2 Còpies de seguretat
Fer còpies de seguretat és una de les tasques més importants de l’administrador

d’un lloc web. El vostre lloc web pot caure per molt diversos motius: per una
errada del maquinari, una configuració incorrecta, l’atac d’un intrús, etc. En
cas que deixeu de tenir el lloc web operatiu, una còpia de seguretat us permetria
recuperar el vostre lloc a un estat anterior (correcte). Això us estalviaria la feina
de tornar a reinstal·lar tot el sistema, les extensions que teniu instal·lades, a més
de l’estructura del lloc web, i el contingut dels articles.
Hi ha diverses maneres de fer una còpia de seguretat del vostre lloc web. Bàsica-
ment heu de fer còpia del següent:
• El contingut dels fitxers del Joomla!: això inclou les imatges i les
extensions instal·lades. Tots els fitxers del Joomla! es troben a la carpeta
d’instal·lació del Joomla!.
• La base de dades: a la base de dades es desa informació referent als usuaris,

articles, etc.
Podeu fer una còpia de tota aquesta informació manualment. Per fer-ho així
hauríeu de comprimir la carpeta del Joomla! i fer un buidatge del contingut de
la base de dades. Aquestes tasques es poden fer periòdicament si es configura el
sistema operatiu perquè les executi automàticament cada cert temps.
El Joomla! també té extensions que permeten fer tota aquesta tasca de manera
automàtica. Farem servir un popular component anomenat JoomlaPack que
serveix per fer i restaurar còpies de seguretat.
El backup Akeeba
El complement Akeeba (figura 3.50) és un complement de Joomla! molt útil per

crear i gestionar còpies de seguretat.
F ig ur a 3. 50. Complement Akeeba
El component de backup Akeeba disposa d’un panell de control (vegeu figura 3.51)
que permet:
• Realitzar la configuració amb un assistent
• Gestionar perfils
• Configurar-lo
• Realitzar una còpia de seguretat a l’instant
• Gestionar còpies de seguretat
• Veure els logs generats
• Accedir a informació diversa
• Comprovar els paràmetres dels components
• Excloure dades de la còpia de seguretat
• Excloure taules de la còpia de seguretat

F igu r a 3. 5 1 . Panell de control d’Akeeba
Una vegada realitzada la configuració bàsica es pot procedir a realitzar una còpia
de seguretat (figura 3.52):
F igu r a 3. 5 2 . Còpia de seguretat amb Akeeba
Clicant al botó Backup now! s’inicia la còpia de seguretat (figura 3.53).
F igu r a 3. 5 3 . Inici de la còpia de seguretat amb Akeeba

És molt important no manipular el Joomla! mentre es realitza la còpia de seguretat,

aquesta es podria veure malmesa si navegueu pel back-end.
Si tot ha anat correctament es visualitzarà la pantalla de la figura 3.54.
F ig ur a 3. 54. Còpia de seguretat finalitzada amb Akeeba
Si torneu al panell de control d’Akeeba i accediu a Akeeba Backup: Manage

Backups veureu que apareix la còpia de seguretat acabada de crear (figura 3.55).
F igur a 3 . 55 . Còpia de seguretat registrada amb Akeeba
3.4 Rendiment
Diversos són els factors que poden condicionar el rendiment d’una pàgina web,
però treballant amb Joomla! es posa a l’abast de l’administrador la possibilitat de
treballar de forma senzilla amb una variable important: la memòria cau.
La memòria cau emmagatzema informació requerida amb anterioritat. Quan

es demana accedir a aquesta informació, en comptes d’anar a l’origen de la
informació, és la memòria cau qui aporta les dades.
Des de la pantalla Gestor de complements/Sistema - Memòria cau (figura 3.56) es

pot habilitar i utilitzar la memòria cau del navegador.
Fi gur a 3 .5 6. Gestió de la memòria cau
També resulta interessant accedir a Configuració global (figura 3.57) i variar els
paràmetres de la configuració de la memòria cau:
Fi gur a 3 .5 7 . Configuració de la memòria cau
Des d’aquí es podrà optar per una memòria cau:
• Nivell convencional: sistema de memòria més petit
• Nivell progressiu: sistema de memòria més gran, inclou memòria cau de

renderitzat de mòduls
• Desactivat: memòria cau desactivada
També es pot escollir el gestor de memòria cau i el temps màxim (en minuts) que
estaran arxivats el fitxers a la memòria cau.
3.5 Actualització de versió
Per minimitzar els problemes de seguretat és recomanable que actualitzeu pe-

riòdicament el Joomla! i el programari dels serveis que feu servir. Quan
els programadors del Joomla! descobreixen una vulnerabilitat, aquesta queda
corregida en la versió següent. Per tant, tenir la darrera versió ajudarà que el
vostre lloc sigui menys vulnerable.
És perillós actualitzar el sistema directament en el lloc web que esteu fent servir. Si
quelcom va malament perdríeu tot el lloc. Cloneu el vostre lloc amb el JoomlaPack
per fer una prova prèvia d’actualització sobre el vostre lloc web clonat. Quan
comproveu que el procés d’actualització ha estat correcte, podeu fer l’actualització
sobre el vostre servidor final (fent una darrera còpia de seguretat, per si de cas).
Per actualitzar el sistema, seguiu els passos següents:
1. Baixeu el fitxer d’actualització. Des de la pàgina de baixades de Joomla feu

clic a l’enllaç Download other Joomla3.4.x packages. En el futur el número
de la versió serà diferent. Veureu una llista de fitxers que corresponen a la
versió original i la versió a la qual voleu actualitzar. Podeu veure quina
versió de Joomla! esteu fent servir en el menú de Joomla ajuda/Informació
del sistema. Seleccioneu el fitxer amb extensió ZIP o TAR.GZ, el que millor
s’adapti al vostre sistema operatiu.
2. Feu la còpia de seguretat del vostre lloc amb el JoomlaPack.
3. Instal·leu els fitxers d’actualització. Descomprimiu el fitxer comprimit que

heu baixat de la pàgina de Joomla!. A continuació copieu el contingut
d’aquesta carpeta a la vostra carpeta d’instal·lació de Joomla! Si el vostre
servidor és remot, carregueu els fitxers mitjançant l’FTP.
4. Comproveu que el lloc web està funcionant correctament.
Una vegada comprovat que el lloc web està funcionant correctament sobre el
servidor clonat, podeu fer l’actualització en el servidor final.
3.5.1 Actualitzar Joomla! a la darrera versió
Des del back-end es pot actualitzar Joomla! amb les últimes versions. Si accediu
a Actualitza Joomla! us apareixerà la pantalla que teniu a la figura 3.58 on
s’indicaran les últimes actualitzacions disponibles. En el cas d’aquest exemple
la versió actual és la 3.4.1 que coincideix amb la instal·lada i, per tant, no es pot
actualitzar.
F igu r a 3. 5 8 . Versió actualitzada de Joomla!
3.6 Migració
La migració de Joomla! és necessària per diversos motius:
• Les noves versions incorporen millores tècniques
• Les noves versions són més segures
• Una migració és una oportunitat per simplificar un espai web
• Augmenta la possibilitat d’adaptar la web a nous usuaris
• Millora l’optimització dels motors de cerca
Una migració requereix d’una planificació prèvia. No és el mateix migrar un

Joomla! versió 1.5 a una versió 3.4 que migrar un Joomla! versió 2.5 a una versió
3.4
Per fer una migració cal seguir (sense saltar-se’n cap) diversos passos:
1. Realitzar una còpia de seguretat del Joomla! actual
2. Comprovar que el sistema compleix els requisits tècnics de la nova versió

de Joomla!
3. Crear una nova base de dades i un nou usuari per restaurar la versió antiga
4. Crear una pàgina de proves per comprovar la integritat del Joomla!
5. Revisar la versió de la base de dades
6. Testejar el sistema
Una tasca que no s’ha d’oblidar mai és la de documentar tots els processos que
s’apliquin.
Portals web d'aprenentatge
Montserrat Madridejos Mora, Nuria Montolio Catalán
Aplicacions Web
Aplicacions Web Portals web d'aprenentatge
Índex
Introducció 5
1 Instal·lació de portals web d’aprenentatge 9

1.1 Entorns virtuals d’aprenentatge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.1.1 Recursos dels portals web d’aprenentatge . . . . . . . . . . . . . . . . . . . . . . . . 11
1.1.2 Activitats dels entorns virtuals d’aprenentatge . . . . . . . . . . . . . . . . . . . . . . 12
1.1.3 Rols als portals web d’aprenentatge . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.1.4 Eines de comunicació als portals web d’aprenentatge . . . . . . . . . . . . . . . . . . 15
1.2 Tecnologies. Preparació de l’entorn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.3 El procés d’instal·lació d’un portal web d’aprenentatge . . . . . . . . . . . . . . . . . . . . . 17
2 Configuració de portals web d’aprenentatge 27

2.1 Personalització de l’entorn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.1.1 La pàgina d’inici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.1.2 La pàgina de cada usuari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.1.3 Perfils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.1.4 Blocs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.1.5 Temes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.1.6 Idioma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.1.7 Altres aspectes: capçalera, peus de pàgina, logo... . . . . . . . . . . . . . . . . . . . . 33
2.2 Gestió d’usuaris. Autenticació . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.2.1 Autenticació . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.3 Gestió de seguretat. Rols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.3.1 Seguretat del lloc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.3.2 Rols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2.4 Creació i configuració de cursos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2.4.1 Estructura i paràmetres dels cursos . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.4.2 Inscripcions als cursos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
2.4.3 El contingut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
3 Administració de portals web d’aprenentatge 49

3.1 Addició i actualització de funcionalitats de portals web d’aprenentatge . . . . . . . . . . . . . 50
3.1.1 Activar i desactivar funcionalitats de portals web . . . . . . . . . . . . . . . . . . . . 51
3.1.2 Afegir funcionalitats noves al portal web . . . . . . . . . . . . . . . . . . . . . . . . 53
3.1.3 Actualitzar funcionalitats existents en el portal web . . . . . . . . . . . . . . . . . . . 55
3.1.4 Actualitzar el portal web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
3.1.5 Mode de manteniment del portal web . . . . . . . . . . . . . . . . . . . . . . . . . . 57
3.2 Còpies de seguretat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
3.2.1 Còpies de seguretat de cursos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
3.2.2 Restauració de còpies de cursos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
3.2.3 Còpies de seguretat del lloc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
3.3 Administració d’usuaris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Aplicacions Web Portals web d'aprenentatge
3.4 Informes d’accés i utilització del portal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

3.4.1 Informes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
3.4.2 Registres d’activitat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
3.4.3 Informes i registres dels professors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Aplicacions Web 5 Portals web d'aprenentatge
Introducció
L’educació a distància ha fet un salt qualitatiu i quantitatiu els darrers anys arran
de l’espectacular creixement en l’ús d’Internet i la consolidació dels portals web
d’aprenentatge. Actualment pot competir en igualtat de condicions amb els
sistemes tradicionals d’aprenentatge presencial, ofereix més flexibilitat i permet
arribar a gent que d’altra manera no hi tindria accés.
No solament Internet, sinó una nova dimensió web on els usuaris col·laboren,
comparteixen, participen i creen contingut. Així doncs, aquí és on s’emmarquen
aquests portals d’aprenentatge, on professors, alumnes i usuaris comparteixen un
espai comú amb gran diversitat de recursos per aprendre, comunicar-se, opinar o
treballar en grup.
És, doncs, evident, la importància de conèixer les possibilitats que ofereixen

aquests entorns per a la formació. Aprendre a instal·lar-los, dotar-los d’una imatge
personalitzada, gestionar la seguretat i afegir-hi noves funcionalitats, són alguns
dels temes que treballareu.
En l’apartat “Instal·lació de portals web d’aprenentatge” s’introdueix què és un

portal web d’aprenentatge i es descriuen els components que s’hi poden trobar,
a continuació es parla de les tecnologies implicades i s’explica com cal preparar
l’entorn i com se’n fa la instal·lació detalladament.
En l’apartat “Configuració de portals web d’aprenentatge” una vegada instal·lat, es

detallen les diferents tasques que cal fer per començar a fer servir el portal. Això
inclou personalitzar l’aspecte, implementar les polítiques de seguretat adients i
preparar els cursos.
En l’apartat “Gestió de portals web d’aprenentatge” es descriuen la resta d’acti-

vitats implicades en l’explotació del portal, la realització de còpies de seguretat,
la generació d’informes i l’addició de noves funcionalitats; són tasques que de
manera asíncrona caldrà fer per garantir-ne el funcionament correcte i el bon ús.
Aquesta unitat formativa és eminentment pràctica; per treballar els continguts

utilitzarem una de les eines més popular d’ensenyament a distància, anomenada
Moodle. Tot i que hi ha altres eines, algunes de les quals es mostraran, el Moodle
és l’estàndard de facto.
En acabar la unitat, heu de ser capaços del següent:
1. Reconèixer l’estructura del lloc i la jerarquia de directoris generada.
2. Fer modificacions en l’estètica o l’aspecte del lloc.
3. Manipular i generar perfils personalitzats.
4. Comprovar la funcionalitat de les comunicacions mitjançant fòrums i con-

sultes, entre d’altres.
5. Importar i exportar continguts en diferents formats.
6. Fer còpies de seguretat i restauracions.
7. Fer informes d’accés i utilització del lloc.
8. Comprovar la seguretat del lloc.

més ús en el sector.
10. Documentar adequadament la instal·lació del gestor d’aprenentatge, les

incidències aparegudes i les solucions aportades.
1. Instal·lació de portals web d’aprenentatge
Els entorns virtuals d’aprenentatge (EVA), virtual learning environment (VLE)

en anglès, són programes específicament dissenyats per facilitar l’aprenentatge
utilitzant sistemes informàtics. La majoria d’ells treballen en entorns web, per
això són també anomenats portals web d’aprenentatge.
Hi ha molts entorns virtuals d’aprenentatge, alguns d’ells són lliures, altres de

codi obert i també n’hi ha de privatius. Alguns d’aquests són:
• Moodle: un dels més estesos amb una àmplia comunitat d’usuaris.
• Blackboard: és un conjunt de programari per a la gestió educativa integra-

da; és de propietat i de pagament.
• ATutor: és una aplicació web i de codi obert per a la gestió de cursos i per
treballar col·laborativament amb els estudiants.
• Claroline: plataforma web d’aprenentatge virtual de codi obert, semblant

a l’ATutor amb una àmplia comunitat de desenvolupadors i usuaris a tot el
món.
• Schoology: plataforma gratuïta que conté diverses eines que permeten la

comunicació d’un grup de persones, programar activitats i compartir idees
i material educatiu.
• Lectrio: treballa d’una manera integrada amb serveis de Google i altres com
Dropbox, Facebook i Instagram. S’adapta molt bé a dispositius mòbils.
• Google Classroom: plataforma web d’aprenentatge de Google dissenyada

per professors de Google Apps for Education amb l’objectiu d’organitzar les
classes i facilitar la comunicació dels professors amb els estudiants. Treballa
en connexió amb altres aplicacions de Google com Drive, agilitzant la gestió
dels fitxers per a una comunitat d’estudiants, permetent per exemple fer una
còpia automàtica dels diferents documents per a cada estudiant. També és
capaç de gestionar la realització de tasques per part dels estudiants, així
com el seu seguiment i avaluació. Per a informació més detallada podeu
consultar: https://www.google.com/intl/ca_ALL/edu/classroom/.
• Altres: Docebo, Dokeos, Olat, Sakai, Chamilo, Udemi, Edmodo, Edu2.0,

Com8.s, Course.sites...
En la figura 1.1 podeu observar alguns icones dels diferents portals.
Tot i que seria interessant poder presentar cadascun d’aquests entorns virtuals, ens
centrarem en la plataforma Moodle versió 2.8.
F igu r a 1. 1 . Icones dels diferents portals
La instal·lació d’un sistema informàtic requereix un treball previ d’anàlisi i

avaluació, cal conèixer els requisits del sistema i destriar entre les múltiples
opcions disponibles: el cost, la complexitat o la tecnologia que utilitzen seran
paràmetres que caldrà tenir en compte.
En el cas dels entorns web, tot i ser heterogenis, generalment utilitzen tecnologies
similars: el servidor web, la base de dades i els llenguatges dinàmics. Aquests són
elements comuns que treballen per fer-los funcionar, i cal entendre quin rol hi té
cadascun d’ells.
1.1 Entorns virtuals d’aprenentatge
Els entorns virtuals d’aprenentatge (Virtual Learning Environment), anomenats

habitualment portals web d’aprenentatge, són programes creats per facilitar l’en-
senyament alhora que permeten un aprenentatge més dinàmic i flexible que els
sistemes tradicionals.
Aquests entorns aprofiten els avantatges que ofereixen les tecnologies de la

informació per permetre la comunicació entre els diferents agents implicats en
el procés educatiu.
Un entorn virtual d’aprenentatge és un programari basat en tecnologies

web, dissenyat per facilitar el procés d’aprenentatge.
Tot i que un entorn virtual d’aprenentatge pot aplicar-se a diferents àmbits, el

més usual és l’àmbit educatiu, tant per centres educatius com per cursos de
formació. En aquest sentit, el formador presenta els seus materials, que poden
ser interactius, en format digital, i fa el seguiment de les activitats i porta el
control de l’avaluació, alhora que està sempre en comunicació amb els seus
alumnes. Hi ha una gran diversitat de recursos disponibles que garanteixen un
procés d’aprenentatge dinàmic, constructivista i amè.
D’altra banda, els alumnes disposen de múltiples eines per comunicar-se i

col·laborar, resoldre dubtes i treballar cooperativament, en general sense limita-
cions horàries ni espacials.
Seguint un dels principis del constructivisme social, se sap que els éssers humans
elaboren coneixement a partir de la relació social. Aplicant aquest concepte al
món de l’educació, ens trobem que l’alumne passa a participar de forma activa i
conscient en el procés d’aprenentatge. En aquest sentit, les plataformes virtuals
d’aprenentatge afavoreixen que es pugui potenciar aquest aspecte.
La facilitat d’ús d’aquests entorns és una de les claus del seu èxit; uns recursos
mínims (un ordinador i una connexió a Internet) i unes habilitats elementals en la
utilització d’aquestes eines informàtiques, garanteixen que tothom hi pugui tenir
accés.
Moodle és un exemple d’entorn virtual d’aprenentatge. És un programa de Logotip de Moodle
codi lliure i gratuït, amb una comunitat molt àmplia d’usuaris arreu del món.
Es basa en el constructivisme social per a l’adquisició del coneixement.
La paraula ’Moodle’...
Per entendre una mica millor què és Moodle i en general els ... és un acrònim de modular
object-oriented dynamic
entorns virtuals d’aprenentatge podeu veure la presentació següent: learning environment (entorn
d’aprenentatge dinàmic orientat
http://download.Moodle.org/docs/es/presentation_es.swf. a objectes i modular). També és
un verb anglès que descriu el
procés de vagar amb peresa per
algun lloc i fer les coses quan
se’ns acut fer-les.
1.1.1 Recursos dels portals web d’aprenentatge
Els recursos dels entorns virtuals d’aprenentatge són totes aquelles eines
que permeten al formador aportar materials didàctics o bé crear-los per tal
de comunicar i complementar el coneixement als seus alumnes. El mode edició és
imprescindible per modificar
el contingut dels cursos. En
Aquests són els recursos que proporciona Moodle i que els professors, en mode activar-lo apareixen un
conjunt d’icones associades
edició, poden afegir als seus cursos: a cada ítem del curs i als
blocs, que ens permetran
modificar la seva col·locació
i editar els continguts
• Fitxer: és un document en qualsevol format (PDF, ODT, DOCX ...): una didàctics. També ens
permet afegir nous
imatge, un full de càlcul, un fitxer d’àudio o vídeo... continguts al curs. Per
activar-lo o desactivar-lo cal
prémer al botó Activa edició
• Carpeta: ajuda a organitzar els fitxers i pot contenir altres carpetes. Ens o Desactiva edició.
permet agrupar fitxers en una carpeta i visualitzar-la al curs, reduint l’espai

ocupat a la pàgina principal d’aquest, si ho comparem amb el que ocuparia
si afegíssim cada fitxer per separat com a recurs del curs.
• Etiqueta: s’utilitza per inserir títols i elements multimèdia, i així organitzar

la resta de recursos del curs.
• Pàgina: es tracta d’una pàgina web, per tant navegable, que el professor
edita mitjançant un editor HTML.
• Llibre: s’utilitza per crear un conjunt de pàgines organitzades en capítols.

Poden contenir text, elements multimèdia i enllaços. Es tracta de continguts
més llargs que els fitxers.
• Paquet de contingut IMS: es tracta d’un llibre però navegable com una
pàgina web. Resulta complex de configurar i crear.
• URL: permet enllaçar qualsevol contingut d’Internet.
Llenguatge HTML En la figura 1.2 podeu observar el submenú per afegir un nou recurs.
HTML és l’acrònim d’Hyper
Text Markup Language, un dels F i g ura 1 . 2 . Submenú per afegir un nou recurs
llenguatges més populars per a la
creació de pàgines web.
1.1.2 Activitats dels entorns virtuals d’aprenentatge
Les activitats dels entorns virtuals d’aprenentatge permeten als alumnes

posar en pràctica de manera interactiva els coneixements adquirits,
comprovar el seu progrés, consolidar el seu aprenentatge, participar i
treballar en grup.
Els alumnes participen generant i lliurant documents, responent a preguntes,

afegint contingut o fins i tot donant la seva opinió.
Els formadors creen activitats dirigides als alumnes i en poden rebre el resultat
per tal d’avaluar-los i fer-ne el seguiment.
Hi ha una gran varietat d’activitats diferents. Poden ser de dos tipus: individuals
i col·laboratives.
Alguns exemples d’activitats individuals són: Una pregunta amb resposta

numèrica espera que
l’estudiant introdueixi un
nombre permetent un
• Consulta: és una pregunta i un conjunt de possibles respostes per triar. Per- marge d’error. S’habilita un
rang de possibles respostes
met al professor fer reflexionar a l’estudiant o verificar la seva comprensió encertades. Per exemple, si
la resposta correcta és 50
respecte algun tema. amb un marge d’error de 5,
serà correcte qualsevol
nombre entre 45 i 55.
• Eina Externa: és un enllaç a recursos d’aprenentatge d’altres llocs web que
permet a l’alumne interaccionar per millorar el seu aprenentatge.
• Enquesta: és un conjunt de preguntes que permet al professor recopilar

dades sobre els estudiants i el seu aprenentatge i també obtenir retroacció
respecte a la seva manera d’ensenyar.
• Lliçó: és una seqüència de preguntes i respostes que permet al professor

crear una experiència d’aprenentatge adaptatiu. El sistema pregunta i
l’alumne ha de donar una resposta. L’itinerari que segueix està en funció de
les respostes proporcionades per l’alumne.
• Paquet SCORM: permet carregar fàcilment qualsevol paquet SCORM i

convertir-lo en contingut del curs. Aquest es mostra en diferents pàgines
web per les quals es pot navegar.
• Qüestionari: és un conjunt de preguntes de diferents tipologies (selecció

múltiple, veritable-fals, aparellaments, resposta breu, numèriques) que
permeten al professor avaluar als alumnes. El professor pot permetre més
d’un intent, les preguntes poden sortir en un ordre diferent cada vegada i es
poden escollir aleatòriament d’un banc de preguntes.
• Tasca: és una activitat que permet al professor donar instruccions a

l’alumne, recollir-ne els treballs lliurats, avaluar-los i respondre-li amb una
retroacció.
La paraula SCORM...
... és un acrònim de Shareable
Content Object Reference Model
Alguns exemples d’activitats col·laboratives són: (model de referència d’objectes
compartibles de contingut). És
un format estàndard consensuat
d’objectes d’aprenentatge.
• Base de dades: permet als participants crear un recull de dades heterogeni
(imatges, documents, adreces web, textos...) i després treballar-hi, per
exemple, fent cerques i mostrant la informació. S’utilitzen per mantenir
col·leccions d’enllaços web, revistes, ressenyes de llibres i altres.
• Glossari: és un recull de termes i les seves definicions corresponents. El

glossari pot ser una activitat col·laborativa si el creen els alumnes, o bé un
recurs didàctic més si el crea el professor.
• Taller: permet la recollida dels treballs lliurats pels alumnes i l’avaluació

entre ells. L’avaluació pot ser anònima i el professor pot indicar la rúbrica
per facilitar-la. L’alumne rep dues notes, la del propi treball i la de
l’avaluació realitzada.
• Wiki: permet la creació col·lectiva de documents web. Els alumnes editen

el document i afegeixen, modifiquen o treuen contingut. Es pot utilitzar per
tal que els alumnes creïn els seus apunts de classe.
Wiki wiki significa En la figura 1.3 podeu observar el submenú que permet afegir una nova activitat.
‘superràpid’ en l’idioma
hawaià.
F i g ura 1 . 3 . Submenú per afegir una nova activitat
1.1.3 Rols als portals web d’aprenentatge
Un rol és una col·lecció de permisos definida per a tot el sistema que podeu
assignar als usuaris en contextos específics. La combinació de rol i context
defineix les accions que l’usuari pot fer a les pàgines. Tractant-se d’un entorn
d’aprenentatge, els rols més comuns que ofereix Moodle és el de professor i
estudiant a més del d’administrador per gestionar el portal.
1.1.4 Eines de comunicació als portals web d’aprenentatge
Les eines de comunicació als portals web d’aprenentatge són un element bàsic
en el procés d’aprenentatge; la comunicació amb el professor, els dubtes que
aclareixen els companys o les discussions i el debat són necessaris i ajuden
l’alumne.
Les eines de comunicació dels portals web d’aprenentatge són totes aquelles
que permeten als agents que hi intervenen comunicar-se entre ells. La
comunicació pot ser en directe o en diferit.
Aquestes són algunes de les eines existents per a la comunicació dels portals web
d’aprenentatge:
• Fòrum de notícies: també anomenat tauler, on participa el professor per

escriure avisos i notícies i els estudiants només poden llegir.
• Fòrums: hi pot participar tothom; s’organitza en temes que agrupen els

missatges dels usuaris. Es poden crear nous temes, afegir-hi missatges o
contestar missatges d’altres usuaris. Es pot seguir la cronologia i conèixer
l’autoria dels comentaris.
• Missatgeria: funciona com un sistema de correu intern en l’aplicació. Es

poden enviar missatges a un o diversos usuaris. El sistema en manté el
registre.
• Xats: permeten la comunicació en directe; d’aquesta manera es poden resol-

dre dubtes fàcilment entre usuaris que estiguin connectats simultàniament.
No en queda cap registre.
• Bitàcoles: també anomenades blogs, que funcionen com un diari on es

poden escriure pensaments, anècdotes, informar d’esdeveniments interes-
sants o en general afegir qualsevol contingut que no estigui necessàriament
relacionat amb la matèria del curs però que l’autor cregui que pot ser
interessant per als altres usuaris.
A part, hi ha algunes activitats que es poden fer servir com a eines de comunicació,
com ara les enquestes o les qüestions.
1.2 Tecnologies. Preparació de l’entorn
Abans d’instal·lar qualsevol programari cal fer una tasca prèvia de comprovació;
s’ha de determinar si el sistema compleix tots els requisits i té tot allò necessari.
En aquest sentit Moodle és un programari que treballa sobre un entorn web

dinàmic i amb una base de dades; concretament està escrit en llenguatge PHP
i en general s’utilitza una base de dades MySQL, i per tant cal preparar aquest
L’Apache, el PHP, el MySQL
entorn abans de començar a instal·lar-lo.
Aquestes tecnologies són molt
utilitzades conjuntament a Per entendre la diferència entre pàgines web estàtiques i dinàmiques cal preguntar-
Internet per crear
infraestructures de servidors se quin és el rol de l’usuari. En una pàgina web estàtica l’usuari és un simple
web; són gratuïtes i de codi obert.
espectador, pot llegir documents, veure imatges o altres continguts multimèdia:
aquest era l’ús clàssic de la web. En canvi, en un entorn dinàmic es pot crear el
contingut, es pot afegir un comentari, per exemple en un fòrum o en una wiki, es
pot pujar un document i compartir-lo —una imatge o un vídeo—, es pot crear un
blog per explicar un viatge on d’altres usuaris poden dir la seva. Internet n’és ple
d’exemples: Youtube (vídeos), Flickr o Picasa (fotografies) o Blogger (bitàcoles)
en són alguns.
D’aquí se’n desprèn per una banda la necessitat d’una base de dades on s’enregistra
i interrelaciona tota aquesta informació que aporten els usuaris, i per una altra
la necessitat d’un llenguatge que permeti mostrar aquest contingut dinàmic.
Imagineu un àlbum de fotografies a la web: un dia pot tenir una fotografia, al
dia següent en pot tenir 10, i l’altre en pot tenir 30; amb un llenguatge estàtic
caldria modificar la pàgina cada vegada, caldria un programador web i els canvis
no serien immediats.
A més, és necessari un tercer element, el servidor web, que podeu entendre des de
dos punts de vista diferents: per una banda és l’ordinador que accepta les peticions
dels navegadors web dels clients i els retorna els documents que mostren, i per una
altra és el programari que gestiona aquesta funcionalitat.
Hi ha tres elements principals que cal preparar abans de començar a instal·lar

Moodle: el servidor web, l’extensió per al llenguatge dinàmic i la base
de dades. El servidor web, l’extensió per al llenguatge dinàmic i la base
de dades es poden instal·lar per separat i configurar-los, però hi ha eines
disponibles que faciliten aquesta tasca i estan disponibles per a qualsevol
sistema operatiu.
En la taula 1.1 es mostren alguns exemples de programes que inclouen com a

mínim l’Apache, el PHP i el MySQL.
Taul a 1. 1. Alguns paquets de servei i les plataformes per a les quals estan disponibles
Linux Windows Mac OS Web
WampServer X http://www.wampserver.com/
Xampp X X X http://www.apachefriends.org
EasyPHP X http://www.easyphp.org/
Mamp X http://www.mamp.info
Al web www.apachefriends.org podreu descarregar el XAMPP per Linux i Win-

dows amb informació detallada sobre el procés d’instal·lació. Concretament, a
www.apachefriends.org/es/faq_linux.html trobareu indicacions per a realitzar la
instal·lació en Linux.
Finalment també hem d’assegurar-nos que els futurs usuaris del portal web hi
tinguin accés. Per exemple, si només són usuaris d’una xarxa local es pot instal·lar
en un dels ordinadors de la xarxa, però si voleu que els usuaris tinguin accés
a l’aplicació des d’Internet cal que ens assegurem que l’ordinador on s’instal·la
és accessible des de la web o bé utilitzar un servidor preparat d’algun proveïdor
d’hostatge de webs.
1.3 El procés d’instal·lació d’un portal web d’aprenentatge
Per fer la instal·lació d’un portal web d’aprenentatge cal que seguiu els passos que
s’exposen a l’esquema de la figura 1.4. Us pot ser útil el següent tutorial:
https://www.youtube.com/embed/6Ystx8o9pYU?controls=1
Figu r a 1. 4. Esquema del procés d’instal·lació
Aquest és un procediment general per a qualsevol portal d’aprenentatge o fins i tot

per a qualsevol aplicació que funcioni amb tecnologies similars; com a exemple
es descriuen els passos per instal·lar el Moodle (en podeu obtenir informació
més detallada a la pàgina oficial del https://docs.moodle.org/28/en/Main_page):
1. Comprovar els requisits al web del Moodle. Cal que recordeu que a més
del programari hi ha altres requisits que cal comprovar abans de començar amb
la instal·lació; per exemple, l’espai de disc dur o la memòria necessària. Més
informació a: https://docs.moodle.org/28/en/Installing_Moodle#Requirements.
2. Baixar l’última versió del portal d’aprenentatge Moodle corresponent

a la vostra plataforma. Trobareu diverses opcions per baixar el programari.
Més informació a https://download.moodle.org/releases/latest/. També hi ha
instal·ladors per al Windows o Mac OS que tenen a més el programari addicional:
el XAMPP per al Windows i el MAMP per al Mac OS.
3. Descomprimir i copiar els fitxers a l’arrel del servidor web. Una vegada
baixat el paquet amb els fitxers, cal que localitzeu la carpeta arrel del servidor
web, aquella que gestiona el servidor. En el sistemes operatius Linux la carpeta
DocumentRoot
arrel per defecte és /var/www.
L’arrel dels documents
(DocumentRoot) en el servidor Seguidament hi col·locareu els arxius descomprimits. En la figura 1.5 en podeu
web Apache2 la trobareu en el
fitxer /etc/apache2/apache2.conf observar el resultat.
fent una cerca del text
“DocumentRoot”.
Figur a 1. 5. Fitxers del Moodle col·locats a l’arrel del servidor web
4. Crear una base de dades buida anomenada moodle. Abans de continuar amb
la instal·lació cal crear una nova base de dades anomenada moodle i un usuari que
hi tingui accés amb uns determinats privilegis.
Hi ha diverses maneres de fer-ho: es pot fer servir la consola del MySQL (figura
1.6) o l’eina phpMyAdmin, que és una aplicació web per administrar la base de
dades i que s’instal·la amb la majoria de paquets (figura 1.7).
F igur a 1 . 6. Creació de la base de dades i usuari des de la consola del MySQL
Des de la consola del MySQL cal executar les següents instruccions:
1 CREATE DATABASE moodle DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;

2 GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, CREATE TEMPORARY TABLES, DROP,
INDEX, ALTER ON moodle.* TO moodleuser@localhost IDENTIFIED BY ’moodleuser
’;
Cal que introduïu el vostre usuari i la contrasenya corresponent. A l’exemple l’usu-

ari és moodleuser (a TO moodleuser@localhost) i la contrasenya és moodleuser
(a IDENTIFIED BY ‘moodleuser’).
F igu r a 1. 7 . Creació de la base de dades Moodle amb l’eina phpMyAdmin
Per crear un nou usuari amb els permisos necessaris podeu executar l’ordre SQL
Per defecte el MySQL crea següent (figura 1.8):
el superusuari root amb tots
els permisos; està totalment
desaconsellat fer-lo servir, i F igu r a 1. 8 . Instrucció SQL per crear un nou usuari des de l’entorn phpMyAdmin
cal crear-ne un de nou.
També es pot fer servir el MySQL Workbench. Es tracta d’una eina gràfica molt
utilitzada en l’administració de bases de dades. Podeu trobar-ne més informació
a la pàgina oficial de MySQL Workbench:
http://www.mysql.com/products/workbench/
5. Crear el directori per a les dades (moodledata). Moodle requereix un

directori on emmagatzemar tots els seus fitxers.
1 sudo mkdir /var/www/moodledata

2 sudo chmod 0777 /var/www/moodledata
6. Documentar la instal·lació. Anotar els paràmetres de configuració i

la informació més rellevant. Cal fer un apunt: en tot procés d’instal·lació
o manteniment informàtic o de caràcter general serà necessari documentar les
tasques fetes i els paràmetres establerts. Ara és un bon moment per començar
la documentació d’aquesta instal·lació. Creeu un nou document i indiqueu l’arbre
de directoris del servidor web (per exemple, http://localhost/moodle i la base de
dades MySQL a http://localhost/phpMyAdmin) i l’usuari i paraula clau d’accés a
la base de dades.
7. Iniciar el programa instal·lador que us anirà guiant i seguir les instruccions

acuradament, corregint els possibles errors que vagin sorgint. En primer lloc
cal escollir l’idioma de la instal·lació (figura 1.9). Moodle està traduït a molts
idiomes i té una gran comunitat d’usuaris a Catalunya; per tant teniu disponibles
tant el català com el castellà.
F ig ur a 1. 9. Selecció de l’idioma d’instal·lació
A continuació es fa una primera comprovació de la configuració PHP. Si hi

ha algun missatge d’error en aquest punt, cal que reviseu els paràmetres de
configuració del PHP o accediu a la pàgina oficial del PHP per obtenir-ne més
informació: http://www.php.net. Després de fer qualsevol
modificació en la
configuració dels serveis cal
En el pas següent (figura 1.10), l’instal·lador verificarà que existeix el directori reiniciar-los per tal que els
canvis tinguin efecte.
anomenat moodledata i que té els permisos d’escriptura i lectura adients. Aquest
directori conté les dades que es generen arran de l’ús del portal, documents
dels usuaris, imatges, etc. En cas d’errada el podeu crear vosaltres mateixos,
preferentment a la ubicació que us indica l’instal·lador.
F igu r a 1. 1 0 . Directoris de treball de Moodle i adreça web per accedir al portal
A continuació se’ns demana que confirmem el controlador de la base de dades

(figura 1.11):
F igu r a 1. 1 1 . Controlador de la base de dades
Tot i que en l’exemple esteu

fent servir una base de
dades MySQL cal que
tingueu en compte que es
poden fer servir altres
Després es mostra la configuració de la base de dades i l’usuari que hi té accés
gestors de bases de dades (figura 1.12), aquí cal indicar l’usuari creat amb anterioritat.
com per exemple Oracle,
SQLServer o PostgreSQL.
Figur a 1. 12. Paràmetres per a la connexió amb la base de dades
La instal·lació de Moodle també valida algunes extensions del PHP necessàries per
al funcionament correcte de l’aplicació. No són imprescindibles però és un bon
exercici activar o habilitar les extensions que solucionen algun problema (figura
1.13).
F ig ur a 1 .1 3 . Avisos d’extensions no presents en la configuració del PHP que són necessàries per a
alguna funcionalitat de Moodle
Durant la instal·lació també podreu afegir l’idioma seleccionat al començament

del procés (figura 1.9), tot i que des de l’aplicació en funcionament en qualsevol
moment es poden afegir nous paquets d’idioma.
El procés continua amb la creació de les taules a la base de dades, i finalment el

resultat de la instal·lació és la base de dades amb les taules inicialitzades i el fitxer
config.php, on es troba la configuració del sistema.
En qualsevol moment es pot tornar a iniciar la instal·lació de Moodle esborrant el

fitxer config.php i obrint la carpeta arrel de Moodle amb un navegador web.
8. El darrer pas és configurar el compte d’usuari administrador amb accés complet

al portal Moodle i indicar la configuració de la pàgina d’entrada que es mostra als
usuaris a l’inici (figura 1.14). Les dades que introduïu sempre es poden modificar;
cal que empleneu les dades obligatòries (indicades amb un asterisc vermell), però
sobretot no perdeu la contrasenya.
El procés d’instal·lació finalitza i si tot ha estat correcte podreu visualitzar la

pàgina d’inici del portal (figura 1.15).
F igu r a 1. 1 4 . Pàgina de configuració de l’usuari administrador de Moodle
Un exemple del contingut de l’arxiu config.php en finalitzar el procés d’instal·lació

de Moodle (documenteu, afegiu el fitxer de configuració a la documentació de la
instal·lació) és el següent:
1 <?php // Moodle configuration file

2
3 unset($CFG);
4 global $CFG;
5 $CFG = new stdClass();
6
7 $CFG−>dbtype = ’mysqli’;
8 $CFG−>dblibrary = ’native’;
9 $CFG−>dbhost = ’localhost’;
10 $CFG−>dbname = ’moodle’;
11 $CFG−>dbuser = ’moodleuser’;
12 $CFG−>dbpass = ’moodleuser’;
13 $CFG−>prefix = ’mdl_’;
14 $CFG−>dboptions = array (
15 ’dbpersist’ => 0,
16 ’dbport’ => 3306,
17 ’dbsocket’ => ’’,
18 );
19
20 $CFG−>wwwroot = ’http://localhost/moodle’;
21 $CFG−>dataroot = ’/var/www/moodledata’;
22 $CFG−>admin = ’admin’;
23
24 $CFG−>directorypermissions = 0777;
25
26 require_once(dirname(__FILE__) . ’/lib/setup.php’);
27
28 // There is no php closing tag in this file,
29 // it is intentional because it prevents trailing whitespace problems!
Es generen una gran quantitat de taules durant la instal·lació, però no cal que us
preocupeu gaire, ja que en general no cal fer cap acció directament sobre la base
de dades.
F ig ur a 1. 15. Pàgina d’inici del portal Moodle en finalitzar el procés d’instal·lació
Està connectat l’usuari administrador.

2. Configuració de portals web d’aprenentatge
Abans de posar en marxa un sistema informàtic, cal configurar-lo, i depenent de

la complexitat que tingui serà una tasca més o menys feixuga.
Tot i que la majoria dels portals web d’aprenentatge tenen característiques comu-
nes i, en particular, el Moodle té una interfície estàndard que el caracteritza, és
molt important conèixer a quin tipus d’organització va dirigit per tal de realitzar
la configuració ‘a mida’ de l’entorn (idioma, tipus d’activitats, recursos, etc.).
En un portal web, per exemple, s’ha de personalitzar l’aspecte. És important que

l’entorn tingui una estètica adient amb la resta d’aplicacions de l’organització
en què es vol integrar; per exemple, cal posar-hi el logotip o utilitzar els colors
apropiats.
D’altra banda, és un sistema multiusuari, en què hi ha usuaris amb necessitats

i interessos diferents i per tant també cal establir mecanismes de seguretat.
Afortunadament, algunes d’aquestes tasques es poden automatitzar i per tant
estalviar molt de temps i esforç.
A més, poden ser necessàries altres tasques més específiques. Concretament

els portals web d’aprenentatge requereixen la creació i configuració dels cursos.
Els cursos són la base dels portals web d’aprenentatge, reuneixen alumnes,
professors i recursos entorn d’una matèria per col·laborar i compartir en el procés
d’aprenentatge.
2.1 Personalització de l’entorn
L’aspecte d’una aplicació marcarà la primera impressió dels futurs usuaris; per
tant, cal cuidar-lo i personalitzar-lo, i és important que sigui agradable i que tingui
els elements necessaris que el relacionin amb l’organització que representa. Per
exemple, el logotip ha d’estar ben visible a la capçalera.
La majoria de portals web d’aprenentatge també permeten modificar l’idioma, i

fins i tot donen l’opció als usuaris per seleccionar-lo. Haureu d’analitzar a qui
està dirigit el vostre portal i en funció d’això carregar els idiomes corresponents.
Tampoc no té gaire sentit carregar tots els idiomes disponibles si només tindreu
usuaris catalans, per exemple: en aquest cas amb el català, castellà i anglès n’hi
hauria prou.
Tot i que la gestió d’usuaris és una acció típica d’administració del portal, es
presenta i s’explica en aquest apartat de configuració, ja que calen determinats
conceptes per entendre millor la configuració dels cursos.
2.1.1 La pàgina d’inici
La primera pàgina o pàgina d’inici és aquella que es mostrarà a l’usuari

abans o després d’entrar al portal.
Habitualment la pàgina d’inici conté el nom del portal a la capçalera, un calendari

i la llista de categories amb els cursos disponibles. També hi ha un enllaç que
permet entrar als usuaris que ja estan registrats o accedir com a visitant sense
necessitat de registrar-se.
Els visitants tenen privilegis limitats i només tenen accés a la informació que
l’administrador i els creadors dels cursos decideixen. En alguns casos, per
exemple, pot interessar restringir l’accés als cursos als usuaris registrats i evitar
que visitants i curiosos accedeixin a la informació del portal.
El contingut de la primera plana es pot modificar. Podeu afegir una breu descripció
del portal, mostrar notícies, mostrar les categories dels cursos limitant-ne la
El contingut de la primera
plana es configura a l’ítem quantitat que es visualitza.
Administració del
lloc/Primera
plana/Paràmetres de la Per posar la pàgina de registre com a pàgina d’inici, cal activar l’opció que obliga els usuaris
primera plana del bloc de a entrar (forcelogin). Es configura a l’ítem Administració del lloc/Seguretat/Normativa del
Configuració.
lloc del bloc de Configuració.
2.1.2 La pàgina de cada usuari
La pàgina de cada usuari o Home page en anglès és la pàgina que cada

usuari veu quan accedeix als seus cursos.
Habitualment conté el bloc central amb els cursos als quals està inscrit o bé la
jerarquia de categories; el bloc de Navegació amb l’accés als diferents cursos; i
el bloc d’Administració on pot editar el seu perfil i altres accions segons el rol de
l’usuari. Altres blocs poden aparèixer en funció de la configuració realitzada per
l’administrador.
L’administrador pot configurar aquesta pàgina per a tots els usuaris. Habitualment
apareixen els cursos als quals estan inscrits en el bloc central, el bloc de navegació,
el bloc de configuració i altres elements com ara avisos dels missatges al fòrum
no llegits o tasques pendents de lliurar.
Aquesta pàgina també pot ser configurable per cada usuari mitjançant el botó
Personalitza aquesta pàgina. En cas que ho necessiti, també pot tornar a la pàgina
per defecte imposada per l’administrador del portal.
2.1.3 Perfils
El perfil d’usuari és la informació emmagatzemada de tot usuari autenticat

al portal Moodle.
És una col·lecció de camps agrupats per categories, com ara dades generals,
L’administrador pot afegir
imatge, interessos i altres dades. Alguns camps són obligatoris i per tant l’usuari nous camps al perfil anant a
els ha d’introduir en el moment d’autenticar-se. L’administrador pot decidir Administració del
lloc/Usuaris/Comptes/Camps
l’obligatorietat o opcionalitat dels camps i a més indicar quins seran visibles per del perfil d’usuari. També
pot bloquejar determinades
la resta d’usuaris. dades del perfil per imposar
un valor i que l’usuari no
pugui modificar-lo. Cal anar
Tot usuari pot configurar el seu perfil anant a Configuració del meu perfil/Edita el a Administració del
lloc/Connectors/Autenticació/
perfil del bloc de Configuració (figura 2.1). Autenticació basada en el
correu electrònic.
F ig ur a 2. 1. Edició del perfil
És molt important que l’administrador revisi la Normativa del lloc per establir
l’obligatorietat a autenticar-se per visualitzar els cursos, els perfils dels usuaris i
les seves imatges, a més d’altres paràmetres relacionats amb la protecció de dades
com quins rols seran visibles. Cal anar a Administració del lloc/Seguretat/Norma-
tiva del lloc.
2.1.4 Blocs
Qualsevol pàgina del Moodle està organitzada per blocs. Un bloc no és més que
un conjunt d’informacions i enllaços a accions agrupades en un requadre.
Els blocs fonamentals del Moodle són el de Navegació, Configuració i el

bloc Principal on posarem el contingut del curs.
Moodle disposa d’altres blocs addicionals que ens permeten accedir a altres
informacions. L’administrador configura quins blocs veurà cada usuari i en quina
disposició apareixeran a les pàgines indicant també sota quin context.
L’administrador de curs o
Com a professors podem gestionar l’estructura de blocs dels cursos que adminis-
professor gestiona trem, tant per afegir o treure com fer una nova disposició. La capacitat que tenim
l’estructura de blocs activant
l’edició i anant al bloc com a professors depèn del tema utilitzat en el portal i de la configuració feta per
Afegeix un bloc.
l’administrador que pot fixar la presència de determinats blocs. Els estudiants en
canvi no poden afegir-ne ni esborrar-ne però poden amagar-los.
Els blocs ens proporcionen informació addicional al contingut del curs que poden
ser de gran utilitat en el procés d’aprenentatge. Més endavant s’explora més a fons
els continguts dels diferents blocs.
Moodle s’ha adequat a l’increment de l’ús de tauletes (tablets) i altres dispositius

mòbils i per tant les seves pàgines són responsive adaptant-se a les diferents mides
de les pantalles fent que els diferents blocs laterals surtin al final de la pàgina.
L’administrador gestiona els blocs instal·lats i els configura anant a Administració

del lloc/Connectors/Blocs/Gestió de blocs del bloc de Configuració (figura 2.2).
F igu r a 2. 2 . Configuració dels blocs

2.1.5 Temes
Dins el paquet estàndard del Moodle s’inclouen alguns temes per defecte.
Un tema defineix l’aparença de tot el portal, però cada curs o usuari també
pot tenir el seu tema propi.
Els temes estan disponibles
a l’ítem Administració del
lloc/Aparença/Temes del
És possible previsualitzar un tema abans d’activar-lo i veure quin aspecte tindrà el bloc de Configuració.
portal si finalment el seleccioneu.
Des del menú d’administrador es pot configurar l’aparença del portal i, per
exemple, escollir un tema que li doni un aspecte personalitzat.
A més de canviar l’aspecte del portal es poden establir els paràmetres del tema per
gestionar fins a quin punt els usuaris poden modificar i personalitzar l’aspecte del
portal, per exemple:
• Limitar la llista de temes que els usuaris podran escollir.
• Permetre que cada usuari seleccioni el seu tema propi, que s’aplicarà una
vegada entri al sistema.
• Permetre definir temes particulars per als cursos.
• Gestionar els blocs del lloc; per exemple, ocultar-ne o afegir-ne als cursos.
Cal adonar-se que si com a administradors permeteu la selecció de temes per usuari
i curs, el sistema ha de decidir en cada moment quin tema ha de mostrar. Els temes
s’apliquen segons el seu àmbit: de lloc, que tria l’administrador i s’aplica a tot el
portal; d’usuari, escollit per l’usuari; i de curs, que defineix l’administrador del
curs. Les prioritats de més a menys prioritari són curs, usuari i lloc. En cas de
conflicte s’aplica el tema de l’àmbit més prioritari.
L’administrador pot configurar l’aparença del portal atorgant als usuaris un

determinat grau de llibertat per personalitzar els seus cursos; des de més aspectes
a detallar fins a un portal homogeni amb la mateixa aparença per a tothom.
A part dels temes predefinits en el paquet estàndard del Moodle, n’hi ha molts
altres que desenvolupa la sempre activa comunitat Moodle. Aquests s’ofereixen
gratuïtament sota llicència http://ca.wikipedia.org/wiki/GPL.
Es poden baixar nous temes des del web https://moodle.org/plugins/browse.

php?list=category&id=3.
En general els temes estan comprimits en format ZIP. Per instal·lar un nou tema
cal descomprimir el fitxer i pujar el contingut al servidor web, a la carpeta theme
de Moodle, dins una nova carpeta amb el nom del tema.
1 cd /var/www/html/moodle/theme
2 sudo unzip /<directory>/<nom_del_fitxer>.zip
En la figura 2.3 es pot veure el portal després de seleccionar el nou tema.
F igu r a 2. 3 . Portal amb el tema ’contemporary’
Per crear temes propis, són necessaris coneixements d’algunes tecnologies com
ara els fulls d’estil en cascada (CSS) o els llenguatges de marques (XHTML), a
Per treballar amb fulls d’estil més d’estar familiaritzat amb el desenvolupament de pàgines web.
i disseny web hi ha una eina
molt útil per al navegador
Firefox anomenada Firebug.
Permet veure mentre es
navega el codi de les
pàgines, els atributs i els
estils que s’apliquen a cada
element; a més els estils es 2.1.6 Idioma
poden editar, modificar i
veure’n el resultat
directament al navegador
El portal web Moodle permet afegir nous idiomes i per tant configurar l’entorn
amb el que ens interessi. Aquesta tasca es realitza com a administrador. A més,
cada usuari pot escollir el seu idioma preferit editant el seu perfil.
Per gestionar els paquets d’idioma cal entrar com a administrador. Des
d’Administració del lloc/Idioma/Paquets d’idioma del bloc de Configuració,
teniu accés a la instal·lació, actualització i desinstal·lació de tots els idiomes
disponibles (figura 2.4).
Figur a 2. 4. Instal·lació d’un nou paquet d’idioma
També es pot instal·lar manualment. Des del menú de descàrregues del web
del Moodle (https://download.moodle.org/langpack/2.8/) us podeu baixar els di-
ferents idiomes (format ZIP). Observareu que està traduït a molts idiomes, la qual
cosa us pot donar una idea de la difusió que té.
Només cal que descomprimiu el contingut del fitxer al directori moodledata, dins
una carpeta anomenada lang, que caldrà crear en cas que no existeixi.
Per configurar l’idioma de l’entorn podeu accedir als paràmetres d’idioma dins del
d’Administració del lloc/Idioma/Paràmetres d’idioma del bloc de Configuració.
2.1.7 Altres aspectes: capçalera, peus de pàgina, logo...
Segons el tema que tenim activat podem gestionar la capçalera i el peu de les
pàgines anant al seu menú de configuració o bé a la seva pàgina de configuració.
Allà podeu afegir el logo de l’organització, cosa que és recomanable ja que es tracta
d’una informació imprescindible que identifica la institució o empresa (figura 2.5).
F ig ur a 2 . 5. Afegir un logotip
Una altra manera per afegir una capçalera i un peu de pàgina és modificant directa-
ment el codi HTML. L’administrador del portal pot afegir codi HTML addicional
a cada pàgina anant a Administració del lloc/Aparença/HTML Complementari del
bloc de Configuració.
2.2 Gestió d’usuaris. Autenticació
Els usuaris i els cursos són els pilars del portal. Són, en definitiva, els qui
treballaran amb el portal, tant si són professors com alumnes, visitants o bé
administradors. Es poden integrar uns usuaris existents a una organització, crear-
ne de nous manualment o bé obrir el sistema per tal que ells mateixos introdueixin
les seves dades.
L’entorn ofereix molta flexibilitat: es pot parametritzar un sistema rígid de

verificació d’usuaris i mantenir-ne un control estricte o bé deixar-lo més obert
i automatitzar els processos relaxant el nivell de control i la càrrega de feina dels
administradors.
També hi ha algunes funcionalitats que permeten la càrrega massiva de dades i

personalitzar els perfils d’usuari per ajustar-se als requisits de qualsevol entorn
educatiu o empresarial.
2.2.1 Autenticació
Una de les primeres tasques que heu de fer com a administradors és habilitar
el registre dels usuaris, tant professors com alumnes, al vostre portal. Haureu
de valorar quins són els mètodes d’autenticació que us permeten fer una gestió
més efectiva del vostre col·lectiu. És possible que per a diferents perfils d’usuaris
habiliteu mètodes d’autenticació diferents. No cal establir per tant un mètode únic
d’autenticació.
Es defineix l’autenticació com l’acte d’establir o confirmar que quelcom o algú és

autèntic i, per tant, el permetrà entrar en un lloc o sistema. Es tracta de comprovar
la veracitat, i en el cas d’un usuari verificar-ne la identitat per mitjà d’un certificat
digital o responent el correu.
En el Moodle l’autenticació consisteix a definir de quina manera es registren

els nous usuaris al sistema, quina informació aporten i si es verifica amb
algun servidor extern.
Moodle ofereix diferents sistemes d’autenticació que es poden configurar i adaptar

a una organització concreta. Bàsicament es poden diferenciar dues situacions
depenent de si els usuaris ja són en algun altre sistema i podem accedir a les seves
dades, o bé encara no existeixen i cal introduir-hi les dades. A la figura 2.6 es pot
veure el menú de configuració.
1. Els usuaris existeixen. En aquest cas primerament cal validar si la informació

d’aquests usuaris és accessible i el Moodle en proporciona algun sistema de
connexió.
Hi ha connectors que permeten validar els usuaris directament contra una base
de dades externa en format Access, Oracle o MySQL. També hi ha disponi-
bles connectors amb servidors externs de tipus LDAP (Active Directory, de la
família Windows Server), POP3 (servei de correu), RADIUS (servei específic
d’autenticació en xarxa), IMAP (Internet Message Access Protocol), FirstClass,
NNTP (Network News Transport Protocol) i altres. També es poden utilitzar els
comptes ja creats en el sistema operatiu que alberga el Moodle mitjançant el PAM
(Pluggable Authentication Modules).
Una altra opció és integrar el Moodle dins el Moodle en xarxa mitjançant

el Moodle Network Authentication. Això permet als usuaris d’altres portals
d’aprenentatge integrats a la Xarxa entrar al portal utilitzant les mateixes dades.
En qualsevol cas, caldrà parlar amb l’administrador de sistemes de l’organització

per coordinar la comunicació entre el portal i els sistemes d’autenticació existents.
2. Els usuaris no existeixen encara. És la situació més senzilla i habitual. Hi ha

tres opcions disponibles:
• Entrada manual d’usuaris per part de l’administrador: sempre està

disponible. Això aporta més control sobre qui té accés al sistema però
implica un volum important de feina per part dels administradors.
• L’autenticació basada en el correu electrònic: els usuaris introdueixen

les seves dades i el sistema els envia un missatge de correu perquè les
confirmin; evidentment és un sistema més àgil però ofereix menys control,
ja que qualsevol persona pot registrar-se mentre indiqui una adreça de correu
correcta.
• Sense autenticació: els usuaris poden crear comptes directament vàlids

sense cap mena de validació; evidentment aquesta opció està totalment
desaconsellada.
F igu r a 2. 6 . Menú configuració de mètodes autenticació
Un paràmetre interessant que cal tenir en compte per evitar la intrusió de robots o
programes automàtics de registre és activar el CAPTCHA. Es tracta d’un element
visual que s’afegeix al registre, i mostra unes lletres normalment distorsionades,
que l’usuari pot identificar però els sistemes de reconeixement de text automàtic
no. En la figura 2.7 es pot veure un exemple de CAPTCHA.
F igu r a 2. 7 . Exemple de CAPTCHA
La configuració de
l’autenticació es fa des
d’Administració del
lloc/Connectors/Autenticació/
Gestió de l’Autenticació del
Pot habilitar-se més d’un connector per a l’autenticació. En aquest cas, el primer
bloc de Configuració. connector que resolgui positivament el login i contrasenya introduïts per l’usuari
en validarà l’entrada al portal.
Altres paràmetres que es poden configurar són:
• Habilitar l’autoregistre dels usuaris a través del correu electrònic.
• Habilitar l’accés com a visitant.
• Admetre o denegar dominis de correus. Pot interessar per exemple denegar

adreces de Hotmail, Yahoo o altres dominis.
• Activar el CAPTCHA.
• Habilitar unes instruccions personalitzades en lloc de les proporcionades

per defecte.
2.3 Gestió de seguretat. Rols
En qualsevol sistema informàtic multiusuari cal establir unes normes de seguretat

que garanteixin que cada usuari només pot fer allò que se li permet. A més, és
necessari que hi hagi diferents tipus d’usuaris, uns amb més privilegis que altres
segons les seves funcions i responsabilitats.
Això esdevé normatiu i, per tant, obligatori, si el sistema tracta amb dades
personals i privades dels usuaris. És molt important conèixer la llei de protecció
de dades del teu país. En el cas de l’estat espanyol la norma jurídica s’anomena
Ley Orgánica de Protección de Datos (LOPD).
2.3.1 Seguretat del lloc
La seguretat del lloc permet definir alguns paràmetres per protegir el portal de
l’exterior; els valors per defecte ofereixen prou seguretat. Alguns dels apartats
són:
• Blocatge d’IP: per denegar i permetre l’accés a determinades adreces IP o

grups d’adreces.
• Normativa del lloc: permet modificar alguns paràmetres com ara obligar a
entrar els usuaris per visualitzar els cursos i els perfils, les dades dels usuaris
que poden ser visibles, la mida màxima dels fitxers que es poden pujar, la
quota d’usuari, si es permet que Google entri com a visitant, i molts altres
paràmetres referents a la seguretat del lloc.
• Seguretat HTTP: permet activar o desactivar paràmetres referents a la

navegació (HTTPS, galetes, etc.).
A la configuració de la
seguretat s’accedeix des
Respecte a la seguretat Moodle proporciona les següents recomanacions: d’Administració del
lloc/Seguretat del bloc de
Configuració.
• Obligar l’entrada dels usuaris per veure els cursos i els perfils.
• Utilitzar claus d’inscripció per visualitzar el contingut i participar en els

cursos.
• Ocultar informació dels perfils dels usuaris.
• Activar política de contrasenyes segures: quins caràcters, longitud, etc.
• Desactivar l’entrada dels visitants.
• Posar contrasenya a l’usuari administrador (root) de la base de dades.
A més, també es pot fer funcionar el Moodle sota el protocol HTTPS, més segur,
encara que cal preparar el servidor web per treballar amb aquest protocol. Cal
tenir en compte, però, que tot i que proporciona més seguretat també alenteix el
HTTPS
servei i, per tant, cal que n’estigui justificat l’ús.
HTTPS és un protocol dels
anomenats segurs; en aquest cas
significa que treballa amb dades
encriptades, o sigui, que tota la
informació que viatja per la
xarxa utilitzant aquest protocol
està codificada i només l’origen 2.3.2 Rols
(el client, com per exemple un
navegador web) i la destinació
(el servidor, com per exemple
l’Apache) tenen accés al
contingut sense encriptar.
Per rol s’entén un conjunt de permisos i prohibicions agrupats sota un nom.
Els rols s’assignen als usuaris, i un usuari pot tenir més d’un rol, depenent
del context que determinarà què podrà fer en el context corresponent
Per exemple, un usuari pot ser alumne d’un curs mentre que alhora pot ser
professor d’un altre curs. Amb els rols predefinits és suficient per gestionar la
La gestió dels rols està majoria de situacions. Aquests es mostren a la taula 2.1 i a la figura 2.8.
disponible a
Administració/Administració
del lloc/Usuaris/Permisos Taul a 2. 1. Rols predefinits del Moodle
del bloc de Configuració.
Rol Definició
Administrador Els usuaris que disposen d’aquest rol poden fer-ho

tot al lloc i en qualsevol curs. És aconsellable
economitzar aquest rol entre un o pocs usuaris.
Gestor És un rol semblant a l’administrador però que permet

modificar les seves capacitats. Per tant és adient per
a usuaris que hagin d’administrar algunes parts del
portal.
Creador de cursos Amb aquest rol es poden crear nous cursos. En un

entorn on aquesta tasca no representi un volum gaire
gran de feina la pot assumir l’administrador o algun
gestor, i llavors no cal fer servir aquest rol.
Professor El professor és l’administrador del curs, pot fer tot el

que estigui permès a dins, com ara afegir activitats i
posar notes als alumnes, per exemple. Normalment
cada curs tindrà com a mínim un usuari amb el rol de
professor, que n’és el responsable. El responsable
de crear el curs, l’administrador o el creador del curs,
indiquen quins usuaris tenen aquest rol.
Professor no editor Aquest professor pot ensenyar en un curs i posar les

notes als estudiants però no té permís per gestionar
el material disponible. No pot canviar les activitats.
Estudiant El rol d’estudiant dóna privilegis de lectura en els

cursos i el lloc, i uns pocs d’escriptura per a aquelles
funcionalitats que requereixen interacció, crear una
entrada en una bitàcola, un comentari en un fòrum,
trametre un fitxer d’una tasca publicada pel professor
o enviar un missatge de correu. Els professors poden
indicar quins usuaris són estudiants del curs, però
aquest rol també es pot assignar automàticament als
usuaris que entren nous a un curs.
Visitant Aquest rol té estrictament privilegis només de lectura.

La idea és mostrar-li allò que hi ha disponible però
sense permetre que aporti res.
Usuari autenticat Qualsevol usuari del sistema que entra al portal

pertany a aquest rol com a mínim. Pot gestionar el
seu perfil, enviar missatges i veure les bitàcoles dels
altres usuaris.
Usuari autenticat a la primera plana Qualsevol usuari del sistema que entra al curs de la
primera plana.
Figur a 2. 8. Els rols
Si s’observen les descripcions dels rols predefinits de la taula 2.1, es veu una altra
de les característiques del sistema de rols comú també a altres àmbits informàtics
en què hi ha el concepte de rol, com les bases de dades o els sistemes operatius.
Un mateix usuari en un mateix context pot tenir dos rols o més; per exemple, un
alumne que entra al portal serà estudiant i alhora usuari autenticat. En aquest cas
hi pot haver permisos contradictoris entre els diferents rols, que el sistema ha de
solucionar.
Primerament s’estableix una jerarquia de contextos dins el portal, que cal conèixer
per entendre com s’apliquen els permisos dels rols i es resolen les contradiccions.
En ordre descendent els contextos són:
Sistema / Usuari / Categoria / Curs / Mòdul d’activitat / Bloc
El sistema defineix totes les funcionalitats (capacitats) disponibles per als usuaris;
per exemple, crear cursos o veure els perfils dels altres usuaris. Cada rol ha de
definir els permisos per a totes aquestes funcionalitats.
Hi ha quatre tipus de permisos disponibles:
• No definit. Equivalent a denegat mentre no sigui explícitament permès per

algun altre rol de l’usuari en un context superior.
• Concedit. Permet la funcionalitat en el context en què s’aplica. També en

els contextos inferiors, tret que es denegui explícitament.
• Denegat. No permet la funcionalitat fins i tot per als usuaris del rol que
tenen permís en un context superior.
• Prohibit. Denega els permisos per a una determinada funcionalitat comple-

tament en qualsevol context.
La funcionalitat o capacitat indica què vol fer l’usuari, el contextdefineix

on ho vol fer i el permís si ho pot fer. Els rols dels usuaris, que es defineixen
en un context, determinen els permisos per a totes les funcionalitats.
Qualsevol usuari té com a mínim un rol en qualsevol context. En cas
de conflicte els permisos més restrictius sempre prevalen sobre els menys
restrictius.
A la figura 2.9 s’observa la definició del rol de professor amb els tipus de context
on s’aplica i algunes de les capacitats amb el permís assignat i els riscos que
comporta.
F igu r a 2. 9 . Definició del rol professor
2.4 Creació i configuració de cursos
Els cursos, juntament amb els usuaris, són els pilars del portal. Un curs es pot
assimilar a una aula virtual. Els cursos s’organitzen en categories, per temàtica o
nivell similar, i es poden crear subcategories per estructurar el portal i facilitar la
cerca de cursos.
Tant els usuaris

En el portal inicialment es crea la categoria “miscel·lània” i, de fet, encara
administradors com els que que l’esborreu es tornarà a crear automàticament si no hi ha almenys una altra
tenen el rol de creadors de
cursos poden crear cursos categoria.
però només els
administradors poden
gestionar les categories. Dins un curs els alumnes i els professors disposen d’un espai comú amb recursos
L’administració de cursos i didàctics, activitats i eines que els permeten comunicar-se. En general cada curs
categories està disponible a
l’ítem Cursos/Afegeix/edita fa referència a un tema.
cursos i Cursos/Afegeix una
categoria del menú
Administració del lloc del Com a exemple d’estructura de categories i cursos podríem pensar en un Institut
bloc Configuració.
d’FP. Podríem tenir una categoria per a cada família professional i dins de
cadascuna, una subcategoria amb cada cicle formatiu. Els cursos serien els mòduls
i aquests s’assignarien a la seva subcategoria.
2.4.1 Estructura i paràmetres dels cursos
L’administrador pot definir una estructura general del curs, indicant uns parà-
metres per defecte i definint els blocs laterals que es visualitzaran. Després els
responsables del curs, els professors, poden modificar aquesta configuració per
adaptar el curs a les seves necessitats.
Una vegada l’administrador ha finalitzat les tasques globals, ha establert l’estructu-

ra de categories i la configuració general dels cursos, cada professor o responsable
del curs pot configurar els diferents paràmetres individuals de cada curs, a través
de l’ítem Edita paràmetres del menú Administració del lloc del bloc Configuració.
Aquests es divideixen en els grups següents:
• Paràmetres generals: inclou la categoria a la qual pertany, el nom en

format llarg i curt (obligatoris) i la data d’inici, entre d’altres.
• Descripció: inclou una breu descripció i s’hi pot adjuntar un fitxer que
contingui un resum del curs.
• Format del curs: permet indicar el format del curs (setmanal, per temes,
social i activitat única), el nombre de temes o setmanes, què fer amb els
temes ocults i la disposició del curs.
• Aparença: permet entre altres paràmetres indicar l’idioma o bé no imposar-

lo i que l’alumne l’escolli entre els instal·lats a la plataforma.
• Àrea de fitxers: permet indicar la mida màxima dels fitxers.
• Accés de visitant: permet indicar si es permetrà l’accés dels visitants i la

contrasenya.
• Grups: permet agrupar els participants del curs en grups; aquests poden
coexistir o estar totalment separats, de manera que els membres d’un grup
no veuen els altres ni la seva activitat, com per exemple les aportacions a
fòrums. En qualsevol dels casos els grups comparteixen recursos i activitats.
• Canvi de nom del rol: per indicar un nou nom per a cada rol.
El format dels cursos fa referència a la manera com s’organitza el bloc central del
curs:
• El format setmanal i de temes divideixen el curs en seccions que representen

respectivament setmanes o temes.
• El format social s’organitza entorn d’un fòrum principal en què els partici-
pants poden debatre.
• El format d’activitat únic on el curs només té una secció i permet al professor

crear una única activitat del tipus que s’hagi indicat a la configuració.
Es pot accedir a aquests paràmetres i modificar-los en qualsevol moment des del

Per a la majoria de
paràmetres del Moodle
bloc d’administració. Generalment la informació del curs la definirà el professor,
teniu accessible una breu que és qui en coneix millor les característiques.
ajuda que us pot servir per
entendre el significat de
cada paràmetre en concret.
Aquesta ajuda s’obre
Els cursos s’estructuren en una capçalera, els blocs laterals que donen accés a
seleccionant l’interrogant diverses funcionalitats dels usuaris i el bloc principal al centre amb els continguts
que hi ha al costat del
paràmetre. del curs, en aquest cas estructurat en format de 3 temes, tal com veureu a la figura
2.10.
Un dels blocs laterals importants és el bloc de navegació que permet accedir

habitualment al perfil d’usuari, als cursos als quals està inscrit, a la pàgina inicial i
navegar pel curs actual. El contingut d’aquest bloc dependrà del rol de l’usuari, on
estigui en el portal, si està en un curs o a la pàgina inicial, i com l’hagi configurat
l’administrador del lloc.
L’altre bloc lateral és el bloc de configuració que habitualment conté l’adminis-

tració del lloc, si l’usuari és administrador, i l’administració del curs si estem en el
curs i tenim un rol que ens permeti administrar el curs. A més, ens permet editar
el nostre perfil i altres accions que hagi configurat l’administrador del lloc.
Altres blocs laterals que podem visualitzar en els cursos són:
• Cerca als fòrums
• Últimes notícies
• Esdeveniments propers
• Activitat recent
• Calendari
• Categories de cursos
• Missatges
• Usuaris en línia
Figur a 2. 10. Pàgina inicial del curs
Els administradors d’un curs disposen de l’opció d’activar l’edició. Aquesta

funcionalitat permet desplaçar blocs, ocultar-los o esborrar-los i afegir nous
recursos i activitats.
A la figura 2.11 es pot observar com es veu la pàgina inicial d’un curs amb el mode
d’edició actiu.
Figur a 2 . 11 . Pàgina inicial del curs amb el mode d’edició activat
2.4.2 Inscripcions als cursos
Una vegada el curs s’ha creat, cal afegir-hi els alumnes. Hi ha tres modes
d’inscripció en els cursos: el professor selecciona els alumnes, els alumnes
s’inscriuen al curs ells mateixos o es fa una inscripció massiva a partir d’algun
sistema de dades extern.
La inscripció manual a un curs permet al professor seleccionar els participants del

curs entre els usuaris del portal i els assigna el rol corresponent; per exemple, els
alumnes tindran el rol d’estudiant.
El professor pot donar d’alta els participants als cursos que administra des
de l’ítem Usuaris/Usuaris inscrits del menú Administració del curs del bloc
Configuració (figura 2.12).
La inscripció automàtica permet als usuaris del portal seleccionar el curs i

inscriure-s’hi, mitjançant una clau d’inscripció si s’escau. Cal assegurar-nos que
es mostra a la pàgina d’inici la llista de cursos als usuaris del portal per tal que els
puguin seleccionar.
Aquesta inscripció permet crear una instància per a cada rol que vulguem gestionar.
Per exemple, ens pot interessa crear una instància d’autoinscripció amb el rol
d’estudiant i una altra amb el rol de professors no-editors. A més, si el curs té
configurat els grups, permet la inscripció automàtica dels estudiants a grups posant
diferents claus d’inscripció.
La inscripció massiva a cursos es pot realitzar mitjançant la sincronització de

cohorts per a la qual cal que l’administrador hagi instal·lat el pluging corresponent.
Un cohort es pot definir com un conjunt d’usuaris provinent d’un sistema extern.
A més, també es permet la inscripció massiva d’estudiants d’altres cursos de la
mateixa plataforma Moodle.
Una funcionalitat interessant que també es pot gestionar des de les inscripcions
és el pagament dels cursos; aquests es fan per mitjà d’entitats externes que
garanteixen la seguretat de les transaccions. Moodle permet el pagament via
PayPal. Cal que el pluging corresponent estigui instal·lat i que l’administrador
configuri el curs per tal que permeti aquest tipus d’inscripció. El professor pot
decidir-ne el preu.
A part de les inscripcions vistes, el professor pot habilitar l’accés al curs als
visitants sense clau.
F igu r a 2. 1 2 . Menú mètodes d’inscripció
2.4.3 El contingut
El contingut d’un curs és responsabilitat del professor, en cap cas de l’administra-

dor del portal. De tota manera cal conèixer com es fa i quines funcionalitats hi ha
disponibles per poder aconsellar els usuaris i resoldre les incidències que puguin
aparèixer.
El Moodle permet afegir recursos i activitats. La diferència bàsica és

que els recursos inclouen tot allò que es mostra estàticament als alumnes
relacionats pròpiament amb els continguts del curs, mentre que les activitats
necessiten la participació activa de l’estudiant. Tot el contingut del curs cal
posar-lo al bloc central.
Amb els següents recursos que ofereix el paquet estàndard, el professor presenta
els seus continguts:
• Fitxer: pot ser de qualsevol format incloent no només text sinó també
imatges, multimèdia i fulls de càlcul.
• Pàgina: ens ajuda a presentar els continguts en format pàgina web que el
professor crea utilitzant un editor HTML que ofereix la pròpia plataforma.
• Llibre: es tracta d’un llibre multimèdia que pot incloure àudio i vídeo.
Permet, per tant, presentar els continguts d’una manera més atractiva
respecte als fitxers tradicionals.
• Paquet de contingut IMS: és un format de fitxer que facilita la reutilització

de continguts, és a dir, permet al nostre Moodle incloure continguts d’altres
sistemes sense necessitat de convertir-los a altres formats.
• URL: afegim l’accés a altres pàgines web (recursos d’Internet).
Moodle també disposa d’altres recursos que ens ajuden a organitzar els continguts
del curs. Els que ofereix el paquet estàndard són:
• Etiqueta: permet inserir títols i així podem incloure subapartats.
• Carpetes: en cas que el nombre de fitxers creixi molt, els podem organitzar
en carpetes i per tant a través d’aquest recurs accedir a un grup de fitxers.
En la figura 2.13 podeu observar una part del contingut d’un curs amb els diferents
recursos.
F ig ur a 2. 13. Exemples de recursos
Respecte a les activitats, Moodlen’ ofereix algunes que permeten al professor

formular preguntes i que els estudiants responguin i d’altres on l’estudiant lliura
la seva tasca que pot ser un fitxer o conjunt de fitxers, una resposta en línia o bé
un enllaç.
Amb les Consultes, Enquestes, Lliçons i Qüestionaris el professor formula

preguntes de diferents tipologies i així avalua als estudiants. També poden servir
com a retroacció per al professor respecte a com estan avançant els alumnes en
el seu aprenentatge. En el cas de les Lliçons, el sistema permet fer una adaptació
de l’aprenentatge de l’alumne itinerant la seqüència de continguts i preguntes en
funció de les respostes.
El Taller i la Tasca permeten al professor donar instruccions a l’alumne, recollir

els treballs lliurats, avaluar-los i donar la retroacció. El Taller permet l’avaluació
entre companys a partir de la rúbrica i la revisió de la nota per part del professor.
L’Eina Externa enllaça a recursos d’aprenentatge d’altres llocs webs i el Paquet

SCORM permet carregar continguts d’aquest format i convertir-lo automàtica-
ment a continguts del curs.
Per crear continguts col·laborativament entre els companys i amb la intervenció del
professor, Moodle ofereix diverses eines com ara Base de Dades (recull de dades
de diversos tipus com ara revistes, adreces web, textos, imatges, etc.), Glossari
(recull de termes) i Wiki. Són activitats que poden servir com a continguts del
curs. La Wiki pot ser útil perquè els estudiants creïn els seus propis apunts.
En la figura 2.14 podeu observar una part del contingut d’un curs amb una proposta
de diferents activitats a realitzar pels estudiants.
Figur a 2. 14. Exemples d’activitats
Tot curs, quan es crea, només disposa en el bloc central d’un únic element, el
Fòrum d’avisos i notícies. Es tracta d’una eina de comunicació unidireccional
on només els professors poden escriure i els estudiants llegeixen.
A més, podem afegir altres elements de comunicació com el Fòrum on tant els
professors com els estudiants poden escriure i el Xat on s’estableix una comuni-
cació directa. Ambdós elements de comunicació serveixen per resoldre dubtes
entre els companys i apropar-los en el seu procés d’aprenentatge. És important
que el professor estimuli l’ús d’aquestes eines per compensar la llunyania física
dels estudiants.
En la figura 2.15 podeu observar diferents eines de comunicació.

F igu r a 2. 1 5 . Elements de comunicació
L’organització dels estudiants en grups permet que aquests realitzin tasques com
a grup. Algunes de les activitats i eines de comunicació que hem vist faciliten
el treball grupal, indicant-ho a la seva configuració. Per exemple, es pot crear un
fòrum on les converses només siguin visibles pels membres d’un mateix grup o
Per afegir qualsevol recurs, bé l’activitat Tasca que permet el lliurament per grup.
activitat o element de
comunicació, cal activar
l’edició del curs, clicar a
Afegir una activitat o recurs,
Tot recurs o activitat del curs es pot editar de nou per modificar algun paràmetre,
seleccionar l’element del recol·locar-lo en el bloc central tant movent-lo horitzontalment com verticalment,
menú i llavors configurar els
diferents paràmetres alguns assignar-li rols i si s’escau ocultar-lo a l’estudiant (figura 2.16).
d’ells opcionals i altres
obligatoris.
F igu r a 2. 1 6 . Icones amb l’edició activada
Tant els recursos com les activitats i els elements de comunicació disposen d’uns
paràmetres propis. L’estudi d’aquestes configuracions es realitzarà a través de les
activitats proposades.
3. Administració de portals web d’aprenentatge
En l’ús diari de l’entorn virtual d’aprenentatge sorgeixen unes necessitats que cal
que siguin resoltes mitjançant diverses tasques a realitzar per l’administrador. És
imprescindible portar a terme tot un seguit de tasques que mantindran el lloc web
operatiu i actualitzat.
En certs moments serà necessari afegir una nova funcionalitat, que els usuaris
demanin o que l’administrador consideri interessant, a vegades caldrà generar un
informe per veure quins són els usuaris més actius d’un curs, quines funcionalitats
usen més o quins són els darrers accessos registrats.
També de manera periòdica s’hauran de fer còpies de seguretat, i és possible que

en algun moment s’hagin de fer servir per recuperar la informació si s’espatlla el
disc dur o succeeix algun altre imprevist.
Els diferents elements que l’administrador pot gestionar respecte al portal Moodle
es veuen a la figura 3.1.
F igu r a 3 . 1 . Administració del lloc

3.1 Addició i actualització de funcionalitats de portals web

d’aprenentatge
El Moodle és un programari lliure i de codi obert amb una àmplia comunitat

d’usuaris i desenvolupadors que en milloren constantment les prestacions. Cada
dia apareixen noves funcionalitats i versions millorades de les existents. Aquestes
estan empaquetades en el que s’anomena mòduls o connectors. També s’utilitza
el terme anglès plugins. Aquests nous connectors donen resposta a les necessitats
que van sorgint a l’entorn educatiu.
Hi ha diferents tipus de mòduls; els principals són els mòduls d’activitat

i els blocs. Els mòduls d’activitat contenen funcionalitats que amplien la
llista d’activitats disponibles en els cursos. Els blocs són els requadres que
hi ha als laterals del portal i inclouen funcionalitats genèriques i d’utilitat.
Altres tipus són els d’autenticació, filtres i format del cursos.
Alguns dels connectors més interessants que es poden trobar al repositori de

Moodle són:
• HotPot: mòdul d’activitat que permet al docent integrar en un curs els

qüestionaris creats amb Hot Potatoes. L’estudiant el realitza i crea un
informe amb la puntuació obtinguda.
• jClic: mòdul d’activitat que permet integrar fàcilment paquets jClic en un

curs. Facilita registrar per a cada usuari la puntuació, data i durada de
l’intent.
• MindMap: recurs que permet guardar mapes conceptuals senzills.
• MediaPlayer: reproductor que permet mostrar vídeos en diferents formats,

llistes de reproducció, àudio i imatges.
• Adaptative Quiz: permet crear tests on les preguntes s’extreuen d’un banc
de preguntes etiquetades amb un grau de dificultat. Es crea un itinerari de
preguntes organitzades per dificultat segons l’estudiant hagi encertat o fallat
cada pregunta. La seqüència de preguntes s’adapta millor a la capacitat de
l’estudiant.
• Checklist: mòdul d’activitat que permet crear una llista de tasques per al
seguiment dels estudiants.
• Online Audio Recording: permet als participants gravar clips d’àudio.
• Certificat: mòdul que permet generar certificats de superació d’un curs a

partir de les condicions establertes pel professor del curs.
• Buscador de Wikipedia: mòdul de bloc que permet cercar directament a

la Wikipedia.
• Live-School: mòdul de bloc que permet accedir a serveis en línia que pro-
porciona Live-School: chats d’àudio, compartició de documents, calendari
interactiu, pissarra compartida i altres.
• Gmail: mòdul de bloc que permet consultar el correu personal de Google.
• Exabis ePortfolio: mòdul de bloc que permet la creació de portfolis per a

tots els participants del lloc.
• Progress Bar: mòdul de bloc que permet mostrar a l’estudiant de manera

gràfica el seu progrés en el curs utilitzant codis de colors.
• Google Authentication: mòdul d’autenticació que permet al Moodle

utilitzar adreces de correu assignades a una comunitat educativa de Google.
• Wiris: mòdul de filtre que permet utilitzar aquest editor per crear expressi-
ons matemàtiques com ara fórmules i equacions.
• Scratch: mòdul de filtre que permet inserir animacions dissenyades en

Scratch.
• Wikipedia Calls: mòdul de filtre que permet crear directament enllaços a

articles de la Wikipedia.
• Grid Format: mòdul de format de curs que permet presentar els cursos
ocultant els noms dels temes i creant una graella amb les icones per accedir
als diferents temes.
3.1.1 Activar i desactivar funcionalitats de portals web
El paquet estàndard del Moodle conté un seguit de funcionalitats bastant ampli,

que es poden activar i desactivar en qualsevol moment.
L’administrador pot gestionar els mòduls des de l’ítem Administració del lloc/Con-
nectors, del bloc de Configuració (figura 3.2).
Fig ura 3 .2 . Llista de connectors
Dins de la gestió dels diferents connectors es mostra una llista on es pot veure el
nombre de cursos que fan servir el connector, la versió i si està actiu o no. A més,
es disposa d’accions per suprimir els connectors i que no apareguin a la llista, i
per configurar-ne els paràmetres individuals.
Cal anar amb compte a l’hora de desactivar (ocultar) un connector, i revisar

abans en quins cursos s’està fent servir; una vegada desactivat es deixarà de
mostrar a tot arreu. En la figura 3.3 mostrem el menú per a la gestió dels
mòduls d’activitat (Administració del lloc/Connectors/Mòduls d’activitat/Gestió
d’activitats, del bloc de Configuració).
Figur a 3. 3. Visualització dels mòduls d’activitat
3.1.2 Afegir funcionalitats noves al portal web
Des del web del Moodle es poden veure i baixar les noves versions dels mòduls
disponibles; tots són gratuïts i en molts casos els desenvolupen terceres persones
alienes a l’equip de desenvolupament del portal però que decideixen compartir
el seus mòduls i utilitats amb la comunitat. Per a això, accediu a descàrregues i
seleccioneu ”https://moodle.org/plugins/” (figura 3.4).
Figur a 3 . 4. Pàgina de descàrrega dels connectors
A més, el web de mòduls i

connectors disposa d’un
canal RSS i de compte a
Twitter que us permet
mantenir-vos al dia de les
últimes novetats.
Per afegir un nou connector, cal comprovar que és compatible amb la versió
del Moodle que teniu instal·lada, i després llegir atentament la documentació
d’instal·lació.
Per conèixer la versió instal·lada del portal, cal anar a Administració del lloc/Ser-
vidor/Entorn del bloc de Configuració (figura 3.5).
F igu r a 3. 5 . Consulta de la versió del Moodle
Per afegir un nou connector cal:
• Anar al web https://moodle.org/plugins/, buscar el connector per les dife-

rents categories i descarregar el fitxer al nostre ordinador. Verifiqueu que
correspongui a la nostra versió de Moodle.
• Anar a Administració del lloc/Connectors/Instal·la complements! del bloc

de Configuració.
• En el menú cal indicar el tipus de connector i adjuntar l’arxiu que heu

descarregat. Verifiqueu que teniu permisos d’escriptura en el directori que
us indica (figura 3.6).
• A continuació us mostrarà que el connector s’ha validat o bé que hi ha hagut

algun problema. En cas d’haver estat validat procediu a la instal·lació (figura
3.7).
F igu r a 3. 6 . Instal·lació d’un connector

Figur a 3. 7. Validació d’un connector
Alguns problemes poden

ser que no es disposa de
privilegis d’escriptura en el
Com veureu a la pàgina de descàrregues, hi ha molts tipus de connectors a directori o bé no
correspongui a la versió del
instal·lar, com per exemple, noves activitats, gestió d’usuaris per a l’administrador, nostre Moodle o també que
no s’hagi escollit el tipus de
diferent informes, nous blocs, formats de cursos, temes, missatgeria, editors i connector apropiat.
altres eines d’administració. S’aconsella que sempre que

s’actualitzi o s’afegeixi un
nou mòdul també
També es poden instal·lar els connectors descomprimint els fitxers directament al s’actualitzin els paquets
d’idioma per garantir que es
directori adient del servidor. Cal detectar el directori correcte segons el tipus de disposa de les traduccions
connector. Alguns d’ells són: correctes.
• /directorymoodle/theme/ - temes
• /directorymoodle/mod/ - activitats i recursos
• /directorymoodle/blocks/ - blocs
• /directorymoodle/question/type/ - tipus de qüestions
• /directorymoodle/course/format/ - formats dels cursos
• /directorymoodle/admin/report/ - informes d’administració
3.1.3 Actualitzar funcionalitats existents en el portal web
A part de l’aparició de nous mòduls, els existents també s’actualitzen i n’apareixen

noves versions més completes, o simplement amb les errades corregides. No cal
actualitzar cap mòdul si funciona bé i compleix les necessitats dels usuaris; tampoc
no s’ha d’actualitzar si la nova versió no en soluciona les mancances.
Abans d’actualitzar una funcionalitat existent, primerament cal detectar si hi

ha una versió més nova del mòdul que proporcioni quelcom que es trobi a
faltar en la versió instal·lada, i després comprovar que és compatible amb la
versió del Moodle que teniu instal·lada.
El procés per actualitzar els connectors és:
• Anar a Administració del lloc/Connectors/Visualització dels connectors del

• Prémer a Comprova les actualitzacions disponibles.
• En cas de que hi hagi actualitzacions i ens interessin, cal instal·lar el

connector com si fos nou.
3.1.4 Actualitzar el portal web
Actualitzar tot el portal per poder gaudir de les prestacions de les noves versions
de Moodle és una tasca que en algun moment caldrà fer, i és indispensable si es
vol mantenir un portal actualitzat i dinàmic. Tot i això, aquesta actuació no està
exempta de risc; es pot dir que és crítica, i no s’ha de fer sense prendre precaucions.
Abans de començar l’actualització del portal cal preparar-nos per a la

pitjor situació i fer còpies de seguretat de tot el sistema, els fitxers de
dades, la configuració i la base de dades, de manera que si alguna cosa no
funciona correctament es pugui restaurar el sistema anterior sense pèrdua
d’informació.
A continuació es detallen els passos que cal seguir per actualitzar el portal:
• Comprovar els requeriments de programari anant a Administració del

lloc/Servidor/Entorn del bloc de Configuració. Per exemple per passar a
la versió 2.8 cal partir de la versió 2.2. També cal que comproveu la versió
de PHP i altres programes base.
• Realitzar un back-up del vostre portal: els directoris moodle i moodledata i

la base de dades. Per aquesta última cal anar a l’entorn d’administració de
la base de dades.
• Es recomana tenir activat el paràmetre updateautocheck per permetre al

vostre lloc comprovar automàticament si hi ha actualitzacions disponibles
per al vostre Moodle i per a tots els connectors addicionals. Si hi ha una
nova actualització disponible, s’enviarà una notificació als administradors
del lloc. Cal anar a Administració del lloc/Servidor/Notificacions d’actua-
lització del bloc de Configuració (figura 3.8).
• Cal posar el portal web a mode de manteniment (Administració del lloc/Ser-

vidor/Mode manteniment del bloc de Configuració).
• Baixar la nova versió del Moodle del https://download.moodle.org/.
• Cal moure el directori moodle a una altra ubicació, per exemple mood-
le.backup. Observeu que no s’esborra el contingut, només es canvia de lloc
per poder recuperar-lo si hi ha algun problema.
• Descomprimir la nova versió al directori moodle.
• Copiar la configuració personal de la versió antiga a la nova; això normal-

ment inclou el fitxer config.php i els temes personalitzats.
• Accedir al Moodle i anar a l’ítem Administració del lloc/Servidor/Notifica-

cions d’actualització del bloc de Configuració. Moodle detectarà la nova
versió i farà l’actualització de manera automàtica.
Per als punts 7, 8 i 9 i en sistema operatiu Linux cal fer:
1 mv moodle moodle.backup
2 tar xvzf moodle−2.8.tgz
3 cp moodle.backup/config.php moodle
4 cp −pr moodle.backup/theme/mitema moodle/theme/mitema
5 cp −pr moodle.backup/mod/mimod moodle/mod/mimod
Figur a 3. 8. Actualització automàtica del Moodle a una nova versió
3.1.5 Mode de manteniment del portal web
Algunes de les tasques de manteniment es poden allargar, poden aparèixer inci-

dències o simplement a vegades pot interessar que els usuaris no entrin al portal
durant algun temps; per a aquestes situacions hi ha una utilitat anomenada mode
de manteniment.
En mode de manteniment només els administradors poden accedir al portal

i a la resta d’usuaris es mostra un missatge que indica que s’estan fent tasques
de manteniment. A més es pot ampliar amb un text personalitzat on es poden
afegir les indicacions oportunes, com per exemple l’hora aproximada a la
qual tornarà a estar accessible el servei.
Per activar el mode de manteniment cal accedir a l’ítem Administració de lloc

\Servidor \Mode Manteniment, del bloc de Configuració (figura 3.9).
F igu r a 3. 9 . Mode manteniment
3.2 Còpies de seguretat
Fer còpies de seguretat és un procés que consumeix recursos, temps, processador

i espai de disc i, per tant, cal fer-ne una planificació acurada.
Per evitar comprometre el rendiment del sistema, les còpies de seguretat

s’han de fer en horaris de poca utilització; també és una bona pràctica avisar
als usuaris dels períodes en què es faran.
L’administrador és el responsable que es facin i d’establir-ne la periodicitat, diària,

setmanal o mensual, depenent del volum d’informació, de l’ús que se’n faci o
d’altres factors organitzatius. De la mateixa manera que moltes de les tasques
Els entorns Linux tenen periòdiques relacionades amb la informàtica, cal cercar i establir mecanismes per
l’eina Cron per planificar
tasques, i els sistemes automatitzar-les; els sistemes operatius disposen d’eines per planificar i executar
Windows disposen del
Planificador de tasques. tasques programades.
Les còpies de seguretat no s’han d’emmagatzemar al mateix servidor on es

troba el Moodle; d’aquesta manera en cas que es perdin les dades del servidor
es poden recuperar les còpies.
3.2.1 Còpies de seguretat de cursos
Els cursos disposen d’una eina de còpia de seguretat que permet als administradors
o professors empaquetar la informació del curs en un fitxer comprimit extensió
MBZ per distingir-los de l’extensió ZIP). D’aquesta manera poden desar les dades
amb la periodicitat que els convingui o exportar el curs a un altre lloc Moodle.
La informació que es pot incloure en una còpia de seguretat d’un curs és:
l’estructura completa o parcial (activitats i recursos), les dades d’usuari
associades a les activitats, els usuaris del curs i els seus rols, els registres
d’activitat, els fitxers d’usuari i del curs, els esdeveniments, els blocs i les
qualificacions (figura 3.10).
L’opció per fer còpies de
seguretat d’un curs està
disponible a l’ítem
Figur a 3. 10. Còpies de seguretat Administració del
curs/Còpia de seguretat del
L’opció per fer la restauració

de les còpies de seguretat
d’un curs està disponible a
Un cop la còpia de seguretat ha estat realitzada amb èxit, el sistema ens porta al l’ítem Administració del
curs/Restaura del bloc de
menú de restauració de còpies de seguretat que ens permetrà baixar-nos la còpia Configuració.
realitzada per poder exportar-la a un altre Moodle o bé fer-nos-en una còpia a un

altre lloc. Des d’aquí també podem fer altres gestions com importar la còpia d’un
altre curs del mateix Moodle o d’altres portals web (figura 3.11).
F igu r a 3. 1 1 . Restaura còpies de seguretat
Alhora el Moodle també proporciona una eina a l’administrador que li permet

planificar còpies de seguretat de tots els cursos i executar-les periòdicament de
manera autònoma i configurar també els paràmetres de les còpies manuals. Les
dades que es poden incloure són les mateixes que a les còpies manuals de cursos
individuals.
L’administrador pot planificar còpies de seguretat de tots els cursos des de l’ítem
Administració del lloc/Cursos/Còpies, del bloc de Configuració. Aquí hi ha
disponibles tres blocs de paràmetres per configurar:
• Opcions per defecte genèriques de les còpies de seguretat: cada quan

esborrar el registre de les còpies i elements a incloure per defecte a les còpies
de seguretat realitzades manualment pels usuaris.
• Paràmetres genèrics per defecte de la importació.
• Configuració de la còpia de seguretat programada: la planificació (dies de

la setmana i hora a realitzar-se, on desar la còpia i quins elements incloure
a la còpia programada (figura 3.12).
Per veure l’informe de les còpies realitzades podeu anar a Administració del
lloc/Informes/Còpies del bloc de Configuració.
Figur a 3. 12. Planificació de les còpies de seguretat de tots els cursos
A la figura figura 3.12 veieu una imatge parcial dels paràmetres disponibles per a
l’administrador per activar la planificació de les còpies i establir-ne la periodicitat.
3.2.2 Restauració de còpies de cursos
Les eines de còpies de seguretat de cursos, tant si les fa un professor del seu curs,
com si les programa automàticament l’administrador per a tots els cursos alhora,
generen un fitxer en format comprimit (MBZ). El fitxer amb la còpia té un nom
que inclou el nom del curs i la data i hora en què s’ha creat.
La sintaxi del fitxer és la següent: backup-moodle2-course-[n]-[nom curt del curs]-

data-hora.mbz.
És una bona idea mantenir aquest nom i no reanomenar-lo, ja que permet

identificar el curs de què es tracta ràpidament i quines són les còpies més recents.
Per restaurar un fitxer de còpia de seguretat generat pel Moodle només cal pujar-
lo als fitxers del curs en què es vol restaurar, i automàticament es mostra l’acció
corresponent (figura 3.13). Els professors poden restaurar cursos només amb la
informació de la còpia o afegint aquesta informació al contingut del curs; els
administradors disposen de més opcions, com per exemple crear un nou curs a
partir de la còpia.
F igu r a 3. 1 3 . Restaura còpia de seguretat d’un curs
3.2.3 Còpies de seguretat del lloc
Les còpies de seguretat del lloc permeten a l’administrador salvaguardar totes

les dades associades a un lloc Moodle. Aquestes còpies de seguretat poden ser
restaurades per portar el lloc al punt en què es trobava quan es va realitzar la còpia
de seguretat.
Encara que els professors facin còpies de seguretat dels seus cursos, cal tenir en
compte que aquestes només contenen la informació relacionada amb els cursos
però no del lloc. Per tant és molt recomanable realitzar periòdicament còpies de
seguretat i comprovar que aquestes poden ser restaurades correctament. És l’únic
camí per evitar la pèrdua d’informació davant d’incidències ocasionades en els
sistemes, bé per errades humanes com ara fallides dels dispositius electrònics o
bé per desastres naturals, i així garantir la integritat dels nostres sistemes.
El portal es divideix en tres grans àrees d’informació que es poden tractar de

manera diferenciada a l’hora de planificar les còpies de seguretat:
• El programari (directori moodle). És el codi de l’aplicació, els fitxers

de configuració del lloc, els temes modificats, els idiomes afegits i altres
connectors afegits. Del programari cal desar còpia de tot allò que s’hagi
modificat per personalitzar l’entorn. La resta està disponible als repositoris
del Moodle i es pot baixar del web.
• Els fitxers que els usuaris pugen al servidor (directori moodledata).

Aquests fitxers són els recursos dels cursos i les tasques dels estudiants; en
definitiva, tota la feina dels usuaris. En general hi haurà un gran volum
de dades dels cursos, depenent del nombre i de l’activitat que tinguin,
però aquesta informació és molt important; perdre-la pot representar perdre
moltes hores de feina de tots els usuaris, alumnes i professors. Tractant-se
d’un directori de dades, es pot fer servir qualsevol sistema de còpia de fitxers
corresponents.
• La base de dades. Aquesta enregistra la informació del sistema i les seves

interrelacions, els usuaris i els cursos, quins rols té cadascú, els missatges
dels fòrums o les paraules dels glossaris, per exemple; també gestiona tota
la relació entre el portal i els documents dels usuaris. La base de dades del
portal s’anomena habitualment moodle.
Al fitxer de configuració del Moodle (config.php) podeu comprovar on es troben

al Moodle els anteriors ítems.
• CFG->wwwroot: on està emmagatzemat el programari.
• CFG->dataroot: on s’emmagatzemen els fitxers desats pels usuaris al

servidor.
• CFG->dbname: nom de la base de dades.
• CFG->prefix: prefix de les taules dins de la base de dades.
Al lloc web https://docs.moodle.org/all/es/Respaldo_del_sitio trobareu explicat

més detalladament el procés de còpies de seguretat del lloc Moodle.
Per fer les còpies dels directoris moodle i moodledata podeu fer servir les
diferents eines oferides pel sistema, concretament qualsevol dels següents pro-
grames que permeten la transferència de fitxers: FTP, WinSP, wget, rsync i
altres. A més podeu utilitzar qualsevol eina per compactar els fitxers en un
paquet: TAR, ZIP, 7z, XZ, BZIP2, GZIP i WIM entre d’altres. Al següent en-
llaç https://docs.moodle.org/29/en/Tools_for_backing_up_server_files podeu tro-
bar més informació sobre realitzar còpies de servidors de fitxers. Al phpMyAdmin cal
seleccionar l’opció Exportar
per fer una còpia de
La manera de fer les còpies de seguretat de la base de dades dependrà del sistema seguretat de la base de
dades moodle i Importar
gestor que es faci servir; cadascun té les seves eines específiques. Per exemple, el per restaurar una còpia ja
realitzada. Es poden
MySQL disposa de la instrucció mysqldump per bolcar el contingut de la base de seleccionar diferents
formats de sortida i decidir
dades, que s’executa en terminal; per tant, es pot afegir a un arxiu d’instruccions. diferents opcions del fitxer
de la còpia.
També es disposa de http://www.mysqldumper.net/. També des de la interfície
d’administració web http://www.phpmyadmin.net/home_page/index.php es po-
den exportar les dades a un fitxer en diferents formats (figura 3.14).
F igu r a 3. 1 4 . Part del menú d’exportació d’una base de dades des de phpMyAdmin
3.3 Administració d’usuaris
Com a administració d’usuaris entenem tota la gestió directament relacionada amb

els comptes d’usuari, tant individualment com en conjunt.
Tenint en compte que a la plataforma Moodle els usuaris es poden donar d’alta
per si mateixos i a més es poden inscriure als cursos o bé aquesta tasca pot ser
realitzada pels mateixos professors, la gestió d’usuaris per part de l’administrador
queda més reduïda. Algunes de les tasques són (figura 3.15):
• Fer gestions massives amb els usuaris: confirmació d’altes per correu
electrònic que els usuaris no hagin confirmat, forçar els usuaris a canviar
contrasenyes, generar llistat d’usuaris de diferents formats.
• Assignar valors per defecte als perfils d’usuari i crear nous camps als perfils.
L’administració dels usuaris

es fa des de Administració • Donar d’alta automàticament i massivament usuaris provinents d’un fitxer
del lloc/Usuaris/Comptes
del bloc de Configuració. de text.
• Carregar automàticament les fotografies per a tots els usuaris.
• Gestionar les cohorts.

Fig ur a 3 . 15 . Administració d’usuaris
Cada usuari del sistema té el que s’anomena un perfil, que consisteix en una sèrie
de dades personals, algunes de les quals són obligatòries, que són: nom d’usuari,
contrasenya, nom i cognoms, adreça de correu electrònic, població i país.
Tot i que les dades del perfil en general són suficients per a la majoria de situacions,
es pot ampliar afegint-hi nous blocs de camps; penseu, per exemple, en un
portal d’aprenentatge orientat a cursos de formació ocupacional, en què podria
ser interessant conèixer el nivell d’estudis dels usuaris o les seves perspectives
professionals.
Només l’administrador pot veure la llista dels usuaris del sistema, editar-los,
esborrar-los o fer cerques avançades. També pot afegir nous usuaris individual-
ment o massivament a partir d’un fitxer en format CSV o bé gestionant les cohorts.
Les cohorts són grups d’usuaris que permeten entre altres accions la matriculació
massiva d’usuaris als cursos. Aquestes poden assignar-se a les categories de
cursos o bé a tot el sistema. Es poden configurar com a visibles per tal que els
professors les tinguin disponibles per als seus cursos. A més Moodle incorpora la
càrrega massiva d’usuaris a les cohorts a través de fitxers CSV. La gestió d’usuaris es
realitza des de l’ítem
Administració del
L’administrador pot gestionar les cohorts des de l’ítem Administració del lloc/U- lloc/Usuaris/Comptes, del
suaris/Comptes/Cohorts, del bloc de Configuració (figura 3.16).
El format CSV consisteix a
representar les dades en
F ig ur a 3. 16. Gestió de les cohorts una taula, en la qual cada
fila representa una element
amb els atributs o valors
separats per una coma.
Altres tasques que pot realitzar l’administrador respecte a la gestió dels permisos
són les següents:
• Definir la política d’usuaris.
• Assignar el rol d’administrador a altres usuaris.
• Gestionar els rols: redefinir rols, afegir nous rols i altres operacions.
3.4 Informes d’accés i utilització del portal
La feina diària amb un sistema informàtic complex com els portals web, on
accedeixen una gran quantitat d’usuaris diferents amb necessitats particulars i
on els continguts es generen de manera autònoma amb una supervisió mínima,
requereix eines que recullin, sintetitzin i mostrin què està succeint.
Per facilitar el seguiment i control del portal i dels cursos, el sistema proporciona
eines de tractament de dades que gestionen la informació i la presenten de manera
entenedora: els informes i els registres d’activitat.
Part d’aquestes eines estan disponibles també per als professors per obtenir
Per facilitar la comprensió informació sobre la participació dels estudiants als seus cursos.
de la documentació en
anglès, tingueu en compte
que informe i registre fan
referència a les paraules
angleses report i log,
respectivament
Als informes i registres del 3.4.1 Informes

lloc s’hi accedeix des de
l’ítem Administració del
lloc/Informes , del bloc de
Configuració. L’administrador disposa d’algunes eines per controlar el funcionament correcte
del portal; li permeten detectar possibles errors, problemes de seguretat, avançar
necessitats futures o pensar en les millores que es poden introduir.
Els informes presenten a l’administrador informació de diversos aspectes

de funcionament i configuració del portal de manera fàcil i entenedora, en
forma de taules o gràficament, per facilitar-ne la gestió i el control.
Els següents informes estan disponibles per a l’administrador:
• Comentaris: per gestionar els comentaris afegits pels usuaris del lloc.
• Còpies de seguretat: mostra una llista de les còpies de cursos realitzades i

ens indica les properes còpies programades.
• Canvis de la configuració: mostra les diferents modificacions realitzades

per l’administrador pel que fa a la configuració del lloc.
• Rendiment: s’enumeren les característiques que poden afectar al rendiment

del lloc.
• Característiques de la seguretat: mostra la idoneïtat de diferents aspectes

relacionats amb la seguretat del lloc. Mostra també informació detallada de
cada error i de quina manera es pot solucionar.
• Netejador de brossa: per eliminar usuaris no previstos. Eina molt útil quan
no s’utilitza entrada CAPTCHA a les altes d’usuari.
• Llistes d’esdeveniments: llistat de tot allò que succeeix al portal amb

informació addicional.
• Estadístiques: visualitza informació estadística sobre la utilització del

portal. Cal habilitar les estadístiques del servidor ja que per defecte no
estan activades. Recollir dades és un procés costós, es fa diàriament i és
recomanable planificar-lo en horaris de poca activitat (figura 3.17).
F ig ur a 3. 17. Estadístiques d’un curs
Per activar les estadístiques

cal accedir a l’ítem
Administració del
lloc/Servidor/Estadístiques,
del bloc de Configuració. Hi
ha diferents paràmetres per
configurar.
3.4.2 Registres d’activitat
Un registre d’activitat fa referència a un conjunt d’informació estructurada gene-

ralment en forma de taula, i en què cadascuna de les files conté una referència
horària que indica en quin moment ha succeït.
Són informes als qual s’han aplicat uns filtres que ens mostren informació de
determinades activitats o determinats estudiants (figura 3.18).
Figur a 3 . 18 . Filtres per obtenir els registres

L’administrador té accés als registres dels diferents cursos i a més disposa d’un
registre específic de tot el portal; s’hi pot consultar, per exemple, els errors que es
produeixen, com ara intents d’accés erronis.
3.4.3 Informes i registres dels professors
Per als docents és interessant poder obtenir informació sobre la participació dels
estudiants als seu cursos. Aquests poden ser:
• Registres: permeten als professor visualitzar a quins recursos han accedit

els estudiants, quines activitats han lliurat i quan ho han fet. Pots limitar la
cerca per data i així aconseguir els registres corresponents a un determinat
període. També es pot visualitzar la participació de cada estudiant als
fòrums. Concretament els filtres que es poden aplicar són els següents:
curs, participant, data, activitat i acció. Aquesta última fa referència a
les possibles accions que els participants poden realitzar amb els recursos
i activitats: visualitzar, actualitzar i esborrar. L’informe generat es pot
emmagatzemar en un fitxer.
• Registres en directe: mostra informació sobre l’activitat al curs durant

l’última hora.
• Informes d’activitat: es tracta d’informes als quals no s’aplica cap filtre.

Mostrarà per tant tota l’activitat del curs. Els elements (activitats, recursos,
elements de comunicació) es mostren en el mateix ordre que apareixen en
les seccions del curs. La columna Visualitzacions ens mostra el nombre de
vegades que l’element ha estat visitat. La columna Darrer Accés mostra
l’última data en què s’ha accedit a l’element i el temps transcorregut des de
l’últim accés.
• Participació al curs: proporciona un llistat que es pot ordenar i que mostra

la participació dels estudiants als cursos, amb informació detallada com ara
quins estudiants han visualitzat un recurs o han lliurat una determinada tasca.
A més, els professors des d’aquest entorn poden enviar un missatge a tots
Als informes i registres d’un els estudiants o només a aquells estudiants que per exemple no han lliurat
curs concret s’accedeix des
de l’ítem Administració del una tasca.
curs/Informes, del bloc de
Configuració.
Per activar la compleció • Compleció d’activitat: genera un llistat de tots els participants visualitzant
d’activitat cal accedir a
l’ítem Administració del si han completat les activitats. Aquest opció està disponible si està activat
curs/Edita paràmetres, del
bloc de Configuració i anar el mòdul de compleció d’activitat en el curs. (figura 3.19)
a l’apartat Seguiment de
Compleció.
Figur a 3. 19. Informe compleció d’activitat
Els informes de participació (figura 3.20) als cursos permeten d’una manera
senzilla monitoritzar la participació en els cursos. Habitualment els generem per
visualitzar la participació als fòrums tant a nivell de lectura com d’escriptura i les
activitats realitzades. Podem escollir els següents ítems:
• Mòdul d’activitat: per seleccionar el tipus d’activitat sobre el qual generar

l’informe.
• Període: per indicar el període sobre el qual aplicar l’informe.
• Mostra només: per seleccionar el rol, és a dir, sobre quins participants

aplicar l’informe. Es poden seleccionar tots els rols.
• Mostra accions: per indicar si a l’informe han de sortir les accions realitza-
des.
El professor pot enviar missatges selectivament per comunicar-se amb els estudi-
ants que no han lliurat determinada tasca.
F igu r a 3. 2 0 . Informe participació al curs

FP SMX m08 Material Paper

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FP SMX m08 Material Paper

Uploaded by

Copyright:

Available Formats

Informàtica i comunicacions

CFGM - Sistemes microinformàtics i xarxes

Anna Castelló Gistau

Raúl Broceño Corrales

Primera edició: febrer 2016

Podeu veure el text legal complet a

En l’enginyeria de programari s’anomena aplicació web les aplicacions que els

En finalitzar aquest mòdul l’alumne/a:

1. Instal·la, si s’escau aplicacions web, descrivint les seves característiques i

2. Instal·la aplicacions d’ofimàtica web, descrivint les seves característiques i

Gestors d’arxius web

1. Instal·la, amb ajuda de la documentació tècnica, serveis de gestió de arxius

1. Instal·la gestors de continguts, identificant les seves aplicacions i configu-

Portals web d’aprenentatge

1. Instal·la amb ajuda de la documentació tècnica, sistemes de gestió de

Fonaments d’HTML i fulls d’estils

1. Construeix un document HTML emprant una sintaxi i estructura correcte

3. Implementa un lloc web a partir de diversos documents HTML.

4. Coneix i domina eines software per a desenvolupar documents html.

5. Construeix un document CSS emprant una sintaxi i estructura correcte i fent

7. Implementa un lloc web a partir de diversos documents HTML amb estils.

8. Coneix i domina eines software per a desenvolupar documents amb estils.

Ofimàtica i eines web

1. Aplicacions web. Correu web, calendaris en línia i altres

Fonaments d’HTML i fulls d’estils

1. El llenguatge de marques (X)HTML

3. Editors i gestors d’(X)HTML

1. El llenguatge de fulls d’estil CSS

Gestors d’arxius web

1. Instal·lació de gestors d’arxius web

2. Configuració i ús del servei de gestió d’arxius web

3. Integritat del servei i documentació tècnica

1. Els sistemes de gestió de continguts

2. Configuració i creació de continguts

3. Administració i manteniment d’un gestor de continguts

Portals web d’aprenentatge

1. Instal·lació de portals web d’aprenentatge

2. Configuració de portals web d’aprenentatge

3. Gestió de portals web d’aprenentatge

Abans de l’expansió en l’ús d’Internet, els usuaris utilitzaven sempre programari

En un món globalitzat i on l’ús d’Internet és massiu, la necessitat de poder

El mòdul Aplicacions web us donarà una visió de les aplicacions informàtiques

L’apartat “Aplicacions web. Correu web, calendaris en línia i altres” serveix

A l’apartat “Ofimàtica web” es fa una introducció a aquelles aplicacions web ori-

En acabar la unitat, l’alumne podrà:

1. Descriure l’origen i evolució dels serveis web de darrera generació.

2. Instal·lar, si s’escau, diferents aplicacions web descrivint les seves caracte-

3. Configurar i utilitzar el correu electrònic web. Gestionar comptes d’usuari.

4. Configurar aplicacions de calendari web.

5. Reconèixer les prestacions específiques de les aplicacions instal·lades (cites,

6. Configurar les aplicacions web per integrar-les amb el servei de correu.

7. Cercar i interpretar l’origen i evolució de les aplicacions d’ofimàtica web.

8. Establir la utilitat de les aplicacions d’ofimàtica web.

9. Descriure diferents eines d’ofimàtica web (processador de textos, full de

10. Configurar aplicacions d’ofimàtica web. Gestionar comptes d’usuari.

11. Aplicar criteris de seguretat en l’accés dels usuaris.

12. Reconèixer les prestacions específiques de cadascuna de les aplicacions

13. Utilitzar les aplicacions de forma col·laborativa.

14. Cercar i interpretar documentació tècnica en les llengües oficials i en les de

15. Documentar adequadament la configuració i gestió de les aplicacions ofi-

Un estudi publicat a finals de l’any 2014 per l’empresa tecnològica Ericsson

nostre smartphone o tablet. El motiu d’aquesta necessitat d’estar acompanyat a

tant mitjançant el navegador sinó mitjançant aplicacions natives en els sistemes