Native-, web- en hybride apps voor op mobiele toestellen Apps zijn applicaties die op tablets en smartphones draaien. Er bestaan native apps, web apps en hybride apps. Ook html 5 en css komen ter sprake om een 'responsive design' te maken. In Nederlands.

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 -- $999.99 (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. Wanneer gebruik je wat?
 Laptop: creeren en bewerken van
informatie
 Tablet: info
benaderen, lezen, browsen, media
consumptie, noteren, annoteren, tussendo
or werk
 Smartphone: sms, email, flitsend werk

6. Besturingsysteem
OS (Operating System)

7. Operating System
 Verschillende fabrikant – verschillende OS
 iOS (Apple): IPhone, IPad
 Android (Google): Samsung, HTC…
 Windows Phone 8 (Microsoft): Nokia…:
 Blackberry: eigen OS
…

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

10. Markt in 2012

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

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

13. 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
 Alle apps werken niet op alle versies van
Android

14. Android
 Marktleider
 Open OS
 Veel fabrikanten ontwikkelen
Androidtoestellen
 Grote variëteit in toestellen en
toestelspecificaties
 Volledige connectiviteit bvb Bluetooth (BT)
 Gecertificeerd door Google (is van Google)

15. WP8 Windows Phone 8
 Vlotte en intuïtieve interface
 Live Tiles Homescreen met beperkte info
 Beperkte BT connectiviteit
 Zeer afgesloten OS...
 Zie presentatie

16. Verschillende formaten

17. 3 soorten Apps
 Native
 Web
 Hybrid

18. Voorbeeld Dag v d comm
 Website
 Mobiele website
 app

19. Native Apps

20. Native Apps
 Native 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

21. Native Apps
 Het programma wordt op de smartphone
of tablet geïnstalleerd
 Multitasking: verschillende applicaties
draaien samen (op achtergrond)

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

24. Native App
 Voor ieder OS broncode opnieuw
programmeren in andere programmeertaal
 Duur in aanmaak (verschillende
platformen)
 Duur in onderhoud
 Wel snel

25. Native App

26. Native Apps
 Interactie rechtstreeks met het OS
(Operating System)
 Geen container app nodig
 Gebruikt de APIs van het OS
 Toepassingen, locatiegegevens,
informatie, camerabeelden, en contacten
kunnen tegelijk verwerkt worden
 Dezelfde look-and-feel als OS

28. Native Apps
 Ophalen 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

29. Voorbeelden Native Apps
Skype App (Iphone) , Twitter en Foursquare (Android), Shazam, Wordlands, Angry Birds

30. Web Apps

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

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

33. Voorbeelden Web Apps

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

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

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

37. Html 5

38. Html 5

39. Javascript frameworks

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

41. Voorbeelden Javascript Toolkits

42. CSS 3

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

44. Responsive design

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

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

47. Responsive design: website

48. Responsive design: tablet

49. Responsive design: phone

50. Web Sites – Web Apps
 Web Sites leunen aan bij de klassieke
sites
 Web Apps lijken op Native Apps

51. Native vs Web

53. Voorbeelden Native vs Web

54. Voorbeelden Native vs Web

55. Voorbeelden Native vs Web

57. Hybride App

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

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

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

61. Web View

62. Web ingebed in Native

63. Voorbeeld Sp!tsnieuws

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

65. Voorbeeld Sp!tsnieuws

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

67. Voorbeeld Sp!tsnieuws

68. Voorbeelden Hybride Apps

71. Vergelijken

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

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

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

75. 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 of ez-reader voor android
 App van bankcontacten van Belfius

77. Toekomst

78. Mobiele Web 3.0
http://www.slideshare.net/TerryRibb/web-30-platforms-devcon5-conference

79. Mobiele Web 2.0 vs 3.0

80. Voorbeeld Web 2.0 Starbucks

81. Web 3.0
Semantische bovenlaag
A personal agent

82. Semantische data, Agents,
interacties

83. Voorbeeld Siri
6
5
4
Reeks 1
3
Reeks 2
2 Reeks 3
1
0
Categorie 1 Categorie 2 Categorie 3 Categorie 4

84. Voorbeeld Tripit

85. Voorbeeld iFood

86. 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/

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

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

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

94. Meer info en bronnen
 http://www.slideshare.net/TerryRibb/web-30-platforms-
devcon5-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