Download
introduction to html5 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to HTML5 PowerPoint Presentation
Download Presentation
Introduction to HTML5

Introduction to HTML5

143 Views Download Presentation
Download Presentation

Introduction to HTML5

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Introduction to HTML5 Jeanine Meyer Purchase College/SUNY

  2. Introductions • Jeanine Meyer • Purchase College/SUNY: Math/CS & New Media. Prior: IBM Research (robotics, manufacturing research, educational grants), Pace University. • 5 books: latest is The Essential Guide to HTML5: Using Games to learn HTML5 & JavaScript

  3. Background • HTML5 is the latest/soon to be version of • HyperText Markup Language (HTML): text with tags for content • JavaScript: scripting/programming language for interactivity, dynamic presentation • Cascading Style Sheets: formatting • Many new features, for support of semantic web, dynamic/interactive websites • CAUTION: definition not official. • Browser support evolving. • Do ask/remind me to say: what are my names versus built-in parts of HTML5.

  4. New features include: • Semantic elements: header, footer, section, article, others. • canvas for drawing • paths of rectangles, arcs, lines, images • mouse events • localStorage (variation of cookies) • audio & video elements • including drawing video on canvas

  5. This Tutorial • Build Favorite sites • review HTML structure, new elements) • Build Drawings • draw rectangles, arcs, lines on canvas • Build Coin toss • event handling, draw text and images on canvas • Find video clips & convert. • Add video to favorite sites or make it stand-alone. • Build Bouncing Video • draw video, create mask, timed event • Build geolocation application, including Google Maps API app and localStorage • Preview Essential Guide to HTML5

  6. Tools • TextPad or TextWrangler or NotePad • Dreamweaver okay but it does cost. • Compatible browser • Firefox: works for all examples, including masked video and geolocation • Chrome and Safari work for most examples • IE9 being tested now • Miro Converter

  7. HTML review • Elements consist of opening tag, contents of the element and closing tag. • Tags have attributes. <a href="nextpage.html">NEXT </a> • Some elements/tags are singletons <img src="logo.gif" width="100"/> • Document Object Model (DOM) defines relationships, attributes & methods of objects.

  8. First webpage: Favorite Sites • Annotated list of 'favorite sites' • Need to determine URLs for links, images, brief text. • header and article elements • style element (CSS) for formatting • critical for header and article. Also use it for images • script element: single statement to insert date. • http://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.html

  9. screen shot, not live html

  10. Advice • HTML does not recognize white space. • You need to make spacing and line breaks explicit. • For your readability, put line breaks and spaces. • My objective often is to squeeze things in one slide. This isn't your objective!

  11. HTML template <!DOCTYPE html> <html lang="en"> <head>     <title></title>     <meta charset="utf-8"> </head> <body> </body> </html>

  12. Favorite Sites • overview for this example: <!DOCTYPE html> <html lang="en"> <head> <title> </title> <meta charset="UTF-8"> <style> </style> // for header and article and img <script> </script> </head> <body> content: header, article for each site </body> </html>

  13. <style> header {font-family:Georgia,"Times New Roman",serif; text-align:center; font-size:30px; display:block; } article { text-align:left; font-size:20px; margin:20px; display:block; font-family:"Century","Tahoma", sans-serif; } img {display:block;} </style> <script> document.write(Date()); </script> </head>

  14. <body> <header>Favorite Sites </header> <article>My Academic website, <a href="http://faculty.purchase.edu/jeanine.meyer"> http://faculty.purchase.edu/jeanine.meyer </a> is where I put information about my courses, along with publications and other activities. <img src="purchase_logo_sm.gif" width="200"/> </article> <article> My daughter, Aviva, is active in the <a href="http://stolenchair.org">Stolen Chair Theater company.</a> The next production involves Victorian photo-collage. <img src="CSTlogo.jpg" width="100"/> </article> <body> </html>

  15. Comments • Remember: spaces, line breaks need to be inserted explicitly • My first attempt was to use <br/> to force images to their own line. I changed to using a style to keep formatting in the <style> section. • need not be so pure! • GO! - get information, look up other CSS, ask!

  16. 2nd set of projects: Drawing • canvas element • Use code to define a so-called context. Methods of this object do the work! • Screen geometry: upper left corner is origin. • Colors defined by red-green-blue values or a small set of named colors, • http://www.tutorialspoint.com/html5/html5_color_names.htm. • will show hexadecimal example later. • stroke versus fill • draw Rectangles • http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.html

  17. 500,0,default color,20 by 20, fill 0,0, default color, 10 by 10, stroke rgb(200,0,100) 0,300,green,30 by 30, stroke 500,300, 50 by 50, fill

  18. <!DOCTYPE html> <html lang="en"><head><title>Four rectangles</title> <meta charset="UTF-8"><script> var ctx; function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 2; ctx.strokeRect(0,0,10,10); ctx.fillRect(500,0,20,20); ctx.strokeStyle = "green"; ctx.fillStyle = "rgb(200,0,100)"; ctx.strokeRect(0,300,30,30); ctx.fillRect(500,300,50,50); } </script> </head> <body onLoad="init();"> <canvas id="canvas" width="600" height="400"> Your browser doesn't support the HTML5 element canvas.</canvas> </body> </html>

  19. Errors • JavaScript is scripting language: interpret statements at execution time. • NOT compiled, with error messages • Semantic errors (errors of meaning) are more difficult to detect and fix! • Syntactic errors are errors of form, analogous to grammatical errors • FireFox Tools/Error Console can help • Most common: bad bracketing • ctx.fillStyle("rgb(200,0,100)"); fillStyle is attribute,not method

  20. Comments • The drawing is done in the init function which is called when the body element is loaded. The canvas element with id="canvas" does not exist until the body is loaded. • Default color is black. Red green blue values each are 0 to 255 (8 bits of intensity). The strokeStyle and the fillStyle are attributes, not methods. • GO: experiment with colors (by name) and rgb (note the quotation marks) and location and width and height.

  21. More comments • Drawings are …paint on the canvas. • These rectangles are not objects to be moved or referenced later. • Use ctx.clearRect method to erase. • Need to do calculations to detect hits. • See memory game in book. • Alternative is dynamic placement of html markup • See quiz, hangman.

  22. Next drawing • Paths created with arcs and line segments • Arcs are portions of circles, created using radians in place of degrees. Math.PI is available for use. A complete circle can be drawn from 0 to 2*Math.PI or –Math.PI to Math.PI, etc. • Arcs can be stroke or fill. • http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopsmile.html • http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopfrown.html

  23. Angles PI*3/2 PI 0 (=2*PI) .20 * PI PI/4 .80*PI true means counter-clockwise! PI/2

  24. arcs • ctx.arc (x of center, y of center, radius, starting angle, finishing angle, true for counter-clockwise) • No drawing (ink) at the center! This is important when connecting arcs and lines. • EXPERIMENT

  25. 4 distinct paths, each made up of 1 arc. Default, "red" and "brown"

  26. Strategy • Use variables with some variable values defined in terms of others. • Circle face and two eyes. Smile is (partial) arc. Brown eyes and red smile. • body element same as before. • You can add the code for this to your rectangles drawing.

  27. var ctx; var headx = 100; //center of face x coord. var heady = 200; // center of face y coord. var headrad = 50; //radius of face var smileoffsetx=0; //smile center x is same as face var smileoffsety = 15; //smile center y further down var smilerad=20; // smile radius var eyeoffsety = -10; //eyes up from center var lefteyeoffsetx = -15; //left eye var righteyeoffsetx = -lefteyeoffsetx; //right var eyerad = 8; // eye radius

  28. function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(headx,heady,headrad,0,2*Math.PI,true); ctx.closePath(); ctx.stroke(); …

  29. ctx.strokeStyle = "red"; ctx.beginPath(); ctx.arc(headx+smileoffsetx,heady+smileoffsety,smilerad,.80*Math.PI,.20*Math.PI,true); ctx.stroke(); ctx.fillStyle = "brown"; ctx.beginPath(); ctx.arc(headx+lefteyeoffsetx,heady+eyeoffsety,eyerad,0,2*Math.PI,true); ctx.fill(); ctx.beginPath(); ctx.arc(headx+righteyeoffsetx,heady+eyeoffsety,eyerad,0,2*Math.PI,true); ctx.fill(); }

  30. Comments • The fill and stroke calls close the path. • Also, can close a path with closePath() • Using variables makes code more flexible and easier to see relationships. • GO: draw arcs, changing colors, sizes, etc. • NOTE: can draw non-circular ovals using transformations: scale. Check out the hangman game in book!

  31. Next drawing: star • For drawing lines (and arcs), think of moving a pencil versus drawing (preparing to draw) a line segment • nothing is drawn until the stroke or fill • Use an array with coordinates for 5 points • Use an array to hold names of 3 colors • button element • http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawingstars.html

  32. opening screen

  33. after 1st press of button

  34. after next press

  35. after next press

  36. show body first <body onLoad="init();"> <canvas id="canvas" width="600" height="400"> Your browser doesn't support the HTML5 element canvas. </canvas> <button onClick="makestar();">Make Star </button> </body> </html>

  37. var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0; // points to next color variables (in script element)

  38. var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0; // points to next color variables (in script element)

  39. var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0; // points to next color variables (in script element)

  40. var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0; // points to next color variables (in script element)

  41. var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0; // points to next color variables (in script element)

  42. function init() { ctx = document.getElementById('canvas').getContext('2d'); } function makestar() { ctx.clearRect(0,0,600,400); ctx.fillStyle=colors[c]; c = c +1; // can reduce to one line using colors[c++] c = (c<3)?c:0; ctx.beginPath(); ctx.moveTo(pts[0][0],pts[0][1]); ctx.lineTo(pts[3][0],pts[3][1]); ctx.lineTo(pts[1][0],pts[1][1]); ctx.lineTo(pts[4][0],pts[4][1]); ctx.lineTo(pts[2][0],pts[2][1]); ctx.lineTo(pts[0][0],pts[0][1]); ctx.stroke(); //outline (necessary for white star! ctx.fill(); }

  43. Comments • Your assignment: do something with a button. It does not have to be a star. • But do use moveTo and lineTo. • You can combine with rectangles (separate from paths) and arcs (can combine with lines). • Try stroke and fill • Can include multiple moveTo • think of picking up your pen and moving to a new spot on the paper/canvas.

  44. Fancier stars • Code to draw star more precisely • Position each star randomly on canvas. • Add star with each button press • Increase number of colors. • http://www.tutorialspoint.com/html5/html5_color_names.htm • improve coding for robustness • http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopprecisestars.html

  45. after many presses

  46. Strategy • reuse code for makestar, with modification • remove clearRect method • add a call to buildstar that re-creates the pts array • add items to colors array • remove 3 from the code! • position, size, and rotation of star created using calls to Math.random.

  47. variables var ctx; var angle = 2*Math.PI/5; var pts=[ ]; var colors=["red","white","blue","purple","yellow","teal"]; var c=0;

  48. function makestar() { buildstar(); ctx.fillStyle=colors[c++]; c = (c<colors.length)?c:0; ctx.beginPath(); ctx.moveTo(pts[0][0],pts[0][1]); ctx.lineTo(pts[3][0],pts[3][1]); ctx.lineTo(pts[1][0],pts[1][1]); ctx.lineTo(pts[4][0],pts[4][1]); ctx.lineTo(pts[2][0],pts[2][1]); ctx.lineTo(pts[0][0],pts[0][1]); ctx.stroke(); ctx.fill(); }

  49. function buildstar() { pts = []; var x=500*Math.random(); //all these arbitrary var y = 300*Math.random(); var r=50*Math.random(); var sangle = Math.random()*angle; for(var i=0;i<5;i++) { var a = i*angle + sangle; var px = x+r*Math.cos(a); var py = y-r*Math.sin(a); pts.push([px,py]); } }