Opendeurdag html5
13
-
Upload
pcvo-waas-en-durme -
Category
Documents
-
view
419 -
download
2
description
Presentatie Ivo De Wispelaere tijdens OpenDAMdag / Open leerweek van www.waasendurme.be
Transcript of Opendeurdag html5
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 – [email protected]
Nieuwigheden in HTML5
• Semantic Markup
• Geolocation• Form
Enhancements• Audio / Video• Canvas• ContentEditable• Drag and Drop• Persistent Data
Storage
www.waasendurme.be – [email protected]
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 – [email protected]
Nieuwigheden in HTML5
Vb 3: Form enhancements
http://richardshepherd.com/tv/forms/
www.waasendurme.be – [email protected]
Nieuwigheden in CSS3
• Randeffecten• Onbeperkte
lettertypes• Schaduw-
effecten• Schaalbare
achtergrond-afbeeldingen
• Verloop• Tekstkolommen• Transparantie• Pseudo-classes• ….
www.waasendurme.be – [email protected]
Problemen
Browsercompatibiliteit: een website wordt op verschillende browsers anders weergegeven.
www.waasendurme.be – [email protected]
Oplossingen
• Javascripts voor browserupgrade
• Per browser aparte css specifiëren
• Voor oudere browsers: streven naar acceptabele layout
www.waasendurme.be – [email protected]
Apparaten
Per apparaat kan een andere opmaak (via css) toegepast worden via media-queries.
www.waasendurme.be – [email protected]
Voorbeelden
Schaalbare achtergrond: http://www.alistapart.com/d/supersize-that-background-please/index3.html (via Firefox)
www.waasendurme.be – [email protected]
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 – [email protected]
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 – [email protected]
