HTML5 friend or foe Seminar Den Bosch 2 maart 2011
Introductie <ul><li>Wie ben ik? </li></ul><ul><ul><li>Paulus Klerk [email_address] +31655765376 </li></ul></ul><ul><li>Wie...
Er was eens… <ul><li>Het web is veranderd </li></ul><ul><ul><li>Meer data verkeer </li></ul></ul><ul><ul><li>Meer data maa...
Wat is er nu wel? <ul><li>HTML </li></ul><ul><li>xHTML </li></ul><ul><li>XML </li></ul><ul><li>CSS </li></ul><ul><li>JavaS...
Wat is HTML? <ul><li><ul> </li></ul><ul><li><li>Paulus</li> </li></ul><ul><li><li>Klerk</li> </li></ul><ul><li><li>Amsterd...
Maar wat is de betekenis? <ul><li><ul> </li></ul><ul><li><li>Paulus</li>  wat betekent Paulus? </li></ul><ul><li><li>Klerk...
Maar wat is de betekenis? <ul><li><ul> </li></ul><ul><li><li>Li</li>  wat betekent Li? </li></ul><ul><li><li>Chi</li>  wat...
Data vs Informatie <ul><li>2  </li></ul><ul><li>II </li></ul><ul><li>twee </li></ul><ul><li>10 </li></ul><ul><li>二 </li></...
Wat is XML? <ul><li><persoon> </li></ul><ul><li><voornaam>Paulus</voornaam> </li></ul><ul><li><achternaam>Klerk</achternaa...
Wat is xHTML <ul><li><ul class=“persoon”> </li></ul><ul><li><li class=“voornaam”>Paulus</li> </li></ul><ul><li><li class=“...
Waar staat alles dan?
Wat doet JavaScript ? <ul><li>De actie, gedrag….. </li></ul><ul><li>Interactiviteit </li></ul><ul><li>Dynamisch? </li></ul...
Wat doet CSS? <ul><li>Vormgeving </li></ul><ul><li>MEER vormgeving </li></ul><ul><li>http://www.csszengarden.com </li></ul...
En AJAX dan? <ul><li>Wat is het </li></ul><ul><li>A synchronous  J avaScript  A nd  X ML </li></ul><ul><li>Oeps een verzam...
Maar welke problemen hebben we dan? <ul><li>Standaarden </li></ul><ul><li>Problemen met diverse Media </li></ul><ul><li>Te...
Er zijn zoveel lagen!!!!
M eer problemen <ul><li>Ronde hoeken </li></ul><ul><li>Diverse video </li></ul><ul><li>Scherm resolutie </li></ul><ul><li>...
 
