Summerschool Mobiele Apps augustus 2012 Herman van Dompseler. HTML 5 App

Maat: px

Weergave met pagina beginnen:

Download "Summerschool Mobiele Apps 15-17 augustus 2012 Herman van Dompseler. HTML 5 App"

Leen Hermans
7 jaren geleden
Aantal bezoeken:

1 Summerschool Mobiele Apps augustus 2012 Herman van Dompseler HTML 5 App

2 1. Wat is HTML 5 2. HTML 5 Apps 3. Hybride App Architectuur 4. Een App maken Overzicht

3 Deel 1: HTML5

4 HTML 5 gebruikt als verzamelnaam voor HTML 5 markup Javascript scripting CSS3 vormgeving HTML 5

5 <!DOCTYPE HTML> <html> <head> <title>hello World</title> HTML 5 pagina

6 Maar eerst... Factoren om te overwegen: Welke toepassing ga je maken Welke HTML features wil je inzetten Voor welk platform maak je je applicatie De vraag is: wat je wilt, kan dat wel? Bezint eer ge begint

7 Het antwoord is: caniuse.com

8 Case... nieuwe form elementen: <form> <input type= text > Nieuw: <input type= date > Of: <input type = mail > Of: <input type = search > </form> HTML 5 basics

9 Case: <input type= date > HTML 5 basics: voorbeeld

10 Belangrijkste les bij de HTML 5 basics Er zijn eigenlijk maar 2 platformen die voor HTML 5 basics geschikt zijn 1. Opera voor de desktop 2. ios voor de iphone & ipad HTML 5 basics: les

11 Deel 2: HTML5 Apps

12 Van laptop naar andere devices

13 Web Site Web App Hybride App Native App

14 Kenmerken Wordt bezocht door er naartoe te browsen Algemene look & feel van website Server side rendering Online toegankelijk Zie je het browser frame? Web Site

15 Kenmerken Kunnen geïnstalleerd worden als App Uitgebreidere touch GUI Client side rendering Offline toegankelijk Geen frame meer! Web App

16 Kenmerken Directe toegang tot het device via raamwerk zoals Phonegap. HTML 5 kan in de app worden opgeslagen, App kan in de App Store worden opgenomen. Toegang tot het device! Phonegap Hybride App

17 Kenmerken Specifieke code Native code Hum geen HTML 5 meer. Native App

18 Native code Phonegap HTML5 App

Web site Als alle content online is (en moet blijven) Web App Als je een eenvoudige App ervaring wil creëren met bestaande content Hybrid App Als je toegang

19 Web site Als alle content online is (en moet blijven) Web App Als je een eenvoudige App ervaring wil creëren met bestaande content Hybrid App Als je toegang tot specifieke functies van het device nodig hebt OF Als je geld wilt verdienen via de App store Native App Als je veel snelheid in je App nodig hebt Wat kies jij?

20 Vul het flowchart in

21 Deel 3: Hybride App Architectuur

22 Native App ontwikkeling

23 HTML5 code Javascript library Phonegap Hybride App Ontwikkeling

24 Maken het ontwikkelen van de interface eenvoudiger voor meerdere devices jquerymobile DojoMobile Sencha jqtouch Zepto Hammer QuoJs Frontend libraries

25 Definieren functies die toegang geven tot functionaliteiten van het device Phonegap Appmobi Appcelerator Backend libraries

26 Werken met Phonegap

27 HTML 5 oplossing voor audio Web App <audio> tag Hybride App Media object Met media object ook geluid opnemen Verschil Web App en Hybride App

28 API Geeft toegang tot online content aan App Website Geeft toegang aan laptop Connected Architectuur

29 Welke resource in de App en welke resource online? De App moet een snelle response geven Niet teveel data genereren online Resource in App dus, behalve Als content niet gedupliceerd hoeft te worden Je niet voor content wijzigingen een nieuwe App hoeft te maken. Resources

30 Deel 4: Een App maken

31 Download en installeer Phonegap.com > getting started guides Stap 1: Hello world!

32 Configureer een Android Virtual Device Resolutie Density Stap 2: Run en test demo App

33 Juli 2012 Stap 3: Welke Android versie

34 assets/www Documentroot index.html Stap 4: Directory structuur

35 XMLmanifest file Android config file Helloworld - main java file super.setintegerproperty("splashscreen", R.drawable.splash); super.loadurl("file:///android_asset/www/index.html", 10000); Stap 5: Icon en startup scherm

36 Smartphone Width: < 800 Orientation: portrait Dpi: 160 Tablet Width: > 800 Orientation: landscape Dpi: 160 High resolution Dpi: 240 Stap 6a: Schermtype

/* fixed width layout */ /* standard width */ @media screen and (max-width: 799px) { /* portrait layout */ } /* for

37 /* fixed width layout */ /* standard width screen and (max-width: 799px) { /* portrait layout */ } /* for layout with great widths screen and (min-width: 800px) { /* landscape layout */ } Stap queries (CSS)

38 Belangrijke Phonegap Events Deviceready loadfase1: function() { document.addeventlistener("deviceready", Cordova.DeviceReady, false); }, Pause/resume Online/offline Baterycritical/batterylow/batterystatus Stap 7: Events (backend)

39 Belangrijke jquerymobile Events $('#page').live('tap',function(event) { alert("tap"); }); $('#page').live('taphold',function(event) { alert("hold"); }); $('#page').live('swipeleft',function(event) { alert("swipeleft"); }); $('#page').live('swiperight',function(event) { alert("swiperight"); }); Stap 8: Events (frontend)

40 Nu kun je zelf aan de slag! Uitleg is voorhanden in pdf Ik ben vandaag en morgen beschikbaar voor vragen Stap 9: Off you go!

41 The End

Vergelijkbare documenten

HTML 5 App. Herman van Dompseler in opdracht van SURFnet. 20 december 2012 Versie 0.91

HTML 5 App. Herman van Dompseler in opdracht van SURFnet. 20 december 2012 Versie 0.91 Herman van Dompseler in opdracht van SURFnet 20 december 2012 Versie 0.91 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...