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

Viewers also liked

Similar to Intro to HTML5

More from Jussi Pohjolainen

Recently uploaded

Intro to HTML5

Editor's Notes