The document discusses HTML5 and CSS3 enhancements including new elements, embedded media, canvas, offline storage, drag and drop, geo-location, forms, local storage and various visual effects. It provides examples of using new HTML5 elements like video and canvas, and applying CSS3 effects with rounded corners, gradients, shadows and animations. It also lists several developer reference sites for information on HTML5 and CSS3 specifications and browser support.

2. HTML
Header
Figure
Navigation
Section
Article
Footer
Asid
e
Article
Image, Video, Quote,
Table, etc…
Footer
Article
Footer
Legend
Footer

3. HTML5





HTML5 ≈ HTML 5 + CSS 3 + JavaScript
Rich Internet Applications (RIA)
HTML5 x 5
Caution and Progress
Example and Reference Sites

4. New In HTML5







Simplified and Loose Syntax
New Elements and Attributes
Embedded Media
Canvas
Offline Storage
Drag and Drop
Geo-Location

5. 5 HTML Enhancements





HTML
Forms
CSS
Offline applications
Local storage

6. HTML Extended
 Document Flow: div, section, article, nav,



aside, header, footer
Audio, Video and Embed
Canvas: paths, gradients, image
manipulation, events
Micro data for semantics and enhanced
search engine results (Google Rich
Snippets)

7. 5 HTML Enhancements





HTML
Forms
CSS
Offline applications
Local storage

8. HTML5
IN THE REAL WORLD
Why HTML5 ????
 Pros
 Better
semantics
 Lean code
 Improved user experience
 Cons
 Some
work is needed to accommodate older
browsers

9. Form Enhancements
 Placeholder text
 Specific text input: email, URL, number,



search
Slider
Date picker
User Agent validation

10. Audio and Video Tag
Video for Everybody code by Kroc Camen
<video width="480" height="270" controls>
<source src="mafSept10Welcome.mp4" type="video/mp4" />
<source src="mafSept10Welcome.ogv" type="video/ogg" />
<object width="480" height="289" type="application/xshockwave-flash" Developer Reference Sites
data="player.swf?&amp;file=mafSept10Welcome.flv”>
<param name="movie"
value="player.swf?&amp;file=mafSept10Welcome.flv&amp" />
</object>
</video>
FREE!
See http://videojs.com for details and downloads.

11. CSS3





HTML
Forms
CSS
Offline applications
Local storage

12. CSS3
IN THE REAL WORLD
Why CSS3 ????
 Pro
 Smaller
download
 Less JavaScript
 Better user experience
 Cons
 Some
work is needed to accommodate older
browsers

13. CSS Effects











Rounded corners
Gradients
Box and text shadows
Fonts
Transparencies
Multiple background images and border
images
Multiple columns and grid layout
Box sizing
Stroke and outlines
Animation, movement and rotation
Improved selectors

14. CSS Effect Example





HTML
Forms
CSS
Offline applications
Local storage
HELLO
http://css3generator.com/
.amazing {
border: 1px solid blue;
color: red;
background-color: blue;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
-webkit-box-shadow: 8px 8px 6px
#474747;
-moz-box-shadow: 8px 8px 6px
#474747;
box-shadow: 8px 8px 6px
#474747;
text-shadow: 8px 8px 2px
#595959;
filter:
dropshadow(color=#595959,
offx=8, offy=8);

15. Demos and Experiments
 Chrome Experiments
http://www.chromeexperiments.com
 Apple HTML5 Showcase
http://www.apple.com/html5/
 Canvas Demos
http://www.canvasdemos.com
 RIA Demos with browser support listed
http://html5demos.com

16. Developer Reference Sites
 W3C





http://dev.w3.org/html5/html-author/
http://w3.org/TR/css3-roadmap/
W3Schools HTML 5 Reference
http://www.w3schools.com/html5/
Dive Into HTML 5 (prerelease site for an O’Reilly book)
http://diveintohtml5.org
WebKit (Safari and Chromium)
http://developer.apple.com/safari/library/navigation/
http://www.chromium/home/
Mozilla
http://developer.mozilla.org/en/html/html5/
IE 8 & 9
http://msdn.microsoft.com/en-us/library/aa737439.aspx
http://ie.microsoft.com/testdrive/