Html5 jeugdwerknet

HTML5CSS3

RESPONSIVE DESIGN

[email protected] Twitter: @haro

Jeugdwerknet 6/12/2011

mailto:[email protected]

GESCHIEDENIS

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.

http://en.wikipedia.org/wiki/Embrace,_extend_and_extinguish

http://www.webstandards.org/

http://www.csszengarden.com/

http://www.whatwg.org/

http://dig.csail.mit.edu/breadcrumbs/node/166

HTML5

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)

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

http://html5doctor.com/article-archive

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)

Layout structuur

Section en Article

<article> = Een op zich staand deel van het document

<section> = Om artikel op te splitsen in delen

HTML5 Outlinerhttp://gsnedders.html5.org/outliner

http://gsnedders.html5.org/outliner

Internet Explorer 6/7/8http://code.google.com/p/html5shiv

http://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" />  <p>Je browser ondersteunt geen video, <a href="vakantie.mp4">download de video</a>.</p></video>

Video browser ondersteuning

Bron: http://fronteers.nl/blog/2011/12/html5-video-een-overzicht

http://fronteers.nl/blog/2011/12/html5-video-een-overzicht

AudioMeer 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, <a href="vakantie.mp3">download de audio</a>.</p></audio>

http://html5doctor.com/native-audio-in-the-browser

<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

Canvas: toepassingen

Games:http://www.relfind.com/game/magician.htmlhttp://www.canvasdemos.com/

Grafieken: http://www.rgraph.net/examples/index.html

http://www.relfind.com/game/magician.html

http://www.canvasdemos.com/

http://www.rgraph.net/examples/index.html

Geolocation apihttp://html5demos.com/geo

http://html5demos.com/geo

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

http://www.html5rocks.com/en/tutorials/appcache/beginner

HTML5 storage

Data Storage: - localstorage (5MB)- sessionstorage- Web SQL database API

HTML5 Demoshttp://html5demos.com

http://html5demos.com/

HTML5 Boilerplatehttp://html5boilerplate.com

http://html5boilerplate.com/

http://html5test.com/results.html

http://www.caniuse.com

http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

HTML5 in Drupal CMS

HTML5 Themes: HTML5_base, Omega, Adaptivetheme, Zen5

http://drupal.org/project/html5_tools

http://groups.drupal.org/html5

http://drupal.org/project/html5_tools

http://groups.drupal.org/html5

CSS3

text-shadow

p {text-shadow: 1px 1px 2px #999;}

border-radius

.foo {border-radius: 10px;}

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;}

Opacity

.foo {opacity: 0.5; /* .foo will be 50% transparent */}

.foo {color: rgba(0, 0, 0, 0.75); /* black at 75% opacity */}

Multi columnshttp://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;}

http://trentwalton.com/

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

http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

CSS3http://lea.verou.me/css3-secrets

http://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://paulirish.com/2009/bulletproof-font-face-implementation-syntax

http://www.fontsquirrel.com/fontface/generator

Google Fontshttp://www.google.com/webfonts

http://webfonts.fonts.com

http://webfonts.fonts.com/

https://typekit.com

Opgelet: Keuze webfontprovider

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;}

http://leaverou.github.com/prefixfree

Modernizrhttp://www.modernizr.com

http://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://www.alistapart.com/articles/responsive-web-design

http://twitter.com/RWD

http://twitter.com/RWD

Responsive Webdesign

•Fluid 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 Mobiel

1. 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

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 first

Maak fluid 1 koloms basisversie voor mobiele toestellen

Voeg media queries toe voor de grotere toestellen

Progressive Enhancement

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... */

http://stuffandnonsense.co.uk/projects/320andup

http://stuffandnonsense.co.uk/projects/320andup

Fluid images

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)

http://unstoppablerobotninja.com/entry/fluid-images

http://unstoppablerobotninja.com/demos/resize/imgSizer.js

Responsive imageshttp://filamentgroup.com/examples/responsive-images

Lees meer: http://www.cloudfour.com/responsive-imgs

http://filamentgroup.com/examples/responsive-images

http://www.cloudfour.com/responsive-imgs

Responsive Carouselhttp://tympanus.net/Development/Elastislide

http://tympanus.net/Development/Elastislide

Responsive videohttp://fitvidsjs.com

http://fitvidsjs.com/

Responsive teksthttp://fittextjs.com

Responsive tekstDemo: http://www.strangenative.com/foldup

Code: http://letteringjs.com

http://www.strangenative.com/foldup

http://letteringjs.com/

Responsive LayoutDemo: http://www.aarontolley.co.uk/

Code: http://isotope.metafizzy.co

http://www.aarontolley.co.uk/

http://isotope.metafizzy.co/

Responsive Tableshttp://css-tricks.com/9096-responsive-data-tables

Demo: http://css-tricks.com/examples/ResponsiveTables/responsive.php

http://css-tricks.com/9096-responsive-data-tables

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

http://scottjehl.com/dconstruct/code/FlipPics-5-final

https://github.com/scottjehl/FlipPics

SVG: Scalable vector graphics

●Geen pixels●Altijd scherp

●Inkscape (Open Source software)●Kleine file

●Schaalbaar●http://raphaeljs.com/

http://raphaeljs.com/

En verder ook nog...

Design in the browserResponsive css grids, …LESS, SASS, eCSStender

Bedankt

[email protected]: @haroWww.koba.be

mailto:[email protected]

Technology

Html5 jeugdwerknet