HTML5
Lesson 01
Introducing HTML5
[] New Features in HTML5
- Canvas
- localStorage
- Offline apps
- Form Components
- Drag & drop
[] Updated news about browser support:
www.findmebyip.com
www.caniuse.com
www.modernizr.com
www.html5test.com (to test your browsers)
------------------------------------------------------------------------------------------------------------------------
Lesson 02
Whats New in HTML5
Document tags-------------------------------------------------------------------------------------------------------
Since HTML is now no longer SGML based, no DOCTYPE is required at all.
<! DOCTYPE HTML>
<meta charset="UTF-8" />
Sectioning tags-------------------------------------------------------------------------------------------------------
<section> New Section
<article> Content can be displayed independently. Published Materials Section
<aside> Side contents that are "related" to any element that is within the same level
<nav> Main Navigations only (and Next & Previous buttons)
Structure tags---------------------------------------------------------------------------------------------------------
<header> Introductorya and grouping heading content
<footer> Info About a Section and grouping footer content
<hgroup> Group Headings with multiple levels
<div> Last resort to group related content or to control document stucture.
Content tags----------------------------------------------------------------------------------------------------------
<mark> marks and highlights important text
<figure> groups or sections the "visual" content
<video> runs video
<audio> runs Audio
<embed> for external non-HTML application or interactive content (e.g. Flash)
<canvas> to render graphics, game graphics, or visual images through scripts
App-focused tags----------------------------------------------------------------------------------------------------
<meter> a gauge.
<progress> loading bar
<time> calendars, social applications, data feeds...etc
<details> for additional information
<command> to invoke commands
<menu> list of commands, like a Context Menu or a Toolbar
Deprecated tags------------------------------------------------------------------------------------------------------
<base> <big> <center> <font> <s> <strike> <tt> <u> <acronym> <applet> <isindex> <dir> <frame> <frameset> <noframe>
Deprecated attribute-------------------------------------------------------------------------------------------------
[align] from all elements,
[background] from <body>
[height], [width] from <th>, <td>
[hspace], [vspace], [name] from <img>
[border], [cellspacing], [cellpadding], [valign], [bgcolor] from <table>
[] New APIs to Learn How to Use
Integrated APIs:
. Video & Audio API . Inline Editing API . Offline Application API
. History API . Web Protocol API . Drag & Drop API
Associated APIs:
. Geolocation API . 2D Canvas Drawing API . Local Storage API
. Web Worker API . Web Sockets API . Messaging API
------------------------------------------------------------------------------------------------------------------------
Lesson 03
Creating HTML5 Documents
[] HTML5 Content Models [] HTML4 Content Models
1. Metadata 1. Block-level Elements
2. Embedded 2. Inline-level Elements
3. Interactive
4. Heading
5. Phrasing
6. Flow
7. Sectioning
[] Outline Algorithm
is the algorithm that outlines your website as a table of contents.
<article> <aside> <section> <nav>
Elements which are used to define new sections in your website.
<h1> - <h6>
Headings are used to name these sections. The algorithm takes the first heading (e.g. <h1>) of a section and uses it as a title of that section in an outlined document.
The <div> Tag
Use the <div> element as a last structuring resort, for when no element is suitable. Used to group related content or to control document stucture.
-----------------------------------------------------------------------------------------------------------------------
Lesson 04
Structuring HTML5 Documents
Wrapper Element: <div>
Hearder: <header>
Nav: <nav>
Main Inside Content <section>
<header>
<article>
Video Box: <section>
Box: <section>
<header>
<div>, <ul>, <article>...etc
<footer> or not..
News Box: <aside>
Footer: <footer>
[] Checking Your Document Outlines
(1) http://gsnedders.html5.org/outliner/
A page that parses your document using the HTML5 Outline algorithm.
(better to provide it with a link)
(2) http://code.google.com Click on "Chrome extension" to install extension
After browsing to a website, click on the small icon at the end of the url bar to view Document HTML5 Outline.
[] Cross-browser Compliance
CSS Code Initial:
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summery {
display: block;
}
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif ] -->
Or find file here:
http://html5shim.googlecode.com/svn/trunk/html5.js
-----------------------------------------------------------------------------------------------------------------------
Lesson 05
Forms in HTML5
[] New Form Updates
Email textfield <input type="email" name="email">
Website textfield <input type="email" name="url">
Autofocus Attribute <input type="text" name="name" autofocus="true">
or <input type="text" name="name" autofocus> (same result)
Place Holder <input type="email" name="email" placeholder="example: info@url.com">
Form Validation <input type="text" name="name" required>
Range <input type="range" name="quantity"> (slider)
Number <input type="number" Number type
tabindex="60"
value="1" Initial value
step="5" Increment by 5
min="1" max="200" Gives range between 1 and 200
Date Picker <input type="date" name="name" required>
-----------------------------------------------------------------------------------------------------------------------
Lesson 06
API Support
[] Canvas API
1. The Canvas 2D API
2. The Canvas API
[] Drag & Drop API
. Native to the Browser, no external library required
. Supports dragging elements from outside applications
[] Offline Application API
<html manifest="cache.manifest">
How it works
1. Create a Cache Manifest, which is a text file that lists the application resources.
2. Hosting servers must recognize the manifest mime type. In other words, you should add this mime type to your server before building offline applications.
3. Browser then creates an appcache specific to that application.
"Phone Contact List" Example (1) of a Cache Manifest:
CACHE MANIFEST
# this is a comment
# it is telling the Browser to retrieve the following resources
index.htm
_css/main.css
_scripts/contacts.js
"Phone Contact List" Example (2) of a Cache Manifest:
CACHE MANIFEST
# this is a comment
CACHE:
index.htm
_css/main.css
_scripts/contacts.js
NETWORK:
updateContacts.cgi
FALLBACK:
_image/update.jpg_images/offline.jpg
CACHE
All resources after the CACHE header are explicit. Here you're telling the Browser to ALWAYS use these files, don't check for newer ones. Then people visiting your site will see the files from their cache instead of the ones on the server.
NETWORK:
This header creates references to the Online Whitelist. Items listed under it are NOT cached, browser will always try to access them online
FALLBACK
Allows you to use substitute content when the user is offline. The way it works is, if the content listed in the FALLBACK header is not explicitly Cached, each time the application loads it will be requested by the server. If for some reason the application fails to load the resource, it will then load this FALLBACK content
[] Audio & Video
Audio:
<audio src="../audio/1.wav" autoplay="autoplay"> </audio>
Video:
Main video codecs supported differently by Browsers:
1. Ogg Theora (.ogv)
2. H.264 (.mp4)
3. VP8 (.webm)
(1) Ogg Theora
1. Download and install Firefogg free video encoder at Firefogg.org
2. Click on Make web video
3. Select new file
4. After configuring the settings, click Encode to File
(2) H.264
1. Handbrake.fr free video encoder
2. Download
3. Open application and select your file
4. Toggle Presets, then choose iPhone & iPod Touch
5. Check "Web Optimized"
Finally, adding Video to HTML5 Document
<video width="420" height="263" controls preload="false" poster="drive.png">
<source src="myVideo.mp4" type="video/mp4" />
<source src="myVideo.ogv" type="video/ogg" />
</video>
-----------------------------------------------------------------------------------------------------------------------
Lesson 07
Associated Technologies
[] Geolocation API
The core of this API is built around the global Navigator Object
navigator.geolocation
You can use 2 methods:
1. getCurrentPosition(plotLocation, plotError)
2. watchPosition()
plotLocation Object Properties:
1. timestamp (time of receiving the data)
2. coords:
. latitude
. longitude
. altitude
. accuracy
. altitudeAccuracy
. heading
. speed
3rd Party Geolocation Tools
1. Modernizr for detection http://www.modernizr.com
2. Google Gears for fallback option http://gears.google.com
3. Geo.js open-source library http://code.google.com/p/geo-location-javascript/
[] Web Storage API
Ways of storing online data:
1. Server-side (online)
2. Cookies (offline)
3. Web Storage API of HTML5 (5MB offline)
[] Web Sockets API
AJAX: Server sending the requested data to Client without requiring a page refresh.
COMET: Sending data from Server without necessarily requiring a request from the Client.
Web Sockets creates a single, two-way client server connection. Unlike AJAX and COMET, Web Sockets are native to the Browser, and they use their own protocol. They are not limited to Browser clients only, but others too (AIR, Flash, Silverlight...etc.)
var newSocket = new WebSocket("ws://www.mysocket.org");
1. Send HTTP request
2. Initiating a presistent Web Socket connection
[] CSS3 Typography
@font-face {
font-family: 'baderalgordabiabader';
src: url('bader_al_gordabia-webfont.eot');
src: local('☺'),
url('bader_al_gordabia-webfont.eot?#iefix') format('embedded-opentype'),
url('bader_al_gordabia-webfont.woff') format('woff'),
url('bader_al_gordabia-webfont.ttf') format('truetype'),
url('bader_al_gordabia-webfont.svg#baderalgordabiabader') format('svg');
font-weight: normal;
font-style: normal;
}
License-free Fonts:
www.fontsquirrel.com (e.g. Mido, ChunkFive, ...etc.)
Note: [header]: Each section should be considered to have a header at least if possible.
[<header>&<footer>]: mustn't contain <header> and <footer> tags within them.
[Class Name]: getElementByClassName() is new to the DOM in HTML5.
[ID]: Using IDs to mark each element is still important despite the variety of elements.
[Geolocation]: For a successful app, make sure you ask the user very early in the
application to agree to share their location.
-----------------------------------------------------------------------------------------------------------------------
APPENDIX
[] <!DOCTYPE html>
Depending on the doctype declaration, browsers rendered documents in 2 modes:
1. Quirks Mode
Triggered by a lack of doctype declaration, used to render older or non-standard HTML.
2. Standard Mode
Driven by the use of proper doctype following the proper HTML specifications.
[] Character Encoding
Character encoding is how your browser takes the binary data sent to it and translates it into characters on the screen.
HTML4: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8" />
<section></section>
Distinct regions with distinct titles within your document. If you're creating an outline of your document any element identified as a section should be listed in that outline.
(Chapters, Introductions, Product Descriptions)
<article></article>
A region where its content is a published or to-publish data. This could be a form post, a magazine or newspaper article, a blog entry, a user-submitted comment..etc
<aside></aside>
Poll Quotes, Ads, Sidebar Contents. An aside element should be nested within the section of content which that it relates to.
<header></header>
Introductory, Navigational
A webpage can contain more than one header element.
<hgroup></hgroup>
Grouping Headings with multiple levels, Subheading, Alternative Titles, Taglines
It makes all surrounded headings relate to each other without creating a new section.
<footer></footer>
Information about its section, related links, related documents, copyright data..
A webpage can contain more than one footer.
<nav></nav>
Designed to group the "major" navigational elements in the website
[] Content Tags
<figure></figure>
Grouping or sectioning the visual content related to the page's overall content.
<video></video>
<audio></audio>
<embed></embed>
For external non-HTML application or interactive content (e.g. Flash)
<canvas></canvas>
Used for rendering graphics, games graphics, or visual images through scripts.
[] Application-focused Tags
<meter></meter>
The meter element is a gauge.
<progress></progress>
It is the completion element of a task (indeterminate or determinate)
<time></time>
Calendars, Social Applications, Data Feeds
Represents a time on a 24 hour clock, or a precise Gregorian-calendar date.
<details></details>
For widgets from which the user can obtain additional information or control (e.g. Tab widget structure).
<command></command>
To invoke commands that can help build toolbars, panel commands...etc.
<menu></menu>
List of commands (e.g. Context Menu, Toolbar..etc)
[] HTML5 Content Models
1. Metadata Content
is content that sets up the presentation or behavior of the rest of the content.
Elements: <base>, <command>, <meta>, <link>, <noscript>, <script>, <title>, <style>
2. Embedded Content
is any content that imports other resources into the document.
Elements: <embed>, <iframe>, <object>, <img>, <audio>, <video>, <canvas>, <svg>, <math>
3. Interactive Content
is any content intended for user interaction.
Elements: <a>, <embed>, <iframe>, <input>, <label>, <textarea>, <select>, <object>, <img>, <audio>, <video>, <button>, <menu>, <keygen>, <details>
4. Heading Content
defines the header of a section.
Elements: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>
5. Phrasing
the text of the document, as well as elements used to mark up the text within paragraph level structures.
Elements: <a>, <abbr>, <strong>, <br>, <b>, <command>, <script>, <textarea>, <video>...etc
6. Flow Content
elements that would be included in the normal flow of the document (i.e. inside the <body>).
Elements: The majority of elements!
7. Sectioning Content
content that defines the scopr of headings and footers.
Elements: article, aside, nav, section
[] Online API Solution Resources
Canvas Specifications:
http://dev.w3.org/html5/spec/Overview.html#the-canvas-element
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
Canvas Tutorials:
http://developer.mozilla.org/en/Canvas_tutorial
http://dev.opera.com/articles/view/html5-canvas-the-basics
http://www.canvasdemos.com
http://www.modernizr.com
Drag & Drop Resources:
http://dev.w3.org/html5/spec/Overview.html#dnd
Cross Browser HTML5 Drag and Drop
http://html5demos.com
Offline Resources:
http://www.w3.org/TR/html5/offline.html#offline
http://diveintoHTML5.org/offline.html
http://building-iphone-apps.labs.oreilly.com/ch06.html
http://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache
Video Resources:
http://www.webmproject.org
http://videojs.com
http://www.html5video.org
http://www.diveintohtml5.org/video.html
http://camendesign.com/code/video_for_everybody
Geolocation Demos
http://maxheapsize.com/static/html5geolocationdemo.htm
http://merged.ca/iphone/html5-geolocation
http://htmlfive.appspot.com/static/whereami.html
http://html5demos.com/geo
Web Storage API Resources
http://dev.w3.org/html5/webstorage
http://modernizr.com
http://www.jstorage.info
Other Web Storage methods
Google Gears http://gears.google.com
Web SQL DB http://dev.w3.org/html5/webdatabase
Web Socket Resources
http://jwebsocket.org
http://dev.w3.org/html5/websockets
http://www.whatwg.org/specs/web-socket-protocol
CSS3
http://ecsstender.org Cross-browser compliant code
http://css3generator.com Vendor specific code
Watch HTML5 Updates
http://dev.w3.org/html5/spec/Overview.html
http://www.whatwg.org/specs/web-apps/current-work/multipage/
