Mobile Apps

Wat zijn Apps?App = applicatieProgramma voor smartphone of tabletLaat personalisatie toeMeest populair: Angrybirds (betalend)Facebook (niet betalend)De duurste: VIP Black -- $999.99 (de

miljonair app)

Wat is een goede app?Wat wil je bereiken?Voor wie?Wat doet dit meer dan website, folder?

• Gemakkelijker• Sneller• Meer functionaliteiten (integratie met

kalender, newsfeed, kaart)

Smartphones - TabletsSmart devices (toestellen) in alle soorten en

matenAndere prijsklasse ≠ snelheid en geheugen

Wanneer gebruik je wat?Laptop: creeren en bewerken van

informatieTablet: info benaderen, lezen, browsen,

media consumptie, noteren, annoteren, tussendoor werk

Smartphone: sms, email, flitsend werk

Besturingsysteem

OS (Operating System)

Operating SystemVerschillende fabrikant – verschillende OS iOS (Apple): IPhone, IPadAndroid (Google): Samsung, HTC…Windows Phone 8 (Microsoft): Nokia…: Blackberry: eigen OS…

Verkoopscijfers

http://www.onbile.com/info/mobile-operating-system-evolution-in-2012/

Markt in 2012

iOSOntwikkeling van een iPhone of IPad app

is niet zo complex, omdat je te maken hebt met één fabrikant en één type toestel

Soft- en hardware zijn perfect afgestemd iOS wordt steeds geupdateNieuwe apps werken niet op oude

toestellen

iOSVlot, intuïtiefOp homescreen enkel snelkoppelingenAfgesloten OS, geen flashNadruk op multimedia, niet op

bestandsbeheerBlijven de referentie

AndroidVeel fabrikanten ontwikkelen

AndroidtoestellenGrote variëteit in toestellen en

toestelspecificatiesVaak noodzakelijk om binnen één app drie

varianten te ontwikkelen (low, medium en high) om zo alle toestellen optimaal te kunnen bedienen

Alle apps werken niet op alle versies van Android

AndroidMarktleiderOpen OSVeel fabrikanten ontwikkelen

AndroidtoestellenGrote variëteit in toestellen en

toestelspecificatiesVolledige connectiviteit bvb Bluetooth (BT)Gecertificeerd door Google (is van Google)

WP8 Windows Phone 8Vlotte en intuïtieve interfaceLive Tiles Homescreen met beperkte infoBeperkte BT connectiviteitZeer afgesloten OS...Zie presentatie

Verschillende formaten

3 soorten AppsNative

Web

Hybrid

Voorbeeld Dag v d commWebsiteMobiele websiteapp

Native Apps

Native AppsNative Apps zijn kleine

softwareprogramma’s ontworpen om een specifiek platform te draaien.

Ontworpen voor specifieke toestellen of Operating Systems.

Een Android App zal dus niet werken op een iPhone

Native AppsHet programma wordt op de smartphone

of tablet geïnstalleerdMultitasking: verschillende applicaties

draaien samen (op achtergrond)

Native AppsGeschreven in de broncode (binair

executable)Veel programmeerwerkOp maat: echte mobiele AppKunnen werken zonder internet Wel telkens update als inhoud wijzigtUpdate opnieuw in de store of market

indienen en door gebruiker te downloaden

Native App

Voor ieder OS broncode opnieuw programmeren in andere programmeertaal

Duur in aanmaak (verschillende platformen)

Duur in onderhoudWel snel

Native App

Native Apps Interactie rechtstreeks met het OS

(Operating System)Geen container app nodigGebruikt de APIs van het OSToepassingen, locatiegegevens,

informatie, camerabeelden, en contacten kunnen tegelijk verwerkt worden

Dezelfde look-and-feel als OS

Native AppsOphalen via app marktplaats zoals Itunes

of App Store (Apple), Play Store (Android), Windows Phone Market (Microsoft),…

Wordt gedownload en opgeslaan op mobiele toestel

Opstarten door ikoon aan te raken op scherm

Voorbeelden Native Apps

