Hi 5 with HTML5June 6th, 2013; ThursdayEast West University
No Lines….. of CodesMore Conceptual for newbies
Timeline• What’s HTML & HTML5 ?• Why HTML4 isn’t Perfect ?• What’s Responsive Web Design ?• What are the differences ?• Wh...
HTML=Hyper Text Markup LanguageHTML5=HTML version “5”
• HTML: Started with the Internet: Early 90s• HTML4: W3C Recommendation in 1997• HTML5– Started: 2003– Working Draft: 2011
Why HTML4 is not perfect ?• Introduced very long ago• No option available for rich media• No animation available• Not made...
Responsive• Gets the shape of your device’s screen• For desktop, laptop, mobile, tab, ANYTHING• Percentage based rather th...
What’s new ?• Less Header Codes• More Semantic HTML tags• Media Tags• Geolocation• Canvas• Input Types• Form Validation• L...
Codes
Semantic Tags• Semantic = Meaningful
Semantic Tags• <article> Defines an article• <aside> Defines content aside from the pagecontent• <figcaption> Defines a ca...
Media Tags• Embed media files directly• No flash player needed for videos• Can put multiple sources for same media
New Media Tags<audio>• Defines sound content• <video>• Defines a video or movie• <source>• Defines multiple media resource...
Media Tags<audio src=”test.ogg”></audio><audio src=”test.ogg” autoplay controls loop><a href=”test.ogg”>download</a>
Media Tags<video src=”video.ogg” />with native controls:<video src=”video.ogg” controls /><video controls/><source src=”vi...
Geolocation• Like GPS for the browser• Browser gathers information about nearbywireless access points and computer’s IPadd...
Geolocationnavigator.geolocation.getCurrentPosition(function(position){position.coords.latitude,position.coords.longitude});
Input Types• color• date• datetime• email• month• number• range• tel• time• url
New Form Elements• <datalist>• Specifies a list of pre-defined options for inputcontrols• <keygen> Defines a key-pair gene...
SVG• SVG = Scalable Vector Graphics• vector-based graphics for the Web• SVG graphics do NOT lose any quality if theyare zo...
Local Storage• Known as Web storage– localStorage - stores data with no expiration date– sessionStorage - stores data for ...
Offline• application cache: web application is cached,and accessible without an internetconnection.• Offline browsing - us...
HTML5 Wonders• Google Gravity• WebGL Water• Spinning HTML5 Logo• Universeries
What I Can Do ?• Make WebApps (html5stuco.com)• Make Apps for Android• FirefoxOS is built to run HTML5 apps
HTML Ready Browsers
Resources• w3Schools• Html5rocks.com• dive into html5 (book)• Stack Over Flow
Arif Nezami• activist | blogger | entrepreneur• GDG Dhaka Organizer• www.arifnezami.com• m@arif.pw• @arifnezami• Slides: a...
Hi5 with HTML5
Upcoming SlideShare
Loading in …5
×

Hi5 with HTML5

610 views

Published on

A very basic intro HTML5 made for Google Developer Group Dhaka HTML5 Event.

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

No Downloads
Views
Total views
610
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Hi5 with HTML5

  1. 1. Hi 5 with HTML5June 6th, 2013; ThursdayEast West University
  2. 2. No Lines….. of CodesMore Conceptual for newbies
  3. 3. Timeline• What’s HTML & HTML5 ?• Why HTML4 isn’t Perfect ?• What’s Responsive Web Design ?• What are the differences ?• What’s new in HTML5 ?• Why Learn ?• Demos• Q&A (keep questioning during the whole session)
  4. 4. HTML=Hyper Text Markup LanguageHTML5=HTML version “5”
  5. 5. • HTML: Started with the Internet: Early 90s• HTML4: W3C Recommendation in 1997• HTML5– Started: 2003– Working Draft: 2011
  6. 6. Why HTML4 is not perfect ?• Introduced very long ago• No option available for rich media• No animation available• Not made kept in different screen sizes
  7. 7. Responsive• Gets the shape of your device’s screen• For desktop, laptop, mobile, tab, ANYTHING• Percentage based rather than pixels• Simply it’s like water: gets the shape of thething it’s in
  8. 8. What’s new ?• Less Header Codes• More Semantic HTML tags• Media Tags• Geolocation• Canvas• Input Types• Form Validation• Local Storage
  9. 9. Codes
  10. 10. Semantic Tags• Semantic = Meaningful
  11. 11. Semantic Tags• <article> Defines an article• <aside> Defines content aside from the pagecontent• <figcaption> Defines a caption for a <figure>element• <time> Defines a date/time
  12. 12. Media Tags• Embed media files directly• No flash player needed for videos• Can put multiple sources for same media
  13. 13. New Media Tags<audio>• Defines sound content• <video>• Defines a video or movie• <source>• Defines multiple media resources for <video> and <audio>• <embed>• Defines a container for an external application orinteractive content (a plug-in)• <track>• Defines text tracks for <video> and <audio>
  14. 14. Media Tags<audio src=”test.ogg”></audio><audio src=”test.ogg” autoplay controls loop><a href=”test.ogg”>download</a>
  15. 15. Media Tags<video src=”video.ogg” />with native controls:<video src=”video.ogg” controls /><video controls/><source src=”video.mp4” /><source src=”video.ogg” /></video>
  16. 16. Geolocation• Like GPS for the browser• Browser gathers information about nearbywireless access points and computer’s IPaddress. Then it sends this information to thedefault geolocation service provider, GoogleLocation Services, to get an estimate oflocation. That location estimate is then sharedwith the requesting website.
  17. 17. Geolocationnavigator.geolocation.getCurrentPosition(function(position){position.coords.latitude,position.coords.longitude});
  18. 18. Input Types• color• date• datetime• email• month• number• range• tel• time• url
  19. 19. New Form Elements• <datalist>• Specifies a list of pre-defined options for inputcontrols• <keygen> Defines a key-pair generator field• <output> Defines the result of a calculation
  20. 20. SVG• SVG = Scalable Vector Graphics• vector-based graphics for the Web• SVG graphics do NOT lose any quality if theyare zoomed or resized• Every element can be animated
  21. 21. Local Storage• Known as Web storage– localStorage - stores data with no expiration date– sessionStorage - stores data for one session• Like cookies but can only be read client-side• Security: webpage can read only data saved byitself
  22. 22. Offline• application cache: web application is cached,and accessible without an internetconnection.• Offline browsing - users can use theapplication when theyre offline• Speed - cached resources load faster• Reduced server load
  23. 23. HTML5 Wonders• Google Gravity• WebGL Water• Spinning HTML5 Logo• Universeries
  24. 24. What I Can Do ?• Make WebApps (html5stuco.com)• Make Apps for Android• FirefoxOS is built to run HTML5 apps
  25. 25. HTML Ready Browsers
  26. 26. Resources• w3Schools• Html5rocks.com• dive into html5 (book)• Stack Over Flow
  27. 27. Arif Nezami• activist | blogger | entrepreneur• GDG Dhaka Organizer• www.arifnezami.com• m@arif.pw• @arifnezami• Slides: arif.pw/slides

×