Presentation laddar. Vänta.

Presentation laddar. Vänta.

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.

Liknande presentationer


En presentation över ämnet: "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."— Presentationens avskrift:

1 HTML 5 En kort och ofullständig intro

2 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 • HTML5 fungerar redan – I exempelvis Firefox, Safari, Chrome, Opera • HTML5 kommer att leva länge

3 Bakåtblick • HTML (4.01) publicerades 1998, och är en buggfix av version 4.0 från • Från W3C var tanken att HTML skulle ersättas av XHTML. • Syntaxen oförändrad sedan 1997.

4 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

5 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.

6 Nya taggar -For external content, like text from a news-article, blog, forum, or any other content from an external source -For content aside from the content it is placed in. The aside content should be related to the surrounding content -A button, or a radiobutton, or a checkbox -For describing details about a document, or parts of a document -A caption, or summary, inside the details element -For grouping a section of stand-alone content, could be a video -The caption of the figure section -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 -For an introduction of a document or section, could include navigation -For a section of headings, using to, where the largest is the main heading of the section, and the others are sub-headings -For text that should be highlighted -For a measurement, used only if the maximum and minimum values are known -For a section of navigation -The state of a work in progress -For ruby annotation (Chinese notes or characters) -For explanation of the ruby annotation -What to show browsers that do not support the ruby element -For a section in a document. Such as chapters, headers, footers, or any other sections of the document -For defining a time or a date, or both -Word break. For defining a line-break opportunity.

7 Media element •

8 Canvas

9 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

10 Matehatical Markup Language MathML Scalable vector Graphics SVG Untitled Document en röd och en blå cirkel

11 Borttagna element • Basefont, big, center, font, strike, tt, u • Frame, frameset, noframes • Acronym, applet, isindex, dir, noscript

12 Grundstruktur Interesting things Very nice text

13 Det här går också bra Interesting things Very nice text

14 HTML4 – så gjorde man Detta är rubriken Meny alt. 1 … alt. 6 Underrubrik 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 Underrubrik 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 Copyright Nisse Pärlemor och hans morsa och några andra jag känner

15

16 HTML4 – stylesheet #sidebar {float:left;width:20%;}.post {float:right;width:79%;} #footer {clear: both}

17 HTML5 Detta är rubriken Meny alt. 1 … alt. 6 Underrubrik aklösdfjas ….. dklas dlfjkdh alskjd alsjd l Underrubrik 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 Copyright Nisse Pärlemor och hans morsa och några andra jag känner

18

19 header, nav, footer, article {display:block;} nav {float:left;width:20%;} article{float:right;width:79%;} footer {clear: both}

20

21 header fantastiska platser att besöka Ulan Bator, Peking och Skövde Är Borås eller Alingsås eller Trollhättan ditt drömmål

22

23 Blogg Tentamen kommer att ges den 1 juni Publicerad 30 mars tag med fusklappar, mobiltelefoner och annat som kan underlätta …. Kursansvarig i samarbete med resten av lärarna student kommentar 2 april Gillar detta - en slant till mutor skulle kanske också underlätta asd slkd lösd fölas ökdj d fökl ölkdfj asdk alsd alsf alsdjf alskf lasdf alsd asdhj

24 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; }

25

26 VIDEO •.ogg – Firefox, Opera, Chrome • MPEG4 – Chrome, Safari • WebM – Opera, Chrome • audiomuted • autoplayautoplay • controlscontrols • heightpixels • looploop • posterurl • preloadpreload • srcurl • widthpixels

27 ex_M_movie.html • • Mina semesterbilder • • your browser does not support the video tag •

28 _ _1734.swf

29 ex_M_audio.html Canvas tutorial Your browser does not support the audio element.

30

31 Command Klicka Här - om du törs

32

33 Meter • • 2 out of 10 • 60% •

34

35 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.

36 • Att använda element är inte svårt men du behöver en grundläggande förståelse för HTML och JavaScript. • 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

37 • Det liknar men saknar attributen src och alt. • Elementet 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 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.

38 Om läsaren inte stödjer Canvas Text som beskriver vad som finns i canvas …. Bild som motsvarar det som finns i canvas

39 Om läsaren inte supportar Canvas HÄR BORDE FINNAS EN LUSTIG BILD MED 9 FIGURER

40 När canvas inte fungerar ChromeInternet Explorer 8

41 Exempel huvudsakligen från https://developer.mozilla.org/en/can vas_tutorial

42 Dokumentmall Canvas tutorial function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); } } canvas { border: 1px solid black; }

43

44 Ett enkelt example function draw() { 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); }

45 The grid

46 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)

47 function draw() … ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } }

48 Drawing paths beginPath() closePath() stroke() fill() • Första steg för att skapa en bana - beginPath • Andra steget - rita. • Tredje – closePath – sluta eller fylla

49 function draw(){ 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(); }

50

51 moveTo • moveTo(x, y) • lineTo(x, y) • arc(x, y, radius, startAngle, endAngle, anticlockwise)

52 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(); }

53

54 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(); }

55

56 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

57 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(); }

58

59 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(); }

60

61 Rectangles 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(); }

62 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'; }

63 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'; }

64 • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

65 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.

66 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.save(); ctx.fillStyle = '#FFF' ctx.globalAlpha = 0.5; ctx.fillRect(30,30,90,90); ctx.restore(); ctx.fillRect(45,45,60,60); ctx.restore(); ctx.fillRect(60,60,30,30); }

67 Translate(x, y)

68 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(); }

69 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(); }

70

71 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.

72 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

73 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.

74 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.scale(0.75,0.75); drawSpirograph(ctx,22,6,5); 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.scale(1,0.75); drawSpirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(1,0.75); drawSpirograph(ctx,22,6,5); ctx.restore(); // Non-uniform scaling (x direction) ctx.strokeStyle = "#cf0"; ctx.save() ctx.translate(50,250); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5); ctx.translate( ,0); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5); ctx.translate( ,0); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5); ctx.restore(); }

75 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(); }

76 globalCompositeOperation

77

78

79

80 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

81 Clipping paths • Maskar bort delar av en bild • Det finns tre metoder – Stroke – Fill – Clip

82 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.save(); 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(); ctx.restore(); }

83

84 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.

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

86 • Gartic - Multi-player drawing game Gartichttp://www.gartic.net/ • Canvascape - A 3D adventure game (first-person shooter). Canvascape - • Freeciv.net A multiplayer strategy game with isometric graphics, created using HTML5 canvas. Freeciv.net • A Basic RayCaster https://developer.mozilla.org/en/A_Basic_RayCaster A good example of how to do animations using keyboard controls. A Basic RayCasterhttps://developer.mozilla.org/en/A_Basic_RayCaster • canvas adventure Also a nice example that uses keyboard controls. canvas adventure • An interactive Blob Have fun with the blob. An interactive Blobhttp://www.blobsallad.se • Flying through a starfield content/uploads/2007/02/canvas.html Fly through stars, circles or squares. Flying through a starfieldhttp://arapehlivanian.com/wp- content/uploads/2007/02/canvas.html • iGrapher An example of charting stock market data. iGrapher

87


Ladda ner ppt "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."

Liknande presentationer


Google-annonser