Hello Drupal

HELLO DRUPAL! /WELCOME!Download: http://training.acquia.com/hellodrupal

LicenseThis work is licensed under the Creative CommonsAttribution-NonCommercial-ShareAlike 3.0 UnportedLicense. To view a copy of this license, visithttp://creativecommons.org/licenses/by-nc-sa/3.0/ orsend a letter to Creative Commons, 444 CastroStreet, Suite 900, Mountain View, California, 94041,USA.Download: http://training.acquia.com/hellodrupal

What we’ll do todayINTRODUCTIONDownload: http://training.acquia.com/hellodrupal

What we’ll do todayDownload: http://training.acquia.com/hellodrupal

What we’ll do1. Short presentation 2. Quick demo 3. You try it Concepts and cases Download: http://training.acquia.com/hellodrupal

Learn from cases

Hands-on practice

Your site 1. 2. 5. 3.4.

Getting to know you

About us...

Our projects

Acquia Training• Acquia is “your enterprise guide to Drupal”.• Promoting best practices through training.• http://training.acquia.com/

About you...• What sector do you work in?• What web projects do you have coming up?• What are the key audiences for those projects?• How are you meeting those needs now?

What you need

Check!• Browser with inspection tool, such as Firefox and Firebug.• Optional, but nice: A lorem ipsum generator (in your browser)

Check!• Your manual.• “Before you start” in manual • Download the appendix • Your Drupal Gardens site• Browser opened to drupal.org

Drupal Gardens vDrupal?

Spot the difference

UI tweaks - open source

Some differences

ThemeBuilder

Exporting? Yes!

A useful tool• Sandbox for us today!• Good for collaboration.• Maintains the server. Updates the software• Implements improvements in Drupal• Provides support in the forums (free) and tickets (paid)

Your turn!Change site title

Change your site title

Session 1WHAT IS DRUPAL?

The Lego analogyhttps://twitter.com/#!/tom_eric/status/26847650412

Levels of customizationAttribution 2.0 Generic (CC BY 2.0) Attribution 2.0 Generic (CC BY 2.0)By Sirius™ By V&A Steamworkshttp://www.flickr.com/photos/sontranphotos/6305186977/ http://www.flickr.com/photos/32482342@N05/6232526245/

Components v KitsAttribution-NoDerivs 2.0 Generic (CC BY-ND 2.0) Attribution 2.0 Generic (CC BY 2.0)by JuditK By creative.paradoxhttp://www.flickr.com/photos/juditk/5879492679/ http://www.flickr.com/photos/edmands/2771878770/

Unit 1.1What is Drupal?

Drupal is...

An online presence

A publishing platform

A robust search tool

Discussion platform

Multilingual

Citizen engagement

Student engagement

A digital library

Band launch platform

A secure URL shortener

Service builder

Product builder

Why choose Drupal1. Compared to other CMSs: • Highly conﬁgurable functionality and UX. • Extendable with API and custom themes.2. Compared to frameworks: • Time/effort saved with sub-systems. • Time/effort saves with distributions.3. A large ecosystem of service providers and specialists.4. Large and active community.

Highly Configurable

Extensible API

Customize client UXWorkbench Admin with Rubric theme

Sub-systems Featured News About Services Portfolio ContactContent Users Taxonomy CommentsContent title D. Schrute adventure Wow, cant Germany city breakwait to get dwight city break 8 Sept started. J. Halpert Spain sailing joe Me too! shopping 8 Sept text search

Distributions (packages) OpenPublish Commons Conference (COD)

Specialized serviceshttps://www.acquia.com/partners

Active contribution drupal.orgData as of March 2012- Check Drupal.org for updates!

A growing community 50 150 750 1350 2250 4200 4751 3000 + 2005 2006 2007 2008 2009 2010 2011 2012Antwerp Vancouver Barcelona Boston DC & San & Chicago & Denver & Brussels & Sunnyvale & Szeged Paris Copenhagen London & Munich

Regional and niche http://tinyurl.com/localdrupal http://groups.drupal.org/events

Next DrupalCons Munich PortlandAugust 2012 May 2013

Unit 1.1 (continued)What’s in the box?

The ***P stack http://drupal.org/requirements Drupal is ﬂexible, but most tested on... Linux *, Apache *, MySQL *, PHP * works well with othersCreative Commons Attribution http://www.ﬂickr.com/photos/ftmeade/6134210742/ By Fort Meade

AdministrationNext we’ll look at the sub-systems in Drupal.

Content editing

Blocks: Basic layout tool

Roles and permissions

Modules for functionality

Themes for appearance

A closer look (optional)Why do we haveCMSs?

Why does it exist?

Website maintenance Content and presentation mixed in HTML

Database driven

Sites are more interactive, social and media rich.

