PRO HTML5 PROGRAMMING POWERFUL APIS FOR RICHER INTERNET
APPLICATION DEVELOPMENT
Slide 2
CHAP 1. OVERVIEW OF HTML5
Slide 3
HTML was first published as an Internet draft in 1993. Version
2.0, 3.2, 4.0 occurred in the same year, and finally 4.01 in 1999,
W3C assumed control of the specification. Then, HTML was considered
a dead-end; web standards shifted to XML and XHTML. HTML5
specification was created by Web Hypertext Application Working
Group (WHATWG) in 2004. W3C became involved with HTML again in 2006
and published first working draft in 2008, and XHTML 2 stopped in
2009. Today, HTML5 solves very practical problems, browser vendors
are feverishly implementing its new features, even though the
specification has not been completely locked down. HISTORY OF
HTML5
Slide 4
HTML5 spec. is a working draft today (not final). 2012:
candidate recommendation. (HTML5 will be complete ) 2022: proposed
recommendation. IE6 does not support many of new features.
Microsoft promises to design that browser with increased HTML5
support. MYTH OF 2022
Slide 5
Web Hypertext Application Technology Working Group (WHATWG)
Founded in 2004 Vendors: Apple, Mozilla, Google, Opera World Wide
Web Consortium (W3C) Internet Engineering Task Force (IETF) HTML5
defines a new WebSocket API that relies on a new WebSocket
protocol. WHO IS DEVELOPING HTML5
Slide 6
Compatibility Utility - Separation of Presentation (CSS) and
Content (HTML) Most of presentational features of earlier versions
of HTML are no longer supported (but will still work!). Shortages
of older versions of HTML Poor accessibility Unnecessary complexity
(Harder to read code) Large document size slower loading pages
Interoperability - Simplify wherever possible Native browser
ability instead of complex JavaScript code A new, simplified
DOCTYPE and simplified character set declaration Powerful yet
simple HTML5 APIs Universal access: Accessibility Media
independence Support for all world languages: Ex: supports Ruby
annotation CHARACTERISTICS OF HTML5
Slide 7
Present problem of plugin Cannot always be installed Can be
disabled or blocked (Ex: iPad does not ship with a Flash plugin)
Often blocked in controlled corporate environments Users disable
because of unwelcome advertising A separate attack vector Difficult
to integrate with the rest of HTML document A PLUGIN FREE
PARADIGM
Slide 8
Canvas (2D or 3D) Channel messaging Cross-document messaging
Geolocation MathML Microdata Server-Sent Event Scalable Vector
Graphics (SVG) WebSocket API and protocol Web origin concept Web
Storage Web SQL database Web Workers XMLHTTPRequest Level 2 HTML5
FEATURES
Slide 9
DOCTYPE Character set NEW DOCTYE AND CHARACTER SET
Slide 10
Content TypeDescription EmbeddedImports other resources into
the document, EX: audio, video, canvas, and iframe FlowElements
used in the body of documents and applications, EX: form, h1, and
small HeadingSection headers, EX: h1, h2, and hgroup
InteractiveContent that users interact with, EX: audio or video
controls, button, and textarea MetadataCommonly found in the head
section Set up the presentation or behavior of the rest of the
document, EX: script, style, and title PhrasingText and text markup
elements, EX: mark, kbd, sub, and sup SectioningElements that
define sections in the document, EX: article, aside, and title NEW
AND DEPRECATED ELEMENTS Deprecated Elements: Elements perform
inline styling in favor of using CSS, Ex: big, center, font
Slide 11
The sectioning content type is useful for search engine. New
sectioning HTML5 elements SEMANTIC MARKUP Sectioning Element
Description headerHeader content (for a page or a section of the
page) footerFooter content (for a page or a section of the page)
sectionA section in a web page articleIndependent article content
asideRelated content or pull quotes navNavigational aids
Slide 12
Define the relationship between a document and an external
resource Placed at Attributes HTML5 TAG - AttributeValueDescription
hrefURLSpecifies the location of the linked document
relAlternate/author/help/icon/licenc
e/next/pingback/prefetch/prev/se arch/sidebar/stylesheet/tag
Specifies the relationship between the current document and the
linked document Example:
Slide 13
webkit and moz mean they are not W3C standard webkit Supported
by Safari and Chrome -webkit-box-shadow: 2px 2px 20px #888; (Shadow
effect) -webkit-transform: rotate(-45deg); (Rotate effect)
-webkit-transform: scale(0.5); (Change size) -webkit-border-radius:
10px; moz Supported by Mozilla -moz-box-shadow: 2px 2px 20px #888;
(Shadow effect) -moz-transform: rotate(-45deg); (Rotate effect) CSS
WEBKIT/MOZ Excerise: Listing 1-1, 1-2
Slide 14
SIMPLIFYING SECTION SELECTORS API FunctionExample
getElementById() getElementById("foo"); getElementsByName()
getElementsByName("foo"); getElementsByTagName()
getElementsByTagName("input"); FunctionExampleResult
querySelector()querySelector("input.error")Return the first input
field with a style class of error
querySelectorAll()querySelectorAll("#results td")Return any table
cells inside the element with id results HTML4 HTML5 Excerise:
Listing 1-3 HTML5
Slide 15
JSON A relatively new and increasing popular way to represent
data Data is represented as objects In older browsers, a JavaScript
library (http://json.org) is necessary. Parsing and serializing are
not always fast enough Newer browsers have a native implementation
of JSON DOM Level 3 Most browsers support standard APIs for events
and elements, Internet Explorer differs. IE9 will support DOM level
2 and 3 features. WINDOWS.JSON AND DOM LEVEL 3
Slide 16
CHAP 2. CANVAS API
Slide 17
Dynamically generate and render graphics, charts, images and
animations SVG (Scalable Vector Graphics) vs. Canvas Bitmap canvas
Images drawn on a canvas are final and not be resized Objects drawn
on a canvas are not part of the pages DOM or any namespace SVG
images can be scaled seamlessly at different resolutions and allow
hit detection HTML5 Canvas API It performs well because it does not
have to store objects for every primitive it draws Relatively easy
to implement the Canvas API WHAT IS CANVAS
Slide 18
Element: Coordinates: CANVAS BrowserDetails ChromeSupported in
version 1.0 and greater FirefoxSupported in version 1.5 and greater
Internet Explorer Not supported OperaSupported in version 9.0 and
greater SafariSupported in version 1.3 and greater
Slide 19
CHECKING BROWSER SUPPORT try {
document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML = "HTML5 Canvas is
supported in your browser."; } catch (e) {
document.getElementById("support").innerHTML = "HTML5 Canvas is not
supported in your browser."; }
Slide 20
A basic canvas with solid border Get the canvas element and its
context var canvas = document.getElementById('canvas'); var context
= canvas.getContext('2d'); Draw line Prepare graph
context.beginPath(); context.moveTo(70, 140); context.lineTo(140,
70); Stroke graph onto the canvas context.stroke(); CANVAS, DRAW
LINE Excerise
Slide 21
TRANSFORMATION (TRANSLATE, SCALE, ROTATE)
Slide 22
Get the canvas element and its context Save the current drawing
state context.save(); Move to new coordinate, ex: (50, 100)
context.translate(50, 100); Draw line Restore the old drawing state
context.restore(); TRANSLATION Excerise
Line width context.lineWidth = 4; Corner style at path joins
(round: , bevel: , miter) context.lineJoin = 'round'; Line style at
endpoints (round, square, butt: ) Context.lineCap = square'; Stroke
style Change color context.strokeStyle = '#663300'; Background
pattern Fill Style Change color context.fillStyle = '#339900';
Background pattern Fill the region inside all the closed paths
context.fill(); Fill rectangular content context.fillRect(x, y, w,
h); //ex: context.fillRect(-5, -50, 10, 50); STROKE STYLE
Load image var img = new Image(); img.src = bark.jpg; Confirm
the image is loaded img.onload = function(){ //Draw image onto
canvas } Draw image onto canvas context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dw, dh) context.drawImage(image,
sx, sy, sw, sh, dx, dy, dw, dh) Example var bark = new Image();
bark.src = "bark.jpg"; bark.onload = function(){
context.drawImage(bark, -5, -50, 10, 50); context.stroke();
context.restore(); } IMAGE
Slide 28
Linear Gradient ( ) Usage context.createLinearGradient(x0, y0,
x1, y1) x0, y0 - Line start x1, y1 - Line end
gradient.addColorStop(offset, color) offset - From 0.0 to 1.0 color
- Use rgba() or HEX Example var trunkGradient =
context.createLinearGradient(-5, -50, 5, -50);
trunkGradient.addColorStop(0, '#663300');
trunkGradient.addColorStop(0.4, '#996600');
trunkGradient.addColorStop(1, '#552200'); context.fillStyle =
trunkGradient; context.fillRect(-5, -50, 10, 50); Radical Gradient
Usage Context.createRadicalGradient(x0, y0, r0, x1, y1, r1) x0, y0,
r0 First circle center at (x0, y0) with radius r0 x1, y1, r1 Second
circle center at (x1, y1) with radius r1 GRADIENT
Usage context.scale(rx, ry); rx width scale ratio ry height
scale ratio Example var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d'); context.save();
context.translate(260, 500); context.scale(2, 2);
drawTree(context); context.restore(); SCALE
Slide 31
Usage context.rotate(angle) angel can be express with
Math.PI/180 * degree Example var canvas =
document.getElementById('canvas'); var context =
canvas.getContext('2d'); context.save(); context.translate(260,
500); context.rotate(Math.PI/180 * 40); drawTree(context);
context.restore(); ROTATE
Slide 32
Context.transform(rx, sy, sx, ry, dx, dy) rx width scale ratio
ry height scale ratio sy vertical shear sx horizontal shear Example
var canvas = document.getElementById('canvas'); var context =
canvas.getContext('2d'); context.save(); context.translate(130,
250); context.transform(1, 0, -0.5, 1, 0, 0); context.scale(1,
0.6); context.fillStyle = 'rgb(0, 0, 0, 0.2)'; context.fillRect(-5,
-50, 10, 50); createCanopyPath(context); context.fill();
context.restore(); TRANSFORM
Slide 33
Usage context.fillText(text, x, y, maxwidth)
context.strokeText(text, x, y, maxwidth) Property context.font =
Font String context.textAlign = start, end, left, right, center
context.textBaseLine = top, middle, bottom, Example context.save();
context.font = '60px '; context.fillStyle = '#996600';
context.textAlign = 'center'; context.fillText(' ', 200, 60, 400);
context.restore(); CANVAS TEXT
An audio or video file is really just a container file, similar
to a ZIP archive file that contains a number of files. Some of the
popular video container formats include the following: Audio Video
Interleave (.avi) Flash Video (.flv) MPEG 4 (.mp4) Matroska (.mkv)
Ogg (.ogv) VIDEO CONTAINER
Slide 37
Audio and video coders/decoders (codecs) are algorithms used to
encode and decode a particular audio or video stream so that they
can be played back. Some example audio codecs are the following:
AAC MPEG-3 Ogg Vorbis Example video codecs are the following: H.264
VP8 Ogg Theora AUDIO AND VIDEO CODECS
Slide 38
Streaming audio and video. That is, there is currently no
standard for bitrate switching in HTML5 video Media is restricted
by HTTP cross-origin resource sharing. Full-screen video is not
scriptable Because it could be considered a security violation to
let a scriptable element take over the full screen. Accessibility
for audio and video elements is not fully specified yet. Work is
underway on a specification called WebSRT for subtitle support
based on the popular SRT format. RESTRICTIONS
Slide 39
Browser support for HTML5 Video Checking for Browser Support
JavaScript var hasVideo =
!!(document.createElement('video').canPlayType); HTML Fallback
content Your browser does not support HTML5 video. BROWSER SUPPORT
BrowserDetails ChromeVersion 3.0 and greater FirefoxVersion 3.5 and
greater Internet Explorer Not supported OperaVersion 10.5 and
greater SafariVersion 3.2 and greater
Slide 40
Audio An audio clip from Johann Sebastian Bach. Video HTML
USAGE
Slide 41
Common control functions TAKING CONTROL FunctionsBehavior
load()Loads the media file and prepares it for playback. Normally
does not need to be called unless the element itself is dynamically
created. Useful for loading in advance of actual playback.
play()Loads (if necessary) and plays the media file. Plays from the
beginning unless the media is already paused at another position.
pause()Pauses playback if currently active. canPlayType(type)Tests
to see whether the video element can play a hypothetical file of
the given MIME type.
Slide 42
Play function toggleSound() { var music =
document.getElementById("clickSound"); var toggle =
document.getElementById("toggle"); if (music.paused) { //
music.play(); toggle.innerHTML = "Pause"; } else { music.pause();
toggle.innerHTML ="Play"; } WORKING WITH AUDIO
Slide 43
CHAP 4. GEOLOCATION API
Slide 44
You can request users to share their location and, if they
agree, you can provide them with instructions on how to get to a
nearby store to pick up a new pair of shoes at a discounted rate.
You request a position and, if the user agrees, the browser returns
location information. The position is provided to the browser by
the underlying device (for example, a laptop or a mobile phone) on
which the HTML5 Geolocationenabled browser is running. IP Address
Global Positioning System (GPS) Wi-Fi with MAC addresses from RFID,
Wi-Fi, and Bluetooth GSM or CDMA cell phone IDs ABOUT LOCATION
INFORMATION
Slide 45
ProsCons GPS Very accurate Take a long time, can drain a users
devices batteries Does not work well indoors May require additional
hardware Wi-Fi Accurate Works indoors Fix quickly & cheaply Not
good in rural areas with few wireless access points Cell Phone
Fairly accurate Works indoors Fix quickly & cheaply Requires a
device with access to a cell phone or cell modem Not good in rural
areas with fewer cell phone towers User-Defined May have more
accurate location data Allows services for alternate locations User
entry might be faster than detection Can also be very inaccurate,
especially if the location changes THE PROS AND CONS OF GEOLOCATION
DATA
Slide 46
The browser intercepts and requests user permission at step 2.
ARACHITECTURE & PRIVACY
Slide 47
Browser support for HTML5 Geolocation BROWSER SUPPORT
BrowserDetails ChromeSupported in Google Chrome version 2 with
Gears FirefoxSupported in version 3.5 and greater Internet
ExplorerSupported via the Gears plugin OperaPlanned support version
10, experimental support in nightly builds SafariSupported in
version 4 for the iPhone
Slide 48
if(navigator.geolocation) {
document.getElementById("support").innerHTML = "HTML5 Geolocation
supported."; } else { document.getElementById("support").innerHTML
= "HTML5 Geolocation is not supported in your browser."; } CHECKING
FOR BROWSER SUPPORT
Slide 49
Theres are two type of position requests One-shot position
request Repeated position updates POSITIONS REQUESTS
Slide 50
Usage void getCurrentPosition(in PositionCallback
successCallback, in optional PositionErrorCallback errorCallback,
in optional PositionOptions options); Example
navigator.geolocation.getCurrentPosition(updateLocation,
handleLocationError, {timeout:10000}); updateLocation is a
PositionCallback function will implement later handleLocationError
is a PositionErrorCallback function will implement later ONE-SHOT
POSITION REQUESTS
Slide 51
function updateLocation(position) { var latitude =
position.coords.latitude; var longitude =
position.coords.longitude; var accuracy = position.coords.accuracy;
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
document.getElementById(accuracy).innerHTML = This location is
accurate within +accuracy + meters. } IMPLEMENT POSITION
CALLBACK
