Html5 &&& css3

568 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
568
On SlideShare
0
From Embeds
0
Number of Embeds
1
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/

×