Wikiskola - Användarbidrag [sv]

HTML, CSS och Javascript

2018-03-20T15:39:13Z

Profile90: /* Javascript */ Uppdaterar era skämt - riktigt urusla för övrigt.

== Intro till Programmering ==

{{malruta |

Vi kommer att arbeta med Ci 1, dvs det '''centrala innehållet1''':

: Teknikutvecklingsprocessens alla delar från idé och modell, produkt eller tjänst till användning och återvinning med praktisk tillämpning av teknik och teknikutveckling inom ett eller flera teknikområden.

Ni kommer att kunna visa '''förmåga''':
: 3. Förmåga att lösa tekniska problem.
: 6. Kunskaper om hur teknik har utvecklats och utvecklas i samspel med det omgivande samhället samt kunskaper om befintlig teknik och aktuell teknikutveckling.}}

Som intro kan man titta på några olika exempelsidor med enkel kodning samt några platser där man kan lära sig koda. Utforska gärna detta på egen hand.

: [[Intro till Turtle Logo programmering]]
: [[Scratch]]
: [[Lär dig programmera genom att spela spel]]
: [[Codecademy]]
: [[Teori - programmering]] med en presentation.

=== Editors ===

Det finns en editor att ladda ner som heter TextWrangler och den fungerar bra men länkarna nedan går till moderna editorer. Testa dig fram så du hittar vad som passar dig bäst.