CMSs - a step further• Trusted users add and edit content.• Allow power users to manage menus and navigation.• Further: Drupal can be conﬁgured to let users modify and manage layouts.

Unit 1.2Case: Many kinds ofcontent

1 2economist.com

Lots of data• “One Comment a Minute”• Articles, periodical issues, newspapers, customers, user roles, blog posts

Migration• Migrate module• Supports migration form other CMS’s (WordPress, Typo3 etc.)• Supports migration from older Drupal versions.

direct.gov.uk

Requirements • Innovate developer site • Allow developers to submit apps. • Moderate submissions before publishinginnovate.direct.gov.uk/node/add/apps?op=Submit+an+App

Field configuration Drupal content type ﬁeld conﬁguration

Unit 1.3 - Unit 1.4 - Your turnAdding blocks andcontent

Add a block1 2 3

Disabled blocks

Add content 1 2

Compare• Is the block on the content list?• Can you add comments to a block?• Can you place an article in the sidebar?

Unit 1.5How would you do this?Review

Tutorial site12 3 Inspiration: http://www.netmagazine.com/tutorials

Session 2THE ASSEMBLEDWEB

Unit 2.1Thinking like Drupal

What you may be thinking example.com news sports politics mental about Your site map masthead contact

Structure first? Web Page Title Web Page Titlehttp://domain.com Google http://domain.com Google Front page Full page

Structure first? Web Page Title Web Page Titlehttp://domain.com Google http://domain.com Google Front page Full page ?

Display of content Web Page Title Web Page Titlehttp://domain.com Google http://domain.com Google Front page Full page

Think “Content first”Articles UsersPages Terms Comments “ “

Structured content Compare Title Title In HTML: Image upload Body text Body text Tags Location LocationMedia (video, images) Tags

Structured content Web Page Title http://domain.com Google Title ImageBody textLocation Web Page Title http://domain.com Google Tags Author Date

Structured content Title Show 2 most recent. Image as square thumbnail. Image Body text up to 100 words Web Page Title http://domain.com GoogleBody textLocation Tags Author Date

Structured content Title Show 9 per page with pagination. Image as thumbnail. Image Author link to proﬁle. Short date. Web Page Title http://domain.com GoogleBody textLocation Tags Author Date

Pages are assembled This is an example of a page that is assembled.

Most recent pollEnable the poll Module > Add a poll > Place block

Blocks and menus About menu Main menu Custom menus Generated by a module Views listing

Block regions Regions

Regionshttp://regions.drupalgardens.com/

Unit 2.1 (continued)Integration

Integration• Existing and popular services? Likely there’s a module.• A proprietary service? There may not be an existing module.• Your unique data source or custom application will require scripting.

Drupal + Twitter1 Link to account2 Display feed & archive3 Tweet this button4 Login and tweet library.acquia.com/articles/drupal-integration-twitter

Drupal + Facebook developers.facebook.com/1 Just add a “Like” button docs/reference/plugins/like/2 Use Facebook for login drupal.org/project/fbconnect3 Develop FB applications drupal.org/project/fb

IntegrationThird party services Socialhttp://drupal.org/project/salesforce http://drupal.org/project/twitterhttp://drupal.org/project/adsense http://drupal.org/project/google_plusonehttp://drupal.org/project/site_verify http://drupal.org/project/mailchimphttp://drupal.org/project/acquia_connector http://drupal.org/project/fbhttp://drupal.org/project/opencalaishttp://drupal.org/project/alfresco Mappinghttp://drupal.org/project/millennium http://drupal.org/project/geoﬁeldMedia http://drupal.org/project/gmap http://drupal.org/project/geocoderhttp://drupal.org/project/media_youtube http://drupal.org/project/openlayershttp://drupal.org/project/media_vimeohttp://drupal.org/project/flickr http://drupal.org/project/locationhttp://drupal.org/project/media_flickr VisitJQuery librarieshttp://drupal.org/project/superﬁsh http://j.mp/3rdpartyDhttp://drupal.org/project/jcarousel for details on third party integrationhttp://drupal.org/project/addtoany

Unit 2.2Case: Controllingdisplay

2 31 opensource.com

Content displayTeaser Full post

How did they do that? Step 1. Step 2. Step 3.Add image Configure Configure field thumbnail field display

Add image field

Media styles

Configure display** Want MORE display modes? Use Display Suite.

What else?• Title length• Summary text• Whether tags appear or not• Comment links• Take it further: Display Suite http://drupal.org/project/ds

Example: London.gov.uk

Unit 2.3 - Your turnCreate contentlistings

Create content listing Step 1. Step 2.Select what Conﬁgure to display how to display

Museum site 21 3 Inspiration: http://ﬁeldmuseum.org/

Session 3CONFIGURATIONBEFORE CODE

Unit 3.1Extending Drupal

