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

Smart devices (toestellen) in alle soorten en maten

Andere prijsklasse ≠ snelheid en geheugen

Verschillende formaten

Wanneer gebruik je wat?

Laptop: creeren en bewerken van informatie

Tablet: info benaderen, lezen, browsen, media consumptie, noteren, annoteren, tussendoor werk

Smartphone: sms, email, flitsend werk

Besturingsysteem

OS (Operating System)

Operating System

Verschillende 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

iOS

Ontwikkeling 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

iOS

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

bestandsbeheerBlijven de referentie

SOLOMOCO

Google visie: zorg dat je SOLOMOCO bentSO = socialLO = localMO = mobileCO = commerce

Android

Veel fabrikanten ontwikkelen Androidtoestellen

Grote variëteit in toestellen en toestelspecificaties

Vaak noodzakelijk om binnen één app drie varianten te ontwikkelen (low, medium en high) om zo alle toestellen optimaal te kunnen bedienen

Android

Alle apps werken niet op alle versies van Android

Open OSVolledige connectiviteit bvb Bluetooth (BT)Gecertificeerd door Google (is van Google)Marktleider

WP8 Windows Phone 8

Vlotte en intuïtieve interfaceLive Tiles Homescreen met beperkte infoBeperkte BT connectiviteitZeer afgesloten OS...

3 soorten Apps

Native

Web

Hybrid

Native Apps

Native Apps

Native Apps zijn kleine softwareprogramma’s Ontworpen voor een specifiek platform:

specifieke toestellen of Operating SystemsEen native Android App zal dus niet werken

op een iPhoneHet programma wordt op de smartphone of

tablet gedownload en geïnstalleerd

Native Apps

Multitasking: verschillende applicaties draaien samen (op achtergrond)

Native Apps

Geschreven 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 snelHebben meer geheugen nodig dan

mobiele site (data wordt volledig gedownload), oude smartphones raken vol

Native App

Native Apps

Interactie rechtstreeks met het OS (Operating System)

Gebruikt de api’s van het OSNodig voor api-devices zoals gps,

agenda…Toepassingen, locatiegegevens,

informatie, camerabeelden, en contacten kunnen tegelijk verwerkt worden

Dezelfde look-and-feel als OS

Native Apps

Ophalen via app-marktplaats zoals iTunes of App Store (Apple), Play Store (Android), Windows Phone Market (Microsoft),…

Opstarten door ikoon aan te raken op scherm

Privacy: apps profileren, dwz. slaan gegevens op via cookies

Voorbeelden Native Apps

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

Web Apps

Web App

Meeste 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 apparaat

Enkel 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 openen

Door 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 App

Geschreven in html (html5), CSS (CSS3) en Javascript (frameworks)

Werken in de browserChrome (Google), Internet Explorer (Microsoft), Firefox (Mozilla) ...

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

schermDraaien op alle OS

HTML5

Hyper 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

HTML5

Normaal zijn de mogelijkheden van de browser op mobiele toestellen beperkt maar door HTML5 kunnen wel:

GeolocatieVideo- en audiosupport…

Html 5

Html 5

Javascript frameworks

Javascript frameworks

Web Apps worden gemaakt met Javascript Toolkits

Ontwikkel-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 3

CSS = 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 design

Mobiele website past zich aan in functie van het scherm

Data (eventueel via database) koppelen aan html5

Javascript checkt versie en formaat van toestel

Afhankelijk hiervan worden verschillende css ingeladen

Responsive design

Let 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 App

Combinatie 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 App

Vast 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!tsnieuws

Links 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!tsnieuws

Aan de rechterkant is de hybride app weergegeven

Navigatie items bovenin de mobiele site zijn vervangen door een app navigatie onderaan het scherm

Voorbeeld Sp!tsnieuws

Voorbeelden Hybride Apps

Vergelijken

Distributie

MarketplacesZorg 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

App bouwen

Conceptueel

Manage 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

Conceptueel

Mobiele 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.’

Verschillende stappen

Toekomst van ‘App bouwen’

‘Nike’ is breaking down all the parts of its apps to create building blocks that can be reused as needed

Blocks = services that only do one thing (checkout, track activity, simply read data…)

Redundancy benefit: Should one micro service fail the other ones will still work

Toekomst van App bouwen

Building composite apps on Amazon Web Services

Netflix's operations support systems (OSS) stack as an architecture and deployment model.

http://www.zdnet.com/how-nike-thinks-about-app-development-lots-of-micro-services-7000035797/?s_cid=e232&ttag=e232&ftag=TRE6a12a91

Free software om eenvoudige apps te maken

Appy Pie (http://www.appypie.com/)

Appery.io (http://appery.io)

Phonegap (http://phonegap.com/) Tutorial Cursus Phonegap - Apps maken voor iOS, Android en

meer: http://youtu.be/WLwSXO9i6HM

Tiny Orca (http://www.tinyorca.com/nl/)Video: http://youtu.be/vbSEDui6OK0

Free software om eenvoudige apps te maken

MobAppCreator (http://www.mobappcreator.com/)

iBuildApp (http://ibuildapp.com/) Appsmakerstore (http://appsmakerstore.com/) Trial mogelijk Goodbarber (http://www.goodbarber.com/) Como (http://www.como.com) Appclay (http://appclay.shephertz.com/)

Free software om eenvoudige apps te maken

Appsbar (http://www.appsbar.com/) Fluid (http://fluidapp.com/)

Free software om eenvoudige apps te maken

Windows Phone-App maken Maak in 4 stappen je eigen apphttp://youtu.be/OMLX3inDqhs

AppMachine eigen app bouwen zonder te programmeren voor iPhone en Android. app Live bekijken en testen op je Smartphone gratis bouwen en pas bij het publiceren in de App Store betalen. voor eigengebruikers, ontwikkelaars en webbureaus

http://youtu.be/UeW03Pf5bpM

Welke apps

Nuttige 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 apps

Nuttige 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 (iPad) of ezPDF Reader (iPad

en Android)App van bankcontacten van Belfius

Toekomst

Toekomst

Mobile paymentseWallet (google, paypal)Via je telefoon factuur (operator billing)Micro paymentsIn-app payments

LoyaltyPassbook

Toekomst

Augmented realityLayar….

LBS: location based services, geo-fences…

… en zoveel meer

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

Toekomst

Naast 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/

Meer Info en bronnen

Uitstekende 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-devcon5-conference

http://www.frankwatching.com/archive/2012/04/16/iphone-android-rim-zijn-hybride-apps-de-oplossing/

Nog te verwerken:• http://wijs.be/trends-inzichten/blog/detail/native-app-of-web-app• http://www.bloovi.be/nl/blog/B1195-hoe-beslissen-of-je-bedrijf-een-mobile-ap

p-nodig-heeft?goback=.gde_1814075_member_204978904