Web 2.0

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?GemakkelijkerSnellerMeer functionaliteiten (integratie met kalender, newsfeed, kaart)

Smartphones - TabletsSmart devices (toestellen) in alle soorten en matenAndere prijsklasse snelheid en geheugen

Wanneer gebruik je wat?Laptop: creeren en bewerken van informatieTablet: info benaderen, lezen, browsen, media consumptie, noteren, annoteren, tussendoor werkSmartphone: sms, email, flitsend werk

Besturingsysteem

OS (Operating System)

Operating SystemVerschillende fabrikant verschillende OSiOS (Apple): IPhone, IPadAndroid (Google): Samsung, HTCWindows Phone 8 (Microsoft): Nokia: Blackberry: eigen OS

Verkoopscijfers

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

Markt in 2012

iOSOntwikkeling van een iPhone of IPad app is niet zo complex, omdat je te maken hebt met n fabrikant en n type toestelSoft- en hardware zijn perfect afgestemdiOS wordt steeds geupdateNieuwe apps werken niet op oude toestellen

iOSVlot, intutiefOp homescreen enkel snelkoppelingenAfgesloten OS, geen flashNadruk op multimedia, niet op bestandsbeheerBlijven de referentie

AndroidVeel fabrikanten ontwikkelen AndroidtoestellenGrote variteit in toestellen en toestelspecificatiesVaak noodzakelijk om binnen n app drie varianten te ontwikkelen (low, medium en high) om zo alle toestellen optimaal te kunnen bedienenAlle apps werken niet op alle versies van Android

AndroidMarktleiderOpen OSVeel fabrikanten ontwikkelen AndroidtoestellenGrote variteit in toestellen en toestelspecificatiesVolledige connectiviteit bvb Bluetooth (BT)Gecertificeerd door Google (is van Google)

WP8 Windows Phone 8Vlotte en intutieve interfaceLive Tiles Homescreen met beperkte infoBeperkte BT connectiviteitZeer afgesloten OS...Zie presentatie

Verschillende formaten

3 soorten AppsNative

Web

Hybrid

Voorbeeld Dag v d commWebsiteMobiele websiteapp

Native Apps

Native AppsNative Apps zijn kleine softwareprogrammas ontworpen om een specifiek platform te draaien. Ontworpen voor specifieke toestellen of Operating Systems.Een Android App zal dus niet werken op een iPhone

Native AppsHet programma wordt op de smartphone of tablet genstalleerdMultitasking: verschillende applicaties draaien samen (op achtergrond)

Native AppsGeschreven 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 programmeertaalDuur in aanmaak (verschillende platformen)Duur in onderhoudWel snel

Native App

Native AppsInteractie rechtstreeks met het OS (Operating System)Geen container app nodigGebruikt de APIs van het OSToepassingen, locatiegegevens, informatie, camerabeelden, en contacten kunnen tegelijk verwerkt wordenDezelfde look-and-feel als OS

Native AppsOphalen via app marktplaats zoals Itunes of App Store (Apple), Play Store (Android), Windows Phone Market (Microsoft),Wordt gedownload en opgeslaan op mobiele toestelOpstarten door ikoon aan te raken op scherm

Voorbeelden Native Apps

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

29

Web Apps

Web AppMeeste gewone websites niet geschikt om mobiel te bezoekenInhoud valt buiten beeld, beelden worden slecht geladen Mobiele website of web app houdt rekening met capaciteit mobiele apparaatEnkel belangrijke informatie wordt getoondAdresbalk kan weggelaten worden

Web AppsInhoud moet elke keer ingeladen wordenInternetverbinding noodzakelijkInstallatie 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 openenDoor 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 AppGeschreven 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

HTML5Hyper 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 tabletsNog in ontwikkeling

Html 5

Html 5

Javascript frameworks

