HTML
Header

Figure

Navigation
Section
Article
Footer

Asid
e

Article

Image, Video, Quote,
Table, etc…

Footer

Article...
HTML5







HTML5 ≈ HTML 5 + CSS 3 + JavaScript
Rich Internet Applications (RIA)
HTML5 x 5
Caution and Progress
Exam...
New In HTML5









Simplified and Loose Syntax
New Elements and Attributes
Embedded Media
Canvas
Offline Storage...
5 HTML Enhancements







HTML
Forms
CSS
Offline applications
Local storage
HTML Extended

 Document Flow: div, section, article, nav,





aside, header, footer
Audio, Video and Embed
Canvas: p...
5 HTML Enhancements







HTML
Forms
CSS
Offline applications
Local storage
HTML5

IN THE REAL WORLD
Why HTML5 ????

 Pros
 Better

semantics
 Lean code
 Improved user experience

 Cons
 Some
...
Form Enhancements

 Placeholder text
 Specific text input: email, URL, number,




search
Slider
Date picker
User Age...
Audio and Video Tag
Video for Everybody code by Kroc Camen
<video width="480" height="270" controls>
<source src="mafSept1...
CSS3







HTML
Forms
CSS
Offline applications
Local storage
CSS3

IN THE REAL WORLD
Why CSS3 ????

 Pro
 Smaller

download
 Less JavaScript
 Better user experience

 Cons
 Some...
CSS Effects













Rounded corners
Gradients
Box and text shadows
Fonts
Transparencies
Multiple backgroun...
CSS Effect Example







HTML
Forms
CSS
Offline applications
Local storage
HELLO

http://css3generator.com/

.amazin...
Demos and Experiments

 Chrome Experiments
http://www.chromeexperiments.com

 Apple HTML5 Showcase
http://www.apple.com/...
Developer Reference Sites
 W3C






http://dev.w3.org/html5/html-author/
http://w3.org/TR/css3-roadmap/
W3Schools H...
Html5 &&& css3
Html5 &&& css3
Upcoming SlideShare
Loading in …5
×

Html5 &&& css3

525 views
434 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
525
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 &&& css3

  1. 1. HTML Header Figure Navigation Section Article Footer Asid e Article Image, Video, Quote, Table, etc… Footer Article Footer Legend Footer
  2. 2. HTML5      HTML5 ≈ HTML 5 + CSS 3 + JavaScript Rich Internet Applications (RIA) HTML5 x 5 Caution and Progress Example and Reference Sites
  3. 3. New In HTML5        Simplified and Loose Syntax New Elements and Attributes Embedded Media Canvas Offline Storage Drag and Drop Geo-Location
  4. 4. 5 HTML Enhancements      HTML Forms CSS Offline applications Local storage
  5. 5. 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)
  6. 6. 5 HTML Enhancements      HTML Forms CSS Offline applications Local storage
  7. 7. HTML5 IN THE REAL WORLD Why HTML5 ????  Pros  Better semantics  Lean code  Improved user experience  Cons  Some work is needed to accommodate older browsers
  8. 8. Form Enhancements  Placeholder text  Specific text input: email, URL, number,    search Slider Date picker User Agent validation
  9. 9. 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.
  10. 10. CSS3      HTML Forms CSS Offline applications Local storage
  11. 11. CSS3 IN THE REAL WORLD Why CSS3 ????  Pro  Smaller download  Less JavaScript  Better user experience  Cons  Some work is needed to accommodate older browsers
  12. 12. 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
  13. 13. 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);
  14. 14. 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
  15. 15. 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/

×