The document discusses HTML5, including what it is, its features, adoption, and changes from previous versions of HTML. It provides information on new HTML5 elements like <header>, <footer>, <nav>, <section>, and <article>. It also covers new form input types, multimedia support through <video> and <audio> elements, canvas graphics, geolocation, web sockets, and more. The document contains examples and explanations of how to implement and use various HTML5 features.

1. Web & Mobile Developer
Towers Watson Inc.

2. 2

3.  What is HTML5
 Features
 Adoption
 Is HTML5 ready Now?
 Changes from previous HTMLs
 What’s added
 What’s deprecated
 Exercise
3

4. HTML5 is is a language for structuring and presenting
content for the World Wide Web, a core technology of
the Internet. It is the fifth revision of the HTML standard
(originally created in 1990 and most recently
standardized as HTML4 in 1997[1]) and as of August
2011[update] is still under development. Its core aims
have been to improve the language with support for the
latest multimedia while keeping it easily readable by
humans and consistently understood by computers and
devices (web browsers, parsers etc.). HTML5 is
intended to subsume not only HTML4, but XHTML1 and
DOM2HTML (particularly JavaScript) as well.
4

5. The biggest names in the Industry
 Disney
 Research In Motion
 Google
 Apple
 Microsoft
5

6. Yes and No.
HTML5 is now ready for use by developers
provided they use fallbacks since the
specification for HTML5 is not yet finalized.
According to the W3C, HTML5 is still in
Draft. So expect changes to happen
anytime. The expected completion is 2022
or later. Although many parts of the
specifications are already stable and may
be implemented.
6

7.  Markup
 Forms
 Multimedia
 Graphics
 New APIs
 Graphics
 Media Playback
 GeoLocation
 Web Sockets
 Web Workers
 Error Handling
7

8. Like any other evolving technologies. HTML5 also
deprecates some outdated tags such as:
basefont
big
center Attributes:
font
• align
s • link, vlink, alink, and text attributes on the body tag
strike • bgcolor
tt • height and width
U • scrolling on the iframe element
frame • valign
frameset • hspace and vspace
• cellpadding, cellspacing, and border on table
noframes
8

9. <header> - Defines a header region of a page or
section.
<footer> - Defines a footer region of a page or
section.
<nav> - Defines a navigation region of a page or
section.
<section> - Defines a logical region of a page or
a grouping of content.
<article> - Defines an article or complete piece of
content.
<aside> - Defines secondary or related content.
9

10. New Input Tags
<input type=“range”>
<input type=“number”>
<input type=“date”>
<input type=“email”>
<input type=“url”>
<input type=“color”>
<input type=“Search”>
10

11. <input type="range" min="0" max="10"
name="priority" value="0" id="priority" >
11

12. <input type="number" name="estimated_hours"
min="0" max="1000“ id="estimated_hours" >
12

13.  <input type="date" name="start_date"
id="start_date"
 value="2010-12-01" >
13

14. <input type="email" name="email" id="email">
14

15. <input type="url" name="url" id="url">
15

16. <input type="color" name="project_color"
id="project_color">
16

17. <input type=“search” name=“textsearch”
id=“searchfield” >
17

18. <input type="range" min="0" max="10"
name="priority" value="0" id="priority" >
18

19. Multimedia has become an integral part of
our internet usage thus, HTML5 added
support for both Video and Audio
 <Video>
 <Audio>
19

20. Support for MP3, AAC, OGG
<audio id="drums" controls>
<source src="sounds/ogg/drums.ogg"
type="audio/ogg">
<source src="sounds/mp3/drums.mp3"
type="audio/mpeg">
<a href="sounds/mp3/drums.mp3">Download
drums.mp3</a>
</audio>
20

21. Support for MP4, OGV, WebM format
<video controls>
<source src="video/h264/01_blur.mp4">
<source src="video/theora/01_blur.ogv">
<source src="video/webm/01_blur.webm">
<p>Your browser does not support the video
tag.</p>
</video>
21

22. Supports creation of vector based graphics
through the use of javascript
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
22

23. 23

25.  New DOM Selectors
 Audio and Video
 Using the Canvas
 Knowing your Location
 Web Sockets

26.  No minimum system requirements
 Easier to code
 Faster execution/response
 Extends the ability
 The completeness of HTML5

27.  getElementById()
 getElementsByTagName()
 getElementsByClassName()
 querySelector()
 querySelectorAll()

28. Wait, there’s no light and
there’s no flash! How’s our
party?

29.  Media Functions
 Play()
 Pause()
 Load()

30.  Media Properties
 Volume
 Duration
 Muted
 Paused
 Loop

31.  Events
 Play
 Pause
 Abort
 Ended
 Progress

32.  Drawing in the canvas
 Preparing your workspace
 Creating a simple path
○ beginPath();
○ lineTo();
○ moveTo();
○ Stroke();

33.  Drawing simples shapes
 Circle
○ Arc();
 Square
○ fillRect();

34.  Web workers
 separate JS processes() running in separate
threads,
 executes concurrently,
 doesn’t block the UI,
 allow you to extract up to the last drop of
juice from a multicore CPU,
 can be dedicated (single tab) or shared
among tabs/windows,

35. Workers1.js
MainProc.js Workers2.js
Workers3.js

36.  Put it to work
 new Worker();
 onmessage();
 postmessage();

37.  Using Geolocation
 Remember: Always ask for permission!
 I have no GPS!
○ IPAddress
○ WiFi
○ Cellphone

38.  Hey! Mr. Navigator…
 coords.latitude
 coords.longitude
 getCurrentPosition()

39.  Communicate in a whole new way
 TCP over the Web
 2-way communication for the Internet
○ Use a client browser that implements the
WebSocket protocol.
○ Write code in a webpage that creates a client
websocket.
○ Write code on a web server that responds to a
client request through a websocket

40.  Tuning in
 URL
 websocket()
 open(), onopen
 close(), onclose
 onmessage()
 postmessage()

41.  Consider older browsers
 Detect Browser
 Detect Feature availability