Drupal: Funcionalitats i mòduls

396 views

Published 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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
396
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

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
  • Drupal: Funcionalitats i mòduls

    1. 1. Drupal: Funcionalitats imòdulsGlobal Training DaysSiddharta Navarro / Luis Ortiz Ramos14/12/2012 www.ateneatech.com
    2. 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. 3. El sistema permet a un usuari anònim autenticar-se fent servir:  Nom i clau  OpenID  Twitter, Facebook, Linkedin... www.ateneatech.com
    4. 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. 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. 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. 7. Modes de visualització  Compte dusuari (user/UID) www.ateneatech.com
    8. 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. 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. 10. Demo www.ateneatech.com
    11. 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. 12. Tipus més comuns:  Pàgina bàsica  Article  Notícia  Activitat  ... www.ateneatech.com
    13. 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. 14. Modes de visualització  Contingut complet (node/NID)  Resum (node)  RSS (rss.xml) www.ateneatech.com
    15. 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. 16. Demo www.ateneatech.com
    17. 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. 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. 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. 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. 21. Podem crear tants formats com calguiEls mòduls implementen nous filtres:  External links  Code filter  oEmbed  Pathologic  ... www.ateneatech.com
    22. 22. Demo www.ateneatech.com
    23. 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. 24. Associem un editor a un format de textPodem configurar:  Opcions generals  Botons  Aparença  Neteja del codi  Estils www.ateneatech.com
    25. 25. Demo www.ateneatech.com
    26. 26. CampsMódul “Field” i “Field UI”Podem afegir camps a Usuaris, Contingut i altres entitats del sistema www.ateneatech.com
    27. 27. Els camps tenen:  Nom  Tipus  Descripció  Obligatorietat  Valor per defecte  Cardinalitat  Altres opcions segons el tipus www.ateneatech.com
    28. 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. 29.  A mòduls contribuïts:  Enllaç  Correu electrònic  Data  Adreça www.ateneatech.com
    30. 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. 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. 32. Demo www.ateneatech.com
    33. 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. 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. 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. 36. Els efectes simplementen en mòduls:  Al nucli:  Crop  Desaturate  Resize  Rotate  Scale  Scale and crop www.ateneatech.com
    37. 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. 38. Demo www.ateneatech.com
    39. 39. Termes de taxonomiaMòdul “Taxonomy”Representa una categoria o etiquetaSagrupen en vocabularis www.ateneatech.com
    40. 40. Atributs i camps per defecte:  Nom  Descripció  Relacions: terme pare i pesPodem afegir camps www.ateneatech.com
    41. 41. Mode de visualització:  Pàgina de terme (taxonomy/term/TID) www.ateneatech.com
    42. 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. 43. Demo www.ateneatech.com
    44. 44. ComentarisMòdul “Comment”Permet afegir comentaris als continguts www.ateneatech.com
    45. 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. 46. Atributs i camps per defecte  Autor  Títol  ComentariPodem afegir camps www.ateneatech.com
    47. 47. Permisos:  Administrar comentaris  Veure/Enviar comentaris  Saltar aprovació de comentaris  Editar els comentaris propis www.ateneatech.com
    48. 48. Demo www.ateneatech.com
    49. 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. 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. 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. 52. Demo www.ateneatech.com
    53. 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. 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. 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. 56. Demo www.ateneatech.com
    57. 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. 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. 59. Demo www.ateneatech.com
    60. 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. 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. 62. Demo www.ateneatech.com
    63. 63. Multi-idiomaMòduls:  Nucli: “Locale” i “Content translation”  Contribuïts: “i18n”, “i18nviews”...Permet traduir:  Interfície  Entitats www.ateneatech.com
    64. 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. 65. Entitats  Continguts, Termes, etc.  Definim el seu idioma al crear-lo  Podem traduir-lo  Correspondència entre traduccions www.ateneatech.com
    66. 66. Altres  Blocs  Menús i elements del menú  Aliés dadreces  Variables (nom del lloc, eslògan..) www.ateneatech.com
    67. 67. Demo www.ateneatech.com
    68. 68. VistesMòdul “Views”Llistats de:  Continguts  Revisions de continguts  Usuaris  Arxius  Mòduls, temes i motors de temes www.ateneatech.com
    69. 69. Presentació:  Pàgina  Bloc  Adjunt  Canal www.ateneatech.com
    70. 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. 71. Format delement:  Mode de presentació  Camps www.ateneatech.com
    72. 72. FiltresFiltres contextualsRelacionsOrdre www.ateneatech.com
    73. 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. 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. 75. Demo www.ateneatech.com
    76. 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. 77. Permet gestionar:  Amb el mòdul “Panels”  Pàgines  Blocs  Nodes  Amb mòduls contribuïts:  Entitats  Vistes www.ateneatech.com
    78. 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. 79. Disposicions:  Reutilitzables  Extensibles des de mòduls i tema www.ateneatech.com
    80. 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. 81. Demo www.ateneatech.com
    82. 82. Control de fluxMòdul “Rules”Triggered rule:  Esdeveniment → Condicions → Accions www.ateneatech.com
    83. 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. 84. Programació:  Una acció especial permet programar lexecució de “Rules” en el futur. www.ateneatech.com
    85. 85. Demo www.ateneatech.com

    ×