In-depth: HTML5 & CSS3

In-depth:

HTML5 & CSS3

Door: Domein: E-mail: Datum:

Peter Polman WEB [email protected] 28 januari 2013

Inhoudsopgave Geschiedenis van HTML5  .............................................................................................  3   HTML5: Nieuwe Elementen  .........................................................................................  5   Semantiek .....................................................................................................................................5   Media Elementen .........................................................................................................................7   Het element .................................................................................................................8   Form elementen ..........................................................................................................................8   Data- attributes ............................................................................................................................9   HTML5: Nieuwe API’s  ..................................................................................................  10   Canvas 2D API ............................................................................................................................10   Timed Media Playback ...............................................................................................................10   Drag & Drop ...............................................................................................................................10   HTML File API .............................................................................................................................11   Waar is de rest? ..........................................................................................................................12   Websockets ................................................................................................................................12   Microdata ...................................................................................................................................12   Webworkers ...............................................................................................................................13   Webmessaging ...........................................................................................................................13   RDFa ............................................................................................................................................14   Verschillen  HTML  4.01,  XHTML  1.0,  HTML  5  .....................................................................  16   Semantiek ...................................................................................................................................16   DOCTYPE.....................................................................................................................................16   CSS3: New Elements & differences  ..........................................................................  18   Attribute Selectors .....................................................................................................................18   Pseudo Classes...........................................................................................................................19   Combinators ..............................................................................................................................19   Waar is de rest? ..........................................................................................................................19   Supported Browsers  ...................................................................................................  20   Conclusie?  .....................................................................................................................  20  

Geschiedenis van HTML5 2004: WHAT Working Group wordt opgericht Onder de naam “WHAT Working Group” (Web Hypertext Application Technology Working Group) werd in 2004 een werkgroep opgericht om HTML5 te ontwikkelen. In deze werkgroep bevonden zich kopstukken uit de branche, afkomstig uit organisaties als Apple, the Mozilla Foundation en Opera Software. 2006 Oktober: W3C start samenwerking met WHATWG W3C staakt haar ontwikkeling van XHTML en sluit zich aan bij WHATWG. Deze samenwerking geeft de ontwikkeling van HTML5 een grote impuls. 2008: Eerste versie HTML5 uitgebracht De eerste versie van HTML, ontwikkeld door Ian Hickson (Google) wordt op de markt gebracht. 2008: Firefox 3 ondersteunt HTML5 Als eerste browser neemt Firefox 3 stapjes in het ondersteunen van HTML5, niet lang daarna volgen Chrome, Safari en uiteindelijk ook Internet Explorer. 2010 Januari: YouTube HTML5 video player Youtube biedt via http://www.youtube.com/testtube/ haar eerste versie van de HTML5 video player aan. 2010 April: Job’s thoughts on Flash Steve Jobs (Apple) trekt middels een open brief getiteld “Thoughts on Flash” de stekker uit het stopcontact wat betreft het ondersteunen van Flash op Apple devices. Hiermee wordt de software markt aangezet om zich verder te verdiepen en aan te sluiten bij in de ontwikkeling van HTML5. 2010 Mei: Scribd goes HTML5 Online Document Sharing Site Sribd ontwikkelt een HTML5 User Interface, waarmee deze nu ook geoptimaliseerd is voor het gebruik op tablets. 2010 August: The Wilderness Downtown Arcade Fire ontwikkelt in samenwerking met Google haar eerste HTML5 interactive film “The Wilderness Downtown”. Dit project wint de eerste prijs in de Cyber category van de Cannes Advertising awards. 2010 December: Chrome Webstore opening

Google opent haar Chrome Webstore, waarmee non-Apple web apps beschikbaar worden gesteld voor een groter publiek. 2010 Maart: Disney aquires Rocket Pack. Met de overname van de Finse start-up Rocket Pack, richt Disney zich op het ontwikkelen van HTML5 games buiten de gangbare Apple webstores om. 2011 July: Pandora goes HTML5 Audio listening site Pandora begint met haar overgang naar een HTML5 UI. Een ontwikkeling die positief ontvangen wordt door het publiek. 2011 Augustus: Amazon goes HTML5 Amazon ontwikkeld een HTML5 versie van haar E-Book reader application. Hiermee wordt hun content via de browser te benaderen op elk soort device. 2011 August: Twitter goes HTML5 Met het ontwikkelen van een HTML5 UI wordt ook twitter nu via de browser beschikbaar gesteld via de browser op mobile devices. 2011 September: 34% of top100 sites gebruiken HTML5 Alexa’s top100 stelt dat 34% van de top100 sites HTML5 gebruiken. 2011 September: The Boston Globe starts with responsive design Krant The Boston Globe herontwerpt haar website voor mobile devices door gebruikt te maken van nieuwe CSS3 technieken en HTML5. Her begrip responsive design wordt hiermee vastgezet. 2011 November: Adobe stops making Flash for mobile devices Adobe meld het publiek dat ze stopt met het geschikt maken van Flash voor mobile devices en richt zich verder op de ontwikkeling van tools voor HTML5. 2012 April: Flickr ontwikkelt HTML5 uploader Foto sharing wordt hiermee ook direct beschikbaar gemaakt voor crossplatform browser apps. 2012 Juni: LinkedIn ontwikkelt native HTML5 app Sinds 2008 worstelt LinkedIn met het ontwikkelen van een goede mobile apps. In 2011 komt haar eerste wel prezen HTML5 app op de markt. 2012 Juni: Wix.com 1.000.000+ HTML5 websites Online website builder Wix.com behaalt meer dan 1.000.000 users die een HTML5 website hebben aangemaakt op hun platform.

HTML5: Nieuwe Elementen

Semantiek Met semantisch elementen worden elementen bedoeld die de pagina structureren om deze vervolgens op elk niveau interpretabel te maken voor web software. Zie dit als de hiërarchische indeling van de informatie getoond middels HTML. Met het opkomen van HTML5 zijn enkele elementen uit HTML 4.01 verdwenen wegens geen of onjuist gebruik. Elementen die zich bemoeien met nonmarkup zaken als , , en worden niet meer ondersteund en ook en worden, wegens hun zoekmachine onvriendelijkheid, de laan uit gestuurd.

Dit element wordt gebruikt als container voor introducerende content.

Dit is header content

<section> Het section element omvat een thematische groep van content binnen een document. Anders dan het article element hoeft het section element niet onafhankelijk van omliggende elementen te zijn. <section id=”posts”> <article class=”blogPost”>

Dit is de heading

Een paragraaf aan content.

<article class=”blogPost”>

Dit is de heading

Een paragraaf aan content.

<article class=”blogPost”>

Dit is de heading

Een paragraaf aan content.

<article> Het element <article> geeft ondersteunende content aan (meestal geplaatst in sidebars, vandaar wellicht de naam). <article class=”blogPost”>

Dit is de heading

Een paragraaf aan content.