Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training
BSP-2256 Length: 5 days Price: $ 2,895.00
Course Description
Responsive Mobile Web Development is more than just HTML. The core technologies are: HTML5, CSS3 and JavaScript. HTML is used for semantic markup, CSS3 defines presentation, and JavaScript implements behavior. Many mobile web sites use the jQuery Mobile JavaScript library to simplify coding. This five day class gives students the opportunity to explore these crucial technologies. It starts with HTML, continues with CSS and concludes with JavaScript fundamentals and jQuery. The class includes numerous hands-on labs allowing students to use all of these technologies together to build web sites.
Course Audience
Mobile Developers, Developers, Web Designers.
Course Outline
CHAPTER 1. INTRODUCTION TO HTML5 History of HTML5
HTML5 Standards Body New Features of HTML5
Current Browser Support for HTML5 Detecting Support for HTML5
HTML5 vs. Flash
Replacing Flash with HTML5 Summary
CHAPTER 2. THE BASICS What Is HTML5 HTML5 Goals
HTML Specs, Past and Present
How Is HTML5 Different From HTML4? HTML5 Is Not Based On SGML
More Differences
HTML5 Defines Required Processing For Invalid Documents The Doctype Declaration
Semantic Elements The <aside> Element
Browser Support For HTML5 Summary
CHAPTER 3. NEW SEMANTIC ELEMENTS Function over Form
HTML4 Layouts
HTML5 Semantic Layouts Nesting Semantics
Other New Semantic Elements The <time> Element
WAI-ARIA
The <ruby> and <rt> Elements The <rp> Element
The <keygen> Element Summary
CHAPTER 4. FORMS The form Attribute
The placeholder Attribute New Form Field Types Forms and Validation The required Attribute The number input type The pattern Attribute
The range and date input types The <datalist> Element
The autofocus and oninput Attributes HTML5 CSS Pseudo-Classes
Summary CHAPTER 5. CANVAS
The <canvas> Element <canvas> vs. <svg>
Browser Support for <canvas> Creating the Canvas
Using the Context Using Color Painting Gradients Drawing Paths Painting Patterns Transformers Summary
CHAPTER 6. VIDEO AND AUDIO HTML5 Video/Audio Overview New Elements for Video/Audio Using the <audio> Element The <video> Element
Specifying More Than One Audio or Video File The poster Attribute
Other <audio> and <video> Attributes JavaScript and Media Elements Summary
CHAPTER 7. INTRODUCTION TO CSS3 What is a Style?
What are Cascading Style Sheets?
CSS and the Evolution of Web Development CSS and HTML
CSS Compatibility CSS Rules
New in CSS3 Summary
CHAPTER 8. APPLYING CSS STYLES Inline Styles Embedded Styles External Styles Selectors Combinator Selectors Universal Selector Style Classes Pseudo-Classes
Inheriting From a Parent Declaring !important Styles CSS Cascade Order
CHAPTER 9. STYLING TEXT Web Typography Generic Font Families
Font-Stack and Understudy Fonts Web Fonts
Using Web Fonts Font Size
Font Weight
Italics and Underlining Capitalization
Line Height
Multiple Font Values Text Spacing
Aligning Text Summary
CHAPTER 10. BOX MODEL AND EFFECTS Element Box Model
Parts of the Box Model Setting Width and Height IE Box Size Bug
Controlling Flow in Position Hiding Content
Overflowing Content Floating Elements
Using Float for Multiple Columns Margins
Padding Border Outline
CSS 3 - Rounding Border Corners CSS 3 - Using a Border Image Border Image Example
Summary
CHAPTER 11. CSS 3 AND RESPONSIVE WEB DESIGN What is Responsive Web Design?
Elements of Responsive Design Example of Responsive Design Alternatives to Responsive Design Progressive Enhancement
Implementing Progressive Enhancement Media Types
CSS Style "Reset"
Conditional Styles for Internet Explorer What is the Viewport?
Adapting the Viewport Specifying the Viewport Media Queries
Media Features Used in Media Queries Combining Responsive Design Techniques Testing Responsive Design
Summary
CHAPTER 12. INTRODUCTION TO JAVASCRIPT What Java Script Is
What JavaScript Is Not What JavaScript Can Do What JavaScript Can't Do Elements of JavaScript
Values, Variables and Functions Embedded Scripts
External Scripts
Browser Dialog Boxes What is AJAX?
Summary
CHAPTER 13. JAVASCRIPT FUNDAMENTALS Variables Dynamic Types JavaScript Objects Operators Flow Control 'if' Statement 'if else' Statement 'switch' Statement 'for' Loop
"for / in' Loop 'while' Loop 'do while' Loop Break and Continue Labeled Statements Date Object
Document Object Other Useful Objects Browser Object Detection Summary
CHAPTER 14. JAVASCRIPT FUNCTIONS Functions Defined
Declaring Functions Function Arguments Return Values
Linking Functions to Page Elements Local and Global Variables
Declaring Object Methods Summary
CHAPTER 15. JAVASCRIPT ARRAYS Arrays Defined Creating an Array Traversing an Array Appending to an Array Deleting Elements Inserting Elements Other Array Methods
Accessing Objects as Arrays Summary
CHAPTER 16. ADVANCED OBJECTS AND FUNCTIONALITY IN JAVASCRIPT Basic Objects
Constructor Function Object Properties
Constructor and Instance Objects Constructor Level Properties Namespace
Functions are First-Class Objects Closures
Closure Examples
Private Variables with Closures Prototype
Prototype Property Hierarchy Prototype Chain
Inheritance Using Prototype Extending Inherited Behavior Enhancing Constructors
Improving Constructor Performance Summary
Introduction
Downloading and Using jQuery Mobile The Basics
Example: A Multi-Page HTML The Anatomy of a Page Example of Page Segments Theming
Creating a List View
Decorating List View Rows
Implement Master Detail Navigation Pattern Create a Tabbed View
Summary
CHAPTER 18. JQUERY OVERVIEW Unit Topics
What Is jQuery?
Benefits of Using a JavaScript Library jQuery Example
CSS Selectors How to Use jQuery Practical Usage Notes Background – DOM
Background - DOM Ready Events Background - JavaScript Functions The jQuery Function Object
What Does the $() Function Take as Argument? The jQuery Function – Case 1
The jQuery Function - Case 2 The jQuery Function – Case 3 The jQuery Function – Case 4 The jQuery Wrapper
The jQuery Wrapper as an Array-Like Object Note: innerHTML vs. .html()
jQuery Wrapper Chaining API Function Notation
Handling DOM Ready Event Unit Conclusion
CHAPTER 19. SELECTORS Topics
Background: The Sizzle Selector Engine Selecting Elements by Attribute
Pseudo-Selectors Form Pseudo-Selectors
Faster Selection
Selecting Elements Using Relationships Selecting Elements Using Filters
More on Chaining: .end() Testing Elements
Is the Selection Empty? Saving Selections
Iterating Through Selected Elements Using .each() JavaScript Methods
JavaScript "this" Function Context
The Function call() Method .each() Revisited
Conclusion
CHAPTER 20. STYLE CLASS MANIPULATION Topics
Two Options
Specifying Style Properties Setting Style Properties .addClass() / .removeClass() Defining a Stylesheet
Setting & Getting Dimensions Attributes
Conclusion
CHAPTER 21. DOM MANIPULATION Topics
The $ Function Revisited Getters and Setters
The text() Element Method Appending DOM Elements Removing DOM Elements Performance
Conclusion
CHAPTER 22. JQUERY MOBILE LIST jQuery Mobile Lists
HTML Lists
jQuery Mobile Lists Inset Lists
Adding Links Numbered Lists
Count Bubbles Formatting List Items Formatted List Source Formatted List Example Filters
Filtered List Source Filtered List Example Summary
CHAPTER 23. JQUERY MOBILE BUTTONS jQuery Mobile Buttons
Creating Buttons Button Appearance Enabling and Disabling Button Groups
Horizontal Button Groups Inline Buttons
Highlighting Preferred Choice Icons
Alternate Icon Display Summary
CHAPTER 24. JQUERY MOBILE FORMS jQuery Mobile Forms
A Simple Form Form Enhancements Labels
Placeholders
Client-Side Validation The required Attribute Patterns
Another Pattern Example Widgets More Widgets Color Date Range Datalist Select Checkboxes Horizontal Checkboxes Radio Buttons Submitting Forms Summary
CHAPTER 25. INTRODUCTION TO AJAX What is AJAX?
A Simple Example The Old Way The AJAX Way
Two Key Aspects of AJAX
What are the Advantages of the AJAX Approach? AJAX Technologies
The Basic AJAX API
Creating the XMLHttpRequest Object The XMLHttpRequest Object Basics Complete Example
The Timeline Review Questions Review Answers
CHAPTER 26. JQUERY MOBILE CHAPTER 27. THEMES jQuery Mobile Theming System
CSS3 Roots
Working with Themes Theme Example
The jQuery Mobile ThemeRoller Global Theme Settings
Download Your Themes
Contents of the Theme Zip File Theme Images
Editing Your Themes (if needed) CSS3 Transitions
Example of a CSS3 Transition jQuery Transitions
Custom Transitions in jQuery Mobile Custom Transitions using CSS Summary
CHAPTER 28. GEOLOCATION Geolocation Concepts How Does it Work? Users Need to Agree! Geolocation API Functions and Options Example
Success Function Error Function
Options watchPosition Summary
CHAPTER 29. BOOTSTRAP OVERVIEW Bootstrap History
Current Status
Responsive Web Development Responsiveness
Why it Matters Download Bootstrap Contents
How it works
Bootstrap Content Development Network Using Bootstrap
Mobile First Features LESS
Responsive Grid Layout Reusable GUI Components JavaScript
Summary
CHAPTER 30. USING BOOTSTRAP Including Bootstrap CSS Files Including Bootstrap JavaScript Files Viewport Meta Tags
Example Layouts Grid Grid Source Grid Explained Navigation Navigation (Desktop) Navigation (Mobile) Navigation Source Navigation Explained
Navigation Elements and Styles Glyphicons
Summary
08/22/2016 10:00 am - 06/26/2016 6:00 pm 10/31/2016 10:00 am - 11/04/2016 6:00 pm
