Html5 jeugdwerknet

1,892
-1

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,892
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 jeugdwerknet

  1. 1. HTML5 CSS3RESPONSIVE DESIGN hans.rossel@koba.be Twitter: @haro Jeugdwerknet 6/12/2011
  2. 2. GESCHIEDENIS
  3. 3. Geschiedenis●Nineties: Browser wars: IE vs Netscape: EEE●1998: Webstandaarden: W3C & WaSP●2001: Van tabellen naar layers en css●2004: WHATWG Community: ontevreden overrichting van XHTML, W3C heeft geen voelingmeer met realiteit, XHTML2 niet backwardscompatible●2006:Tim Berners Lee (W3C) stopt ontwikkeling XHTML2.
  4. 4. HTML5
  5. 5. HTML5: Basis✔WHATWG voegt Web Forms 2.0 en Web Apps1.0 samen tot HTML5.✔Bestaande content ondersteunen (backwardscompatible)✔Het wiel niet opnieuw uitvinden (bestaandegebruiken bevestigen).✔Error handling (beschrijven hoe browsers ditmoeten doen)✔Vereenvoudigen van syntax (en opnieuwtoelaten van "lelijke" code)
  6. 6. Vereenvoudigen<!DOCTYPE html><meta charset="UTF-8"><script src="script.js"></script><link rel="stylesheet" href="style.css">
  7. 7. HTML5 ElementsBron: http://html5doctor.com/article-archive
  8. 8. Layout structuurDivs hebben geen semantische betekenis =>schermlezers en robotten kunnen nietinterpreteren wat bv hoofdnavigatie isGoogle studie toonde aan dat vaak dezelfde divclasses werden gebruiktOutline is niet meer correct als een blogpost viafeed wordt opgenomen op andere pagina (bv 2xh1)
  9. 9. Layout structuur
  10. 10. Section en Article<article> = Een op zich staand deel van hetdocument<section> = Om artikel op te splitsen in delen
  11. 11. HTML5 Outlinerhttp://gsnedders.html5.org/outliner
  12. 12. Internet Explorer 6/7/8http://code.google.com/p/html5shiv
  13. 13. HTML5 Forms
  14. 14. <input> type date<label for="meeting">Meeting Date : </label><input id="meeting" type="date" value="2011-01-13"/>
  15. 15. <input> type date, month, ...
  16. 16. <input type=”email”><input id="email" type="email" />
  17. 17. <input type=”url”><input id="website" type="url" />
  18. 18. <input type=”tel”><input id="telefoon" type="tel" />
  19. 19. <input type=”search”><label for="zoeken">Zoek naar : </label><input id="zoeken" type="search" placeholder="Orange">
  20. 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. 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, <ahref="vakantie.mp4">download de video</a>.</p></video>
  22. 22. Video browser ondersteuningBron: http://fronteers.nl/blog/2011/12/html5-video-een-overzicht
  23. 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, <ahref="vakantie.mp3">download de audio</a>.</p></audio>
  24. 24. <Canvas>Flash killer?Gelijkt op img tag maar dan dynamischaanpasbaar via javascriptProblemen met accessibilityNiet zo flexibel DOM wijzigen als svgWerkt met pixels: telkens overschrijven dus cpuintensief
  25. 25. Canvas: toepassingenGames:http://www.relfind.com/game/magician.htmlhttp://www.canvasdemos.com/Grafieken:http://www.rgraph.net/examples/index.html
  26. 26. Geolocation apihttp://html5demos.com/geo
  27. 27. Offline: cache manifest <html manifest=”jeugdwerknet.manifest”> jeugdwerknet.manifest bevat CACHE MANIFEST index.html jeugdwerknet.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
  28. 28. HTML5 storageData Storage:- localstorage (5MB)- sessionstorage- Web SQL database API
  29. 29. HTML5 Demoshttp://html5demos.com
  30. 30. HTML5 Boilerplatehttp://html5boilerplate.com
  31. 31. http://html5test.com/results.html
  32. 32. http://www.caniuse.com
  33. 33. http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
  34. 34. HTML5 in Drupal CMSHTML5 Themes: HTML5_base, Omega,Adaptivetheme, Zen5http://drupal.org/project/html5_toolshttp://groups.drupal.org/html5
  35. 35. CSS3
  36. 36. text-shadowp{text-shadow: 1px 1px 2px #999;}
  37. 37. border-radius.foo {border-radius: 10px;}
  38. 38. Multiple backgroundsbody {background: url(image1.png) no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;}
  39. 39. Opacity.foo {opacity: 0.5; /* .foo will be 50% transparent */}.foo {color: rgba(0, 0, 0, 0.75); /* black at 75% opacity */}
  40. 40. Multi columns http://www.css3.info/preview/multi-column-layout/column-count: 3;column-gap: 1em;column-rule: 1px solid black;
  41. 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. 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. 43. CSS3 transitionshttp://webdesignerwall.com/trends/47-amazing-css3-animation-demos
  44. 44. CSS3 http://lea.verou.me/css3-secretshttp://lea.verou.me/css3-secrets
  45. 45. @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");}}
  46. 46. http://www.fontsquirrel.com/fontface/generator
  47. 47. Google Fontshttp://www.google.com/webfonts
  48. 48. http://webfonts.fonts.com
  49. 49. https://typekit.com
  50. 50. Opgelet: Keuze webfontprovider
  51. 51. Vendor prefixes http://leaverou.github.com/prefixfreediv.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;}
  52. 52. Modernizrhttp://www.modernizr.com
  53. 53. RESPONSIVE WEBDESIGN
  54. 54. 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
  55. 55. http://www.alistapart.com/articles/responsive-web-design
  56. 56. http://twitter.com/RWD
  57. 57. Responsive WebdesignFluid width•Flexible images•Media queries•
  58. 58. Opgelet!● Screensize ≠ Internet snelheid● Screensize ≠ Situatie● Wat is mobiel? ● Ipad/iphone in bed ● Laptop op mifi ● Blog lezen op Android in trein ● Netbook
  59. 59. Testen Mobiel1. Device● wurfl, aantal, iOS5 op iphone1 & 1500$)2. Browser (browscap, aantal, futureproof?)3. Capabilities (modernizr & media queries)
  60. 60. http://mediaqueri.es/
  61. 61. 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)" />
  62. 62. Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0"> http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
  63. 63. Orientatie<link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css">
  64. 64. Breakpoints 320px (1col, iphone portret) 480px (2col, iphone landscape) 768px (3col, ipad portret)1024px (4col, ipad landcape, oude pc)
  65. 65. IE<9: https://github.com/scottjehl/Respond
  66. 66. Mobile firstMaak fluid 1 kolomsbasisversie voormobiele toestellenVoeg media queries toevoor de groteretoestellenProgressiveEnhancement
  67. 67. Progressive Enhancement@media(min-width:480px) { /* from now on white & 2columns */ }@media(min-width:768px) { /* from now on 3 columns */ }@media(max-width:1024px) { /* from now on black & 4columns */ }/* all the way up... */
  68. 68. http://stuffandnonsense.co.uk/projects/320andup
  69. 69. Fluid images
  70. 70. Flexible images codeimg.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)
  71. 71. Responsive imageshttp://filamentgroup.com/examples/responsive-images Lees meer: http://www.cloudfour.com/responsive-imgs
  72. 72. Responsive Carouselhttp://tympanus.net/Development/Elast
  73. 73. Responsive videohttp://fitvidsjs.com
  74. 74. Responsive teksthttp://fittextjs.com
  75. 75. Responsive tekstDemo: http://www.strangenative.com/foldup Code: http://letteringjs.com
  76. 76. Responsive Layout Demo: http://www.aarontolley.co.uk/ Code: http://isotope.metafizzy.co
  77. 77. Responsive Tables http://css-tricks.com/9096-responsive-data-tablesDemo: http://css-tricks.com/examples/ResponsiveTables/responsive.php
  78. 78. Hybrid: jquery mobile + responsiveDemo: http://scottjehl.com/dconstruct/code/FlipPics-5-final Code: https://github.com/scottjehl/FlipPics
  79. 79. SVG: Scalable vector graphics ● Geen pixels ●Altijd scherp ●Inkscape (Open Source software) ●Kleine file ●Schaalbaar ●http://raphaeljs.com/
  80. 80. En verder ook nog...Design in the browserResponsive css grids, …LESS, SASS, eCSStender
  81. 81. BedanktHans.rossel@koba.be Twitter: @haro Www.koba.be
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×