Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Opendeurdag html5

481 views

Published on

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

  • Be the first to comment

  • Be the first to like this

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 />

×