Drupal: Funcionalitats i mòduls

  • 179 views
Uploaded on

Presentació de Funcionalitats i Mòdu Drupal de la jornada "Global Learn Day" organitzada per Atenea tech al Citilab de Cornellà el 14 de desembre de 2012.

Presentació de Funcionalitats i Mòdu Drupal de la jornada "Global Learn Day" organitzada per Atenea tech al Citilab de Cornellà el 14 de desembre de 2012.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
179
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Demo 1 - Usuaris, rols i permisos Descriure entorn: Drupal minimal Admin menu toolbar Admin theme: seven Accedir com a “ admin” Veure pàgina de perfil Editar compte Veure llistat d'usuaris Veure llistat de permisos Veure llistat de rols Crear un rol “editor” Assignar permís “View toolbar”, “Use admin theme” a “editor” Crear un usuari “luis” amb el rol editor Sortir Accedir al correu Accedir fent servir l'enllaç Posar clau d'accés
  • Demo 2 - Continguts i tipus de contingut Accedir com a “admin” Veure llistat de continguts Filtres Accions massives Crear un tipus de contingut “Article” Assignar permisos a editors per a “veure pàgina d'overview” i “crear articles”, “editar” i “esborrar els articles propis” Accedir com “luis” Crear nou “Article” Veure com queda a node/NID Veure com queda a node
  • Demo 3 – Formats de text Accedir com a “admin” Anar a “Config →Input formats” Crear un “Input format” “Filtered HTML” que puguin fer servir els “editors” Sortir Accedir com a “luis” Editar l'article Cambiar en input format Posar una mica d'HTML Veure com queda
  • Demo 4 – Editors visuals Accedir com a “admin” Activar mòdul “WYSIWYG” Anar a la pàgina de configuració Associar YUI al filtre creat abans Afegir botó de negreta, cursiva i teaser break Sortir Accedir com a “luis” Editar el nostre article Mostrar editor, canviar algun text Guardar Mostrar com queda.
  • Demo 5 – Camps Accedim com “admin” Activem “Field UI” Anem a “Article → Manage fields” Creem el camp “Subtitle” Mostrem pantalles de configuració Mostrem “Manage display” Per defecte es veu sobre el body Al teaser no es veu Sortim Accedim com a “luis” Editar l'article Posar un subtitle Mostrar com queda a node/NID i a node
  • Demo 6 - Arxius, imatges i estils Accedir com a “admin” Activar “File” i “Image” Config → Estils Afegim estil “panoramic” Afegim effecte “Scale and Crop” a 690x100 Tipus → Article → Manage fields Afegim camp imatge Explicar les opcions de configuració Anem a “Manage display” Per defecte es mostrará la imatge entre el subtitol i el cos Al teaser no es mostrará la imatge Sortir Accedir com a “luis” Editar article, afegir imatge, veure com queda
  • Demo 7 - Termes de taxonomia Activem “Taxonomy” Anem a “Structure → Taxonomy” Creem un vocabulari “Tags” Anem a “Article → Manage fields” Afegim com de referencia a terme “Tags” A “Manage display”: Al teaser no s'ha de mostrar A la resta, sota el body Sortim Accedim com a “luis” Editem i mostrem com es veu l'article Mostrem la pàgina de terme
  • Demo 8 – Comentaris Accedim com a “admin” Activem el módul “Comments” Activem els comentaris per als “Articles” Explicar opcions Permisos: el usuari anonim pot comentar Sortir Accedim com a “luis” Editem l'article Obrim els comentaris Sortim Com anonim: escribim comentari Com “admin” aprobem el comentari Com anonim: veiem com queda
  • Demo 9 – Blocs Accedim com “admin” Structure → Blocs Expliquem les regions. Creem un bloc de text “Benvinguts” amb cos: “Benvinguts al Global Training Day” El col·loquem a la primera sidebar, sobre tots els demés. Sortim Mostrem com es veu
  • Demo 10 – Menú Accedim com a “admin” Activem módul “Menu” Anem a “Structure → Menu” Creem un menú: “Xarxes Socials” Afegim “Twitter” i “Facebook” al menú Anem a “Structure →Blocks” Coloquem el bloc del menú al primer peu Sortim Veiem com queda
  • Demo 11 – Cerca Com a “admin” Activem el módul “Cerca” Anem a “Structure → Blocks” Col·lquem el bloc de cerca a la capcelera Mostrem com queda Anem a “Config → Search” Mostrem les opcions d'indexació Fem una cerca, no dona resultats al no estar indexat
  • Demo 12 – Àlies Activem “Path”, “Pathauto” i “Token” Anem a configuració i mostrem: Llistat d'àlies Patrons Anem e permisos Assignem el permís “Add/edit URL alias” Sortim Accedim com a “luis” Al article mostrem les opcions Guardem Mostrar el nou path autogenerat
  • Demo 13 – Multi-idioma Accedir com a “admin” Activar mòduls multi-idioma “Locale” i “Content translation” i mostrar la resta Afegir idioma català Posar el mode de detecció d'idioma per URL Editar tipus “Article” per a que sigui traduïble Col·locar el bloc de canviar d'idioma a la regió “Footer” Donar permís a “editor” per a “traduir contingut” Sortir Accedir com a “luis” i traduir el “article” Canviar d'idioma per a veure com va
  • Demo 14 – Vistes Accedim com a “admin” Activem móduls “Views” i “Views UI” Creem un “View” → “Hot articles” “Bloc” “Filter” → “Post date” → “Greate than” →”Relative” → “-1 week” “Order” → “Comment count” → “Descending” Guardamos Colocamos el bloque en el segundo pie
  • Demo 15 – Layouts Accedim com a “admin” Activem “Panels” i “Panel nodes” Anem a content i creem un “Panel node” Layout de 2 columnes Text a la primera “Hot articles” a la segona Guardem i mostrem com queda
  • Demo 16 – Control de flux Accedim com a “admin” Activem “Rules” i “Rules UI” Creem una nova “Rule” “New comment” Envia un correu a l'autor quan algú comenta Provar

