Book Image

Drupal 7 Mobile Web Development Beginner's Guide

By : Tom Stovall
Book Image

Drupal 7 Mobile Web Development Beginner's Guide

By: Tom Stovall

Overview of this book

<p>How disappointing is it to log on to a website for a product or business you love only to discover the feature you were drawn to doesn’t work on your mobile or tablet? Drupal has brand new features to adapt your existing site into a mobile site that will keep your customers coming back.</p> <p>The Drupal Mobile Web Development Beginner's Guide follows a humble 'Mom &amp; Pop' restaurant website which gets a makeover complete with cutting edge features that play to mobile, tablet and desktop audiences. By following the fun example, you will finish the book having effortlessly adapted your website so that it is accessible and, more importantly, looks good and functions well, on any mobile device.</p> <p>Restaurant websites are notoriously horrible to navigate and our Mom &amp; Pop example is wellintentioned but no exception to this rule. We bring this site out of the early 1990's with cutting edge development practices and a team development workflow. This pizza chain goes mobile with location services, audio, video, charting and mapping worthy of any multi-million dollar site. Each chapter examines the way the site works and shows you how to move the existing content and functionality into reusable features.</p>

Related Content you might be interested in

Current Title:

Small book image
Drupal 7 Mobile Web Development Beginner's Guide
Tom Stovall
Mar, 2012 | 338 pages
No titles found
Table of Contents (18 chapters)
Drupal 7 Mobile Web Development
Drupal 7 Mobile Web Development
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
When is a Phone Not a Phone?
When is a Phone Not a Phone?
"Dumb" phones
"Smart-er" phones
Smart phones
Tablets
WebKit
Mobile-ize me!
What is mobile?
The "One Design" myth
Mobile simulators
Time for action — installing an Android development package
iOS
Time for action — installing the Mac OS developer's package
Summary
2
Setting up a Local Development Environment
Setting up a Local Development Environment
Drupallo's Pizza Kitchen
Averting disaster
A word about platforms
Time for action — downloading the SCM client for Mac
Cygwin and GIT for Microsoft Windows
Time for action — installing a development environment using Windows and Cygwin
Text editors for Mac OS X and Microsoft Windows
Serving web pages on your computer
MAMP
Time for action — configuring our first virtual host
Time for action — changing the default configuration for MAMP
WAMP (Windows, Apache, MySQL, and PHP)
Time for action — installing WAMP
Drush and Drush Make
Time for action — installing Drush and Drush Make for Mac OS X
Time for action — installing Drush for Windows
Building a Drupal website with Drush Make
Time for action — building a Drupal install from a make file
The local database
Time for action — creating a database
Summary
3
Selecting the Right Domain for your Mobile Site
Selecting the Right Domain for your Mobile Site
Once upon a website...
One ring to rule them all
Time for action — installing Domain Access module
Time for action — configuring Apache
Bootstrapping the domain
Time for action — bootstrapping the Domain Access module
Introduction to the Features module
Time for action — installing and creating your first feature
Time for action — updating the feature with new settings
Deployment—best practices
Time for action — code check-in and deployment
Time for action — check in your features module
Summary
4
Introduction to a Theme
Introduction to a Theme
Progressive Enhancement
Drupal 6 versus Drupal 7 theming
Time for action — installing the default mobile theme
The simple life
Media queries
Time for action — personalizing the mobile theme
Redirecting mobile clients
Time for action — writing JavaScript redirection for our theme
Give them what you think they need until they tell you what they want
Behave yourself
Time for action — redirection with a cookie to remember state
Summary
5
A Home with a View
A Home with a View
The Context and Display suite modules
Time for action — creating a mobile-friendly home page
Pushing changes from one environment to another
Time for action — updating the Home Page feature
The menu
Time for action — creating the menu content types
Bundling up the changes
Time for action — bundling the changes into a package
Summary
6
The Elephant in the Room: Audio, Video, and Flash Media
The Elephant in the Room: Audio, Video, and Flash Media
Flash and iOS
Incorporating video into your web content
Time for action — embedding media files
Time for action — adding content
Charting and graphs
Time for action — graphing a view
Summary
7
Location, Location, Location
Location, Location, Location
Geolocation
The navigator.geolocation object
Time for action — adding location data to nodes
From address to longitude and latitude
Time for action — geocoding a node's location data
The close2u module
Time for action — downloding and enabling the close2u module
Finishing the page
Time for action — finding the closest franchise the hard way
Summary
8
Services with a Smile
Services with a Smile
Using Drupal to power your native application
Time for action — creating a REST service
Time for action — testing your new REST service
APIs: The future of the interactive web
Customized services
Time for action — custom REST service formatter
jQuery Mobile
Time for action — using jQM as our base theme
jQuery Mobile JavaScript Events
Time for action — the AJAX login form
Summary
9
Putting it Together
Putting it Together
Display Suite
Hooks, styles, and build modes
Time for action — retheming nodes for our jQuery mobile theme
Time for action — adding theming to the rendered node
Beyond core menu items
Time for action — customized menu attributes
Fonts
Time for action — adding fonts
Summary
10
Tabula Rasa: Nurturing your Site for Tablets
Tabula Rasa: Nurturing your Site for Tablets
The human touch
The event-driven model
Touch and go
The main event
Time for action — adding a swipe advance to the home page
The changing landscape (or portrait)
"Starting over" or "Everything you know about designing websites is wrong"
Wire framing made easy
Drupal 7 Commerce module
Time for action — the one true theme
Time for action — creating a product
A room with a viewport
Time for action — setting the viewport with JavaScript
Time for action — advanced media queries for tablets
Summary
11
A Home in the Clouds
A Home in the Clouds
Problems introduced by modern websites
Amazon Web Services (AWS)
Time for action — setting up AWS and RightScale
Time for action — using an AMI to create a server
Time for action — Jenkins builds our site
Summary
Pop quiz Answers
Pop quiz Answers

Charting and graphs

A great module called fusion charts takes data in a Drupal view and allows you display a chart of the data. Here's the problem. It requires the Flash plugin to display the chart.

This is true for many of the charting solutions on the web today, with one notable exception—Highcharts. The following screenshot shows the Home page of highcharts.com:

The talented programmers over at highcharts.com have created a JavaScript library that takes data and displays it in charts, rendered with SVG on modern browsers and makes those charts backward-compatible with older versions of IE via Microsoft's Vector Markup Language (VML). This makes it ideal for mobiles. All of the major mobile iterations of WebKit fully support SVG.

Note

Graphic Formats

Scalable Vector Graphics (SVG) is a family of XML-based specifications for 2D graphics based in part on Adobe's PostScript graphic language. In the late 90s, Adobe took what was then "old technology" for them, Illustrator version 3...

Previous Section
End of Section 6
Next Section