HTML 5 App
Herman van Dompseler in opdracht van SURFnet 20 december 2012 Versie 0.91
HTML 5 App
Contents Inleiding ................................................................................................................................................... 4 Wat is HTML 5 ..................................................................................................................................... 4 Wat is er mogelijk met HTML 5? ..................................................................................................... 5 HTML 5 – handige links.................................................................................................................... 8 Part 1: HTML 5 Apps ............................................................................................................................... 9 Typen Apps .......................................................................................................................................... 9 Native apps .................................................................................................................................... 10 Webapps........................................................................................................................................ 10 Hybride apps.................................................................................................................................. 11 Een kijkje in de toekomst .............................................................................................................. 11 Welk type App gebruiken? ................................................................................................................ 12 Beslisboom .................................................................................................................................... 13 Scenario’s ...................................................................................................................................... 15 Typen Apps – handige links ............................................................................................................... 15 Part 2: Hybride apps uitgewerkt............................................................................................................ 16 Native app architectuur..................................................................................................................... 16 Hybride app architectuur .................................................................................................................. 17 Stand-alone hybride app ............................................................................................................... 17 Connected hybride app ................................................................................................................. 19 Werken met Phonegap...................................................................................................................... 21 Audio voorbeeld ............................................................................................................................ 22 Part 3: Een hybride app bouwen ........................................................................................................... 23 Stap 1: Hello World! De ontwikkelomgeving opzetten ..................................................................... 23 Stap 2: Run en test de App ................................................................................................................ 23 Kopieer de App naar een apparaat ............................................................................................... 24 Stap 3: Welke Android versie? .......................................................................................................... 25 Stap 4. Directory structuur ................................................................................................................ 25 Stap 5. Icoon & start-up scherm........................................................................................................ 26 Stap 6. Schermgrootte & ‘Responsive design’ .................................................................................. 27 Schermtype definitie ..................................................................................................................... 28 Images en text grootte .................................................................................................................. 30 Stap 7: Events & ‘Touch GUI’ ............................................................................................................. 31 Volgorde ........................................................................................................................................ 31 2
HTML 5 App Meer over gebruiker events .......................................................................................................... 32 Stap 8: Off You Go! ............................................................................................................................ 32
3
HTML 5 App
Inleiding HTML 5 is een technologie die nog volop in beweging is en toepasbaar is binnen nieuwe toepassingsgebieden voor onderzoek en onderwijs. Dit rapport is een technologie verkenning naar de mogelijkheden van HTML 5 bij het maken van Apps voor mobiele apparaten. Het rapport geeft de volgende inzichten:
Overzicht van de mogelijkheden van native apps, webapps en hybride apps en de overwegingen om voor een bepaalde soort App te kiezen. Verdieping in HTML 5 hybride apps met onder andere een aansluiting op bestaande webarchitectuur en middleware. Maar ook uitleg bij het bouwen van een HTML 5 App.
Het rapport is geschikt voor (website) ontwikkelaars die meer willen leren over het maken van Apps of het transformeren van een bestaande website naar een webapp. Er is informatie over verschillende typen Apps, met de nadruk op Apps gebouwd met HTML 5. Bij dit rapport is ook een website gemaakt: http://html5app.surfnet.nl/. Deze website is een samenvatting van het rapport, en is een webapp op zichzelf. De website is te gebruiken als HTML 5 referentie en bevat een voorbeeld hybride app. Dit rapport bestaat uit 4 delen. 1. 2. 3. 4.
Allereerst een inleiding op HTML 5 Vervolgens een overzicht van type Apps en HTML 5 Apps Daarna een verdieping en uitleg over hybride apps Afsluitend een stap voor stap handleiding voor het zelf bouwen van een hybride app
Wat is HTML 5 HTML 5 is de ‘nieuwe’ standaard voor het presenteren van webpagina’s. HTML 5 is niet één grote nieuwe functionaliteit, maar een collectie van nieuwe standaarden en functionaliteiten op drie deelgebieden: 1. HTML 5 2. Javascript (JS) 3. CSS3
‘Nieuw’ staat tussen aanhalingstekens omdat sommige HTML 5 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. tag laten zien wat er mogelijk is op video gebied met HTML 5. Een demo pagina toont de implementatie. element om de video speler een ‘gaming’ karakter te geven. Met het element is het bijvoorbeeld mogelijk een video te bewerken en andere elemenen in een overlay op de video te zetten. Daarnaast is er gekeken naar ondertiteling met WebVTT. tag in de HTML pagina. Met javascript kan dan vervolgens de functie play() aangeroepen worden voor het afspelen van het fragment. De Phonegap oplossing voor het afspelen van geluid is gebruik maken van het media object en ook dit object heeft een play() methode. Voordeel van gebruik van de Phonegap oplossing is dat het hiermee ook mogelijk is om audio op te nemen, met de startRecord() methode. Met de HTML 5 oplossing is het alleen mogelijk af te spelen.
