www.waasendurme.be – info@waasendurme.be

HTML5 en CSS3….alles evolueert verder…

Wat?

Wat is HTML5?• HTML5 is de nieuwste telg van de internettaal

HTML.Doel: gebruik van proprietary internet-technologie als Adobe Flash, Microsoft Silverlight en Sun JavaFX overbodig te makenHTML5 maakt het voor webpagina’s mogelijk om tekst, afbeeldingen, multimedia en webapplicaties weer te geven in een browser.

Wat is CSS3?• Veel nieuwe functies in css met extra

opmaakmogelijkheden

www.waasendurme.be – info@waasendurme.be

Nieuwigheden in HTML5

• Semantic Markup

• Geolocation• Form

Enhancements• Audio / Video• Canvas• ContentEditable• Drag and Drop• Persistent Data

Storage

www.waasendurme.be – info@waasendurme.be

Nieuwigheden in HTML5

Vb1: Semantic Markup

www.waasendurme.be – info@waasendurme.be

Nieuwigheden in HTML5

Vb 2: Geolocation• Geografische

locatie op basis van IP-adres

• Nut: “content location awareness”http://html5demos.com/geohttp://www.hoppinger.com/blog/2010/04/01/html5-apis-geolocation-api/

www.waasendurme.be – info@waasendurme.be

Nieuwigheden in HTML5

Vb 3: Form enhancements

http://richardshepherd.com/tv/forms/

www.waasendurme.be – info@waasendurme.be

Nieuwigheden in CSS3

• Randeffecten• Onbeperkte

lettertypes• Schaduw-

effecten• Schaalbare

achtergrond-afbeeldingen

• Verloop• Tekstkolommen• Transparantie• Pseudo-classes• ….

www.waasendurme.be – info@waasendurme.be

Problemen

Browsercompatibiliteit: een website wordt op verschillende browsers anders weergegeven.

www.waasendurme.be – info@waasendurme.be

Oplossingen

• Javascripts voor browserupgrade

• Per browser aparte css specifiëren

• Voor oudere browsers: streven naar acceptabele layout

www.waasendurme.be – info@waasendurme.be

Apparaten

Per apparaat kan een andere opmaak (via css) toegepast worden via media-queries.

www.waasendurme.be – info@waasendurme.be

Voorbeelden

Schaalbare achtergrond: http://www.alistapart.com/d/supersize-that-background-please/index3.html (via Firefox)

www.waasendurme.be – info@waasendurme.be

Voorbeelden II

Randen, schaduw, kolommen: http://www.kreatuur.be/pcvo/upgrades/html5_intro/oefeningen/htm5_2_css_toevoegen/index.html (via Firefox)

www.waasendurme.be – info@waasendurme.be

Voorbeelden III

Media queries: layout past zich aan aan appararaat http://webdesignerwall.com/demo/adaptive-design/final.html (via Firefox; test via ipadpeek.com)

www.waasendurme.be – info@waasendurme.be