1 / 123

Introduction to HTML5

Introduction to HTML5. Jeanine Meyer Purchase College/SUNY. Introductions. Jeanine Meyer Purchase College/SUNY: Math/CS & New Media. Prior: IBM Research (robotics, manufacturing research, educational grants), Pace University.

ailis
Download Presentation

Introduction to HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related