Javascript frameworksWeb Apps worden gemaakt met Javascript ToolkitsOntwikkel-omgevingVereenvoudigt de ontwikkeling van websites en applicaties voor mobiele toestellen en platformenWerkt 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 3CSS = Cascading StyleSheetsCSS is een stylesheet-taal gebruikt om de presentatie-semantiek (uitzicht van teksten) weer te gevenBedoeling is het scheiden van vorm (layout, kleuren lettertypes) en inhoudSass = Syntactically Awesome Stylesheets

Responsive design

Responsive designMobiele website past zich aan in functie van het schermData (eventueel via database) koppelen aan html5Javascript checkt versie en formaat van toestelAfhankelijk hiervan worden verschillende css ingeladen

Responsive designLet 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 sitesWeb Apps lijken op Native Apps

Native vs Web

Voorbeelden Native vs Web

Voorbeelden Native vs Web

Voorbeelden Native vs Web

Hybride App

Hybride AppCombinatie van beideInteressant binnen bedrijfswereldEr wordt een schil gebouwd waarbinnen de mobiele site geladen wordtIs een Native App met daarin (embedded) de htmlAlle voordelen van native Apps

Hybride AppVast basisgeraamteDelen zijn geschreven in web-taalVia RSS wordt inhoud actueel gehoudenInternet is dus nodigMaar telkens inhoud verandert noet native App niet aangepast worden

Alle elementen van een mobiel toestelhttp://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!tsnieuwsLinks en midden: mobiele siteIn 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!tsnieuwsAan de rechterkant is de hybride app weergegevenNavigatie items bovenin de mobiele site zijn vervangen door een app navigatie onderaan het scherm

Voorbeeld Sp!tsnieuws

Voorbeelden Hybride Apps

Vergelijken

DistributieMarketplacesZorg dat je gevonden wordt (730,686 apps in iTunes Store)App SEOhttp://www.slideshare.net/kolinko/app-store-seo-tutorialhttp://www.slideshare.net/misteroo/how-to-market-your-appZorg voor grote marktpenetratiePlatform vs User Reach

Platform vs User Reach

http://www.slideshare.net/andreasc/101-myths-about-the-mobile-economy

Welke appsNuttige apps in bedrijfscontext:Blacklisting, whitelisting: stalkers uitschakelen, nrs die bellen krijgen dan bezettoon, whitelist is dan enkel n nr toelaten in bvb vergaderingAnnoteren pdfScannen OCRMemorecorderRemote desktop: scherm pc overnemenRSS vb flipboard

Welke appsNuttige apps in bedrijfscontext:Qr en barcode scanningNavigatie vb google maps best via app, kaarten worden dan op toestel ingeladen, anders via browser veel dataverkeerNMBSPdf goodreader of ez-reader voor androidApp 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.0Semantische bovenlaag

A personal agent

Semantische data, Agents, interacties

Voorbeeld Siri

Voorbeeld Tripit

Voorbeeld iFood

ToekomstNaast de applicaties op zich, ontstaat ook een volledig nieuw marketing en salesinstrumentRemoteapp (bediening van op afstand)Digital enhanced serviceDiensten en producten controleren en monitorenhttp://www.slideshare.net/tijs/the-future-op-appshttp://pinterest.com/tijs/smart-app-devices/

ConceptueelManage 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, werkvloerDoordring de technologiemensen ervan dat de bezoeker eerst komt, niet de organisatie

ConceptueelMobiele gebruikers willen niet de volledige site, ze willen de volledige ervaringSam 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 bronnenUitstekende video van Worklight (IBM) die ik gevolgd heb bij met maken van deze presentatie (http://youtu.be/Ns-JS4amlTc)

Meer technische info en schemashttp://youtu.be/Ns-JS4amlTchttp://www.youtube.com/watch?v=Ns-JS4amlTc&feature=relatedhttp://www.slideshare.net/jamesgpearce/cross-platform-mobile-web-appshttp://www.slideshare.net/jamesgpearce/building-cross-platform-mobile-web-apps-7925215

Meer info en bronnenhttp://www.slideshare.net/TerryRibb/web-30-platforms-devcon5-conferencehttp://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