Html5 jeugdwerknet
-
Upload
hans-rossel -
Category
Technology
-
view
1.777 -
download
0
Transcript of Html5 jeugdwerknet
![Page 2: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/2.jpg)
GESCHIEDENIS
![Page 3: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/3.jpg)
Geschiedenis
●Nineties: Browser wars: IE vs Netscape: EEE●1998: Webstandaarden: W3C & WaSP●2001: Van tabellen naar layers en css●2004: WHATWG Community: ontevreden over richting van XHTML, W3C heeft geen voeling meer met realiteit, XHTML2 niet backwards compatible●2006: Tim Berners Lee (W3C) stopt ontwikkeling XHTML2.
![Page 4: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/4.jpg)
HTML5
![Page 5: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/5.jpg)
HTML5: Basis
✔WHATWG voegt Web Forms 2.0 en Web Apps 1.0 samen tot HTML5.✔Bestaande content ondersteunen (backwards compatible)✔Het wiel niet opnieuw uitvinden (bestaande gebruiken bevestigen).✔Error handling (beschrijven hoe browsers dit moeten doen)✔Vereenvoudigen van syntax (en opnieuw toelaten van "lelijke" code)
![Page 6: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/6.jpg)
Vereenvoudigen
<!DOCTYPE html><meta charset="UTF-8"><script src="script.js"></script><link rel="stylesheet" href="style.css">
![Page 8: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/8.jpg)
Layout structuur
Divs hebben geen semantische betekenis => schermlezers en robotten kunnen niet interpreteren wat bv hoofdnavigatie is
Google studie toonde aan dat vaak dezelfde div classes werden gebruikt
Outline is niet meer correct als een blogpost via feed wordt opgenomen op andere pagina (bv 2x h1)
![Page 9: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/9.jpg)
Layout structuur
![Page 10: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/10.jpg)
Section en Article
<article> = Een op zich staand deel van het document
<section> = Om artikel op te splitsen in delen
![Page 13: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/13.jpg)
HTML5 Forms
![Page 14: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/14.jpg)
<input> type date
<label for="meeting">Meeting Date : </label><input id="meeting" type="date" value="2011-01-13"/>
![Page 15: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/15.jpg)
<input> type date, month, ...
![Page 16: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/16.jpg)
<input type=”email”>
<input id="email" type="email" />
![Page 17: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/17.jpg)
<input type=”url”>
<input id="website" type="url" />
![Page 18: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/18.jpg)
<input type=”tel”>
<input id="telefoon" type="tel" />
![Page 19: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/19.jpg)
<input type=”search”>
<label for="zoeken">Zoek naar : </label><input id="zoeken" type="search" placeholder="Orange">
![Page 20: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/20.jpg)
<input type=”range”>
<input type=”range” min=”1” max=”10” name=”hoogte” />input[type=range]::before {content: attr(min);}input[type=range]::after {content: attr(max);}
Aanpasbaar: http://jsfiddle.net/BNm8j/277
![Page 21: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/21.jpg)
Video
<video controls height="360" poster="/files/vakantie.jpg" width="640"> <source src="/files/vakantie.mp4" type="video/mp4" /> <source src="/files/vakantie.webm" type="video/webm" /> <!-- steek hier de Flash embed/object voor IE 6/7/8 --> <p>Je browser ondersteunt geen video, <a href="vakantie.mp4">download de video</a>.</p></video>
![Page 22: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/22.jpg)
Video browser ondersteuning
Bron: http://fronteers.nl/blog/2011/12/html5-video-een-overzicht
![Page 23: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/23.jpg)
AudioMeer info: http://html5doctor.com/native-audio-in-the-browser
<audio controls preload="auto" autobuffer> <source src="vakantie.mp3" /> <source src="vakantie.ogg" /> <!-- steek hier de Flash embed/object voor IE 6/7/8 --> <p>Je browser ondersteunt geen audio, <a href="vakantie.mp3">download de audio</a>.</p></audio>
![Page 24: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/24.jpg)
<Canvas>
Flash killer?
Gelijkt op img tag maar dan dynamisch aanpasbaar via javascriptProblemen met accessibilityNiet zo flexibel DOM wijzigen als svgWerkt met pixels: telkens overschrijven dus cpu intensief
![Page 25: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/25.jpg)
Canvas: toepassingen
Games:http://www.relfind.com/game/magician.htmlhttp://www.canvasdemos.com/
Grafieken: http://www.rgraph.net/examples/index.html
![Page 27: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/27.jpg)
Offline: cache manifest
<html manifest=”jeugdwerknet.manifest”>
jeugdwerknet.manifest bevatCACHE MANIFEST
index.htmljeugdwerknet.js
jeugdwerknet.css
5MB storage bruikbaar op clientOpgelet met updaten: cache clearen niet eenvoudig
Meer info en code:http://www.html5rocks.com/en/tutorials/appcache/beginner
![Page 28: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/28.jpg)
HTML5 storage
Data Storage: - localstorage (5MB)- sessionstorage- Web SQL database API
![Page 31: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/31.jpg)
http://html5test.com/results.html
![Page 32: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/32.jpg)
http://www.caniuse.com
![Page 33: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/33.jpg)
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
![Page 34: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/34.jpg)
HTML5 in Drupal CMS
HTML5 Themes: HTML5_base, Omega, Adaptivetheme, Zen5
http://drupal.org/project/html5_tools
http://groups.drupal.org/html5
![Page 35: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/35.jpg)
CSS3
![Page 36: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/36.jpg)
text-shadow
p {text-shadow: 1px 1px 2px #999;}
![Page 37: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/37.jpg)
border-radius
.foo {border-radius: 10px;}
![Page 38: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/38.jpg)
Multiple backgrounds
body {background: url(image1.png) no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;}
![Page 39: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/39.jpg)
Opacity
.foo {opacity: 0.5; /* .foo will be 50% transparent */}
.foo {color: rgba(0, 0, 0, 0.75); /* black at 75% opacity */}
![Page 40: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/40.jpg)
Multi columnshttp://www.css3.info/preview/multi-column-layout/
column-count: 3; column-gap: 1em; column-rule: 1px solid black;
![Page 41: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/41.jpg)
http://trentwalton.com
.article_title span { background-attachment: scroll, scroll; background-clip: border-box, border-box; background-color: transparent; background-image: url("/wp-content/uploads/2011/11/orange_tag.png"), url("/wp-content/uploads/2011/11/cardbg.png"); background-origin: padding-box, padding-box; background-position: center 112%, center top; background-repeat: no-repeat, no-repeat; background-size: 175% auto; box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.75); color: #FFFFFF; display: inline-block; padding: 0.28em 0.13em 0.11em; position: absolute; text-align: center;}
![Page 42: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/42.jpg)
CSS3 Transitions
#id_of_element {-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;
}
![Page 43: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/43.jpg)
CSS3 transitionshttp://webdesignerwall.com/trends/47-amazing-css3-animation-demos
![Page 44: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/44.jpg)
CSS3http://lea.verou.me/css3-secrets
http://lea.verou.me/css3-secrets
![Page 45: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/45.jpg)
@font-facehttp://paulirish.com/2009/bulletproof-font-face-implementation-syntax
@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url("GraublauWeb.woff") format("woff"), url("GraublauWeb.otf") format("opentype"), url("GraublauWeb.svg#grablau") format("svg"); } @media screen and (max-device-width: 480px) { @font-face { font-family: "Graublau Web"; src: url("GraublauWeb.woff") format("woff"), url("GraublauWeb.otf") format("opentype"), url("GraublauWeb.svg#grablau") format("svg"); }}
![Page 46: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/46.jpg)
http://www.fontsquirrel.com/fontface/generator
![Page 47: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/47.jpg)
Google Fontshttp://www.google.com/webfonts
![Page 49: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/49.jpg)
https://typekit.com
![Page 50: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/50.jpg)
Opgelet: Keuze webfontprovider
![Page 51: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/51.jpg)
Vendor prefixeshttp://leaverou.github.com/prefixfree
div.coolEffect { -webkit-transition-property: opacity; -webkit-transition-duration: 2s; -o-transition-property: opacity; -o-transition-duration: 2s; -moz-transition-property: opacity; -moz-transition-duration: 2s; -ms-transition-property: opacity; -ms-transition-duration: 2s; transition-property: opacity; /* op het einde!! */ transition-duration: 2s;}
![Page 53: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/53.jpg)
RESPONSIVE WEBDESIGN
![Page 54: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/54.jpg)
![Page 55: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/55.jpg)
![Page 56: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/56.jpg)
Mobiele website
● Native App:● Toegang tot camera, accelerometer● Niet linkbaar vanaf site, vindbaar vanaf google● Steeds meer platformen
● Web App● Platform/Toestelonafhankelijk● Linkbaar, social media, google, audience…● Mobiele browsers steeds meer mogelijkheden en toegang tot
device zaken● Geen flash, hover● Futureproof
![Page 57: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/57.jpg)
http://www.alistapart.com/articles/responsive-web-design
![Page 58: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/58.jpg)
![Page 60: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/60.jpg)
Responsive Webdesign
•Fluid width•Flexible images•Media queries
![Page 61: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/61.jpg)
Opgelet!
● Screensize ≠ Internet snelheid● Screensize ≠ Situatie● Wat is mobiel?
● Ipad/iphone in bed● Laptop op mifi● Blog lezen op Android in trein● Netbook
![Page 62: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/62.jpg)
Testen Mobiel
1. Device● wurfl, aantal, iOS5 op iphone1 & 1500$)2. Browser (browscap, aantal, futureproof?)3. Capabilities (modernizr & media queries)
![Page 63: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/63.jpg)
http://mediaqueri.es/
![Page 64: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/64.jpg)
Media queries
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
<link rel="stylesheet" href="layout.css" media="screen and (min-width:400px)" />
![Page 65: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/65.jpg)
Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
![Page 66: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/66.jpg)
Orientatie
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
![Page 67: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/67.jpg)
Breakpoints
320px (1col, iphone portret)
480px (2col, iphone landscape)
768px (3col, ipad portret)
1024px (4col, ipad landcape, oude pc)
![Page 68: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/68.jpg)
IE<9: https://github.com/scottjehl/Respond
![Page 69: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/69.jpg)
Mobile first
Maak fluid 1 koloms basisversie voor mobiele toestellen
Voeg media queries toe voor de grotere toestellen
Progressive Enhancement
![Page 70: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/70.jpg)
Progressive Enhancement
@media(min-width:480px) { /* from now on white & 2 columns */ }@media(min-width:768px) { /* from now on 3 columns */ }@media(max-width:1024px) { /* from now on black & 4 columns */ }/* all the way up... */
![Page 72: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/72.jpg)
Fluid images
![Page 73: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/73.jpg)
Flexible images code
img.full,object.full,.main img,.main object { width: 100%;}
Kwaliteitsprobleem met IE6/7http://unstoppablerobotninja.com/entry/fluid-images (script dat dit fixt: http://unstoppablerobotninja.com/demos/resize/imgSizer.js)
![Page 74: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/74.jpg)
Responsive imageshttp://filamentgroup.com/examples/responsive-images
Lees meer: http://www.cloudfour.com/responsive-imgs
![Page 75: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/75.jpg)
Responsive Carouselhttp://tympanus.net/Development/Elastislide
![Page 77: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/77.jpg)
Responsive teksthttp://fittextjs.com
![Page 78: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/78.jpg)
Responsive tekstDemo: http://www.strangenative.com/foldup
Code: http://letteringjs.com
![Page 79: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/79.jpg)
Responsive LayoutDemo: http://www.aarontolley.co.uk/
Code: http://isotope.metafizzy.co
![Page 80: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/80.jpg)
Responsive Tableshttp://css-tricks.com/9096-responsive-data-tables
Demo: http://css-tricks.com/examples/ResponsiveTables/responsive.php
![Page 81: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/81.jpg)
Hybrid: jquery mobile + responsiveDemo: http://scottjehl.com/dconstruct/code/FlipPics-5-final
Code: https://github.com/scottjehl/FlipPics
![Page 82: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/82.jpg)
SVG: Scalable vector graphics
●Geen pixels●Altijd scherp
●Inkscape (Open Source software)●Kleine file
●Schaalbaar●http://raphaeljs.com/
![Page 83: Html5 jeugdwerknet](https://reader034.fdocuments.us/reader034/viewer/2022052523/5555c978d8b42aaf158b497a/html5/thumbnails/83.jpg)
En verder ook nog...
Design in the browserResponsive css grids, …LESS, SASS, eCSStender