webbteknik (kockums juni 2011)
TRANSCRIPT
![Page 1: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/1.jpg)
Hashtagg på Twitter
#gy11kockums
![Page 2: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/2.jpg)
Webbteknik
Undervisning för webben på 2010-taletLars Gunther
![Page 3: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/3.jpg)
Om ingen gymnasiereform genomförts...
Hur hade du ändrat på din undervisning då?
![Page 4: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/4.jpg)
Finns två fel!
<body onload=”foo()”>
![Page 5: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/5.jpg)
Inte ”diskreta” skript
”Obtrusive”
Inkräktande
![Page 6: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/6.jpg)
eval
evil
![Page 7: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/7.jpg)
Vilken kommer först?
<script>window.onload = function () { alert(”onload”);}</script>
<script defer>alert(”defer”);</script>
![Page 8: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/8.jpg)
Nu då?<script defer>alert("defer");</script><script>window.onload = function () { alert("onload");}document.addEventListener( "DOMContentLoaded", function () { alert("DOMContentLoaded");}, false);</script>
![Page 9: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/9.jpg)
CSS kul (?)
.foo { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg);}
![Page 10: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/10.jpg)
Framsteg
![Page 11: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/11.jpg)
Web Standards Project
![Page 12: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/12.jpg)
XHTMLmedvetenhet om striktare regler
![Page 13: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/13.jpg)
CSS baserad layout
![Page 14: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/14.jpg)
Phoenix/Firebird/Firefox = utvecklingen tar fart igen
![Page 15: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/15.jpg)
Stadig utvecklingAjax (2004)
Opera och Safari
Nytt krig: Vem stödjer standarder bäst?
Bloggar
Bästa sättet att hålla sig ajour med webbtekniken!
Wikipedia
Etc
![Page 16: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/16.jpg)
Explosion!
JavaScript med JIT
CSS 3
HTML5
Canvas
SVG
WebGL
Hårdvaruacceleration
Etc
![Page 17: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/17.jpg)
”Best practice”
Standarder
Separation av logik
Tillgänglighet
Användbarhet
Dessa principer kommer inte förlora sin giltighet
![Page 18: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/18.jpg)
Post PC eran Mobil är bara början
![Page 19: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/19.jpg)
Yrkesroller
”Designer”
Grafisk design
Interaktionsdesign
Informationsarkitektur
Gränssnittsutvecklare
HTML, CSS, JavaScript, DOM, etc
Webbserverprogrammerare
Språk, ramverk, datalagring, dataöverföring
![Page 20: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/20.jpg)
![Page 21: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/21.jpg)
![Page 22: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/22.jpg)
![Page 23: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/23.jpg)
Vad skall eleverna kunna?
![Page 24: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/24.jpg)
Vad måste jag som lärare kunna?
![Page 25: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/25.jpg)
Semantisk HTML-kod
CSS
”Progressive enhancement”
Säkerhet
Tillgänglighet
![Page 26: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/26.jpg)
![Page 27: Webbteknik (Kockums juni 2011)](https://reader034.vdocuments.net/reader034/viewer/2022052622/5594cf271a28ab391d8b4640/html5/thumbnails/27.jpg)