1. Short
intro
to
HTML5
Jussi
Pohjolainen
Tampere
University
of
Applied
Sciences
2.
3.
4.
5.
6. HTML5
• Fi#h
version
of
HTML
standard
by
W3C
• SCll
under
development
but
lot
of
browsers
support
the
proposal
of
the
standard
• Simple
markup
that
can
be
wriFen
either
in
HTML
or
XHTML
syntax
• PotenCal
candidate
for
cross
pla0orm
mobile
apps
7. HTML5
• "Replacement
for
Flash"
– See
comparison:
• hFp://en.wikipedia.org/wiki/
Comparison_of_HTML5_and_Flash
• HTML5
must
be
supplemented
with
other
technologies
like
CSS3
and
JS
– HTML5
recommendaCon
specifies
html
markup
and
APIs
for
that
can
be
used
with
JS
• Plan
is
to
have
HTML5
recommendaCon
by
the
end
of
2014
8. HTML5
vs
XHTML5
• XHTML5
is
XML
serializaCon
of
HTML5
– internet
media
type:
applica&on/xhtml+xml
or
applica&on/
xml
– <!DOCTYPE
html>
• HTML5
– <!DOCTYPE
html>
opConal
• HTML5
uses
polyglot
markup
– valid
HTML
document
and
well-‐formed
XML
document
– Certain
elements
are
wriFen
using
minimized
tag
<br/>
– And
certain
not:
<p></p>
– hFp://dev.w3.org/html5/html-‐xhtml-‐author-‐guide/html-‐
xhtml-‐authoring-‐guide.html#empty-‐elements
10. What
is
New?
• New
elements,
aFributes
– SemanCc
elements,
HTML5
Forms
• Video
and
audio
– Lot
easier
to
show
<video>
and
<audio>
• 2D/3D
Graphics
– <canvas>
-‐
element,
inline
SVG,
CSS
2D/3D
• New
APIs
– Data
storage,
SQL
Database,
JS
workers
11. Video
<video width="320" height="240" controls="controls">
<source src="scroll_indicator.mp4" type="video/mp4">
<source src="scroll_indicator.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
12. SemanCc
Elements
• Before
– <div
id="header">..</div>
• Now
– <secCon>,
<arCcle>,
<header>,
<nav>
13. Exercise
• Implement
HTML5
document
and
use
the
new
features:
– header,
footer,
video,
arCcle,
secCon,
hgroup,
aside,
figure,
figcapCon,
Cme,
mark,
wbr,
• See:
– hFp://www.html-‐5-‐tutorial.com/
14. APIs
• APIs
and
DOM
is
fundamental
part
of
the
specificaCon
• APIs
– Offline
Web
apps
– Drag
and
drop
– GeolocaCon
– Web
SQL
database
– …
15. GeolocaCon
API
• GeolocaCon
API
SpecificaCon
– hFp://dev.w3.org/geo/api/spec-‐source.html
• To
detect
the
locaCon
of
the
client
• In
mobile:
GPS,
in
desktop
IP-‐address
or
Wi-‐Fi
locaCon
17. function setText(val, e) {
document.getElementById(e).value = val;
}
function insertText(val, e) {
document.getElementById(e).value += val;
}
var nav = null;
function requestPosition() {
if (nav == null) {
nav = window.navigator;
}
if (nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
geoloc.getCurrentPosition(successCallback);
}
else {
alert("geolocation not supported");
}
}
else {
alert("Navigator not found");
}
}
function successCallback(position)
{
alert("" + position.coords.latitude + ", " + position.coords.longitude);
}
18. Showing
Map
on
Google
API
• hFp://maps.googleapis.com/maps/api/
staCcmap?
center=<laCtude>,<longitude>&zoom=10&siz
e=200x200&maptype=roadmap
• See:
– hFps://developers.google.com/maps/
documentaCon/staCcmaps/
19. Wunderground
+
GeolocaCon
+
Google
staCc
map
• Wunderground
provides
JSON
API
for
weather
informaCon
• Get
locaCon
of
the
browser
and
AJAX
request
to
wunderground
• Aqer
receiving
the
result,
parse
it
and
show
results
in
html.
• Problem:
AJAX
does
not
work
cross
site..
You
can
implement
middleware
(PHP)
22. Canvas
• “The
canvas
element
a
resolu&on-‐dependent
bitmap
canvas,
which
can
be
used
for
dynamically
rendering
of
images
such
as
game
graphics,
graphs,
or
other
images”
• Image
is
drawn
in
JavaScript
using
typical
vector
graphics
drawing
primiCves
– drawImage(),
lineTo(),
arcTo(),
bezierCurveTo(),
fillRect(),
scale(),
rotate(),
translate(),
createLinearGradient(),
shadowBlur(),
…
23. Simple
Drawing
using
Canvas
and
JS
<canvas id="mycanvas" width="200" height="200">
</canvas>
<script>
var canvas= document.getElementById('mycanvas');
var context = canvas.getContext('2d');
context.fillRect(60,30,80,120);
</script>
26. main
function main() {
createCanvas();
// Original position
reset();
// Millisecs elapsed since 1970.
then = Date.now();
loadImages();
setEventListeners();
//The setInterval() method calls a function or evaluates an expression at
//specified intervals (in milliseconds).
setInterval(gameLoop, 1);
}
window.onload=function(){
main();
}
27. Game
Objects
and
Global
Variables
var keysDown = {};
var bgImage = null;
var canvas = null;
var ctx = null;
var then;
var monstersCaught = 0;
// Game objects
var hero = {
speed: 256,
x: 0,
y: 0,
myImage: null
};
var monster = {
x: 0,
y: 0,
myImage: null
};
28. Game
Loop
function gameLoop () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};
29. Create
Canvas
function createCanvas() {
// Create canvas element
canvas = document.createElement("canvas");
// Get the canvas object that you can use to draw
ctx = canvas.getContext("2d");
// Set size for the canvas object
canvas.width = 512;
canvas.height = 480;
document.getElementById("here").appendChild(canvas);
}
30. StarCng
point
function reset() {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
31. Load
Image
function loadImage(imageSrc) {
var image = new Image();
image.src = imageSrc;
return image;
}
function loadImages() {
hero.myImage = loadImage("lib/hero.png");
monster.myImage = loadImage("lib/monster.png");
bgImage = loadImage("lib/background.jpg");
}
32. Key
Listeners
function setEventListeners() {
// If keydown, then add the key to the array and set it true
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
// If keyup, remove it from the array
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
}
33. Update
function update (modifier) {
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed * modifier;
}
// Are they touching?
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};
<!DOCTYPE html> <html><head><title>Geolocation API Example</title><script type="text/javascript">function setText(val, e) {document.getElementById(e).value = val;}function insertText(val, e) {document.getElementById(e).value += val;}varnav = null; function requestPosition() { if (nav == null) {nav = window.navigator; } if (nav != null) {vargeoloc = nav.geolocation; if (geoloc != null) {geoloc.getCurrentPosition(successCallback); } else { alert("geolocation not supported"); } } else { alert("Navigator not found"); }}function successCallback(position){ alert("" + position.coords.latitude + ", " + position.coords.longitude);}</script></head><body><input type="button" onclick="requestPosition()" value="Get Latitude and Longitude" /> </body></html>
// If on sec has passed, modifier is 1. If 0.5 secs has // passed, modifier is 0.5. // Using modifier, hero moves same speed no matter how // fast the update is called..
