{"id":4756,"date":"2025-07-18T14:31:50","date_gmt":"2025-07-18T12:31:50","guid":{"rendered":"https:\/\/webs.uab.cat\/webedit\/?page_id=4756"},"modified":"2025-12-18T16:10:49","modified_gmt":"2025-12-18T14:10:49","slug":"bones-practiques-quan-apliquem-estils","status":"publish","type":"page","link":"https:\/\/webs.uab.cat\/webedit\/edicio-de-continguts\/manual\/bones-practiques-quan-apliquem-estils\/","title":{"rendered":"Bones pr\u00e0ctiques quan apliquem estils"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">L\u2019editor de text del gestor de continguts permet aplicar diferents estils per fer que el contingut sigui m\u00e9s atractiu i entenedor. Aquests estils faciliten marcar textos com a t\u00edtols o subt\u00edtols, destacar avisos o donar format de bot\u00f3 als enlla\u00e7os, <strong>sense necessitat de tocar el codi<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Important abans de comen\u00e7ar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quan copiem i enganxem textos des de Word, el gestor nom\u00e9s conserva <strong>negretes, cursives i enlla\u00e7os<\/strong>. No es poden enganxar taules ni imatges, ja que aix\u00f2 afecta negativament l\u2019accessibilitat.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si el text no t\u00e9 aquests elements, el comportament ideal \u00e9s:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Seleccionar el text i pr\u00e9mer el bot\u00f3 <strong>Esborrar format<\/strong><br><img decoding=\"async\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/07\/EsborraFormat.gif\" alt=\"Captura de pantalla parcial del bot\u00f3 de netejar format del CKEditor a Oracle Webcenter Sites\"><\/li>\n\n\n\n<li>O b\u00e9 enganxar-lo amb la combinaci\u00f3 <strong>Control + Shift + V<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Estils disponibles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Per complir el nivell d\u2019accessibilitat exigible a la UAB, hem incorporat nous estils a l\u2019editor. Els trobareu al desplegable d\u2019estils:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"216\" height=\"282\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/07\/ckeditor-selector-estil.jpg\" alt=\"Captura de pantalla parcial del desplegable d'estils del CKEditor a Oracle Webcenter Sites\" class=\"wp-image-4728\" style=\"width:216px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">T\u00edtols i subt\u00edtols<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>No feu servir negreta per crear t\u00edtols.<\/strong> <\/li>\n\n\n\n<li>Per dividir el text en apartats, utilitzeu l\u2019estil <strong>T\u00edtol<\/strong>. <\/li>\n\n\n\n<li>Si cal subdividir m\u00e9s, utilitzeu <strong>Subt\u00edtol<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">La visualitzaci\u00f3 ser\u00e0 la seg\u00fcent:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"370\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/07\/ex-titol-subtitol.jpg\" alt=\"Exemple de t\u00edtol i de subt\u00edtol\" class=\"wp-image-4762\" srcset=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/07\/ex-titol-subtitol.jpg 700w, https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/07\/ex-titol-subtitol-300x159.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-uab-alerta missatge alerta\">Cal tenir present que els t\u00edtols han de seguir una jerarquia. No es pot fer servir l&#8217;estil \u00abSubtitol\u00bb si abans no s&#8217;ha fet servir un \u00abT\u00edtol\u00bb. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Missatges destacats<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Per ressaltar informaci\u00f3 important o canvis, disposem de <strong>5 estils de missatges destacats<\/strong>. Aquests resalten el text de manera diferent segons la nostra finalitat. A continuaci\u00f3 podeu veure un exemple de cadascun:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"413\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/07\/missatges.jpg\" alt=\"Exemple dels diferents estils de missatges\" class=\"wp-image-4765\" srcset=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/07\/missatges.jpg 700w, https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/07\/missatges-300x177.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Bones pr\u00e0ctiques:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Han de ser breus.<\/li>\n\n\n\n<li>No abuseu d\u2019aquests estils ni els utilitzeu nom\u00e9s per donar color.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Botons en enlla\u00e7os<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nom\u00e9s s\u2019han d\u2019aplicar a enlla\u00e7os que conviden a fer una acci\u00f3 (p. ex. emplenar un formulari, veure un v\u00eddeo). <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Primer creeu l\u2019enlla\u00e7, despr\u00e9s apliqueu l\u2019estil de bot\u00f3. <\/li>\n\n\n\n<li>Tipus disponibles: <strong>verd, blanc i negre<\/strong>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"236\" height=\"300\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/estils-botons-236x300.jpg\" alt=\"Formats dels botons disponibles: verd, blanc i negre\" class=\"wp-image-4824\" srcset=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/estils-botons-236x300.jpg 236w, https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/estils-botons.jpg 330w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Par\u00e0grafs amb una separaci\u00f3 m\u00e9s redu\u00efda<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Des del punt de vista de l&#8217;accessibilitat, un text s&#8217;ha de separar en par\u00e0grafs i hem d&#8217;evitar fer salts de l\u00ednia simples. Si cal reduir espai entre l\u00ednies, disposeu dels estils seg\u00fcents:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Par\u00e0graf no espaiat<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Redueix la separaci\u00f3 entre l\u00ednies sense afegir cap format m\u00e9s. Recomanable per fer-ho servir com a agrupaci\u00f3 de conceptes b\u00e0sics com els de l&#8217;exemple seg\u00fcent:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"156\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/paragraf-noespaiat.jpg\" alt=\"Exemple de par\u00e0grafs amb una separaci\u00f3 m\u00e9s redu\u00efda\" class=\"wp-image-4831\" srcset=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/paragraf-noespaiat.jpg 600w, https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/paragraf-noespaiat-300x78.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">Adre\u00e7a<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">El farem servir quan donem informaci\u00f3 de contacte en un camp de text. Recordeu per aix\u00f2, que a totes les p\u00e0gines podem associar un m\u00f2dul de contacte en el men\u00fa de la dreta. La visualitzaci\u00f3 de l&#8217;estil adre\u00e7a ser\u00e0 de la manera seg\u00fcent:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"150\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/EstilContacte.jpg\" alt=\"Exemple de l'estil Adre\u00e7a\" class=\"wp-image-4834\" srcset=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/EstilContacte.jpg 400w, https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/EstilContacte-300x113.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">Peu de foto<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">El farem servir quan haguem hagut d&#8217;inserir una imatge enmig del text i haguem de proporcionar una informaci\u00f3 addicional com ara les persones que hi surten o qui \u00e9s l&#8217;autor de la fotografia. Exemple:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"481\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/EstilPeuFoto.jpg\" alt=\"Exemple d'un peu de fotografia\" class=\"wp-image-4839\" srcset=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/EstilPeuFoto.jpg 700w, https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/09\/EstilPeuFoto-300x206.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Entradeta<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Estil que farem servir si volem fer servir un resum de contingut de la p\u00e0gina a l&#8217;inici d&#8217;aquesta. Exemple:<\/p>\n\n\n\n<p class=\"wp-block-uab-entradeta entradeta\">El&nbsp;<strong>Treball de Final de Grau (TFG)<\/strong>&nbsp;i el&nbsp;<strong>Treball de Final de M\u00e0ster (TFM)<\/strong>&nbsp;s\u00f3n assignatures obligat\u00f2ries que representen la culminaci\u00f3 dels estudis de cada titulaci\u00f3. Aquests treballs permeten a l\u2019estudiantat demostrar, de manera integrada, els coneixements, compet\u00e8ncies i habilitats adquirides al llarg del seu itinerari formatiu.<\/p>\n\n\n\n<p class=\"wp-block-uab-alerta missatge alerta\">Aquests estils s\u2019han de fer servir nom\u00e9s per la finalitat prevista. Si teniu necessitats especials, feu-nos-les arribar mitjan\u00e7ant el <a href=\"https:\/\/tiquets.uab.cat\/servicedesk\/customer\/portal\/7\/create\/112\" target=\"_blank\" rel=\"noreferrer noopener\">formulari de consultes<\/a> i us donarem resposta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>L\u2019editor de text del gestor de continguts permet aplicar diferents estils per fer que el contingut sigui m\u00e9s atractiu i entenedor. Aquests estils faciliten marcar textos com a t\u00edtols o subt\u00edtols, destacar avisos o donar format de bot\u00f3 als enlla\u00e7os, sense necessitat de tocar el codi. Important abans de comen\u00e7ar Quan copiem i enganxem textos [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":0,"parent":4525,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4756","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/pages\/4756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/comments?post=4756"}],"version-history":[{"count":32,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/pages\/4756\/revisions"}],"predecessor-version":[{"id":7077,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/pages\/4756\/revisions\/7077"}],"up":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/pages\/4525"}],"wp:attachment":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/media?parent=4756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}