Your SlideShare is downloading. ×
Html5
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

403
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
403
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
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. HTML5Everything that makes the web sing. Shaify Mehtahttp://www.shaify.com
  • 2. AgendaAgenda • Introduction to HTML5. • New Elements . • New Features. • Browser Supports. • Tutorials. • Live demos.
  • 3. Who am I?Who Am I ? Who am I?
  • 4. Who am I?Who Am I ? HTML5* Web Development to the next level *Including other next generation technologies of the Web Development stack
  • 5. Rough Timeline Of Web Technologies 1991 HTML 1994  HTML 2 Who Am I ? 1996  CSS 1 + JavaScript 1997  HTML 4 1998  CSS 2 2000  XHTML 1 2002  Tableless Web Design 2005  AJAX 2009  HTML 5
  • 6. HTML5Who Am I ? HTML5 ~= HTML + CSS + JS
  • 7. HTML5 Continued….HTML5
  • 8. New Features We intend to develop a service which is a blend of all above said services. This is saves the hassles of maintaining different user accounts for different services. Our website will be comprising of 1. Photo Sharing 2. Video Sharing 3. Document Sharing New Feautures
  • 9. Canvas Element • The HTML5 canvas element uses JavaScript to draw graphics on a web page. • A canvas is a rectangular area, and you control every pixel of it. <canvas id=“my Canvas” width=“200” height=“100” > </canvas>CanvasElement
  • 10. Canvas Element Continued….CanvasElement
  • 11. Audio & Video Audio& Video
  • 12. Audio & Video Continued….. • Today, most audio & videos are played through a plugin Audio& Video (like flash). However, not all browsers have the same plugins. • HTML5 specifies a standard way to include these, with the audio & video elements. • <audio src="song.ogg“ controls="controls“ > </audio> • <video src="movie.ogg“ controls="controls"> </video>
  • 13. Attributes : video Audio& Video
  • 14. Browser supportsBrowser Video :Supports •Ogg = Ogg files with Theora video codec and Vorbis audio codec •MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec •WebM = WebM files with VP8 video codec and Vorbis audio codec Audio :
  • 15. New Elements NewElements
  • 16. New Input Types • Email • Url • NumberNew Input • Range Types • Date pickers (date, month, week, time, datetime, datetime-local) • Search • Color
  • 17. Elements • <input type="email" name="user_email" /> • <input type="url" name="user_url" />Elements • <input type="number" name="points" min="1" max="10" /> • <input type="range" name="points" min="1“ max="10" /> • <input type="date" name="user_date" /> • <input type="color" name="user_color" />
  • 18. Web Storage WebStorage
  • 19. Web Storage • HTML5 offers two new objects for storing data on the client: • LocalStorage - stores data with no time limit • SessionStorage - stores data for one session WebStorage • Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective. • HTML5 uses JavaScript to store and access the data.
  • 20. Web Storage Continued…. LocalStorage : • <script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script> WebStorage SessionStorage: • <script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>
  • 21. HTML5 Support HTML5 Support
  • 22. Web Workers WebWorkers
  • 23. Web Workers WebWorkers