Skype App (Iphone) , Twitter en Foursquare (Android), Shazam, Wordlands, Angry Birds

Web Apps

Web AppMeeste gewone websites niet geschikt om

mobiel te bezoeken Inhoud valt buiten beeld, beelden worden

slecht geladen …Mobiele website of web app houdt

rekening met capaciteit mobiele apparaatEnkel belangrijke informatie wordt getoondAdresbalk kan weggelaten worden

Web Apps Inhoud moet elke keer ingeladen worden Internetverbinding noodzakelijk Installatie op OS optioneelSoms ook Offline beschikbaar (te

gebruiken zonder internet-connectie)Minder snel dan Native AppsMoeilijk verkoopbaar (niet via Play Store

(Android) of App Store (Apple) )

Voorbeelden Web Apps

Web App openenDoor URL in te tikkenDoor op een hyperlink te klikkenQR-code kan gekoppeld (gescand) worden

aan URLVia snelkoppeling op home-schermVanuit de browsers roept de gebruiker

bepaalde inhouden op die aangepast zijn aan de resolutie en grootte van het scherm.

Web AppGeschreven in html (html5), CSS (CSS3) en

Javascript (frameworks)Werken in de browser

Chrome (Google), Internet Explorer (Microsoft), Firefox (Mozilla) ...

Geoptimaliseerd voor Mobile devicesHerkennen automatisch mobiel surfenComfortabele ‘touch experience’ op kleiner

schermDraaien op alle OS

HTML5Hyper Text Markup LanguageHTML5 is een potentiele kandidaat voor

cross-platform mobile applicaties. Veel eigenschappen zijn gebouwd met de

bedoeling vlot te draaien op lage energie toestellen zoals smartphones en tablets

Nog in ontwikkeling

Html 5

Html 5

Javascript frameworks

Javascript frameworksWeb Apps worden gemaakt met Javascript

ToolkitsOntwikkel-omgevingVereenvoudigt de ontwikkeling van

websites en applicaties voor mobiele toestellen en platformen

Werkt op alle populaire smartphone-, tablet-, e-reader- en desktopplatformen en moderne (mobiele) browsers: iOS, Android, BlackBerry, PalmOS, WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Opera Mini, Firefox Mobile, Kindle, Nook

Voorbeelden Javascript Toolkits

CSS 3

CSS 3CSS = Cascading StyleSheetsCSS is een stylesheet-taal gebruikt om de

‘presentatie-semantiek’ (uitzicht van teksten) weer te geven

Bedoeling is het scheiden van vorm (layout, kleuren lettertypes) en inhoud

Sass = Syntactically Awesome Stylesheets

Responsive design

Responsive designMobiele website past zich aan in functie

van het schermData (eventueel via database) koppelen

aan html5Javascript checkt versie en formaat van

toestelAfhankelijk hiervan worden verschillende

css ingeladen

Responsive designLet op voor beelden, beschikbaar maken

in kleinere formaten Eventueel teksten inkortenKnoppen moeten herplaatst kunnen

worden

Responsive design: website

Responsive design: tablet

Responsive design: phone

Web Sites – Web Apps

Web Sites leunen aan bij de klassieke sites

Web Apps lijken op Native Apps

Native vs Web

Voorbeelden Native vs Web

Voorbeelden Native vs Web

Voorbeelden Native vs Web

Hybride App

Hybride AppCombinatie van beide Interessant binnen bedrijfswereldEr wordt een schil gebouwd waarbinnen

de mobiele site geladen wordt Is een Native App met daarin (embedded)

de htmlAlle voordelen van native Apps

Hybride AppVast basisgeraamteDelen zijn geschreven in web-taalVia RSS wordt inhoud actueel gehouden Internet is dus nodigMaar telkens inhoud verandert noet native

App niet aangepast worden

Alle elementen van een mobiel toestel

http://www.slideshare.net/jamesgpearce/cross-platform-mobile-web-appshttp://www.slideshare.net/jamesgpearce/building-cross-platform-mobile-web-apps-7925215

Web View

Web ingebed in Native

