Need Help? Call us at (281) 541-2807 Visit our Facebook Page Follow us on Twitter Subscribe to our RSS Feeds


Find Similar Training Find Similar Training
Email This Training's Information Email This Page
Save this Training To My Watchlist Add To Watchlist
Print This Training Information Printer Friendly Page

Developing Mobile Websites with Responsive Web Design and jQuery Mobile Training Seminar

presented by Software Skills Training, Inc.
View the Software Skills Training, Inc.

Bring a trainer to your location to deliver this class for groups of 10 or more.

Summary

This hands-on course conveys the fundamental skills necessary to design and build responsive web sites for mobile devices such as phones and tablets. Attendees will use responsive web design (RWD) techniques such as CSS3 media queries and flexible grids to build mobile-compatible web sites.

Course Topics: Computers / IT Training > Web Application Development  View/subscribe to this subcategory's RSS Feed

Workshop Description/Agenda

This hands-on course conveys the fundamental skills necessary to design and build responsive web sites for mobile devices such as phones and tablets. Attendees will use responsive web design (RWD) techniques such as CSS3 media queries and flexible layouts to build mobile-compatible web sites. Students will learn how to test mobile websites using emulators and simulators. Coverage includes working with mobile-related JavaScript APIs such as Screen Orientation, Battery Status and Vibration. Additional APIs such as Fullscreen, Web Storage, Geolocation and History are also discussed.

The course also provides an extensive introduction into using the jQuery Mobile Framework for building mobile-specific web sites. Students will learn how to use jQuery Mobile widgets to create forms, lists, toolbars and collapsible blocks. Students will also learn how to integrate SOA with a mobile web site including working with RSS feeds, Google Maps integration and implementing server-side data access.

Attendees will use ThemeRoller for jQuery Mobile to download existing or custom theme swatches to format the appearance of a web site. Additional topics include responding to user events, configuring jQuery Mobile defaults and using page transitions. Comprehensive hands on exercises are integrated throughout to reinforce learning and develop real competency.

Course Prerequisites: Prior knowledge of HTML, CSS, JavaScript and jQuery equivalent to attending the Web Site Development With HTML/JavaScript and Developing Rich Internet Applications Using HTML5, CSS3 and jQuery courses.


What You Will Learn

  • Creating a Responsive Website
  • Using CSS3 Media Queries
  • Optimizing Images and Media
  • Working with the Viewport
  • Incorporating JavaScript APIs
  • Configuring and Downloading the jQuery Mobile Framework
  • Using jQuery Mobile Widgets
  • Formatting Mobile Pages with ThemeRoller
  • Reacting to Mobile Specific Events
  • Integration with Web Services


Workshop Agenda

Overview of Responsive Web Design
  • What is the Mobile Web?
  • Defining Responsive Design
  • Responsive Web Design (RWD) Principles
  • Responsive Layout vs. Adaptive Layout
  • Designing for Mobile First
  • Progressive Enhancement
Viewport and Media Queries
  • Working with Viewports
    • viewport Meta Tag
    • @viewport Rule
  • CSS3 Media Queries
    • Media Types
    • Logical Operators
    • Media Features
      • Browser Height and Height
      • Device Height and Height
      • Orientation
      • Resolution
  • Determining Breakpoints
  • Installing and Using Viewport Testing Tools
Creating Responsive Layouts
  • Fluid Grid Layouts
    • Calculating Fluid Grid Layouts
    • Predefined Grid Systems
  • Creating Flexible Images and Video
  • Optimizing Images for Retina Displays
  • Responsive Typography
    • Using Ems, Percentages and Rems
    • Viewport Units
  • Responsive Navigation Patterns
  • Designing Responsive Tables
  • Creating a Responsive HTML5 Page
Using JavaScript APIs
  • Screen Orientation
  • Fullscreen
  • Page Visibility
  • Vibration
  • Battery Status
  • Geolocation
  • Web Storage
  • History
Overview of jQuery Mobile
  • What is jQuery Mobile?
  • Configuring and Downloading the Mobile Library
  • jQuery Mobile File Structure
  • Working with Data Attributes
  • Creating a Simple jQuery Mobile Page
  • Using Transitions
  • Navigating Between Pages
    • Ajax-Driven Page Navigation
Working with ThemeRoller for jQuery Mobile
  • Downloading a Theme Swatch
  • Creating a Custom Theme Swatch
  • Theme File Structure
  • Adding Themes
  • Defining Custom Backgrounds and Fonts
Displaying Content
  • Creating Dialogs and PopUps
  • Defining Collapsible Content Blocks
  • Creating Menus
  • Defining Page Content
  • Displaying Tabular Data
  • Displaying XML Content
  • Displaying JSON Content
  • Working with Multimedia
  • Using jQuery Mobile Grids
Toolbars
  • Types of Toolbars
    • Headers
    • Footers
  • Creating Fixed Headers and Footers
  • Hiding Toolbars with Fullscreen Mode
  • Adding Buttons and Images
  • Creating Customized Back Buttons
  • Defining Multi-Column Layouts
  • Creating Persistent Navbars
Working with List Views
  • Creating Lists with List Views
  • Creating Numbered Lists
  • Creating Inset and Non-Inset Lists
  • Formatting List Content
    • Adding Images to Lists
    • Creating Split Buttons
    • Creating Count Bubbles
  • Working with Nested Lists
  • Defining a Filterable List
  • Updating List Content
Working with Forms
  • jQuery Mobile Form Requirements
  • Styling Field Containers
  • Working with Input Types
    • Text
    • Search
    • Radio Buttons
    • Checkboxes
  • Working with Select Menus
    • Allowing Multiple Selections
    • Auto-Initializing a Select Menu
  • Using a Slider for Numeric Input
  • Selecting a Range of Values with Rangeslider
  • Creating a Toggle Switch
  • Creating Accessible Forms
Working with Buttons
  • Types of Buttons
    • Navigation
    • Inline
    • Grouped
  • Formatting Buttons
    • Adding Shadows
    • Adding Icons
Responding to Events
  • Registering Event Handlers
  • Using jQuery Events
  • Using jQuery Mobile Events
    • Touch
    • Orientation (Portrait/Landscape)
    • Scroll
    • Page
    • Virtual Mouse Events
Configuring Default Settings Using the $.mobile Object
  • Configurable Options
    • Enabling Ajax
    • Applying CSS Classes
    • Setting Transitions
  • Calling jQuery Mobile Methods
    • Storing and Removing Arbitrary Data
    • Working with URLs
    • Performing a Silent Scroll
    • Loading and Changing Page Content Dynamically
Web Services Integration
  • Working with RSS Feeds
  • Google Maps Integration
  • Server-Side Data Access

Who Should Attend

Mobile Website Developers

Additional Information

Training Provider: Software Skills Training, Inc.

Course Topics: Computers / IT Training > Web Application Development

Training Course Summary: This hands-on course conveys the fundamental skills necessary to design and build responsive web sites for mobile devices such as phones and tablets. Attendees will use responsive web design (RWD) techniques such as CSS3 media queries and flexible grids to build mobile-compatible web sites.

Live Seminar Date/Location

Seminar Location

VENUE PROVIDE UPON REGISTRATION
SAN DIEGO, CA

Seminar Dates/Times

Start Date: 2019-11-18
End Date: 2019-11-22

Create Calendar Appointment Calendar Appointment Reminder

Seminar Price

$2,795.00

REGISTRATION OPTIONS

Register Online

Register By Phone - Call 806-410-3373

Register By FAX