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

1. Hi 5 with HTML5
June 6th, 2013; Thursday
East West University

2. No Lines….. of Codes
More Conceptual for newbies

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. HTML
=
Hyper Text Markup Language
HTML5
=
HTML version “5”

5. • HTML: Started with the Internet: Early 90s
• HTML4: W3C Recommendation in 1997
• HTML5
– Started: 2003
– Working Draft: 2011

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. 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 the
thing it’s in

8. What’s new ?
• Less Header Codes
• More Semantic HTML tags
• Media Tags
• Geolocation
• Canvas
• Input Types
• Form Validation
• Local Storage

9. Codes

10. Semantic Tags
• Semantic = Meaningful

11. Semantic Tags
• <article> Defines an article
• <aside> Defines content aside from the page
content
• <figcaption> Defines a caption for a <figure>
element
• <time> Defines a date/time

12. Media Tags
• Embed media files directly
• No flash player needed for videos
• Can put multiple sources for same media

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 or
interactive content (a plug-in)
• <track>
• Defines text tracks for <video> and <audio>

14. Media Tags
<audio src=”test.ogg”></audio>
<audio src=”test.ogg” autoplay controls loop>
<a href=”test.ogg”>download</a>

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. Geolocation
• Like GPS for the browser
• Browser gathers information about nearby
wireless access points and computer’s IP
address. Then it sends this information to the
default geolocation service provider, Google
Location Services, to get an estimate of
location. That location estimate is then shared
with the requesting website.

17. Geolocation
navigator.geolocation.getCurrentPosition(
function(position){
position.coords.latitude,
position.coords.longitude
}
);

18. Input Types
• color
• date
• datetime
• email
• month
• number
• range
• tel
• time
• url

19. New Form Elements
• <datalist>
• Specifies a list of pre-defined options for input
controls
• <keygen> Defines a key-pair generator field
• <output> Defines the result of a calculation

20. SVG
• SVG = Scalable Vector Graphics
• vector-based graphics for the Web
• SVG graphics do NOT lose any quality if they
are zoomed or resized
• Every element can be animated

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 by
itself

22. Offline
• application cache: web application is cached,
and accessible without an internet
connection.
• Offline browsing - users can use the
application when they're offline
• Speed - cached resources load faster
• Reduced server load

23. HTML5 Wonders
• Google Gravity
• WebGL Water
• Spinning HTML5 Logo
• Universeries

24. What I Can Do ?
• Make WebApps (html5stuco.com)
• Make Apps for Android
• FirefoxOS is built to run HTML5 apps

25. HTML Ready Browsers

26. Resources
• w3Schools
• Html5rocks.com
• dive into html5 (book)
• Stack Over Flow

27. Arif Nezami
• activist | blogger | entrepreneur
• GDG Dhaka Organizer
• www.arifnezami.com
• m@arif.pw
• @arifnezami
• Slides: arif.pw/slides