TYPO3 Congres 2011 - ROQUIN - HTML5

PIETVANDONGEN
•ROQUIN
•FRONTENDDEVELOPER/DESIGNER
•HTML,CSS,JAVASCRIPT
•TWITTER.COM/DONDERPIET
ROQUIN

1991
HTMLTAGS
(SGML+)
SIRTIMBERNERS-LEE
1994
HTML2.0
(HTML)
IETF
1999
HTML4.01
(HTML)
W3C
2000
XHTML1.0
(XMLSYNTAX)
W3C
2001
XHTML1.1
(XML)
W3C
ROQUIN

XHTML2
•W3C
•PUREXML
•NIETBACKWARDSCOMPATIBLE
2002–2006
ROQUIN

WHATWG
•WEBHYPERTEXTAPPLICATIONTECHNOLOGYWORKINGGROUP
•OPERA+APPLE+MOZILLA
2004
ROQUIN

W3C
XHTML2
MEERDERHEIDBESLIST
TRAAAAAAAAAG…
WEBFORMS2.0+WEBAPPS1.0
EINDREDACTIEBESLIST
SNEL!
(2004) WHATWG
ROQUIN

W3C
XHTML2=XHTML2+HTML5 WEBFORMS+WEBAPPS=HTML5
(2006) WHATWG
ROQUIN

W3C
XHTML2
HTML5-SPECIFICATIE
HTML5
HTML5-SPECIFICATIE
(2009) WHATWG
ROQUIN

HTML5
•2011:
•2012:
•2022:
2010-2022
SPECIFICATIONDEVELOPMENT
CANDIDATERECOMMENDATION
PROPOSEDRECOMMENDATION
ROQUIN

UITGANGSPUNTEN
•BACKWARDSCOMPATIBILITY
•VOORTBORDURENDOPBESTAANDE
•GEBRUIKERS>AUTEURS
•APPS+CONTENT
ROQUIN

KISS!
<!DOCTYPE html "PUBLIC -//W3C//DTD XHTML 1.0 S…
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/…
<meta charset="UTF-8">
<script type="text/javascript" scr="file.js"><…
<script src="file.js"></script>
<link rel="stylesheet" type="text/css" href="f…
<link rel="stylesheet" href="file.css">
ROQUIN

SYNTAX
UPPERCASEoflowercase,
"QUOTED"ofUNQUOTED,
<XXX></XXX>of<XXX/>,
HETMAAKTALLEMAALGEENREETUIT.
ROQUIN

OUD/ANDERS/NIEUW
<frame>
<frameset>
<noframes>
<acronym>
<font>
<big>
<center>
<strike>
<big>
ROQUIN

OUD/ANDERS/NIEUW
<small>: klein de kleine lettertjes
<b>: vet anders opgemaakt
<i>: schuin andere toon/sfeer
<cite>: bron titel
<a>: <a><h2>XXX… <a><h2>XXX…
ROQUIN

OUD/ANDERS/NIEUW
•RICHMEDIA
•WEBFORMS2.0
•SEMANTIEK
ROQUIN

<CANVAS>
•DYNAMISCHEAFBEELDINGEN
•JAVASCRIPT
•2D
ROQUIN

<canvas id="drawing" width="360" height="240">
<p>Een tekening</p>
<img src="tekening.jpg" alt="Tekening van iets">
</canvas>
var canvas = document.getElementById('drawing');
var content = canvas.getContext('2d');
context.strokeStyle = '#ff0099';
context.strokeRect(20, 30, 100, 50);
ROQUIN

<AUDIO>
•GELUID
•JAVASCRIPT
•MP3,OGG
ROQUIN

<audio id="player" controls preload="none">
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
<button id="audio-play">Speel af</button>
</audio>
<p>Het is een nacht…</p>
var player = $('#player')[0];
var playButton = $('#audio-play')[0];
playButton.bind('click', function() {
player.play();
});
ROQUIN

<VIDEO>
•BEWEGENDEPLOATJES
•JAVASCRIPT
•MP4,OG4
ROQUIN

<video id="player" controls width="640" height="320">
<source src="videoclip.og4" type="video/ogg">
<source src="videoclip.mp4" type="video/mp4">
<button id="video-play">Speel af</button>
<object type="application/x-shockwave-flash"…
</audio>
var player = $('#player')[0];
var playButton = $('#video-play')[0];
playButton.bind('click', function() {
player.play();
});
ROQUIN

NIEUW
• PLACEHOLDER(‘VULEENZOEKTERMIN’)
• AUTOFOCUS(METEENTYPEN)
• REQUIRED(*)
• AUTOCOMPLETE(AMS|TERDAM)
• DATALIST(SELECT+INPUTINÉÉN)
• INPUTTYPES(SEARCH,EMAIL,WEBSITE,PHONE,SLIDER,SPINNER,DATE/TIME)
ROQUIN

SUPPORT
function elementSupportsAttribute(element, attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else {
return false;
}
}
if (!elementSupportsAttribute('input', 'placeholder')) {
// Fallback-code
}
ROQUIN

VOORDELEN
•CLIENT-SIDEVALIDATIE=SNEL!
•MINDERJAVASCRIPT
•MINDEROPMAAK
•UNIFORMEINTERFACE
ROQUIN

NIEUW(TEXT-LEVEL)
<mark>belangrijk</mark>
<time datetime="2010-04-07">7 April</time>
<meter low="0" high="10" value="8">Een 8</meter>
<progress min="0" max="100" value="85">85%</progress>
ROQUIN

NIEUW(STRUCTUUR)
<section>
<header>
<footer>
<aside>
<nav>
<article>
<hgroup>
ROQUIN

MAARHOE?
•ELEMENTENALBRUIK-ENSTIJLBAAR(ZELFSINIE)
•VALIDATIEBESCHIKBAAR(http://validator.w3.org/)
•FEATUREDETECTION(MODERNIZR)
•<!DOCTYPEhtml>
ROQUIN

HTML5&TYPO3
•SINDSTYPO34.4
•TYPOSCRIPT
•bit.ly/hhjquV
ROQUIN

ROQUIN
# Set doctype
config.doctype = html5
# Remove XML prologue
config.xmlprologue = none
# Convert content <div>’s to <section>
tt_content.stdWrap.innerWrap.cObject.default {
10.value = <section id="c{field:uid}"
30.value = >|</section>
}

DEMOTIME
<canvas>
<audio>
<video>
<form>
structure
storage
pietvandongen.com/stockcharts
soundcloud.com/pietvandongen
www.youtube.com/html5
bit.ly/74wOJy
phawk.co.uk/
10k.aneventapart.com/1/Uploads/244/
ROQUIN

TYPO3 Congres 2011 - ROQUIN - HTML5

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

TYPO3 Congres 2011 - ROQUIN - HTML5