Webbutveckling02 [weuweb02]

Moment07 - HTML5 Media

Förändrade kursplaner

Inför HT18 så förändrades kursplanerna för denna kursen och så länge denna rutan finns kvar så håller jag på att uppdatera detta moment.

Introduktion

Det finns en hel del tekniker som täcks in i denna kursen, alla elever kommer inte behöva jobba med allt men varje elev skall veta om vilka olika typer av media som finns och som kan vara intressanta att använda till ett slutprojekt.

Canvas

En av de mest intressanta sakerna i HTML5 är den nya <canvas>-taggen, denna tag låter en med hjälp av JavaScript att rita grafik direkt på webbsidan.

Det går att göra ganska mycket olika saker eftersom det styrs av JavaScript, här nedan finns två exempel, det första skriver bara ut text, den andra är en klocka som fungerar.

Your browser does not support the canvas element.

<p><canvas id="myCanvas" width="300" height="80" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas></p>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  // Create gradient
  var grd = ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(1,"green");
  grd.addColorStop(0,"white");

  // Fill with gradient
  ctx.fillStyle = grd;
  ctx.fillRect(0,0,canvas.width,canvas.height);

  // Print text
  ctx.font="30px Comic Sans MS";
  ctx.fillStyle = "black";
  ctx.textAlign = "center";
  ctx.fillText("webweu02", canvas.width/2, canvas.height/2);
</script>

<script>
var canvas = document.getElementById("clock");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#999';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.20 + "px Comic Sans MS";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

Nedan finns en videotutorial om hur du kan använda Canvas. Naturligtvis finns det väldigt mycket mer att göra med canvas, varför inte testa att bygga ett enkelt spel?

HTML5 Media

Ända tills nu i och med HTML5 så har man varit tvungen att installera plugins(program) i sin webbläsare för att kunna spela video, till exempel QuickTime, RealPlayer, Silverlight och Flash Player. I och med HTML5 så introduceras de nya taggarna <video> och <audio>. Tanken är att det nu ska bli lika lätt att lägga till en video som att lägga till en bild på en webbsida.

SVG

SVG står för Scalable Vector Graphics och är ett bildformat, som gif och jpg. Skillnaden mot dessa är att svg är vektorbaserad grafik(informationen sparas som geometriska figurer, som punkter, linjer, cirklar och liknande som tillsammans beskriver en bild jämfört med rastergrafik/bitmap som gif/jpg/png där varje pixel innehåller info) vilket gör att den kan förstoras respektive förminskas utan att bildinformation förstörs. Bildinformationen sparas i XML format. SVG är rekommenderat av W3C. Lite speciellt är att du kan skapa en svg bild i vilken texteditor som helst (även om det är mycket bättre att utnyttja ett program. Även online finns hjälpprogram). Alla delar i en SVG bild finns i SVG DOM vilket gör att man lätt kan manipulera en del med hjälp av Javascript. Varje del blir som ett eget objekt och även om man bara ändrar en egenskap på delen(objektet) så ritar webbläsaren automatiskt om delen men ritar inte om övriga delar.

Här följer en videogenomgång av SVG.

Och här kommer ett kodexempel.

Sorry, your browser does not support inline SVG.
<svg height="120" width="120">
<rect x="10" y="10" rx="20" ry="20" width="100" height="100"
      style="fill:grey;stroke:black;stroke-width:5;opacity:0.5" />
<circle cx="60" cy="60" r="40" stroke="black" stroke-width="2" fill="red" />
<circle cx="60" cy="60" r="30" stroke="black" stroke-width="2" fill="white" />
<circle cx="60" cy="60" r="20" stroke="black" stroke-width="2" fill="blue" />
<circle cx="60" cy="60" r="10" stroke="black" stroke-width="2" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>

Uppgift

Som uppgift i detta moment så vill jag att du testar två av teknikerna. Jag vill att du har gjort något med Canvas och SVG. Att länka in audio eller video om det blir aktuellt i ett slutprojekt är jag rätt så säker på att du klarar av. Välj att göra två egna uppgifter inspirerade av mina exempel, videofilmerna eller något annat som du har sett på nätet.

Redovisning

Redovisa detta moment på följande sätt;

  1. Lägg upp dina lösningar på din webbplats.
  2. Länka sidan/sidorna från din samlingssida.
  3. I WordPress så reflekterar du över ditt arbete, berätta vilka uppgifter du gjort och varför. Resonera kring hur du tycker att det har gått att jobba med momentet.
    Frågestöd
    • Hur har det gått att arbeta med momentet?
    • Finns det någon av de teekniker du har använt som du känner lite mer för? Hur skulle du kunna utnyttja detta genom att vidareutveckla dina uppgifter?