HTML5

HTML5 CGC, 25 mei 2013

Mijn naam is Gregory

Webdesign en grafisch ontwerp www.desikn.be

@desiknr

GESCHIEDENIS RICH MEDIA WEB FORMS 2.0 SEMANTICS HTML5 VANDAAG FIREFOX
OS

GESCHIEDENIS

HTML (HyperText Markup Language) is de universele taal van het
wereldwijde web.

Sir Tim Berners-Lee schreef in 1991 een document “HTML Tags”,
waarin minder dan een dozijn elementen beschreven werd om webpagina's te maken. Tags bestonden al in SGML (Standard Generalized Markup Language).

Van HTML, HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0
tot HTML 4.01 in 1999. XHTML 1 was HTML als XML, maar Internet Explorer ondersteunde geen XHTML mime-type. XHTML 2 was de toekomst.

XHTML 2 en HTML 5 (met spatie) werden ontwikkeld door
W3C. HTML5 (zonder spatie) werd ontwikkeld door WHATWG. World Wide Web Consortium (W3C) Web Hypertext Application Technology Working Group (WHATWG)

HTML5 “Candidate Recommendation” (CR) in 2012. HTML5 “Proposed Recommendation” (PR)
in 2022.

HTML5 is voortzetting van HTML 4.01.

Vereenvoudiging

HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="file.js"></script> <link
rel="stylesheet" type="text/css" href="file.css">

HTML5 <meta charset="UTF-8"> <script src="file.js"></script> <link rel="stylesheet" href="file.css">

HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 <!DOCTYPE html>

HTML5 Demo's HTML5 demo's en voorbeelden html5demos.com

RICH MEDIA

Canvas

Het canvas element is een variabele om dynamische afbeeldingen te
creeëren. <canvas id=”mijn-eerste-canvas” width=”320” height”240”></canvas> De inhoud kan op ieder moment geüpdatet worden via JavaScript. Ideaal voor tools en games die vroeger een plugin zoals bv. Flash nodig hadden. speckyboy.com/2011/12/07/20-amazing-implementations-of-html5-canvas

Een audio bestand in een webpagina plaatsen. <audio src=”mijn-audio-bestand.ogg” loop
controls></audio> <audio autoplay loop controls> <source src=”mijn-audio-bestand.ogg”> <source src=”mijn-audio-bestand.mp3”> </audio>

Een video bestand in een webpagina plaatsen. <video src=”mijn-video-bestand.webm” controls
width=”320” height=”240”></video> <video autoplay controls width=”320” height=”240” poster=”mijn-video-poster.jpg”> <source src=”mijn-video-bestand.webm”> <source src=”mijn-video-bestand.mp4”> </video>

Browser controls

WEB FORMS 2.0

Momenteel beperkte ondersteuning in browsers.

Placeholder Plaatst tekst in een veld. <label for=”hobbies”>Uw hobbies</label> <input
id=”hobbies” name=”hobbies” type=”text” placeholder=”Computerclub”>

Autofocus Plaatst cursor in een veld. <label for=”nieuws”>Deel uw laatste
nieuws ...</label> <input id=”nieuws” name=”nieuws” type=”text” autofocus>

Required Verplicht u om het veld in te vullen. <label
for=”wachtwoord”>Uw wachtwoord</label> <input id=”wachtwoord” name=”wachtwoord” type=”password” required>

Autocomplete Automatisch aanvullen van velden. <input name=”eenmalig-token” type=”text” autocomplete=”off”>

Datalist Mengt een input met een select. <label for=”wereld”>Mijn wereld</label>
<input id=”wereld” name=”wereld” type=”text” list=”planeten”> <datalist id=”planeten”> <option value=”Mercurius”> <option value=”Venus”> <option value=”Aarde”> <option value=”Mars”> <option value=”Jupiter”> <option value=”Saturnus”> <option value=”Uranus”> <option value=”Neptunus”> </datalist>

Input types

HTML 4.01 <input id=”naam” name=”naam” type=”text”> <input id=”wachtwoord” name=”wachtwoord” type=”password”>
<input id=”keuze” name=”keuze” type=”radio”> <input id=”keuze” name=”keuze” type=”checkbox”> <input id=”annuleren” name=”annuleren” type=”reset”> <input id=”versturen” name=”versturen” type=”submit”>

Het type attribuut wordt uitgebreid in HTML5.

Contact informatie <input id=”e-mail” name=”e-mail” type=”email”> <input id=”website” name=”website” type=”url”>
<input id=”telefoon” name=”telefoon” type=”tel”>

Email in Opera

Email op iPhone

URL op iPhone

Tel op iPhone en Android

Zoeken <input id=”zoeken” name=”zoeken” type=”search”>

Search in Safari

Search op iPhone

Sliders en spinners <input id=”aantal” name=”aantal” type=”range”> <input id=”aantal” name=”aantal”
type=”number”>

