Ready. Set. Drupal! An Intro to Drupal 8, Part 1
•Download as PPTX, PDF•
10 likes•4,282 views
In this two part series, we'll give you a quick introduction to the Drupal 8 out-of-the-box site building experience. This course is for people who are completely new to Drupal. You might be a developer or a decision maker, but you need to know what makes Drupal tick, and fast. In part 1, you’ll get an in depth overview of the platform, a status update on the latest version, and the tools you need to get up to speed. This course includes: Presentations: We've condensed the most essential information about Drupal into this quick course. Demos: Watch me completing specific tasks as I build a site. Tutorials: Download step-by-step guides and try out the tasks yourself. No matter your experience level or background, this course will get you familiar with the next up-and-coming version of Drupal. Want to sign up for part 2? Register here: https://www.acquia.com/resources/webinars/ready-set-drupal-intro-drupal-8-part-2
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (18)
More from Acquia
More from Acquia (20)
Recently uploaded
Recently uploaded (20)
Ready. Set. Drupal! An Intro to Drupal 8, Part 1
- 1. http://training.acquia.com Ready. Set. Drupal! A quick introduction to the Drupal 8 out-of-the-box site building experience. http://training.acquia.com/drupalready
- 2. Introduction What’s this all about?
- 3. About me • Heather James • Manager of Learning Services • @learningdrupal training.acquia.com/events
- 4. Join me for Part 2! acquia.com/resources/webinars
- 6. About you! • What other systems have you used? • What do you know about Drupal already? What’s in your toolbox?
- 7. What we’ll build… training.acquia.com/drupalready
- 8. Step-by-step • Presentations • Demos • Activities – try it yourself! http://training.acquia.com/drupalready
- 9. Ready check! You will need • A working copy of Drupal 8 – most recent Beta. • Acquia Cloud free site acquia.com/drupal-8 • Materials! Nice to have • Browser inspection tool such as Firebug for Firefox, or “Developer mode” in Chrome. • Lorem Ipsum text generator. http://training.acquia.com/drupalready
- 10. Task: Drupal 8 – Acquia Cloud • Go to acquia.com/drupal- 8 • Choose to try now. • Configure your site acquia.com/drupal-8
- 11. Bonus: Local copy • Install Dev Desktop 2 • Connect locally, securely. docs.acquia.com/dev-desktop2/install
- 12. Lesson 1: What is Drupal? Who is using it, and how.
- 13. In Lesson 1 • Presentation: Who’s using Drupal? What kinds of sites are built in Drupal? • Demo: Orientation around Drupal, and using the tasks and lessons. • Task: Make sure your site is set up!
- 14. “Webmasters” saved by scripting languages
- 15. In comes Drupal! • Founded by Dries Buytaert in his college dorm, circa 2001. • CMS: Content management system • Popular: 1 out of every 50 websites • Flexible: From programmable API to UI tools for modeling data and display • OSS: Open source software (GPL v 2+) Photo by Kathleen Murtagh Dries' State of Drupal keynote (CC BY 2.0)
- 16. Many great examples Economist.com, Dev.twitter.com, Whitehouse.gov, The King Center
- 17. Assembling pages in Drupal We’ll look at the individual components that make up a specific page in Drupal drupal.com/showcases
- 18. Content management Mobile friendly administration and responsive themes out of the box drupal.com/get-started-with-drupal
- 19. Content management • Inline editing • Image management • Flexible and fully configurable admin. • Role-based permissions.
- 20. Demo: Admin Orientation • Click > paths > start from Admin menu. • Menu can be docked top or side. • “Back to site” to see changes. Tasks available at: training.acquia.com/drupalready
- 21. Task: Get into your site • Everyone has their site installed? • If so, try changing your site title.
- 22. Lesson 2: Drupal 8 Status Warning: Under construction!
- 23. In Lesson 2 • Presentation: Drupal 8 Status Report • Demo: How to find out where Drupal is in development cycle. • Task: Sign up to Drupal.org.
- 24. You are here: API Completion phase drupal.org/core/release-cycle
- 25. What’s next? • More beta releases! • Release candidate: Drupal 8.0.0 • Future minor releases will add features: Such as Drupal 8.1.0 Betas Test RC1 Test 8.0 Ready! Minor New features drupal.org/node/2135189
- 26. What’s the latest release? drupal.org/node/3060/release
- 27. Task: Get your “d.o” account • Go to Drupal.org • Create an account • Login! http://drupal.org
- 28. Lesson 3: Thinking like Drupal Assembling pages
- 29. In Lesson 3 • Presentation: The page model. • Demo: Create content, add a page, place in the main menu. • Task: Follow the steps in the demo to add a page to your site.
- 30. Limited by a mental model example.com section section page page page page Home page About us Team Mission News Category Category News item News item Services Your "mental" site map “Pages” in physical “folders”
- 31. Other CMSs? Page added “into” site structure This example is Typo3, what is your previous CMS like?
- 32. Drupal holds data Basic Articles pages Comments Terms Users “ “ Blocks Structured data: referred to as “Content entity” types in D8.
- 33. Generated lists of content drupal.com/showcases Shows examples of pages created from lists of content on the fly. FYI: Built in Drupal 8!
- 34. Demo: Add a page • Add a Basic page. • Add link to menu. • Manage menu.
- 35. Task: Add a basic page • Add a “Basic page”. • Link from the “Main menu.” • Challenge: Manage menu or Add an article.
- 36. Review • Adding content • Menu management decoupled from adding content Attribution-NoDerivs 2.0 Generic (CC BY-ND 2.0) by JuditK http://www.flickr.com/photos/juditk/5879492679/ Next: Assembling your site in Drupal
- 37. Lesson 4: The Drupal Magic Trick
- 38. In Lesson 4 • Presentation: Fields and modeling data • Demo: Customize a content type, create content, create a view. • Task: Follow the steps in the demo to customize a content type.
- 39. Structured data: Fields In HTML: Body text Tags Location Media (video, images) Title Body text Compare: Which allows for better input and display control? Title Image upload Location Tags
- 40. Content types and fields Generic Content type settings Title Author Date published Comments Menu options Revisions Article + fields: Image Body text Tags Tips + fields: Video Body text Tags Link Content types: Define defaults and add fields (usually)
- 41. Consider your design • Limit your fields to only what you need to reuse and display.
- 42. 3 example display options View modes
- 43. Flexibility for different conditions With Drupal, you can reuse content intelligently.
- 44. Demo: Adding an article • Go to Content > +Add content. • Select article. • Review the form. Content > + Add content > Article
- 45. Structured input and display
- 46. Link: a module providing a field type Manage > Structure > Content types > Article > Manage fields
- 47. Demo: Adding a field • Enable Link module. • Add a new field to the article content type. • Test by creating an article. Extend > Link module
- 48. Task: Customize a content type A. Create an article B. Enable Link module C. New field on Article D. Test Articles
- 49. Review • Structuring data input. • How else could you validate? • What other content would you model for this site?
- 50. Add fields to… Content types Blocks Comment forms Contact forms Terms Users Any “Content entity types” in Drupal 8 You can create your own drupal.org/node/2166447
- 51. Drupal Entities Users Taxonomy terms E. Webb Germany J. Beeman Spain adventure city break sailing shopping Content (nodes) • Pet-friendly holidays for the whole family. • Drum and dance in Comments city break dwight 8 Sept Wow, can't wait to get visit. joe 8 Sept Me too! Mali. • Indian adventure on a river boat cruise. • Mud baths and hot springs of Beppu. • Hidden Paris by night in the winter. Blocks Block title Block text here. Some information about something. http://link123.com Contact forms Subject Message text field. Custom fields as needed. Entities are one instance of an entity type. Each has a unique ID. These are examples of “Content entities” in Drupal. Examples of content entities in Drupal 8
- 52. Block example Default basic block has one body text field. What if you want an image and a link? With “Block Types” in Drupal 8, you can add fields. Such as an image or link field. Add fields to block types
- 53. Lesson 5: Building Drupal sites Get familiar with Drupal lingo
- 54. In Lesson 5 • Presentation: Displaying content • Demo: What’s available. Options for data input and display. Creating a view. • Task: Create a View to list content.
- 55. Most sites: Lists of data? • Dynamic lists of content • Users, members • By terms or categories • Most popular/commented Visit http://opensource.com an example Drupal site
- 56. Views wizard Once you select the base table of your query this can’t be changed. Base table (content, user, terms, etc) cannot be changed later.
- 57. Views UI What to select & filter How to format & display
- 58. Demo: List of articles • Add list of Articles • Tab in main menu Structure > Views > + Add new view
- 59. Task: Create a list of articles • Add a view • Select options for Content type > Article. • Challenge: Change display! Structure > Views > + Add new view
- 60. Review • Use Views to list content, users, terms, comments, etc. • Compare to examples you’ve done in other systems/frameworks. Next: Extending Drupal
- 62. Change the image styles! You can change the display and even the image styles, crop, etc.
- 63. Review!
- 64. How was this built? Inspect the code and body tag for information. Go have a look! drupal.com/get-started-with-drupal
- 66. How are these components added? Inspect the elements and look for clues.
- 67. Answer? All are blocks (in red) Some parts come from Views (in blue)
Editor's Notes
- You can leave this slide up as people come in to the room. Check out the Trainer Tips for ideas on room set up, mapping the room, and learning people’s names. http://training.acquia.com/partners/trainer-tips
- This short course “Ready. Set. Drupal!” assumes you know absolutely nothing about Drupal. You might be a developer or a decision maker, but you need to know what makes Drupal tick, and fast. No matter your experience level or background, we’ve condensed the most essential information about Drupal into this quick course.
- (Replace with an introduction about yourself – you don’t need a picture, but I’m using this in a video.) Hi, I’m Heather, Manager of Learning Services at Acquia. If you have questions about training you can contact me on twitter. You can check out our public schedule of training events.
- Dec 4th! Please give us your feedback at the end of this session.
- Add a slide about your company or your work. This helps people know who you are, what you’re knowledgeable about and how to find out more about you if they’re interested.) We try and make the training we do interactive, creative and fun. The training is delivered in Classrooms for public and on-site client training, but we also have both live and self paced training.
- Ask questions of the audience. Try to find out what other systems they are familiar with, you can refer to them later to make connections.
- We’ll build this site in this course. It has a blog, showing articles which we can display in a grid, sort of like a Photo gallery. In this course, I’m going to give you topical presentations and you can watch me completing specific tasks as I build a site. Then, you’ll download step-by-step tutorials and try out the tasks yourself. I think it’s best to learn by doing, but if you’re in a hurry you’ll start to get a feel for how you can work with Drupal just by watching the presentations and demos. Soon you will be able to sign up to the online course, and just sit back and watch the videos. If you do know Drupal, and you’d like to run this course yourself, the materials are freely available for you to use. I’ll include the links in the online course to download the, materials and links to sign up online.
- We have so much so show you, there’s so much you can do with Drupal. Though we have a shorttime today. So we wanted to leave you with additional tips and advice about what is possible with Drupal. Each of the steps is written out clearly so you can follow along and complete them.
- If you were able to get people to install D8 ahead of time, you can skip the next task and just make sure everyone is set up now. Otherwise in the next slide have people start setting up their sites, direct them to complete the task. As they wait for their site to set up, move on to Lesson 1.
- A super easy option for trying out Drupal is Acquia’s free hosting. At the time of making this presentation, the latest Drupal 8 version is this beta. However, this will change as new versions become available. Go now to set up your new free site for Drupal 8. There are just a few settings to complete. Make sure to pick a server region closest to you, that will make it faster. After you configure the settings and click “create site” it will take a few minutes. While you wait, you can go on to the next presentation. Important: during installation they will see the option to choose another language, if that is relevant to your group, Note that localize.drupal.org does not yet support the full Drupal 8 API and does not have all translatable strings.
- As an instructor, we advise that you install Dev Desktop and download the site locally. This way you can easily show an example workflow as you develop the site.
- You’ve introduced the idea of getting the site set up, you can begin
- Sites were mainly text and images. Hierarchical site structure. Sites were assumed to be accessed mainly from their front pages. Site maintenance consisted of updating text files. Too many text files. In comes database driven sites. Templating languages like PHP. Separate data and business logic separated from display. Users, logging in and interacting. Non technical staff managing websites.
- (Brief history of the project in a context your audience will understand.) Good programmers are lazy programmers! In the early 2000s, developers thought it would be more clever to share code. PHP, a template language, was growing in popularity as an open source scripting language. Dries (pronounced drees like trees in English, with a D), created an online community and the software behind it. Then he shared the code, and Drupal was born.
- Now Drupal is used by many organizations all over the world. (You don’t need to dwell here, two more slides detail this point again.)
- If you didn’t already, Open up Drupal.com now. And browse through the site, which is also built on Drupal 8. View through the site. Explain they don’t know how the site is built now, but by the end of the course, they will understand better.
- Drupal 8 is mobile friendly right out of the box. For example, showing HTML 5 form elements here.
- The screenshot demonstrates that you can configure even the administrative lists because they are developing using the Views module. In this case we added a filter by author.
- The goal in the demo is to make sure everyone is logged into their site, has the tasks open in another window, and they can navigate around the UI. Give a quick tour the admin area. Show how the admin bad can be docked top or left. And how to get back to the site.
- Make sure everyone is all set up. You should have time to have everyone do the challenge exercise. If not, just move to the next lesson.
- (We’re going to emphasize the current state of Drupal, and what is expected at this stage. ) Right now you shouldn’t expect to build a site you can keep for the coming years. Think of the site you build today as scrap paper, and be ready to have to tear it all down.
- This great diagram shows you where we’re at with development of D8. The beta releases are coming out now. As you can see, in red column, site builders are invited to come check out Drupal 8 when Beta releases come out. So you’ll find some things under construction. . Betas are good testing targets for developers and site builders who are comfortable reporting (and where possible, fixing) their own bugs, and who are prepared to rebuild their test sites from scratch when necessary. Beta releases are not recommended for non-technical users, nor for production websites. More information on beta releases.
- The first release of Drupal 8.0 will be fully functional with all the key features working and in place. The community has changed the release process going forward introducing minor releases every 6 months. We won’t be locked in to the features which come out with the first release. Most importantly: Backward compatibility preserved between minor releases. The more people help, the faster we can find and fix bugs, and the faster 8.0.0 gets released. The faster 8.0.0 gets released, the faster we can start adding new features for Drupal 8.1.0.
- Go to d.o and this link to see what is the latest release. Prompt the audience to go check this link, and see what is the latest release. Is it different from the screenshot here? What version is currently available?
- Have everyone make an account on Drupal.org. We’ll be asking them to search the site through the course, and visit it. In the English speaking community, sometimes you’ll hear Drupal.org referred to as D dot O.
- In this lesson we’ll explore the Drupal page model, and consider how it’s different from what you know.
- In your mind, you may be thinking of a “site map”.... this persistent model is so ingrained in us. Folders, documents... It’s a familiar physical metaphor, but it’s not at all related to how the information is stored a retrieved. And it’s limiting. But what if you want news to appear in several sections of the site, or menus to display based on user roles and permissions?
- Here is an example of a random CMS, Typo3. Many custom and proprietary CMSs work on the notion that you place “pages” into a “menu”… and the hierarchical menu therefore becomes the navigation. This is intuitive, and relates back to that mental model of placing “pages’ in physical folders. Prompt: Ask the learners for their prior experience of using CMSs, what were they like?
- Drupal sees all of these different things as structured data. Technically, they are referred to as Content entity types in Drupal 8. This means you will be able to add fields to each of these things in Drupal 8, and have multiple instances of the same “type” of thing.
- For example, Drupal.com itself (built in Drupal 8) has a page listing examples of sites by industry. The list is generated, not static. Content editors only have to add a new entry to have it included here.
- As you create the page, add a link to the main menu. Then go to the menu management section and reorder the menu. Emphasize that menu management is decoupled from adding content.
- Go to your site, and demonstrate adding a basic page. Then make sure everyone can access the tasks and they see the directions to add a Basic page.
- The basic page we created isn’t an example of how pages are assembled in Drupal. We often use the analogy of Lego with Drupal. The comparison is useful because we can think of some systems working well out of the box. Yet if you want to customize them, it’s more difficult. With Drupal you can get more customization, but the individual pieces are more generic.
- Without structuring the content we can’t display it. Use fields to structure. Imagine if you had generic posts with a page title and body text. Your editors might put in any manner of content, such as text, images, location information, etc. If you structure the content you have more control of what data gets saved when editors add content. Fields could be considered the smallest unit of reusable data in a Drupal site.
- Let’s take two example content types: Article which you’re familiar with, and “Tips” a possible new content type we could add to the site. Content types track information such as the author, title and date published by default. There are also some options are provided when you create the content type. You can set defaults: will we allow comments, menu links or automatically save revisions? When you set the defaults you define a content type. To that you can add fields.
- make sure that the page designs accommodate all the content types for the site and provides guidance on the bits of text and media that will be available for the page. If events must be sorted by date on a calendar, then Date has to be captured in a separate field and it has to be sortable data, not just text. Depending on the complexity of the site, a high-to-medium level of detail is usually sufficient for designers.
- Consider these three situations, with the same content displaying. The full article A portion displaying on a section page as part of a more complex layout. A search results page.
- Say for example, we have to display a featured article on the front page, and then the full article when they want to read the content; and then a gallery of all article images as way to browse the same content. Drupal gives you control to make different modes for viewing content.
- Demo on your own site: Add an article. We could have users enter content into this unstructured text field, but we have no control. Pose the problem: We want to have editors add external links into each article. In the future, we might change the way these links display, control how they appear… we could have authors add links directly into the “Body” field, but then we have no control over where or how these appear.
- Demo: Again, visit the article creation or editing form, if you haven’t already. So we want to control how links are input, validate they are in fact links, and also control how they display. If we had a link field on the form we could do this!
- Demo: Go to manage fields for the Article content type. Show in your demo, what field types are available. You want to add an external link, but the field type isn’t available. Enable the module, and return to the manage fields screen, and VOILA.
- Demo: Show enabling the Link module Tip: When you go to add the new field, make sure the link module is NOT installed! Then you can get a chance to show them the link field becomes available AFTER you enable the module.
- Prompt learners with questions: We saw how to structure data input, with a field. What other validation options did you see? What if you wanted to ensure each time an article was created, they always put in a link? (make it required). What other content types could you model? You will talk more about this in the next section.
- These are the entities available across the system. Entities Content Entity types are structured data, to which you can add fields. if you can store data, that's called a “content entity.
- The screenshot shows a basic block with a text field. You can add images inline or links inline if you like. But you can't universally control display.
- To reduce the concept of database driven web development down to the simplest explanation: We can say that websites are made of lists of content. On opensource.com Dynamic lists my be rendered based on the number of comments on an article. They may also show lists of content by the main categories: Business, education, government, and so forth.
- You can get most things done right from within the wizard. Note that the WIZARD disappears after your initial set up. When you edit again you’ll be in the regular Views editor. Note: The first thing you choose is your base table. Once you select that it can’t be changed.
- And when you want to access the advanced settings, there is the full UI. Format: You can change for example, if content is listed in a table or in a bulleted list or what fields are displayed Filter and Sort: You can add filters, and change the default sort orders. Page settings: You can specific what path it’s on and who can access it.
- Go through the steps to add a list of articles.
- Direct users to the task list and make sure they understand the steps.
- Prompt for discussion: What are some comparisons you’d make to other CMSs or Frameworks you’d use?
- If you get to the challenge exercise you’ll see that you can make the display look like a gallery. But this bugs me, I have images which don’t match, different proportions, etc.
- Later on, try this out.
- This is node—type-page. Core modules have injected classes from core modules such as “node” telling us what type it is.