En kort och ofullständig intro HTML 5 En kort och ofullständig intro
HTML5 – var, hur, när HTML5 – implementeras succesivt Du behöver inte kasta eller göra om – allt det gamla finns + vissa nyheter Det är lätt att komma igång med HTML5 – byt till <!DOCTYPE html> HTML5 fungerar redan – I exempelvis Firefox, Safari, Chrome, Opera HTML5 kommer att leva länge
Bakåtblick HTML (4.01) publicerades 1998, och är en buggfix av version 4.0 från 1997. Från W3C var tanken att HTML skulle ersättas av XHTML. Syntaxen oförändrad sedan 1997.
Problem med XHTML XHTML 2 är inte bakåtkompatibelt XHTML 2 är svår att implementera i webbläsarna. XHTML 2.0 saknar funktionalitet för moderna medier. Huvuddelen av webbplaterna i XTML har doctype för HTML och i praktiken ingen äkta XML Underspecificerade - samma kod kan ge olika resultat
Så långt har man kommit HTML5 är inte färdigt. HTML5 är bakåtkompatibelt HTML5 är inte färdigutvecklat förrän två fullständiga implikationer gjorts.
Nya taggar <article>-For external content, like text from a news-article, blog, forum, or any other content from an external source <aside>-For content aside from the content it is placed in. The aside content should be related to the surrounding content <command>-A button, or a radiobutton, or a checkbox <details>-For describing details about a document, or parts of a document <summary>-A caption, or summary, inside the details element <figure>-For grouping a section of stand-alone content, could be a video <figcaption>-The caption of the figure section <footer>-For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information <header>-For an introduction of a document or section, could include navigation <hgroup>-For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings <mark>-For text that should be highlighted <meter>-For a measurement, used only if the maximum and minimum values are known <nav>-For a section of navigation <progress>-The state of a work in progress <ruby>-For ruby annotation (Chinese notes or characters) <rt>-For explanation of the ruby annotation <rp>-What to show browsers that do not support the ruby element <section>-For a section in a document. Such as chapters, headers, footers, or any other sections of the document <time>-For defining a time or a date, or both <wbr>-Word break. For defining a line-break opportunity.
Media element <audio> <video> <source> <embed>
Canvas <canvas>
Attribut tel-The input value is of type telephone number search-The input field is a search field url-The input value is a URL email-The input value is one or more email addresses datetime-The input value is a date and/or time date-The input value is a date month-The input value is a month week-The input value is a week time-The input value is of type time datetime-local-The input value is a local date/time number-The input value is a number range-The input value is a number in a given range color-The input value is a hexadecimal color, like #FF8800
Matehatical Markup Language MathML Scalable vector Graphics SVG <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> </head> <body> <p>en röd och en blå cirkel<svg> <circle r="75" cx="75" cy="75" fill="blue"/><circle r="50" cx="50" cy="50" fill="red"/> </svg> </p> </body> </html>
Borttagna element Basefont, big, center, font, strike, tt, u Frame, frameset, noframes Acronym, applet, isindex, dir, noscript
Grundstruktur <!DOCTYPE HTML> <html lang=en> </html> <head> <meta charset=utf-8"> <title>Interesting things</title> </head> <body> <p>Very nice text</p> </body> </html>
Det här går också bra <!DOCTYPE HTML> <meta charset=utf-8"> <title>Interesting things</title> <p>Very nice text</p>
HTML4 – så gjorde man <div class="post"> </div> <body> <div id="header"> <h1>Detta är rubriken</h1> </div> <div id="sidebar"> <h2>Meny</h2> <ul> <li><a href="">alt. 1</a></li> … <li><a href="">alt. 6</a></li> </ul> <div class="post"> <h2>Underrubrik</h2> <p>aklösdfjas dasö asd dj d dlkajsd lj löksa asödk aökd aks js alsj lkadj lasjd l dklas dlfjkdh alskjd alsjd l</p> <div class="post"> <h2>Underrubrik</h2> <p>aklösdfjas dasö asd dj d dlkajsd lj klsda skdö öadk öalksd aökd öaks döakls döasöldkf öaskd öas ödk aösd </p> </div> <div id="footer"> <p><small>Copyright Nisse Pärlemor och hans morsa och några andra jag känner</small> </p> </body>
HTML4 – stylesheet #sidebar {float:left;width:20%;} .post {float:right;width:79%;} #footer {clear: both}
HTML5 <!DOCTYPE HTML> <body> <header> <h1>Detta är rubriken</h1> </header> <nav> <h2>Meny</h2> <ul> <li><a href="">alt. 1</a></li> … <li><a href="">alt. 6</a></li> </ul> </nav> <article> <h2>Underrubrik</h2> <p>aklösdfjas ….. dklas dlfjkdh alskjd alsjd l</p> </article> <article> <h2>Underrubrik</h2> <p>aklösdfjas dasö asd dj d dlkajsd lj klsda skdö öadk öalksd aökd öaks döakls döasöldkf öaskd öas ödk aösd </p> </article> <footer> <p><small>Copyright Nisse Pärlemor och hans morsa och några andra jag känner</small> </p> </footer> </body>
header, nav, footer, article {display:block;} nav {float:left;width:20%;} article{float:right;width:79%;} footer {clear: both}
header <header> </header> <hgroup> </hgroup> <a href=""><img src=map.jpg alt="karta"></a> <h1>fantastiska platser att besöka</h1> <h2>Ulan Bator, Peking och Skövde</h2> </hgroup> <nav> <p>Är <a href="">Borås </a> eller <a href="">Alingsås </a> eller <a href="">Trollhättan </a>ditt drömmål</p> </nav> </header>
Blogg <article> </article> <header> <h1>Tentamen kommer att ges den <time datetime=2011-06-01>1 juni</time></h1> <p>Publicerad <time datetime=2011-03-30 pubdate> 30 mars</p> </header> <p>tag med fusklappar, mobiltelefoner och annat som kan underlätta …. </p> <footer>Kursansvarig i samarbete med resten av lärarna</footer> </article> <h1><a href="">student</a> <time datetime=2011-04-02 pubdate>kommentar 2 april</p> <p>Gillar detta - en slant till mutor skulle kanske också underlätta asd slkd lösd fölas ökdj d fökl ölkdfj </p> <footer>asdk alsd alsf alsdjf alskf lasdf alsd asdhj</footer>
header, nav, footer, article {display:block;} nav {float:left;width:10%;} article{float:right;width:89%;} aside {clear:both} footer { clear: both; color: #36F; font-size: 12px; }
VIDEO .ogg – Firefox, Opera, Chrome MPEG4 – Chrome, Safari WebM – Opera, Chrome audio muted autoplay autoplay controls controls height pixels loop loop poster url preload preload src url width pixels
ex_M_movie.html <!DOCTYPE HTML> <html> <body> <h1>Mina semesterbilder</h1> <video src="Wildlife.ogg" width="500" height="340" controls="controls"> your browser does not support the video tag </video> </body> </html>
2011-01-22_1734 http://www2.tfe.umu.se/systemteknik/webbteknik/HTML/2011-01-22_1734.swf
ex_M_audio.html <!DOCTYPE HTML> <html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> </script> </head> <body> <audio src="Sleep Away.mp3" controls="controls"> Your browser does not support the audio element. </audio> </body> </html>
Command <!DOCTYPE HTML> <html> <link href="O_command.css" rel="stylesheet" type="text/css"> <body> <menu> <command onclick="alert('DU TORDES - GÖR INTE OM DET')"> Klicka Här - om du törs</command> </menu> </body> </html>
Meter <!DOCTYPE HTML> <html> <link href="O_command.css" rel="stylesheet" type="text/css"> <body> <meter value="2" min="0" max="10">2 out of 10</meter><br /> <meter value="0.6">60%</meter> </body> </html>
CANVAS <canvas> är ett nytt HTML-element som kan användas för att rita grafik med hjälp av skript (vanligtvis JavaScript). Det kan till exempel användas för att rita grafer, göra foto kompositioner eller göra enkla (och inte så enkel) animeringar.
Att använda <canvas>element är inte svårt men du behöver en grundläggande förståelse för HTML och JavaScript. <canvas> stöds inte i alla moderna webbläsare, men stöds i Firefox, Chrome, Opera 9 och Safari. Internet Explorer 9 kommer att ha stöd för den
<canvas id="tutorial" width="150" height="150"></canvas> Det liknar <img> men saknar attributen src och alt. Elementet <canvas>har bara två attribut - bredd och höjd. När ingen bredd och höjd attributen anges, kommer ursprungligen arbetsytan 300 pixlar bred och 150 pixlar hög. ID-attributet är inte specifika för elementet <canvas>men är en av standard HTML-attribut som kan användas med (nästan) alla HTML-element (som klass till exempel). Det är alltid bra att lämna ett id eftersom detta gör det mycket lättare att identifiera det i vårt skript.
Om läsaren inte stödjer Canvas <canvas id="stockGraph" width="150" height="150"> Text som beskriver vad som finns i canvas </canvas> …. <canvas id="clock" width="150" height="150"> Bild som motsvarar det som finns i canvas
Om läsaren inte supportar Canvas <body onload="draw()"> <canvas id="canvas" width="300" height="300"> HÄR BORDE FINNAS EN LUSTIG BILD MED 9 FIGURER </canvas> </body>
När canvas inte fungerar Chrome Internet Explorer 8
Exempel huvudsakligen från https://developer.mozilla.org/en/canvas_tutorial
Dokumentmall <html> <head> </head> <title>Canvas tutorial</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html>
Ett enkelt example function draw() ctx.fillStyle = "rgb(200,0,0)"; { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); }
The grid
Rectangles fillRect(x,y,width,height) : Draws a filled rectangle strokeRect(x,y,width,height) : Draws a rectangular outline clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent (Det finns också ritmetoden clip() – men det kommer vi tillbaka till längre fram)
function draw() … ctx. fillRect(25,25,100,100); ctx function draw() … ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } }
Drawing paths beginPath() closePath() stroke() fill() Första steg för att skapa en bana - beginPath Andra steget - rita. Tredje – closePath – sluta eller fylla
function draw(){ ctx.beginPath(); ctx.moveTo(75,50); var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill(); }
moveTo moveTo(x, y) lineTo(x, y) arc(x, y, radius, startAngle, endAngle, anticlockwise)
ctx.arc(75,75,50,0,Math.PI*2,true); ctx.moveTo(110,75); function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); ctx.stroke(); }
function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); for(var i=0;i<4;i++){ for(var j=0;j<3;j++){ ctx.beginPath(); var x = 25+j*50; var y = 25+i*50; var radius = 20; var startAngle = 0; var endAngle = Math.PI+(Math.PI*j)/2; var anticlockwise = i%2==0 ? false : true; ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise); if (i>1) { ctx.fill(); } else { ctx.stroke(); }
Bezier and quadratic curves quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) Cp1x och cp1y är koordinater Till röda punkten X och y är koordinater till Kurvans slutpunkt
ctx.quadraticCurveTo(25,25,25,62.5); function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // Quadratric curves example ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke(); }
ctx.beginPath(); ctx.moveTo(75,40); function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); }
Rectangles ctx.beginPath(); ctx.fillStyle = "rgb(200,0,0)"; rect(x, y, width, height) function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillStyle = "rgb(200,0,0)"; ctx.rect(25, 25, 25, 25) ctx.fill(); }
drawImage(image, x, y, width, height) function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } img.src = 'Image.png';
drawImage(image, x, y, width, height) function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ for (var i=0;i<4;i++){ for (var j=0;j<3;j++){ ctx.drawImage(img,j*50,i*38,50,38); } img.src = 'seal.png';
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
save() restore() Metoderna save and restore används för att spara och hämta tillstånd Ingen av metoderna har några parametrar. Tillstånden lagras på en stack – vid save läggs tillståndet på stacken Värdena för strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation sparas. Save kan användas hur många gånger som helst. Vid resotore läses från stacken.
Save restore function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0,0,150,150); ctx.save(); ctx.fillStyle = '#09F' ctx.fillRect(15,15,120,120); ctx.fillStyle = '#FFF' ctx.globalAlpha = 0.5; ctx.fillRect(30,30,90,90); ctx.restore(); ctx.fillRect(45,45,60,60); ctx.fillRect(60,60,30,30); }
Translate(x, y)
function draw() { var ctx = document. getElementById('canvas') function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0,0,300,300); for (var i=0;i<3;i++) { for (var j=0;j<3;j++) { ctx.save(); ctx.strokeStyle = "#9CFF00"; ctx.translate(50+j*100,50+i*100); drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10); ctx.restore(); }
function drawSpirograph(ctx,R,r,O){ var x1 = R-O; var y1 = 0; var i = 1; ctx.beginPath(); ctx.moveTo(x1,y1); do { if (i>20000) break; var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) ctx.lineTo(x2,y2); x1 = x2; y1 = y2; i++; } while (x2 != R-O && y2 != 0 ); ctx.stroke(); }
rotate(angle) Den andra metoden för transformering är rotera. Vi använder den för att rotera arbetsytan runt det aktuella origo. Metoden har bara en parameter och vinkeln arbetsytan roteras genom. Rotationenscentrumär alltid arbetsytans origo.
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.translate(75,75); for (var i=1;i<6;i++){ // Loop through rings (from inside to out) ctx.save(); ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; for (var j=0;j<i*6;j++){ // draw individual dots ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore();
scale(x, y) Nästa transformations metod är “scaling”. Metoden har två parametrar x som är skalfaktorn I horisontell led och y som är skalfaktorn vertikalt Båda parametrarna är rationella tal Värden under 1 reducerar skalan och värde större än 1 ökar skalan.
var ctx = document.getElementById('canvas').getContext('2d'); function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.strokeStyle = "#fc0"; ctx.lineWidth = 1.5; ctx.fillRect(0,0,300,300); // Uniform scaling ctx.save() ctx.translate(50,50); drawSpirograph(ctx,22,6,5); // no scaling ctx.translate(100,0); ctx.scale(0.75,0.75); drawSpirograph(ctx,22,6,5); ctx.translate(133.333,0); ctx.restore(); // Non-uniform scaling (y direction) ctx.strokeStyle = "#0cf"; ctx.save() ctx.translate(50,150); ctx.scale(1,0.75); drawSpirograph(ctx,22,6,5); ctx.translate(100,0); ctx.restore(); // Non-uniform scaling (x direction) ctx.strokeStyle = "#cf0"; ctx.translate(50,250); ctx.scale(0.75,1); ctx.translate(133.333,0); ctx.translate(177.777,0); }
function drawSpirograph(ctx,R,r,O){ var x1 = R-O; var y1 = 0; var i = 1; ctx.beginPath(); ctx.moveTo(x1,y1); do { if (i>20000) break; var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) ctx.lineTo(x2,y2); x1 = x2; y1 = y2; i++; } while (x2 != R-O && y2 != 0 ); ctx.stroke(); }
globalCompositeOperation
Composite var compositeTypes = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter','darker','copy','xor’ ]; function draw(){ for (i=0;i<compositeTypes.length;i++){ var label = Document.createTextNode(compositeTypes[i]); document.getElementById('lab'+i).appendChild(label); var ctx = document.getElementById('tut'+i).getContext('2d'); // draw rectangle ctx.fillStyle = "#09f"; ctx.fillRect(15,15,70,70); // set composite property ctx.globalCompositeOperation = compositeTypes[i]; // draw circle ctx.fillStyle = "#f30"; ctx.beginPath(); ctx.arc(75,75,35,0,Math.PI*2,true); ctx.fill(); }
Clipping paths Maskar bort delar av en bild Det finns tre metoder Stroke Fill Clip
var ctx = document.getElementById('canvas').getContext('2d'); function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0,0,150,150); ctx.translate(75,75); // Create a circular clipping path ctx.beginPath(); ctx.arc(0,0,60,0,Math.PI*2,true); ctx.clip(); // draw background var lingrad = ctx.createLinearGradient(0,-75,0,75); lingrad.addColorStop(0, '#232256'); lingrad.addColorStop(1, '#143778'); ctx.fillStyle = lingrad; ctx.fillRect(-75,-75,150,150); // draw stars for (var j=1;j<50;j++){ ctx.save(); ctx.fillStyle = '#fff'; ctx.translate(75-Math.floor(Math.random()*150), 75-Math.floor(Math.random()*150)); drawStar(ctx,Math.floor(Math.random()*4)+2); ctx.restore(); } } function drawStar(ctx,r){ ctx.beginPath() ctx.moveTo(r,0); for (var i=0;i<9;i++){ ctx.rotate(Math.PI/5); if(i%2 == 0) { ctx.lineTo((r/0.525731)*0.200811,0); } else { ctx.lineTo(r,0); ctx.closePath(); ctx.fill(); }
Animation Clear Save Draw Restore setInterval(animateShape,100); - upprepning varje 100 ms setTimeout(animateShape,500); - en gång efter 500 ms Tredje varianten är att styra animationen med mus eller tangentbord.
var sun = new Image(); var moon = new Image(); var earth = new Image(); function init(){ sun.src = 'images/sun.png'; moon.src = 'images/moon.png'; earth.src = 'images/earth.png'; setInterval(draw,100); } function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.globalCompositeOperation = 'destination-over'; ctx.clearRect(0,0,300,300); ctx.fillStyle = 'rgba(0,0,0,0.4)'; ctx.strokeStyle = 'rgba(0,153,255,0.4)'; ctx.save(); ctx.translate(150,150); var time = new Date(); ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() ); ctx.translate(105,0); ctx.fillRect(0,-12,50,24); ctx.drawImage(earth,-12,-12); ctx.save(); ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() ); ctx.translate(0,28.5); ctx.drawImage(moon,-3.5,-3.5); ctx.restore(); ctx.beginPath(); ctx.arc(150,150,105,0,Math.PI*2,false); ctx.stroke(); ctx.drawImage(sun,0,0,300,300); }
Gartic - http://www.gartic.net/ Multi-player drawing game Canvascape - http://www.benjoffe.com/code/demos/canvascape/ A 3D adventure game (first-person shooter). Freeciv.net A multiplayer strategy game with isometric graphics, created using HTML5 canvas. A Basic RayCaster https://developer.mozilla.org/en/A_Basic_RayCaster A good example of how to do animations using keyboard controls. canvas adventure Also a nice example that uses keyboard controls. An interactive Blob http://www.blobsallad.se Have fun with the blob. Flying through a starfield http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html Fly through stars, circles or squares. iGrapher An example of charting stock market data.
http://dev.w3.org/html5/2dcontext/