ICF InternationalJuly 23, 2012

Content Management SystemDrupal

ICF International

July 23, 2012

Section Topics

The Omega Theme

Creating a Sub Theme

Styling the Sub Theme

Delta

Other Responsive Tools

Section Two

Section One

Section Three

Section Four

Section Five

ICF International

July 23, 2012

Omega

Omega uses Responsive Design to incorporate a flexible CSS framework that will adapt automatically to different device / resolution screen sizes.

Create a single site and design a framework that adapts to any screen size

Tweak the design at different screen sizes to improve the overall user experience

The advantage of this approach is that it is usually much easier than building out separate experiences for different devices.

Content type choices and descriptions are presented when the editor selects to add new content to the site.

Koshland Science Museum was developed using a Responsive Framework.

global.csstheme.defaulttheme.default.narrowtheme.default.normaltheme.default.wide

ICF International

July 23, 2012

Common Drupal development involves the following different phases, not necessarily in any specific order. Existing contributed modules are widely available within the Drupal community, however most are open-source contributions so care should be taken before implementation into a production environment.

Use Existing ModulesDrupal has an extensive library of ‘contrib’ modules which are readily available for download and customization into any Drupal installation via drupal.org. Select modules for ‘some’ functionality.

Write Custom ModulesNext you will want to develop your own custom modules to fill in spaces of missing functionality or improve upon existing contrib modules.

Configure the SiteSite configuration can be an ongoing process which will increase with complexity dependent on the amount of modules, size of site, user role, permissions, content types, etc.

Theme itTheming can occur in parallel to other development activities. Drupal’s theming engine also provides extensions to the modules.

Sub Themes

ICF International

July 23, 2012

Styling

By default Omega comes with a pre-defined set of zones and regions.Additional regions can be via the theme.info fileAll zones and regions can be styled directly in the global css fileDifferent Media Breakpoint widths can be styled in responsive styles:

– narrow…css – normal…css – wide…css – default…css

Source: http://www.radarearth.com/content/beginning-drupal-7-theming-omega

#zone-menu-wrapper { }#region-menu { }

#zone-header-wrapper { }#zone-header { }

#region-header-first { }

#region-header-second { }

#zone-preface-wrapper { }#zone-preface { }

#region-preface-first { }

#region-preface-second { }

#region-preface-third { } #zone-content { }

#breadcrumb { }#messages { }#region-content { }#region-sidebar-

first { }#region-sidebar-

second { }

#zone-content { }#breadcrumb { }#messages { }#region-content { }#region-sidebar-first { }#region-sidebar-second { }

#zone-postscript-wrapper { }#zone-postscript { }

#region-postscript-first { }

#region-postscript-second { }

#region-postscript-third { }

#zone-footer-wrapper { }#zone-footer { }

#region-footer-first { }#region-footer-second { }

ICF International

July 23, 2012

Other Responsive Tools for Drupal

All modules above can be found at http://www.drupal.org and more information about Omega can be found at http://omega.developmentgeeks.com

There are several responsive add-ons available for Drupal. Omega is Responsive and Mobile First Drupal Base Theme based on the 960 grid system. Other add-ons listed below can be used in conjunction with a responsive base theme.

Responsive Base Themes

Modules

3rd Party Adapted Libraries

Drupal 7

Omega Tools Touch Icons Adaptive Images

Maximenu Mobile Tools*

OmegaTheme

AdaptiveTheme

jQuery Mobile Flex Slider

Introduction to DrupalSection One

ICF International

July 23, 2012

What is Drupal?

“Drupal is a completely free, open source content management system that many intelligent companies are using today to provide for their needs. Drupal's many features and add-ons allow it to be used for a variety of website needs; perhaps for marketing, internal communications, informational websites, or for social networking purposes.”

Drupal is a CMS for Building Dynamic WebsitesSimilar to other CMS solutions, Drupal allows you to easily setup and deploy a dynamic website solution out of the box.Drupal is an Application FrameworkExtensive API and Hook system allows for rapid development of custom modules, themes and add-on APIs for developers. Drupal is a PHP based CMS/Framework.Drupal is a Social and Semantic Web PlatformTools have been built into Drupal including support for Resource Description Framework (RDF) to enable sharing of data with different web sources.Drupal is a CommunityThe Drupal Community is extremely active, especially in the Washington DC Metro area with conferences, frequent meetups and local user groups.

