Designing Websites for Mobile Devices: Hands-On - 3 Days ...

gayheadnoodleInternet and Web Development

Jun 26, 2012 (5 years and 1 month ago)

409 views

Designing Websites for Mobile Devices: Hands-On - 3 Days
Course 2315 Overview
You Will Learn How To • Develop streamlined mobile websites for efficient access to online information
• Write compelling HTML5 and CSS3 content for mobile users
• Employ JavaScript to maximize the potential of each browser platform
• Extend the browsing experience with mobile-focused multimedia content
• Harness geolocation capabilities to deliver targeted content
• Leverage native extensions and exploit local storage for enhanced device integration
Web designers and developers interested in building mobile websites. Knowledge of HTML and CSS at the
level of Course 470, "Developing a Website," as well as prior JavaScript experience, are assumed.
Who Should Attend
Practical hands-on exercises provide experience creating cutting-edge mobile websites. Exercises include:Hands-On Exercises
• Architecting modern cross-platform mobile websites
• Enhancing forms with HTML5 extensions
• Replicating the native platform UI with CSS3
• Querying device capabilities with JavaScript
• Presenting optimized graphics and multimedia
• Geolocating the user with HTML5 and JavaScript
• Enabling offline access to enterprise data
2315_1207_06252012
www.learningtree.com/23151-888-THE-TREE
(1-888-843-8733)
Designing Websites for Mobile Devices: Hands-On - 3 Days
Course 2315 Outline
Surveying the Mobile web Environment
• Exploring key mobile web platforms
• Android
• iOS
• Blackberry
• Windows phone
Analyzing Requirements for Mobile
Websites
Taking advantage of best practices
• Creating vs. migrating web applications
• Complying with W3C guidelines
Applying architectural principles and
constraints
• Selecting high-priority features
• Simplifying the User Interface (UI) for
enhanced performance
• Designing for touch interactivity
• Identifying bandwidth and memory
limitations
Authoring HTML Content for Mobile
Websites
Designing for platform independence
• Maximizing site functionality with
progressive enhancement
• Constructing an appropriate layout for a
mobile UI
• Controlling zoom with the Viewport
Integrating HTML5 extensions
• E-mail
• Web addresses
• Date pickers
• Spin boxes
• Autofocus fields
• Search boxes
• Dialing the phone from the page
• Displaying a context-sensitive keyboard
Customizing Presentation with
Cascading Style Sheets
Harnessing CSS3 capabilities
• Selecting style sheets based on device
orientation
• Manipulating layout dynamically with
transitions, transforms and animations
Styling layout and content
• Optimizing styles for touch interactivity
• Applying styles based on content
• Simulating the native UI with CSS
CSS extensions for mobile
• Mapping device Viewports to style sheets
• Enhancing text readability with
text-size-adjust
• Highlighting touch content with
tap-highlight-color
Supporting User Interaction and Mobile
Features
Implementing common mobile features
• Determining support for device capabilities
• Touch
• Tilt
• Multimedia
• Local storage
• Detecting browser capabilities on the server
and client
• Implementing a WURFL lookup
Enhancing interactivity with JavaScript
• Employing key libraries: Modernizr and
jQuery mobile
• Responding to orientation changes
Comparing phone and tablet UIs
• Differentiating between phone and tablet
presentation
• Adapting web content to respect platform
conventions
• Designing tablet-style, two-column views
Producing Graphics and Media
Processing video for mobile devices
• Generating bandwidth-appropriate video
content
• Exploiting the HTML5 video element
• Activating video content from JavaScript
Presenting graphic images
• Optimizing graphics for mobile devices
• Creating home screen graphic images
Leveraging Geolocation
Determining device position
• Querying for the device location with GPS
• Integrating with the native map application
• Retrieving location-based web content
Integrating local storage
• Persisting data onto the device
• Managing locally stored data
Enhancing Site Functionality
Working offline
• Enabling disconnected web applications
• Network status
• Synchronizing offline data to enterprise
databases
Consolidating the web with native extensions
• Integrating with the home screen
• Hiding the standard browser UI
• Accessing native mobile hardware with
PhoneGap
• Camera
• Contacts
• Accelerometer
• Compass
2315_1207_06252012
www.learningtree.com/23151-888-THE-TREE
(1-888-843-8733)