{"id":17307,"date":"2024-03-18T10:45:29","date_gmt":"2024-03-18T09:45:29","guid":{"rendered":"https:\/\/icebergng.udg.edu\/?p=17307"},"modified":"2024-03-18T10:45:31","modified_gmt":"2024-03-18T09:45:31","slug":"bootstrap-per-personalitzar-moodle","status":"publish","type":"post","link":"https:\/\/iceberg.udg.edu\/bootstrap-per-personalitzar-moodle\/","title":{"rendered":"Bootstrap: per personalitzar Moodle"},"content":{"rendered":"\n

Moodle, l’entorn d’ensenyament i aprenentatge que utilitzem a la UdG, \u00e9s una eina molt potent. Ens ajuda a gestionar el disseny de l’assignatura, la doc\u00e8ncia i l’avaluaci\u00f3 d’una forma molt efectiva.<\/p>\n\n\n\n

Recordeu que hi ha el curs Moodle a l’abast<\/strong> a disposici\u00f3 de tota la comunitat UdG.<\/p>\n\n\n\n

\u00c9s cert, per\u00f2, que quan et vas familiaritzant amb Moodle, es troba a faltar una mica m\u00e9s de versatilitat a nivell est\u00e8tic i funcional. A vegades ens agradaria utilitzar recursos que veiem en altres entorns, per\u00f2 que Moodle no ens ofereix.<\/p>\n\n\n\n

Doncs b\u00e9, en aquesta entrada us presentem Bootstrap<\/a>, un conjunt d’eines d’interf\u00edcie potent, extensible i ple de funcions.<\/p>\n\n\n\n

Utilitzar-ho, no \u00e9s del tot trivial. Necessita una mica de domini de codi HTML Per\u00f2 tampoc \u00e9s res inabastable. Us expliquem una mica com funciona i us en posem algun exemple.<\/p>\n\n\n\n

En primer lloc hem d’accedir a la p\u00e0gina web de Bootstrap<\/a>.<\/p>\n\n\n\n

La darrera versi\u00f3 en el moment de publicar aquesta entrada \u00e9s la 5.3<\/strong> (es pot veure a la part superior dreta. La nostra recomanaci\u00f3 \u00e9s canviar a una versi\u00f3 anterior per assegurar que no hi haur\u00e0 conflicte entre el codi que utilitzarem i la configuraci\u00f3 del servidor on tenim les nostres assignatures de Moodle. Podem triar, per exemple, la versi\u00f3 4.6.x<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Tot seguit, a la columna de l’esquerra, escollirem l’apartat Components<\/strong>. Veurem com ens apareix, en la mateixa columna esquerra, una llista amb tot el que podem utilitzar. Si naveguem una mica per la primera p\u00e0gina que ens apareix, Alerts<\/strong>, veurem que, en primer lloc ens trobem amb alguns exemples de missatges d’alerta. Tot seguit, si seguim navegant per la p\u00e0gina, ens apareixer\u00e0 el codi que hem d’utilitzar per aconseguir l’efecte dels exemples.<\/p>\n\n\n\n

Un primer exemple: volem afegir un requadre l’alerta de color verd per destacar alguna informaci\u00f3 en la nostra p\u00e0gina de Moodle. Domcs b\u00e9, veurem que el codi que correspon a aquest requadre \u00e9s:<\/p>\n\n\n\n

<div class=\"alert alert-success\" role=\"alert\">\n  A simple success alert\u2014check it out!\n<\/div><\/code><\/pre>\n\n\n\n
Copiem aquest codi i anem al nostre curs de Moodle. Activem l’edici\u00f3 i afegim per exemple, un recurs etiqueta. En el quadre de text on, normalment, afegim el text de l’etiqueta, farem clic al primer bot\u00f3 de l’esquerra, el de la fletxa avall. Aix\u00f2 ens fa apar\u00e8ixer una segona fila de botons. Ara haurem de fer clic sobre el darrer bot\u00f3, el que t\u00e9 la icona <\/><\/strong>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Aix\u00f2 ens fa apar\u00e8ixer un codi HTML. El que hem de fer \u00e9s, simplement, esborrar el codi que ens apareix i enganxar el que hem copiat de Bootstrap.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Si tornem a fer clic sobre el darrer s\u00edmbol de la segona fila, obtindrem el resultat que estem buscant. Simplement hem de canviar el text que ens apareix i escriure el text que ens interessa. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Desarem els canvis, i ja ho tindrem llest.<\/p>\n\n\n\n
Ja veieu que tampoc \u00e9s tan complicat.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Amb aquest sistema podem afegir, per exemple, botons, informaci\u00f3 que es presenta en forma d’acordi\u00f3, carrusels d’imatges i moltes altres funcionalitats.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Potser la primera vegada us costar\u00e0 una mica. Per\u00f2 segur que r\u00e0pidament ja dominareu el funcionament.<\/p>\n","protected":false},"excerpt":{"rendered":"
A vegades podem tenir la sensaci\u00f3 que Moodle es queda una mica limitat en temes relacionats amb l’est\u00e8tica i l’experi\u00e8ncia d’usuari. Bootstrap ens dona la possibilitat d’afegir funcionalitats i noves caracter\u00edstiques d’una forma relativament senzilla.<\/p>\n","protected":false},"author":2,"featured_media":17308,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-17307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-recursos"],"_links":{"self":[{"href":"https:\/\/iceberg.udg.edu\/wp-json\/wp\/v2\/posts\/17307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iceberg.udg.edu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iceberg.udg.edu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iceberg.udg.edu\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/iceberg.udg.edu\/wp-json\/wp\/v2\/comments?post=17307"}],"version-history":[{"count":4,"href":"https:\/\/iceberg.udg.edu\/wp-json\/wp\/v2\/posts\/17307\/revisions"}],"predecessor-version":[{"id":17330,"href":"https:\/\/iceberg.udg.edu\/wp-json\/wp\/v2\/posts\/17307\/revisions\/17330"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iceberg.udg.edu\/wp-json\/wp\/v2\/media\/17308"}],"wp:attachment":[{"href":"https:\/\/iceberg.udg.edu\/wp-json\/wp\/v2\/media?parent=17307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iceberg.udg.edu\/wp-json\/wp\/v2\/categories?post=17307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iceberg.udg.edu\/wp-json\/wp\/v2\/tags?post=17307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}