http://www.koshland-science-museum.org/node/add

Content type choices and descriptions are presented when the editor selects to add new content to the site.

ICF International

July 23, 2012

How Drupal Manages Content

Drupal provides a number of different content types out of the box. These are templates that enable an end user to create a piece of content that will be published on the site. Content types are managed and published through the administration area of Drupal and are displayed through a Node.

NodeAn individual piece of content: news item, event listing, simple page, blog entry. Nodes can also have custom fields.FieldFields can be used to attach images or files to content, create extra descriptors, or reference other nodes.BlockA standalone piece of reusable content that can be configured to display based on any criteria that you set.Users, Roles and PermissionsDrupal allows you to create unique roles for anything that might need to happen on your site and set permissions for each role depending on what that role might need to do.ModuleA plug-in that adds functionality to your site. Out of the box, Drupal provides a strong framework, but the point of the framework is to add functionality to it using modules.ViewAn organized list of individual pieces of content that you create within the site, using the Views module.

ICF International

July 23, 2012

Drupal and other CMS platforms are constantly in a state of change. Based on past experience with WordPress, Joomla and custom developed systems, a few comparison notes are provided.

How Drupal Compares to other CMS’s

More information:http://www.chapterthree.com/blog/jennifer-lampton/wordpress-vs-drupal-saga-continueshttp://www.pcpro.co.uk/blogs/2011/02/02/joomla-1-6-vs-drupal-7-0/

WordPress• WordPress was primarily built as a blogging engine and later developed into a CMS. It

is great for developing small to medium sized websites, however it was never built to scale as an enterprise level CMS.

• Drupal assumes at its core there will be many kinds of users with many requirements. At its core, WordPress on the other hand was developed only for one type of user in mind and later adapted accordingly.

• Drupal provides more extensive development framework for many different types of websites: blogs, forums, e-commerce, CRM, intranets, social networks, news aggregators, wikis, photo galleries, restaurant review sites.

Joomla• Joomla is arguably a better product ‘out-of-the-box’ as it provides much of the

expected advanced features of a CMS already built-in.• Drupal on the other hand is limited out-of-the-box, however it provides a more

extensive framework for developing a more advanced site. “On the same grounds, if you can master it, Drupal 7.0 is the best CMS”

Federal Government, Acquia & Drupal @ ICFSection Two

ICF International

July 23, 2012

Open Government and Drupal

Drupal first gained national attention when the White House announced its move to the open source platform — followed rapidly by Open Government initiatives driven by Drupal web sites.

On his first day in Office, President Obama signed the Memorandum on Transparency and Open Government, ushering in a new era of open and accountable government meant to bridge the gap between the American people and their government.

The Administration is tracking how government uses the money with which the people have entrusted it with easy-to-understand websites based on the Drupal CMS.

Recovery (Recovery.gov) Launched Feb 17th, 2009• Drupal portal created under the Recovery Act • Tracks Recovery funds spent by recipients of contracts, grants,

and loans, and the distribution of Recovery entitlements andtax benefits.

USA Spending (usaspending.gov) June 30th 2009• Provides information on how US Tax Payers money is spent• Summaries, trends and data feeds are accessible

IT Dashboard (itdashboard.gov) Launched June 1st 2009• Federal agencies and the public have the ability to view

details of Federal information technology (IT) investments online and to track their progress over time

Source: http://www.whitehouse.gov/open/about

ICF International

July 23, 2012

Government-Aimed Drupal Events

Drupal Government Days – May 18th, 2012“Across the government, agencies large and small have reaped the benefits of open source web technology and community collaboration. Now you can learn the best practices for implementing Drupal within you agency by registering for Drupal Government Days to be held for the first time in Washington, DC.”

Source: http://www.acquia.com/resources/events/drupal-government-days

Sessions

• A Beginner’s guide to using Views• Open Source Mapping Tools• Workbench: Managing Content• Designing for Accessibility• Collaboration and Open Atrium• Responsive Design with Drupal

ICF International

