Pac 2 Sistemes de gestió de continguts
Jordi Llonch Esteve Cc by-nc-sa
Sistemes de gestió de continguts
PAC 2
Índex Índex ................................................................................................................................ 1 Exercici 1 .......................................................................................................................... 2 Exercici 2 .......................................................................................................................... 2 Exercici 3 .......................................................................................................................... 3 Exercici 4 .......................................................................................................................... 3 Exercici 5 .......................................................................................................................... 4 Exercici 6 .......................................................................................................................... 4 Exercici 7 .......................................................................................................................... 5 Exercici 8 .......................................................................................................................... 6 Exercici 9 .......................................................................................................................... 8 Exercici 10 ........................................................................................................................ 8 Enllaç a la web ............................................................................................................... 8 Bibliografia i altres recursos ........................................................................................... 9
Jordi Llonch Esteve
CC BY-NC-SA
Pàg. 1/9
Sistemes de gestió de continguts
PAC 2
Exercici 1 Es personalitzarà el tema amb un nom i descripció propis i una imatge mostra del tema que es visualitzarà a la tria de "temes" de Wordpress. El meu tema es titula “Mosaic adaptatiu” i la imatge de mostra que es mostra durant la instal·lació és la següent:
Exercici 2 Hi haurà definides (mitjançant css i media queries) 3 possibles composicions (layouts): –
Per a mòbils, on tot el contingut es veurà en una sola columna, opció per defecte del css. En ser la opció per defecte només he afegit un media query per al menú desplegable.
–
Optimitzat per tauletes (a mides superiors a 600px), una columna pel contingut, i 2 a sota pel sidebar. El fitxer style.css conté tot el necessari per a aquesta optimització.
–
Per ordinadors d'escriptori (a mides superiors a 960px) el layout serà en 3 columnes, la primera de les quals serà per mostrar el contingut i les altres dues pels sidebars. En aquest cas hi haurà un carrusel de fotos superior. He creat tres columnes i he afegit un carrusel a la part superior.
Jordi Llonch Esteve
CC BY-NC-SA
Pàg. 2/9
Sistemes de gestió de continguts
PAC 2
Exercici 3 En el cas del layout per ordinadors d'escriptori el client vol disposar d'un carrusel de fotos (slideshow), administrable des de l'escriptori de WP. Es deixa a criteri de l'alumne la manera d'implementar aquest "slideshow". He utilitzat un carrusel adaptatiu que permet mostrar-se en els tres tipus de dispositius adaptant-se a l’amplada de cada finestra.
Exercici 4 El menú haurà de tenir els 4 apartats principals de la web original de Mosaic (entrevistas, artículos, experiencias , recursos) En el cas de la versió per mòbils caldrà canviar el menú "normal" (ul) de WP per una llista desplegable (select) per aprofitar al màxim la mida de pantalla limitada. La pàgina carrega les dues llistes, una de normal i una altra desplegable. Utilitzant media queries amago la llista normal per a dispositius mòbils i amago la desplegable per a la resta de dispositius.
Jordi Llonch Esteve
CC BY-NC-SA
Pàg. 3/9
Sistemes de gestió de continguts
PAC 2
Exercici 5 Es personalitzarà el css al gust de l'alumne, però conservant el disseny d'estil bàsic de la revista Mosaic original (colors bàsics i logo). El css ha d'estar documentat correctament (en forma de comentaris a l'arxiu). Com s’ha comentat al fòrum de l’assignatura, el canvi de disseny de la revista Mosaic s’ha dut a terme al mateix temps que realitzem aquesta PAC, així que he decidit, com ha comentat el consultor, no dedicar massa esforços al disseny visual, però he aplicat les tipografies i els colors bàsics de la nova web, així com el nou logo. M’he basat en el fitxer d’estil proposat a l’enunciat i he anat modificant comparant-lo amb el nou fitxer d’estil de la web de Mosaic.
Exercici 6 S'haurà de triar i implementar el contingut que apareix als sidebars del tema (widgets), justificant el seu ús (al voltant de 500 paraules). L’elecció del contingut de les barres laterals ha estat força complicada. En el meu cas hagués preferit afegir més de dues barres laterals, ja que una revista en línia amb tant de contingut com Mosaic permet molta personalització i addició de complements específics. De totes maneres, l’enunciat és clar i requereix que afegim només dues barres laterals. Després d’analitzar totes les possibilitats des del panell de Wordpress he escollit afegir un giny amb els últims comentaris i un altre amb l’administració del lloc, per no carregar massa la interfície de la web. El primer giny, el dels comentaris, serveix per a aconseguir veure d’un cop d’ull l’activitat recent dels lectors de la revista en línia. D’aquesta manera, l’usuari aconsegueix informació sobre la interacció del lloc web amb la seva audiència. En cas que la web no permetés comentar, segurament perdria molts seguidors, però com que aquest no és el cas, he cregut oportú fer èmfasi en aquesta funcionalitat de Mosaic. Per tal de proporcionar la informació justa i necessària, he decidit mostrar només els últims 4 comentaris a través del panell de control de Wordpress. Així, s’aconsegueix l’objectiu descrit anteriorment sense inundar el lector amb informació irrellevant.
Jordi Llonch Esteve
CC BY-NC-SA
Pàg. 4/9
Sistemes de gestió de continguts
PAC 2
L’elecció del panell d’administració com a segon giny no ha estat fàcil, així que m’he basat en la següent pregunta (Exercici 7) per a decidir-me en la seva inclusió. La pàgina web Mosaic rep visites de diferents tipus d’usuaris. Per una banda hi ha els lectors, aquell perfil de visitant que hi accedeix per a informarse del contingut que s’hi publica i, per l’altra, hi ha els generadors de contingut, que poden ser alumnes, exalumnes, professors, consultors, col·laboradors i tot l’equip d’administració. Per a facilitar l’accés a l’interior de la web al segon grup de visitants i donar facilitat al primer d’entrar a formar part de la revista he cregut convenient afegir aquest giny.
Exercici 7 Caldrà especificar els perfils d'usuari que caldrà pel manteniment de la web, i com s'han d'implementar (màx 300 paraules). La web ha de ser gestionada per un equip d’administració, format per una o més persones que s’encarreguin del manteniment de la pàgina portant a terme les tasques de configuració i manteniment següents: –
Creació i gestió de còpies de seguretat
–
Administració de perfils
–
Configuració de la memòria cau
–
Construcció del lloc en general
A més, fa falta un equip d’editors que generin el contingut que es publicarà a la revista. Estarà format per: estudiants i antics estudiants, professors i consultors, i col·laboradors externs. Ara bé, cal definir els rols de cadascun d’aquests usuaris depenent dels permisos de què disposin: –
Els administradors tenen accés a tots els atributs d'administració.
–
Els editors poden publicar articles i gestionar-los (tant propis com d’altres usuaris).
–
Els autors poden publicar i gestionar els seus articles, i penjar fitxers.
–
Els col·laboradors poden escriure i gestionar els seus articles però no poden publicar-ne de nous o penjar fitxers multimèdia.
–
Els subscriptors poden llegir comentaris/comentar/rebre notícies, etc. però no poden crear contingut.
Jordi Llonch Esteve
CC BY-NC-SA
Pàg. 5/9
Sistemes de gestió de continguts
PAC 2
Exercici 8 Fer una proposta de funcionalitats mínimes que cal implementar a partir de plugins i implementar-la. Aquesta proposta caldrà documentar-la adequadament (al voltant de 500 paraules) Després de dissenyar l’aparença de la web per a dispositius de diverses dimensions i resolucions de pantalla cal disposar de contingut per a comprovar que la feina feta es mostra de la manera desitjada. Per això, es poden crear articles nous o es poden importar a partir del fitxer XML amb una sèrie d’articles de la web original de Mosaic. El cas més ràpid és el d’importar els continguts de la web Mosaic, però per a dur a terme aquesta importació cal preparar el Wordpress per a que interpreti els articles del document XML proporcionat a l’enunciat. Aquesta posada a punt es porta a terme amb l’extensió Wordpress Importer, una extensió disponible al directori d’extensions de Wordpress.org que s’ha de descarregar i traslladar a la carpeta “/wp-content/plugins” del nostre servidor.
Un cop transferida la carpeta, només cal activar-la al panell “Extensions” del nostre Wordpress per a poder importar el fitxer XML des del panell “Eines > Importa > Wordpress”.
Jordi Llonch Esteve
CC BY-NC-SA
Pàg. 6/9
Sistemes de gestió de continguts
PAC 2
Pel a incrustar el carrusel d’imatges també es pot fer amb una extensió. N’hi ha moltes al mercat i la que he escollit per aquesta PAC es tracta de PPM Carousel, un carrusel de disseny adaptatiu que s’adequa a l’amplada del lloc on s’implementa. En aquest cas he escollit aquesta extensió perquè s’implementa amb el Wordpress de manera molt fàcil, però n’hi ha moltes altres que complirien amb la mateixa funció. La seva instal·lació segueix el mateix procediment requerit per a l’extensió anterior, és a dir, cal descarregar-se-la de la pàgina d’extensions de Worpress.org, transferir-la a la carpeta “/wp-content/plugins” del nostre servidor i activar-la des del panell d’extensions de Wordpress. El seu funcionament consisteix a escriure un article afegint-hi un codi que crida les imatges que posteriorment es mostraran al carrusel. Després cal publicar aquest article amb una data superior a l’últim que hi hagi publicat perquè es mostri sempre a dalt de tot.
Una altra forma d’implementar-lo, seria utilitzant qualsevol altra extensió de carrusel i copiar el codi HTML al contenidor “content” de l’arxiu “index.php” per aconseguir, així, que el carrusel es mostrés a pantalla completa per sobre dels articles del blog.
Per a traslladar el servidor local a Cimanet, s’ha de modificar les dades de la base de dades i instal·lar el Worpress al nou servidor. A més, cal copiar les imatges necessàries a la carpeta adequada.
Jordi Llonch Esteve
CC BY-NC-SA
Pàg. 7/9
Sistemes de gestió de continguts
PAC 2
Exercici 9 En paral·lel a la realització de la pràctica al fòrum es recolliran i compartiran propostes de millora de la plataforma Mosaic actual. Com he comentat a l’exercici 6, crec que la pàgina de Mosaic hauria d’incloure un panell d’administració amb l’objectiu d’ampliar la seva comunitat. Aquesta estratègia consistiria a oferir als lectors la possibilitat d’identificar-se amb un nom d’usuari i un avatar i començar a interactuar amb les notícies, activitats, articles i la resta de contingut que s’hi publica.
Exercici 10 El disseny "responsive" mitjançant media-queries, donat que s'efectua només al "client", no al "servidor", planteja alguns problemes, per solucionar-los tenim la possibilitat de combinar-ho amb components al servidor. És el que s'anomena RESS (Responsive Design + Server Side Components). Recerca i documenta com es podria optimitzar el tema amb aquestes tècniques (màxim 500 paraules). En el cas de voler millorar el tema creat per a aquesta PAC aplicant RESS, es podria fer que el panell de navegació (select) que es mostra per a mòbils només s’hagués de carregar per aquest tipus de dispositius, ja que actualment es carrega per a cada dispositiu i s’amaga per a tauletes i dispositius d’escriptori. Amb aquesta tècnica s’aconsegueix que el servidor enviï al dispositiu de l’usuari només el contingut que necessita, alleugerint la mida total de la pàgina web i creant una experiència d’usuari més àgil.
Enllaç a la web http://cimanet.uoc.edu/labftp/jllonche/
Jordi Llonch Esteve
CC BY-NC-SA
Pàg. 8/9
Sistemes de gestió de continguts
PAC 2
Bibliografia i altres recursos Julià Lundgren, Daniel. (2012). Sistemes de gestió de continguts. FUOC. LukeW.
RESS:
Responsive
Design
+
Server
Side
Components.
http://www.lukew.com/ff/entry.asp?1392 [data de consulta: novembre 2013] wp
tuts+.
Building
a
Mobile
First
Responsive
WordPress
Theme.
http://wp.tutsplus.com/tutorials/theme-development/building-a-mobile-firstresponsive-wordpress-theme/ [data de consulta: novembre 2013] Forbes. Why your business needs a responsive website before 2014. http://www.forbes.com/sites/joshsteimle/2013/11/08/why-your-business-needsa-responsive-website-before-2014/ [data de consulta: novembre 2013]
Els logotips de la UOC i de Mosaic són propietat de la Universitat Oberta de Catalunya i la resta d’imatges són captures de pantalla de creació pròpia i s’acullen a la mateixa llicència que aquest document.
Jordi Llonch Esteve
CC BY-NC-SA
Pàg. 9/9
