1. Inspirationsdag 2013
Optimér din forretning med IBM Notes
Mobile enheder
Udfordringer og løsninger

2. Agenda
●
Hvad er en ”mobil”...?
●
Mobile udfordringer
●
Løsninger:
– Responsivt design
– ”Mobil app”-lignende web-design
– ”Mobil app” - men med web-teknologi
– Native mobil app
Inspirationsdag, 24. april 2013 2

3. Hvad er en ”mobil”...?
●
Mange typer enheder, der ikke er en computer
– Telefoner – smartphones
●
Mange størrelser skærme
– Tablets (iPads, etc.)
●
MANGE størrelser skærme
●
Computere med trykfølsom skærm
– Størrelse Ok, men mus → finger...
Inspirationsdag, 24. april 2013 3

4. Hvad er en ”mobil”...?
●
I dette indlæg:
– Tablets
●
Kan ofte benytte et almindeligt web-design (uden ”fast”
skærmstørrelse), så ikke en mobil her
– Trykfølsomme skærme
●
Betragtes her ikke som en mobil
– Smartphones
●
Betragter vi her som en ”mobil”
Inspirationsdag, 24. april 2013 4

5. Mobile udfordringer
●
PLADS....
– Meget mindre skærm
●
Navigering
– Ingen mus – men en STOR finger
●
Netværks-båndbredde
– Typisk meget langsommere dataforbindelse end fra en
computer
Inspirationsdag, 24. april 2013 5

6. Mobile udfordringer – eksempler
●
Svært at læse
●
Svært at navigere
●
Nogle elementer fungerer
slet ikke
– F.eks. Flash på Apple devices
Inspirationsdag, 24. april 2013 6

7. Mobile udfordringer – eksempler
●
Men vi kan zoome..!!!
– Dog ikke helt godt
– Noget af skærmen (her
navigeringen) bliver skjult
Inspirationsdag, 24. april 2013 7

8. Løsninger – hvad kan vi gøre?
●
Svaret er ikke eentydigt – men det ”afhænger
af....”
– Hvordan løsningen skal bruges?
●
Online/offline
●
Få gange/regelmæssigt
●
Brug af enhedens hardware (kamera, etc.)
●
Hvordan brugeren skal ”finde” løsningen
Inspirationsdag, 24. april 2013 8

9. Løsninger
●
Vi vil her gennemgå følgende løsninger:
– Responsivt design
– Web-design, der ligner en ”mobil app”
– En mobil app, der udviklet med web-teknologier
– En native mobil app
Inspirationsdag, 24. april 2013 9

10. Responsivt design
●
Baseret på en bestemt organisering af et site
(”fluid grids”)
●
Via CSS vises denne organisering forskelligt på
forskellige størrelse skærme
– Udvikler definerer de forskellige skærm-størrelser som
”viewports”
●
Samme html sendes til alle enheder
●
Enhed afgør, hvordan siden skal vises
Inspirationsdag, 24. april 2013 10

11. Responsivt design – koncept
Inspirationsdag, 24. april 2013 11

12. Responsivt design – eksempler
●
Collaboration today
– Meget nyttigt site om Notes/Domino
– Baseret på BootStrap (fra Twitter)
– Adresse: www.collaborationtoday.info
– Se eksempler på næste sider...
Inspirationsdag, 24. april 2013 12

13. Collaboration today - browser
Inspirationsdag, 24. april 2013 13

14. Collaboration today - iPad
Inspirationsdag, 24. april 2013 14

15. Collaboration today - iPhone
Inspirationsdag, 24. april 2013 15

16. Responsivt design og
IBM XWork Server
●
XPages...
– Responsivt design er blot ét ”layout” af den html der
sendes til en browser
– Nemt at lave på en XPage
– XWork serveren er ligeglad
– Alle komponenter til at vise/hente data fungerer upåvirket
af designet
Inspirationsdag, 24. april 2013 16

17. Responsivt design
●
Fordel
– ”Lille” indgreb i forhold til ”normalt” site
– Kræver ikke efterfølgende vedligehold
– Nemt at lave med IBM XWork Server og XPages
●
Ulempe
– Fuld båndbredde nødvendig, da al html sendes også til
mobiler
– Ofte lange sider på mobil
Inspirationsdag, 24. april 2013 17