Transcript

  • 1. Drupal: Funcionalitats imòdulsGlobal Training DaysSiddharta Navarro / Luis Ortiz Ramos14/12/2012 www.ateneatech.com
  • 2. Usuaris, rols i permisosMòdul “User”Un usuari és una persona que interacciona amb el sistemaUn usuari anònim també és un usuari www.ateneatech.com
  • 3. El sistema permet a un usuari anònim autenticar-se fent servir:  Nom i clau  OpenID  Twitter, Facebook, Linkedin... www.ateneatech.com
  • 4. Es pot configurar el sistema per a que el registre dusuaris el pugui fer:  Lusuari anònim  Lusuari anònim amb aprovació dun administrador  Només un administrador www.ateneatech.com
  • 5. Es pot seguir un procés de validació de correus electrònics:  Lusuari es registra amb:  Nom  Correu electrònic  El sistema li envia un correu amb una adreça dun sol ús  Lusuari accedeix fent-la servir i indica la seva clau daccés www.ateneatech.com
  • 6. El sistema notifica fent servir el correu electrònic quan:  Un administrador registra un usuari  Un usuari es registra i espera a laprovació  Un usuari es registra  Sactiva el compte de lusuari  Es bloqueja el compte de lusuari  Es cancel·la  El usuari demana recuperar la seva clau www.ateneatech.com
  • 7. Modes de visualització  Compte dusuari (user/UID) www.ateneatech.com
  • 8. Els usuaris tenen un o més rolsEl sistema defineix dos rols:  Usuari anònim  Usuari autenticatEs poden crear tants rols personalitzats com sigui necessari:  Administrador  Editor  ... www.ateneatech.com
  • 9. El administrador dona permisos als rolsEls mòduls:  Registren nous permisos al sistema  Veure el contingut  Crear contingut de tipus pàgina  Administrar usuaris  Canviar el nom dusuari propi  ...  Comproven que lusuari actual te un rol que te un permís abans de fer una acció www.ateneatech.com
  • 10. Demo www.ateneatech.com
  • 11. Continguts i tipus de contingutMòdul “Node”Son la peça fonamentalSagrupen en tipus  que es defineixen a:  els mòduls  el perfil dinstal·lació  la interfície dadministració www.ateneatech.com
  • 12. Tipus més comuns:  Pàgina bàsica  Article  Notícia  Activitat  ... www.ateneatech.com
  • 13. Atributs i camps per defecte:  Títol  Cos  Revisions: Crear nova i comentaris  Informació dautoria: Usuari i data denviament  Estat: Publicat, promogut, enganxat www.ateneatech.com
  • 14. Modes de visualització  Contingut complet (node/NID)  Resum (node)  RSS (rss.xml) www.ateneatech.com
  • 15. Permisos:  generals:  Saltar-se el control daccés  Administrar contingut/tipus de contingut  Accedir a la pàgina dadministració de contingut  Veure contingut publicat/contingut no publicat propi  Veure/esborrar/revertir revisions  per cada tipus:  Crear  Editar els propis/tots  Esborrar els propis/tots www.ateneatech.com
  • 16. Demo www.ateneatech.com
  • 17. Formats de textMòdul “Filter” Format de text  Conjunt de filtres  Sapliquen al mostrar el textAl editar el camp “Cos” podem seleccionar-lo www.ateneatech.com
  • 18. Per defecte:  Text pla:  El codi HTML es mostra com a text  Transforma els retorn de línia en HTML  Transforma les URLs en ellaços www.ateneatech.com
  • 19.  HTML filtrat:  Limita alguna de les etiquetes HTML  Transforma els retorn de línia en HTML  Transforma les URLs en enllaços  Corregeix el codi HTML mal format o tallat www.ateneatech.com
  • 20.  HTML complet:  Transforma els retorn de línia en HTML  Transforma les URLs en enllaços  Corregeix el codi HTML mal format o tallat www.ateneatech.com
  • 21. Podem crear tants formats com calguiEls mòduls implementen nous filtres:  External links  Code filter  oEmbed  Pathologic  ... www.ateneatech.com
  • 22. Demo www.ateneatech.com
  • 23. Editors visualsMòdul “Wysiwyg”“What You See Is What You Get”Podem instal·lar un o més dun editorOpcions: YUI editor, NicEdit, Whizzywig, EpicEditor, markItUp, TinyMCE, WYMeditor, CKEditor, openWYSIWYG, jWYSIWYG, FCKeditor. www.ateneatech.com
  • 24. Associem un editor a un format de textPodem configurar:  Opcions generals  Botons  Aparença  Neteja del codi  Estils www.ateneatech.com
  • 25. Demo www.ateneatech.com
  • 26. CampsMódul “Field” i “Field UI”Podem afegir camps a Usuaris, Contingut i altres entitats del sistema www.ateneatech.com
  • 27. Els camps tenen:  Nom  Tipus  Descripció  Obligatorietat  Valor per defecte  Cardinalitat  Altres opcions segons el tipus www.ateneatech.com
  • 28. Els tipus de camps es defineixen als mòduls:  Al nucli:  Text:  Curt  Llarg  Llarg amb resum  Nombre:  Enter  Decimal  Amb coma flotant  Arxiu  Imatge www.ateneatech.com
  • 29.  A mòduls contribuïts:  Enllaç  Correu electrònic  Data  Adreça www.ateneatech.com
  • 30. Grups de camps:  Mòdul contribuït “Field group”  Permet agrupar camps en:  Conjunts  Pestanyes horitzontals/verticals  Acordions  Múltiples passos www.ateneatech.com
  • 31. Gestió de la presentació:  A cada mode de visualització permet gestionar:  Posició del camp  Format: depèn del tipus del camp www.ateneatech.com
  • 32. Demo www.ateneatech.com
  • 33. Arxius, imatges i estilsMòdul “File”Fa possible adjuntar arxius a les entitats.Permet introduir també la descripcióValidació per:  Extensió  GrandariaSistemes darxius:  Públic  Privat www.ateneatech.com
  • 34. Mòdul “Image”És un tipus especial darxiuPermet introduir:  Títol  Text alternatiuValidacions per:  Extensió  Grandària  Dimensions  Màxima  Mínima www.ateneatech.com
  • 35. Estils son conjunts de efectes que es poden aplicar a les imatgesEs poden fer servir com a format al mostrar una imatgePer defecte:  Thumbnail  Medium  Large www.ateneatech.com
  • 36. Els efectes simplementen en mòduls:  Al nucli:  Crop  Desaturate  Resize  Rotate  Scale  Scale and crop www.ateneatech.com
  • 37.  A mòduls contribuïts:  Watermarking  Overlays  Text overlay  Color-shifting  Brighten/Darken  Alpha blending  Canvas manipulation  Background  File Format switcher  Rounded corners (transparent)  Aspect Switcher  ... www.ateneatech.com
  • 38. Demo www.ateneatech.com
  • 39. Termes de taxonomiaMòdul “Taxonomy”Representa una categoria o etiquetaSagrupen en vocabularis www.ateneatech.com
  • 40. Atributs i camps per defecte:  Nom  Descripció  Relacions: terme pare i pesPodem afegir camps www.ateneatech.com
  • 41. Mode de visualització:  Pàgina de terme (taxonomy/term/TID) www.ateneatech.com
  • 42. Referencia a terme: nou tipus de campAssocia qualsevol entitat a un terme  Es mostrarà a la seva pàgina de termeGinys:  Llistat de selecció  Caixes de verificació  Botons de ràdio  Auto-completatPermet crear termes dinàmicament www.ateneatech.com
  • 43. Demo www.ateneatech.com
  • 44. ComentarisMòdul “Comment”Permet afegir comentaris als continguts www.ateneatech.com
  • 45. Configuració per cada tipus:  Obert, tancat, ocult  Niuats  Nombre de comentaris per pàgina  Activar títol de comentari  Formulari a la pàgina del contingut  PrevisualitzacióConfiguració per cada contingut  Obert, tancat www.ateneatech.com
  • 46. Atributs i camps per defecte  Autor  Títol  ComentariPodem afegir camps www.ateneatech.com
  • 47. Permisos:  Administrar comentaris  Veure/Enviar comentaris  Saltar aprovació de comentaris  Editar els comentaris propis www.ateneatech.com
  • 48. Demo www.ateneatech.com
  • 49. BlocsMòdul “Blocks”Permet gestionar que contingut secundari es veu a cada pàginaEls blocs es poden col·locar a regionsEl tema defineix les regions disponibles www.ateneatech.com
  • 50. Propietats dels blocs:  Títol administratiu  Títol  Regió  Visibilitat:  Per adreça  Per tipus de contingut  Per rol dusuari  Per opció dusuari www.ateneatech.com
  • 51. Els blocs es defineixen a:  Els mòduls  La interfície dadministració:  Al nucli:  Blocs bàsics de text  Amb mòduls contribuïts:  “Views”  “Bean” www.ateneatech.com
  • 52. Demo www.ateneatech.com
  • 53. MenúsMòdul “Menu”Permet crear i gestionar menúsPer defecte:  Menú principal  Menú dusuari  Gestió  NavegacióGenera un bloc per cada menú www.ateneatech.com
  • 54. Interfície de gestió denllaços:  Ordenar-los i niuar-los fent servir Drag&drop  Crear enllaços:  Propietats dels enllaços:  Títol  Adreça interno o externa  Descripció  Actiu  Expandit  Element pare  Pes www.ateneatech.com
  • 55. Creació a continguts:  Als tipus:  Menús disponibles  Element pare per defecte  Als continguts:  Afegir enllaç al menú  Títol  Descripció  Element pare  Pes www.ateneatech.com
  • 56. Demo www.ateneatech.com
  • 57. CercaMòdul “Search”Activa la cerca bàsicaIndexa el text de continguts i usuarisImplementa:  Un bloc amb una caixa de cerca  Una pàgina de resultats de la cerca www.ateneatech.com
  • 58. Molt bàsica:  Només paraules complertes  Només paraules de més de tres caràcters  Distingeix entre majúscules i minúsculesEs pot ampliar amb mòduls contribuïts:  Search API  Apache Sorl www.ateneatech.com
  • 59. Demo www.ateneatech.com
  • 60. ÀliesMòdul “Path”Permet crear àlies a les adreces internes.Des de:  El formulari de creació o edició de contingut  Interfície dadministració www.ateneatech.com
  • 61. Mòdul contribuït “Pathauto”Permet generar automàticament per:  Tipus de contingut  Termes de taxonomies  UsuarisPermet fer servir informació daquestes entitats per construir làlies www.ateneatech.com
  • 62. Demo www.ateneatech.com
  • 63. Multi-idiomaMòduls:  Nucli: “Locale” i “Content translation”  Contribuïts: “i18n”, “i18nviews”...Permet traduir:  Interfície  Entitats www.ateneatech.com
  • 64. Interfície  Cadenes de text definides a  mòduls: en Anglés  interfície dadministració: en lidioma per defecte o el que configurem  Cercador general per a traduir  Grups de traduccions  Exportable en format .po www.ateneatech.com
  • 65. Entitats  Continguts, Termes, etc.  Definim el seu idioma al crear-lo  Podem traduir-lo  Correspondència entre traduccions www.ateneatech.com
  • 66. Altres  Blocs  Menús i elements del menú  Aliés dadreces  Variables (nom del lloc, eslògan..) www.ateneatech.com
  • 67. Demo www.ateneatech.com
  • 68. VistesMòdul “Views”Llistats de:  Continguts  Revisions de continguts  Usuaris  Arxius  Mòduls, temes i motors de temes www.ateneatech.com
  • 69. Presentació:  Pàgina  Bloc  Adjunt  Canal www.ateneatech.com
  • 70. Format de presentació:  Per a pàgina, bolc i adjunt:  Llistat sense format  Llistat HTML  Taula  Graella  Menú denllaços  Per canal:  Canal RSS www.ateneatech.com
  • 71. Format delement:  Mode de presentació  Camps www.ateneatech.com
  • 72. FiltresFiltres contextualsRelacionsOrdre www.ateneatech.com
  • 73. I més:  Filtres exposats  Ordre exposat  Capçalera  Peu  Comportament si no hi ha resultats  Control daccés  Paginador  Cache  Agregacions www.ateneatech.com
  • 74. Molt extensible amb mòduls:  Presentació:  Views Data export  Entity Views Attachment  Formats de presentació:  Views slideshow  jCarousel  Views accordion  Calendar  OpenLayersPodem implementar mòduls personalitzats www.ateneatech.com
  • 75. Demo www.ateneatech.com
  • 76. Disposicions (“Layouts”)Mòdul “Panels”Permet gestionar des de la interfície dadministració com es disposen els continguts dintre de diferents elements www.ateneatech.com
  • 77. Permet gestionar:  Amb el mòdul “Panels”  Pàgines  Blocs  Nodes  Amb mòduls contribuïts:  Entitats  Vistes www.ateneatech.com
  • 78. Context:  Permet definir que elements es podran fer servir dintre del “layout”  Fa servir paràmetres de URL i de la sessió  Permet cercar elements relacionats www.ateneatech.com
  • 79. Disposicions:  Reutilitzables  Extensibles des de mòduls i tema www.ateneatech.com
  • 80. Contingut  Els elements que es poden inserir dintre dun “Panel”  Sanomenen “Panes”  Són:  Blocs  Camps de elements al context  Continguts personalitzats www.ateneatech.com
  • 81. Demo www.ateneatech.com
  • 82. Control de fluxMòdul “Rules”Triggered rule:  Esdeveniment → Condicions → Accions www.ateneatech.com
  • 83. Components:  Encapsulen funcionalitats  Tenen paràmetres dentrada i sortida  Tipus:  Rule:  Condicions → Accions  Rule set:  Conjunt de rules  Conditions set (OR)  Conditions set (AND)  Action set www.ateneatech.com
  • 84. Programació:  Una acció especial permet programar lexecució de “Rules” en el futur. www.ateneatech.com
  • 85. Demo www.ateneatech.com