July 23, 2012

Government-Aimed Drupal Events

Capital Camp 2012 – July 27th, 2012CapitalCamp is the DrupalCamp for Washington, DC bringing together developers, designers, open government advocates, IT managers and anyone else that wants to find out more about Drupal.DrupalCamp an unconference-style Drupal training, founded in the style of BarCamp. While there are some differences (DrupalCamp does more pre-planning on the sessions), they have the common goal of bringing smart people together in an environment that is accessible to everyone.

Training Programs

• Beginner & Intermediate Training• Drupal Theme Development• Custom Module Development• Best Practices

In addition to the training programs, a numberof conference sessions will be available on the27th-28th July.

ICF International

July 23, 2012

Acquia

About AcquiaAcquia was founded by Dries Buytaert, the original creator and project lead of the Drupal project, and Jay Batson, previously founder and CEO of Pingtel. They offer the following types of services:

DevelopmentAcquia offer different Drupal based distributions including dev desktop for developers, Acquia Drupal with useful modules, Conference Organizing Distribution, Drupal Commons and Open Scholar.HostingDrupal Gardens is a free hosted Drupal distribution. Also provide dev and managed cloud hosting options.ManagementAcquia Network, Drupal Support, Remote Administration and Professional Services.TrainingAcquia Library, Drupal Training and Free Webinars.

http://www.acquia.com

ICF International

July 23, 2012

ICF Drupal Projects: Koshland Science Museum

Informational Site for Museum VisitorsProvides up-to-date information on museum exhibits, tour information for groups and latest news and events.

Interactive ShowcasesProvides online interactive multi-media exhibits for user’s to explore and interact with the science.

ChallengesCustom developed Challenges system allows for scientific challenge competitions submitted, voted on and administered through the site.

Convio API IntegrationProvides event and ticketing information via a custom developed Convio API module.

CommunityOnline Forum integrated directly into the site for visitors to discuss the issues.

User RolesCustom defined user roles available for staff, volunteers and advisory personnel along with custom permissions, avatars and administration.

ICF International

July 23, 2012

ICF Drupal Projects: Better Buildings Challenge

Informational SiteContaining directories of organizations partnering for more energy efficient buildings.

Searchable ContentAll participating organizations are searchable via the Drupal search interface and contain partner pages, showcases and implementation models.

Rich ContentThe site incorporates latest standards for embedded content, light box popup information and JavaScript carousel sliders.

MediaHouses embedded video and content from YouTube.

InteractivityA partner map provides an interactive way to view information using the Google Map API.

Quick UpdatesA vital part of the site is the ease of updating information which changes on a regular basis.

Drupal DevelopmentSection Three

ICF International

July 23, 2012

Developing in Drupal

Local Development EnvironmentDrupal uses the same typical Apache, MySQL and PHP (AMP) stack as many other popular open source applications use.On Windows, either WAMP or XAMP environment can be used.On Mac, MAMP can be used.Drupal requires one MySQL database.

Acquia Dev DesktopAn installable version of Drupal for Mac, Windows and Linux that comes prepackaged with the AMP stack.https://www.acquia.com/products-services/dev-desktop

Drupal GardensA service of Acquia called Drupal Gardens offers free hosted Drupal sites.Highly convenient for those who do not have the means to install locally.http://www.acquia.com/drupal-gardens

Development Stack DownloadsWAMP: http://www.wampserver.com/en/XAMPP: http://www.apachefriends.org/en/xampp.htmlMAMP: http://www.mamp.info/en/index.html

ICF International

July 23, 2012

Common Drupal development involves the following different phases, not necessarily in any specific order. Existing contributed modules are widely available within the Drupal community, however most are open-source contributions so care should be taken before implementation into a production environment.

Use Existing ModulesDrupal has an extensive library of ‘contrib’ modules which are readily available for download and customization into any Drupal installation via drupal.org. Select modules for ‘some’ functionality.

Write Custom ModulesNext you will want to develop your own custom modules to fill in spaces of missing functionality or improve upon existing contrib modules.

Configure the SiteSite configuration can be an ongoing process which will increase with complexity dependent on the amount of modules, size of site, user role, permissions, content types, etc.