Number in Opera

Number op iPhone en Android

Range in Chrome

Datum en tijd <input id=”datum” name=”datum” type=”date”> <input id=”datum” name=”datum”
type=”datetime”> <input id=”datum” name=”datum” type=”datetime-local”> <input id=”datum” name=”datum” type=”month”> <input id=”datum” name=”datum” type=”week”> <input id=”datum” name=”datum” type=”time”>

Date in Opera

Datetime in Opera

Datetime-local in Opera

Month in Opera

Week in Opera

Time in Opera

Kleurkiezer <input id=”kleur” name=”kleur” type=”color”> Momenteel enkel in Chrome en
Opera.

Color in Windows XP

Kan je input types een eigen stijl geven? Nee. Zou
je input types een eigen stijl moeten geven? Nee, het internet gaat niet over controle.

SEMANTICS

De semantiek of betekenisleer is een wetenschap die zich bezighoudt
met de betekenis van symbolen.

Enkele nieuwe elementen die geïntroduceerd worden.

Nieuwe elementen

Mark Markeren van een woord of zin in bv. zoekresultaten.
<h1>Zoekresultaten voor 'CGC'</h1> <ol> <li>De computerclub voor iedereen is <mark>CGC</mark></i> </ol>

Time Tijd, dagen, weken en jaar aanduiding. <time datetime=”2013-05-25”>25 mei
2013</time>

Meter Iets dat al gemeten is. <meter>9 van de 10
katten</meter> <meter max=”10”>9 katten</meter>

Progress Vooruitgang of iets dat bezig is te meten. Uw
profiel is <progress>60 %</progress> compleet. <progress min=”0” max=”100” value=”60”></progress>

Structuur

Gaat over inhoud, niet over plaats!

Header Bevat inleidende inhoud of navigatie. <section> <header> <h1>Een mooie
presentatie</h1> </header> <p>De presentatie over HTML5.</p> </section>

Footer Informatie over het bevattende element. <section> <header> <h1>Een mooie
presentatie</h1> </header> <p>De presentatie over HTML5.</p> <footer> <p>Door Gregory</p> </footer> </section>

Aside Inhoud dat los staat van de hoofdinhoud. <aside>Presentaties</aside>

Nav Navigatie. <nav> <ul> <li><a href=”http://cgcvzw.be/”>Home</a></li> <li><a href=”presentaties”>Presentaties</a></li> <li><a href=”over-ons”>Over
ons</a></li> <li><a href=”contact”>Contact</a></li> </ul> </nav>

Section Gelijkaardig gerelateerde inhoud. <section> <header> <h1>Een mooie presentatie</h1> </header>
<p>De presentatie over HTML5.</p> <footer> <p>Door Gregory</p> </footer> </section>

Article Gelijkaardig gerelateerde vrijstaande inhoud. Verschil met section? Interpretatie! <article>
<header> <h1>Een mooie presentatie</h1> </header> <p>De presentatie over HTML5.</p> <footer> <p>Gepubliceerd <time date=”2013-05-25” pubdate>Zaterdag, 25 mei 2013</time> Door Gregory</p> </footer> </article>

HTML5 VANDAAG

Styling

HTML5 Shiv / HTML5 Shim  code.google.com/p/html5shim

Detectie

Modernizr Detectie van o.a. input types, audio, video en canvas.
Geen HTML5 Shiv script nodig. modernizr.com

Validatie

Validator.nu Living Validator validator.nu

W3C Validator W3C Markup Validation Service (gebruikt Validator.nu parser) validator.w3.org

FIREFOX OS

Firefox OS Opensourcebesturingssysteem voor smartphones en tabletcomputers ontwikkeld door Mozilla.
Het is gebaseerd op Linux en is zo ontworpen dat HTML5-applicaties direct kunnen integreren met de hardware met behulp van JavaScript.

Firefox OS werd al gedemonstreerd op Android-compatibele smartphones en op
de Raspberry Pi.

Firefox OS screenshot

Geeksphone

Spaanse startup die smartphones produceert.

Keon 1GHz Qualcomm S1 Cortex A5-SoC (singlecore-processor) RAM 512MB Capaciteit
4GB 3,5"-touchscreen Resolutie 480x320 pixels € 91

Peak 1,2GHz Qualcomm Snapdragon S4-SoC (dualcore-processor) RAM 512MB Capaciteit 4GB
4,3"-touchscreen (IPS) Resolutie 960x540 pixels (16:9) € 149

Geeksphone Keon en Peak

Dank u voor uw aandacht!

Bronnen HTML5 for Web Designers (Jeremy Keith) Wikipedia (www.wikipedia.org) W3
Schools (www.w3schools.com) HTML5 Doctor (www.html5doctor.com)

HTML5

HTML5

More Decks by Desikner

Other Decks in Technology

Featured

Transcript