> >
>
- 
$("#button1").on('click', function() {
	alert('jo');
});
...
+
</>

Start

Willem Mulder

Consultant

Nieuwe dingen + groot bereik + grote impact = top!

Overzicht

Geschiedenis

  • Standalone desktop-applicatie
  • Applicatie met online verbindingen
  • Problemen
    • Hoe update je je applicatie?
    • Hoe distribueer je je applicatie? Bereik?
    • Hoe maak je de koppeling vanuit het internet?
  • Simpel: door je applicatie ook op het web te bouwen!
  • Voor veel zaken nog propriëtaire oplossingen (Flash ed)
  • Steeds meer standaardisatie en openheid, geleid door werkrgroepen, browsermakers en... Apple

Wat is HTML5?

 

  • HTML5 elementen
  • CSS3 styling
  • Javascript
    • Webworkers
    • Websockets
    • Offline storage
    • History API
    • Drag&Drop
    • XHR File upload
    • GeoLocation
    • ContentEditable
    • Muis lock
    • Volledig scherm
    • Cross-document berichten
    • Web Audio
  • SVG, Canvas 2D & 3D

======================= +

 

En wat ondersteunt jouw browser precies? http://beta.html5test.com/
En welke features kan ik gebruiken? HTML5 Please
En wat is de exacte browseroondersteuning? CanIUse.com

Demo's!

Het laatste en beste van HTML5
  • HTML5 elementen
  • CSS3
  • Javascript
  • SVG
  • Canvas 2D
  • Canvas 3D

HTML5 elementen

Nieuwe form elementen

.

je kan autofocus='true' gebruiken voor autofocus

HTML5 elementen

Semantische elementen

  • header
  • nav
  • section
  • article
  • aside
  • details
  • dialog
  • transcript
  • footer
  • hgroup
  • microdata
    voorbeeld
    Hello, my name is John Doe, I am a assistant at the University of Dreams. My friends call me Johnny. visit .
    I live at 1234 Peach Drive Warner Robins , Georgia.

HTML5 elementen

'Semantisch functionele' elementen
voorbeeld

wat gemarkeerde tekst

0 100 + =

Je score is een 6,5!

24

En de klappers

  • SVG
  • Canvas

Maar daar gaan we het straks nog over hebben...

Zie http://www.html-site.nl/downloads/html5.pdf voor een volledig overzicht

CSS3

Heleboel nieuwe CSS zaken, maar een aantal leuke zijn
voorbeeld
border-radius
box-shadow
RGBA kleuren
text-shadow
box-sizing=border-box
box-sizing=content-box
resize horizontal met een vrij lange zin
  • border-radius
  • box-shadow
  • RGBA kleuren
  • text-shadow
  • box-sizing
  • resize
En vooral
voorbeeld
.block { -webkit-transition: all 1s ease; } .block:hover { border-radius: 0px !important; -webkit-transform: rotateX(180deg) !important; }
transforms
scale 0.5
rotateY
rotateZ
rotateX

Javascript
voorbeeld
var counter = 0; function push() { counter++; window.history.pushState( "state_"+counter, "titel_"+counter, "#nummer"+counter ); } $("button#push").on("click", function() { push(); }); $(window).on("popstate", function(event) { alert(event.originalEvent.state); });

  • Webworkers
  • Websockets
    http://sharejs.org/
  • Offline storage
    HTML5Rocks Offline Storage
    HTML5Rocks IndexedDB ToDoList voorbeeld
  • History API
  • Drag&Drop
    voorbeeld
    var holder = $(".holder").get(0); // dragstart,dragenter,dragover,drag,drop,dragend holder.ondragover = function () { $(this).css("background", "#aaa"); return false; }; holder.ondragleave = function () { $(this).css("background", "#eee"); return false; }; holder.ondragend = function () { $(this).css("background", "#eee"); return false; }; holder.ondrop = function (e) { e.stopPropagation(); e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { var img = $("").attr("src", event.target.result).css("width", "100%"); $(holder).append(img); }; reader.readAsDataURL(file); return false; };
    Drop je afbeelding hier

    MDN docs
  • XHR File upload
  • GeoLocation
  • ContentEditable
    voorbeeld
    Tekst die je kan wijzigen. Ook lijsten
    • werken
    • oké
  • Muis lock
  • Volledig scherm
  • Cross-document berichten
  • Web Audio
    Web Audio Introductie
    ToneCraft

SVG

Afbeeldingen door middel van HTML elementen. Deze elementen kunnen dus ook gewoon gebeurtenissen afvangen!

Willem

Canvas 2D

Ook wel gewoon 'canvas'
voorbeeld
var canvas = $('#somecanvas')[0]; var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, 400, 400); function draw(color,rx,ry) { // Centrisch verloop rx = rx || 0; ry = ry || 0; grad = ctx.createRadialGradient(rx,ry,0,rx,ry,200); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + 0 + ')'); // assign gradients to fill ctx.fillStyle = grad; // draw 200x200 fill ctx.fillRect(0,0,400,400); } $(canvas).on("mousemove", function(event) { var x = event.pageX - $(canvas).offset().left; var y = event.pageY - $(canvas).offset().top; draw(Math.round(y), x+1, y+1); });

  • http://physicsketch.appspot.com/
  • http://mudcu.be/sketchpad/
  • http://diagramo.com/editor/editor.php UML editor
  • http://weavesilk.com/
  • http://spielzeugz.de/html5/liquid-particles.html deeltjes interactie
  • http://www.cuttherope.ie/
  • http://muro.deviantart.com/ tekenprogramma
  • http://chrome.angrybirds.com/
  • http://www.webmonkey.com/2011/08/make-waves-with-webgl-demo-water/ water demo
  • http://9elements.com/io/projects/html5/canvas/ cirkels in kleur

    • Praktische toepassingen HTML5

    • HTML: Forms
    • HTML: Zoekmachines
    • CSS3: Grafische aankleding, snelheid
    • Javascript: Front-end los van de achterkant, offline
    • Javascript: Realtime communicatie
    • Javascript: Integratie met apparaat
    • SVG: Grafieken
    • Canvas: Grafische effecten, Tekencanvas, Spelletjes

    HTML5 & Mobiel

    • Responsive design
    • Phonegap

    Toekomst HTML5

    • WebRTC
    • Sandboxing / code bescherming
    • En wat gebruikers dan ook willen hebben...

    Vragen & discussie

    ...