Upload
jussi-pohjolainen
View
1.308
Download
0
Tags:
Embed Size (px)
Citation preview
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 <!-- XML declaration is required --> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> </title> <!-- UTF-8 is recommended --> <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);
};