Mobile Apps

1. Mobile Apps

2. Watzijn Apps? • App = applicatie • Programmavoor smartphone of tablet • Laatpersonalisatietoe • Meestpopulair: Angrybirds(betalend) Facebook (nietbetalend) • De duurste: VIP Black -- $999.99 (de miljonair app)

3. Wat is een goede app? • Watwil je bereiken? • Voorwie? • 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 bewerkenvan informatie • Tablet: info benaderen, lezen, browsen, media consumptie, noteren, annoteren, tussendoorwerk • Smartphone: sms, email, flitsendwerk

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 • …

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

11. Markt in 2012

12. iOS • Ontwikkeling van een iPhone of iPadapp is niet zo complex, omdat je te maken hebt met één fabrikant en één type toestel • Soft- en hardware zijn perfect afgestemd • iOSwordtsteedsgeupdate • Nieuweappswerken niet op oudetoestellen

13. iOS • Vlot, intuïtief • Op homescreenenkel 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 • Alleappswerken niet op alleversies 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 TilesHomescreen 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 zijnkleinesoftwareprogramma’s • Ontworpenvooreenspecifiekplatform: specifieketoestellen of Operating Systems • Een native Android App zaldusnietwerken op een iPhone • Het programmawordt 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

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 contactenkunnentegelijkverwerktworden • 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, AngryBirds

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 ‘touchexperience’ 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 cssingeladen

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