Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 &&& css3

577 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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/

×