Intro to HTML5

Short
intro
to
HTML5

Jussi
Pohjolainen

Tampere
University
of
Applied
Sciences

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

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
speciﬁes
html
markup
and

APIs
for
that
can
be
used
with
JS

•  Plan
is
to
have
HTML5
recommendaCon
by
the

end
of
2014

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

Minimal
HTML5
document


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>

<meta charset="UTF-8" />
</head>

<body>
<svg xmlns="http://www.w3.org/2000/svg">
<rect stroke="black" fill="blue" x="45px" y="45px" width="200px"
height="100px" stroke-width="2" />
</svg>
</body>
</html>

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

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>

SemanCc
Elements

•  Before

–  <div
id="header">..</div>

•  Now

–  <secCon>,
<arCcle>,
<header>,
<nav>

Exercise

•  Implement
HTML5
document
and
use
the
new

features:

–  header,
footer,
video,
arCcle,
secCon,
hgroup,

aside,
ﬁgure,
ﬁgcapCon,
Cme,
mark,
wbr,

•  See:

–  hFp://www.html-‐5-‐tutorial.com/

APIs

•  APIs
and
DOM
is
fundamental
part
of
the

speciﬁcaCon

•  APIs

–  Oﬄine
Web
apps

–  Drag
and
drop

–  GeolocaCon

–  Web
SQL
database

–  …

GeolocaCon
API

•  GeolocaCon
API
SpeciﬁcaCon

–  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

Browser
Support

•  IE9

•  Firefox
3.5

•  Chrome
5

•  Opera
10.6

•  Safari
5

•  iPhone
3

•  Android
2

•  WP
7.5

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/

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)

Mobile
App
(iPhone)

Web
app!

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(),

ﬁllRect(),
scale(),
rotate(),
translate(),

createLinearGradient(),
shadowBlur(),
…

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>

PossibiliCes

•  Simple
shapes
(Rectangles)

•  Complex
shapes
(Paths)

•  Lines

•  Shadows

•  Text

•  Images

•  Pixel
manipulaCon

•  Colors
and
styles

•  ComposiCng

•  TransformaCons

•  Canvas
state

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();
}

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
};

Game
Loop

function gameLoop () {
var now = Date.now();
var delta = now - then;

update(delta / 1000);
render();

then = now;
};

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);
}

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));
};

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");
}

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);
}

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();
}
};

Render

function render() {
ctx.drawImage(bgImage, 0, 0);
ctx.drawImage(hero.myImage, hero.x, hero.y);
ctx.drawImage(monster.myImage, monster.x, monster.y);

// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "12px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("FB Monsters caught: " + monstersCaught, 20, 20);
};

Intro to HTML5

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Intro to HTML5 (20)

More from Jussi Pohjolainen (20)

Recently uploaded (20)

Intro to HTML5

Editor's Notes