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

Summerschool Mobiele Apps | 15-17 augustus 2012 | Herman van Dompseler

HTML 5 App

1.

Wat is HTML 5

2.

HTML 5 Apps

3.

Hybride App Architectuur

4.

Een App maken

Overzicht

Deel 1: HTML5

HTML 5 gebruikt als verzamelnaam voor

HTML 5 markup  Javascript scripting  CSS3 vormgeving 

HTML 5

…

HTML 5 pagina

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

Het antwoord is: caniuse.com

Case... nieuwe form elementen:





  

Nieuw: Of: Of:

HTML 5 basics

Case:

HTML 5 basics: voorbeeld

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

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 toegankelijk Zie je het browser frame?

Web Site

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

Web App

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!

Hybride App

Phonegap

Kenmerken  Specifieke code

Native code

Hum… geen HTML 5 meer.

Native App

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 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?

Vul het flowchart in

Deel 3: Hybride App Architectuur

Native App ontwikkeling

•

HTML5 code

•

Javascript library

•

Phonegap

Hybride App Ontwikkeling

Maken het ontwikkelen van de interface eenvoudiger voor meerdere devices jQueryMobile  DojoMobile  Sencha 

 

 

jQtouch Zepto Hammer QuoJs

Frontend libraries

Definieren functies die toegang geven tot functionaliteiten van het device

Phonegap  Appmobi  Appcelerator 

Backend libraries

Werken met Phonegap

HTML 5 oplossing voor audio Web App 