• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5
 

Html5

on

  • 1,349 views

De presentatie voor een kleine introductie HTML5 voor Lectric opleidingen

De presentatie voor een kleine introductie HTML5 voor Lectric opleidingen

Statistics

Views

Total Views
1,349
Views on SlideShare
1,246
Embed Views
103

Actions

Likes
2
Downloads
16
Comments
0

2 Embeds 103

http://www.paulusklerk.nl 102
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5 Html5 Presentation Transcript

    • HTML5 friend or foe Seminar Den Bosch 2 maart 2011
    • Introductie
      • Wie ben ik?
        • Paulus Klerk [email_address] +31655765376
      • Wie zijn jullie?
      • Wat doen we hier?
      • … ..
    • Er was eens…
      • Het web is veranderd
        • Meer data verkeer
        • Meer data maar minder informatie!
        • Meer devices zoals: tablets, telefoons , etc …. maar minder standaarden
    • Wat is er nu wel?
      • HTML
      • xHTML
      • XML
      • CSS
      • JavaScript
      • AJAX (?)
      • Adobe Flash (?)
    • Wat is HTML?
      • <ul>
      • <li>Paulus</li>
      • <li>Klerk</li>
      • <li>Amsterdam</li>
      • </ul>
    • Maar wat is de betekenis?
      • <ul>
      • <li>Paulus</li> wat betekent Paulus?
      • <li>Klerk</li> wat betekent Klerk?
      • <li>Amsterdam</li> wat betekent Amsterdam?
      • </ul>
    • Maar wat is de betekenis?
      • <ul>
      • <li>Li</li> wat betekent Li?
      • <li>Chi</li> wat betekent Chi?
      • <li>Ping</li> wat betekent Ping?
      • </ul>
    • Data vs Informatie
      • 2
      • II
      • twee
      • 10
      • Diverse data, zelfde informatie?
    • Wat is XML?
      • <persoon>
      • <voornaam>Paulus</voornaam>
      • <achternaam>Klerk</achternaam>
      • <woonplaats>Amsterdam</woonplaats>
      • </persoon>
    • Wat is xHTML
      • <ul class=“persoon”>
      • <li class=“voornaam”>Paulus</li>
      • <li class=“achternaam”>Klerk</li>
      • <li class=“woonplaats”>Amsterdam</li>
      • </ul>
      • Best of both worlds?
    • Waar staat alles dan?
    • Wat doet JavaScript ?
      • De actie, gedrag…..
      • Interactiviteit
      • Dynamisch?
      • Is JavaScript alleen?
            • CSS (hover: kleur )
            • Vbscript?
            • Flash?
            • AJAX? Ahum bedankt Jesse james garrett    
    • Wat doet CSS?
      • Vormgeving
      • MEER vormgeving
      • http://www.csszengarden.com
      • Diverse media ( print,handheld… )
    • En AJAX dan?
      • Wat is het
      • A synchronous J avaScript A nd X ML
      • Oeps een verzameling van technologieën
    • Maar welke problemen hebben we dan?
      • Standaarden
      • Problemen met diverse Media
      • Te veel code
      • Diversiteit in semantiek ook voor belangrijke onderdelen?
      • En………..?????????
    • Er zijn zoveel lagen!!!!
    • M eer problemen
      • Ronde hoeken
      • Diverse video
      • Scherm resolutie
      • Validatie
    •  
    • HTML 5
      • Is this the one and only holy grail?
        • NEE!!
      • Het is een combinatie van een aantal technologie ën:
          • HTML5
          • CSS3
          • SVG
          • Canvas
          • WebGL
          • And ofcourse good old JavaScript 
    • Waarom HTML5?
      • Je hoeft niet opnieuw het wiel uit te vinden.
      • Makkelijk
      • HTML5 blijft!
        • 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.
    • tijdlijn
      • 1991 HTML
      • 1994 HTML 2
      • 1996 CSS 1 + JavaScript
      • 1997 HTML 4
      • 1998 CSS 2
      • 2000 xHTML 1
      • 2002 ontwerpen zonder tabellen
      • 2005 AJAX
      • 2009 HTML 5
    • mooie dingen 
      • Geheugen (offline vs online)
    • Dingen in het geheugen.
      • Offlline
      • window.localStorage.setItem
      • voorbeeld
    • mooie dingen 
      • Geheugen (offline vs online)
      • Databases
    • Web SQL Database
      • 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);});
      • http://slides.html5rocks.com/#web-sql-db
      • Wat belangrijk is om te weten is dat database altijd wel mogelijk waren maar:
        • Anders dan Arrays
        • Sneller
        • En ….. Offline!!!
    • mooie dingen 
      • Geheugen (offline vs online)
      • Databases
      • Werk geheugen
    • Werk geheugen
      • http://slides.html5rocks.com/#web-workers
    • mooie dingen 
      • Geheugen (offline vs online)
      • Databases
      • Werk geheugen
      • AJAX alternatief
    • AJAX alternatief
      • http://slides.html5rocks.com/#web-sockets
      • X-HTTP-request alternatief
    • mooie dingen 
      • Geheugen (offline vs online)
      • Databases
      • Werk geheugen
      • AJAX alternatief
      • Eindelijk OS-koppeling
    • OS
      • Drag and drop
        • Gmail
        • http://slides.html5rocks.com/#drag-and-drop
    • mooie dingen 
      • Geheugen (offline vs online)
      • Databases
      • Werk geheugen
      • AJAX alternatief
      • GEO-location
    • GEO-location
      • Best guess
      • GPS
      • http://slides.html5rocks.com/#geolocation
    • mooie dingen 
      • Geheugen (offline vs online)
      • Databases
      • Werk geheugen
      • AJAX alternatief
      • GEO-location
      • Text output  http://slides.html5rocks.com/#speech-input
    • mooie dingen 
      • Geheugen (offline vs online)
      • Databases
      • Werk geheugen
      • AJAX alternatief
      • GEO-location
      • Text output  http://slides.html5rocks.com/#speech-input
      • Semantiek
    • Semantiek (tags)
      • <header>
      • <section>
      • <article>
      • <footer>
      • <video>
      • Etc…
    • Semantiek (attribute)
      • L ink omschrijving
        • rel=&quot;icon&quot;
        • rel=&quot;archives
        • rel=&quot;license”
      • MicroData
        • itemprop=&quot;name&quot;
    • mooie dingen 
      • Geheugen (offline vs online)
      • Databases
      • Werk geheugen
      • AJAX alternatief
      • GEO-location
      • Text output  http://slides.html5rocks.com/#speech-input
      • Semantiek
      • Formulieren
    • Formulieren
      • voorbeeld
    • Formulieren type=&quot;tel&quot;
    • Formulieren type=”text&quot;
    • Formulieren type=”email&quot;
    • mooie dingen 
      • Geheugen (offline vs online)
      • Databases
      • Werk geheugen
      • AJAX alternatief
      • GEO-location
      • Text output  http://slides.html5rocks.com/#speech-input
      • Semantiek
      • Formulieren
      • Graphics
    • Graphics & multimedia
      • http://slides.html5rocks.com/#video-audio
    • CANVAS (video en audio)
      • http://slides.html5rocks.com/#video-audio
    • CANVAS 2d
      • <canvas id=&quot;canvas-area&quot; width=&quot;838&quot; height=&quot;225&quot;></canvas>
      • <script defer>
      • var canvasContext = document.getElementById(&quot;canvas-area&quot;).getContext(&quot;2d&quot;);
      • canvasContext.fillRect(250, 25, 150, 100);
      • canvasContext.beginPath();
      • canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2, false);
      • canvasContext.lineWidth = 15;
      • canvasContext.lineCap = 'round';
      • canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
      • canvasContext.stroke();
      • </script>
    • SVG
      • http://slides.html5rocks.com/#inline-svg
    • mooie dingen 
      • Geheugen (offline vs online)
      • Databases
      • Werk geheugen
      • AJAX alternatief
      • GEO-location
      • Text output  http://slides.html5rocks.com/#speech-input
      • Semantiek
      • Formulieren
      • Graphics
      • CSS
    • CSS
      • http://slides.html5rocks.com/#css-selectors
    • WOW
      • WOW WOW WOW WOW WOWOWOWOWOWOWOWOWOWOWWWWWWWWWWOOWOWOWOWOWOWOOWOWOWWOOWOWOWOOWOWOWOWO
    • Maar wat nu?
      • Wat moeten we doen?
      • Overstappen?
      • …… ..?
    • Vragen
    • Cool links!
      • http://diveintohtml5.org
      • http://www.html5rocks.com
    •