Youth Involvement in an Innovative Coconut Value Chain by Mwalimu Menza
Intro to HTML5
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..