“Projects”• Module: Code that alters, extends or enhances Drupal’s base functionality.• Theme: Provides the look, feel, and UX for your site.• Distributions/Installation proﬁles: Packaged Drupal + Modules, themes and conﬁguration for a use-case

Can Drupal do X? This is the Title of the VideoSelect a date One morning, when Gregor Samsa woke from troubled dreams, he December 2011 found himself transformed... More...S M T W T F S30 1 2 3 4 5 6 16:9 URL 7 8 9 10 11 12 13 Embed14 15 16 17 18 19 2021 22 23 24 25 26 2728 29 30 31 1 2 3 0:00 / 4:59 Select TodaySlider Ratings 1 2 3Item Title 1 Item Title 2 Item Title 3 ItemSubtitle 1 Subtitle 2 Subtitle 3 Sub

ModulesSoftware to extend the functionality of Drupal. Here are some examples: Fivestar: A content rating system Webform: Submission form Flag: All purpose content marker

What is it really?Location in ﬁle hierarchy:Drupal core folder/sites/all/modules/

What is it really?Location in ﬁle hierarchy: Drupal core folder/sites/all/themes/

“Core”

“Core” “Contrib” and “Custom” The more contributed projects you use, the less custom code you need to write.

“Core” “Contrib” and “Custom”✖ Don’t hack core

A closer lookProject selection

Many module categories

Clicking together• When choosing a module, consider:• Can you build with existing tools?• Build with Fields and Views? Puzzled By brad montgomery Attribution 2.0 Generic (CC BY 2.0)

More is less? • Generic components means additional modules.Attribution-NoDerivs 2.0 Generic (CC BY-ND 2.0) Attribution 2.0 Generic (CC BY 2.0)by JuditK By creative.paradoxhttp://www.flickr.com/photos/juditk/5879492679/ http://www.flickr.com/photos/edmands/2771878770/

Previous Create + display events Event module• More generic, ﬂexible solution. Drupal 7• Don’t duplicate effort. Create "event content type"• Standardize Content types administration. and Field (core)• Less dependence on Date ﬁeld custom code. + Display calendar or listing Calendar Views

Take a “maintenance ﬁrst” approach to project selectionhttp://www.mediacurrent.com/blog/drupal-maintenance-challenge-and-how-manage-it-part-2

Key indicators Reputation Reach CurrencyMaintainers other Community around Recent commitscontributions and module? (last 4 weeks)?involvement, Related modules? Recent release?IRC, word of (green/stable)mouth, appearance Number ofin case studies and installations? Issue queueblog posts. responsiveness Integrate with other and maintenance? modules?

Module search

Project pageWho maintains this?What are current issues?Download linksSimilar projects?Documentation?

Downloads andversion numbers

Project information Compare

Open source - literally

DrupalModules.com drupalmodules.com

Similar module review groups.drupal.org/similar-module-review “g.d.o”

A closer look (optional)Making a theme

Making a theme• A combination of conﬁguration and then customizing with code.• What theming in Drupal entails • We’ll take a closer look• What skills you need HTML Advanced CSS Advanced Drupal Site-building Intermediate PHP Beginner

An example site

Drupal Gardens is different

Making a theme in Drupal

Overriding a push system

Customizing your theme

Region order

Regions in .info• The regions you deﬁne are available in Structure > Blocks

Inheritance Templates Core Base theme Sub-theme being called page.tpl.php page.tpl.php page.tpl.php node.tpl.php node.tpl.php node.tpl.php node.tpl.phpuser-proﬁle.tpl.php user-proﬁle.tpl.php

Core has template files

User profile output

COPY to your theme

Modify markup

Voila!• Drupal first sees your theme’s user-profile.tpl.php and renders it instead of the core user-profile.tpl.php

Naming patternsbased on core template pattern custom templatenode.tpl.php node--nodeid.tpl.php node--15.tpl.phpblock.tpl.php block--region-delta.tpl.php block--sidebar-ﬁrst.tpl.php Docs: http://drupal.org/node/1089656

Use machine namesbased on core template pattern custom templatenode.tpl.php node--type.tpl.php node--article.tpl.php

Theming Tips• Do not put SQL queries directly into the theme. Not OK. (Make a module).• Follow best practices for conﬁguring content, such as resizing images on the server, and not with CSS.• Do use Style Guide module to reveal the styles used by Drupal.

A closer look (optional)Custom coding inDrupal

Making a module• Conﬁgure ﬁrst and override.• Reduce duplicate effort!• Custom “glue” for sites.• Skills required: HTML Advanced CSS Intermediate Drupal Site-building Advanced PHP Advanced

End-user experience Products They use the product, application or site Functionality User testing happens hereBuilding components Get them involved early Platform Web Framework

Editor experience Products Trusted managers Moderate content, Functionality Alter layout, conﬁgure the siteBuilding components Make their experience better! Platform Don’t forget to user test with these folks! Web Framework

