Html5 jeugdwerknet

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: 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=”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" />  <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" />  <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

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

Html5 jeugdwerknet

by Hans Rossel

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 192

Statistics

Html5 jeugdwerknet Presentation Transcript

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