Hello Drupal – What we'll do in this course – Getting to know you

View Github Repository Open presentation in a new window

nearlythere

See all presentation from nearlythere

Hello Drupal – What we'll do in this course – Getting to know you

2 8

hellodrupal

A quick introduction to Drupal

On Github nearlythere / hellodrupal

Hello Drupal

Created by Acquia Learning Services

Hello Drupal by Acquia is licensed under a Creative Commons Attribution 3.0 Unported License.

More info at http://training.acquia.com/hellodrupal

Contact Heather James at @learningdrupal

What we'll do in this course

Depends on how much time we have!

  • Learn concepts
  • Watch demos
  • Try it yourself
If you’re going to do 30- 45 mins, you will SKIP exercises, as they just watch the demos!

Getting to know you

About me

  • Why I use Drupal
  • What I do with Drupal

About you!

  • What other systems have you used?
Alt + Tab to your own site, make sure to talk about yourself and the work you do. But only briefly! As questions from some people in the group.

What you absolutely must know

What is Drupal? Admin tour: Managing content with Drupal Thinking like Drupal: The Drupal Magic Trick Extending Drupal: The Big Three There are 4 main sections of this presentation today.

Readiness check!

Tools you need

A working copy of Drupal 7
  • Local install (Try Dev Desktop) OR
  • Acquia Free Tier OR
  • Account on Drupal Gardens
Online exercises.

Nice to have

Browser inspection tool, such as Firebug for Firefox; or "Developer mode" in Chrome Lorem ipsum generator
A local set up isn't needed if you have less than 45 mins, since there is limited time for hands-on activities. This session does NOT cover set up and installation. It's recommended you precede this with an "install fest" event A guide should be using a Fresh install of Drupal 7 with at minimum the Views and the Devel module, with few other modules enabled so yours doesn't look wildly different from a default installation.

1. What is Drupal?

Elicit some responses from people. Some might have an idea already - let them tell you!

Why do we have CMSs?

Old days: just HTML

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

To database-driven!

  • Templating languages like PHP.
  • Separate data and business logic separated from display. 
  • Users, logging in and interacting.
  • Non technical staff managing websites
Before CMSs > Sites were mainly text and images, with a hierarchical site structure. Sites were assumed to be accessed mainly from their front pages, before powerful search engines. Site maintenance consisted of updating text files. Templating languages like PHP made it possible to separate data and Business logic separated from display. Now you had users, logging in and interaction! Non technical staff managing websites

In comes Drupal!

Photo by Kathleen Murtagh Dries' State of Drupal keynote(CC BY 2.0)
  • Founded by Dries Buytaert in his college dorm, circa 2001.
  • 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+)
  • CMS: Content management system
This is a chance to give some high level concepts and some history. Name pronounced: drees (trees with a D) by-tart

Used worldwide

Many cases: Publishing, Community, Apps, Web presence. Visit drupalshowcase.com

Economist.com, Dev.twitter.com, Whitehouse.gov, The King Center At this point you could opt to show people a case study of something you did, or something relevant to the audience. Watch time!

What does Drupal run on?

LAMP stack is most widely used and tested.

Requirements and flexibility

  • Details drupal.org/requirements
  • Built in PHP, HTML, CSS, JS.
  • Other OSs, other servers, other DBs possible (in green)
The requirements in green can be changed.

Building with Drupal

Drupal functionality is easily extended with contributed and custom code

About 80-90% of a typical project is done with contributed code! You don’t need to explain this slide in detail at the moment. This is the first time they might have heard of the concept of contributed v custom modules. Emphasize that according to best practice custom code should be a limited component.

Drupal.org

How many developers have contributed to Drupal? (Hint: check "d.o")

Drupal.org is the canonical location for collaboration, support, downloading code, accessing documentation and connecting to regional and working groups. Referred to as "d.o" Drupal.org is the canonical location for collaboration, support, downloading code, accessing documentation and connecting to regional and working groups. Prompt people to go to Drupal.org and see how many developers have contributed to Drupal? (on right sidebar, top)

Drupal is built by people

Drupal is software but also a community.

All photos by Kathleen Murtagh code sprints(CC BY 2.0) Drupal is highly collaborative. Events are a big part of this.

