Html5 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

HTML 5 gebruikt als verzamelnaam voor

 HTML 5 markup
 Javascript scripting
 CSS3 vormgeving

HTML 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 platform maak je je applicatie

De vraag is: wat je wilt, kan dat wel?

Bezint eer ge begint

Case... nieuwe form elementen:

<form>

 <input type=“text”>

 Nieuw: <input type=“date”>
 Of: <input type = “mail”>
 Of: <input type = “search”>

</form>

HTML 5 basics

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
zijn

1. Opera voor de
desktop
2. iOs voor de iphone
& ipad

HTML 5 basics: les

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! Phonegap

Hybride App

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?

Deel 3: Hybride App
Architectuur

• 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

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

• API
• Geeft toegang tot
online content
aan App

• Website
• Geeft toegang
aan laptop

Connected
Architectuur

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

Download en installeer

 Phonegap.com > getting started guides

Stap 1: Hello world!

Configureer een
Android Virtual
Device

 Resolutie
 Density

Stap 2: Run en
test demo App

Juli 2012

Stap 3: Welke Android versie

assets/www

 Documentroot
 index.html

Stap 4: Directory
structuur

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

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 layout with great widths */
@media screen and (min-width: 800px) {
/* landscape layout */
}

Stap 6b: @media queries (CSS)

Belangrijke Phonegap Events

 Deviceready
loadFase1: function() {
document.addEventListener("deviceready", Cordova.DeviceReady, false);
},

 Pause/resume
 Online/offline
 Baterycritical/batterylow/batterystatus

Stap 7: Events (backend)

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)

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!

Html5 App

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Html5 App

Semelhante a Html5 App (20)

Html5 App