GESCHIEDENIS
RICH MEDIA
WEB FORMS 2.0
SEMANTICS
HTML5 VANDAAG
FIREFOX OS
Slide 8
Slide 8 text
GESCHIEDENIS
Slide 9
Slide 9 text
HTML (HyperText Markup Language) is de universele taal van het
wereldwijde web.
Slide 10
Slide 10 text
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).
Slide 11
Slide 11 text
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.
Slide 12
Slide 12 text
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)
Slide 13
Slide 13 text
HTML5 “Candidate Recommendation” (CR) in 2012.
HTML5 “Proposed Recommendation” (PR) in 2022.
Slide 14
Slide 14 text
HTML5 is voortzetting van HTML 4.01.
Slide 15
Slide 15 text
Vereenvoudiging
Slide 16
Slide 16 text
HTML 4.01
Slide 17
Slide 17 text
HTML5
Slide 18
Slide 18 text
HTML 4.01
Slide 19
Slide 19 text
XHTML 1
Slide 20
Slide 20 text
HTML5
Slide 21
Slide 21 text
HTML5 Demo's
HTML5 demo's en voorbeelden
html5demos.com
Slide 22
Slide 22 text
RICH MEDIA
Slide 23
Slide 23 text
Canvas
Slide 24
Slide 24 text
Het canvas element is een variabele om dynamische afbeeldingen
te creeëren.
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
Slide 25
Slide 25 text
Audio
Slide 26
Slide 26 text
Een audio bestand in een webpagina plaatsen.
Slide 27
Slide 27 text
Video
Slide 28
Slide 28 text
Een video bestand in een webpagina plaatsen.
Slide 29
Slide 29 text
Browser controls
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
WEB FORMS 2.0
Slide 32
Slide 32 text
Momenteel beperkte ondersteuning in browsers.
Slide 33
Slide 33 text
Placeholder
Plaatst tekst in een veld.
Uw hobbies
Slide 34
Slide 34 text
Autofocus
Plaatst cursor in een veld.
Deel uw laatste nieuws ...
Slide 35
Slide 35 text
Required
Verplicht u om het veld in te vullen.
Uw wachtwoord
Slide 36
Slide 36 text
Autocomplete
Automatisch aanvullen van velden.
Slide 37
Slide 37 text
Datalist
Mengt een input met een select.
Mijn wereld
Slide 38
Slide 38 text
Input types
Slide 39
Slide 39 text
HTML 4.01
Slide 40
Slide 40 text
Het type attribuut wordt uitgebreid in HTML5.
Slide 41
Slide 41 text
Contact informatie
Slide 42
Slide 42 text
Email in Opera
Slide 43
Slide 43 text
Email op iPhone
Slide 44
Slide 44 text
URL op iPhone
Slide 45
Slide 45 text
Tel op iPhone en Android
Slide 46
Slide 46 text
Zoeken
Slide 47
Slide 47 text
Search in Safari
Slide 48
Slide 48 text
Search op iPhone
Slide 49
Slide 49 text
Sliders en spinners
Slide 50
Slide 50 text
Number in Opera
Slide 51
Slide 51 text
Number op iPhone en Android
Slide 52
Slide 52 text
Range in Chrome
Slide 53
Slide 53 text
Datum en tijd
Slide 54
Slide 54 text
Date in Opera
Slide 55
Slide 55 text
Datetime in Opera
Slide 56
Slide 56 text
Datetime-local in Opera
Slide 57
Slide 57 text
Month in Opera
Slide 58
Slide 58 text
Week in Opera
Slide 59
Slide 59 text
Time in Opera
Slide 60
Slide 60 text
Kleurkiezer
Momenteel enkel in Chrome en Opera.
Slide 61
Slide 61 text
Color in Windows XP
Slide 62
Slide 62 text
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.
Slide 63
Slide 63 text
SEMANTICS
Slide 64
Slide 64 text
De semantiek of betekenisleer is een wetenschap die zich
bezighoudt met de betekenis van symbolen.
Slide 65
Slide 65 text
Enkele nieuwe elementen die geïntroduceerd worden.
Slide 66
Slide 66 text
Nieuwe elementen
Slide 67
Slide 67 text
Mark
Markeren van een woord of zin in bv. zoekresultaten.
Zoekresultaten voor 'CGC'
De computerclub voor iedereen is CGC
Slide 68
Slide 68 text
Time
Tijd, dagen, weken en jaar aanduiding.
Slide 69
Slide 69 text
Meter
Iets dat al gemeten is.
9 van de 10 katten
9 katten
Slide 70
Slide 70 text
Progress
Vooruitgang of iets dat bezig is te meten.
Uw profiel is 60 % compleet.
Slide 71
Slide 71 text
Structuur
Slide 72
Slide 72 text
Gaat over inhoud, niet over plaats!
Slide 73
Slide 73 text
Header
Bevat inleidende inhoud of navigatie.
Een mooie presentatie
De presentatie over HTML5.
Slide 74
Slide 74 text
Footer
Informatie over het bevattende element.
Een mooie presentatie
De presentatie over HTML5.
Door Gregory
Slide 75
Slide 75 text
Aside
Inhoud dat los staat van de hoofdinhoud.
Presentaties
Modernizr
Detectie van o.a. input types, audio, video en canvas.
Geen HTML5 Shiv script nodig.
modernizr.com
Slide 84
Slide 84 text
Validatie
Slide 85
Slide 85 text
Validator.nu
Living Validator
validator.nu
Slide 86
Slide 86 text
W3C Validator
W3C Markup Validation Service (gebruikt Validator.nu parser)
validator.w3.org
Slide 87
Slide 87 text
FIREFOX OS
Slide 88
Slide 88 text
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.
Slide 89
Slide 89 text
Firefox OS werd al gedemonstreerd op Android-compatibele
smartphones en op de Raspberry Pi.