En kort och ofullständig intro

Name: En kort och ofullständig intro
Uploaded: 2017-12-02T09:38:39+00:00
Duration: PTM53S42
Channel: Sebastian Nyberg
Description: En kort och ofullständig intro

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 -The input value is one or more 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= >1 juni</time></h1> <p>Publicerad <time datetime= 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= 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>

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

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( ,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( ,0); ctx.translate( ,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); } 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 - A 3D adventure game (first-person shooter). Freeciv.net A multiplayer strategy game with isometric graphics, created using HTML5 canvas. 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 Have fun with the blob. Flying through a starfield Fly through stars, circles or squares. iGrapher An example of charting stock market data.

En kort och ofullständig intro

Liknande presentationer

En presentation över ämnet: "En kort och ofullständig intro"— Presentationens avskrift:

Liknande presentationer

Om projektet

Kontakta oss

Logga in

Logga in via sociala nätverk:

En kort och ofullständig intro

Liknande presentationer

En presentation över ämnet: "En kort och ofullständig intro"— Presentationens avskrift:

Liknande presentationer

Om projektet

Kontakta oss