guia per a ledició web - uab barcelona€¦ · aquesta guia per a ledició web pretén ser un...
TRANSCRIPT
Guia per a l’edició web Oracle Webcenter Sites v11 – Interfície Contributor
Unitat de Web
Àrea de Comunicació i de Promoció
Universitat Autònoma de Barcelona
VERSIÓ OCTUBRE 2019
Guia per a l’edició web
P à g i n a 2 | 62
Índex
Presentació..................................................................................................................................... 4
Oracle Webcenter Sites ................................................................................................................. 4
LOGIN ......................................................................................................................................... 4
ENTORN DE TREBALL .................................................................................................................. 5
Idioma de la interfície ............................................................................................................ 5
Pantalla inicial ........................................................................................................................ 6
Árbol del sitio ......................................................................................................................... 8
Menú superior de cada asset ................................................................................................. 8
Pestanyes ............................................................................................................................... 9
Historial .................................................................................................................................. 9
Marcadores ............................................................................................................................ 9
Creació de nous assets ......................................................................................................... 10
Cercador d’assets ................................................................................................................. 11
Copiar assets ........................................................................................................................ 16
Drag & Drop ......................................................................................................................... 17
Què és un “site”? ................................................................................................................. 18
Compartir assets entre diferents sites ................................................................................. 18
Previsualització .................................................................................................................... 19
Els tipus d’asset ........................................................................................................................ 20
Asset document ................................................................................................................... 21
Asset imatge ......................................................................................................................... 23
Asset enllaç .......................................................................................................................... 24
Asset text genèric ................................................................................................................. 25
Asset col·lecció ..................................................................................................................... 30
Asset notícia ......................................................................................................................... 31
Asset agenda ........................................................................................................................ 32
Asset pàgina i plantilles de visualització .............................................................................. 33
Asset menú dreta i plantilles d’asset ................................................................................... 39
Assets especials .................................................................................................................... 49
Guia per a l’edició web
P à g i n a 3 | 62
PUBLICACIÓ DELS CANVIS ........................................................................................................ 50
Llibre d’estil i identitat corporativa .............................................................................................. 50
Redacció de notícies i textos pel web .......................................................................................... 51
Les imatges ................................................................................................................................... 53
Drets d’autor i propietat intel·lectual .......................................................................................... 53
Protecció de dades personals ...................................................................................................... 54
Com crear formularis ................................................................................................................... 54
Accessibilitat web ......................................................................................................................... 54
Estadístiques: Quantes visites tenim al web? .............................................................................. 55
La fitxa de Google Maps ............................................................................................................... 59
Eines d’interès per treballar amb la web ..................................................................................... 61
Altres gestors de continguts de la UAB ........................................................................................ 62
Guia per a l’edició web
P à g i n a 4 | 62
Presentació Aquesta Guia per a l’edició web pretén ser un manual per a les persones que actualitzen els
continguts d’algun apartat web del Portal UAB. D’una banda, per conèixer el funcionament del
gestor de continguts Oracle Webcenter Sites i de l’altra també donar consells per redactar i
preparar correctament els textos i imatges seguint el llibre d’estil de la universitat, analítica
web, accessibilitat i protecció de dades personals.
El document que esteu llegint l’hem preparat amb molta il·lusió des de la Unitat de Web per
facilitar la tasca dels editors i editores del Portal Web UAB. Esperem que us sigui de molt ajut!
L’anirem actualitzant perquè les webs no paren mai de canviar, i trobareu sempre la versió
més recent al blog dels editors: http://blogs.uab.cat/editorsweb
Oracle Webcenter Sites
LOGIN Per accedir al gestor de continguts Oracle Webcenter Sites cal obrir un navegador i posar
l’adreça:
https://webedit.uab.cat/fatwire
A la pàgina de validació cal escriure el nostre NIU i contrasenya habitual de la UAB. Si heu
canviat la contrasenya recentment, es canviarà també a Oracle el dia següent, cap a les 9:30h.
Per accedir per primera vegada a Oracle Webcenter Sites cal demanar l’accés a través del CAS
([email protected]). El procediment és que una persona que ja tingui accés al site demani l’accés
per a la persona que s’ha d’incorporar.
A partir de la posada en marxa d’Oracle per tal de millorar el servei i ampliar l’horari d’atenció
als editors comptem amb l’ajuda del Centre d’Assistència i Suport (CAS) per tal d’atendre les
peticions d’altes, baixes i modificacions dels usuaris de Fatwire, i resoldre possibles incidències
tècniques (iniciar sessió, accés remot,...).
Guia per a l’edició web
P à g i n a 5 | 62
Si la persona fa un curs de formació d’Oracle Webcenter Sites, des de la Unitat de Formació es
fa el tràmit de demanar les altes al sistema per poder realitzar el curs en el site de formació.
Posteriorment, s’ha de fer la petició a través del CAS per demanar l’assignació al site real que
correspongui, tal com s’ha explicat abans.
Un cop ja treballeu en Oracle Webcenter Sites, si teniu algun dubte o incidència primer
consulteu el manual o el blog dels editors http://blogs.uab.cat/editorsweb/, per mirar de
trobar la solució. Potser teniu algun company/a que també treballa en el gestor de continguts i
sap la resposta. Si cap d’aquestes vies us funciona podeu enviar un correu a [email protected] i us
donarem suport el més aviat possible.
ENTORN DE TREBALL A dalt de tot hi ha un panell on s’indica que treballem en l’entorn de contribució (Contributor).
Heu de treballar en aquest entorn, que marquem en vermell:
AVÍS: Durant un periode de temps es permet entrar a la interfície antiga (anomenada “Admin”)
per si teniu algun problema en treballar a la nova interfície però l’accés només estarà permès
durant un mes i així no sigui un canvi brusc. Tanmateix, us recomanem que de seguida passeu
a treballar al nou entorn per familiaritzar-vos amb la interfície Contributor. Totes les persones
editores han d’accedir al botó Contributor, que és un entorn més senzill d’utilitzar i que
esperem que millori la tasca d’actualització de la pàgina web.
Idioma de la interfície
Podeu treballar amb l’idioma en anglès o bé canviar al castellà. Per escollir l’idioma de la
interfície d’edició a Oracle cliqueu al vostre nom d’usuari a la barra superior i seleccioneu
l’idioma que preferiu. Notareu els canvis quan torneu a entrar a Oracle.
Guia per a l’edició web
P à g i n a 6 | 62
Pantalla inicial
La pantalla inicial té aquesta visualització:
L’entorn de treball es divideix en tres zones:
- Barra de menú superior
- Panell lateral esquerre
- Zona de continguts, on es poden crear i editar els continguts.
Quan entrem a un site, veurem que a la zona principal hi ha unes caixes que permeten veure
ràpidament el contingut que interessa:
- Caixa NOVETATS AL GESTOR, amb avisos i novetats del gestor de continguts, que
enllaça al Blog dels editors. Per exemple:
Guia per a l’edició web
P à g i n a 7 | 62
- Caixa MARCADORES: Ens mostra la llista d’assets que hem marcat. Són com els nostres
assets “favorits”, cada editor web pot escollir els assets que necessiti.
Podem suprimir marcadors dels assets que ja no utilitzem. Al menú superior, opció
CONTENIDO, podem afegir o treure un asset a aquesta llista de marcadors
seleccionant “MARCAR” o “DESMARCAR” quan estiguem visualitzant un asset concret.
Us recomanem que la vostra llista de marcadors sigui petita, perquè sinó ja perd la
utilitat de llista ràpida.
- Caixa DESPROTECCIONES: S’explica el funcionament en l’apartat de bloqueig i
desbloqueig d’assets.
- Caixa BÚSQUEDAS GUARDADAS: S’explica el funcionament en l’apartat del cercador
d’assets.
Guia per a l’edició web
P à g i n a 8 | 62
A la zona de l’esquerra hi tenim un altre menú complementari, a la part inferior:
ARBOL DEL SITIO: Mostra les pàgines del lloc web
MI TRABAJO: Per accedir als assets de l’historial o dels marcadors.
MI CONTENIDO: Llistat dels tipus d’asset del lloc web, és poc utilitzat.
Árbol del sitio
Apartat que permet accedir a l’arbre de pàgines del web. Només mostra els assets de tipus
“Pàgina”:
A la carpeta de “Páginas no colocadas” hi ha les pàgines que no formen part de l’arbre del lloc
web. Normalment aquesta carpeta hauria d’estar buida, només hi hauria d’haver pàgines amb
les que estem treballant i que volem col·locar a l’arbre.
Menú superior de cada asset
A cada asset hi ha un menú amb icones:
A continuació us detallem per a què serveix cada botó:
EDITAR l’asset.
VISTA PREVIA: Per veure com queda l’asset pàgina a l’entorn de proves webedit.
Aquest botó només està disponible en els assets pàgina.
APROVAR: Per aprovar per publicar l’asset.
Guia per a l’edició web
P à g i n a 9 | 62
ELIMINAR l’asset.
Botons de bloqueig (només en alguns assets):
BLOQUEJAR / DESBLOQUEJAR ASSET: Només en alguns assets com les notícies i els textos
genèrics, hi trobareu nous botons extra relacionats amb el bloqueig de l’asset. El funcionament
és el de sempre però ara queda bloquejat quan es guarden canvis i cal treure el bloqueig a
l’asset per poder-lo aprovar.
Al blog dels editors us expliquem en detall el nou funcionament del bloqueig:
http://blogs.uab.cat/editorsweb/2017/11/06/bloqueig-continguts/
Pestanyes
Una de les novetats importants de la nova interfície, és que treballarem amb pestanyes.
D’aquesta manera, agilitzem la feina perquè podem tenir més d’un asset obert alhora, com es
pot veure en la següent imatge:
Quan haguem acabat de treballar amb un asset, simplement tanquem la pestanya després de
guardar els canvis (i aprovar-los si s’escau).
Historial MI TRABAJO > HISTORIAL
Cada asset que creem, modifiquem o visualitzem va quedant en la llista de l’HISTORIAL. Serveix
per associar un asset amb un altre. Cal tenir en compte que quan tanquem la sessió, es buidarà
la llista d’assets de l’HISTORIAL.
Marcadores
MI TRABAJO > MARCADORES
Per afegir o treure un asset de la nostra llista de Marcadores ho farem a través del menú
Contenido i l’opció Marcar o Eliminar marcador.
Guia per a l’edició web
P à g i n a 10 | 62
Serveix per guardar una llista d’assets per poder-los trobar més fàcilment i associar un asset
amb un altre o reciclar un asset que ja hem utilitzat sense haver de buscar-lo, ja que la llista
apareix quan iniciem sessió. La llista també està sempre accessible des del panell de l’esquerra,
pestanya MI TRABAJO. Aquesta llista és pròpia de cada usuari i es manté encara que tanquem
la sessió.
Quan ja no necessitem l’accés ràpid a aquests assets, recomanem treure’ls de la llista de
marcadores per millorar el rendiment i no acumular una llista immensa. Es pot treure de la
llista seleccionant els assets que ja no utilitzem i clicar a eliminar de la llista els que ja no
necessitem:
Creació de nous assets Per crear un nou asset, hem d’anar al menú superior:
CONTENIDO > Nuevo
Guia per a l’edició web
P à g i n a 11 | 62
Seleccionar en el desplegable el tipus d’asset que es vol crear. Apareixerà el formulari típic per
omplir-ne el contingut.
Cercador d’assets
Ara, el cercador es troba situat a la part dreta del menú de pestanyes. Per defecte, la cerca es
realitza per nom d’asset sobre tots els tipus d’asset del site.
Guia per a l’edició web
P à g i n a 12 | 62
Si fem una cerca mentre estiguem editant un asset, els
resultats de cerca es mostraran en un llistat compacte a
la part dreta de la zona de treball.
En aquest cas, hem fet una cerca d’assets que contenen
al seu nom la paraula normativa (insensible a
majúscules).
Si volem ampliar el llistat i obtenir més informació dels resultats de cerca, haurem de clicar a
l’opció “Convertir en flotant”. D’aquesta manera, els resultats de la cerca s’obriran en una
nova pestanya. Si en el moment d’executar la cerca no estem editant cap asset llavors el
cercador s’obrirà per defecte en una nova pestanya.
La vista ampliada ens dóna més informació sobre els resultats de cerca:
Guia per a l’edició web
P à g i n a 13 | 62
Si volem compactar el llistat dels resultats de cerca, només cal tornar a fer clic a l’opció
“Convertir en fixe”.
Podem especificar el tipus d’asset sobre el qual realitzar la cerca. Per exemple, repetirem la
cerca anterior però només sobre assets de tipus Text genèric.
En aquest cas només mostra resultats sobre assets de tipus Text genèric.
Guia per a l’edició web
P à g i n a 14 | 62
Hi ha una opció interessant, que és guardar la cerca. D’aquesta manera, la cerca apareixerà a la
pàgina inicial quan accedim a Oracle. Un exemple que pot ser útil és preparar una cerca dels
assets que l’usuari ha modificat la última setmana. Per fer això, caldria començar per anar a la
BÚSQUEDA AVANZADA:
Guia per a l’edició web
P à g i n a 15 | 62
Es realitza la cerca i es clica l’enllaç GUARDAR BÚSQUEDA:
Aleshores, apareix un petit quadre on podem posar el nom a la cerca personalitzada, un nom
que sigui prou entenedor:
I cliquem el botó GUARDAR.
Així apareix a la caixa inicial de “Búsquedas guardadas”:
Guia per a l’edició web
P à g i n a 16 | 62
A la columna “Compartir estado” ha de dir PRIVADO. No s’ha de clicar el botó COMPARTIR
perquè aleshores la nostra cerca personalitzada apareixeria disponible per a tothom. Aquestes
cerques són per al propi usuari/a, per agilitzar la feina.
Pot ser que en el futur algunes cerques que considerem interessants i útils per a tothom, les
compartim des de la Unitat de Web i apareguin amb estado PÚBLICO i així les podreu utilitzar
també.
Trobareu molta més informació del funcionament del cercador a la documentació oficial
d’Oracle, a l’enllaç següent (en anglès):
https://docs.oracle.com/cd/E29542_01/doc.1111/e29605/user_findingorganizing.htm#WBCS
U471
Copiar assets La còpia d’un asset existent la realitzarem des d’aquest asset origen (tenint-lo obert a la
pestanya) a través del menú Editar i l’opció Copiar.
A continuació s’obrirà una nova pestanya amb l’asset còpia amb un nom que aconsellem
canviar, doncs es genera automàticament.
Guia per a l’edició web
P à g i n a 17 | 62
Drag & Drop
L’acció de col·locar pàgines a l’arbre es realitza amb drag and drop (arrossegar i deixar anar):
Quan haguem creat una nova pàgina, sempre quedarà a la carpeta de “Páginas no colocadas” i
l’arrossegarem al punt de l’arbre que necessitem per tal de colocar-la al lloc que correspongui.
Quan haguem d’associar assets entre si també funciona amb aquest mecanisme d’arrossegar i
deixar anar. Per exemple, quan haguem d’associar una imatge a una notícia. Tindrem la imatge
a la zona esquerra (a l’historial o bé a marcadores) i aleshores l’arrossegarem cap al camp que
correspongui. En la següent imatge es veu un exemple de camp tipus associació Drag&Drop:
Guia per a l’edició web
P à g i n a 18 | 62
Què és un “site”?
El gestor de continguts es divideix en “sites”, que corresponen a llocs web. Per exemple, tenim
un site per a cada facultat, un site per a cada departament, etc.
Quan es dona d’alta un usuari al sistema sempre se li donen permisos en un o varis sites
concrets, seguint el procediment descrit a l’apartat anterior.
Un usuari només té accés als continguts del site on estigui donat d’alta, no pot modificar altres
llocs web.
Compartir assets entre diferents sites
Només podrem compartir assets entre els sites on estiguem donats d’alta. La compartició d’un
asset existent la realitzarem des d’aquest mateix asset (tenint-lo obert a la pestanya) a través
del menú Contenido i l’opció Compartir.
Guia per a l’edició web
P à g i n a 19 | 62
A continuació s’obrirà un diàleg on afegir els sites amb els que volem compartir l’asset. Un cop
seleccionats, farem clic a Guardar.
Previsualització
Recordeu que cal previsualitzar tots els canvis a l’entorn de proves WEBEDIT abans de publicar
res, així ens evitem ensurts innecessaris. No publiqueu cap asset si a WEBEDIT no es veu
correctament.
Per previsualitzar cal anar a l’asset de tipus pàgina que volem previsualitzar i clicar al botó de
“Vista prèvia”: Apareix una pàgina amb menú esquerre que ens mostra la pàgina però
sempre recomanem clicar l’opció VISTA PREVIA EN PANTALLA COMPLETA al menú superior,
com es veu a la imatge següent:
Guia per a l’edició web
P à g i n a 20 | 62
O bé mirar la pàgina al web públic i canviar “www” per “webedit” a la URL (això només es pot
fer en el cas que ja s’hagi publicat anteriorment la pàgina).
Cal tenir en compte que les URL de previsualització a webedit només es poden veure des d’un
ordinador connectat a la xarxa informàtica de la UAB. Des de fora, no estarà disponible perquè
el servidor és intern. Per això sempre cal de crear enllaços que vagin cap a la web publicada i
mai cap a una URL a webedit.
Els tipus d’asset Els continguts que es publiquen a la pàgina web s’anomenen “assets”. Tenim assets de molts
tipus: Asset text, asset imatge, asset document, asset enllaç…
Per organitzar i identificar correctament els objectes de la web és important utilitzar una
nomenclatura determinada, us resumim els prefixes que utilitzem per cada tipus d’asset:
IMG_ per començar un nom d’un asset imatge.
EN_ per començar un nom d’un asset enllaç.
DOC_ per començar un nom d’un asset document.
181201_ la data del dia per començar un nom d’un asset notícia (el format és
any/mes/dia).
TG_ per començar un nom d’un asset text genèric.
COL_ per començar un nom d’un asset col·lecció.
Recomanem NO es pot utilitzar accents, ñ, l·l, ç, signes de puntuació, ni espais en blanc.
S’admeten els guions i les majúscules (és recomanable perquè ajuda a llegir millor el nom de
l’asset).
Exemples vàlids:
Guia per a l’edició web
P à g i n a 21 | 62
AntropologiaSocialCultural
Antropologia_Social_Cultural
Antropologia-Social-Cultural
Exemples incorrectes:
AntropologíaSocial
Antropologia Social Cultural
Antropologia.Social
A continuació s’expliquen les característiques de cada tipus d’asset.
Asset document
A la pàgina web hi podem pujar fitxers de tipus PDF (el més habitual), o bé Word, Powerpoint…
I fins i tot un fitxer ZIP pels casos especials i formats diferents. La recomanació és pujar els
documents en format PDF preferentment, perquè s’obri en el navegador directament. En
canvi, els altres formats obliguen a l’usuari a descarregar el fitxer i és poc pràctic. En el cas dels
dispositius mòbils, el problema és encara pitjor. Alguns podran obrir PDF i alguns no. I encara
que puguin, probablement els farem gastar dades mòbils per descarregar el fitxer. Així doncs,
pensant en que tothom es connecta cada cop més amb dispositius mòbil, sempre que es pugui
posar la informació directament en el text HTML, serà molt millor que posar-la en un PDF.
I com es poden pujar fitxers a la web? Es fa sempre amb l’asset “DOCUMENT”:
Al menú superior, cal fer CONTENIDO > NUEVO > DOCUMENT. Apareixerà aquest formulari per
omplir:
Guia per a l’edició web
P à g i n a 22 | 62
Seguint la nomenclatura del web de la UAB el camp nom ha de començar amb DOC_. I cal
vigilar que no contingui cap caràcter especial ni espai. En canvi, en el camp “Nom del
document” cal que introduim el text que voldrem que es visualitzi a la pàgina web.
L’asset Document conté un camp obligatori anomenat “Part final de la Url del document”.
Aquest camp cal completar-lo amb un text que correspondrà a la part final de la URL que
servirà per veure el document. Aquest text, no ha de tenir caràcters estranys ni espais (només
lletres, números i guions), ha de ser descriptiu, i ha de ser únic entre tots els documents. (Per a
més informació consultar El Blog dels editors web o bé accedir directament a l’adreça
http://blogs.uab.cat/editorsweb/2013/01/11/url-dels-documents/).
Nom de l’objecte / Asset: DOC_NomDocument
Nom del document: el que es veurà en el web
Nom per a la URL que identificarà al document
Format del document: Word, PDF, Excel, Power Point
Arxiu del document. Feu Examinar per
localitzar l’arxiu al vostre ordinador
Guia per a l’edició web
P à g i n a 23 | 62
Quan pugem el fitxer al camp Document, cal vigilar que el nom del fitxer no contingui caràcters
especials ni espais.
La resta de camps, són camps opcionals i informatius que permeten completar la informació
de l’objecte. Un cop informats els camps fer clic al botó Guardar.
Els camps amb (es) i (en) s’hauran d’omplir si la web està traduïda al castellà i l’anglès.
Els camps Editor del document, Data del document i Resum del document, no cal omplir-los.
El document que heu de publicar conté alguna dada personal? Aleshores consulteu l’apartat
Protecció de dades personals, d’aquesta guia.
Asset imatge
La pàgina web té moltes imatges (acompanyant notícies, baners, acompanyament de textos…).
Cal tenir en compte que la imatge s’ha de pujar al gestor de continguts amb la mida que
correspongui.
Encara que la pàgina reescali la imatge, no s’ha de pujar en mida superior a la recomanada
perquè aleshores es tardarà massa a carregar la pàgina (penalitzem el rendiment del web).
Així doncs, cal retallar la imatge abans de pujar-la a Oracle. Al blog us donem alguns consells:
http://blogs.uab.cat/editorsweb/2017/04/28/millora-la-teva-imatge/
http://blogs.uab.cat/editorsweb/2016/10/26/programes-dedicio-dimatges/
Per pujar imatges al web cal anar al menú superior i fer CONTENIDO > NUEVO > IMATGE. I cal
omplir els camps següents:
Nombre: Sense caràcters especials ni espais. Per seguir la nomenclatura del web de la UAB ha
de començar per IMG_.
Texte ALT: Text alternatiu de la imatge. S’ha d’escriure una petita descripció del que mostra la
imatge pensant en els usuaris amb problemes de vista. És un camp obligatori, per poder tenir
un web accessible (veure capítol ACCESSIBILITAT d’aquest manual).
Thumbnail: Imatge petita (només utilitzat en imatges)
Imatge: Pujar el fitxer de la imatge. El fitxer no pot tenir caràcters especials ni espais ni
accents. Accepta els tipus: JPEG, PNG, GIF.
Els camps thumbnail i imatge en versió catalana, castellana i anglesa no s’utilitzen
normalment, només en el cas dels baners, perquè la imatge té un text que es tradueix.
Guardeu l’asset imatge i ja el podeu utilitzar al web.
Guia per a l’edició web
P à g i n a 24 | 62
En el cas de les notícies, les mides d’imatge utilitzades actualment són:
THUMBNAIL: Amplada 230 px - Altura 129 px
IMATGE: Amplada 480 px – Altura 270 px
Asset enllaç
Òbviament, en una pàgina web hi ha un gran nombre d’enllaços cap als diferents apartats de la
pròpia web i cap a webs externes. A continuació s’explica els detalls de l’asset que permet
afegir enllaços al web. Per crear-ne un de nou, anem al menú superior i cliquem CONTENIDO >
NUEVO > ENLLAÇ. Hi ha tres definicions d’enllaç, cal triar-ne una.
En els tres casos, seguint la nomenclatura del web UAB, el nom de l’asset ha de començar per
EN_.
A continuació, s’explica per a què serveix cada tipus:
ENLLAÇ DOCUMENT:
Ens demana que associem un asset document (que haurem creat prèviament i el tindrem a
punt en el panell esquerre, per poder-lo arrossegar cap al camp “Document”).
ENLLAÇ EXTERN:
Aquest tipus d’asset enllaç permet fer un enllaç cap a qualsevol URL (una pàgina web qualsevol
o un document utilitzant la URL curta del document).
Recordatori: No es poden posar mai enllaços a adreces de webedit, perquè és un servidor
intern, només es poden visualitzar les adreces des de la xarxa informàtica de la UAB. Des de
fora el campus no es podria accedir a les pàgines i serien com enllaços trencats.
ENLLAÇ INTERN:
Només es pot utilitzar per fer un enllaç cap a una pàgina del propi web on treballem. Ens
demana que associem un asset pàgina (alguna pàgina que tingueu en el “plan del sitio”)
arrossegant-la cap al camp corresponent a l’Enllaç intern.
Exemple d’asset enllaç extern:
Guia per a l’edició web
P à g i n a 25 | 62
El títol de l’enllaç ha de ser descriptiu i ha de correspondre amb el contingut amb el qual
enllaça. L’ús de títols descriptius ajuda al posicionament de la pàgina en els cercadors donat
que els motors de cerca veuran que fem enllaços cap a informació rellevant i coherent amb el
contingut de la pàgina. Cal evitar l’ús de les formes “clica aquí” o “veure més”.
Asset text genèric
Aquest asset és el que normalment editem per poder actualitzar el contingut de les pàgines.
Per crear-ne un de nou, anem al menú superior i cliquem: CONTENIDO > NUEVO > TEXT
GENÈRIC.
Seguint la nomenclatura del web UAB, el nom de l’asset hauria de començar amb TG_.
Aquest asset té molt pocs camps: Bàsicament un camp “Nom” que seria com un títol del text i
un altres camp “Text” que normalment és el que té tot el contingut. És un camp que té una
barra d’edició de text que permet donar format al text sense necessitat de saber llenguatge
HTML:
Guia per a l’edició web
P à g i n a 26 | 62
BOTONS D’EDICIÓ DE TEXT (Barra CKEDITOR):
Molts d’aquests botons són semblants als que podeu trobar en altres programes d’edició de
text però hi ha algunes incorporacions interessants:
Selecciona tot el contingut del camp. És especialment útil quan tenim molta
informació.
Neteja el format. Combina molt bé amb el botó anterior. Molt recomanable en el cas
dels textos que han crescut molt i on s’ha fet moltes vegades “copia i enganxa”. Quan això
passa acostuma a arrossegar-se més codi font del desitjat. El seu gran avantatge és que no
esborra els enllaços.
Marcarà el paràgraf seleccionat com a cita. És tendència el bon etiquetatge html que
ajuda als usuaris que han de navegar amb lectors de pantalla i als cercadors. Un html enriquit
és un html de qualitat.
Guia per a l’edició web
P à g i n a 27 | 62
Indicació excepcional d’idioma. Us ha passat que esteu redactant el text en un
idioma i heu de posar unes paraules en un idioma diferent? Doncs a partir d’ara el que heu de
fer és seleccionar aquelles paraules i mitjançant aquest botó indiqueu l’idioma al qual
pertanyen. Els idiomes que hem predefinit són català, castellà, anglès i xinès però si teniu
alguna petició especial, som tot orelles!
L’etiquetatge html al poder! Heu de marcar títols dins del vostre
text? Deixeu-vos de negretes, cursives o -pitjor- subratllats. El futur és fer un bon marcatge
html.
Comprovar l’ortografia. Malauradament, de moment només es pot fer servir per
revisar textos en espanyol i en anglès. Si cliqueu a la fletxeta, heu de prémer l’opció “Habilitat
l’SCAYT”. Què vol dir SCAYT? Spell Check As You Type, és a dir, revisió de l’ortografia a mida
que teclegem. Una vegada tinguem habilitada aquesta opció, caldrà clicar de nou per indicar
l’idioma.
Se us queda petit el requadre de l’editor de text? Premeu aquest botó i editeu a
pantalla completa.
Els clàssics
La resta de botons ens ofereixen un munt de possibilitats de les quals encara potser no éreu
conscients:
Veure l’html que està generant el nostre text. Si teniu un
contingut breu però un html molt extens, atenció, podria haver-hi un problema de codi
innecessari. Veieu que hi ha indicacions de tipus de lletra? Toca fer servir el botó de neteja de
codi perquè nosaltres com a editors mai hem de definir ni la font, ni el color ni la mida.
Guia per a l’edició web
P à g i n a 28 | 62
Necessiten presentació? Tallar, Copiar, Enganxar com a Text pla i
Enganxar des de Word. Si us trobeu que per enganxar el navegador us diu que feu servir una
combinació de tecles, confieu en ell.
Desfer i Refer, perquè tots podem equivocar-nos i corregir és de savis.
Cercar i Reemplaçar. Ens pot servir per navegar a través de textos llargs o si
hem vist que hem comés la mateixa falta d’ortografia diverses vegades.
Negreta i Cursiva.
Marcarem en negreta les paraules clau que vulguem ressaltar. La negreta pot facilitar la
lectura als usuaris i podem adreçar la seva mirada als punts que ens interessin. Així mateix, es
recomana posar en negreta les paraules clau per les quals ens vulguem posicionar en els
cercadors. Ara bé, cal vigilar de no abusar d’aquest perquè llavors perd el seu significat.
Emprarem la cursiva en: locucions llatines no catalanitzades, neologismes, noms científics
d’espècies animals i vegetals i de malalties que s’escriuen en llatí, noms propis de fenòmens
meteorològics, títols de llibres, obres de teatre, peces i obres musicals, pel·lícules i espectacles.
Superíndex i Subíndex.
Copiar format.
Llista numerada i Llista sense numerar. Sempre que tinguem un llistat,
intentem fer servir un d’aquests botons perquè això permet una certa anticipació pels lectors
de pantalla.
Inserir i treure enllaç. Podeu veure consells a:
http://blogs.uab.cat/editorsweb/2018/12/21/bones-practiques-per-inserir-enllacos-dins-dun-
text-generic/
Inserir / editar àncora. Les àncores són enllaços cap a d’altres parts d’un mateix text.
Guia per a l’edició web
P à g i n a 29 | 62
Inserir imatge. Pots repassar el seu funcionament a l’entrada: “Inserir més d’una
imatge en un text genèric o en un lloc específic del text”.
Inserir taula.
Inserir caràcters especials. Si cliqueu a aquest botó apareix un ample ventall de
possibilitats:
Han passat de moda
Les persones usuàries més intrèpides haureu observat que falten alguns botons típics dels
programes d’edició de text. Són els botons de justificar o centrar el text, modificar el tipus de
lletra o el seu color. Aquests botons no són necessaris perquè interfereixen en el full d’estils de
la pàgina web de la Universitat i pitjor, poden afectar el seu nivell
d’accessibilitat. L’Accessibilitat és el futur i aviat en parlarem llarg i extens.
Guia per a l’edició web
P à g i n a 30 | 62
Sempre és útil recordar
Si voleu fer un salt de línia simple només cal que premeu la tecla Intro. Si voleu fer un salt de
paràgraf, heu d’apretar a la vegada Intro + Majúscula (si us plau, eviteu fer dos intros).
Asset col·lecció
Una col·lecció és un conjunt d’objectes del mateix tipus agrupats i ordenats per l’usuari.
Per seguir la nomenclatura del web de la UAB, el nom de l’asset ha de començar per COL_.
Al crear una col·lecció es defineix quin tipus d’asset contindrà, es poden fer col·leccions de
notícies, d’enllaços, de documents, etc. I s’escull una “query” que és la que determina com
buscarà els assets quan en volem afegir. Per exemple, les queries que tenen un nom acabat
amb “LastWeek” només mostren els assets de la última setmana quan generem la col·lecció i
això permet trobar molt més ràpidament els assets que volem afegir.
Quan la col·lecció està creada, el que es fa és “CREAR” per afegir o treure assets de dins la
col·lecció. O per canviar-ne l’ordre. Aquesta opció està al costat del nom de l’asset col·lecció:
Aleshores, apareix una llista del que ja conté la col·lecció i la query ens mostra els assets que hi
podem afegir. Escrivint un número al costat de l’asset podem determinar quins assets hi
apareixen i en quin ordre. O eliminar-los de la col·lecció.
Una vegada generada la llista premeu el botó “Guardar cambios” que hi ha al final de la
pàgina.
Si els llistats que us surten són molt llargs recordeu que podeu fer servir la drecera de teclat:
Control + Fin i així anireu ràpidament a sota de tot de la pàgina.
Guia per a l’edició web
P à g i n a 31 | 62
Asset notícia
Per crear una nova notícia anem al menú superior i cliquem CONTENIDO > NUEVO > Notícia >
Notícia web. Si ens fa escollir una definició, triarem “NoticiaWeb” que és la que s’utilitza
normalment per redactar notícies noves.
L’asset notícia té com a camps obligatoris:
Categoria: Escolliu una o vàries categories que corresponguin amb el que explicareu en la
notícia. Aquest camp serveix per al sistema per mostrar notícies relacionades en la columna de
Notícies relacionades en el detall de notícia:
Títol: l títol que apareix a la portada i al detall de la notícia. Ha de ser entenedor i curt.
Entradeta de portada: Text curt que apareix a la portada, sota el títol, per fer una introducció,
no hauria de superar els 200 caràcters.
Entradeta: Text curt que apareix a la pàgina de detall de la notícia, sota el títol, per fer una
introducció, no hauria de superar els 200 caràcters.
Cos de la notícia: Text més llarg amb tota l’explicació de la notícia. Per saber tots els detalls de
la barra d’edició de text CKEDITOR podeu consultar el blog:
http://blogs.uab.cat/editorsweb/2019/04/12/el-nou-editor-de-text-i-el-seu-potencial/
Imatge: Associar la imatge que acompanyarà la notícia. Mides recomanades:
- Thumbnail: 230x129px
- Imatge: 480x270px
Guia per a l’edició web
P à g i n a 32 | 62
Vídeo: Indicar el codi PUMUKIT del vídeo que acompanyarà la notícia. Els vídeos no es
publiquen a través del gestor de continguts web, sinó que el repositori de vídeos institucionals
de la UAB s’anomena PUMUKIT. Per a més informació sobre aquesta altra plataforma podeu
consultar al vostre SID (Servei d’Informàtica Distribuida).
Data de la notícia: Data que apareixerà al web.
Data d’inici de la notícia: Data actual, no cal modificar-la.
Data fi de notícia: Important canviar-la per una data en el futur, la que considerem que ja
estarà caducada la notícia i així no apareixerà automàticament en els llistats de notícies
relacionades.
Un cop redactada la notícia, es pot afegir a la col·lecció de notícies de la portada (La col·lecció
està associada a l’asset Pàgina de portada).
És molt important que abans d’escriure una notícia llegiu les RECOMANACIONS PER REDACTAR
TEXTOS PEL WEB per seguir les recomanacions d’estil de la UAB:
http://www.uab.cat/web/coneix-la-uab-cei/itineraris/identitat-i-imatge-corporativa/redaccio-
de-noticies-i-textos-pel-web-1345708348239.html
En cas que trobeu una notícia en un altre site, la podeu mostrar a la vostra portada sense
necessitat de demanar que us la comparteixin. Simplement, podeu crear una notícia amb la
definició NOTÍCIA IMPORTADA. Només us demanarà que poseu un nom a l’asset i que
enganxeu el codi ID de la notícia que voleu importar. Aquest ID és simplement el número que
hi ha a la URL del detall de la notícia, just després de “noticiaid=”. Com sempre, ho teniu
explicat en detall al blog:
http://blogs.uab.cat/editorsweb/2017/07/07/totes-les-noticies-a-labast-de-tothom/
Asset agenda
L’asset agenda és molt senzill, no necessita associar-li imatges ni tampoc s’ha d’afegir a cap
col·lecció. Apareix a la caixa de la portada quan s’acosta la data de realització de
l’esdeveniment.
Entreu a Oracle Webcenter Sites i cliqueu CONTENIDO > NUEVO > Activitat.
Cal omplir els camps obligatoris (asterisc vermell).
Tingueu en compte que en el camp DESCRIPCIÓ es pot explicar molt bé l’activitat sense
necessitat de més camps.
Guia per a l’edició web
P à g i n a 33 | 62
Asset pàgina i plantilles de visualització
Aquest asset és la base de la navegació pel lloc web. Els camps importants que cal conèixer de
l’asset pàgina són:
METADATOS > DESCRIPCIÓN: Aquest camp és el títol de la pàgina que apareix en la web. Es
mostra en el menú de l’esquerra, en el títol de la part central i com a <h1> en l’html i per tant
ha de ser prou rellevant per al bon posicionament SEO de la pàgina.
METADATOS > CATEGORIA: Les categories s’utilitzen per canviar la manera en que es mostra la
pàgina en el menú esquerre. Les categories més utilitzades són:
- Section front: És la senzilla. Per mostrar la pàgina al menú esquerre i per mostrar el
contingut a la part central quan es clica.
- Títol menú esquerre: És una pàgina que serveix com a separador de zones del menú
esquerre, no té contingut. Exemple:
- Deshabilitat: Si es selecciona aquesta categoria la pàgina no es mostra en el menú
esquerre encara que estigui col·locada a l’arbre.
TEXT GENÈRIC: Associació on hi afegim el text genèric que s’hagi de mostrar a la pàgina.
SITEENTRY NIVELL 1: Associació on hi afegim el siteentry de la pàgina, que serveix per controlar
com es mostraran els elements en la pàgina.
ENLLAÇ CAPÇALERA: Associació on hi afegim un asset enllaç per controlar la capçalera. El text
de l’enllaç es mostra en el globus de l’esquerra (camp NOM i camp DESCRIPCIÓ) i la imatge
associada mostra la imatge. Mides recomanades: 870x150px. Al clicar la imatge es va a la URL
Guia per a l’edició web
P à g i n a 34 | 62
de l’enllaç, per tant, cal posar “#” per quedar-se a la mateixa pàgina, si la imatge és només
decorativa. Exemple de capçalera:
MENÚ DRETA WEB: En aquesta associació s’hi pot posar el menú dreta. La pàgina “hereda” el
menú dreta de la pàgina superior si no en té cap associat. Es pot forçar que no hi hagi menú
dreta si s’associa un menú dreta sense contingut, i d’aquesta manera el contingut central
ocupa tot l’ample. Més endavant d’aquest document s’expliquen els elements que poden anar
al menú dreta.
Com es construeixen els arbres de pàgines?
Si anem a l’apartat de l’esquerra del ÁRBOL DEL SITIO hi veurem una llista de pàgines que ja
estan col·locades com a filles de la portada. Podem arrossegar la pàgina per moure-la de lloc,
per si volem canviar l’ordre o treure alguna pàgina que actualment és pàgina filla. Aquesta
operació s’ha de fer amb compte i previsualitzar els canvis abans d’aprovar, per comprovar
que hem col·locat la pàgina en el nivell de jerarquia correcta.
Més avall hi ha l’apartat de pàgines no col·locades:
A sota es mostren totes les pàgines que no estan col·locades a l’arbre per si les volem afegir
com a pàgina filla. Quan creem una pàgina nova, quedarà en aquesta llista, que està ordenada
alfabèticament pel nom de l’asset. Per afegir-la, l’hem d’arrossegar cap al punt de l’arbre on
necessitem col·locar-la. Si volem despenjar una pàgina de l’arbre, la podem arrossegar cap a la
carpeta de pàgines no col·locades.
Recomanem que la carpeta de pàgines no col·locades estigui buida. Això ho aconseguiu
simplement eliminant manualment aquestes pàgines si sabeu que no s’han d’utilitzar.
Probablement hi trobareu pàgines antigues que algú es va oblidar d’eliminar i van quedar en
aquesta carpeta.
Guia per a l’edició web
P à g i n a 35 | 62
Variants de contingut central a les pàgines
Els assets de tipus “Siteentry” no s’editen, són assets que es poden associar a les pàgines per
controlar quina visualització tindrà la zona central de la pàgina. Quan es visualitza una pàgina
es poden aconseguir diverses visualitzacions que s’expliquen a continuació:
La pàgina interior típica que només conté un text genèric s’ha de configurar de la següent
manera:
- Subtipus: Interior web
- Template: TemplatePageInteriorWEB_FacultatsUAB2015_RWD
- Siteentry nivell 1: SiteEntryTextGenericPestanyesWEB_RWD
- I es visualitza així:
- Pàgina interior amb TG i TG’s desplegables:
SiteEntryContingutCentralVariableTGDesplegable_RWD. S’associen els TG dels
desplegables a l’associació de la pàgina “Assets de contingut central”. És important
que aquests textos genèrics tinguin el camp “NOM” omplert perquè serà el text que es
mostrarà en el desplegable abans de clicar. Si es vol fer un text introductori, s’associa
un text genèric a l’associació típica “Text genèric”.
Guia per a l’edició web
P à g i n a 36 | 62
- La pàgina amb capsetes petites al mig, que cada caixa és un TG
(TemplatePageInteriorWEB_FacultatsUAB2015_RWD). S’associen els TG de les caixes a
l’associació de la pàgina “Assets de contingut central”. Si es vol fer un text introductori,
s’associa un text genèric a l’associació típica “Text genèric”.
- Per mostrar un llistat d’avisos del site: Siteentry nivell 1: SiteEntryLlistatAvisos_RWD
Guia per a l’edició web
P à g i n a 37 | 62
- Pàgina de galeria d’imatges: Siteentry nivell 1:
SiteEntryContingutCentralVariableTGCarruselImg_RWD
- Pàgina de xifres: SiteEntryContingutCentralVariableTGXifres_RWD
S’associen assets de tipus “xifra” a la pàgina amb una col·lecció i així es visualitzen de
la següent manera:
Guia per a l’edició web
P à g i n a 38 | 62
- Pàgina interior amb Serveis: Subtipus de pàgina: Serveis, i plantilla:
TemplatePageInteriorWEB_FacultatsUAB2015_RWD (3 columnes)
SiteEntryDisplayServeisContingutCentral4Columns_RWD (4 columnes)
S’associen els assets de tipus Servei a la pàgina directament.
- Pàgina Serveis (SiteEntryDisplayContingutCentralServeis_RWD)
Guia per a l’edició web
P à g i n a 39 | 62
Asset menú dreta i plantilles d’asset
Al menú dreta s’hi poden afegir assets de molts tipus: Enllaços, col·leccions…
S’associa de forma fàcil:
- A la zona esquerra tenim l’asset que volem afegir, en el HISTORIAL o MARCADORES.
- Cliqueu EDITAR a l’asset menú dreta.
- Arrossegueu l’asset que voleu associar al camp (Sistema Drag&Drop).
- Es pot arrossegar l’asset per reordenar els elements del menú de la dreta.
- Guardeu l’asset menú dreta.
La template es pot escollir en el menú desplegable de l’asset que s’assocïi al menú dreta. Les
plantilles que es poden utilitzar per als assets que col·loqueu al menú dreta i també s’utilitzen
en portades i semiportades són els que es mostren a continuació:
COL·LECCIÓ D’ENLLAÇOS:
TemplateSlotColleccioEnllacosCortina_RWD: Mida imatge recomanada: 500x500px. Cal anar
en compte: Previsualitzeu bé la caixa abans de publicar, el text ha de ser curt perquè si ocupa
massa espai no apareix el botó de LLEGIR MÉS.
Guia per a l’edició web
P à g i n a 40 | 62
GALERIA IMATGES (TemplateSlotGranCarruselImatges_RWD): Mira imatge recomanada:
720x407px.
El camp “Nom de l’enllaç” es pot mostrar damunt la foto. Es pot controlar si apareix el text
damunt cada foto:
- Si es marca “Sí” al camp Enllaç privat, no es veu el text (però segueix apareixent al codi
HTML sempre).
- Si es marca “No” al camp Enllaç privat, el text del camp Nom de l’enllaç es pot
visualitzar damunt la imatge.
TemplateSlotCollectionLlistatDestacats_RWD:
Títol amb fons gris: Es gestionarà amb l’enllaç associat a la col·lecció sota l’associació “Enllaç de
títol de la col·lecció”, on el text correspondrà al camp “Nom de l’enllaç” en l’idioma correcte. Si
no existeix el títol, no es mostrarà.
TemplateSlotCollectionEnllacosInteractius_RWD (aquesta necessita certa amplada i no hi cap
en un menú dreta, per això només s’utilitza en portades i semiportades):
Guia per a l’edició web
P à g i n a 41 | 62
Si la portada té una col·lecció d’avisos associada, aleshores aquesta caixa canvia el
comportament: Mostra el primer dels avisos de la col·lecció i la resta de pestanyes només es
comporten com enllaços.
- TemplateCollectionMenuDretaDestacats_RWD
Títol: Es gestionarà amb l’enllaç associat a la col·lecció sota l’associació “Enllaç de títol de la
col·lecció”, on el text correspondrà al camp “Nom de l’enllaç” en l’idioma correcte. Si no
existeix el títol, no es mostrarà.
Enllaços: per a cada asset enllaç dels que hi ha a la col·lecció es mostrarà un enllaç al bloc, en
l’ordre en què consten a la col·lecció (el primer de la col·lecció a dalt, el darrer a baix). El text
de cada element correspondrà al camp “Nom de l’enllaç” en l’idioma correcte. L’atribut “title”
correspondrà al camp “Descripció de l’enllaç” (si el camp es buit no es mostrarà aquest
atribut). En cas que l’enllaç sigui intern, l’enllaç s’obrirà en la mateixa finestra, en cas que sigui
Extern o a Document en finestra nova.
ASSET ENLLAÇ:
TemplateSlotBannerImatgeAmbText_RWD:
Si no es posa text al camp DESCRIPCIÓ de l’enllaç, serveix com a bàner normal.
TemplateSlotEnllacTextMesImatge_RWD:
Guia per a l’edició web
P à g i n a 42 | 62
TemplateSlotEnllacTextMesImatgeBlack_RWD:
TemplateSlotEnllacTextMesIcona_RWD:
TemplateSlotCaixaGranEnllacosDestacats_RWD:
TemplateSlotEnllacBottomColorAmbText_RWD:
TemplateSlotBannerImatgeAmbTextEsquerra_RWD:
TemplateSlotBannerPetitCaixaText_RWD: El nom de l’enllaç es mostra damunt la imatge, cal
anar amb compte perquè hi hagi prou contrast i es llegeixi bé el text.
TWITTER (Enllaç amb template TemplateSlotBlocTweets_RWD):
Es configura com un enllaç, indicant la URL del compte de twitter en la URL de l’enllaç. Es limita
el nombre de tweets amb el camp “Descripció (ca)/(es)/(en)” de l’asset.
Guia per a l’edició web
P à g i n a 43 | 62
- TemplateLinkMenuDretaImatgeText_RWD
El títol del bloc correspondrà al camp “Nom de l’enllaç” en l’idioma correcte.
La imatge correspondrà al camp Imatge de l’asset imatge present en el camp “Imatge
relacionada” de l’enllaç. En cas que no hi hagi imatge en aquest camp, no es mostrarà la
imatge.
El text correspondrà al camp “descripció de l’enllaç”. En cas que no hi hagi contingut en aquest
camp, no es mostrarà cap text.
- TemplateMenuDretaBanner_RWD
Guia per a l’edició web
P à g i n a 44 | 62
La imatge correspondrà al camp Imatge de l’asset imatge present en el camp “Imatge
relacionada” de l’enllaç. En cas que no hi hagi imatge en aquest camp, no es mostrarà la
imatge.
La imatge serà clicable i portarà on estigui definit el asset Enllaç que la com imatge associada.
En cas que l’enllaç sigui intern, l’enllaç s’obrirà en la mateixa finestra, en cas que sigui Extern o
a Document en finestra nova.
- TemplateLinkMenuDretaImgDescripcioBlanc_RWD
Els diferents elements del bloc són:
Títol: El títol del bloc correspondrà al camp “Nom de l’enllaç” en l’idioma correcte.
Text: El text correspondrà al camp “descripció de l’enllaç”. En cas que no hi hagi contingut en
aquest camp, no es mostrarà cap text.
Enllaç inferior dreta amb símbol +: es gestionarà amb l’asset enllaç. En cas que l’enllaç sigui
intern, l’enllaç s’obrirà en la mateixa finestra, en cas que sigui Extern o a Document en finestra
nova.
Imatge: correspondrà al camp Imatge de l’asset imatge present en el camp “Imatge
relacionada” de l’enllaç. En cas que no hi hagi enllaç, no es mostrarà la imatge.
ASSET TEXT GENÈRIC:
TemplateSlotNavegacioTG_RWD:
TemplateSlotContingutTG_RWD:
Guia per a l’edició web
P à g i n a 45 | 62
TemplateSlotBannerTGSimple_RWD:
ASSET UABIDIOMESSDL:
Es pot afegir un element d’aquest tipus en un slot aplicant la template
TemplateSlotBlocUABIdiomesSdl_RWD a un asset UABIdiomesSDL. Malgrat el nom, aquest
asset es pot utilitzar en qualsevol site no relacionat amb el Servei de Llengües:
COL·LECCIÓ DE TEXT GENÈRIC:
TemplateSlotColleccioTGCarrusel_RWD (Poden ser TG amb vídeo o sense). Mides
recomanades: 480x270px.
TemplateSlotColleccioTGAmbEnllacosVertical_RWD. Mides imatge recomanades: 230x129px.
Guia per a l’edició web
P à g i n a 46 | 62
- TemplateCollectionMenuDretaCarruselTG_RWD
Aquesta caixa es composa d’una col·lecció de Textos genèrics, que ens permetran ficar-hi una
imatge/vídeo gran central y un text amb format just a sota.
- TemplateServeisMenuDreta_RWD
Guia per a l’edició web
P à g i n a 47 | 62
En aquest cas, s’ha de posar la template a l’asset “Servei” i associar-ho al MD.
ASSET INFORMACIÓ MENÚ DRETA:
- TemplateContactaExtesMenuDreta_RWD. Serveix per mostrar un asset tipus
Informació menú dreta, que és un asset que sempre hem utilitzat per mostrar la
informació de contacte:
COL·LECCIÓ DE XIFRES:
TemplateSlotColleccioXifresConeix_RWD: Mida recomanada icona: 250x250px.
COL·LECCIÓ DE NOTÍCIES:
TemplateSlotColleccioNoticiesBloc_RWD (Només portades i semiportades)
Guia per a l’edició web
P à g i n a 48 | 62
TemplateSlotColleccioNoticiesVertical_RWD:
COL·LECCIÓ D’ACTIVITATS D’AGENDA:
TemplateSlotAgendaGranSupercategoria_RWD: Es genera un cop la col·lecció quan es vulgui
filtrar per una “supercategoria d’agenda”. Si no es posa cap supercategoria mostrarà totes les
activitats del site.
Guia per a l’edició web
P à g i n a 49 | 62
COL·LECCIÓ D’AVISOS:
Col·lecció d’assets Avís amb la TemplateSlotSemiColleccioAvisos_RWD:
TÍTOL PER SEPARAR SECCIONS (Asset “Multillenguatge”)
- TemplateSlotMultillenguatgeSectionTitelColor_RWD:
Assets especials
Els assets que controlen la informació de les fitxes de grau i màster oficial estan detallats en
aquesta entrada del blog:
- Assets fitxa grau http://blogs.uab.cat/editorsweb/2017/02/03/actualitzacio-de-la-
fitxa-dels-graus/
- Assets fitxa màster oficial http://blogs.uab.cat/editorsweb/2017/01/20/actualitzacio-
de-les-fitxes-dels-masters-oficials/
Guia per a l’edició web
P à g i n a 50 | 62
PUBLICACIÓ DELS CANVIS Un cop heu acabat d’actualitzar els continguts del web, cal previsualitzar sempre a l’entorn de
webedit i clicar tots els enllaços que hem afegit per comprovar que tot funciona correctament.
A continuació, s’han d’aprovar els assets que s’han modificat, clicant al botó: i
seleccionant la cua de publicació que correspon al site. El sistema ens demanarà confirmació a
la següent pantalla. Aconsellem triar l’opció “Aprobar con dependencias” per si hi ha algun
asset relacionat que també cal publicar alhora:
Tots els assets que aproveu no es veuen immediatament al web públic sinó que aniran a la
“cua de publicació”. Quan un asset està a la cua de publicació es publica al cap d’una estona.
Hi ha un horari de publicació programat per a cada cua de publicació i es pot consultar l’horari
en aquest enllaç per saber quan apareixeran publicats al web públic els canvis que hagueu fet:
http://blogs.uab.cat/editorsweb/2017/11/23/horari-de-publicacio/
Finalment, passada la hora de publicació, cal revisar que tot s’hagi publicat correctament.
Tingueu en compte que si editeu un asset que ja havíeu aprovat per publicar, l’asset sortirà de
la cua de publicació. I al guardar-lo l’haureu de tornar a aprovar si el voleu tornar a publicar.
Recordeu també que per comparar la versió de proves i la versió publicada només cal
substituir “www” per “webedit” a l’adreça del navegador.
Llibre d’estil i identitat corporativa L’apartat Manual d’identitat i imatge corporativa conté els logotips de la UAB, totes les
variants disponibles que estan permeses actualment:
Guia per a l’edició web
P à g i n a 51 | 62
http://www.uab.cat/web/coneix-la-uab-cei/itineraris/identitat-i-imatge-corporativa-
1345708314458.html
Cal utilitzar sempre aquests logotips en tots els documents oficials, ja siguin a la pàgina web o
en paper.
En el web del Manual d’identitat i imatge corporativa també hi trobareu plantilles de
presentacions, signatura institucional del correu electrònic, indicacions per gestionar perfils
institucionals a les xarxes socials, imatges de fons de pantalla, i altres models.
Redacció de notícies i textos pel web És molt important seguir els següents consells quan heu de redactar algun contingut pel web.
Tingueu en compte que els usuaris utilitzen cada cop més els dispositius mòbils per consultar
la informació del web i per tant és important donar-los una informació concisa i evitar textos
massa llargs.
Abans de començar a redactar
Cal fer-se 3 qüestions: Què vull explicar? A quin públic s'adreça? Què vull aconseguir?.
La redacció del vostre text s'haurà d'adaptar al missatge que es vol transmetre. No és el mateix
redactar una agenda, una notícia sobre un descobriment científic o un avís acadèmic. La
finalitat i el públic en els tres casos és diferent i per tant, l'estil de redacció també ho haurà de
ser.
Textos curts
Retalleu el text tot el que pugueu. Els grans blocs de text espanten a l'usuari i no els llegirà. A
títol orientatiu, redueix un 50% la longitud del text que teniu en paper.
Una idea per paràgraf
Cal estructurar la informació de manera sintètica i el més entenedora possible. La informació
més important sempre s'ha d'explicar al primer paràgraf. Si es tracta d'una estructura
complexa val la pena fer-se un "croquis" per tal d'ordenar correctament els continguts en
ordre d'importància.
Cada paràgraf ha de desenvolupar només una idea. Cal evitar les divagacions. Si un text és
breu i està ben organitzat visualment, l'usuari obté més informació en un cop d'ull.
En el web de la UAB no justifiquem els paràgrafs, només els alineem a l’esquerra. Aquesta
norma d’estil té una explicació: Si justifiquéssim el text, s’allargarien visualment els textos i en
dificultaria la lectura.
Estil directe
Les oracions han de seguir el seu ordre lògic: subjecte, verb i complements. Alterar aquesta
Guia per a l’edició web
P à g i n a 52 | 62
estructura o fer un ús abusiu de la passiva afegeix complexitat i pot dificultar la comprensió.
Eviteu també l'ús de les negacions.
Així mateix, cal respectar sempre els mateixos criteris estilístics que haguem establert (per
exemple, adreçar-nos als usuaris en la segona persona del plural). Si no ho fem podem acabar
marejant als usuaris.
Llenguatge senzill
Els usuaris no sempre estan familiaritzats amb el llenguatge tècnic o amb les estructures
internes. En la mesura que sigui possible, cal redactar amb un estil senzill que permeti la
comprensió de tots els usuaris. No hem de donar cap informació per suposada.
Titulars
És l'element més important de les notícies. Han de ser clars i descriptius. No cal ser enginyós,
només informatius i en coherència amb el contingut de la notícia. I, sobretot, evitar l'ús de les
passives.
Revisió ortogràfica
S'ha de vigilar especialment l'ortografia. Les faltes d'ortografia poden malmetre la imatge de la
Universitat. Podeu adreçar les vostres consultes ortogràfiques o lingüístiques al Servei de
Llengües de la UAB.
Textos en altres idiomes
Sempre que traduïm textos a altres idiomes diferents del català o castellà cal comptar amb la
supervisió d'un traductor. Eviteu l'ús dels traductors automàtics ja que sovint no tenen en
compte el context de la traducció. El Servei de Llengües us podrà assessorar al respecte.
Ús no sexista del llenguatge
Tant en la llengua catalana com en la castellana s'ha normalitzat l'ús de les formes masculines
per fer referència a persones i col·lectius de manera genèrica. Per tal d'evitar el sexisme en el
llenguatge l'Observatori per a la Igualtat de la UAB i el Servei de Llengües van desenvolupar la
Guia per a l'ús no sexista del llenguatge.
Nomenclatures
La nomenclatura oficial de la Universitat està recollida en el Document marc per a una
nomenclatura universitària de la UAB elaborat pel Servei de Llengües i l'Oficina de Coordinació
Institucional.
Guia per a l’edició web
P à g i n a 53 | 62
Les imatges Actualment, les pàgines són més visuals que fa uns anys, gràcies a que hem afegit molta part
gràfica. Això està molt bé, sempre i quant tinguem en compte un factor molt rellevant: El
rendiment!
Si una pàgina conté moltes imatges pot ser visualment molt atractiva, però cal anar molt en
compte en que no pugem imatges que pesin massa, això fa que es tardi molt a carregar la
pàgina, és a dir penalitza el seu rendiment. Si tornem a dir que cada cop més els usuaris ens
visiten utilitzant un dispositiu mòbil, és a dir, pot ser que estiguin amb connexió lenta i gastin
dades… encara és més important tenir en compte no pujar imatges que pesin massa. Fins i tot
si veieu que la web redimensiona la imatge automàticament i sembla que queda bé tot i no
haver pujat la imatge amb les mides correctes: penseu que igualment la imatge pesarà massa i
tardarà molt a mostrar-se. Per això sempre heu de pujar les imatges a la mida en que es
veuran a la web, no més gran.
Per evitar aquesta problemàtica i canviar la mida de les imatges podeu utilitzar les mides
d’imatge que recomanem en aquest manual. Per fer-ho, haureu de redimensionar les imatges
que tingueu, retallar-ne una part, reduir la qualitat de la imatge perquè pesi menys… Tot això
ho podeu fer utilitzant per exemple el GIMP, un editor d’imatges gratuit de software lliure que
podeu descarregar des de http://gimp.org. En l’oferta formativa de la UAB s’inclouen cursos de
GIMP (pregunteu a la Unitat de Formació). I també en podeu trobar tutorials ràpids al web,
com per exemple aquest de la Xarxa PuntTIC que explica l’edició bàsica de retallar una foto o
canviar la mida: http://punttic.gencat.cat/files/MaterialsFormatius/126/RetocBasic/index.htm
Com alternativa a GIMP, podeu provar l’eina online CANVA (www.canva.com). Cal crear un
usuari, per aquest motiu aconsellem proporcionar un correu genèric i no personal. Per
exemple: [email protected]
Sempre que pugeu imatges, tingueu molt en compte els Drets d’autor (vegeu el següent
apartat).
Drets d’autor i propietat intel·lectual No es poden pujar imatges al web sense ser-ne els autors o tenir els drets. Hi ha algunes
pàgines web que ofereixen imatges lliures de drets. També cal vigilar amb la documentació
que es publica, que no sigui obra d’un tercer i l’estiguem publicant sense permís.
Probablement teniu dubtes sobre els Drets d’autor, però teniu sort perquè la major part
d’aquests dubtes tenen la resposta publicada al Blog de Propietat Intel·lectual de la UAB:
http://blogs.uab.cat/dretsautor/
Per a saber-ne més, podeu fer la consulta al Gabinet Jurídic o apuntar-vos a un curs de Drets
d’autor que ofereix la Unitat de Formació periòdicament.
Guia per a l’edició web
P à g i n a 54 | 62
Protecció de dades personals El nou Reglament General de Protecció de Dades (RGPD) entra en vigor del 25 de maig de
2018.
Si heu de publicar un llistat que conté dades de persones, recolliu dades personals a través de
formularis publicats al web i/o envieu algun butlletí a través del correu electrònic a una llista
de persones que s’han inscrit, és molt important que reviseu el procediment.
Al web de la Generalitat hi trobareu més informació sobre el nou Reglament:
http://apdcat.gencat.cat/ca/documentacio/RGPD/
Si teniu dubtes respecte a l’aplicació de la protecció de dades en el vostre entorn de treball,
podeu posar-vos en contacte amb el Delegat per a la Protecció de Dades de la UAB.
Properament es publicaran plantilles i bones pràctiques relacionades amb la protecció de
dades personals en aquest apartat:
http://www.uab.cat/web/coneix-la-uab/itineraris/proteccio-de-dades-1345668257177.html
Com crear formularis A partir d’ara, us demanem que no incrusteu formularis amb Google Forms al web perquè ja
disposeu d’una plataforma de creació de formularis pròpia de la UAB, els eFormularis.
Aquesta eina permet crear tants formularis com vulgueu sense necessitat de saber HTML i
permet recollir les dades rebent un correu electrònic i/o descarregant un fitxer amb totes les
respostes. També té l’avantatge de poder crear formularis oberts a tothom o bé tancats amb
NIU i contrasenya.
Per accedir al servei gratuit d’eFormularis heu de fer la petició al CAS. Trobareu tota la
informació aquí:
http://www.uab.cat/web/e-formularis-1345703047137.html
Pel que fa a recollida de dades personals, recordeu que cal complir el Reglament General de
Protecció de Dades (també en parlem en aquesta guia, apartat Protecció de dades).
Accessibilitat web L'accessibilitat web consisteix en l'elaboració de pàgines web a Internet que puguin ser
accessibles per a tots els usuaris independentment de les seves discapacitats (visuals,
auditives, cognitives, motrius, tècniques o ambientals).
Guia per a l’edició web
P à g i n a 55 | 62
Un exemple claríssim és el TEXT ALT de l’asset imatge. A les imatges hi ha un camp obligatori
que s’anomena TEXT ALT. I molts de vosaltres potser l’ompliu sense saber per a què el fem
servir. El text alternatiu de les imatges és bàsic per tenir una pàgina web accessible: Quan un
usuari invident o amb problemes greus de visió visita la web utilitza un “lector de pantalla”. El
que fa aquest lector és que li explica la web i li permet navegar sense visualitzar realment la
pantalla. Quan el lector de pantalla ha de llegir una imatge el que fa és llegir aquest text
alternatiu. Per tant, és un text que ha d’explicar de què va la imatge, com si fos la llegenda de
la imatge, per facilitar la comprensió en aquests casos.
Però tenim molts altres aspectes a tenir en compte per millorar l’accessibilitat: Per exemple,
en les pàgines web que hem renovat el text és de color negre i el fons és blanc. Així millorem la
legibilitat, negre sobre blanc per tenir el màxim contrast. Quan el text és de color, intentem
que el nivell de contrast sigui suficient per passar la normativa d’accessibilitat. També s’ha
augmentat el cos de lletra. Tots aquests aspectes s’estan controlant a nivell de maquetació i
els editors no us heu de preocupar, simplement cal deixar el text en les mides que estan
predefinides en el gestor de continguts, no aplicar-li estils extra.
També s’han millorat els sistemes de navegació de manera que els lectors de pantalla trobin
clarament quins apartats té la pàgina i quin és el seu menú de navegació.
Podeu saber-ne més al blog: http://blogs.uab.cat/editorsweb/2019/05/02/siguem-accessibles/
Estadístiques: Quantes visites tenim al web? L'eina que utilitzem a la Universitat per mesurar el tràfic que rep la pàgina web és Google
Analytics. És un servei gratuït que permet fer un seguiment de les estadístiques de llocs web,
blogs i xarxes socials. Amb l'Analytics podràs saber quantes visites té el vostre web, quines
pàgines són les més populars, des de quin país et visiten i des de quina xarxa social ho fan, etc.
També ofereix informes predeterminats i personalitzables que es poden programar per
rebre'ls al correu periòdicament.
Primers passos:
El primer que heu de fer és esbrinar si la vostra web de facultat, departament o servei ja té un
compte d'Analytics. Si és així, heu de demanar l'accés i entrar a: https://analytics.google.com/
i accedir amb la contrasenya del correu.
En el cas que no tingueu un compte creat d'Analytics haureu de sol·licitar-ho enviant un correu
a [email protected] amb un compte de Gmail amb el que vulgueu associar-ho. S'aconsella
proporcionar un correu genèric i no personal. Per exemple: [email protected]
Guia per a l’edició web
P à g i n a 56 | 62
Mètriques principals
Les principals mètriques que s'han de tenir en compte són:
- Usuaris: usuaris que han iniciat una sessió com a mínim durant l'interval de dates.
- Sessions: El nombre total de sessions durant un interval de dates concret. Una sessió és el
període de temps en què un usuari interacciona activament amb el lloc web, l'aplicació, etc.
Totes les dades d'ús (com, per exemple, les visualitzacions de pantalla, els esdeveniments o el
comerç electrònic) s'associen amb una sessió.
- Usuaris nous: el nombre d'usuaris nous durant l'interval de dates seleccionat.
- Percentatge de rebot: Percentatge de sessions d'una sola pàgina que indica que no hi ha
hagut interacció per part de l'usuari. Una sessió amb rebot té una durada de 0 segons. Per
exemple, quan un usuari obre una pàgina del vostre lloc i després en surt sense activar cap
altra sol·licitud al servidor d'Analytics durant la mateixa sessió.
- Entrades: Nombre de vegades que els visitants han entrat al vostre lloc web des d'una pàgina
o des d'un conjunt de pàgines determinades.
Com podeu veure quants usuaris han visitat el vostre lloc web?
A la part de l'esquerre, al menú principal, feu clic a Públic - Visió general. Allà veureu quants
usuaris han visitat el vostre web en un període de temps determinat.
Nota: podeu modificar el període de temps com vulguis des del menú desplegable que
trobaràs a la dreta de la part superior.
Com podeu veure quants usuaris estan visitant en temps real la vostra pàgina web?
Guia per a l’edició web
P à g i n a 57 | 62
Des de l'apartat En temps real (menú de l'esquerre) podreu veure el nombre d'usuaris, les
ubicacions geogràfiques, les pàgines que estan visitant i si han entrat des de Google, xarxes
socials, mail, etc.
Com podeu saber des de quins països ens visiten?
Des de Públic - Informació geogràfica - Ubicació (menú de l'esquerre) els principals països d'on
provenen els usuaris.
Com podeu saber quin dispositiu estan utilitzant els usuaris per accedir al vostre web?
Guia per a l’edició web
P à g i n a 58 | 62
Des d'Adquisició - Search Console - Dispositius (menú de l'esquerre) podeu saber si l'usuari ha
fet servir desktop (ordinador), mòbil o tablet.
Voleu saber les estadístiques d'una pàgina en concret. Com ho podeu fer?
Heu d'anar a Comportament - Contingut del lloc - Totes les pàgines i enganxar l'ID de la url
(http://www.uab.cat/web/sala-de-premsa/detall-de-noticia/les-humanitats-digitals-a-debat-
1345667174054.html?noticiaid=1345750498863) en el camp del cercador:
Com podeu comparar dates o períodes concrets?
Al menú desplegable que trobareu a la dreta de la part superior podeu triar els dies concrets i,
si vols, comparar amb altre període.
Guia per a l’edició web
P à g i n a 59 | 62
Si voleu més informació, podeu consultar aquestes pàgines:
- Google Analytics – Ajuda - Cibernàrium: Cursos presencials i online gratuïts de Google Analytics i de molts altres
temes relacionats amb el web i el món digital.
La fitxa de Google Maps Dades d’accés
URL: https://business.google.com
Mail: correu electrònic donat d’alta a Google My Business
Contrasenya: mateixa que correu electrònic
Com demanar accés per editar informació de la fitxa d’empresa que apareix a Google
Per poder començar a treballar en l’actualització d’una fitxa de Google Maps d’una Facultat o
servei, el primer que heu de fer és enviar-nos un correu electrònic a [email protected] i sol·licitar
que donem d’alta la vostra adreça de correu. Nota: preferentment, que sigui el mateix correu
genèric gmail que tingueu vinculat a Google Analytics.
Guia per a l’edició web
P à g i n a 60 | 62
Afegir modificacions proposades pels usuaris
Trobareu els suggeriments fets pels usuaris a l’apartat ‘Tasques pendents’. Es recomana
acceptar les modificacions i/o suggerències, ja que Google prioritza aquelles fitxes amb
contingut més rellevant.
Editar informació de la fitxa
- Ubicacions – Informació
- Icona llapis: per editar la informació corresponent
Guia per a l’edició web
P à g i n a 61 | 62
Fotos
Les imatges que es pugin han de tenir un nom descriptiu i amb paraules clau perquè l’usuari
les trobi. Aquestes imatges sortiran a la cerca de Google. En el cas de voler pujar vídeos,
aquests han de tenir una duració de 20-30”.
Ex: Aula Facultat de Filosofia i Lletres; Bar Facultat Filosofia i Lletres
Publicacions
Podeu aprofitar aquest apartat per posar-hi informació de tipus temporal (ex. tancat a l’agost,
Setmana Santa, etc) o de tipus promocional (ex. cursos d’estiu). Per exemple: “La Facultat de
Medicina romandrà tancada durant el mes d’agost” o “Aprofita l’estiu per fer els cursos
d’estiu…”. Nota: s’aconsella redactar el text pensant en les paraules clau amb què volem
posicionar-nos a Google (ex. Facultat de Medicina, UAB, Universitat Autònoma de Barcelona,
etc).
Idea: informar tancament a l’agost: Per tal d’avisar amb antelació a l’usuari, es pot redactar un
text de tipus pre-tancament (avisant que a l’agost la facultat romandrà tancada) i després
canviar el text abans de marxar de vacances.
Eines d’interès per treballar amb la web Els navegadors com Chrome tenen plugins interessants pels editors web, com per exemple:
Guia per a l’edició web
P à g i n a 62 | 62
“Measure it” Per mesurar els píxels de la pantalla de forma fàcil i ràpida.
“Awesome Screenshot” Per fer captures de pantalla o petits vídeos mentre es navega.
“Colorzilla” Per saber el codi RGB de color de qualsevol punt de la pàgina web.
“Tag Assistant” Per saber quines cookies d’Analytics té la pàgina.
Altres gestors de continguts de la UAB Actualment, a la UAB s’utilitzen els següents gestors de continguts web:
- Oracle Webcenter Sites: Inclou lloc web principal, Facultats, Departaments, alguns
Serveis, alguns Instituts propis, informacions d’Intranet i pàgines temàtiques.
- Liferay: Intranet i Seu electrònica.
- Drupal: pagines.uab.cat és un autoservei dirigit a Centres de Recerca, Serveis
científicotècnics, Grups de recerca.
- Wordpress: blogs.uab.cat és un autoservei per tenir pàgines personals dels membres
de la Comunitat UAB, esdeveniments i temes concrets.