HTML5 App

Herman van Dompseler In samenwerking met SURFnet 3 augustus 2012 Versie 0.3 - CONCEPT

HTML5 App

Contents Part 1: Wat is HTML5 ............................................................................................................................... 4 Laat maar zien, wat kan ik met HTML5? ............................................................................................. 4 HTML5 Resources ................................................................................................................................ 7 HTML5 Apps ............................................................................................................................................ 7 Native vs Hybrid vs Web Apps ............................................................................................................. 8 Native Apps ..................................................................................................................................... 8 Web Apps ........................................................................................................................................ 9 Hybride Apps ................................................................................................................................... 9 Een kijkje in de toekomst van Web Apps .......................................................................................... 10 Ok, maar wat kies ik nu voor mijn project?....................................................................................... 10 Beslisboom .................................................................................................................................... 11 Scenario’s ...................................................................................................................................... 13 Native vs. Hybrid vs Web Resources ................................................................................................. 13 Part 2: Hybride Apps uitgewerkt ........................................................................................................... 14 Architectuur....................................................................................................................................... 14 Stand Alone - Hybride App ............................................................................................................ 15 Connected - Hybride App ............................................................................................................. 16 App design & App resources ............................................................................................................. 17 Libraries ............................................................................................................................................. 18 Backend libraries ........................................................................................................................... 18 Frontend libraries .......................................................................................................................... 18 Werken met Phonegap...................................................................................................................... 19 Audio voorbeeld ............................................................................................................................ 20 Part 3: Een App bouwen voor Android.................................................................................................. 21 Stap 1: Hello World ........................................................................................................................... 21 Stap 2: Run en test je app.................................................................................................................. 21 Kopieer je App naar een device..................................................................................................... 22 Stap 3: Welke Android versie? .......................................................................................................... 23 Stap 4. Directory structuur ................................................................................................................ 23 Stap 5. Icon & Start-up scherm ......................................................................................................... 24 Stap 6. Schermgrootte....................................................................................................................... 25 Schermtype definitie ..................................................................................................................... 26 Images en text grootte .................................................................................................................. 28 2

HTML5 App CSS layouts met @media queries.................................................................................................. 28 Stap 7: Events (backend) ................................................................................................................... 29 Stap 8: Events (frontend) .................................................................................................................. 32 Stap 9: Off You Go! ............................................................................................................................ 32 Bijlage 1 – index.html ............................................................................................................................ 33 Bijlage 2 – page.css ................................................................................................................................ 35 Bijlage 3 – layout.css ............................................................................................................................. 36 Bijlage 4 – event.js ................................................................................................................................. 38

3

HTML5 App

Part 1: Wat is HTML5 HTML 5 is de ‘nieuwe’ standaard voor het presenteren van webpagina’s. HTML5 is niet één groot nieuw ding, maar een collectie van nieuwe standaarden en features op drie deelgebieden: 1. HTML5 2. Javascript (JS) 3. CSS3

‘Nieuw’ staat tussen aanhalingstekens omdat sommige HTML5 elementen al enige tijd te gebruiken zijn en andere elementen nog in ontwikkeling zijn. HTML 5 is daarom het best te omschrijven als een continue verbetering van de taal en tools voor het maken van web applicaties. Met de nadruk op applicaties ipv. statische pagina’s. In de combinatie van HTML 5, Javascript en CSS3 zijn het de HTML die de declaratie van de elementen vormen. Met Javascript en CSS3 worden deze elementen dynamisch gemaakt. Bij programma’s in Javascript ligt de focus op het procedureel aanpassen van de elementen. Met CSS3 worden de elementen vorm gegeven en ligt de focus op de positionering en transities van elementen. En ja, je kunt het nu meteen gebruiken. Of de specificatie nu af is of niet, alle browsers/devices ondersteunen een subset van de mogelijkheden. Een webpagina die begint met is een HTML 5 pagina. Vervolgens is het belangrijk te kijken of de functionaliteit die je nastreeft beschikbaar is voor het platform waarop je het wilt laten zien. In één van de vele desktop browsers, op een Android of iOs device. Op http://caniuse.com/ staat een overzicht van de functionaliteiten voor de verschillende platformen.

Laat maar zien, wat kan ik met HTML5? In eerdere onderzoeken heb we al laten zien wat er zoal met HTML5 mogelijk is. 

Eind 2010 heeft een theoretisch onderzoek naar de HTML5