Drupal in a day - SeeD


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • You can add slides about your own company, or ALT + TAB to your own website when introducing yourself/company.
  • By the end of the day, you’ll be able to look at a Drupal site, and understand the main components, and discover how you can get the same results.
  • Now you know how to navigate the administrative area in Drupal, and how to login. This next session is going to be a hands on tour of the main concepts of Drupal which make it unique from other CMSs.
  • What is Drupal? It’s a community of open source web developers, business developers, designers and content managers. Participation from people of all backgrounds and skills is appreciated and welcomed.
  • Plug DrupalCon! Great place to meet collaborators, to hire or be hired, to learn, to socialise.
  • The people involved are the best resource. Connect locally, and go to conferences to make international friendships. And buy developers beers.
  • Drupal is also software. This is where it fits: in Social Publishing Systems. It integrates the aspects of content management systems and social software tools.
  • Many larger companies are using Drupal for sites within their larger network. Drupal excels at content and people.
  • Drupal used here on a sub-site of Digg’s services. You’ll notice there are some services which they do not use Drupal for.. Drupal is a tool in your tool box and can be integrated with other systems...
  • For small sites, it can provide excellent flexibility.
  • Here’s another example of a site in Drupal- Amnesty International. It’s crucial that the site operate in multiple languages, on a variety of machines and connection speeds. (quickly go to next slide)Note to lecturer: Preferably keep this slide as the Amnesty site is the best example of a multi-lingual site with complex needs.
  • The content changes for language per page. This is the same page in Arabic, displaying RTL. How would you have managed that in HTML? Of course this needs to be translated by staff, but this is a way to manage multiple languages.
  • Here’s a relatively simple site. By the end of the day, you’ll see how you can add Menus, blocks, views listing content
  • Go quickly - then extend with additional features…
  • Go quickly
  • Event calendars and Slideshows are really pop. Go quickly.
  • All Drupal sites have the same components. First, we have nodes. We can think of this as the ‘content’. Not everything is a node
  • Configure user behavior:RegistrationEmailProfilesPictures
  • Views can create all kinds of queries, in addition to Event listings. You can send lists of content to maps to be viewed.
  • Drupal’s structure isn’t just the layout, but also, what should appear- where, when and for whom. Site navigation, content or other components. Display content from modules or other sources ImagesAdvertisingTag cloudsContent feedsLinksmuch moreWidgets can be created and placed via the block system in Drupal. There are alternatives to the block system.
  • You should also think about what people will do.
  • Drupal’s theme system. Components include CSS files & PHP files with HTMLCan be displayed by user roleSupports sub-themes
  • Modules combine aspects of control of users, listing content and themes to add functionality to Drupal. They leverage the functionality that exists in Drupal. A hub and spoke model is a good way to think about it. Here’s an example, showing 3 modules working together. The Twitter module connects a Drupal User acct to a Twitter account. This exposes data that Views can display. And Panels can be used to layout those elements on a page.
  • So let’s get started with Drupal.
  • Change site functionality.
  • This is a screenshot of Dreamweaver’s site management overview. Dreamweaver is a WYSIWYG file editor and site management tool. If you just use HTML, your data is stored on all the pages. To update something like a footer on the site, you find and replace all the content. You can use Dreamweaver to connect to a database and use scripting languages such as PHP. But you would have to write your own user management and content management scripts and ensure they are secure.
  • With Drupal, you can use a widely tested and secure tool to dynamically deliver content to your users. Many of the features you need by default are included, and what features are not in the core installation can be downloaded through additional modules.
  • With Wordpress, users place content in a database through an Admin interface. This content is displayed through the use of code placed in template files. Placed in a template file, this code will show 5 posts of the category with the ID 3. Instead, the Drupal way is through back-end configuration through the use of Views.
  • Instead, Drupal prefers more configuration to happen in the administrative interface to control the placement of content in blocks, or the display of lists of content. For example the community has converged on Views as a popular way to build queries. This allows non-programmers to create useful displays of content through a powerful set of options. If talking to developers: Where storing the queries in the database poses performance propblems, these queries can be exported to code.
  • So let’s try enabling a module, adding functionality to our site.
  • In Joomla, features are added in a number of ways. Joomla takes an all-in-one approach to functionality. In this example, the Jtweet module no only controls the source of the tweets, allowing only one user. It also controls the menus, whether or not avatars are displayed. Joomla people often find Drupal “chaotic” because control is not located in one place per feature.
  • Instead, Drupal developers make efforts to reduce duplication of effort. In this example module, Twitter, the Drupal users associate their accounts with a twitter ID. This pulls in their tweets displayed in a sidebar block or on their user profile, and allows them to post to their own Twitter account or a site-wide Twitter account whenever they create new content. The user system handles the users, the menu system handles the menus, and a module called Views handles the display of content. If talking to developers: In this way the community converges on features and maintains a cohesive project which has resisted forking.
  • Talk about “don’t hack core”. Show where they only make changes to sites/ folder to assist in back up migration and upgrading. Here we see the root folder of Drupal. You will notice the modules folder and the themes folder. Never modify these folders or contents. You can override everything in the sites folder. Instructor opens up an installation of Drupal.
  • Let’s look at the modules…
  • Of all the sites you saw so far… You can have this same functionality. Most sites used existing modules, when they do make custom functionality, they often contribute it back to the community. Find something you like, inspect element and see what it’s created by.
  • For example the decisions module and the feedback module
  • It’s available at Drupal.org
  • So let’s try enabling a module, adding functionality to our site.
  • Here’s an example site leveraging several modules. You can replace this screenshot with another site, but make sure it employs the Twitter module, and you highlight that in the next slide.
  • Now we’re going to focus on creating content.
  • Let’s create some content.
  • Just make a note about summary.
  • This is an example showing a page listing teasers, like the front page.
  • Note: filter settings are saved when you set them. Reset to clear filters.
  • Now when you look at a site like Examiner.com you can start to see how this was created.
  • And much of the functionality you saw is in the core system. We’ll start trying this out in the next section.
  • Now you know how to navigate the administrative area in Drupal, and how to login. This next session is going to be a hands on tour of the main concepts of Drupal which make it unique from other CMSs.
  • This is quite a bit of territory to cover in this session.
  • Drupal has two default roles, the Anonymous and Authenticated user. You can make custom roles, such as “Editor”. If an authenticated user can access content, so can all the other custom user roles. Those roles inherit the permissions of the basic authenticated user.
  • Here is a site A site with comments, moderation and front-page (moderation) user-created content.This site has things like 'my favorite articles', 'my favorite recipes', 'add article', 'add recipe', 'become featured woman of the day', ...Members submit content and this material is moderated and promoted.(You can replace this with another site, but make sure it demonstrates user generated content.)
  • Here is a site A site with comments, moderation and front-page (moderation) user-created content.This site has things like 'my favorite articles', 'my favorite recipes', 'add article', 'add recipe', 'become featured woman of the day', ...Members submit content and this material is moderated and promoted.(You can replace this with another site, but make sure it demonstrates user generated content.)
  • Ask learners what kinds of users their own site would have. Tease out the difference between a role and a user. Who will use your site? Give them the most limited access and controls they need.
  • Content types basically become your input forms for content. Nodes, in addition to content like a title or a body, also hold information such as if it is published, who authored the content, revisions, and whether or not content can be commented on.
  • Now we’re going to talk about how the content is arranged on a page. Let’s walk through a quick introduction to these new concepts.
  • Here’s an example Drupal website, Opensource.com. We can use this Drupal website as an example to understand how content is arranged in a Drupal site.
  • Let’s imagine some of the regionsof this site, for example, the Header region and the Right region. Regions are “places” on a page and defined in a theme. They can be customized (that’s all you need to say at this point).
  • But how is the content assigned to these regions? Some modules are outputting blocks of content. A block is a generic term for a content holder. Can you spot the search block? The Login block? A recent poll block?
  • The user login and search block are assigned to show in the Header region. In the Right region we have theCustom menu, the Views and Quicktabs block, and Recent poll block. The Recent poll block, for example, is available when you enable the Poll module.
  • Regions are defined in the themes. You can see available regions on the Blocks administration page. This is Garland, with very few theme regions.
  • Here’s Acquia Marina. There are considerably more regions, and they are a bit easier to spot.
  • Let’s try it! Exercise P-S – control how to do blocks. Configure, create blocks, place them. This is on the block management page, at the bottom. We can see a number of disabled blocks. By selecting the region, you can assign them You can also reorder them. Place the recent comments block in the Left sidebar. Main pointtosay:”By changing block arrangement (Without having touched a theme), you have changed the layout of your page. “
  • Refer to handouts.After adding menu items, they can go to menu management page. They can disable items and nest items.Remark on enabled v expanded and how this depends on the theme.
  • Before Part 3: Themes – review page construction.Let’s review this idea. This is a abstract model of a page build in Drupal.(Go through these quickly, the slides build. Just talk about what is on the screen here.)
  • The page you see in your browser pulls in Regions. Regions are defined in the Theme files. They identify parts of the document. The HTML and CSS around the regions are used to control layout and presentation.
  • Blocks are then assigned to regions. Some modules output blocks. For example, a block displaying a recent poll, or the user login block.
  • Menuare also placed into regions.
  • This is the Marinelli theme. On the site. :et’s try this out.
  • Now we’re going to bring together the concepts and practices we’ve learned so far. This will be a review of things we’ve tried so far, and also extend to try some new things.(The introduction is driven from the slides)
  • Tell people about the extra modules mentioned. (The printed guide shows modules to suggest, but there won’t be time to show how to install a module. There are resources online showing how to install a module. You can demonstrate it, if you have time.)
  • This is what we know so far. Fundamental concepts of DrupalHow to navigate the Drupal admin areaHow to enable or disable functionality: per module, per content type, per userHow to place content around the page
  • Define content typesAdd fieldsCustomize input form with widgets like pull down menus or checkboxes.Activity: Enable CCK
  • Using learner’s examples, use white board to identify what data types, what form widgets and optionally what display options might be used. Let’s add a custom fiels.
  • You can configure the image fields in different ways. In this example, a story post on the left allows multiple uploads per field. On the right we see two different fields for the post, with two different Imagecache settings.Let’s try this now.
  • Create listings of content.Select fields to show.Listings of Nodes, filtered by Type. You can also open these Simple views up in the more complex View interface.
  • Ask audience for some examples. Elicit what is a content type and what are examples of fields. Ask them to think of a special content type of their own. They will MAKE that content type now.
  • Let’s look at this site now. You can even visit it in your browser and inspect the HTML. Can you guess how the site was constructed?- You can ask the numbers and have people guess how they would do it. They can also visit the site and inspect it. Can you see some example content types they may have used (Elicit:news, events, profiles)Can you see where you’d use a Simple View? (Elicit: listing news, list events.)Can you identify any regions they may have used? (Elicit: any examples showing the regions of the site, content, sidebar right, or the header)Can you see where a block would be placed? (Elicit the simple views block in the sidebar region)
  • Use the whiteboard, elicit:Extendable with modules.Customizable content creation and workflows, from CCK to revisions and many modules available for managing content.Search friendly URLs.Role-based access permissions.Social publishing and collaboration tools.Configurable layout and visual design
  • Drupal in a day - SeeD

    1. 1. Drupal in a DayBogotá<br />Presentador: <br />Jairo Pinzón – Gerente General SeeD<br />Instructores: <br />Aldibier Morales – Director de IT SeeD<br />Federico Jaramillo – Gerente de DesarrolloSeeD<br />
    2. 2. TODO LO QUE SIEMPRE QUISO SABER Y NUNCA SE ATREVIÓ A PREGUNTAR<br />¿QUÉ ES DRUPAL?<br />Es una comunidad de software libre basada en una herramienta de construcción Web. Actualmente Drupal es visto como uno de los mejores «frameworks» para aplicaciones y desarrollos web disponibles y cada vez tiene más adeptos en todo el mundo <br />
    3. 3. ¿SABIA UD? QUE<br />Drupal es una adaptación al Inglés de la palabra Alemana druppel, que significa gota,<br />Como por ejemplo en «WaterDroplet «<br />HISTORIA DE DRUPAL<br />Originalmente el código fue escrito por DriesBuytaert como una consola de mensajes; Drupal se convirtió en un proyecto de código abierto en 2001. Una gran comunidad ahora ayuda en su constante desarrollo en la medida en que Drupal crece rápidamente.<br />
    4. 4. DrupalCon es una reunión bi-anual que hacen los drupaleros para aprender, discutir y avanzar en el desarrollo de Drupal y para conectarse con otros miembros de la comunidad<br />
    5. 5. PREMIOS<br />
    6. 6. Lo queveremos hoy<br />?<br />Introducción<br />Antecedentes<br />Resaltar la arquitectura de Drupal<br />PaseoPráctico<br />PrincipalesConceptos<br />Desmitificar la jerga<br />Puntos Clave<br />FuncionalidadÚnica<br />Configuración<br />Avanzado<br />Conectar los conceptos<br />Lo quéesposible<br />Recoger<br />¿Quésigue?<br />Preguntas & Respuestas<br />?<br />?<br />?<br />?<br />?<br />
    7. 7. Sesión 1. Introducción<br />Todosobre Drupal<br />
    8. 8. El fenómeno Drupal<br />
    9. 9. El Crecimiento de Drupal<br />Drupal - Descargasmás de 230,000 vecessolo en marzo de 2010<br />Más de 6,700modulos contribuídos      Disponibles<br />De los cuales 5,000 son de hace un año<br />Cerca de 3,000 personasAsistieron al DrupalCon de San Francisco600% de crecimiento en 2 años<br />
    10. 10. DrupalCon Chicago<br />Recibió a 3,000 personas de nuevo<br />
    11. 11. Estoesunacomunidad<br />Encuentros, trabajo de campo , y <br />Conferencias<br />By Narno<br />Eventos<br />Drupal<br />DrupalConCopenague<br />23-27 de agosto<br />http://cph2010.drupal.org/<br /> By Narno<br /> By beta.robot<br />
    12. 12. Parte 1<br />Entender los fundamentos de Drupal<br />
    13. 13. Es un Software de publicación de contenidos=> Base paracreación de sitiosparticipativos<br />Flujos de<br />trabajo<br />blogs /<br />wikis<br />Redes<br />Sociales<br />foros/ <br />comentarios<br />taxonomía<br />Búsqueda<br />RSS<br />contenido<br />Estadísticas<br />Calificación<br />tagging<br />Usuarios<br />Gestor de<br />contenido<br />CMS<br />Software Herramientas<br />Participativas<br />“Social<br />Publishing<br />Systems”<br />© 2010 Acquia, Inc. <br />
    14. 14. Carrusel de imágenes<br />http://www.bestbuymobile.com/<br />
    15. 15. Menús<br />Bloques<br />http://about.digg.com/<br />
    16. 16. capasporsecciónpersonalizables<br />
    17. 17. Sitios Multi idioma<br />http://www.amnesty.org/en<br />
    18. 18. Sitios Multi idioma<br />http://www.amnesty.org/ar<br />
    19. 19. MadeLoud.com<br />Menús<br />Vistas<br />Bloques<br />© 2010 Acquia, Inc. <br />
    20. 20. Calificaciones<br />Archivos de descarga<br />
    21. 21. Light Box<br />Deslizador –(Slider)<br />http://www.christinaaguilera.com<br />
    22. 22. Eventos<br />Video<br />Slideshow<br />http://buytaert.net/eric-clapton-using-drupal<br />
    23. 23. Posibilidades con Drupal<br />
    24. 24. Cartoon Network<br />
    25. 25. Young & Rubicam<br />
    26. 26. ¿Cómohace Drupal todoesto?<br />Los principalescomponentes de <br />“un Drupal”<br />
    27. 27. © 2010 Acquia, Inc. <br />Drupal Basics: Nodes<br />Structured content<br />Different types<br />Model data<br />Nodes are not:<br />Comments<br />Users<br />Listings of content<br />But you can make comments and users into nodes… if you need to.<br />
    28. 28. © 2010 Acquia, Inc. <br />Drupal Basics: Users<br />Define custom roles<br />Control account creation<br />Set granular access controls by role<br />
    29. 29. © 2010 Acquia, Inc. <br />Drupal Basics: Lists<br />Listing of content<br />Forum, Blog, Views,<br />Views query builder for lists of information<br />Table, grid, list, custom<br />Sorting, filtering<br />Define relationships<br />Create pages, blocks and RSS feeds<br />
    30. 30. © 2010 Acquia, Inc. <br />Drupal Basics: Structure<br />Menus, breadcrumbs, blocks<br />What should appear where and when and for who<br />Defined with your rules about <br />
    31. 31. Drupal Basics: Functionality<br />What will user do?<br />Create content<br />Vote<br />Submit<br />Buy<br />Who can do this? Where and how is it done<br />
    32. 32. © 2010 Acquia, Inc. <br />Drupal Basics: Themes<br />Content presentation layer<br />Separate from data<br />Defines how content is displayed<br />Flexible, customizable<br />Control visual layout and rendering markup<br />
    33. 33. Modules add functionality<br />Drupal Core<br /><ul><li>User login
    34. 34. Permissions
    35. 35. Access to content</li></li></ul><li>Part 2<br />Getting Started With Drupal<br />
    36. 36. Exercise A: Change Site Settings<br />
    37. 37. Compare to Dreamweaver<br />
    38. 38. Drupal – database driven<br />In Site configuration > Site information > Footer message<br />
    39. 39. Compare to Wordpress<br />Theming in Wordpress<br />Example template code<br />$featuredPosts = newWP_Query(); <br />$featuredPosts->query('showposts=5&cat=3');<br />
    40. 40. Drupal: back end configuration<br />http://drupal.org/project/views<br />
    41. 41. Part 3<br />Modules: extending Drupal functionality<br />
    42. 42. Compare to Joomla<br />
    43. 43. Drupal: leverage existing functionality<br />http://drupal.org/project/twitter<br />
    44. 44. “Don’t hack core”<br />✖<br />✖<br />
    45. 45. © 2010 Acquia, Inc. <br />Drupal Basics: Modules<br />Plugins that extend Drupal functionality<br />More than 1,800 community modules available<br />Often controlled by role-based permissions<br />
    46. 46. Economist.com<br />
    47. 47. Economist.com<br />Decisions module<br />Feedback module<br />
    48. 48.
    49. 49. Exercise B: Enable a module<br />
    50. 50. Twitter module<br />Random sort<br />http://www.stubru.be/<br />
    51. 51. Part 4-5<br />Creating and Managing Content<br />
    52. 52. Exercise C-E: Managing Content<br />
    53. 53. Split summary<br />Divides the text<br />
    54. 54. Controls teaser and full view<br />Automatic<br />Controlled<br />
    55. 55. Filters<br />
    56. 56. Review<br />Basic building blocks of Drupal<br />The range of modules available<br />How to access this functionality<br />How to manage content<br />
    57. 57. Examiner.com<br />User roles for publishing<br />Slideshow<br />Calendar<br />
    58. 58. Examiner.com<br />Categorized content<br />Multiple hierarchies<br />
    59. 59. Session 2. Overview<br />Hands-on tour of content management<br />
    60. 60. What we’ll do in this session<br />Part 1: Creating a simple content type<br />Part 2: Organize your content with taxonomy<br />Part 3: URLs and Paths to content <br />Part 4: Automating path creation <br />Part 5: Users, roles and permissions<br />Part 6: Create a role<br />Part 7: Comments <br />
    61. 61. Part 1<br />Creating a simple content type<br />
    62. 62. Part 5<br />
    63. 63. Users, roles and permissions<br />
    64. 64. http://nl.yunomi.be/<br />
    65. 65. A list of all the members of the site.<br />http://nl.yunomi.be/<br />
    66. 66. Think about your users<br />
    67. 67. Review<br />What do we know about content management in Drupal?<br />What are content types?<br />What is a node?<br />How can we organize content?<br />How do I turn off comments for an entire content type? <br />What is a user as opposed to a role?<br />
    68. 68. Session 3. Regions, Blocks and Layout<br />Hands-on tour<br />
    69. 69. Navigation and Layout<br />Part 1: Control where content appears with Regions, Blocks<br />Part 2: Navigation and the menu system <br />Part 3: Control how your site looks with Themes <br />Part 4: Administration Theme<br />
    70. 70.
    71. 71. Header region<br />Right region<br />
    72. 72.
    73. 73. User login block<br />Search block<br />Custom menu<br />Views block output with Quicktabs<br />Recent poll block<br />
    74. 74. Navigate: Site Building > Blocks<br />
    75. 75.
    76. 76. Navigate: Site Building > Blocks<br />
    77. 77. “Enabled” v “Expanded”<br />
    78. 78. Page construction in Drupal<br />Page <br />
    79. 79. Pulls in regions defined in theme<br />Page <br />Header<br />Content<br />Sidebar<br />Footer<br />
    80. 80. Blocks are assigned to regions<br />Page <br />Header<br />Content<br />Sidebar<br />User login<br />Recent poll<br />Footer<br />
    81. 81. Menus are also arranged as blocks<br />Page <br />Header<br />Primary links menu<br />Content<br />Sidebar<br />User login<br />Recent poll<br />Footer<br />
    82. 82.
    83. 83. Session 4. Advanced configuration<br />Hands-on tour<br />
    84. 84. Advanced Configuration<br />Part 1: Extend a custom content type<br />Part 2: Add an image to a content type <br />Part 3: Create a view block of that content<br />Part 4: Place that block on the page<br />Part 5: Improve find-ability and Configure Search<br />
    85. 85. What do we know so far<br />
    86. 86. Meet CCK<br />Define a content type<br />Select default settings<br />Comments allowed?<br />Promoted to front page?<br />Add fields<br />Data type: text, integer<br />Form widget, select box, radio buttons<br />Display, how it shows up<br />Fields appearing in forms<br />
    87. 87. CCK fields<br />Datatype<br />Numerical, long text, text, etc<br />Options widgets<br />Select lists, checkboxes, image upload. <br />Validation options.<br />Display<br />How to display the content<br />
    88. 88. Add an image field<br />Multiple uploads per field<br />Two different image fields<br />
    89. 89. Create SimpleView listings of content<br />Query content<br />Filter out content types<br />Sort by date<br />Examples<br />List of titles in a sidebar block.<br />Titles, summary and links on a page.<br />
    90. 90. Custom content<br />What kinds of content would you like on your site?<br />Would it have comments?<br />Does it appear on the front page in a list by default?<br />
    91. 91. Session 5: Review & Questions <br />Recap and Where to go next?<br />
    92. 92. 1<br />2<br />3<br />5<br />6<br />4<br />
    93. 93. What do we know about Drupal?<br />Review what we learned...<br />Any questions?<br />