Upload
acquia
View
1.340
Download
1
Embed Size (px)
DESCRIPTION
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
Citation preview
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
IntroductionWhat’s this all about?
About me• Heather James• Manager of Learning
Services• @learningdrupal
training.acquia.com/events
Join me for Part 2!
acquia.com/resources/webinars
Fun is memorable
About you!• What other
systems have you used?
• What do you know about Drupal already?
What’s in your toolbox?
Step-by-step
http://training.acquia.com/drupalready
• Presentations
• Demos• Activities –
try it yourself!
Ready check!You will need
• A working copy of Drupal 8 – most recent Beta.
• Acquia Cloud free siteacquia.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
Task: Drupal 8 – Acquia Cloud• Go to
acquia.com/drupal-8
• Choose to try now.
• Configure your site
acquia.com/drupal-8
Bonus: Local copy
• Install Dev Desktop 2
• Connect locally, securely.
docs.acquia.com/dev-desktop2/install
Lesson 1: What is Drupal?Who is using it, and how.
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!
“Webmasters” saved by scripting languages
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)
Many great examples
Economist.com, Dev.twitter.com, Whitehouse.gov, The King Center
Assembling pages in DrupalWe’ll look at the individual components that make up a specific page in Drupal
drupal.com/showcases
Content managementMobile friendly administration and responsive themes out of the box
drupal.com/get-started-with-drupal
Content management• Inline editing• Image
management• Flexible and fully
configurable admin.
• Role-based permissions.
Demo: Admin Orientation
Tasks available at: training.acquia.com/drupalready
• Click > paths > start from Admin menu.
• Menu can be docked top or side.
• “Back to site” to see changes.
Task: Get into your site
• Everyone has their site installed?
• If so, try changing your site title.
Lesson 2: Drupal 8 StatusWarning: Under construction!
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.
You are here: API Completion phase
drupal.org/core/release-cycle
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
What’s the latest release?
drupal.org/node/3060/release
Task: Get your “d.o” account• Go to Drupal.org• Create an
account• Login!
http://drupal.org
Lesson 3: Thinking like DrupalAssembling pages
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.
Limited by a mental model
“Pages” in physical “folders”
Other CMSs?
This example is Typo3, what is your previous CMS like?
Page added “into” site structure
Drupal holds data
Structured data: referred to as “Content entity” types in D8.
Articles
Users
Basic pages Comments
““
Terms
Blocks
Generated lists of contentdrupal.com/showcases
Shows examples of pages created from lists of content on the fly.
FYI: Built in Drupal 8!
Demo: Add a page
• Add a Basic page.
• Add link to menu.
• Manage menu.
Task: Add a basic page• Add a “Basic page”.• Link from the “Main
menu.”• Challenge: Manage
menu or Add an article.
Review• Adding content• Menu management
decoupled from adding content
Next: Assembling your site in Drupal
Attribution-NoDerivs 2.0 Generic (CC BY-ND 2.0)by JuditKhttp://www.flickr.com/photos/juditk/5879492679/
Lesson 4: The Drupal Magic Trick
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.
Structured data: Fields
Compare: Which allows for better input and display control?
In HTML:
Body textTagsLocationMedia (video, images)
Title
Image upload
Title
Location
Tags
Body text
Content types and fields
Content types: Define defaults and add fields (usually)
Generic Content type settings
TitleAuthor
Date publishedComments
Menu optionsRevisions
Article + fields:
ImageBody text
Tags
Tips + fields:
VideoBody text
Tags
Link
Consider your design• Limit your fields to only what you
need to reuse and display.
3 example display options
View modes
Flexibility for different conditions
With Drupal, you can reuse content intelligently.
Demo: Adding an article• Go to Content >
+Add content. • Select article. • Review the form.
Content > + Add content > Article
Structured input and display
Link: a module providing a field type
Manage > Structure > Content types > Article > Manage fields
Demo: Adding a field• Enable Link
module.• Add a new field to
the article content type.
• Test by creating an article.
Extend > Link module
Task: Customize a content typeA. Create an articleB. Enable Link
moduleC. New field on
ArticleD. Test Articles
Review• Structuring data
input. • How else could you
validate?• What other content
would you model for this site?
Add fields to…
Content typesBlocksComment formsContact formsTermsUsers
Any “Content entity types” in Drupal 8
You can create your own drupal.org/node/2166447
Drupal Entities
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
Block exampleDefault 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
Lesson 5: Building Drupal sitesGet familiar with Drupal lingo
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.
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
Views wizardOnce you select the base table of your query this can’t be changed.
Base table (content, user, terms, etc) cannot be changed later.
How to format & displayWhat to select & filter
Views UI
Demo: List of articles
• Add list of Articles
• Tab in main menu
Structure > Views > + Add new view
Task: Create a list of articles• Add a view• Select options for
Content type > Article.
• Challenge: Change display!
Structure > Views > + Add new view
Review• Use Views to list
content, users, terms, comments, etc.
• Compare to examples you’ve done in other systems/frameworks.
Next: Extending Drupal
Everything is configurable
Change the image styles!
You can change the display and even the image styles, crop, etc.
Review!
How was this built?Inspect the code and body tag for information.
Go have a look!
drupal.com/get-started-with-drupal
Answer?
drupal.com/get-started-with-drupal
How are these components added?
Inspect the elements and look for clues.
Answer?All are blocks(in red)
Some parts come from Views(in blue)