HTML 5 <ul><li>Is this the one and only holy grail? </li></ul><ul><ul><li>NEE!! </li></ul></ul><ul><li>Het is een combinat...
Waarom HTML5? <ul><li>Je hoeft niet opnieuw het wiel uit  te vinden. </li></ul><ul><li>Makkelijk </li></ul><ul><li>HTML5 b...
tijdlijn <ul><li>1991 HTML </li></ul><ul><li>1994 HTML 2 </li></ul><ul><li>1996 CSS 1 + JavaScript </li></ul><ul><li>1997 ...
mooie dingen   <ul><li>Geheugen (offline vs online) </li></ul>
Dingen in het geheugen. <ul><li>Offlline </li></ul><ul><li>window.localStorage.setItem </li></ul><ul><li>voorbeeld </li></ul>
mooie dingen   <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul>
Web SQL Database <ul><li>var db = window.openDatabase(&quot;DBName&quot;, &quot;1.0&quot;, &quot;description&quot;, 5*1024...
mooie dingen   <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul>
Werk geheugen <ul><li>http://slides.html5rocks.com/#web-workers </li></ul>
mooie dingen   <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul...
AJAX alternatief <ul><li>http://slides.html5rocks.com/#web-sockets </li></ul><ul><li>X-HTTP-request alternatief </li></ul>
mooie dingen   <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul...
OS <ul><li>Drag and drop </li></ul><ul><ul><li>Gmail </li></ul></ul><ul><ul><li>http://slides.html5rocks.com/#drag-and-dro...
mooie dingen   <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul...
GEO-location <ul><li>Best guess </li></ul><ul><li>GPS </li></ul><ul><li>http://slides.html5rocks.com/#geolocation </li></ul>
mooie dingen   <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul...
mooie dingen   <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul...
Semantiek (tags) <ul><li><header> </li></ul><ul><li><section> </li></ul><ul><li><article> </li></ul><ul><li><footer> </li>...
Semantiek (attribute) <ul><li>L ink omschrijving </li></ul><ul><ul><li>rel=&quot;icon&quot; </li></ul></ul><ul><ul><li>rel...
mooie dingen   <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul...
Formulieren <ul><li>voorbeeld </li></ul>
Formulieren type=&quot;tel&quot;
Formulieren type=”text&quot;
Formulieren type=”email&quot;
mooie dingen   <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul...
Graphics & multimedia <ul><li>http://slides.html5rocks.com/#video-audio </li></ul>
CANVAS (video en audio) <ul><li>http://slides.html5rocks.com/#video-audio </li></ul>
CANVAS 2d <ul><li><canvas id=&quot;canvas-area&quot; width=&quot;838&quot; height=&quot;225&quot;></canvas> </li></ul><ul>...
SVG <ul><li>http://slides.html5rocks.com/#inline-svg </li></ul>
mooie dingen   <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul...
CSS <ul><li>http://slides.html5rocks.com/#css-selectors </li></ul>
WOW <ul><li>WOW WOW WOW WOW WOWOWOWOWOWOWOWOWOWOWWWWWWWWWWOOWOWOWOWOWOWOOWOWOWWOOWOWOWOOWOWOWOWO </li></ul>
Maar wat nu? <ul><li>Wat moeten we doen? </li></ul><ul><li>Overstappen? </li></ul><ul><li>…… ..? </li></ul>
Vragen
Cool links! <ul><li>http://diveintohtml5.org </li></ul><ul><li>http://www.html5rocks.com </li></ul>
 
Upcoming SlideShare
Loading in …5
×

Html5

1,418 views

Published on

De presentatie voor een kleine introductie HTML5 voor Lectric opleidingen

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,418
On SlideShare
0
From Embeds
0
Number of Embeds
110
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. HTML5 friend or foe Seminar Den Bosch 2 maart 2011
  2. 2. Introductie <ul><li>Wie ben ik? </li></ul><ul><ul><li>Paulus Klerk [email_address] +31655765376 </li></ul></ul><ul><li>Wie zijn jullie? </li></ul><ul><li>Wat doen we hier? </li></ul><ul><li>… .. </li></ul>
  3. 3. Er was eens… <ul><li>Het web is veranderd </li></ul><ul><ul><li>Meer data verkeer </li></ul></ul><ul><ul><li>Meer data maar minder informatie! </li></ul></ul><ul><ul><li>Meer devices zoals: tablets, telefoons , etc …. maar minder standaarden </li></ul></ul><ul><ul><li>… </li></ul></ul>
  4. 4. Wat is er nu wel? <ul><li>HTML </li></ul><ul><li>xHTML </li></ul><ul><li>XML </li></ul><ul><li>CSS </li></ul><ul><li>JavaScript </li></ul><ul><li>AJAX (?) </li></ul><ul><li>Adobe Flash (?) </li></ul>
  5. 5. Wat is HTML? <ul><li><ul> </li></ul><ul><li><li>Paulus</li> </li></ul><ul><li><li>Klerk</li> </li></ul><ul><li><li>Amsterdam</li> </li></ul><ul><li></ul> </li></ul>
  6. 6. Maar wat is de betekenis? <ul><li><ul> </li></ul><ul><li><li>Paulus</li> wat betekent Paulus? </li></ul><ul><li><li>Klerk</li> wat betekent Klerk? </li></ul><ul><li><li>Amsterdam</li> wat betekent Amsterdam? </li></ul><ul><li></ul> </li></ul>
  7. 7. Maar wat is de betekenis? <ul><li><ul> </li></ul><ul><li><li>Li</li> wat betekent Li? </li></ul><ul><li><li>Chi</li> wat betekent Chi? </li></ul><ul><li><li>Ping</li> wat betekent Ping? </li></ul><ul><li></ul> </li></ul>
  8. 8. Data vs Informatie <ul><li>2 </li></ul><ul><li>II </li></ul><ul><li>twee </li></ul><ul><li>10 </li></ul><ul><li>二 </li></ul><ul><li>Diverse data, zelfde informatie? </li></ul>
  9. 9. Wat is XML? <ul><li><persoon> </li></ul><ul><li><voornaam>Paulus</voornaam> </li></ul><ul><li><achternaam>Klerk</achternaam> </li></ul><ul><li><woonplaats>Amsterdam</woonplaats> </li></ul><ul><li></persoon> </li></ul>
  10. 10. Wat is xHTML <ul><li><ul class=“persoon”> </li></ul><ul><li><li class=“voornaam”>Paulus</li> </li></ul><ul><li><li class=“achternaam”>Klerk</li> </li></ul><ul><li><li class=“woonplaats”>Amsterdam</li> </li></ul><ul><li></ul> </li></ul><ul><li>Best of both worlds? </li></ul>
  11. 11. Waar staat alles dan?
  12. 12. Wat doet JavaScript ? <ul><li>De actie, gedrag….. </li></ul><ul><li>Interactiviteit </li></ul><ul><li>Dynamisch? </li></ul><ul><li>Is JavaScript alleen? </li></ul><ul><ul><ul><ul><li>CSS (hover: kleur ) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Vbscript? </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Flash? </li></ul></ul></ul></ul><ul><ul><ul><ul><li>AJAX? Ahum bedankt Jesse james garrett     </li></ul></ul></ul></ul>
  13. 13. Wat doet CSS? <ul><li>Vormgeving </li></ul><ul><li>MEER vormgeving </li></ul><ul><li>http://www.csszengarden.com </li></ul><ul><li>Diverse media ( print,handheld… ) </li></ul>
  14. 14. En AJAX dan? <ul><li>Wat is het </li></ul><ul><li>A synchronous J avaScript A nd X ML </li></ul><ul><li>Oeps een verzameling van technologieën </li></ul>
  15. 15. Maar welke problemen hebben we dan? <ul><li>Standaarden </li></ul><ul><li>Problemen met diverse Media </li></ul><ul><li>Te veel code </li></ul><ul><li>Diversiteit in semantiek ook voor belangrijke onderdelen? </li></ul><ul><li>En………..????????? </li></ul>
  16. 16. Er zijn zoveel lagen!!!!
  17. 17. M eer problemen <ul><li>Ronde hoeken </li></ul><ul><li>Diverse video </li></ul><ul><li>Scherm resolutie </li></ul><ul><li>Validatie </li></ul>
  18. 19. HTML 5 <ul><li>Is this the one and only holy grail? </li></ul><ul><ul><li>NEE!! </li></ul></ul><ul><li>Het is een combinatie van een aantal technologie ën: </li></ul><ul><ul><ul><li>HTML5 </li></ul></ul></ul><ul><ul><ul><li>CSS3 </li></ul></ul></ul><ul><ul><ul><li>SVG </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>WebGL </li></ul></ul></ul><ul><ul><ul><li>And ofcourse good old JavaScript  </li></ul></ul></ul>
  19. 20. Waarom HTML5? <ul><li>Je hoeft niet opnieuw het wiel uit te vinden. </li></ul><ul><li>Makkelijk </li></ul><ul><li>HTML5 blijft! </li></ul><ul><ul><li>Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML5 and clarify W3C’s position regarding the future of HTML. </li></ul></ul>
  20. 21. tijdlijn <ul><li>1991 HTML </li></ul><ul><li>1994 HTML 2 </li></ul><ul><li>1996 CSS 1 + JavaScript </li></ul><ul><li>1997 HTML 4 </li></ul><ul><li>1998 CSS 2 </li></ul><ul><li>2000 xHTML 1 </li></ul><ul><li>2002 ontwerpen zonder tabellen </li></ul><ul><li>2005 AJAX </li></ul><ul><li>2009 HTML 5 </li></ul>
  21. 22. mooie dingen  <ul><li>Geheugen (offline vs online) </li></ul>
  22. 23. Dingen in het geheugen. <ul><li>Offlline </li></ul><ul><li>window.localStorage.setItem </li></ul><ul><li>voorbeeld </li></ul>
  23. 24. mooie dingen  <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul>
  24. 25. Web SQL Database <ul><li>var db = window.openDatabase(&quot;DBName&quot;, &quot;1.0&quot;, &quot;description&quot;, 5*1024*1024); //5MBdb.transaction(function(tx) {  tx.executeSql(&quot;SELECT * FROM test&quot;, [], successCallback, errorCallback);}); </li></ul><ul><li>http://slides.html5rocks.com/#web-sql-db </li></ul><ul><li>Wat belangrijk is om te weten is dat database altijd wel mogelijk waren maar: </li></ul><ul><ul><li>Anders dan Arrays </li></ul></ul><ul><ul><li>Sneller </li></ul></ul><ul><ul><li>En ….. Offline!!! </li></ul></ul>
  25. 26. mooie dingen  <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul>
  26. 27. Werk geheugen <ul><li>http://slides.html5rocks.com/#web-workers </li></ul>
  27. 28. mooie dingen  <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul><ul><li>AJAX alternatief </li></ul>
  28. 29. AJAX alternatief <ul><li>http://slides.html5rocks.com/#web-sockets </li></ul><ul><li>X-HTTP-request alternatief </li></ul>
  29. 30. mooie dingen  <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul><ul><li>AJAX alternatief </li></ul><ul><li>Eindelijk OS-koppeling </li></ul>
  30. 31. OS <ul><li>Drag and drop </li></ul><ul><ul><li>Gmail </li></ul></ul><ul><ul><li>http://slides.html5rocks.com/#drag-and-drop </li></ul></ul>
  31. 32. mooie dingen  <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul><ul><li>AJAX alternatief </li></ul><ul><li>GEO-location </li></ul>
  32. 33. GEO-location <ul><li>Best guess </li></ul><ul><li>GPS </li></ul><ul><li>http://slides.html5rocks.com/#geolocation </li></ul>
  33. 34. mooie dingen  <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul><ul><li>AJAX alternatief </li></ul><ul><li>GEO-location </li></ul><ul><li>Text output  http://slides.html5rocks.com/#speech-input </li></ul>
  34. 35. mooie dingen  <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul><ul><li>AJAX alternatief </li></ul><ul><li>GEO-location </li></ul><ul><li>Text output  http://slides.html5rocks.com/#speech-input </li></ul><ul><li>Semantiek </li></ul>
  35. 36. Semantiek (tags) <ul><li><header> </li></ul><ul><li><section> </li></ul><ul><li><article> </li></ul><ul><li><footer> </li></ul><ul><li><video> </li></ul><ul><li>Etc… </li></ul>
  36. 37. Semantiek (attribute) <ul><li>L ink omschrijving </li></ul><ul><ul><li>rel=&quot;icon&quot; </li></ul></ul><ul><ul><li>rel=&quot;archives </li></ul></ul><ul><ul><li>rel=&quot;license” </li></ul></ul><ul><li>MicroData </li></ul><ul><ul><li>itemprop=&quot;name&quot; </li></ul></ul>
  37. 38. mooie dingen  <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul><ul><li>AJAX alternatief </li></ul><ul><li>GEO-location </li></ul><ul><li>Text output  http://slides.html5rocks.com/#speech-input </li></ul><ul><li>Semantiek </li></ul><ul><li>Formulieren </li></ul>
  38. 39. Formulieren <ul><li>voorbeeld </li></ul>
  39. 40. Formulieren type=&quot;tel&quot;
  40. 41. Formulieren type=”text&quot;
  41. 42. Formulieren type=”email&quot;
  42. 43. mooie dingen  <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul><ul><li>AJAX alternatief </li></ul><ul><li>GEO-location </li></ul><ul><li>Text output  http://slides.html5rocks.com/#speech-input </li></ul><ul><li>Semantiek </li></ul><ul><li>Formulieren </li></ul><ul><li>Graphics </li></ul>
  43. 44. Graphics & multimedia <ul><li>http://slides.html5rocks.com/#video-audio </li></ul>
  44. 45. CANVAS (video en audio) <ul><li>http://slides.html5rocks.com/#video-audio </li></ul>
  45. 46. CANVAS 2d <ul><li><canvas id=&quot;canvas-area&quot; width=&quot;838&quot; height=&quot;225&quot;></canvas> </li></ul><ul><li><script defer> </li></ul><ul><li>var canvasContext = document.getElementById(&quot;canvas-area&quot;).getContext(&quot;2d&quot;); </li></ul><ul><li>canvasContext.fillRect(250, 25, 150, 100); </li></ul><ul><li>canvasContext.beginPath(); </li></ul><ul><li>canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2, false); </li></ul><ul><li>canvasContext.lineWidth = 15; </li></ul><ul><li>canvasContext.lineCap = 'round'; </li></ul><ul><li>canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; </li></ul><ul><li>canvasContext.stroke(); </li></ul><ul><li></script> </li></ul>
  46. 47. SVG <ul><li>http://slides.html5rocks.com/#inline-svg </li></ul>
  47. 48. mooie dingen  <ul><li>Geheugen (offline vs online) </li></ul><ul><li>Databases </li></ul><ul><li>Werk geheugen </li></ul><ul><li>AJAX alternatief </li></ul><ul><li>GEO-location </li></ul><ul><li>Text output  http://slides.html5rocks.com/#speech-input </li></ul><ul><li>Semantiek </li></ul><ul><li>Formulieren </li></ul><ul><li>Graphics </li></ul><ul><li>CSS </li></ul>
  48. 49. CSS <ul><li>http://slides.html5rocks.com/#css-selectors </li></ul>
  49. 50. WOW <ul><li>WOW WOW WOW WOW WOWOWOWOWOWOWOWOWOWOWWWWWWWWWWOOWOWOWOWOWOWOOWOWOWWOOWOWOWOOWOWOWOWO </li></ul>
  50. 51. Maar wat nu? <ul><li>Wat moeten we doen? </li></ul><ul><li>Overstappen? </li></ul><ul><li>…… ..? </li></ul>
  51. 52. Vragen
  52. 53. Cool links! <ul><li>http://diveintohtml5.org </li></ul><ul><li>http://www.html5rocks.com </li></ul>

×