![<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](https://image.slidesharecdn.com/html5-jeugdwerknet-111206054719-phpapp01/85/Html5-jeugdwerknet-20-320.jpg)
Html5 jeugdwerknet
- 1. HTML5 CSS3 RESPONSIVE DESIGN hans.rossel@koba.be Twitter: @haro Jeugdwerknet 6/12/2011
- 2. GESCHIEDENIS
- 3. 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.
- 4. HTML5
- 5. 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)
- 6. Vereenvoudigen <!DOCTYPE html> <meta charset="UTF-8"> <script src="script.js"></script> <link rel="stylesheet" href="style.css">
- 8. 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)
- 10. Section en Article <article> = Een op zich staand deel van het document <section> = Om artikel op te splitsen in delen
- 13. HTML5 Forms
- 14. <input> type date <label for="meeting">Meeting Date : </label> <input id="meeting" type="date" value="2011-01-13"/>
- 15. <input> type date, month, ...
- 16. <input type=”email”> <input id="email" type="email" />
- 17. <input type=”url”> <input id="website" type="url" />
- 18. <input type=”tel”> <input id="telefoon" type="tel" />
- 19. <input type=”search”> <label for="zoeken">Zoek naar : </label> <input id="zoeken" type="search" placeholder="Orange">
- 20. <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
- 21. 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>
- 22. Video browser ondersteuning Bron: http://fronteers.nl/blog/2011/12/html5-video-een-overzicht
- 23. Audio Meer 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>
- 24. <Canvas> Flash killer? Gelijkt op img tag maar dan dynamisch aanpasbaar via javascript Problemen met accessibility Niet zo flexibel DOM wijzigen als svg Werkt met pixels: telkens overschrijven dus cpu intensief
- 27. Offline: cache manifest <html manifest=”jeugdwerknet.manifest”> jeugdwerknet.manifest bevat CACHE MANIFEST index.html jeugdwerknet.js jeugdwerknet.css 5MB storage bruikbaar op client Opgelet met updaten: cache clearen niet eenvoudig Meer info en code: http://www.html5rocks.com/en/tutorials/appcache/beginner
- 28. HTML5 storage Data Storage: - localstorage (5MB) - sessionstorage - Web SQL database API
- 34. HTML5 in Drupal CMS HTML5 Themes: HTML5_base, Omega, Adaptivetheme, Zen5 http://drupal.org/project/html5_tools http://groups.drupal.org/html5
- 35. CSS3
- 36. text-shadow p{ text-shadow: 1px 1px 2px #999; }
- 38. 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; }
- 39. Opacity .foo { opacity: 0.5; /* .foo will be 50% transparent */ } .foo { color: rgba(0, 0, 0, 0.75); /* black at 75% opacity */ }
- 40. Multi columns http://www.css3.info/preview/multi-column-layout/ column-count: 3; column-gap: 1em; column-rule: 1px solid black;
- 41. 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; }
- 42. 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; }
- 43. CSS3 transitions http://webdesignerwall.com/trends/47-amazing-css3-animation-demos
- 45. @font-face http://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"); }}
- 51. Vendor prefixes http://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; }
- 56. 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
- 60. Responsive Webdesign Fluid width • Flexible images • Media queries •
- 61. Opgelet! ● Screensize ≠ Internet snelheid ● Screensize ≠ Situatie ● Wat is mobiel? ● Ipad/iphone in bed ● Laptop op mifi ● Blog lezen op Android in trein ● Netbook
- 62. Testen Mobiel 1. Device ● wurfl, aantal, iOS5 op iphone1 & 1500$) 2. Browser (browscap, aantal, futureproof?) 3. Capabilities (modernizr & media queries)
- 64. 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)" />
- 65. Viewport <meta name="viewport" content="width=device-width, initial-scale=1.0"> http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
- 66. Orientatie <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
- 67. Breakpoints 320px (1col, iphone portret) 480px (2col, iphone landscape) 768px (3col, ipad portret) 1024px (4col, ipad landcape, oude pc)
- 69. Mobile first Maak fluid 1 koloms basisversie voor mobiele toestellen Voeg media queries toe voor de grotere toestellen Progressive Enhancement
- 70. 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... */
- 72. Fluid images
- 73. Flexible images code img.full, object.full, .main img, .main object { width: 100%; } Kwaliteitsprobleem met IE6/7 http://unstoppablerobotninja.com/entry/fluid-images (script dat dit fixt: http://unstoppablerobotninja.com/demos/resize/imgSizer.js)
- 74. Responsive images http://filamentgroup.com/examples/responsive-images Lees meer: http://www.cloudfour.com/responsive-imgs
- 78. Responsive tekst Demo: http://www.strangenative.com/foldup Code: http://letteringjs.com
- 79. Responsive Layout Demo: http://www.aarontolley.co.uk/ Code: http://isotope.metafizzy.co
- 80. Responsive Tables http://css-tricks.com/9096-responsive-data-tables Demo: http://css-tricks.com/examples/ResponsiveTables/responsive.php
- 81. Hybrid: jquery mobile + responsive Demo: http://scottjehl.com/dconstruct/code/FlipPics-5-final Code: https://github.com/scottjehl/FlipPics
- 82. SVG: Scalable vector graphics ● Geen pixels ●Altijd scherp ●Inkscape (Open Source software) ●Kleine file ●Schaalbaar ●http://raphaeljs.com/
- 83. En verder ook nog... Design in the browser Responsive css grids, … LESS, SASS, eCSStender
- 84. Bedankt Hans.rossel@koba.be Twitter: @haro Www.koba.be