Fundamentals of HTML5 and JavaScript APIs

Fundamentals of HTML5
Craig Shoemaker
craig@craigshoemaker.net
@craigshoemaker

Craig Shoemaker
craig@craigshoemaker.net
@craigshoemaker

Semantic Markup
+ JavaScript APIs
HTML5

Semantic Markup
<article> <footer> <rt>
<aside> <header> <ruby>
<audio> <hgroup> <section>
<canvas> <keygen> <source>
<command> <mark> <summary>
<datalist> <meter> <time>
<details> <nav> <video>
<embed> <output> <wbr>
<figcaption> <progress>
<figure> <rp>
Source: http://www.w3schools.com/html5/html5_reference.asp

Audio
Source

Video
Source

JavaScript APIs
Canvas 2D Context Appllications
Contacts Selection
File APIs Server-Sent Events
Forms Web Notifications
Geolocation Web Sockets
HTML Microdata Web Storage
Indexed Database Web Workers
Media Capture XMLHttpRequest Level 2
Messaging
Offline Web
Source: http://dret.typepad.com/dretblog/html5-api-overview.html

JavaScript APIs
Canvas 2D Context Selection
Contacts Server-Sent Events
File APIs Web Notifications
Forms Web Sockets
Geolocation Web Storage
HTML Microdata Web Workers
Indexed Database XMLHttpRequest Level 2
Media Capture
Messaging
Offline Web Applications

JavaScript APIs
Contacts Geolocation
Selection Canvas 2D Context
Offline Apps HTML Microdata
Indexed Database Media Capture
Web Workers Messaging
Web Storage Forms
Web Sockets File API
Web SQL DB
Server Events
XMLHttpRequest Level 2

HTML4/XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About the Show – Polymorphic Podcast</title>
<style type="text/css">h1{color:#ff9900;}</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<h1>Polymorphic Podcast</h1>
<h2>About the Show</h2>
<p><a href="http://weblogs.asp.net/craigshoemaker">Craig
Shoemaker</a> is a software developer, podcaster, blogger and New-
Media Evangelist for <a
href="http://infragistics.com/">Infragistics</a>.</p>
</body>
</html>

HTML5
<!doctype html>
<html lang="en">
<head>
<title>About the Show – Polymorphic Podcast</title>
<style>h1{color:#ff9900;}</style>
<script src="jquery-1.4.2.min.js"></script>
</head>
<body>
<header>
<hgroup>
<h1>Polymorphic Podcast</h1>
<h2>About the Show</h2>
</hgroup>
</header>
<p><a href="http://weblogs.asp.net/craigshoemaker">Craig
Shoemaker</a> is a software developer, podcaster, blogger and New-
Media Evangelist for <a
href="http://infragistics.com/">Infragistics</a>.</p>
</body>
</html>

Audio
wav
mp3
ogg vorbis

Video
h.264
ogg theora
webm

Updated Selector Engine
css selectors

Forms API
email time
url search
number color
range
date

Source: http://www.w3schools.com/html5/html5_form_input_types.asp

Web Storage
local storage
session storage
web sql/indexed db

User-
IP Address Coordinate Triangulation Defined
GPS WiFi Cell Phone

Available
Everywhere
Pros
Processed
Server Side

Low
Accuracy
Cons
High
Processing
Overhead

Source: Pro HTML5 Programming, Apress

User-
GPS WiFi Cell Phone

Available High
Everywhere Accuracy
Pros
Processed
Server Side

Low Long
Accuracy Operation
Cons
High Not Optimal
Processing for Indoors
Overhead
Hardware
Req’d


User-
GPS WiFi Cell Phone

Available High Accurate
Everywhere Accuracy
Pros Works Indoors
Processed
Server Side Quick & Cheap
Response

Low Long Ineffective in
Accuracy Operation Areas with
Cons Limited Access
High Not Optimal Points
Overhead
Hardware
Req’d


User-
GPS WiFi Cell Phone

Available High Accurate Fairly
Everywhere Accuracy Accurate
Pros Works Indoors
Processed Works
Server Side Quick & Cheap Indoors
Response
Quick &
Cheap
Response

Low Long Ineffective in Req. access
Accuracy Operation Areas with to cell
Cons Limited Access phone or
High Not Optimal Points modem
Overhead Ineffective
Hardware in Areas
Req’d with Few
Cell Towers


User-
GPS WiFi Cell Phone

Available High Accurate Fairly High Accuracy
Everywhere Accuracy Accurate
Pros Works Indoors Flexibility to
Processed Works Designate Alt.
Server Side Quick & Cheap Indoors Locations
Response
Quick & May be Fastest
Cheap Option
Response

Low Long Ineffective in Req. access Can be Very
Accuracy Operation Areas with to cell Inaccurate
Cons Limited Access phone or (esp. if
High Not Optimal Points modem locations
Processing for Indoors change)
Overhead Ineffective
Hardware in Areas
Req’d with Few
Cell Towers


Fundamentals of HTML5 and JavaScript APIs

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Fundamentals of HTML5 and JavaScript APIs

Ähnlich wie Fundamentals of HTML5 and JavaScript APIs (20)

Mehr von DataLeader.io

Mehr von DataLeader.io (11)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Fundamentals of HTML5 and JavaScript APIs