Apps voor mobiele toestellen

724 views

Published on

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.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
724
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Apps voor mobiele toestellen

  1. 1. Mobile Apps
  2. 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. 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. 4. Smartphones - Tablets Smart devices (toestellen) in alle soorten en maten Andere prijsklasse ≠ snelheid en geheugen
  5. 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. 6. BesturingsysteemOS (Operating System)
  7. 7. Operating System Verschillende fabrikant – verschillende OS iOS (Apple): IPhone, IPad Android (Google): Samsung, HTC… Windows Phone 8 (Microsoft): Nokia…: Blackberry: eigen OS…
  8. 8. Verkoopscijfershttp://www.onbile.com/info/mobile-operating-system-evolution-in-2012/
  9. 9. Markt in 2012
  10. 10. 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
  11. 11. iOS Vlot, intuïtief Op homescreen enkel snelkoppelingen Afgesloten OS, geen flash Nadruk op multimedia, niet op bestandsbeheer Blijven de referentie
  12. 12. 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
  13. 13. 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)
  14. 14. WP8 Windows Phone 8 Vlotte en intuïtieve interface Live Tiles Homescreen met beperkte info Beperkte BT connectiviteit Zeer afgesloten OS... Zie presentatie
  15. 15. Verschillende formaten
  16. 16. 3 soorten Apps Native Web Hybrid
  17. 17. Voorbeeld Dag v d comm Website Mobiele website app
  18. 18. Native Apps
  19. 19. 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
  20. 20. Native Apps Het programma wordt op de smartphone of tablet geïnstalleerd Multitasking: verschillende applicaties draaien samen (op achtergrond)
  21. 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. 22. Native App Voor ieder OS broncode opnieuw programmeren in andere programmeertaal Duur in aanmaak (verschillende platformen) Duur in onderhoud Wel snel
  23. 23. Native App
  24. 24. 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
  25. 25. 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
  26. 26. Voorbeelden Native AppsSkype App (Iphone) , Twitter en Foursquare (Android), Shazam, Wordlands, Angry Birds
  27. 27. Web Apps
  28. 28. 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
  29. 29. 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) )
  30. 30. Voorbeelden Web Apps
  31. 31. 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.
  32. 32. 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
  33. 33. 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
  34. 34. Html 5
  35. 35. Html 5
  36. 36. Javascript frameworks
  37. 37. 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
  38. 38. Voorbeelden Javascript Toolkits
  39. 39. CSS 3
  40. 40. 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
  41. 41. Responsive design
  42. 42. 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
  43. 43. Responsive design Let op voor beelden, beschikbaar maken in kleinere formaten Eventueel teksten inkorten Knoppen moeten herplaatst kunnen worden
  44. 44. Responsive design: website
  45. 45. Responsive design: tablet
  46. 46. Responsive design: phone
  47. 47. Web Sites – Web Apps Web Sites leunen aan bij de klassieke sites Web Apps lijken op Native Apps
  48. 48. Native vs Web
  49. 49. Voorbeelden Native vs Web
  50. 50. Voorbeelden Native vs Web
  51. 51. Voorbeelden Native vs Web
  52. 52. Hybride App
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. Web View
  57. 57. Web ingebed in Native
  58. 58. Voorbeeld Sp!tsnieuws
  59. 59. 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.
  60. 60. Voorbeeld Sp!tsnieuws
  61. 61. 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
  62. 62. Voorbeeld Sp!tsnieuws
  63. 63. Voorbeelden Hybride Apps
  64. 64. Vergelijken
  65. 65. 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
  66. 66. Platform vs User Reachhttp://www.slideshare.net/andreasc/101-myths-about-the-mobile-economy
  67. 67. 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
  68. 68. 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
  69. 69. Toekomst
  70. 70. Mobiele Web 3.0http://www.slideshare.net/TerryRibb/web-30-platforms-devcon5-conference
  71. 71. Mobiele Web 2.0 vs 3.0
  72. 72. Voorbeeld Web 2.0 Starbucks
  73. 73. Web 3.0Semantische bovenlaagA personal agent
  74. 74. Semantische data, Agents, interacties
  75. 75. Voorbeeld Siri654 Reeks 13 Reeks 22 Reeks 310 Categorie 1 Categorie 2 Categorie 3 Categorie 4
  76. 76. Voorbeeld Tripit
  77. 77. Voorbeeld iFood
  78. 78. 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/
  79. 79. 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
  80. 80. Conceptueel Mobiele gebruikers willen niet de ‘volledige site’, ze willen de ‘volledige ervaring’ Sam Walton:‘The secret of successful retailing is to giveyour customers what they want.’ Jakob Nielsen:‘Mobile is less forgiving than the desktop.’
  81. 81. 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
  82. 82. 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

×