Transcript Web 2.0 - Arteveldehogeschool
Slide 1
Mobile Apps
Slide 2
Slide 3
Slide 4
Slide 5
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)
Slide 6
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)
Slide 7
Smartphones - Tablets
Smart devices (toestellen) in alle soorten en
maten
Andere prijsklasse ≠ snelheid en geheugen
Slide 8
Verschillende formaten
Slide 9
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
Slide 10
Besturingsysteem
OS (Operating System)
Slide 11
Operating System
Verschillende fabrikant – verschillende OS
iOS (Apple): iPhone, iPad
Android (Google): Samsung, HTC…
Windows Phone 8 (Microsoft): Nokia…:
Blackberry: eigen OS
…
Slide 12
Slide 13
Verkoopscijfers
http://www.onbile.com/info/mobile-operating-system-evolution-in-2012/
Slide 14
Markt in 2012
Slide 15
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
Slide 16
iOS
Vlot, intuïtief
Op homescreen enkel snelkoppelingen
Afgesloten OS, geen flash
Nadruk op multimedia, niet op
bestandsbeheer
Blijven de referentie
Slide 17
SOLOMOCO
Google visie: zorg dat je SOLOMOCO
bent
SO = social
LO = local
MO = mobile
CO = commerce
Slide 18
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
Slide 19
Android
Alle apps werken niet op alle versies van
Android
Open OS
Volledige connectiviteit bvb Bluetooth (BT)
Gecertificeerd door Google (is van Google)
Marktleider
Slide 20
WP8 Windows Phone 8
Vlotte en intuïtieve interface
Live Tiles Homescreen met beperkte info
Beperkte BT connectiviteit
Zeer afgesloten OS...
Slide 21
3 soorten Apps
Native
Web
Hybrid
Slide 22
Native Apps
Slide 23
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
Slide 24
Native Apps
Multitasking: verschillende applicaties
draaien samen (op achtergrond)
Slide 25
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
Slide 26
Slide 27
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
Slide 28
Native App
Slide 29
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
Slide 30
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
Slide 31
Voorbeelden Native Apps
Skype App (iPhone) , Twitter en Foursquare (Android), Shazam, Wordlands, Angry Birds
Slide 32
Web Apps
Slide 33
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
Slide 34
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) )
Slide 35
Voorbeelden Web Apps
Slide 36
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.
Slide 37
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
Slide 38
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
Slide 39
HTML5
Normaal zijn de mogelijkheden van de
browser op mobiele toestellen beperkt
maar door HTML5 kunnen wel:
Geolocatie
Video…
en audiosupport
Slide 40
Html 5
Slide 41
Html 5
Slide 42
Javascript frameworks
Slide 43
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
Slide 44
Voorbeelden Javascript Toolkits
Slide 45
CSS 3
Slide 46
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
Slide 47
Responsive design
Slide 48
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
Slide 49
Responsive design
Let op voor beelden, beschikbaar maken
in kleinere formaten
Eventueel teksten inkorten
Knoppen moeten herplaatst kunnen
worden
Slide 50
Responsive design: website
Slide 51
Responsive design: tablet
Slide 52
Responsive design: phone
Slide 53
Web Sites – Web Apps
Web Sites leunen aan bij de klassieke
sites
Web Apps lijken op Native Apps
Slide 54
Native vs Web
Slide 55
Slide 56
Voorbeelden Native vs Web
Slide 57
Voorbeelden Native vs Web
Slide 58
Voorbeelden Native vs Web
Slide 59
Slide 60
Hybride App
Slide 61
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
Slide 62
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
Slide 63
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
Slide 64
Web View
Slide 65
Web ingebed in Native
Slide 66
Voorbeeld Sp!tsnieuws
Slide 67
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.
Slide 68
Voorbeeld Sp!tsnieuws
Slide 69
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
Slide 70
Voorbeeld Sp!tsnieuws
Slide 71
Voorbeelden Hybride Apps
Slide 72
Slide 73
Slide 74
Vergelijken
Slide 75
Distributie
Marketplaces
Zorg dat je gevonden wordt (730,686 apps
in iTunes Store)
App SEO
http://www.slideshare.net/kolinko/app-store-seotutorial
http://www.slideshare.net/misteroo/how-to-marketyour-app
Zorg voor grote marktpenetratie
Platform vs User Reach
Slide 76
Platform vs User Reach
http://www.slideshare.net/andreasc/101-myths-about-the-mobile-economy
Slide 77
App bouwen
Slide 78
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
Slide 79
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.’
Slide 80
Slide 81
Verschillende stappen
Slide 82
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
Slide 83
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-microservices-7000035797/?s_cid=e232&ttag=e232&ftag=TRE6a12a91
Slide 84
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
Slide 85
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/)
Slide 86
Free software om eenvoudige
apps te maken
Appsbar (http://www.appsbar.com/)
Fluid (http://fluidapp.com/)
Slide 87
Free software om eenvoudige
apps te maken
Windows Phone-App maken
Maak in 4 stappen je eigen app
http://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
Slide 88
Slide 89
Slide 90
Slide 91
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
Slide 92
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
Slide 93
Slide 94
Toekomst
Slide 95
Toekomst
Mobile payments
eWallet (google, paypal)
Via je telefoon factuur (operator billing)
Micro payments
In-app payments
Loyalty
Passbook
Slide 96
Toekomst
Augmented reality
Layar
….
LBS: location based services, geofences…
… en zoveel meer
Slide 97
Mobiele Web 3.0
http://www.slideshare.net/TerryRibb/web-30-platforms-devcon5-conference
Slide 98
Mobiele Web 2.0 vs 3.0
Slide 99
Voorbeeld Web 2.0 Starbucks
Slide 100
Web 3.0
Semantische bovenlaag
A personal agent
Slide 101
Semantische data, Agents,
interacties
Slide 102
Voorbeeld Siri
6
5
4
Reeks 1
Reeks 2
Reeks 3
3
2
1
0
Categorie 1
Categorie 2
Categorie 3
Categorie 4
Slide 103
Voorbeeld Tripit
Slide 104
Voorbeeld iFood
Slide 105
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/
Slide 106
Slide 107
Slide 108
Slide 109
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-mobileweb-apps
http://www.slideshare.net/jamesgpearce/building-cross-platformmobile-web-apps-7925215
Slide 110
Meer info en bronnen
http://www.slideshare.net/TerryRibb/web-30-platformsdevcon5-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
• http://www.bloovi.be/nl/blog/B1195-hoe-beslissen-of-je-bedrijf-een-mobileapp-nodig-heeft?goback=.gde_1814075_member_204978904
Mobile Apps
Slide 2
Slide 3
Slide 4
Slide 5
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)
Slide 6
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)
Slide 7
Smartphones - Tablets
Smart devices (toestellen) in alle soorten en
maten
Andere prijsklasse ≠ snelheid en geheugen
Slide 8
Verschillende formaten
Slide 9
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
Slide 10
Besturingsysteem
OS (Operating System)
Slide 11
Operating System
Verschillende fabrikant – verschillende OS
iOS (Apple): iPhone, iPad
Android (Google): Samsung, HTC…
Windows Phone 8 (Microsoft): Nokia…:
Blackberry: eigen OS
…
Slide 12
Slide 13
Verkoopscijfers
http://www.onbile.com/info/mobile-operating-system-evolution-in-2012/
Slide 14
Markt in 2012
Slide 15
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
Slide 16
iOS
Vlot, intuïtief
Op homescreen enkel snelkoppelingen
Afgesloten OS, geen flash
Nadruk op multimedia, niet op
bestandsbeheer
Blijven de referentie
Slide 17
SOLOMOCO
Google visie: zorg dat je SOLOMOCO
bent
SO = social
LO = local
MO = mobile
CO = commerce
Slide 18
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
Slide 19
Android
Alle apps werken niet op alle versies van
Android
Open OS
Volledige connectiviteit bvb Bluetooth (BT)
Gecertificeerd door Google (is van Google)
Marktleider
Slide 20
WP8 Windows Phone 8
Vlotte en intuïtieve interface
Live Tiles Homescreen met beperkte info
Beperkte BT connectiviteit
Zeer afgesloten OS...
Slide 21
3 soorten Apps
Native
Web
Hybrid
Slide 22
Native Apps
Slide 23
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
Slide 24
Native Apps
Multitasking: verschillende applicaties
draaien samen (op achtergrond)
Slide 25
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
Slide 26
Slide 27
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
Slide 28
Native App
Slide 29
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
Slide 30
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
Slide 31
Voorbeelden Native Apps
Skype App (iPhone) , Twitter en Foursquare (Android), Shazam, Wordlands, Angry Birds
Slide 32
Web Apps
Slide 33
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
Slide 34
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) )
Slide 35
Voorbeelden Web Apps
Slide 36
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.
Slide 37
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
Slide 38
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
Slide 39
HTML5
Normaal zijn de mogelijkheden van de
browser op mobiele toestellen beperkt
maar door HTML5 kunnen wel:
Geolocatie
Video…
en audiosupport
Slide 40
Html 5
Slide 41
Html 5
Slide 42
Javascript frameworks
Slide 43
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
Slide 44
Voorbeelden Javascript Toolkits
Slide 45
CSS 3
Slide 46
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
Slide 47
Responsive design
Slide 48
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
Slide 49
Responsive design
Let op voor beelden, beschikbaar maken
in kleinere formaten
Eventueel teksten inkorten
Knoppen moeten herplaatst kunnen
worden
Slide 50
Responsive design: website
Slide 51
Responsive design: tablet
Slide 52
Responsive design: phone
Slide 53
Web Sites – Web Apps
Web Sites leunen aan bij de klassieke
sites
Web Apps lijken op Native Apps
Slide 54
Native vs Web
Slide 55
Slide 56
Voorbeelden Native vs Web
Slide 57
Voorbeelden Native vs Web
Slide 58
Voorbeelden Native vs Web
Slide 59
Slide 60
Hybride App
Slide 61
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
Slide 62
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
Slide 63
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
Slide 64
Web View
Slide 65
Web ingebed in Native
Slide 66
Voorbeeld Sp!tsnieuws
Slide 67
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.
Slide 68
Voorbeeld Sp!tsnieuws
Slide 69
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
Slide 70
Voorbeeld Sp!tsnieuws
Slide 71
Voorbeelden Hybride Apps
Slide 72
Slide 73
Slide 74
Vergelijken
Slide 75
Distributie
Marketplaces
Zorg dat je gevonden wordt (730,686 apps
in iTunes Store)
App SEO
http://www.slideshare.net/kolinko/app-store-seotutorial
http://www.slideshare.net/misteroo/how-to-marketyour-app
Zorg voor grote marktpenetratie
Platform vs User Reach
Slide 76
Platform vs User Reach
http://www.slideshare.net/andreasc/101-myths-about-the-mobile-economy
Slide 77
App bouwen
Slide 78
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
Slide 79
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.’
Slide 80
Slide 81
Verschillende stappen
Slide 82
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
Slide 83
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-microservices-7000035797/?s_cid=e232&ttag=e232&ftag=TRE6a12a91
Slide 84
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
Slide 85
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/)
Slide 86
Free software om eenvoudige
apps te maken
Appsbar (http://www.appsbar.com/)
Fluid (http://fluidapp.com/)
Slide 87
Free software om eenvoudige
apps te maken
Windows Phone-App maken
Maak in 4 stappen je eigen app
http://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
Slide 88
Slide 89
Slide 90
Slide 91
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
Slide 92
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
Slide 93
Slide 94
Toekomst
Slide 95
Toekomst
Mobile payments
eWallet (google, paypal)
Via je telefoon factuur (operator billing)
Micro payments
In-app payments
Loyalty
Passbook
Slide 96
Toekomst
Augmented reality
Layar
….
LBS: location based services, geofences…
… en zoveel meer
Slide 97
Mobiele Web 3.0
http://www.slideshare.net/TerryRibb/web-30-platforms-devcon5-conference
Slide 98
Mobiele Web 2.0 vs 3.0
Slide 99
Voorbeeld Web 2.0 Starbucks
Slide 100
Web 3.0
Semantische bovenlaag
A personal agent
Slide 101
Semantische data, Agents,
interacties
Slide 102
Voorbeeld Siri
6
5
4
Reeks 1
Reeks 2
Reeks 3
3
2
1
0
Categorie 1
Categorie 2
Categorie 3
Categorie 4
Slide 103
Voorbeeld Tripit
Slide 104
Voorbeeld iFood
Slide 105
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/
Slide 106
Slide 107
Slide 108
Slide 109
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-mobileweb-apps
http://www.slideshare.net/jamesgpearce/building-cross-platformmobile-web-apps-7925215
Slide 110
Meer info en bronnen
http://www.slideshare.net/TerryRibb/web-30-platformsdevcon5-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
• http://www.bloovi.be/nl/blog/B1195-hoe-beslissen-of-je-bedrijf-een-mobileapp-nodig-heeft?goback=.gde_1814075_member_204978904