Theme itTheming can occur in parallel to other development activities. Drupal’s theming engine also provides extensions to the modules.

“There’s a Module for That!”

ICF International

July 23, 2012

Creating Custom Modules

Module

.info file

.module file

Associated inc or tpl files

Drupal's module system is based on the concept of "hooks". A hook is a PHP function that is named based on the module it is a part of. HooksHooks let any module, including your module, appear in another part ofDrupal and do something. When Drupal takes an action it considers important (loading content, saving a user account, displaying a comment, etc.), it takes a moment to invite any installed module to observe or intervene. Every hook is an opportunity for your module to take action in response to something Drupal is doing.

There are over 251 hooks in Drupal core, full documentation is available at: http://api.drupal.org/api/drupal.

Module StructureEvery module is stored in the /sites/all/modules folderAll modules contain a .info file and a .module file

To implement a hook, take the “hook” part off the front of the hook name and replace it with your module’s short (machine) name. For example hook_username_alter() is implemented in a module called the displayroles as displayroles_username_alter().

Drupal and Responsive DesignSection Four

ICF International

July 23, 2012

What is Responsive Design?

Years ago we only needed to concern ourselves with the standard monitor resolution of laptops and PCs and cross-browser compatibility. Today we have smartphones, tablets, netbooks, laptops, PCs, all with different screen sizes - we still need to develop our site to respond to all of these devices. Responsive Design incorporates a flexible CSS framework that will adapt automatically to different device / resolution screen sizes.

Create a single site and design a framework that adapts to any screen size

Tweak the design at different screen sizes to improve the overall user experience

The advantage of this approach is that it is usually much easier than building out separate experiences for different devices. Content type choices and descriptions

are presented when the editor selects to add new content to the site.

Koshland Science Museum was developed using a Responsive Framework.

<link rel=“stylesheet” type=“text/css”media=“screen and (min-width: 960px)” href=“/style.css />

@media screen and (min-width: 960px) {left-column {

float: left;width: 60%;

}}

ICF International

July 23, 2012

Using Responsive Design with Drupal

All modules above can be found at http://www.drupal.org and more information about Omega can be found at http://omega.developmentgeeks.com

There are several responsive add-ons available for Drupal. Omega is Responsive and Mobile First Drupal Base Theme based on the 960 grid system. Other add-ons listed below can be used in conjunction with a responsive base theme.

Responsive Base Themes

Modules

3rd Party Adapted Libraries

Drupal 7

Omega Tools Touch Icons Adaptive Images

Maximenu Mobile Tools*

OmegaTheme

AdaptiveTheme

jQuery Mobile Flex Slider

The Drupal CommunitySection Five

ICF International

July 23, 2012

The Drupal Ladder Initiative

drupalladder.org contains lessons and materials to help people learn about and contribute to Drupal. The site was created by the Boston Initiative to help Drupal user groups develop and share and develop materials for learn sprints and issue sprints.

The ladder teaches essential skills for contributing to Drupal 8 Core. Start on the bottom rung if you are a beginner, and climb as you acquire the skills and knowledge described in each lesson.

ICF International

July 23, 2012

Local User Groups: Washington DC Druplers

“This group has a great meetup every month where we get together to connect in person. The target audience is Drupal developers, users, and people who want to learn more about Drupal. We start the meetups with a round of very focused lightning talks that discuss real world solutions to existing problems, new work people have done, and Drupal news.”

http://groups.drupal.org/washington-dc-drupalers

- Learn about latest Drupal events in the area- Training resources, support, freelance opportunities

2 Meetings per month (Baltimore and Columbia MD)

ICF International

July 23, 2012

Drupal Resources

Training Resources:http://www.buildamodule.com (subscription)http://drupalize.me (subscription)http://nodeone.se/learning-library (free)http://www.lynda.com/Drupal-training-tutorials/186-0.html (subscription)

Books:Doyle, M. (2009). Beginning PHP 5.3. Indianapolis, IN: Wiley PublishingMelancon, B. (2011). The Definitive Guide to Drupal 7. New York, NY: ApressButcher, M. (2011). Drupal 7 Module Development. Birmingham, UK. Packt Publishing.

QuestionsThank You!