18. ”Mobil app”-lignende webdesign
●
Html5
– Gode muligheder for at lave et layout, der ligner en mobil
”app”
– Navigering som i en app
– One page application
●
Stadigvæk en web-side
– Al html sendes over linien
– Kræver online adgang
Inspirationsdag, 24. april 2013 18

19. ”Mobil app”-lignende webdesign
●
Hvordan?
●
Flere frameworks, bl.a.:
– Dojo Mobile (kommer med IBM XWork Server og XPages)
– jQuery Mobile
●
Udseende:
– Ens for alle mobiler? … eller ...
– Ligne den mobile platform?
Inspirationsdag, 24. april 2013 19

20. Dojo mobile
●
Er indbygget i Domino Designer som ”Mobile
Controls” for XPages
●
Er som udgangspunkt forskelligt for Android
(sort/gul) og iPhone (blå/hvid)
– Eksempel: Notesnet medlemmer
●
Kan dog ”styles” (css) til at se anderledes ud
– Eksempel: Uddannelse Uden Grænser
Inspirationsdag, 24. april 2013 20

21. XPages Mobile Controls
Inspirationsdag, 24. april 2013 21

22. Uddannelse Uden Grænser
Inspirationsdag, 24. april 2013 22

23. jQuery mobile
●
Deaktiver Dojo for at minimere overførsel af
ressourcer
●
Er som udgangspunkt ens for Android og
iPhone – flere standard layouts
●
Fylder mindre og er nemt at gå i gang med
●
Kan også ”styles” (css) til at se anderledes ud
– Eksempel: Kalundborgmessen 2012
Inspirationsdag, 24. april 2013 23

24. Kalundborgmessen 2012
Inspirationsdag, 24. april 2013 24

25. ”Mobil app”-lignende webdesign
●
Nemt og
praktisk at
tilføje som
ikon – en
”app”....
Inspirationsdag, 24. april 2013 25

26. ”Mobil app”-lignende webdesign og
IBM XWork Server
●
XPages...
– Dojo mobile kommer med XPages
– jQuery mobile kræver 2 filer...
– Nemt at lave på en XPage
– XWork serveren er ligeglad
– Alle komponenter til at vise/hente data fungerer upåvirket
af designet
Inspirationsdag, 24. april 2013 26

27. ”Mobil app”-lignende webdesign
●
Fordel
– Layout rettet direkte mod mobil (størrelse & navigering)
– Godt til lejlighedsvis brug, f.eks. udstilling (QR-kode)
– Nemt at lave med IBM XWork Server og XPages
●
Ulempe
– Fuld båndbredde nødvendig, da al html sendes også til
mobiler
●
Kan i nogen grad afhjælpes med caching – men det er kompliceret...
Inspirationsdag, 24. april 2013 27

28. ”Mobil app” - m. web-teknologi
●
Er en lokal app
– Kaldt direkte fra en webside – eller...
– Pakket som en ”native” app
●
Distribueres via app-stores
●
Udvikles én gang (til flere platforme)
●
Bærende sprog: JavaScript
●
Frameworks:
– Sencha Touch
– AppCelerators Titanium
Inspirationsdag, 24. april 2013 28

29. ”Mobil app” - m. web-teknologi
●
Kendetegn
– Kode kører lokalt – kan køre uden adgang til server
– Stærkt/gennemarbejdet MVC (Model-View-Controller)
eller MVVM (Model-View-ViewModel) pattern
– Mindre fokus på formatering/udseende
– Mere fokus på ”rigtig” programmering (funktioner,
navigering, m.m.)
– Udveksler kun data med server (typisk via JSON)
●
Langt mindre brug af båndbredde
– Vil typisk gemme kopi af (nogle) data lokalt
●
Mindre brug af båndbredde – offline muligt
Inspirationsdag, 24. april 2013 29

30. ”Mobil app” - m. web-teknologi
●
Visuelt kan det være svært at
se forskel, men koden kan
køre lokalt – og langt
hurtigere...
Inspirationsdag, 24. april 2013 30

