Mobile Apps

Wat zijn Apps? App = applicatie Programma voor smartphone of tablet Laat personalisatie toe Meest 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, iPad Android (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 geupdate Nieuwe apps werken niet op oude toestellen

iOS Vlot, intuïtief Op homescreen enkel snelkoppelingen Afgesloten OS, geen flash Nadruk op multimedia, niet op bestandsbeheer Blijven de referentie

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 OS Volledige connectiviteit bvb Bluetooth (BT) Gecertificeerd door Google (is van Google) Marktleider

WP8 Windows Phone 8 Vlotte en intuïtieve interface Live Tiles Homescreen met beperkte info Beperkte BT connectiviteit Zeer afgesloten OS... WP8 zal bij ons beschikbaar zijn vanaf 10/2012

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 Systems Een native Android App zal dus niet werken op een iPhone Het 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 programmeerwerk Op maat: echte mobiele App Kunnen werken zonder internet Wel telkens update als inhoud wijzigt Update 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 onderhoud Wel snel Hebben 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 OS Nodig 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 getoond Adresbalk kan weggelaten worden

Web Apps Inhoud moet elke keer ingeladen worden Internetverbinding noodzakelijk Installatie op OS optioneel Soms ook Offline beschikbaar (te gebruiken zonder internet-connectie) Minder snel dan Native Apps Moeilijk verkoopbaar (niet via Play Store (Android) of App Store (Apple) )

Voorbeelden Web Apps

Web App openen Door URL in te tikken Door op een hyperlink te klikken QR-code kan gekoppeld (gescand) worden aan URL Via snelkoppeling op home-scherm Vanuit 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 browser Chrome (Google), Internet Explorer (Microsoft), Firefox (Mozilla) ... Geoptimaliseerd voor Mobile devices Herkennen automatisch mobiel surfen Comfortabele ‘touch experience’ op kleiner scherm Draaien op alle OS

HTML5 Hyper Text Markup Language HTML5 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 frameworks Web Apps worden gemaakt met Javascript Toolkits Ontwikkel-omgeving Vereenvoudigt 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 StyleSheets CSS 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 inkorten Knoppen 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 bedrijfswereld Er wordt een schil gebouwd waarbinnen de mobiele site geladen wordt Is een Native App met daarin (embedded) de html Alle voordelen van native Apps

Hybride App Vast basisgeraamte Delen zijn geschreven in web-taal Via RSS wordt inhoud actueel gehouden Internet is dus nodig Maar telkens inhoud verandert noet native App niet aangepast worden

Alle elementen van een mobiel toestel http://www.slideshare.net/jamesgpearce/cross-platform-mobile-web-apps http://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 Marketplaces Zorg 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 marktpenetratie Platform vs User Reach

Platform vs User Reach http://www.slideshare.net/andreasc/101-myths-about-the-mobile-economy

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 pdf Scannen OCR Memorecorder Remote desktop: scherm pc overnemen RSS vb flipboard

Welke apps Nuttige apps in bedrijfscontext: QR en barcode scanning Navigatie vb google maps best via app, kaarten worden dan op toestel ingeladen, anders via browser veel dataverkeer NMBS Pdf GoodReader (iPad) of ezPDF Reader (iPad en Android) App 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.0 Semantische bovenlaag A personal agent

Semantische data, Agents, interacties

Voorbeeld Siri

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 service Diensten en producten controleren en monitoren http://www.slideshare.net/tijs/the-future-op-apps http://pinterest.com/tijs/smart-app-devices/

Conceptueel Manage de taken, niet de technologie Behandel 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.’

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