Enganxar text correctament

Quan enganxis text (tant si l'has copiat en un Word com al 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 un contingut amb text erroni

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.
    

Cal utilitzar sempre els estils propis de Liferay, sense canviar ni el color ni la mida de la lletra. Això és molt important tant per al bon posicionament de la web a Google com per raons d'accessibilitat.

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 utilitzar Heading 2 (ja que Heading 1 és el que utilitza automàticament per al títol de la pàgina).

Per als nivells successius, utilitza Heading 3 i Heading 4.

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.

Pots utilitzar 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.

Cal alinear SEMPRE el text 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ò produeix que hi hagi molts espais en blanc entre les paraules i, en molts dispositius, el text acaba resultant il·legible.

Només en casos molt excepcionals podem centrar text o alinear-lo a la dreta.

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 coneixes la URL de la pàgina o document, pots escriure-la 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/)
   En cas contrari, pots buscar-la mitjançant el botó Veure servidor.
   
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.

Optimitzar l'amplada d'una taula

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

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

Si ja tenim creada la taula i ho volem canviar, cal situar el cursor sobre la taula i fer clic amb el botó dret. Seleccionar Propietats de la taula i procedir com quan creem la taula de bell nou.

Optimitzar les columnes

Quan omplim una taula amb text, l'amplada de les columnes s'adapta al contingut a mesura que anem escrivint. Si volem que les columnes de la taula conservin  sempre la mateixa proporció, cal fer el següent:

• Situar el cursor a la cel·la superior de la primera columna de la taula i fer clic amb el botó dret. Seleccionar Cel·la > Propietats de la cel·la.
• On diu Amplada, escriure el percentatge que volem que ocupi aquella columna i, molt important, seleccionar "Percentatge" al desplegable del costat. Pe exemple: "20" i "Percentatge" indica que la columna farà sempre un 20%.
• Fer clic al botó D'acord.
• Repetir el mateix per a la segona i tercera columna. En total, han de sumar 100%

Si tenim diferents taules en una mateixa pàgina, i volem que totes tinguin un mateix aspecte, cal fer-ho a cada taula. 

Indicant que les columnes ocupen un percentatge, ens assegurem que es veu correctament tant en monitors grans com en dispositius mòbils.