Hashtagg på Twitter #gy11kockums
Webbteknik Undervisning för webben på 2010-talet Lars Gunther
Om ingen gymnasiereform genomförts... Hur hade du ändrat på din undervisning då?
Finns två fel! <body onload=”foo()”>
Inte ”diskreta” skript ” Obtrusive” Inkräktande
eval evil
Vilken kommer först? <script> window.onload = function () { alert(”onload”); } </script> <script defer> alert(”defer”); </...
Nu då? <script defer> alert(&quot;defer&quot;); </script> <script> window.onload = function () { alert(&quot;onload&quot;)...
CSS kul (?) .foo { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-tr...
Framsteg
Web Standards Project
XHTML medvetenhet om striktare regler
CSS baserad layout
Phoenix/Firebird/Firefox = utvecklingen tar fart igen
Stadig utveckling <ul><li>Ajax (2004)
Opera och Safari </li><ul><li>Nytt krig: Vem stödjer standarder bäst? </li></ul><li>Bloggar </li><ul><li>Bästa sättet att ...
Etc </li></ul>
Explosion! <ul><li>JavaScript med JIT
CSS 3
HTML5
Canvas
SVG
WebGL
Hårdvaruacceleration
Etc </li></ul>
” Best practice” <ul><li>Standarder
Separation av logik
Upcoming SlideShare
Loading in …5
×

Webbteknik (Kockums juni 2011)

547 views
479 views

Published on

Published in: Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
547
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webbteknik (Kockums juni 2011)

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

×