SlideShare ist ein Scribd-Unternehmen logo
1 von 84
Downloaden Sie, um offline zu lesen
HTML5
      CSS3
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">
HTML5 Elements
Bron: 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 Outliner
http://gsnedders.html5.org/outliner
Internet Explorer 6/7/8
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" />
 <!-- 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
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, <a
href="vakantie.mp3">download de audio</a>.</p>
</audio>
<Canvas>


Flash killer?

Gelijkt op img tag maar dan dynamisch
aanpasbaar via javascript
Problemen met accessibility
Niet zo flexibel DOM wijzigen als svg
Werkt met pixels: telkens overschrijven dus cpu
intensief
Canvas: toepassingen


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

Grafieken:
http://www.rgraph.net/examples/index.html
Geolocation api
http://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 client
Opgelet 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
HTML5 Demos
http://html5demos.com
HTML5 Boilerplate
http://html5boilerplate.com
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 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 transitions
http://webdesignerwall.com/trends/47-amazing-css3-animation-demos
CSS3
 http://lea.verou.me/css3-secrets




http://lea.verou.me/css3-secrets
@font-face
http://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 Fonts
http://www.google.com/webfonts
http://webfonts.fonts.com
https://typekit.com
Opgelet: Keuze webfontprovider
Vendor prefixes
                http://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;
}
Modernizr
http://www.modernizr.com
RESPONSIVE WEBDESIGN
Html5 jeugdwerknet
Html5 jeugdwerknet
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
Html5 jeugdwerknet
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
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
Fluid images
Flexible images code

img.full,
object.full,
.main img,
.main object {
  width: 100%;
}

