Mobile Apps.

Presentatie over: "Mobile Apps."— Transcript van de presentatie:

1 Mobile Apps

2 Wat zijn Apps? App = applicatie Programma voor smartphone of tablet
Laat personalisatie toe Meest populair: Angrybirds (betalend) Facebook (niet betalend) De duurste: VIP Black -- $ (de miljonair app)

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

4 Smartphones - Tablets Smart devices (toestellen) in alle soorten en maten Andere prijsklasse ≠ snelheid en geheugen

5 Verschillende formaten

6 Wanneer gebruik je wat? Laptop: creeren en bewerken van informatie
Tablet: info benaderen, lezen, browsen, media consumptie, noteren, annoteren, tussendoor werk Smartphone: sms, , flitsend werk

7 Besturingsysteem OS (Operating System)

8 Operating System Verschillende fabrikant – verschillende OS
iOS (Apple): iPhone, iPad Android (Google): Samsung, HTC… Windows Phone 8 (Microsoft): Nokia…: Blackberry: eigen OS …

9

10 Verkoopscijfers

11 Markt in 2012

12 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

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

14 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

15 Android Alle apps werken niet op alle versies van Android Open OS
Volledige connectiviteit bvb Bluetooth (BT) Gecertificeerd door Google (is van Google) Marktleider

16 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

17 3 soorten Apps Native Web Hybrid

18 Native Apps

19 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

20 Native Apps Multitasking: verschillende applicaties draaien samen (op achtergrond)

21 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

22

23 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

24 Native App

25 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

26 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

27 Voorbeelden Native Apps
Skype App (iPhone) , Twitter en Foursquare (Android), Shazam, Wordlands, Angry Birds

28 Web Apps

29 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

30 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) )

31 Voorbeelden Web Apps

32 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.

33 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

34 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

35 Html 5

36 Html 5

37 Javascript frameworks

38 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

39 Voorbeelden Javascript Toolkits

40 CSS 3

41 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

42 Responsive design

43 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

44 Responsive design Let op voor beelden, beschikbaar maken in kleinere formaten Eventueel teksten inkorten Knoppen moeten herplaatst kunnen worden

45 Responsive design: website

46 Responsive design: tablet

47 Responsive design: phone

48 Web Sites – Web Apps Web Sites leunen aan bij de klassieke sites
Web Apps lijken op Native Apps

49 Native vs Web

50

51 Voorbeelden Native vs Web

52 Voorbeelden Native vs Web

53 Voorbeelden Native vs Web

54

55 Hybride App

56 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

57 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

58 Alle elementen van een mobiel toestel

59 Web View

60 Web ingebed in Native

61 Voorbeeld Sp!tsnieuws

62 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. 

63 Voorbeeld Sp!tsnieuws

64 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

65 Voorbeeld Sp!tsnieuws

66 Voorbeelden Hybride Apps

67

68

69 Vergelijken

70 Distributie Marketplaces
Zorg dat je gevonden wordt (730,686 apps in iTunes Store) App SEO Zorg voor grote marktpenetratie Platform vs User Reach

71 Platform vs User Reach

72 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

73 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

74

75 Toekomst

76 Mobiele Web 3.0

77 Mobiele Web 2.0 vs 3.0

78 Voorbeeld Web 2.0 Starbucks

79 Web 3.0 Semantische bovenlaag
A personal agent

80 Semantische data, Agents, interacties

81 Voorbeeld Siri

82 Voorbeeld Tripit

83 Voorbeeld iFood

84 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

85

86

87

88 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

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

90

91 Meer Info en bronnen Uitstekende video van Worklight (IBM) die ik gevolgd heb bij met maken van deze presentatie ( Meer technische info en schema’s

92 Meer info en bronnen Nog te verwerken: