Your SlideShare is downloading. ×
Html5 &&& css3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 &&& css3

265
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
265
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML Header Figure Navigation Section Article Footer Asid e Article Image, Video, Quote, Table, etc… Footer Article Footer Legend Footer
  • 2. HTML5      HTML5 ≈ HTML 5 + CSS 3 + JavaScript Rich Internet Applications (RIA) HTML5 x 5 Caution and Progress Example and Reference Sites
  • 3. New In HTML5        Simplified and Loose Syntax New Elements and Attributes Embedded Media Canvas Offline Storage Drag and Drop Geo-Location
  • 4. 5 HTML Enhancements      HTML Forms CSS Offline applications Local storage
  • 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. 5 HTML Enhancements      HTML Forms CSS Offline applications Local storage
  • 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. Form Enhancements  Placeholder text  Specific text input: email, URL, number,    search Slider Date picker User Agent validation
  • 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. CSS3      HTML Forms CSS Offline applications Local storage
  • 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. 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. 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. 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. 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/