Site building - 80-90% Products Select, install and configure modules Functionality Configure themesBuilding components Configure: A survey A forum Platform A content type Display of content Web Framework

Custom coding 10-20% Products Developing modules CSS/HTML for theme Functionality Work with the platformBuilding components Identify “hooks” - Which events? Platform Integrate with other components, APIs Web Framework

An event based systemEvent (hooks)A node has just been added ✔A node is showing in an edit form ✔A node is being deletedA form is about to be displayedA user has logged in ✔A user page is about to be displayed ✔A comment has been added ✔ Drupal’s API api.drupal.org/api/drupal

What can you do?• Use or create hooks- a simple callback function called on speciﬁc events.• Check access control.• Access data, from within Drupal or other datasource.• Insert, update and delete data.• Generate blocks.• Display results, or expose data to Views.• Theme how results or outcomes appear.

Product v Framework• Where do I interact with Drupal’s hook system to make custom functionality?• Watch “Taming the Burrito” by Jeff Eaton j.mp/tamelayers

Unit 3.1 (continued)Upgrading Drupal

The drop is always moving.• Update: Is a minor change, 7.12 > 7.15• Upgrade: A major version 6.x > 7.x• “We can break peoples code, but not peoples data.” • Drupal is not backward compatible. • Data is maintained, upgrade paths available for Drupal core and popular modules.

Download updates

Backup + run update

Update success

Drupal upgrades• Both core updates and upgrades must be performed manually.

Upgrade process Research Make a backup Perform upgrade data disable non-core Prepare code replace new ﬁles update all core upgrade create a test sitelogin user/1 upgrade contribmaintenance mode http://drupal.org/node/570162

Caveats• A new version of a module does not mean upgrade path for data.• Sometimes old modules are not upgraded, but moved to a more popular solution.

Unit 3.2Case: Conﬁguringfunctionality

1 2varnish-software.com

1 2klantenservice.telenet.be

Unit 3.3Conﬁgure a newmodule

Configure a new module

Your webform

Animal rescue 31 2 Inspiration http://www.daws.org

Session 4OPPORTUNITY ANDCOMMUNITY

People like you...

Drupal is built by people Photos from code sprints By muir.ceardach http://www.ﬂickr.com/photos/ceardach Attribution 2.0 Generic (CC BY 2.0)

Open Source do·o·cra·cy /dōˈäkrəsē/ Noun Responsibilities and and rights granted to those people who do the work rather than elected ofﬁcials.http://www.communitywiki.org/DoOcracy

Meet a maintainerStella Power 2007 Founded in First module 2010 and Started in contributed. employsDrupal as a 5 people HOBBY! Now involved in on 19 projects On Drupal.org: stella http://drupal.org/user/66894

How you can help them: Provide clear bug reports/screenshots. Be respectful. Contribute what you can.Stella Power Jacob Singh Stella http://drupal.org/user/66894JacobSingh http://drupal.org/user/68912

The communityis growing

DrupalCon Brussels 2005Drupal isgrowing By Roland http://www.ﬂickr.com/photos/roland/53700318 Attribution 2.0 Generic (CC BY 2.0)

DrupalCamp Dakar 2011By nd1mbee http://www.ﬂickr.com/photos/nd1mbee/5649172387 Attribution 2.0 Generic (CC BY 2.0)

Monthly Drupal Meetup in Boston author’s photo

Developing your skills

Skills in need• Web languages: HTML/CSS/JavaScript• PHP: For module development• Sysadmin/Operations• Performance/Scalability• Visual design for CMSs• User experience design http://bit.ly/mad-skillz

Take the quiz! http://bit.ly/mad-skillz

Skills Maphttp://j.mp/drupalskills

Session 4 - Your turnGet connected

Find your people• If you haven’t already - create a user account on Drupal.org• Find a user group or a topical group• http://tinyurl.com/localdrupal

Resources

Documentation + Planet Also see drupal.org/planet

Drupal Gardens docs

drupal.org/books

drupalize.me

training.acquia.com

Questions and answersWRAP-UP

http://acquia.com/training-feedbackFeedback please!

Any questions?

How was this done?Preview at http://allnews.drupalgardens.com

Go forth and build!By Gábor Hojtsy Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) http://www.ﬂickr.com/photos/gaborhojtsy/279354242

http://training.acquia.com	3088
http://www.acquia.com	736
http://cursusnetwerk.nl	563
http://switchlondon.drupalgardens.com	114
http://learndrupal7.drupalgardens.com	97
http://us-w1.rockmelt.com	7
http://feeds.feedburner.com	6
http://drupal.org	5
http://www.square63.com	1

Hello Drupal

by hellodrupal

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 4,617

Statistics

Hello Drupal Presentation Transcript