View
1.777
Download
0
Category
Tags:
Preview:
Citation preview
HTML5CSS3
RESPONSIVE 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 over richting van XHTML, W3C heeft geen voeling meer met realiteit, XHTML2 niet backwards compatible●2006: Tim Berners Lee (W3C) stopt ontwikkeling XHTML2.
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">
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 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, <a href="vakantie.mp4">download de video</a>.</p></video>
Video browser ondersteuning
Bron: 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" /> <!-- 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>
<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
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
HTML5 storage
Data Storage: - localstorage (5MB)- sessionstorage- Web SQL database API
http://html5test.com/results.html
http://www.caniuse.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
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;}
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
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://www.fontsquirrel.com/fontface/generator
Google Fontshttp://www.google.com/webfonts
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;}
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
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
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... */
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)
Responsive imageshttp://filamentgroup.com/examples/responsive-images
Lees meer: http://www.cloudfour.com/responsive-imgs
Responsive Carouselhttp://tympanus.net/Development/Elastislide
Responsive teksthttp://fittextjs.com
Responsive tekstDemo: http://www.strangenative.com/foldup
Code: http://letteringjs.com
Responsive LayoutDemo: http://www.aarontolley.co.uk/
Code: http://isotope.metafizzy.co
Responsive Tableshttp://css-tricks.com/9096-responsive-data-tables
Demo: 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
Recommended