Enganxar text correctament

Quan enganxis text (tant si l'has copiat en un Word com des del mateix Liferay), fes-ho SEMPRE amb l’opció "Enganxa com a text no formatat", per evitar copiar involuntàriament codi HTML que interferiria amb els estils de la web.

En casos excepcionals (p. ex., si hem de copiar i enganxar un fragment de text que conté molt enllaços), podem enganxar amb l'opció Enganxa des de Word. 

Netejar el format d'un text

Quan s'ha enganxat text de forma incorrecta, la pàgina es visualitzarà malament. Fins i tot, és possible que aparegui completament en blanc (el contingut "ha desaparegut"). Quan això passa, cal netejar el text. Per fer-ho:

1. Edita el contingut. (Si no es pot fer des de la pàgina perquè el text no es veu, cal anar a Administració > Contingut i buscar-lo).
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. A vegades, pot semblar que el text estigui en blanc. Aleshores cal clicar el botó Codi font per veure el codi HTML intern i tornar a clicar Codi font per mostrar el text. Després torna als passos 2 i 3.
    

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 Heading 2 (ja que Heading 1 és el que s'aplica automàticament per al títol de la pàgina). Per als nivells successius, utilitza Heading 3 i Heading 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, cursives i altres estils

Pots fer servir ;negretes i cursives, però NO subratllats (ja que, a la web, el subratllat indica que es tracta d’un enllaç, i es fa de forma automàtica)

En canvi, NO es permet  modificar ni la mida ni el color de la lletra, ja que això interferiria amb els estils propis de la UPF.

Alineació 

Cal deixar SEMPRE el text amb l'alineació per defecte (a l'esquerra), per tal de facilitar la visualització en tots els dispositius.

A la web no justifiquem MAI el text a dues bandes, ja que això, en molts dispositius, genera espais en blanc irregulars entre les paraules. Això dificulta molt la llegibilitat i l'accessibilitat per exemple per a persones amb dislèxia.

En alguns casos sí que pots alinear el text al centre o a la dreta.

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. Si és una pàgina o un document de la mateixa web o intranet, pots buscar-lo mitjançant el botó Veure servidor.
   Si l'enllaç és cap a una altra web de la UPF (o a una web externa), pots escriure la URL de la pàgina 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.

1. Situa el cursor al lloc on vols inserir la imatge.
2. Fes clic al símbol d'imatge.
   
3. Cerca la imatge mitjançant el botó Veure servidor.
   Si coneixes la URL de la imatge, pots escriure-la a la casella URL. Ha de ser sempre del domini UPF (no insereixis imatges de dominis externs); recorda que no es posa mai el domini (p.e., https://www.upf.edu /documents/687443/...)
   
4. Pots ajustar l'Amplada i l'Alçada de la imatge, en píxels. Cal mantenir la proporció entre aquestes mides (fixa't que el "cadenat" estigui tancat).
5. Ajusta també l'Espai horitzontal i l'Espai vertical, és a dir, l'espai de separació entre la imatge i el text. Normalment, seran 12 px. 
6. Pots definir l'Alineació a l'esquerra o a la dreta.
7. Fes clic al botó d'Acord.
    

En aquells casos en què sí que s'utilitza una taula, cal que estigui optimitzada per tal d'assegurar que sigui accessible i es visualitzi 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.