Presentatie Ivo De Wispelaere tijdens OpenDAMdag / Open leerweek van www.waasendurme.be

1. www.waasendurme.be – info@waasendurme.be HTML5 en CSS3 ….alles evolueert verder…

2. Wat? Wat is HTML5? HTML5 is de nieuwste telg van de internettaal HTML.Doel: gebruik van proprietaryinternet-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

3. Nieuwigheden in HTML5 SemanticMarkup Geolocation FormEnhancements Audio / Video Canvas ContentEditable Drag and Drop Persistent Data Storage www.waasendurme.be – info@waasendurme.be

4. Nieuwigheden in HTML5 Vb1: SemanticMarkup www.waasendurme.be – info@waasendurme.be

5. Nieuwigheden in HTML5 Vb 2: Geolocation Geografische locatie op basis van IP-adres Nut: “content locationawareness”http://html5demos.com/geohttp://www.hoppinger.com/blog/2010/04/01/html5-apis-geolocation-api/ www.waasendurme.be – info@waasendurme.be

6. Nieuwigheden in HTML5 Vb 3: Formenhancementshttp://richardshepherd.com/tv/forms/ www.waasendurme.be – info@waasendurme.be

7. Nieuwigheden in CSS3 Randeffecten Onbeperkte lettertypes Schaduw-effecten Schaalbare achtergrond-afbeeldingen Verloop Tekstkolommen Transparantie Pseudo-classes …. www.waasendurme.be – info@waasendurme.be

8. Problemen Browsercompatibiliteit: een website wordt op verschillende browsers anders weergegeven. www.waasendurme.be – info@waasendurme.be

9. Oplossingen Javascripts voor browserupgrade Per browser aparte cssspecifiëren Voor oudere browsers: streven naar acceptabele layout www.waasendurme.be – info@waasendurme.be

10. Apparaten Per apparaat kan een andere opmaak (via css) toegepast worden via media-queries. www.waasendurme.be – info@waasendurme.be

11. Voorbeelden Schaalbare achtergrond: http://www.alistapart.com/d/supersize-that-background-please/index3.html (via Firefox) www.waasendurme.be – info@waasendurme.be

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

13. Voorbeelden III Media queries: layout past zich aan aanappararaat http://webdesignerwall.com/demo/adaptive-design/final.html (via Firefox; test via ipadpeek.com) www.waasendurme.be – info@waasendurme.be