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.
Summerschool Mobiele Apps | 15-17 augustus 2012 | Herman van Dompseler                                   HTML 5 App
1.   Wat is HTML 52.   HTML 5 Apps3.   Hybride App Architectuur4.   Een App makenOverzicht
Deel 1: HTML5
HTML 5 gebruikt als verzamelnaam voor HTML 5 markup Javascript scripting CSS3 vormgevingHTML 5
<!DOCTYPE HTML><html><head> <title>Hello World</title> …HTML 5 pagina
Maar eerst...Factoren om te overwegen: Welke toepassing ga je maken Welke HTML features wil je inzetten Voor welk platf...
Het antwoord is: caniuse.com
Case... nieuwe form elementen:<form>   <input type=“text”>   Nieuw: <input type=“date”>   Of: <input type = “mail”>   ...
Case: <input type=“date”>HTML 5 basics: voorbeeld
Belangrijkste les bij de HTML 5 basics    Er zijn eigenlijk     maar 2 platformen     die voor HTML 5     basics geschikt...
Deel 2: HTML5 Apps
Van laptop naar andere devices
Web Site | Web App | Hybride App | Native App
Kenmerken Wordt bezocht door er  naartoe te browsen Algemene look & feel van  website Server side rendering Online toe...
Kenmerken Kunnen geïnstalleerd  worden als App Uitgebreidere touch GUI Client side rendering Offline toegankelijkGeen ...
Kenmerken Directe toegang tot het  device via raamwerk zoals  Phonegap. HTML 5 kan in de app  worden opgeslagen, App kan...
Kenmerken Specifieke code                         Native codeHum… geen HTML 5 meer.Native App
Native                        code            PhonegapHTML5 App
Web site Als alle content online is (en moet blijven)Web App Als je een eenvoudige App ervaring wil creëren met  bestaan...
Vul het flowchart in
Deel 3: Hybride App        Architectuur
Native Appontwikkeling
•   HTML5 code•   Javascript library•   PhonegapHybride AppOntwikkeling
Maken het ontwikkelen van de interface eenvoudiger voor meerdere devices jQueryMobile DojoMobile Sencha   jQtouch   Z...
Definieren functies die toegang geven tot functionaliteiten van het device Phonegap Appmobi AppceleratorBackend libraries
Werken met Phonegap
HTML 5 oplossing voor audioWeb App <audio> tagHybride App Media objectMet media object ook geluid opnemenVerschil Web Ap...
•   API     • Geeft toegang tot       online content       aan App•   Website     • Geeft toegang       aan laptopConnecte...
Welke resource in de App en welke resource online?   De App moet een snelle response geven   Niet teveel data genereren ...
Deel 4: Een App maken
Download en installeer   Phonegap.com > getting started guidesStap 1: Hello world!
Configureer een Android Virtual Device Resolutie DensityStap 2: Run entest demo App
Juli 2012Stap 3: Welke Android versie
assets/www Documentroot index.htmlStap 4: Directorystructuur
XMLmanifest file – Android config file   android:icon="@drawable/ic_launcher"Helloworld - main java file   super.setIntege...
Smartphone Width: < 800 Orientation: portrait Dpi: 160Tablet Width: > 800 Orientation: landscape Dpi: 160High resolu...
/* fixed width layout *//* standard width */@media screen and (max-width: 799px) {   /* portrait layout */}/* for layout w...
Belangrijke Phonegap Events   DevicereadyloadFase1: function() {         document.addEventListener("deviceready", Cordova...
Belangrijke jQueryMobile Events$(#page).live(tap,function(event) { alert("tap"); });$(#page).live(taphold,function(event) ...
Nu kun je zelf aan de slag!   Uitleg is voorhanden in pdf   Ik ben vandaag en morgen beschikbaar    voor vragenStap 9: O...
The End
Upcoming SlideShare
Loading in …5
×

Html5 App

4,862 views

Published on

Presentation for Summerschool Webapps. Covers HTML5 Web Apps and Hybrids Apps. Also focus on architecture and development with Phonegap. Used as kickoff for a two day workshop.

Published in: Technology

Html5 App

  1. 1. Summerschool Mobiele Apps | 15-17 augustus 2012 | Herman van Dompseler HTML 5 App
  2. 2. 1. Wat is HTML 52. HTML 5 Apps3. Hybride App Architectuur4. Een App makenOverzicht
  3. 3. Deel 1: HTML5
  4. 4. HTML 5 gebruikt als verzamelnaam voor HTML 5 markup Javascript scripting CSS3 vormgevingHTML 5
  5. 5. <!DOCTYPE HTML><html><head> <title>Hello World</title> …HTML 5 pagina
  6. 6. Maar eerst...Factoren om te overwegen: Welke toepassing ga je maken Welke HTML features wil je inzetten Voor welk platform maak je je applicatieDe vraag is: wat je wilt, kan dat wel?Bezint eer ge begint
  7. 7. Het antwoord is: caniuse.com
  8. 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. 9. Case: <input type=“date”>HTML 5 basics: voorbeeld
  10. 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 & ipadHTML 5 basics: les
  11. 11. Deel 2: HTML5 Apps
  12. 12. Van laptop naar andere devices
  13. 13. Web Site | Web App | Hybride App | Native App
  14. 14. Kenmerken Wordt bezocht door er naartoe te browsen Algemene look & feel van website Server side rendering Online toegankelijkZie je het browser frame?Web Site
  15. 15. Kenmerken Kunnen geïnstalleerd worden als App Uitgebreidere touch GUI Client side rendering Offline toegankelijkGeen frame meer!Web App
  16. 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! PhonegapHybride App
  17. 17. Kenmerken Specifieke code Native codeHum… geen HTML 5 meer.Native App
  18. 18. Native code PhonegapHTML5 App
  19. 19. Web site Als alle content online is (en moet blijven)Web App Als je een eenvoudige App ervaring wil creëren met bestaande contentHybrid App Als je toegang tot specifieke functies van het device nodig hebtOF Als je geld wilt verdienen via de App storeNative App Als je veel snelheid in je App nodig hebtWat kies jij?
  20. 20. Vul het flowchart in
  21. 21. Deel 3: Hybride App Architectuur
  22. 22. Native Appontwikkeling
  23. 23. • HTML5 code• Javascript library• PhonegapHybride AppOntwikkeling
  24. 24. Maken het ontwikkelen van de interface eenvoudiger voor meerdere devices jQueryMobile DojoMobile Sencha jQtouch Zepto Hammer QuoJsFrontend libraries
  25. 25. Definieren functies die toegang geven tot functionaliteiten van het device Phonegap Appmobi AppceleratorBackend libraries
  26. 26. Werken met Phonegap
  27. 27. HTML 5 oplossing voor audioWeb App <audio> tagHybride App Media objectMet media object ook geluid opnemenVerschil Web App en Hybride App
  28. 28. • API • Geeft toegang tot online content aan App• Website • Geeft toegang aan laptopConnectedArchitectuur
  29. 29. Welke resource in de App en welke resource online? De App moet een snelle response geven Niet teveel data genereren onlineResource in App dus, behalve Als content niet gedupliceerd hoeft te worden Je niet voor content wijzigingen een nieuwe App hoeft te maken.Resources
  30. 30. Deel 4: Een App maken
  31. 31. Download en installeer Phonegap.com > getting started guidesStap 1: Hello world!
  32. 32. Configureer een Android Virtual Device Resolutie DensityStap 2: Run entest demo App
  33. 33. Juli 2012Stap 3: Welke Android versie
  34. 34. assets/www Documentroot index.htmlStap 4: Directorystructuur
  35. 35. XMLmanifest file – Android config file android:icon="@drawable/ic_launcher"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. 36. Smartphone Width: < 800 Orientation: portrait Dpi: 160Tablet Width: > 800 Orientation: landscape Dpi: 160High resolution Dpi: 240Stap 6a: Schermtype
  37. 37. /* fixed width layout *//* standard width */@media screen and (max-width: 799px) { /* portrait layout */}/* for layout with great widths */@media screen and (min-width: 800px) { /* landscape layout */}Stap 6b: @media queries (CSS)
  38. 38. Belangrijke Phonegap Events DevicereadyloadFase1: function() { document.addEventListener("deviceready", Cordova.DeviceReady, false); }, Pause/resume Online/offline Baterycritical/batterylow/batterystatusStap 7: Events (backend)
  39. 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. 40. Nu kun je zelf aan de slag! Uitleg is voorhanden in pdf Ik ben vandaag en morgen beschikbaar voor vragenStap 9: Off you go!
  41. 41. The End

×