DrupalCon

  • Held in Europe, North America and Australia
  • From 1500-3000 people
  • 5 days of learning and collaboration
  • Affordable ticket prices; also Scholarships!

Where's the next DrupalCon?

Hint! Check association.drupal.org/drupalcon

Tell them about your experience if you went! Ask the audience where the next event is.

Connect locally

Attend meet-ups, DrupalCamps (local conferences) and training

Drupical hosts and up to date listing of events across the world. Mention any relevant and upcoming regional events!

2. The Drupal Admin Tour!

Drupal as a CMS

Demos by your Drupal guide; you try the tasks.

In Drupal 7, most of the editing in the admin area is done in the "overlay". If you’re going to do 30- 45 mins, you will SKIP tasks, as they just watch the demos!

Managing content with Drupal

Demo

A quick tour of the admin UI, the overlay and menus. How to add content? Where to find content?

Tasks

Change your site title! Add a basic page Add an article Bonus: Main menu link Bonus: Comments
"DEMO" is what you, the guide do, and "Tasks" are for the learners The emphasis here is way finding in the UI. They should learn at the end there are different content types in Drupal, and where to find content they created. If you are doing the longer session, AFTER you do the demo, direct them to the exercises online, and keep up the next slide.

How did you do?

Which of these tasks did you complete?

Changed site title. Added a Basic page titled “About”. Created an article with tags. Bonus: Added a comment. Bonus: Added link to Main menu. Keep this slide up while they complete the tasks. Go around the room and help people as they work through the exercises. This is the end of this section.

Important to know!

The Drupal content editing experience can (and should) be customized by the developers for users.

Custom administration pages Improved UI for editing content WYSIWYG configuration Mention - Good news: This is all being automatically included in Drupal 8.

3. Thinking like Drupal

You've shown them what Drupal can do out of the box in terms of content editing. Now you're going to help them understand how Drupal "assembles" a page.

Assembling your website

Your mental model might be like this.
  • You use Drupal to assemble sites with data.
  • Drupal surprises users who expect "structure first". Drupal is "data first".
  • The computing metaphor of "folders" and "documents" is compelling. Beware!
Here, you try to address the preconception head-on. Mention that people want to put the "menu items in place first" before they add content. The thing that makes Drupal confusing is the thing that makes it special.

Structured data

Compare these two data models. How can you control content input and display with either?

Unstructured text on the left, structured data (fields) on the right. Drupal works from content first! Drupal is uniquely positioned to handle this problem. Elicit a response that structured data allows you to control input (validate certain fields are filled in) and allows you to control output (display or hide fields in a display.)

Introducing Views!

Views is a query builder.

It's the most popular contributed module.

This shows the Views wizard screen which we'll use in the demo. Point out, Views is the most popular module! (added to Drupal 8!) Mention that you'll be using the quick wizard, but there is a far more powerful editor.

Drupal Magic Trick!

Demo

Add a content type Add an imagefield Create content (add a node) Create lists of content with Views Place a block into a region Fix the imagestyle

Tasks

Use Views! Make a page of articles at /articles
Model a simple content type, add an image field. If you have Devel enabled, then make 10 nodes of that type. For the tasks, they just have to work with the articles content type, and add a view.

How did you do?

Which of these tasks did you complete?

Created a view Added a page of articles at /articles Bonus: Did you try something else? Keep this slide up while they complete the tasks. Go around the room and help people as they work through the exercises. This is the end of this section.

Important to know!

Contributed modules extend what Drupal can do.

Many modules like Views slideshow extend Views. Guess what it does? You will tell them later how to evaluate and choose modules. This just introduces the concept.

4. Extending Drupal: The Big 3

At this point they've seen "modules" and they've also seen "sitebuilding", you're going to clarify that, and introduce theming/layout.

First: Site Building

Site building is everything you can do in the UI layer of Drupal Site building answers questions such as: Pages at what paths? What fields? Who has permissions? Who can create content? Where do they find content?

What is Site Building?

  • Selecting and configuring contributed modules.
  • Modeling content types, users, etc with fields.
  • Configuring display of content, users, terms, etc.
  • Configuring lists (views) of content, users, terms, etc.

Second: Layout and theming

Layout and theming combines Drupal site building and coding in PHP/HTML/CSS/JS. Layout answers questions like: Where will blocks of content appear on the page? Theming answers: How will those blocks appear?

What is Layout and theming?