31. ”Mobil app” - m. web-teknologi og
IBM XWork Server
●
Perfekt som JSON-webservice provider
– XAgent (XPage uden UI) – fuldstændig kontrol
– Sikkerhed (bruger-rettigheder)
●
Også som ”gateway” til andre systemer
– Mange integrations-muligheder til f.eks. RDBMS'er
●
Java: Masser af 3. parts værktøjer til JSON og
webservices
Inspirationsdag, 24. april 2013 31

32. ”Mobil app” - m. web-teknologi
●
Fordele
– Udvikles kun én gang til flere platforme
– Har de fleste karakteristika som native mobile apps
– Kan køre lokalt/off-line
– Kan cache data lokalt
– Kan også ”pakkes ind” i Apache Cordova (PhoneGap) for at
give adgang til fysisk hardware (f.eks. kamera)
– Optimeret kommunikation med serveren – lille forbrug af
netværks-båndbredde
– Kører hurtigt
– Kan styles via CSS (som web-apps)
Inspirationsdag, 24. april 2013 32

33. ”Mobil app” - m. web-teknologi
●
Ulemper
– Mere kompliceret udvikling end web-apps
●
Dog er der meget omfattende dokumentation og trænings-videoer
– Tager længere tid at udvikle end en web-app.
– Synkronisering mellem server og lokal DB skal egen-
udvikles
Inspirationsdag, 24. april 2013 33

34. Native mobil app
●
Som vi kender...., f.eks.
DMI Byvejret – med
avancerede UI-
egenskaber
Inspirationsdag, 24. april 2013 34

35. Native mobil app
●
Distribueres via ”app stores”
– Android: Google Play
– iPhone: Apple's App Store
●
Skrevet i platformens ”eget” sprog
– Android: Java, udvikles i f.eks. Eclipse
– iPhone: Objective C, udvikles i Xcode (Mac)
Inspirationsdag, 24. april 2013 35

36. Native mobil app
●
Anvendelsesområder:
– Spil...!
– Områder med store krav til UI og hastighed
– Løsninger, som har brug for push-teknologi
– … kan naturligvis også bruges til alle mulige administrative
løsninger
Inspirationsdag, 24. april 2013 36

37. Native mobil app og
IBM XWork Server
●
Perfekt som JSON (eller XML) Webservice
provider....
…. faktisk samme karakteristika som for
”Mobil-app” m. web-teknologi ;-)
Inspirationsdag, 24. april 2013 37

38. Native mobil app
●
Fordele:
– ”Alt” kan lade sig gøre (events, UI, integration til hardware,
etc.)
– Kører hurtigt (hurtigst...)
– Beskeder kan ”pushes” ud til telefonen
– Økosystem for betaling for app.
– Data kan lagres lokalt og integreres på samme måde som
for ”Mobil app” m. web-teknologi
– XWork Server glimrende til at servere JSON data
Inspirationsdag, 24. april 2013 38

39. Native mobil app
●
Ulemper:
– INGEN genbrug af:
●
Programmerings-kompetencer
●
Forretningslogik
– Derfor langt dyrere at udvikle
– SKAL installeres på telefonen (dvs. mindre oplagt til adhoc
anvendelse)
Inspirationsdag, 24. april 2013 39

40. Opsamling
●
Responsivt design
●
”Mobil app”-lignende web-design
●
”Mobil app” m. web-teknologier
●
Native mobil app
●
IBM XWork Server og XPages passer fint til alle
modellerne :-)
Inspirationsdag, 24. april 2013 40

41. Opsamling
Inspirationsdag, 24. april 2013 41
html og CSS
Responsivt design:

42. Opsamling
Inspirationsdag, 24. april 2013 42
mobilt html og CSS
”Mobil app”-lignende web-design:

43. Opsamling
Inspirationsdag, 24. april 2013 43
JSON - data
”Mobil app” m. web-teknologi:
Data
App storeEvt.

44. Opsamling
Inspirationsdag, 24. april 2013 44
JSON - data
Native mobil app:
Data
App store
Data
Google Play

45. Du er også velkommen til at kontakte mig:
John Dalsgaard
Dalsgaard Data A/S
Solbjergvej 42, Solbjerg
DK-4270 Høng
Telefon: +45 4914-1271
Email: john@dalsgaard-data.dk
www.dalsgaard-data.dk
Inspirationsdag, 24. april 2013 45