Kwaliteitsprobleem met IE6/7
http://unstoppablerobotninja.com/entry/fluid-images
(script dat dit fixt: http://unstoppablerobotninja.com/demos/resize/imgSizer.js)
Responsive images
http://filamentgroup.com/examples/responsive-images




   Lees meer: http://www.cloudfour.com/responsive-imgs
Responsive Carousel
http://tympanus.net/Development/Elast
Responsive video
http://fitvidsjs.com
Responsive tekst
http://fittextjs.com
Responsive tekst
Demo: 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-tables
Demo: http://css-tricks.com/examples/ResponsiveTables/responsive.php
Hybrid: jquery mobile + responsive
Demo: 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 browser
Responsive css grids, …
LESS, SASS, eCSStender
Bedankt

Hans.rossel@koba.be
   Twitter: @haro
   Www.koba.be

Weitere ähnliche Inhalte

Was ist angesagt?

Drupal Cursus Hans Rossel
Drupal Cursus Hans RosselDrupal Cursus Hans Rossel
Drupal Cursus Hans RosselHans Rossel
 
Lucius Websystems Drupal Startersdag
Lucius Websystems Drupal StartersdagLucius Websystems Drupal Startersdag
Lucius Websystems Drupal StartersdagLuciuswebsystems
 
Drupal Uitgebreide Starters Training
Drupal Uitgebreide Starters TrainingDrupal Uitgebreide Starters Training
Drupal Uitgebreide Starters TrainingLuciuswebsystems
 
Lucius Drupal Development Cursus
Lucius Drupal Development CursusLucius Drupal Development Cursus
Lucius Drupal Development CursusLuciuswebsystems
 
Best Practice: Joomla! templating
Best Practice: Joomla! templatingBest Practice: Joomla! templating
Best Practice: Joomla! templatingHans Kuijpers
 
Introductie Drupal development
Introductie Drupal developmentIntroductie Drupal development
Introductie Drupal developmentBart Hanssens
 
JCE editor optimaliseren (Joomla Den Bosc­h 2016)
JCE editor optimaliseren (Joomla Den Bosc­h 2016)JCE editor optimaliseren (Joomla Den Bosc­h 2016)
JCE editor optimaliseren (Joomla Den Bosc­h 2016)Peter Martin
 
Les 3 Inct. Training WordPress
Les 3 Inct. Training WordPressLes 3 Inct. Training WordPress
Les 3 Inct. Training WordPressPeter Luit
 
Website Usability deel 3: vervolg WordPress
Website Usability deel 3: vervolg WordPressWebsite Usability deel 3: vervolg WordPress
Website Usability deel 3: vervolg WordPressPeter Luit
 
Tablets - zijn 'publicatie' standaarden al zinvol
Tablets - zijn 'publicatie' standaarden al zinvolTablets - zijn 'publicatie' standaarden al zinvol
Tablets - zijn 'publicatie' standaarden al zinvolPeter Luit
 
Online usability - les 1 introductie WordPress - structuur en content
Online usability - les 1 introductie WordPress - structuur en contentOnline usability - les 1 introductie WordPress - structuur en content
Online usability - les 1 introductie WordPress - structuur en contentPeter Luit
 
Online usability - les 2 introductie WordPress
Online usability - les 2 introductie WordPressOnline usability - les 2 introductie WordPress
Online usability - les 2 introductie WordPressPeter Luit
 
How to create a Drupal theme (Dut
How to create a Drupal theme (DutHow to create a Drupal theme (Dut
How to create a Drupal theme (DutN digital studio
 
Online Usability training Hogeschool Utrecht - CCJ
Online Usability training Hogeschool Utrecht - CCJOnline Usability training Hogeschool Utrecht - CCJ
Online Usability training Hogeschool Utrecht - CCJPeter Luit
 
Drupal koba-nov2013
Drupal koba-nov2013Drupal koba-nov2013
Drupal koba-nov2013Hans Rossel
 
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayoutsJD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayoutsHans Kuijpers
 
Hyperlocal Academy - deel 2: techniek
Hyperlocal Academy - deel 2: techniekHyperlocal Academy - deel 2: techniek
Hyperlocal Academy - deel 2: techniekPeter Luit
 
Les 2 Inct. Training WordPress
Les 2 Inct. Training WordPressLes 2 Inct. Training WordPress
Les 2 Inct. Training WordPressPeter Luit
 
Sitemaps uit de doeken gedaan - Nico Bouwman - #jd15nl
Sitemaps uit de doeken gedaan - Nico Bouwman - #jd15nlSitemaps uit de doeken gedaan - Nico Bouwman - #jd15nl
Sitemaps uit de doeken gedaan - Nico Bouwman - #jd15nlJoomla!Days Netherlands
 

Was ist angesagt? (20)

Drupal Cursus Hans Rossel
Drupal Cursus Hans RosselDrupal Cursus Hans Rossel
Drupal Cursus Hans Rossel
 
Lucius Websystems Drupal Startersdag
Lucius Websystems Drupal StartersdagLucius Websystems Drupal Startersdag
Lucius Websystems Drupal Startersdag
 
Drupal Uitgebreide Starters Training
Drupal Uitgebreide Starters TrainingDrupal Uitgebreide Starters Training
Drupal Uitgebreide Starters Training
 
Lucius Drupal Development Cursus
Lucius Drupal Development CursusLucius Drupal Development Cursus
Lucius Drupal Development Cursus
 
Best Practice: Joomla! templating
Best Practice: Joomla! templatingBest Practice: Joomla! templating
Best Practice: Joomla! templating
 
Introductie Drupal development
Introductie Drupal developmentIntroductie Drupal development
Introductie Drupal development
 
JCE editor optimaliseren (Joomla Den Bosc­h 2016)
JCE editor optimaliseren (Joomla Den Bosc­h 2016)JCE editor optimaliseren (Joomla Den Bosc­h 2016)
JCE editor optimaliseren (Joomla Den Bosc­h 2016)
 
Les 3 Inct. Training WordPress
Les 3 Inct. Training WordPressLes 3 Inct. Training WordPress
Les 3 Inct. Training WordPress
 
Website Usability deel 3: vervolg WordPress
Website Usability deel 3: vervolg WordPressWebsite Usability deel 3: vervolg WordPress
Website Usability deel 3: vervolg WordPress
 
Tablets - zijn 'publicatie' standaarden al zinvol
Tablets - zijn 'publicatie' standaarden al zinvolTablets - zijn 'publicatie' standaarden al zinvol
Tablets - zijn 'publicatie' standaarden al zinvol
 
Online usability - les 1 introductie WordPress - structuur en content
Online usability - les 1 introductie WordPress - structuur en contentOnline usability - les 1 introductie WordPress - structuur en content
Online usability - les 1 introductie WordPress - structuur en content
 
Online usability - les 2 introductie WordPress
Online usability - les 2 introductie WordPressOnline usability - les 2 introductie WordPress
Online usability - les 2 introductie WordPress
 
How to create a Drupal theme (Dut
How to create a Drupal theme (DutHow to create a Drupal theme (Dut
How to create a Drupal theme (Dut
 
Online Usability training Hogeschool Utrecht - CCJ
Online Usability training Hogeschool Utrecht - CCJOnline Usability training Hogeschool Utrecht - CCJ
Online Usability training Hogeschool Utrecht - CCJ
 
Drupal koba-nov2013
Drupal koba-nov2013Drupal koba-nov2013
Drupal koba-nov2013
 
SEO & Drupal CMS
SEO & Drupal CMSSEO & Drupal CMS
SEO & Drupal CMS
 
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayoutsJD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
 
Hyperlocal Academy - deel 2: techniek
Hyperlocal Academy - deel 2: techniekHyperlocal Academy - deel 2: techniek
Hyperlocal Academy - deel 2: techniek
 
Les 2 Inct. Training WordPress
Les 2 Inct. Training WordPressLes 2 Inct. Training WordPress
Les 2 Inct. Training WordPress
 
Sitemaps uit de doeken gedaan - Nico Bouwman - #jd15nl
Sitemaps uit de doeken gedaan - Nico Bouwman - #jd15nlSitemaps uit de doeken gedaan - Nico Bouwman - #jd15nl
Sitemaps uit de doeken gedaan - Nico Bouwman - #jd15nl
 

Ähnlich wie Html5 jeugdwerknet

Talk 02 html5-css3
Talk 02 html5-css3Talk 02 html5-css3
Talk 02 html5-css3Monkeyshot
 
Javascript Intro
Javascript IntroJavascript Intro
Javascript IntroHans Rossel
 
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & UitdagingenHeadless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & UitdagingenLuciuswebsystems
 
Presentatie Kor Dwarshuis Holland Open2008
Presentatie Kor Dwarshuis Holland Open2008Presentatie Kor Dwarshuis Holland Open2008
Presentatie Kor Dwarshuis Holland Open2008KorDwarshuis
 
NL Front-end Guidelines (HTML,CSS,Javascript)
NL Front-end Guidelines (HTML,CSS,Javascript)NL Front-end Guidelines (HTML,CSS,Javascript)
NL Front-end Guidelines (HTML,CSS,Javascript)Mathijs Jong
 
CSS3 kleuren en border-radius
CSS3 kleuren en border-radiusCSS3 kleuren en border-radius
CSS3 kleuren en border-radiusThomas Byttebier
 
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScriptGastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScriptMilan van Bruggen
 
XML tekortkomingen en pluspunten
XML   tekortkomingen en pluspuntenXML   tekortkomingen en pluspunten
XML tekortkomingen en pluspuntenMarc de Graauw
 
Intro schema.org / microdata voor frontend developers
Intro schema.org / microdata voor frontend developersIntro schema.org / microdata voor frontend developers
Intro schema.org / microdata voor frontend developersPieter Mergan
 
UiTwidgets build on Drupal7 by CultuurNet
UiTwidgets build on Drupal7 by CultuurNetUiTwidgets build on Drupal7 by CultuurNet
UiTwidgets build on Drupal7 by CultuurNetSven Houtmeyers
 
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo BruggeHTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo BruggePureplexity
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesignSybren Wartna
 
Css positioning
Css positioningCss positioning
Css positioningohmdesign
 

Ähnlich wie Html5 jeugdwerknet (20)

Talk 02 html5-css3
Talk 02 html5-css3Talk 02 html5-css3
Talk 02 html5-css3
 
Javascript Intro
Javascript IntroJavascript Intro
Javascript Intro
 
Refresher HTML(5) and CSS(3) - CC FE & UX
Refresher HTML(5) and CSS(3) - CC FE & UXRefresher HTML(5) and CSS(3) - CC FE & UX
Refresher HTML(5) and CSS(3) - CC FE & UX
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
HTML5 (Dutch)
HTML5 (Dutch)HTML5 (Dutch)
HTML5 (Dutch)
 
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & UitdagingenHeadless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
 
Presentatie Kor Dwarshuis Holland Open2008
Presentatie Kor Dwarshuis Holland Open2008Presentatie Kor Dwarshuis Holland Open2008
Presentatie Kor Dwarshuis Holland Open2008
 
NL Front-end Guidelines (HTML,CSS,Javascript)
NL Front-end Guidelines (HTML,CSS,Javascript)NL Front-end Guidelines (HTML,CSS,Javascript)
NL Front-end Guidelines (HTML,CSS,Javascript)
 
Opendeurdag html5
Opendeurdag html5Opendeurdag html5
Opendeurdag html5
 
CSS3 kleuren en border-radius
CSS3 kleuren en border-radiusCSS3 kleuren en border-radius
CSS3 kleuren en border-radius
 
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScriptGastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
 
XML tekortkomingen en pluspunten
XML   tekortkomingen en pluspuntenXML   tekortkomingen en pluspunten
XML tekortkomingen en pluspunten
 
Intro schema.org / microdata voor frontend developers
Intro schema.org / microdata voor frontend developersIntro schema.org / microdata voor frontend developers
Intro schema.org / microdata voor frontend developers
 
UiTwidgets build on Drupal7 by CultuurNet
UiTwidgets build on Drupal7 by CultuurNetUiTwidgets build on Drupal7 by CultuurNet
UiTwidgets build on Drupal7 by CultuurNet
 
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo BruggeHTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
 
HTML 5 in een vogelvlucht (Dutch)
HTML 5 in een vogelvlucht (Dutch)HTML 5 in een vogelvlucht (Dutch)
HTML 5 in een vogelvlucht (Dutch)
 
Hwud04 les3 - Javascript
Hwud04 les3 - JavascriptHwud04 les3 - Javascript
Hwud04 les3 - Javascript
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
Html5
Html5Html5
Html5
 
Css positioning
Css positioningCss positioning
Css positioning
 

Html5 jeugdwerknet