: [http://www.w3schools.com/html/ TryIt Editor] klicka på den gröna Try it-knappen.
: [https://atom.io Atom] är ett bra verktyg för att koda med färg.
: [http://www.barebones.com/products/textwrangler/download.html TextWrangler] Traditinellt verktyg för textredigering.
: Brackets
: [https://codepen.io/pen/ CodePen]

== HTML, CSS och Javascript ==

Vi jobbar på [http://www.w3schools.com/ W3School] där det finns gott om övningar. Startsidan visar precis vad det handlar om.

== CSS ==

: [http://www.w3schools.com/html/html_css.asp CSS intro] och
: [http://www.w3schools.com/css/default.asp CSS tutorial]
: [http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path2 W3Schools TryIt Editor] med canvas och boll.
:: Testa gärna [https://www.w3schools.com/tags/canvas_fill.asp html Canvas Fill() method]

Förutom att laborera med CSS för canvas border har vi nu laborerat med koden i scriptet <script> </script>. Vi är nu redo för nästa steg där vi tittar närmare på Javascript.

== HTML ==

Det enda vi gör med html just nu är att konstatera att det är det skapar en hemsida med vår canvas där vi programmerar i javascript.

== Javascript ==

{{joke |
<br>
The programmers wife told him to go to the store and get a loaf of bread, <br>and if they have eggs, to get a dozen.

The programmer returned with twelve loafs of bread.
}}

Läs om hur script-taggen fungerar:

: [http://www.w3schools.com/js/js_whereto.asp W3Schools Javascrpt - The Script Tag på W3Schools]

: [https://www.w3schools.com/html/html5_canvas.asp W3School om Canvas] - där man även använder lite Javascript för att rita. Läs igenom alla delarna i avsnittet canvas som du ser i innehållet i vänsterspalten.

=== Bra att känna till ===

[http://www.w3schools.com/tags/ref_colornames.asp Färger]

=== Exempelkod ===

Klipp in den i ett try it yourselffönster. Koden ligger placerad i ett expanderbart fönster för att vi ska få överblick över denna sida.

{{Lista |
<pre>
<!DOCTYPE html>
<html>
<body>

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

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

// Cirkel //
ctx.beginPath();
ctx.arc(400,0,80,0,2*Math.PI);
ctx.fillStyle = "Yellow";
ctx.fill();

// Streck //
ctx.beginPath();
ctx.moveTo(140,80);
ctx.lineTo(300,10);
ctx.strokeStyle = "Yellow";
ctx.stroke();

// Rektangel //
ctx.fillStyle = "Brown";
ctx.fillRect(50,320, 300,180);

// Polygon tak //
ctx.strokeStyle = "Black";
ctx.fillStyle = "Grey";
ctx.beginPath();
ctx.moveTo(50,320);
ctx.lineTo(350,320);
ctx.lineTo(300,200);
ctx.lineTo(100,200);
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>

</body>
</html>
</pre>
}}

=== Inlämningsuppgift ===

{{uppgruta | '''Rita en fin bild'''
[[Fil:Skärmavbild 2016-11-10 kl. 22.16.37.png|200px|right]]

Rita ett hus eller en fin bild med hjälp av den html du lärt dig på W3Schools.

Du kombinerar alltså linjer, rektanglar, cirklar, färger, gradienter och text till en trevlig bild.

Sedan tar du en skärmdump på bilden och sparar för säkerhets skul.,

Du ska lämna in koden.Kopiera koden till Anteckningar och spara den med ändelsen .html. Den lämnar du in på Canvas - Teknik 1.
}}

==== Elevexempel ====

[http://www.w3schools.com/code/tryit.asp?filename=F08J8KPEE5L2 Dimitros hus]

== Funktioner ==

När du skapade din bild ovan fick du kopiera kodblock för varje byggelement. Koden blir lång och det kan bli fel. Det är därför lämpligt att samla ihop koden i en funktion som sedan åberopas från huvudprogrammet.

=== Läs detta ===

Du får bakgrundskunskaper och enkla övningar här:

: [http://www.w3schools.com/js/js_functions.asp JS Functions] med exemplet '''Celsius to Fahrenheit''' (en bit ned på sidan) ser du hur du kan använda en funktion.

'''Skriv om formeln''' och gör funktionen toFahrenheit.
{{Lista |
<pre>
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function to convert from Celcius to Fahrenheit:</p>
<p id="demo"></p>

<script>
function toFahrenheit(c) {
return (9/5) * c + 32;
}
document.getElementById("demo").innerHTML = toFahrenheit(30);
</script>

</body>
</html>
</pre>
}}

Skapa en egen funktion som räknar ut något på samma sätt.

{{uppgruta | '''Funktioner förenklar - skapa en gubbe'''

Använd dina kunskaper i att rita med rektanglar, cirklar och polygoner till att skapa n gubbe som du kan ha i nästkommande projekt. Gör en funktion vardera för strecket, rektangeln, cirkeln och polygonen.

Använd funktioner för att förenkla koden i din tidigare uppgift. Kodexempel finner du nedan.

Rita en gubbe till ett spel med hjälp av vår enkla grafik och funktioner.

Skapa funktionen myGubbe som är en funktion av funktioner.

Spara en fil gubbe.html och lämna in på Canvas uppgift Gubbe med funktioner.
}}

{{Lista |
<pre>

<!DOCTYPE html>
<html>
<body>

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

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

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}
this.myRectangle(10, 2, 50, 70, "Blue");
this.myRectangle(50, 20, 50, 70, "Green");
this.myRectangle(90, 200, 50, 70, "Red");
</script>

</body>
</html>
</pre>
}}

=== Om du kör fast ===

Här visar jag hur man skapar fler funktioner. Även med myPartCircle.

{{Lista |
<pre>
<!DOCTYPE html>
<html>
<body>

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

<script>

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

function myStreck(x1, y1, x2, y2, color) {
ctx.strokeStyle = color;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}

function myTriangle(x1,y1,x2,y2,x3,y3, color) {
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.closePath();
ctx.fill();
ctx.stroke();
}

function myCircle(x, y, r, t, color) {
ctx.beginPath();
ctx.arc(x,y,r,t, 2.2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}

function myPartCircle(x, y, r, v1,v2, color) {
ctx.beginPath();
ctx.arc(x,y,r,v1,v2);
ctx.fillStyle = color;
ctx.fill();
}

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}

this.myRectangle(10, 2, 50, 70, "Blue");
this.myRectangle(50, 20, 50, 70, "Green");
this.myRectangle(90, 200, 50, 70, "Red");
this.myCircle(230, 200, 35, 1, "Green");
this.myTriangle(222,222,111,111,211,11, "Purple")
this.myStreck(100, 300, 200, 50, "Orange")
this.myPartCircle(230, 300, 35, 1.2*Math.PI,1.8*Math.PI, "Brown");
</script>

</body>
</html>
</pre>
}}

=== Gubben som en funktion med funktioner ===

Om du har funktioner för cirklar, rektanglar, mm och kan bygga en gubbe genom att skriva this.myRectangle osv ett flertal gånger så kan du samla ihop dessa kommandon i en ny funktion för att rita gubben. Då kan du med en rad kod, this.myGubbe osv, placera ut flera gubbar på olika ställen och med olika färgeer, etc.

{{Lista |
<pre>
<!DOCTYPE html>
<html>
<body>

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

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

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}

function myCircle(x,y,r, color) {
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}

function myGubbe(x,y,w,l,r, color, color2) {
this.myRectangle(x, y, w, l, color);
this.myCircle(x, y, r, color2);
this.myCircle(x+50, y, r, color2);
this.myCircle(x+50, y+50, r, color2);
this.myCircle(x, y+50, r, color2);
}

this.myGubbe(x0, y0,50,50, 12,"red", "black");
this.myGubbe(x0+100, y0+50,50,50, 12,"Blue", "Purple");

</script>

</body>
</html>
</pre>
}}

=== En skalbar gubbe ===
[[Fil:Skalbar gubbe.PNG|400px|höger]]
{{Lista |
<pre>
<!DOCTYPE html>
<html>
<body>

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

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x0 = 150;
y0 = 30;
kroppBredd =80;
kroppHojd =140;
arm =125;
armtjock=20;

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}

function myCircle(x,y,r, color) {
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}

function myGubbe(x,y,w,l,r, color, color2) {
this.myRectangle(x, y, w, l, color);
this.myRectangle(x+w, y-r, arm, armtjock, color2);
this.myCircle(x, y, r, color2);
this.myCircle(x+w, y, r, color2);
this.myCircle(x+w, y+l,r, color2);
this.myCircle(x, y+l, r, color2);
}

this.myGubbe(x0, y0,kroppBredd,kroppHojd, 12,"red", "black");

</script>

</body>
</html>
</pre>
}}
{{clear}}

=== En enkel animering ===
[[Fil:Skärmavbild 2016-11-10 kl. 22.22.31.png| 200px |right]]

Studera följande exempel för att lära dig animering, dvs att flytta något på skärmen. Den här koden är kanske '''inte lämplig för att integrera din gubbe'''.

Vi hittar enklare kod på [http://www.w3schools.com/js/js_htmldom_animate.asp JavaScript HTML DOM Animation] och sidorna i det avsnittet.

Använd koden nedan och försök få den röda fyrkanten att åka i en fyrkant.

{{Lista |
<pre>
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button>
</p>

<div id ="container">
<div id ="animate"></div>
</div>

<script>
// Fram och tillbaks
function myMove() {
var elem = document.getElementById("animate");
var pos = 51;
var dir = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos < 300 && dir == 0) {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
if (pos == 300){
dir = 1;}
} else if (pos > 50 && dir == 1) {
pos--;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
if (pos == 50){ dir = 0;}
}
}
}
</script>

</body>
</html>
</pre>
}}
{{clear}}

== Gör ett spel ==
[[Fil:Tangentflytt.PNG|400px|höger]]

Vi ska följa en tutorial som heter HTML Game Tutorial, vilken består av tolv lektioner/avsnitt.

Här finns ett [https://www.w3schools.com/graphics/game_intro.asp intro]. Men häng inte kvar för länge. Gå vidare till [https://www.w3schools.com/graphics/game_canvas.asp canvas] och sedan på avsnittet '''[https://www.w3schools.com/graphics/game_components.asp Components]''' finns det mer att jobba med.

Du kommer in på en sida som heter Intro där det finns ett exemepl på ett helt spel för att du ska få en uppfattning om vad du kan göra. När du går vidare kommer du att få se enklare exempel där du bygger dina kunskaper från grunden.

Gå igenom hela tutorialen i lugn och ro. Det är inte nödvändigt (eller ens möjligt) att du förstår allt i koden men du kommer att lära dig mycket om hur du kan modifiera koden efter dina önskningar.

Efter ett tag kommer du att hitta på egna modifieringar och få idée till ditt eget spel. När du modifierat och skapat något eget utifrån kodexemplen kan du lämna in det som en .html-fil.

Nedan kommer finns det några exempel som visar hur du kan bygga vidare.
{{clear}}
==== Alexanders exempelkod ====
[[Fil:Flytta och rotera.PNG|400px|höger]]
Detta exempel visar hur man kan skapa två rektanglar. Ungefär samma exempel som det nedan.

{{Lista |
<pre>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">

<script>
var myGamePiece;
var myGamePiece2;

function startGame() {
myGamePiece2 = new component(30, 30, "red", 225, 50);
myGamePiece = new component(30, 30, "blue", 225, 225);
myGameArea.start();
}

var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
e.preventDefault();
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
stop : function() {
clearInterval(this.interval);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

function component(width, height, color, x, y, type) {

this.type = type;
this.width = width;
this.height = height;
this.speed = 0;
this.angle = 0;
this.moveAngle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
this.newPos = function() {
this.angle += this.moveAngle * Math.PI / 180;
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}

function updateGameArea() {
myGameArea.clear();
myGamePiece.moveAngle = 0;
myGamePiece2.moveAngle = 0;
myGamePiece.speed = 0;
myGamePiece2.speed = 0;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -2; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 2; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 2; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -2; }
if (myGameArea.keys && myGameArea.keys[65]) {myGamePiece2.moveAngle = -2; }
if (myGameArea.keys && myGameArea.keys[68]) {myGamePiece2.moveAngle = 2; }
if (myGameArea.keys && myGameArea.keys[87]) {myGamePiece2.speed= 2; }
if (myGameArea.keys && myGameArea.keys[83]) {myGamePiece2.speed= -2; }
myGamePiece.newPos();
myGamePiece2.newPos();
myGamePiece.update();
myGamePiece2.update();
}
</script>

<p>Make sure the gamearea has focus. <br> Use the arrows to move the blue box. <br> Use WASD to move the red box.</p>

</body>
</html>
</pre>
}}
{{clear}}

=== Nya gubbar ===
[[Fil:Dubbelboxar.PNG|400px|höger]]
Du behöver göra nya gubbar med components. Du kan titta på din gamla kod och använda koordinater och listan med dina objekt som du bygger gubben av. Men du måste modifiera koden så den passar i detta '''exempel''' där vi lagt två rektangalr i components och skapat två styrbara objekt.

{{Lista |
<pre>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myGamePiece2;

function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "gray", 190, 120);
myGamePiece2 = new component(30, 30, "green", 10, 120);
}

var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

function component(width, height, color, x, y) {
this.gamearea = myGameArea;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.fillRect(this.x+20, this.y+20, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}

function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
myGamePiece.newPos();

myGamePiece2.speedX = 0;
myGamePiece2.speedY = 0;
if (myGameArea.keys && myGameArea.keys[65]) {myGamePiece2.speedX = -1; }
if (myGameArea.keys && myGameArea.keys[83]) {myGamePiece2.speedX = 1; }
if (myGameArea.keys && myGameArea.keys[87]) {myGamePiece2.speedY = -1; }
if (myGameArea.keys && myGameArea.keys[68]) {myGamePiece2.speedY = 1; }
myGamePiece2.newPos();

myGamePiece.update();
myGamePiece2.update();
}
</script>
<p>Make sure this window has focus, then use the arrow keys on you keyboard to move the red square.</p>
<p>When pressing both the left and the down arrow, the red square will move both down and to the left.</p>
</body>
</html>
</pre>
}}

==== HTML Game Movements ====

Sista delen i denna tutorial innehåller exempel på hur man styr med tangenterna. Länkarna går till nyttiga exempel.

Gör övningarna på [https://www.w3schools.com/graphics/game_movement.asp html Game Movement].

Användbart '''exempel''' på [https://www.w3schools.com/graphics/tryit.asp?filename=trygame_controllers_keys_multiple key controllers]

[https://www.w3schools.com/graphics/tryit.asp?filename=trygame_movement_keyboard Kör runt och sväng-exempel]

{{clear}}

==== Hugos exempelkod ====

Exemplet visar en streckgubbe (funktion av funktioner) som är styrbar.

{{Lista |
<pre>

<!DOCTYPE html>
<html>
<body>

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

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

var SPEED = 0;

var SPEEDx = 0;

var SPEEDcon = 0;

//Rektangel
function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}

//Cirkel
function myCircle(x, y, r, color) {
ctx.beginPath();
ctx.arc(x, y, r, 0,2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}

//Stickman
function myStickman(xA, yA, Size) {
//Head
this.myCircle(xA, yA, Size * 50);
//body
var yArel = yA + Size * 50;
var xArel = xA - Size * 25;
this.myRectangle(xArel, yArel, Size * 50, Size * 100, "Red");
//Legs
var yLeg = yA + Size * 150;
var xRLeg = xA - Size * 25;
this.myRectangle(xRLeg, yLeg, Size * 20, Size * 100, "blue");
var xLLeg = xA + Size * 5;
this.myRectangle(xLLeg, yLeg, Size * 20, Size * 100, "blue");
//Arms
var xArm = xA + Size * 25;
var yArm = yA + Size * 50;
this.myRectangle(xArm, yArm, Size * 100, Size * 20, "blue");
var xLArm = xA - Size * 25;
this.myRectangle(xLArm, yArm, Size * -100, Size * 20, "blue");
}

function clearCanvas() {
ctx.clearRect(0,0,canvas.width,canvas.height);
}

this.myRectangle(10, 2, 50, 70, "Blue");
this.myRectangle(80, 8, 50, 70, "Green");
this.myRectangle(140, 16, 50, 70, "Red");

this.myCircle(50, 100, 10, "Yellow");

function AnimationLoop() {
//var xPostion = 200;
//var yPosition = 200;
var positionX = 100;
var positionY = 200;
setInterval(function(){
clearCanvas();
//var Placement = 200;
//var = 200;
//this.myStickman(200, 200, 0.5);
//alert("bruh");
document.addEventListener("keydown", keyDownCanvas, false);

function keyDownCanvas(e) {
var keyCode = e.keyCode;
if(keyCode==38) {
//alert("You hit the enter key.");
SPEED = - SPEEDcon;
} else if(keyCode==40) {
SPEED = SPEEDcon;
//alert("Oh no you didn't.");
} else if(keyCode==49) {
SPEEDcon = 1;
//alert("Oh no you didn't.");
} else if(keyCode==50) {
SPEEDcon = 2;
//alert("Oh no you didn't.");
} else if(keyCode==51) {
SPEEDcon = 3;
//alert("Oh no you didn't.");
} else if(keyCode==52) {
SPEEDcon = 4;
//alert("Oh no you didn't.");
} else if(keyCode==53) {
SPEEDcon = 5;
//alert("Oh no you didn't.");
} else if(keyCode==37) {
SPEEDx = - SPEEDcon;
//alert("Oh no you didn't.");
} else if(keyCode==39) {
SPEEDx = SPEEDcon;
//alert("Oh no you didn't.");
}
}

document.addEventListener("keyup", keyUpCanvas, false);

function keyUpCanvas(e) {
/*var keyCode = e.keyCode;
if(keyCode==38) {
//alert("You hit the enter key.");
SPEED = -1;
} else if(keyCode==40) {
SPEED = 1;
//alert("Oh no you didn't.");
}*/
SPEED = 0;
SPEEDx = 0;
}

/*document.addEventListener("keyup", keyUpCanvas, false);

function keyUpCanvas(e) {
/*var keyCode = e.keyCode;
if(keyCode==38) {
//alert("You hit the enter key.");
SPEED = -1;
} else if(keyCode==40) {
SPEED = 1;
//alert("Oh no you didn't.");
}
SPEED = 0;
}*/

positionY += SPEED;

positionX += SPEEDx;

this.DRAW(positionX, positionY);
},

50);
}

function DRAW(xAxis, yAxis) {
//var yAxis = 200;
//var xAxis = 100;
this.myStickman(xAxis, yAxis, 0.5);
return 0;
}

//this.myStickman

</script>

<p>1, 2, 3 ,4 ,5 keys for speed regulation. At zero for the moment. Arrow keys to control it.</p>

<button onclick="myStickman(200, 200, 0.5)">Stickman</button>

<button onclick="myCircle(200, 200, 50, 'red')">Happy Face</button>

<button onclick="clearCanvas()">Clear</button>

<button onclick="AnimationLoop()">Start animation</button>
</body>
</html>
</pre>
}}

=== Min kod med en cirkel ===
[[Fil:Min kod med cirkel.PNG|400px|höger]]
{{Lista|
<pre>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var redGamePiece, blueGamePiece, yellowGamePiece, blueCircle;

function startGame() {
redGamePiece = new component(75, 75, "red", 10, 10);
yellowGamePiece = new component(75, 75, "yellow", 50, 60);
blueGamePiece = new component(75, 75, "blue", 10, 110);
blueCircle = new circle(25, "blue", 150, 110);
myGameArea.start();
}

var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function circle(radie, color, x, y) {
this.radie = radie;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radie,0,2*Math.PI);
ctx.fill();
}
}

function updateGameArea() {
myGameArea.clear();
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
blueCircle.update();
}
</script>
<p>Three components on one game area.</p>
<p>Notice that the stack order of the components depends on the order they were updated in the updateGameArea function. The blue game piece is updated last, and will be placed on top of the yellow, which will be placed on top of the red.</p>
</body>
</html>
</pre>

}}
{{clear}}

== Gör ett ritprogram ==

[[Fil:Ritprogram1.PNG|400px|höger]]

Med följande kod kan du rita på canvas med muspekaren. Det gör att du kan bygga ett Paintliknade program. Nedan finns ett exempel men det kommer fler. Koden behöver städas lite också :-)

{{Lista |
<pre>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
margin: 0;
}
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myUpBtn;
var myDownBtn;
var myLeftBtn;
var myRightBtn;

function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myUpBtn = new component(30, 30, "blue", 50, 10);
myDownBtn = new component(30, 30, "blue", 50, 70);
myLeftBtn = new component(30, 30, "blue", 20, 40);
myRightBtn = new component(30, 30, "blue", 80, 40);
myGameArea.start();
}

var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('mousedown', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('mouseup', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
window.addEventListener('touchstart', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('touchend', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.clicked = function() {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var clicked = true;
if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
clicked = false;
}
return clicked;
}
}

function updateGameArea() {
// myGameArea.clear();
if (myGameArea.x) {
myGamePiece = new component(30, 30, "green", myGameArea.x, myGameArea.y);

if (myUpBtn.clicked()) {
// myGamePiece.y -= 1;
}
if (myDownBtn.clicked()) {
// myGamePiece.y += 1;
}
if (myLeftBtn.clicked()) {
// myGamePiece.x += -1;
}
if (myRightBtn.clicked()) {
// myGamePiece.x += 1;
}
}
myUpBtn.update();
myDownBtn.update();
myLeftBtn.update();
myRightBtn.update();
myGamePiece.update();
}

</script>

<p>Click on the blue "buttons" to make the red square move.</p>
</body>
</html>
</pre>}}

{{clear}}

=== Enkel kod för ritprogram på spelprogrammering.nu ===

Den här koden går inte att köra på w3school men den funkar fint på spelprogrammering.nu i deras [http://koda.nu/labbet/ Kodlabbet].

Det här är en bra '''komplettering''' om du inte har lyckats så bra med uppgifterna ovan.

==== Kod för spelprogrammering.nu ====

{{uppgruta | '''Ritprogrammet'''
[[Fil:Skärmavbild 2016-11-10 kl. 08.59.40.png|200px | right]]

Ta koden nedan och förbättra till ett fantastiskt ritprogram.

Det innebär att du lägger in fler färger, förklarande bokstäver och mousover-funktioner. Du kommer att kopiera från den befintliga koden och ändra vissa parametrar. När du gör detta kommer du att lära dig mer programmering. Lägg in en text som förklarar viilka funktioner ditt ritprogram har.

Spara koden som en fil av typen .html.

}}

Observera att denna kod inte fungerar riktigt i Safari. Använd '''Chrome'''.

{{Lista |
<pre>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

<script src="http://spelprogrammering.nu/simple.js">

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

var x0 = 50;
y0 = 30;
bredd =40;
hojd = 40;
distance = 40;
color = "green";
radie = 10;
size = 22;

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}

function myCircle(x, y, r, t, color) {
ctx.beginPath();
ctx.arc(x,y,r,t, 2.2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}

function myText(x, y, size, text, color)
{
ctx.font = size + "pt Helvetica";
ctx.fillStyle = color;
ctx.fillText(text, x, y);
}

function update()

{
// rita de färgade rutorna
this.myRectangle(x0, y0, bredd, hojd, "green");
this.myRectangle(x0, y0 + distance, bredd, hojd, "blue");
this.myText(x0-30, y0 + distance+25, 18, "b", "blue");
this.myRectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");
this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink");

// rita med vald färg
if(mouse.left)
{
this.myCircle(mouse.x, mouse.y, radie, 2,color);
}
// sudda med vit färg genom högerklick

if(mouse.right)
{
this.myCircle(mouse.x, mouse.y, radie, 2,"white");
}
// välj färg att rita med
if ((mouse.x > x0) && (mouse.x < x0 + bredd) && (mouse.y > y0)
&& (mouse.y < y0 + hojd)) { color = "green"; }
if (keyboard.g) { color = "yellow"; }
if (keyboard.b) { color = "blue"; }

// Välj radie på cikeln du ritar med
if (keyboard.one) { radie = 2; }
if (keyboard.two) { radie = 4; }
if (keyboard.three) { radie = 8; }
}
</script>

</body>
</html>
</pre>
}}

===== Exempel =====

[http://liam.hodi.se/ Liam i TE16A gjorde detta ritprogram]. Det är mycket bra och förstås A.

Datorteknik

2018-03-20T15:31:34Z

Profile90: /* Introduktion till kursen Datorteknik */ Länkade vidare till OSI-modellens wikisida

= [[Introduktion till kursen Datorteknik]] =

'''Undervisningen i kursen ska behandla följande centrala innehåll:'''
# Datorsystems uppbyggnad, komponenter och kringutrustningar.
# Grunderna i OSI-modellen ([https://sv.wikipedia.org/wiki/OSI-modellen Open Systems Interconnection ]) och gällande standarder för datorkommunikation.
# Program, till exempel enklare kommunikationsprogram och applikationsprogram för mobila enheter.
# Enklare rit- och simuleringsprogram.
# Begreppen filer, filformat, komprimering och kryptering.
# Fältbussars användning inom till exempel industri-, el- och andra teknikområden.
# Rutiner för säkerhetskopiering och installation av virusskydd.
# ESD-säker hantering av mikroprocessorer och minnen (electro static discharge).
# Planering, montering, konfigurering samt driftsättning av datorsystem för något av användningsområdena mätning, styrning, övervakning eller dokumentation.
# Installation och konfigurering av applikationsprogram.
# Installation och konfigurering av datorer i ett befintligt nätverk.
# Installation av skrivare och andra enheter i nätverk.

=Ergonomi=

Vad betyder ergonomi när det gäller datorer?

Vilka villkor en ergonomisk arbetsplats ska ha?

Vad ska man tänka på?

- Sittställning
-Belysning
-Skärm
-Mus och tangentbord
-m.m

'''Länk till en bra presentation'''

http://www.slideshare.net/annasilvina/en-guide-till-en-ergonomisk-datorarbetsplats

{{uppgruta| Jobba med en klasskamrat. Välja tre icke-ergonomiska aspekter. De kan vara i klassrummet, i arbetsrummen eller hos en vän (vars t.ex sittställning är fel).
Ta kort på/ filma dem och förklara varför dem är icke-ergonomiska. Gör ett bildspel i antingen keynote eller iMovie.

Du publicerar bildspelet genom att lägga in på denna sida.

=== Redovisning ===

Ni kan lägga ut uppgiften [[Ergonomi, TE13A| 13A här]] och [[Ergonomi, TE13B| 13B här]].

}}

= Datorsystems uppbyggnad, komponenter och kringutrustningar. =

{{malruta|Läs [[kunskapskrav_datorteknik1a|kunskapskraven i datorteknik]] så du vet hur du ska plugga. Det är första meningen i kravet som vi jobbar med nu.
}}

== Lektion 4 - Beskriv en datordel ==

'''OBS!:''' Det ka n vara kul att airdroppa elevfotona till dem som vill.

'''OBS 2!:''' Logga in på Wikiskola.se och redigera din användarsida så att det står vem du är. Då slipper vi röda länkar i responserna på filmerna. Och så ska ni signera era artiklar på detta sätt. Skriv seriösa presentationer av er själva.

[[Fil:2010-01-26-technikkrempel-by-RalfR-05.jpg|300px|right]]

TE!2A har tittat på några elevers filmer om en bra funktion i Macen. Vi har skapat konton på Wikiskola och haft en snabbkurs i redigering. Eleverna har börjat välja rubrik och datordel att skriva om.

{{uppgruta|Vad är du bra på när det gäller datorer? Du ska välja ett område och skriva en kort faktatext om ditt område.

Du behöver bli medlem och logga in på Wikiskola för att kunna skriva här.

'''Vi vill att du:'''
* Förklarar vad förkortningen står för.
* Översätter engelska uttryck till svenska
* Anger ungefärligt pris
* Förklarar hur den fungerar
* Länk till en film eller inbäddad film.
* Källor/länkar

Skriv ditt namn under den rubrik där du kan bidra. Eller lägg till en egen rubrik.

=== Redovisning ===

Ni kan lägga ut uppgiften [[Komponent, TE13A| 13A här]] och [[Komponent, TE13B| 13B här]].
}}

=== Era elevtexter ===

'''[[Uppgift Beskriv en datordel]]''' - Här är '''sidan där vi jobbar''' alla deltagare tillsammans (tre klasser).

=== Hur gör man? - Wikimarkup ===

* [[Kort om Wikimarkup]]

=== Länkar ===

Lägg till länkar som andra kan ha nytta av här.
* {{svwp|Dator}}
* [http://en.wikipedia.org/wiki/Personal_computer_hardware Eng wp - Computer Hardware]
* [http://www.kjell.com/fraga-kjell/hur-funkar-det/dator/introduktion-till-datorn Kjell.com Introduktion till datorn]
* http://sv.wikipedia.org/wiki/Maskinvara
* http://sv.wikipedia.org/wiki/Datorteknik

{{clear}}

== LJUDKORTSUPPGIFTEN ==

Hej Hej på er 12C! Lame...

Här kan ni lägga ut era [[KEYNOTE-filer|"KEYNOTE" filer]]. Glöm inte namnen.

=== Hur gör man? - Wikimarkup ===

[[Hur_man_lägger_in_powerpoint#Howto_b.C3.A4dda_in_Slideshare|HowTo Slideshare]]

Nu kommer man direkt på rätt ställe i instruktionen. --[[Användare:Hakan|Håkan Elderstig]] 11 oktober 2012 kl. 12.21 (UTC)

<big>Hej på er 12B!</big>

Här kan ni lägga ut era [[KEYNOTE-filer-12B|"KEYNOTE" filer]]. Glöm inte namnen.

<big>Hej på er EE12! </big>

Här kan ni lägga ut era [[KEYNOTE-filer-EE12|"KEYNOTE" filer]]. Glöm inte namnen.

== Hårdvaru övning: Beskriv en datordel ==

Målen med den här uppgiften är:

1. Att fördjupa era kunskaper om olika komponenter i datorn genom att samla information om olika dator komponenter och att skriva om dem.

2. Att jobba med Google docs. På Google docs kan man dela sina dokument med andra i hela världen. Det betyder att ni allihopa kan jobba på samma dokument SAMTIDIGT. Ni ska öppna länken som ni har fått på schoolsoft.

och gör en PowerPoint presentation helt enkelt. Alla kan redigera bilderna, lägga till nya saker (texter, bilder, effekter) och radera saker.

{{uppgruta|Vad är du bra på när det gäller datorer? Du ska välja ett område och skriva en kort faktatext om ditt område.

'''Jag vill att ni:'''
* Förklarar vad förkortningen står för.
* Översätter engelska uttryck till svenska
* Anger ungefärligt pris
* Förklarar hur den fungerar
* Länk till en film eller inbäddad film.
* Källor/länkar

Skriv ditt namn under den rubrik där du kan bidra. Eller lägg till en egen rubrik.

}}

'''OBS!:''' Det ka n vara kul att airdroppa elevfotona till dem som vill.

'''OBS!:''' Eftersom uppgiften är en gemensam uppgift är det viktigt att ni tar extra hänsyn till att inte radera vad som andra har gjort.

<br />

== Håkans Grafikkortsuppgift ==

Först kör jag Shimas PPT.

I slutet finns en uppgift att ni ska ta reda på fakta om ljudkort. Gör det och för in era resultat i tabellen på denna länk: [https://docs.google.com/presentation/d/1U0sYLR565PqdLnvROFiA0lpl81euIFZMj2D2p7xjha0/edit Tabell på Google Drive om grafikkort]
<br />

<html>
<iframe src="https://docs.google.com/presentation/embed?id=1U0sYLR565PqdLnvROFiA0lpl81euIFZMj2D2p7xjha0&start=false&loop=false&delayms=3000" frameborder="0" width="480" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</html>
<br />
=== Resultatet ===

Det blev inte bra med så här stora tabeller i en ppt. meningen var att dela upp tabellen i flera små, en per slide. Vi ville sortera efter pris men det gick inte på grund av at det fanns delade celler, olika cellformat samt ibland priset angivet med kr efter.

Jag kopierade in data i Excel och konverterade till pdf som laddades på Slideshare:
<br />
<html>
<iframe src="http://www.slideshare.net/slideshow/embed_code/14773976" width="800" height="400" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</html>
<br />
Google Spreadsheet tappar tyvärr länkarna samt att det inte går att hitta en inbäddningskod. Visst kan man skapa en IFrame själv men jag vill hitta något enklare, snyggare.

== Lektion 5 - Jobba i boken ==

{{läxa| till nästa lektion.
Jobba till och med sid 37 i Läroboken och till och med uppgift 34 i Arbetsboken
}}
Vi fortsätter idag med att läsa i boken och göra uppgifter. Ni tar vid där ni slutade förra gången och jobbar vidare i arbetsboken samtidigt som ni läser i läroboken.

== lektion 6 - Struktur på datordelarna ==

{{tnkruta|Vi behöver datorer att labba med
Om ni har trasiga eller föråldrade datorer som ni inte använder får ni gärna donera dem till oss!
}}

=== Pass 1 ===

{{uppgruta|Struktur på texter om datordelar
# var och skapar en sida som heter dittnamn_Sandlåda
# Du lägger en länk på [[Diskussion:Uppgift_Beskriv_en_datordel|Diskussionssidan för datordelarna]] och en länk från din egen användaresida Därifrån kan du jobba nu.
# Kopiera koden från [[Uppgift_Beskriv_en_datordel|Sidan med texter om datordelar]] till din Sandlådesida
# rediger så att det blir struktur. Använd rubriker med nivå 2 och placera in delarna dit de hör enligt vad du tycker. Tänk logiskt.
}}
'''Lärdom'''

Nu har vi lärt oss:
* Hur man skapar en länk inom wikin
* Hur man skapar en ny sida (genom att namnge sidan i en länk)
* Att man kan busa runt i sin egen sandlåda (Sandlåda är ett Wikipediabegrepp).
* Att Diskussionssidan är bra för att prat om sidan (den innehåller nu era förslag på ändringar)

=== Pass 2 ===

{{uppgruta|Struktur på texter om datordelar, forts.
# Gå ihop två och två och jämför era sidor och sammanställ en sida som innehåller det bästa från båda förslagen
# Gå ihop fyra och fyra och gör på samma sätt.
# åtta och åtta
# 13 och 13 eller hur många ni nu blir.
# Redovisa de olika förslagen
}}
'''Lär ut hur man:'''
* Skapar nivå ett rubbar
* klipper ut allt på en rubrik och klipper in efter texten på en rubrik

'''Resultat'''

här fem förslag på hur man kan sätta struktur på delarna i datorn:

[[Struktur Datordelar]]

=== Pass 3 ===

Nu ska vi slutföra arbetet med att bringa struktur på våra komponenter. När vi blir klara med det kommer vi att ha en hygglig sida som vi kan arbeta vidare med.
{{uppgruta|Struktur på texter om datordelar, forts.

# Beslut om vilken struktur vi ska ta genom omröstning.
# Skriv in den nya strukturen på komponentsidan
# Sätt er i grupper och samla ihop komponentstycekna i någons sandlåda.
# Kopiera över era delar till den riktiga sidan: [[Uppgift_Beskriv_en_datordel|Sidan med texter om datordelar]]

}}

=== Pass 4 - ge respons på varandras arbeten ===

{{uppgruta|'''Om tid finns.'''

Nu är vi klara med att generera text (åtminstone de flesta av oss - skynda på ni andra, vi vill lära oss mer).

# Läs instruktion om vad som ska finnas med i en komponenttext.
# Läs som ligger efter ditt eget och ge respons. Responsne ska vara av typen: Gratulera, Kommentera och Utveckla.
# Lägg till rubriker för komponenter som saknas.
# '''Diskutera''' hur denna struktur stämmer med bokens struktur.
# '''Det finns mycket mer att skriva - fyll gärna på! Det finns även ett behov av att redigera ihop bidrag som kommer från flera personer'''
}}

=== Resultat och bedömning ===

{{resultat|
Här är slutresultatet av hela arbetet med att beskriva datordelar. Det är denna text ni har blivit bedömda på.

[[Uppgift_Beskriv_en_datordel|Sidan med texter om datordelar]]
}}

== Lektion 7 - Historik ==
{{tnkruta|'''Du kan förlora dina filer!'''
Om du har otur och det händer något med din Mac behöver du kanske få den ominstallerad. Då förlorar du alla filer på den. Skolarbeten och favoritsaker går förlorade.
Om du använder DropBox Har du dem kvar på nätet. Använd på länken nedan och skaffa dig ett konto.

<nowiki>http://db.tt/k40VmbNe</nowiki> Länk till DropBox

}}
{{läxa|Läs sid 38-44 i boken.

Gör frågorna 35-38 på sid 9 i arbetsboken.}}

* http://www.oercommons.org/courses/web-development/view kanske nåt om internets historia går att använda

{{svwp|Datorns_historia}}

http://www.tekniskamuseet.se/1/194.html

== Historia ==

I början av 1800-talet fanns mekaniska räknemaskiner för att göra vissa beräkningar.
Charles Babbage konstruerade 1820 differensmaskinen som var den mest avancerade dittills.
Den visade sig vara för komplicerad för att byggas fungerande. Trots det gjore han
en förbättrad och mer generell maskin som han kallade den analytiska maskinen. Den
byggde på samma mekaniska ide som den tidigare maskinen med kugghjul som växlades
i och ur styrda från ett hålkort med instruktioner som matades till maskinen. Lady
Ada Lovelace skrev program till maskinen som skulle få den att göra beräkningar. Det
visade sig att inte heller denna maskin kunde byggas till fungerande skick med dåtidens
mekaniska precision och den gjorde aldrig några beräkningar och Ada fick aldrig se sina
program exekverade.

Alan Turing var en brittisk matematiker som i sina studier om lösbarhet för matematiska
problem använde sig av en tankemodell med en hypotetisk apparat som kunde
göra några olika logiska operationer. Han visade att med några logiska operationer gick
det att göra en sån maskin som kunde beräkna alla beräkningsbara problem, den kallas
efter honom Turingmaskinen. Han visade också matematiskt att varje annan maskin som
kan beräkna alla beräkningsbara problem kan emulera och emuleras av Turingmaskinen.
Sådana maskiner kallas Turingkompletta. Det följer av Turings slutsatser att alla Turingkompletta
maskiner kan lösa samma problem och emulera varandra. Det har i efterhand
visat sig att Babbage utan vetskap om Turings senare upptäckte gjort en turingkomplett
maskin med sin analytiska maskin.

CC BY SA, Johan Arvelius 2010

=== Datorer jag kommit i kontakt med ===

''Expandera rutan nedan så ser du ett galleri med några av de datorer --[[Användare:Hakan|Håkan Elderstig]] 20 oktober 2012 kl. 09.11 (UTC) kommit i kontakt med genom åren.''
{{transclude|{{:Datorer jag kommit i kontakt med}}}}

== Film - BBC Datorn ==

''Den här lektionen passar väl in under Datorteknik 1a, Entreprenörskap och Teknik1 och ligger därför som en [[BBC Inventions Computer|inbäddad sida]] (ett slags mall). Redigeringar på sidan syns således likadant på alla ställen. ''
{{transclude|{{:BBC Inventions Computer}}}}

{{clear}}

== Perifera enheter ==
{{läxa|Jobba färdigt Perifera enheter till nästa vecka.

Läs sidorna 45-62 i Läroboken.

Gör uppgifterna 45-69, på sidorna 13-18 i arbetsboken
}}
=== Kommunikation med yttre enheter ===

* USB är beskrivet i datorkomponentstycket
** USB-kontakter
*
=== Inmatningsenheter ===

* Mus är beskrivet i datorkomponentstycket
* tangentbord
* bildskärm

=== Bildskärmar ===

=== Skrivare ===
* skrivare

=== Nätverk ===

* Trådbundet
* trådlöst

{{uppgruta|

'''Nätverks frågor: '''
Ni ska samla information om nätverk och internet. Ni kan tänka på bl.a. följande punkter när ni googlar:

1. En kort historia om internet

2. Domännamn

3.Webbadresser

4. IP-adresser

5. Subnet-mask

6. DNS

7. Hårdvaror som används i nätverket

'''TE12B''':

''Här kan ni lägga ut era [[KEYNOTE-Nätverk|"KEYNOTE" Nätverk]]. Glöm inte namnen.''

''''''TE12C''''':

''Här kan ni lägga ut era [[KEYNOTE-Nätverk12C|"KEYNOTE" Nätverk12C]]. Glöm inte namnen.''

''''''EE12''''':

''Här kan ni lägga ut era [[KEYNOTE-NätverkEE12|"KEYNOTE" NätverkEE12]]. Glöm inte namnen.''

}}

=== Bilder ===
* scannrar

Film

==Lektion 8 - "Rånet" - en inlämningsuppgift om persondatorn ==

''Den här inlämningsuppgiften är istället för prov och kan pågå som ett hemarbete medan jag gör några lektioner om kiselprocessing, servrar m, se nedan.''

[[File:Lucas Cranach the Elder - Thief on the cross, facing left - Google Art Project.jpg|thumb|300px|Lucas Cranach the Elder - Thief on the cross, facing left - Google Art Project]]
{{uppgruta|'''Redovisning datorns delar'''

Hur skulle du göra om du fick ansvaret i din familj att köpa nya datorer till alla eftersom ni råkat ut ett otrevligt inbrott där tjuvarna stal varenda dator, '''teve och radio'''. Som tur är förstörde de inget och de tog inget annat, bara '''datorer, spelkonsoler och hemelektronik.''' Alla hade naturligtvis sina telefoner med sig så de finns kvar liksom det trådlösa nätverket.

Ni hade en bra försäkring vilken betalar ut '''27 400 kr'''. Ni har haft familjeråd och bestämt att ni ska passa på att skaffa er bra saker som löser alla era behov av arbete, kommunikation, studier och underhållning.

Ni kommer att behöva skjuta till mer pengar och ta av semesterkassan. Du har tagit på dig ansvaret för att göra en inköpslista med alla kostnader, inköpsställen mm. Självklart passar du på att '''plocka ihop din egen stationära dator''' som du kan ha som server, speldator och designmaskin. Glöm inte att redovisa '''miljöaspekterna''' och de '''ergonomiska''' effekterna av ert köp.

Skriv i '''Pages och numbers''' och lämna in till oss. Ni får en vecka på er. '''Deadline fredag 23.59'''.

Du ska skaffa ett konto på '''Dropbox''' genom denna länk

: <nowiki>http://db.tt/k40VmbNe</nowiki> Länk till DropBox

Döp din fil med ditt namn och gör en kopia. Sedan ska du lämna in ditt dokument på min '''Dropbox''' i mappen [https://www.dropbox.com/sh/t0nlfpfjknunr43/fPtlbKT4it Datorteknikuppgift]. Jag litar på att ni inte fipplar med någon annans fil. Jag flyttar filerna när de kommer in.
}}

Vi ska ägna oss åt lite andra saker också. Ni får jobba hela första lektionen med detta men sen kör vi bara en kort avstämning och lägger in liter Javascript också. Så får ni jobba klart inlämningen hemma.
{{clear}}

= Laborationer och praktiska övningar =
[[File:Personal computer, exploded 6.svg|thumb|300px|Personal computer, exploded 6]]

== Syfte ==

Det här är själva kärnan i kursen Datorteknik 1a. Här ska ni få lära er nyttiga saker som ni kan använda i kommande jobb omm.

{{malruta|'''För E krävs'''

Detta är en del av kunskapskravet:

Eleven hanterar med visst handlag utrustning och verktyg samt utför arbetet på ett säkert sätt.

I arbetet använder eleven med viss säkerhet instruktioner, manualer, topologier och andra dokument på både svenska och engelska samt gör en enkel dokumentation av sitt arbete.
}}

== Undersök datorns insida ==

{{uppgruta|'''Fota insidan'''

Öppna den dator du fått tilldelad. Skruva loss vad du kan av baksidan eller tangentbordet och ta n bild av moderkort och vad mer du hittar.

Ta reda på vad det är du ser. Vilka komponenter finn där.

ladda upp bilderna på serviceprotokollet (datorns egen sida). Skriv förklaringar till vad man ser på bilderna.
}}
{{clear}}

Använd gärna er egen sida om datorns delar: [[Uppgift_Beskriv_en_datordel]]. Här kan ni få mycket information och nyttiga länkar.

=== Skruva isär och undersök ===

Plocka isär en dator och sätt ihop den igen. Söka fel. Beskriva fel. Åtgärda fel. Installera komponenter.

[[Serviceorder mall]]

'''<big>[http://wikiskola.thorengruppen.se/index.php?title=Inlämnade_datorer_TIS_Stockholm Inlämnade datorer på TIS Stockholm]</big>'''

Detta är datorerna vi arbetar med i det praktiska. En del är inte i så bra skick men andra fungerar och skall åtgärdas. Det är ett slags inventarielista. Sidan ligger på WSTG.

{{tnkruta|'''Dokumentation'''

Hur går det med att dokumentera datorn genom att lägga in bilder skriva och förklara hur datorn är uppbyggd? Du ska ta reda på så mycket som möjligt om datorn och lägga in det på datorns sida (serviceprotokollet).
}}

== Obligatoriska labbar ==

De uppgifter som ligger i rosa rutor är obligatoriska.

Eleverna redovisar på sina <big>'''[http://wikiskola.thorengruppen.se/index.php?title=Personliga_sidor_Wikiskola_TG_elever_i_TE12A Personliga sidor Wikiskola TG]'''</big>. Desa sidor ligger på WSTG på elevernas personliga sidor som de når när de är inloggade.

=== Bedömningen ===

bedömningen utgår från delar av andra stycket i kunskapskrav för betyg A, vilket här delats upp i mindre punkter:

* Eleven planerar och utför efter samråd med handledare och med mycket gott handlag hård- och mjukvaruinstallation, konfigurering och underhåll samt åtgärdar enkla och även mer avancerade fel i datorer och datorsystem. Resultatet är gott i fråga om funktion, säkerhet och kvalitet.
* I arbetet använder eleven med säkerhet instruktioner, manualer, topologier och andra dokument på både svenska och engelska
* Eleven gör en noggrann och utförlig dokumentation av sitt arbete.

=== Backup av en PC ===
{{lab|<big>'''Backup'''</big>

==== Backup PC ====
Ta backup på TISSTO-005 och visa backupen för din lärare som första steg mot att bli godkänd på detta moment.

Läs sidan 114 och 115 i läroboken.

Vilka delar av datorn är viktigast att säkerhetskopiera?

Skriv en kort instruktion för hur man går till väga när man säkerhetskopierar.

Vilka program finns som man kan använda för att förenkla vid backupper privat och i företag?

Automatiska tidsstyrda backuper, synk, uppdatering, etc

Skriv en rapport på detta på din personliga sida på Wikiskola. Berätta för din lärare så blir du bedömd.

==== Backup av din mac ====

Det finns ett backupprogram till din Mac som heter Timemachine. Ta reda på hur det funkar och gör en backup. Lagra backuppen på något eget media som du har kontroll över eller på en server som vi har i skolan (ej klart än, fråga din lärare).

* http://sv.wikipedia.org/wiki/Time_Machine_(datorprogram)
}}

==== Använda en backup ====

Antag att du har gjort backup på din dator och den sen går sönder och du ska flytta in på en ersättningsdator. Hur gör du då? Det gäller att få med så mycket som möjligt av dokument, bilder, mm. men det är även en fördel om dina inställningar, lösenord, bokmärken mm följer med. nedan följer en beskrivning av hur det kan gå till. Detta är ine en laboration i egentlig mening utan mer en övning som man kan bli tvungen att göra.

{{lab|<big>'''Flytta in i en ny dator'''</big>
[[Fil:Flyttassisteneten.png|thumb]]
Det fanns en backup som gjorts med Timemachine. Där fanns mapparna
* Användare
* Bibliotek
* Program
* System
* opt (en mapp för X11 som hör tillInkscape)

Den nya datorn startas upp. Först går jaf på Systeminställningar och lägger till mig själv som användare.

Jag får även lägga in mitt Apple-ID.

Time Machine säkerhetskopierar automatiskt hela Mac-datorn, inklusive systemfiler, program, konton, inställningar, e-postmeddelanden, musik, bilder, filmer och dokument. Det innebär att följande inställningar följer med:
:Kontakter, snabbokmärken i Safari, kalender, etc
: mejlen kräver inloggning på mejlservern sen går den igång och syncar med andra datorer och telefoner
: Bank-ID funkar inte för det måste installeras på varje dator.
: Av något skäl funkade inte Officepaketet. Man uppmanas uppdatera OS X och installera om Office. Det fungerade efter att jag kopierat över mappen med programmen från den gamla datorn.
: Skrivarinställningarna fungerade först efter ominstallation av drivrutinen.

Hur kopierar man in backupen fr Timemachine?

Läs mer här: http://support.apple.com/kb/HT1427?viewlocale{{=}}sv_SE

I mitt fall flyttar jag in i en ny dator och använder '''flyttassistenten'''.
}}

===== Storleken på mapparna =====

Vår SSD-lagring ger oss 64 GB utrymme. Mapparna nedan tar följande utrymme i en standardinstallation respektive min brukade dator:

* Användare - 865 MB - 20.45 GB
* Bibliotek - 5.35 GB - 7.89 GB
* Program - 7.16 GB - 9.44 GB
* System - 5,96 - 6.05 GB

Standardinstallationen summerar de fyra mapparna till knappt 20 GB och "om den här datorn" säger att det finns 37 GB ledigt av 60 GB tot.

Och 3 GB av 60 ledigt på den brukade datorn. här stämmer inte kalkylen eftersom mapparna summerar till knappt 44 GB. Det är 12 GB som inte kan bokföras men de kan handla om spegling av Dropbox eller liknande....

=== Ergonomi ===
{{lab|<big>'''Ergonomi'''</big>

Läs i läroboken och på nätet om ergonomi och vad man bör tänka på vid datorarbete.

Nu ska du göra en jämförande studie och resonera om ergonomi utifrån det.

Använd antingen den stationära datorn som står på ett bord i klassrumet eller någon annan lämplig dator. Sätt dig i bra arbetsställningoch låt en kompis fotograferea dig.

Sätt dig också lite sämre och fota det.

Titta på bilderna och skriv en ergonomisk reflektion på din personliga sida på Wikiskola. Säg till när du är klar så blir du bedömd på detta centrala innehåll.
}}

==== Arbetsmiljö och säkerhet ====

I anslutning till ergonomiavsnittet är det intressant med perspektivet Arbetsmiljö och säkerhet. Detta var tidigare en kurs på teknikprogrammet. Företag måste ha en plan för hur de ska upprätthålla en god arbetsmiljö och säkerhet på arbetsplatsen.

Nedanstående elevarbete ger ett exempel på hur en
[[Media:Arbetsmiljöplan_för_en_serverhall_-_Dennis_Grundelius.pdf|Arbetsmiljöplan för en sererhall]] kan utformas.

=== Trådlöst närverk ===

{{lab|<big>'''Koppla upp på det trådlösa nätverket'''</big>

==== Koppla upp datorn på nätet ====

Installera TISSTO-018 på nätet.

Skriv en instruktion för hur man gör.

Ta bort inställningarna

==== Installera ett nytt nätverkskort ====

Du får ett annat nätverkskort av din lärare.

Fixa drivrutiner.

Testa att det funkar.

Ta bort drivrutinerna och nätverksinställningarna så nästa kan göra samma laboration.

Lämna in det utbytta nätverkskortet.
}}

=== Skrivaren ===

{{lab|'''<big>Nätverksskrivarinstallation</big>'''
{{datorteknik|161 ff}}

'''HP PhotoSmart'''

Installera skrivaren på nätet och skriv en instruktion för hur man gör på din personliga sida på Wikiskola. Säg till när du är klar så blir du bedömd på detta centrala innehåll.

===== Länkar om skrivarinstallationer =====

* http://kunskap.it3.fi/kunskap/Lägg_till_en_nätverksskrivare
* http://www.edu.linkoping.se/trc/skrivare/default.htm
* http://support.apple.com/kb/HT1800?viewlocale{{=}}sv_SE&locale{{=}}sv_SE

===== Länkar om skrivare =====

* http://en.wikipedia.org/wiki/Inkjet_printing
* http://en.wikipedia.org/wiki/Laser_printing

'''De andra skrivarna'''

De är inte nätverksskrivare men det är nyttigt att installera dem med. Installera både på mac och någon PC.

'''Personalens nätverksskrivare - Mac'''

Om en lärarare loggar in elevens mac på personalnätet så kan eleven installera den skrivaren. man får ge akt på att lösenordeet inte ligger kvar i datorn.

Instruktion finns ej men jag har drivrutinen för mac på min HD. Sök på nätet skrivaren heter Canon imageRUNNER ADVANCE C5030.

'''Personalens nätverksskrivare - PC'''

IP-adress: 10.193.48.10
Pröva gärna att installera den på någon PC.

Exempel: HP ProBook 4320s med Windows 7 SP-1 (64 bit)
* [http://www.usa.canon.com/cusa/office/products/hardware/multifunction_printers_copiers/color_copiers/imagerunner_advance_c5030#DriversAndSoftware länk till flera drivrutiner]
*laddade ner UFR_II_XPS_Printer_Driver_v1.50.exe (tror jag)
* Installerade i alla fall skrivaren Canon iR-ADV UFRII XPS och det funkar att skriva ut.
<br />

Lenovo E320 (Win 7 (64 bit) funkar sämre.
}}

=== Installera MacOS ===

Installera MacOS från en sticka med en "ghost".

Det finns en bra bild i min telefon.

[http://wikiskola.thorengruppen.se/index.php?title=Användare%3AKasperV#Installera_MacOS Kaspers instruktion till Ghostning]

=== Installera Windows ===

Installera Windows från sticka eller CD på någon av datorerna. Skriv en instruktion och publicera på din personliga sida på Wikiskola. Säg till när du är klar så blir du bedömd på detta centrala innehåll.
: '''TIS-006''' är lämplig för detta.

=== Bootcamp Windows ===
{{lab|<big>'''Installera bootcamp'''</big>

'''Syfte:''' Installera Windows på extern minnsesticka (eller hårddisk) till din Mac med hjälp av BootCamp.

'''Bakgrund:''' Eftersom våra macBook Air har Intelprocessorer kan de köra Windows. Våra datorer kommer med en färdig hjälp för at ordna detta, Bootcamp.

'''Du behöver:'''

* En sticka med en Isoavbild av Windows 7
* En sticka som du kan installera ditt Bootcamp-Windows på.
* [http://support.apple.com/kb/VI54?viewlocale{{=}}en_US Instruktionsvideo]

'''Varning:''' Vi har inte utrymme för att installera på datorns SSD-disk. Bootcamp kommer att göra en partitionering. Måldisken måste rymma 20 GB. Det finns risk att data går förlorat om du installerar på en disk med data.

'''Nytta:''' Du kan köra program som bara finns för Windows. Det kan vara spel men även nyttiga Open Sourceprogram.
}}

=== Linux-installation ===

* Blåsa rent och installera ett lätt linux-operativ och testa att det funkar igen. Finns det en möjlighet att skapa en trevlig dator av någon riktigt långsam dator?

Detta är en rätt svår uppgift.

Rapportera på Wikiskola.

=== Formatera och partitionera en hårddisk ===

Skriv en instruktion och publicera på din personliga sida på Wikiskola. Säg till när du är klar så blir du bedömd på detta centrala innehåll.

Här handlar det om att testa praktiskt hur FAT32, NTSF mm fungerar med Mac och PC.

=== Installera ett virusskydd ===
{{lab|'''<big>Virusskydd</big>'''
{{datorteknik|251-253}}

==== Virusskydd Mac ====

Virusprogram och brandväggar är viktiga skydd för din dator. På macen du använder i skolan är det redan installerat. Men vad heter det?

==== Virusskydd PC ====

Vad finns, vad behövs. Installera ett gratis virusskyddsprogram på någon PC (exempelvis 018). Du kan behöva börja med att avinstallera det som redan finns.

Skriv en instruktion och publicera på din personliga sida på Wikiskola. Säg till när du är klar så blir du bedömd på detta centrala innehåll.

==== Ta bort ett virus ====
[[Fil:ucash2.png|thumb|300px|En kund kommer med en dator med detta virus. Vad gör du?]]

Titta på bilden och sök information om vad som kan ha hänt. Fundera ut en lämplig åtgärd som löser problemet på ett smidigt och snabbt sätt. Argumentera för varför du väljer denna lösning.

'''Bonus''': Det är möjligt att vi har den smittade datorn så du kan pröva att laga den.

* http://malwaretips.com/blogs/remove-din-dator-ar-blockerad-virus-ukash-scam/

'''Tanke''': Helst om vi kan ta en kopia på HD så vi kan återskapa viruset och öva oss på det.
}}
{{clear}}

=== Överföringshastighet med olika portar ===

Överföringshastighet med olika portar (USB 1, 2 och 3) och nätverk

Rapportera hur man undersöker och vad du kom fram till på din area på Wikiskola.

=== Prestandakollprogram ===

Prestandakollprogram, ex hårddiskutnyttjande, processorkraft. Både Mac och PC

=== Tips ===

Det finns en del på kjell.com

=== Installera LAN och server ===

{{uppgruta|Installera en server i Parks

Deltagare: Johan, Dennis, Jakob, m fl.
}}

= Operativsystem =

''Har det egentligen stöd i kursplanen?''

Åtminstone installera några operativ: Windows, Linux.

== Windows på en hårddisk ==

=== Crossover ===
Man kan anv Crossover för programanvändning (utan Windows) som Wine. betalprogram. Tar processorkraft.

=== Parallels desktop ===

För att Windows på en skiva.

Ladda ner programmet. Det kostar ung 50 €. Test i två veckor.

300 MB.

En parition eler två

Image file (iso-fil från dvd som man bränner av till isoformat

= Grunderna i OSI-modellen (open systems interconnection) och gällande standarder för datorkommunikation. =

== OSI-modellen ==

{{svwp|OSI-modellen}}

=== Guider på .Se om Internet ===

{{uppgruta | <big>'''OSI-modellen'''</big>

Ni få en .se-skrift per grupp ( mina grupper).

Ni läser, skriver sammanfattning för ws, gör en ppt på det viktigaste, redovisar för de andra och gör instuderingsfrågor samt letar upp lämpliga filmer på youtube.

* [https://www.iis.se/lar-dig-mer/guider/introduktion-till-ip-internet-protocol/ introduktion till ip - internet-protocol]
* [https://www.iis.se/lar-dig-mer/guider/dns-internets-vagvisare/ DNS - Internets vägvisare]
* https://www.iis.se/lar-dig-mer/guider/sparrar-och-graddfiler/
* https://www.iis.se/docs/Styrningen-av-Internet_webb.pdf
* https://www.iis.se/lar-dig-mer/guider/uppkopplade-prylar/
* https://www.iis.se/lar-dig-mer/guider/sakernas-internet/
* https://www.iis.se/docs/IPv6-guide_MedBilaga11.pdf - Olämplig

}}

=== Prylar kommunicerar ===

* [http://readwrite.com/2013/07/15/how-the-internet-of-things-will-think#feed=/infrastructure&awesm=~obVyDUlBek4tIO How the internet of things will think]

== Snabbhetstest ==

Test av laddningstider för hemsidan Wikiskola på olika servrar

=== Vårt test ===
[[Fil:Nedladdningstiderwikiskola.png|300px|right]]
Alla i klassen laddade ner Wikiskola från one.com och från Thorengruppens server. Vi prövade även att spara en ändring på respektive server. Som jämförelse laddade vi även ner sidorna från engelska wikipedia och tekniskagymnasiet.se.
{{clear}}

=== Resultatet ===

Det blev en rejäl förbättring efter detta (Jimmys svar):

Hej!

Jag la till följande kod i don localsettings.php:
$wgCacheDirectory = "C:\inetpub\wwwroot\wikiskola.se\cache";
$wgFileCacheDirectory = "C:\inetpub\wwwroot\wikiskola.se\cache";
$wgEnableSidebarCache = true;
$wgUseFileCache = true;
$wgShowIPinHeader = false;
$wgEnableParserCache = true;
$wgCachePages = true;

$wgMainCacheType = CACHE_ACCEL;
$wgMessageCacheType = CACHE_ACCEL;
$wgParserCacheType = CACHE_ACCEL;
$wgMemCachedServers = array();
$wgUseDatabaseMessage = false;

Tyckte då sidan blev snabbare?

=== Ping ===

När man pingar en hemsida skickas ett testpaket som skickas åter vilket ger besked om hur snabbt hemsidan svarar. Man kan använda dena sida där det även finns många andra intressanta undersökningar att göra: [http://ping.eu Ping.eu]
{svwp|ping}}

wikiskola.thorengruppen.se hade vid ett test 8000 ms svarstid. Dessutom kom inte paketen tillbaks vilket kan bero på inställningar i brandväggen.

wikiskola.se hade precis samma utfall.

På Macdatorer kan man även använda Nätverksverktyg.

=== Portar ===

Ping.eu kan även användas för att testa vilka portar som är öppna.

= Program, till exempel enklare kommunikationsprogram och applikationsprogram för mobila enheter. =

* WireShark (network sniffer)
* accelerometer och mätningar med den
** Filmer om accelereometrar, gärna mer MEMS.
* logster för att lagra mätdata
* andra appar som vi själva kommer på

Hur en app ser ut.

Sätta upp nätverk mellan mobiler. Blåtand.

= Enklare rit- och simuleringsprogram. =

* Yenka
* SketchUp

= Begreppen filer, filformat, komprimering och kryptering. =

== Introduktion till kryptering ==
<html>
<iframe src="http://www.slideshare.net/slideshow/embed_code/20242135" width="342" height="291" align="right" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/HkanElderstig/kryptering-kasper-och-jakob" title="Kryptering" target="_blank">Kryptering</a> </strong> from <strong><a href="http://www.slideshare.net/HkanElderstig" target="_blank">Håkan Elderstig</a></strong> </div>
</html>
Vissa bilder ser inte bra ut i presentationen ovan p g a att den konverterats från keyNote. originalet finns på min disk --[[Användare:Hakan|Håkan Elderstig]] 30 april 2013 kl. 14.24 (AST)

Kryptering med PGP eller liknande.

Hur krypterar man data som lagras?

Hur kryptera trafik?
* VPN. Tor, torproject.org

* [http://sv.wikipedia.org/wiki/SSL SSL]
{{clear}}

=== Guider på .Se om kryptering ===

{{uppgruta | '''<big>PGP som funkar!</big>'''

Läs denna guide och följ instruktionerna

* https://www.iis.se/docs/lar-dig-kryptering.pdf
}}

==== Annan info ====

* https://www.iis.se/lar-dig-mer/guider/e-post-att-lita-pa/
* Man ska par en publik nyckel
* Guden ger fel adress för gpgtools för mac. Det ska inte vr .com utan .org
* Sedan ska man ändrs i inställningar för tangentbordet
* Därefter kommer det att gå att kryptera både i notepad och i mejlen

=== Vi gör en ppt ===

{{uppgruta|Gruppuppgift - svara på frågorna

[https://docs.google.com/presentation/d/1qLVN6BqTR_VnVKz-nAehzKxKkFZjzsUq9WYpiO9DlPU/edit?usp{{=}}sharing Kryptering i praktiken]
}}

=== Enigma ===

{{#ev:youtube| G2_Q9FoD-oQ |340 | left }} {{#ev:youtube| V4V2bpZlqx8 |340|right}}

Vi såg den första men den fortsätter visst i ett nytt tiominutersklipp.
{{clear}}

= Fältbussars användning inom till exempel industri-, el- och andra teknikområden. =

== Teori om fätbussar ==

Kurs vid KTH: http://www.kth.se/polopoly_fs/1.252492!/Menu/general/column-content/attachment/KursinfoMG1002.pdf

== [[Lego Mindstorms EV3]] ==

= Rutiner för säkerhetskopiering och installation av virusskydd. =

= ESD-säker hantering av mikroprocessorer och minnen (electro static discharge). =

= Planering, montering, konfigurering samt driftsättning av datorsystem för något av användningsområdena mätning, styrning, övervakning eller dokumentation. =

== Övrigt ==

[http://sv.wikipedia.org/wiki/PIC PIC]

http://sv.wikipedia.org/wiki/Mikrokontroller

http://www.hummingbirdkit.com

= Installation och konfigurering av applikationsprogram. =

* Kanske några program på servern genom Webbstjärnan...
* [Open source]

= Installation och konfigurering av datorer i ett befintligt nätverk. =

Nätverk. Koppla ihop datorer i trådbundna nätverk.

* [http://www.kjell.com/fraga-kjell/hur-funkar-det/natverk/hemnatverk/lokalt-tradbundet-natverk Fråga Kjell om Lokalt trådbundet nätverk]

Nu kan du svara på vad skillnaden är mellan en switch och en router.

{{uppgruta|'''Vi bygger ett nätverk'''

Jag tar med några bärbara pc som vi kopplar in tillsammans med de stationära.

Nätverket vi bygger ska vara både med tråd och trådlöst.

Vi passar på att förbereda LAN genom att skriva upp nummer på anslutningarna i de olika salarna.

Vi tittar på gatewayen.}}

= Installation av skrivare och andra enheter i nätverk. =

== MacBook Air ==

Hur ge eleverna temporär tillgång till vår skrivare?

Drivrutinen har jag på hårddisken i mappen Datorteknik.

Val av drivrutin: Canon IR Advanced C5030.

= Kuriosa och överkurs =

== Artificiell intelligens ==

<html>
<iframe src="http://www.slideshare.net/slideshow/embed_code/9424953" width="342" height="291" align="right" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/KajSchmidt/datorteknik-155-artificiell-intelligens" title="Datorteknik 155 artificiell intelligens" target="_blank">Datorteknik 155 artificiell intelligens</a> </strong> from <strong><a href="http://www.slideshare.net/KajSchmidt" target="_blank">KajSchmidt</a></strong> </div>
</html>
{{clear}}

== Stordatorer serverhallar mm ==

* [http://public.web.cern.ch/public/ CERN]
* Google, Amazon, mfl

== Halvledarprocessning ==

=== Renrum ===

=== Kisel ===

=== Mönstring ===

=== Dopning ===

=== Etsning ===

=== Metallisering ===

=== Kapsling ===

= Laborationer - ej implementerade =

* Felsökning på en dator i praktiken
* Hitta svar på knepigare frågor på nätet, ex hur kan man få browserna att öppna en wordfil? Säkra filer, etc.
* Sätta upp olika program på webbstjärnan, e-handelssystem, moodle, etc
* Molntjänster, ...

=== Industriela tillämpningar ===

* PID-reglering, robotar, lysdiodstavlor (m lödning), Smarta hem, etc., inbyggda system med mera.
=== Distansstyrning, ex uppvärmning på landet ===

* http://www.telldus.se/
* http://www.ljustema.se/mottagare/496-mottagare-utan-dimmer.html
* KNX

Dator- och nätverksteknik

2018-03-20T15:27:02Z

Profile90: Gjorde punktlistan till en punktlista ...

Från: https://www.skolverket.se/laroplaner-amnen-och-kurser/gymnasieutbildning/gymnasieskola/dao

[[Hård- och mjukvaruinstallation]],

uppbyggnad, konfigurering och uppgradering av datorer och datorsystem.

[[Lokala nätverk, uppbyggnad och arbetssätt]]

[[Protokoll för dataöverföring via nätverk]].
* Olika processortyper och deras användningsområden.
* Vanliga operativsystem och deras egenskaper.
* Prestanda för olika datalagringmedia. Lagring av data på optiska medier.
* Begreppen switchning och routning.
* Begreppet virtuella nät.
* Interna och externa bussar, deras användningsområden och prestanda.
* Säkerhetskopiering och virusskydd.
* Installation av kringutrustning och uppgradering av drivrutiner.
* Installation och underhåll av lokal skrivare.
* Konfigurering av grafikkort.
* Datorns start- och bootsekvenser samt inställning och uppgradering av dess BIOS (Basic Input/Output System) eller firmware.
* Kontroll och optimering av datorers och datorsystems prestanda och funktion.
* Felsökning i datorer och datorsystem.