Voorbeeld Sp!tsnieuws

Voorbeeld Sp!tsnieuwsLinks en midden: mobiele site In het midden krijgen bezoekers eenmalig

de mogelijkheid om de site te bookmarken.

Op deze manier verschijnt er al een icon op het scherm van de telefoon waarmee de mobiele site geopend kan worden. 

Voorbeeld Sp!tsnieuws

Voorbeeld Sp!tsnieuwsAan de rechterkant is de hybride app

weergegevenNavigatie items bovenin de mobiele site

zijn vervangen door een app navigatie onderaan het scherm

Voorbeeld Sp!tsnieuws

Voorbeelden Hybride Apps

Vergelijken

DistributieMarketplacesZorg dat je gevonden wordt (730,686 apps

in iTunes Store)App SEO

http://www.slideshare.net/kolinko/app-store-seo-tutorial

http://www.slideshare.net/misteroo/how-to-market-your-app

Zorg voor grote marktpenetratiePlatform vs User Reach

Platform vs User Reach

http://www.slideshare.net/andreasc/101-myths-about-the-mobile-economy

Welke appsNuttige apps in bedrijfscontext:

Blacklisting, whitelisting: stalkers uitschakelen, nrs die bellen krijgen dan bezettoon, whitelist is dan enkel één nr toelaten in bvb vergadering

Annoteren pdfScannen OCRMemorecorderRemote desktop: scherm pc overnemenRSS vb flipboard

Welke appsNuttige apps in bedrijfscontext:

Qr en barcode scanningNavigatie vb google maps best via app, kaarten

worden dan op toestel ingeladen, anders via browser veel dataverkeer

NMBSPdf goodreader of ez-reader voor androidApp van bankcontacten van Belfius

Toekomst

Mobiele Web 3.0

http://www.slideshare.net/TerryRibb/web-30-platforms-devcon5-conference

Mobiele Web 2.0 vs 3.0

Voorbeeld Web 2.0 Starbucks

Web 3.0Semantische bovenlaag

A personal agent

Semantische data, Agents, interacties

Voorbeeld Siri

Categorie 1 Categorie 2 Categorie 3 Categorie 40

1

2

3

4

5

6

Reeks 1Reeks 2Reeks 3

Voorbeeld Tripit

Voorbeeld iFood

ToekomstNaast de applicaties op zich, ontstaat ook

een volledig nieuw marketing en salesinstrument

Remoteapp (bediening van op afstand)Digital enhanced serviceDiensten en producten controleren en

monitoren

http://www.slideshare.net/tijs/the-future-op-apps

http://pinterest.com/tijs/smart-app-devices/

ConceptueelManage de taken, niet de technologieBehandel mobiele bezoekers als echte

mensen, zoals in een winkel, aan het loket, enz.

Uw mobiele website IS uw kantoor, loket, werkvloer

Doordring de technologiemensen ervan dat de bezoeker eerst komt, niet de organisatie

ConceptueelMobiele gebruikers willen niet de ‘volledige

site’, ze willen de ‘volledige ervaring’Sam Walton:‘The secret of successful retailing is to give your customers what they want.’Jakob Nielsen:‘Mobile is less forgiving than the desktop.’

Meer Info en bronnenUitstekende video van Worklight (IBM) die

ik gevolgd heb bij met maken van deze presentatie (http://youtu.be/Ns-JS4amlTc)

Meer technische info en schema’s http://youtu.be/Ns-JS4amlTc http://www.youtube.com/watch?v=Ns-JS4amlTc&feature=related http://www.slideshare.net/jamesgpearce/cross-platform-mobile-w

eb-apps http://www.slideshare.net/jamesgpearce/building-cross-platform-

mobile-web-apps-7925215

Meer info en bronnen http://www.slideshare.net/TerryRibb/web-30-platforms-de

vcon5-conference http://www.frankwatching.com/archive/2012/04/16/iphon

e-android-rim-zijn-hybride-apps-de-oplossing/

Nog te verwerken:http://wijs.be/trends-inzichten/blog/detail/native-app-of-web-app