Topics include

* Understanding the history of HTML5
* Using new tags
* Understanding HTML5 semantics
* Coding ID and class attributes in HTML5
* Structuring documents
* Building forms
* Exploring HTML5 native APIs
* Encoding and adding HTML5 video
* Exploring associated technologies such as CSS3

Содержание

Introduction 03:56
Welcome 01:01
Using the exercise files 01:50
Who is this course for? 01:05
1. Introducing HTML5 21:12
Exploring prior standards 04:26
Why do we need HTML5? 03:32
HTML5 timeline 04:24
Current HTML5 support 04:25
What HTML5 is (and what it isn't) 04:25
2. What's New in HTML5? 27:49
HTML5 vs. HTML4 03:25
New structural tags 06:01
New content tags 04:07
New application-focused tags 05:32
Deprecated elements 04:28
API overview 04:16
3. Creating HTML5 Documents 22:29
Content models 05:33
Understanding the outline algorithm 03:21
The role of <div> tags 04:20
Using ID and class attributes 02:06
DOCTYPE declarations 04:16
Character encoding 02:53
4. Structuring HTML5 Documents 41:27
Basic page structure 03:40
Structuring top-level elements 07:30
Structuring interior content 08:42
Building headers 09:11
Checking document outlines 05:46
Ensuring cross-browser structure 06:38
5. Building Forms in HTML5 27:53
New input types 05:57
Setting form autofocus 02:53
Using placeholder data 04:04
Marking required fields 03:24
Working with number inputs 05:49
Using date pickers 05:46
6. HTML5 API Support 01:01:03
Canvas overview 06:21
Adding canvas content 08:58
Drawing in the canvas environment 12:09
Drag-and-drop API overview 06:18
Offline applications overview 07:11
Video overview 05:45
Encoding video 08:23
Adding video 05:58
7. Associated Technologies 57:33
Geolocation API overview 05:50
Web storage API overview 05:40
Web sockets overview 04:16
CSS3 overview 06:38
Enhancing typography with CSS3 07:42
Using @font-face 07:11
Styling HTML5 with CSS3 10:23
Using CSS3 transitions 09:53
Conclusion 05:06
Final thoughts 03:49
Goodbye 01:17

Скриншоты

Содержание

Introduction
Welcome 01m 03s
Using the exercise files 02m 03s
Using the HTML5 Canvas element in the real world 01m 48s
1. Examples of Current HTML5 Sites
Real-world example: CanvasMol 02m 09s
Real-world example: Raphaël-JavaScript Library 01m 47s
Real-world example: The Wilderness Downtown 04m 01s
Real-world example: Sketchpad 01m 10s
Real-world example: Pirates Love Daisies 01m 24s
2. Setting Up Your Workspace
Installing the tools 01m 29s
Exploring the Canvas examples used in this course 01m 59s
3. Introducing the Canvas Element
Introducing the Canvas tag 06m 30s
Understanding the differences between Canvas and SVG 02m 28s
4. Understanding the Canvas Element and 2D Drawing API
Identifying the Canvas element's methods and properties 01m 40s
Using the Canvas drawing context 03m 56s
5. Basic Canvas Drawing Techniques
Setting and using colors and styles 03m 19s
Drawing basic shapes: Rectangles and lines 10m 21s
Understanding the Canvas state 05m 15s
Drawing complex shapes: Arcs and paths 09m 15s
Drawing complex shapes: Bézier and quadratic curves 05m 46s
Rendering text 09m 18s
6. Complex Canvas Drawing Techniques
Creating shadows 06m 41s
Drawing with patterns 07m 20s
Drawing with gradients 06m 18s
Using clipping paths 04m 46s
Drawing images and video 07m 30s
7. Advanced Canvas Drawing Operations
Transforming objects using the translate tag 04m 18s
Scaling objects with the scale transformation 04m 07s
Rotating objects with the rotate transformation 04m 33s
Applying a custom transformation 06m 58s
Compositing in Canvas using globalAlpha 06m 36s
Manipulating raw pixels 09m 10s
8. Building Practical Examples
Building an image slideshow control 04m 24s
Using smooth transitions in a slideshow 04m 28s
Creating a basic animation 05m 42s
Creating animation with double buffering 13m 13s
Incorporating Canvas into a real page 13m 36s
Conclusion
Goodbye 00m 48s

Скриншоты

Содержание

Introduction
Welcome 00m 42s
Using the exercise files 00m 42s
1. Video and Audio Basics
Understanding HTML5 video and audio 04m 46s
The state of HTML5 video and audio 04m 29s
Understanding the format war 03m 53s
Configuring your server to deliver HTML5 media formats 02m 10s
2. Embedding Video and Audio
Using the video and audio tags 05m 34s
Using multiple sources for browser compatibility 05m 53s
Preloading 04m 16s
Autoplaying 02m 02s
Looping 05m 11s
Setting a poster frame 03m 43s
Setting the video width and height 03m 40s
Displaying subtitles and captions 02m 17s
3. Falling Back to Alternative Playback Methods
Falling back to Flash 04m 04s
Falling back to download links 06m 21s
Using an embed code builder 02m 15s
4. Encoding Audio and Video Files
Understanding HTML5 video formats 05m 10s
Understanding HTML5 audio formats 02m 57s
Encoding MP4/H.264 video with HandBrake 03m 13s
Encoding Ogg, Theora, and WebM with Firefogg 03m 18s
Encoding audio formats with VLC 05m 54s
Automating video and audio encoding 01m 45s
5. Building Your Own Controls with JavaScript
Setting up the JavaScript 04m 39s
Creating Play and Pause buttons 07m 52s
Creating a Play Progress bar 05m 49s
Creating a Load Progress bar 09m 29s
Creating a Current Time and Duration display 07m 10s
6. Known Issues and Workarounds
Overview of known issues 00m 35s
Autobuffer or preload? 00m 56s
Load progress in Firefox 3.6 00m 41s
Android 2.0 issues 01m 05s
iOS 3 issues 01m 20s
7. Audio and Video in the Wild
Flight of the Navigator 00m 50s
ZEN Audio Player by simurai 00m 34s
The Wilderness Downtown by Google and Arcade Fire 00m 44s
Conclusion
Further exploration 01m 40s

Скриншоты

Содержание

Introduction
Welcome 00m 48s
Using the exercise files 01m 32s
1. Introducing HTML5
A brief overview of HTML5 03m 57s
What's in the HTML5 specification? 08m 17s
Why do we need new structural elements? 06m 53s
2. HTML5 Basics
Defining HTML5 documents 05m 05s
HTML5 syntax 09m 14s
The header element 05m 22s
The nav element 04m 55s
The section element 04m 51s
The article element 04m 48s
The aside element 04m 13s
The footer element 04m 17s
Content model overview 07m 48s
3. HTML5 Document Structure
Understanding the outline algorithm 03m 17s
Creating document sections 08m 25s
Using headings properly 09m 01s
Using hgroup to override sectioning 04m 17s
Properly nesting structure 07m 17s
Sectioning roots 03m 11s
4. Coding an HTML5 Site: Initial Page Structure
Organizing content 04m 41s
Planning document structure 05m 47s
Choosing the right structural element 04m 43s
Checking document outlines 05m 27s
Coding initial page structure 05m 28s
Using class and ID attributes 05m 31s
Structuring headers 13m 13s
Building navigation 07m 01s
Structuring footers 06m 39s
5. Coding an HTML5 Site: Grouping Content
Working with figure and figcaption 07m 12s
Grouping content with asides 03m 46s
Using divs in HTML5 05m 00s
Working with lists in HTML5 07m 10s
The return of bold and italic 05m 52s
Citing works semantically 06m 32s
Using the address element 05m 24s
Using the small element 04m 24s
Using the mark element 05m 16s
Working with date and time 11m 55s
Creating block-level links 08m 53s
Understanding link relationships 09m 28s
Defining link relationships 06m 23s
6. Structuring Semantic HTML5 for the Real World
Current browser support 07m 38s
Ensuring block-level display 04m 03s
Adding support for elements in older browsers 05m 41s
Conclusion
Additional Resources 03m 46s

Скриншоты

Содержание

Introduction
Welcome 01m 08s
Using the exercise files 01m 17s
1. Overview
Four types of storage 04m 32s
Understanding the architecture 02m 31s
Running applications offline 01m 30s
2. The Web Storage Interface
Providing client-side storage 00m 59s
Understanding the Storage() interface 07m 56s
Persistent storage with localStorage 07m 25s
Keeping context with sessionStorage 03m 58s
3. Web SQL Storage
The state of Web SQL Storage 01m 42s
Understanding the Web SQL API 04m 42s
Creating a database 10m 07s
Inserting and reading rows of data 09m 25s
Editing rows of data 07m 26s
Deleting rows of data 07m 19s
4. The Indexed Database API
The state of IndexedDB storage 02m 13s
Understanding the IndexedDB API 07m 57s
Create an IndexedDB database 14m 57s
Adding and reading data in an IndexedDB database 09m 14s
Editing data in an IndexedDB database 07m 51s
Deleting data from an IndexedDB database 05m 29s
5. Storage Events
Understanding storage events 01m 18s
Handling storage events with local storage 08m 58s
6. Offline Applications
Overview of offline web applications 01m 30s
Using applications offline 09m 19s
7. Conclusion
Goodbye 00m 43s

Скриншоты

Содержание

Introduction
Welcome 01m 01s
Using the exercise files 01m 59s
Installing the essential tools 02m 36s
Using HTML5 Forms in the real world 01m 50s
1. Overview of HTML5 Forms
What's new in HTML5 Forms? 05m 06s
Overview of the new HTML5 Forms features 03m 48s
2. Using the New Attributes and Methods
Designating a default active form field using the autofocus attribute 03m 45s
Auto-filling previously entered data with the autocomplete attribute 03m 17s
Displaying placeholder text in form fields 05m 14s
Constraining form field data with a regular expression using the pattern attribute 03m 28s
Creating Submit buttons that bypass validation rules using the novalidate attribute 03m 28s
Setting required fields 02m 59s
Using the text selection APIs 04m 42s
Building CSS styling for invalid, valid, and required fields 04m 15s
3. Formatting Fields with the New Input-Type Attributes
Creating a search field 02m 44s
Capturing email addresses 03m 18s
Building a web address field 03m 35s
Creating a phone number input field 02m 22s
Formatting number fields 04m 44s
Creating fields for capturing number ranges 04m 10s
Building a date picker field 07m 22s
Invoking the color picker for field input 02m 10s
4. Using the New Form Elements
Creating a list of suggested entries using the datalist element 03m 50s
Using the progress element to create a progress bar 03m 52s
Indicating measurements with the meter element 05m 33s
Displaying the results of a calculation using the output element 05m 36s
5. Real-World Examples of HTML5 Forms
HTML5 Forms and mobile 08m 41s
Transforming an ordinary form into an HTML5 form 12m 15s
Conclusion
Goodbye 00m 53s

Скриншоты

Скриншоты

Topics include

* Exploring the HTML/Javascript/CSS/DOM relationship
* Detecting drag and drop support
* Using the HTML5 draggable and dropzone attributes and onDragStart event
* Exploring different events
* Receiving drops with or without a drop zone
* Creating a simple game

Содержание

Introduction 05m 30s
Welcome 00m 53s
Using the exercise files 01m 05s
The JavaScript library 01m 35s
The CSS files 01m 57s
1. Overview 08m 38s
Understanding HTML5 drag and drop 02m 07s
Exploring a sample drag-and-drop application 06m 31s
2. The Details 27m 48s
Detecting drag-and-drop support 03m 31s
Coding a simple event listener 05m 12s
Exploring the different events 10m 02s
Using a drop zone 06m 05s
Receiving drops without a drop zone 02m 58s
3. A Case Study 17m 59s
Creating a simple game 04m 23s
Exploring the RPS code 10m 12s
Exploring the RPS CSS 03m 24s
Conclusion 00m 55s
Next steps 00m 55s

Скриншоты

Topics include

Understanding how geolocation works
Detecting geolocation support
Getting coordinates
Continuous tracking with watchPosition()
Integrating geolocation with Google Maps

Скриншоты

Topics include

Providing an overview of the File API interfaces
Using the File Input form element
Working with multiple files
Using drag and drop
Reading data as text
Using File API event handlers
Reading file slices

Скриншоты

Topics include

Deploying a worker
Detecting browser support
Communicating with workers
Understanding API differences in shared workers

Содержание

Introduction 02m 17s
Welcome 00m 46s
Using the exercise files 01m 31s
1. Overview 05m 10s
Understanding workers 02m 18s
Deploying a worker 02m 52s
2. The Details 27m 42s
Detecting Web Workers support 05m 23s
Reviewing the application 03m 51s
Setting up the worker 04m 17s
Communicating with the worker 09m 23s
Handling errors 04m 48s
3. Shared Workers 16m 02s
Understanding API differences in shared workers 00m 56s
Reviewing a shared workers example 03m 01s
Exploring the details 12m 05s
Conclusion 01m 00s
Goodbye 01m 00s

Скриншоты

Содержание

Introduction 02m 11s
Welcome 00m 35s
Using the exercise files 01m 36s
1. Overview 12m 52s
Overview of HTML5 messaging 01m 54s
Security and the same-origin policy 05m 48s
An example application 05m 10s
2. Event Listeners 20m 14s
Registering a listener 07m 34s
Sending messages to a listener 06m 21s
Handling errors 06m 19s
3. Cross-Document Messaging 07m 04s
An interactive example 02m 03s
Exploring the example code 05m 01s
Conclusion 00m 58s
Goodbye 00m 58s

Скриншоты

Topics include

* Understanding HTML5 browser support
* Creating class files and animation loops
* Comparing Canvas and BitmapData
* Drawing dynamic graphics
* Exploring DOM animation
* Understanding CSS3 design properties
* Using CSS animations and transforms
* Understanding WebGL
* Using Adobe Edge and the CreateJS library

Содержание

Introduction 5m 10s
Welcome 39s
Using the exercise files 59s
Setting up your system 3m 32s
1. Overview of HTML5 9m 23s
What is HTML5? 5m 10s
Reviewing browser support for HTML5 1m 45s
Choosing HTML5 tooling 2m 28s
2. Transitioning from ActionScript to JavaScript 31m 12s
Comparing ActionScript and JavaScript 6m 26s
Exploring object-oriented programming in JavaScript 7m 17s
Creating class files 4m 39s
Creating animation loops 6m 3s
Using Modernizr for feature detection 3m 41s
Looking at helpful JavaScript resources 3m 6s
3. The Canvas Element 47m 15s
Comparing Canvas and BitmapData 4m 32s
Creating a Canvas "Hello World" 4m 17s
Drawing dynamic graphics 10m 30s
Working with states and transforms 5m 7s
Drawing images 6m 6s
Drawing sprite sheets 9m 28s
Animating Canvas elements 2m 45s
Using multiple Canvas elements 4m 30s
4. DOM Animation 14m 57s
What is the Document Object Model (DOM)? 3m 49s
Animating DOM elements 7m 50s
Choosing between Canvas and the DOM 3m 18s
5. Using CSS3 29m 36s
Overview of CSS3 4m 12s
Exploring CSS3 design properties 7m 40s
Animating using transitions 6m 22s
Using CSS animations 5m 2s
Using 2D and 3D transforms 6m 20s
6. Incorporating Audio and Video 19m 30s
Using the HTML5 video tag 6m 57s
Controlling video with JavaScript 4m 20s
Playing sounds with the audio tag 4m 15s
Looking at the future of web audio and video 3m 58s
7. Incorporating 3D with WebGL 19m 3s
Overview of WebGL 4m 19s
Getting started with three.js 10m 42s
Working with shaders and lights 4m 2s
8. Useful Tools and Frameworks 18m 8s
Animating using Adobe Edge 6m 39s
Using the CreateJS library 7m 16s
Creating HTML5 animation using Flash CS6 4m 13s
Conclusion 2m 35s
Moving forward with Flash and HTML5 2m 35s

Скриншоты