Layout: Where things appear on the screen Theming: How they look

Tasks include:

  • Various approaches for different use cases. 
  • Contributed modules for configuring layout. 
  • Extending base themes
  • Creating custom themes
Front end developers who use Drupal need to know Drupal site building as well as HTML/CSS/JavaScript and some PHP to create custom themes.

Third: Custom coding with modules

Modules answer questions such as "Can Drupal do X?" Most of the functionality you need can be attained by selecting contributed modules. But sometimes you find limitations and need to either extend modules, or create your own.

What is module development?

  • Knowing the landscape of contributed modules and roadmaps. 
  • Extending existing modules and contributing patches. 
  • Use Drupal's API to write new modules in PHP/HTML/CSS/JavaScript/etc.
  • Custom modules for new functionality and integrations.
Back end developers who use Drupal need to understand site building, theming as well as programming to create custom functionality using Drupal's API.

Drupal emphasizes flexibility

Drupal 7

  • More generic, flexible solutions.
  • Don’t duplicate effort.
  • Standardize administration.
  • Less dependence on custom code.
Since Drupal 6 - Specific modules were replaced by the combined features of more generic modules. Compare the “event” module with modeling events with core content types, and views for display.

Tips on module selection

Reputation

  • Maintainers other contributions and involvement,
  • IRC, word of mouth, appearance in case studies and blog posts.

Reach

  • Community around module?
  • Related modules?
  • Number of installations?
  • Integrate with other modules?

Currency

  • Recent commits (last 4-6 weeks)?
  • Recent release? (green/stable)
  • Issue queue responsiveness and maintenance?
Read the readme.txt file for every module. Attend DrupalCamps to find out information about the latest modules.

Reading a project page

Demo

Compatible version for Drupal 7? How many installations? Who maintains this? What are current issues? Is Documentation available?

Task

Come up with an idea for some functionality you'd like on your site. (No ideas? How about allowing users login with Facebook.) Search for a module. Evaluate it against the criteria we used: Reputation, reach, currency
First elicit some ideas from the group about something they'd like to do with Drupal. If you're pressed for time, just go to http://drupal.org/project/bean (then point out it's in Drupal 8).

A basic theme

This is the bare minimum you need for a theme in Drupal 7. These slides just explain theming briefly. A basic theme can be made with a simple .info configuration file, saved into a folder of the same name. It gets places in the file system In sites/all/themes. In this case, the theme is called “newlook”.

What will happen?

What do you think the site will display when we enable this theme?

Enable themes under "Appearance" Elicit response about what they think an essentially "blank" theme will render in the browser. about 99.9% of the time people expect a BLANK theme to render a BLANK site.

Demo: Stark theme

This core theme is basically what you'll get!

  • Go to "Appearance"
  • Under "Stark" click "Enable and set as default"
  • Visit your site
Go to your site and enable Stark. Emphasize that theming for Drupal is overriding. Point out we got lots of markup. View source to show the CSS files. Point out the CSS for the table.

Recap

Site Building

  • Everything you can do in the UI, 
  • Content and site architecture, 
  • Module selection and config, 
  • Permissions.

Layout and Theming

  • Configuring Drupal to control markup, 
  • Using modules for layout management,
  • Custom themes with CSS,
  • JavaScript etc.

Module development

  • Knowing the contrib / core modules landscape and roadmap,
  • Writing custom code to create new functionality.
Recap the main topics.

Skills you need

Site Building

Web developers

  • No prior experience required. 
  • Knowledge of HTML and CSS helps!

Layout and Theming

Front end developers

  • HTML, CSS, JavaScript. 
  • Minimal PHP knowledge.

Module development

Back end developers

  • HTML, CSS, JavaScript. 
  • PHP experience
  • Programming experience
This is a quick overview of the skills required.

End of slides, beginning of samples

Panel title

Panel content is long.

Panel title

Panel content
If you’re going to do 30- 45 mins, you will SKIP exercises, as they just watch the demos!

Simple columns

Left

Something

Right

Something

If you’re going to do 30- 45 mins, you will SKIP exercises, as they just watch the demos!

Topic

If you’re going to do 30- 45 mins, you will SKIP exercises, as they just watch the demos!

H1 text is big

Sample section

this is sample code
  • This is a list item.

Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard) only if you're running on a local server.