Intro to HTML5

1,535 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,535
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
50
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • <!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..
  • Intro to HTML5

    1. 1. Short  intro  to  HTML5   Jussi  Pohjolainen  Tampere  University  of  Applied  Sciences  
    2. 2. 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  
    3. 3. 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  
    4. 4. 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  
    5. 5. 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>
    6. 6. 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  
    7. 7. 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>
    8. 8. SemanCc  Elements  •  Before   –  <div  id="header">..</div>  •  Now   –  <secCon>,  <arCcle>,  <header>,  <nav>  
    9. 9. 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/  
    10. 10. APIs  •  APIs  and  DOM  is  fundamental  part  of  the   specificaCon  •  APIs   –  Offline  Web  apps   –  Drag  and  drop   –  GeolocaCon   –  Web  SQL  database   –  …  
    11. 11. 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  
    12. 12. Browser  Support  •  IE9  •  Firefox  3.5  •  Chrome  5  •  Opera  10.6  •  Safari  5  •  iPhone  3  •  Android  2  •  WP  7.5  
    13. 13. 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);}
    14. 14. 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/  
    15. 15. 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)  
    16. 16. Mobile  App  (iPhone)   Web  app!  
    17. 17. Mobile  App  (iPhone)  
    18. 18. 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(),  …    
    19. 19. 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>
    20. 20. PossibiliCes  •  Simple  shapes  (Rectangles)  •  Complex  shapes  (Paths)    •  Lines  •  Shadows  •  Text  •  Images  •  Pixel  manipulaCon  •  Colors  and  styles  •  ComposiCng  •  TransformaCons  •  Canvas  state    
    21. 21. ImplemenCng  a  Game  
    22. 22. 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();}
    23. 23. Game  Objects  and  Global  Variables  var keysDown = {};var bgImage = null;var canvas = null;var ctx = null;var then;var monstersCaught = 0;// Game objectsvar hero = { speed: 256, x: 0, y: 0, myImage: null};var monster = { x: 0, y: 0, myImage: null};
    24. 24. Game  Loop  function gameLoop () { var now = Date.now(); var delta = now - then; update(delta / 1000); render(); then = now;};
    25. 25. 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);}
    26. 26. 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));};
    27. 27. 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");}
    28. 28. 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);}
    29. 29. 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(); }};
    30. 30. 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);};

    ×