• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 jeugdwerknet
 

Html5 jeugdwerknet

on

  • 2,023 views

 

Statistics

Views

Total Views
2,023
Views on SlideShare
1,831
Embed Views
192

Actions

Likes
0
Downloads
24
Comments
0

2 Embeds 192

http://www.jeugdwerknet.be 187
http://jeugdwerknet.be 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5 jeugdwerknet Html5 jeugdwerknet Presentation Transcript

    • HTML5 CSS3RESPONSIVE DESIGN hans.rossel@koba.be Twitter: @haro Jeugdwerknet 6/12/2011
    • GESCHIEDENIS
    • 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.
    • HTML5
    • 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)
    • Vereenvoudigen<!DOCTYPE html><meta charset="UTF-8"><script src="script.js"></script><link rel="stylesheet" href="style.css">
    • HTML5 ElementsBron: http://html5doctor.com/article-archive
    • 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)
    • Layout structuur
    • Section en Article<article> = Een op zich staand deel van hetdocument<section> = Om artikel op te splitsen in delen
    • HTML5 Outlinerhttp://gsnedders.html5.org/outliner
    • Internet Explorer 6/7/8http://code.google.com/p/html5shiv
    • HTML5 Forms
    • <input> type date<label for="meeting">Meeting Date : </label><input id="meeting" type="date" value="2011-01-13"/>
    • <input> type date, month, ...
    • <input type=”email”><input id="email" type="email" />
    • <input type=”url”><input id="website" type="url" />
    • <input type=”tel”><input id="telefoon" type="tel" />
    • <input type=”search”><label for="zoeken">Zoek naar : </label><input id="zoeken" type="search" placeholder="Orange">
    • <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
    • 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>
    • Video browser ondersteuningBron: http://fronteers.nl/blog/2011/12/html5-video-een-overzicht
    • 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>
    • <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
    • Canvas: toepassingenGames:http://www.relfind.com/game/magician.htmlhttp://www.canvasdemos.com/Grafieken:http://www.rgraph.net/examples/index.html
    • Geolocation apihttp://html5demos.com/geo
    • 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
    • HTML5 storageData Storage:- localstorage (5MB)- sessionstorage- Web SQL database API
    • HTML5 Demoshttp://html5demos.com
    • HTML5 Boilerplatehttp://html5boilerplate.com
    • http://html5test.com/results.html
    • http://www.caniuse.com
    • http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
    • HTML5 in Drupal CMSHTML5 Themes: HTML5_base, Omega,Adaptivetheme, Zen5http://drupal.org/project/html5_toolshttp://groups.drupal.org/html5
    • CSS3
    • text-shadowp{text-shadow: 1px 1px 2px #999;}
    • border-radius.foo {border-radius: 10px;}
    • Multiple backgroundsbody {background: url(image1.png) no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;}
    • Opacity.foo {opacity: 0.5; /* .foo will be 50% transparent */}.foo {color: rgba(0, 0, 0, 0.75); /* black at 75% opacity */}
    • Multi columns http://www.css3.info/preview/multi-column-layout/column-count: 3;column-gap: 1em;column-rule: 1px solid black;
    • 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;}
    • 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;}
    • CSS3 transitionshttp://webdesignerwall.com/trends/47-amazing-css3-animation-demos
    • CSS3 http://lea.verou.me/css3-secretshttp://lea.verou.me/css3-secrets
    • @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");}}
    • http://www.fontsquirrel.com/fontface/generator
    • Google Fontshttp://www.google.com/webfonts
    • http://webfonts.fonts.com
    • https://typekit.com
    • Opgelet: Keuze webfontprovider
    • 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;}
    • Modernizrhttp://www.modernizr.com
    • RESPONSIVE WEBDESIGN
    • 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
    • http://www.alistapart.com/articles/responsive-web-design
    • http://twitter.com/RWD
    • Responsive WebdesignFluid width•Flexible images•Media queries•
    • Opgelet!● Screensize ≠ Internet snelheid● Screensize ≠ Situatie● Wat is mobiel? ● Ipad/iphone in bed ● Laptop op mifi ● Blog lezen op Android in trein ● Netbook
    • Testen Mobiel1. Device● wurfl, aantal, iOS5 op iphone1 & 1500$)2. Browser (browscap, aantal, futureproof?)3. Capabilities (modernizr & media queries)
    • http://mediaqueri.es/
    • 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)" />
    • Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0"> http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
    • Orientatie<link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css">
    • Breakpoints 320px (1col, iphone portret) 480px (2col, iphone landscape) 768px (3col, ipad portret)1024px (4col, ipad landcape, oude pc)
    • IE<9: https://github.com/scottjehl/Respond
    • Mobile firstMaak fluid 1 kolomsbasisversie voormobiele toestellenVoeg media queries toevoor de groteretoestellenProgressiveEnhancement
    • 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... */
    • http://stuffandnonsense.co.uk/projects/320andup
    • Fluid images
    • 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)
    • Responsive imageshttp://filamentgroup.com/examples/responsive-images Lees meer: http://www.cloudfour.com/responsive-imgs
    • Responsive Carouselhttp://tympanus.net/Development/Elast
    • Responsive videohttp://fitvidsjs.com
    • Responsive teksthttp://fittextjs.com
    • Responsive tekstDemo: http://www.strangenative.com/foldup Code: http://letteringjs.com
    • Responsive Layout Demo: http://www.aarontolley.co.uk/ Code: http://isotope.metafizzy.co
    • Responsive Tables http://css-tricks.com/9096-responsive-data-tablesDemo: http://css-tricks.com/examples/ResponsiveTables/responsive.php
    • Hybrid: jquery mobile + responsiveDemo: http://scottjehl.com/dconstruct/code/FlipPics-5-final Code: https://github.com/scottjehl/FlipPics
    • SVG: Scalable vector graphics ● Geen pixels ●Altijd scherp ●Inkscape (Open Source software) ●Kleine file ●Schaalbaar ●http://raphaeljs.com/
    • En verder ook nog...Design in the browserResponsive css grids, …LESS, SASS, eCSStender
    • BedanktHans.rossel@koba.be Twitter: @haro Www.koba.be