Opendeurdag html5

433 views
423 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
433
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Opendeurdag html5

  1. 1. www.waasendurme.be – info@waasendurme.be<br />HTML5 en CSS3<br />….alles evolueert verder…<br />
  2. 2. Wat?<br />Wat is HTML5?<br />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.<br />Wat is CSS3?<br />Veel nieuwe functies in css met extra opmaakmogelijkheden<br />www.waasendurme.be – info@waasendurme.be<br />
  3. 3. Nieuwigheden in HTML5<br />SemanticMarkup<br />Geolocation<br />FormEnhancements<br />Audio / Video<br />Canvas<br />ContentEditable<br />Drag and Drop<br />Persistent Data Storage<br />www.waasendurme.be – info@waasendurme.be<br />
  4. 4. Nieuwigheden in HTML5<br />Vb1: SemanticMarkup<br />www.waasendurme.be – info@waasendurme.be<br />
  5. 5. Nieuwigheden in HTML5<br />Vb 2: Geolocation<br />Geografische locatie op basis van IP-adres<br />Nut: “content locationawareness”http://html5demos.com/geohttp://www.hoppinger.com/blog/2010/04/01/html5-apis-geolocation-api/<br />www.waasendurme.be – info@waasendurme.be<br />
  6. 6. Nieuwigheden in HTML5<br />Vb 3: <br />Formenhancementshttp://richardshepherd.com/tv/forms/<br />www.waasendurme.be – info@waasendurme.be<br />
  7. 7. Nieuwigheden in CSS3<br />Randeffecten<br />Onbeperkte lettertypes<br />Schaduw-effecten<br />Schaalbare achtergrond-afbeeldingen<br />Verloop<br />Tekstkolommen<br />Transparantie<br />Pseudo-classes<br />….<br />www.waasendurme.be – info@waasendurme.be<br />
  8. 8. Problemen<br />Browsercompatibiliteit: een website wordt op verschillende browsers anders weergegeven.<br />www.waasendurme.be – info@waasendurme.be<br />
  9. 9. Oplossingen<br />Javascripts voor browserupgrade<br />Per browser aparte cssspecifiëren<br />Voor oudere browsers: streven naar acceptabele layout<br />www.waasendurme.be – info@waasendurme.be<br />
  10. 10. Apparaten<br />Per apparaat kan een andere opmaak (via css) toegepast worden via media-queries.<br />www.waasendurme.be – info@waasendurme.be<br />
  11. 11. Voorbeelden<br />Schaalbare achtergrond: http://www.alistapart.com/d/supersize-that-background-please/index3.html (via Firefox)<br />www.waasendurme.be – info@waasendurme.be<br />
  12. 12. Voorbeelden II<br />Randen, schaduw, kolommen: <br />http://www.kreatuur.be/pcvo/upgrades/html5_intro/oefeningen/htm5_2_css_toevoegen/index.html(via Firefox)<br />www.waasendurme.be – info@waasendurme.be<br />
  13. 13. Voorbeelden III<br />Media queries: layout past zich aan aanappararaat<br />http://webdesignerwall.com/demo/adaptive-design/final.html (via Firefox; test via ipadpeek.com)<br />www.waasendurme.be – info@waasendurme.be<br />

×