Enganxar text correctament

Quan enganxis text (tant si l'has copiat des d'un Word o d'un document del Drive com des del mateix Liferay), fes-ho SEMPRE amb l’opció "Enganxa com a text no formatat (Ctrl+Majúscules +V)", per evitar copiar involuntàriament codi HTML que podria interferir amb els estils de la web.

En casos excepcionals (p. ex., si hem de copiar i enganxar un fragment de text que conté molts enllaços), podem enganxar amb l'opció Enganxar Ctrl+V.

Netejar el format d'un text

Si vols eliminar totes les opcions de format d'un text, el pots netejar:

1. Edita el contingut.
2. Selecciona tot el text (Si es tracta d'un contingut amb diferents camps de text, cal identificar quin és el que té problemes o, millor encara, repetir l'operació en tots els camps de text).
3. Fes clic al botó Elimina Format.
   
4. Si coneixes el llenguatge HTML, pots mirar el codi font amb el botó Source per comprovar que les etiquetes estan correctes.
   

Estils de títol

Utilitza els estils propis de la web per als títols de les diferents seccions. Per als títols de primer nivell, cal fer servir Capçalera 2 (ja que Capçalera 1 és el que s'aplica automàticament per al títol de la pàgina). Per als nivells successius, utilitza Capçalera 3 i Capçalera 4.

Llistes d'elements

Una llista identifica un grup d'elements que tenen alguna relació entre si, faciliten la comprensió dels continguts i permeten una navegació més còmoda. Les llistes poden de pics (quan tots els elements són iguals)  o numerades (p. ex. per indicar la seqüència d'un procés).

Per incloure llistes dins el text, disposes dels botons de "Llista numerada" i "Llista de pics".

És incorrecte fer una llista amb guionets, asteriscs, etc. o escriure directament els nombres d'una llista numerada, ja que això, internament, no es considera "llista" i afecta molt negativament l'accessibilitat.

Negretes i cursives

Pots fer-les servir quan sigui oportú, sense excedir-te, per exemple:

• Negreta: per destacar una paraula o una frase breu.
• Cursiva: per destacar una paraula o un fragment del text, per a títols d'obres, etc.

Alineació 

Sempre deixarem el text en l'alineació per defecte a l'esquerra, per tal de facilitar la visualització en tots els dispositius. En alguns casos pots alinear el text al centre o a la dreta. En canvi, a la web no justifiquem MAI el text a dues bandes.

Estils per destacar text

Hi ha diferents estils per destacar una part del text, segons el tipus d'informació que es vulgui remarcar.

Convé no abusar del text destacat, ja que si ho destaquem tot, aleshores no estarem destacant res.

Per enllaçar una paraula o frase a una pàgina web o un document, cal seguir els passos següents:

1. Selecciona la paraula o frase que vols enllaçar. 
2. Fes clic al símbol d'enllaç.
   
3. Tens dues maneres d'indicar la informació de l'enllaç:
   • Fes clic al botó Veure servidor per explorar i enllaçar els documents i les pàgines de la teva web.
   • Copia i enganxa la URL de la pàgina o document de destí a la casella URL. Si és a una web o document de la UPF, recorda que no es posa mai el domini (p.e., https://www.upf.edu /web/matricula/)
4. Fes clic al botó D'acord.
   

Enllaç dins una mateixa pàgina (àncora)

Tot i que no es recomana fer enllaços dins la mateixa pàgina, si et cal fer-los has de crear l'àncora o destí amb la icona de la bandera: ⁣

i per fer l'enllaç, selecciona l'opció Àncora en aquesta pàgina del desplegable Tipus d'enllaç i tria el nom de l'àncora corresponent.

1. Situa el cursor al lloc on vols inserir la imatge.
2. Fes clic al símbol d'imatge.
   
3. Tens dues opcions per afegir-la:
   • Si prèviament has pujat la imatge al servidor, busca-la a la carpeta corresponent, selecciona-la i fes clic a Afegeix i al botó D'acord.
   • Si l'has de pujar al moment d'inserir-la, seleccionar-la de la ubicació del teu ordinador. Fes clic a Afegeix i Publica.
4. Si escau, pots canviar les Propietats de la imatge (ves al punt següent).
5. Fes clic al botó D'acord per tornar a l'edició.

Propietats de la imatge

En el moment d'afegir una imatge, pots indicar algunes propietats que s'apliquen per mostrar-la a la web. Si la imatge ja ha estat inserida prèviament, pots fer doble clic al damunt per mostrar aquest quadre de propietats.

• Escriure el Text alternatiu de la imatge (necessari per motius d'accessibilitat; si la imatge és merament decorativa, no cal el text alternatiu).
• Ajustar la mida de la imatge modificant el camp Amplada. Deixa buit el camp Alçada per tal que la imatge mantingui la proporció en tots els dispositius o mides de pantalla. S'expressa en píxels.
• Definir l'Alineació a l'esquerra, al centre o a la dreta.
• Si la imatge ha de portar un peu de foto, cal marcar l'opció Imatge amb subtítol; quan tornis a l'editor, veuràs que a sota de la imatge s'ha afegit un espai amb el text "Títol", que pots personalitzar escrivint un peu de foto.
• Ajustar l'Espai horitzontal i l'Espai vertical, és a dir, el marge de separació entre la imatge i el text circumdant. S'expressa en píxels.

Les taules han d'estar optimitzades per tal que siguin accessibles i es visualitzin correctament en tots els dispositius.

En el moment de crear una taula, cal indicar el següent:

• Al camp Amplada, posar el valor 100% (és important indicar que sigui un % !)
• Opcionalment, al camp Capçaleres pots indicar que la primera fila (o la primera columna) ha de ser capçalera. D'aquesta manera, s'aplica un estil diferent de tota la fila (o columna).

Quan la taula ja està creada, pots:

• Canviar les propietats de la taula. Situa el cursor damunt la taula, fes clic amb el botó dret i selecciona Propietats de la taula.
• Ajustar l'amplada de les columnes. Situa el cursor a la cel·la superior de la primera columna de la taula, fes clic amb el botó dret i selecciona Cel·la > Propietats de la cel·la. Indica l'Amplada i selecciona "Percentatge" al desplegable del costat.

L'editor web inclou un assistent d'accessibilitat que et permetrà detectar i resoldre possibles problemes d'accessibilitat que tingui el teu contingut HTML.