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 specifies 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, figure, figcapCon, Cme, mark, wbr,

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

APIs

•  APIs and DOM is fundamental part of the specificaCon

•  APIs – Offline Web apps – Drag and drop – GeolocaCon – Web SQL database – …

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

Browser Support

•  IE9 •  Firefox 3.5 •  Chrome 5 •  Opera 10.6 •  Safari 5 •  iPhone 3 •  Android 2 •  WP 7.5

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

Showing Map on Google API

•  hFp://maps.googleapis.com/maps/api/staCcmap?center=<laCtude>,<longitude>&zoom=10&size=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!

Mobile App (iPhone)

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

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

ImplemenCng a Game

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

};

Business

Intro to HTML5