Tips and tricks u razvoju
hibridne mobilne
aplikacije

Srđan Stanić
ShoutEm
ShoutEm v4

● novi dizajn App Buildera
● novi dizajn smartphone aplikacija
● prijelaz s native na hibridnu tehnologiju za
...
iPhone is the KING

http://www.goldgenie.com/gold-iphone5-edition.php
Izazovi

● novi dizajn
● postojeće UI komponente
● nove UI komponente
Tabovi za prikaz
sadržaja različitih
kategorija
Padajući izbornik za
prikaz sadržaja
različitih kategorija
<div class="arrow"></div>

http://getbootstrap.com/2.3.2/javascript.html#popovers
Takeaway

● usability je važniji od cool efekta
● treba cijeniti trenutke kad bolji usability
ujedno znači i manje posla p...
Pull down to refresh
http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/
<div class="circle-wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="infinite-progress-bar"></div>
Slide menu
Takeaway

● think outside the box
● ponekad tehnički problem možete riješiti
dizajnerskim rješenjem
● ne treba se bojati n...
Umetnuta
galerija slika
var scroller = new iScroll(
'wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false
}
);
KAOS!
SWIPE
CONTROLLER!
http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/events.html
http://bitovi.com/blog/2010/10/a-crash-course-in-how-...
Swipe Controller

shm.swipeController = {
/**
* @param handler: reference to an object which handles the events
* @param e...
Takeaway

UKP > P1 + P2 + P3
Kad se dizajner
razmaše
Kad se dizajner
razmaše
CSS može sve
element.style {
position: absolute;
border-width: 69px 469px 507px
17px;
}
.dimmed-background.has-visible-are...
Optimizacija performansi

http://pocketnow.com/2012/05/20/frustrations-of-a-windows-phone-user
Sencha
prije:
<img
src='http://shoutem.com/files/u.jpg'
alt='My large image'
/>
poslije:
<img
src='http://src.sencha.io/ht...
Zaključak

● web tehnologije su “spremne”
● native daje bolji UX
● web daje dovoljno dobar UX
Pitanja?

email: srdan@shoutem.com
twitter: @srstanic
Tips and tricks u razvoju hibridne mobilne aplikacije
Tips and tricks u razvoju hibridne mobilne aplikacije
Tips and tricks u razvoju hibridne mobilne aplikacije
Tips and tricks u razvoju hibridne mobilne aplikacije
Tips and tricks u razvoju hibridne mobilne aplikacije
Tips and tricks u razvoju hibridne mobilne aplikacije
Tips and tricks u razvoju hibridne mobilne aplikacije
Tips and tricks u razvoju hibridne mobilne aplikacije
Upcoming SlideShare
Loading in …5
×

Tips and tricks u razvoju hibridne mobilne aplikacije

333 views

Published on

ShoutEm je prilikom zadnje velike nadogradnje platforme objavio iPhone aplikaciju temeljenu na hibridnim tehnologijama. S obzirom na kvalitetnu postojeću aplikaciju razvijenu u native tehnologiji, najveći izazov bio je napraviti aplikaciju koja korisničkim doživljajem neće jako kaskati za prethodnom verzijom. Dapače, nova verzija morala je izgledati kao poboljšanje u odnosu na raniju. U ovom predavanju možete čuti s kojim problemima smo se susreli i kako smo realizirali različite komponente sučelja (pull down to refresh, slide-in menu...) te o mnogim drugim tehničkim izazovima i njihovim, ne nužno tehničkim, rješenjima.

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

  • Be the first to like this

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

No notes for slide

Tips and tricks u razvoju hibridne mobilne aplikacije

  1. 1. Tips and tricks u razvoju hibridne mobilne aplikacije Srđan Stanić ShoutEm
  2. 2. ShoutEm v4 ● novi dizajn App Buildera ● novi dizajn smartphone aplikacija ● prijelaz s native na hibridnu tehnologiju za iPhone app
  3. 3. iPhone is the KING http://www.goldgenie.com/gold-iphone5-edition.php
  4. 4. Izazovi ● novi dizajn ● postojeće UI komponente ● nove UI komponente
  5. 5. Tabovi za prikaz sadržaja različitih kategorija
  6. 6. Padajući izbornik za prikaz sadržaja različitih kategorija
  7. 7. <div class="arrow"></div> http://getbootstrap.com/2.3.2/javascript.html#popovers
  8. 8. Takeaway ● usability je važniji od cool efekta ● treba cijeniti trenutke kad bolji usability ujedno znači i manje posla prilikom implementacije
  9. 9. Pull down to refresh
  10. 10. http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/
  11. 11. <div class="circle-wrapper"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>
  12. 12. <div class="infinite-progress-bar"></div>
  13. 13. Slide menu
  14. 14. Takeaway ● think outside the box ● ponekad tehnički problem možete riješiti dizajnerskim rješenjem ● ne treba se bojati neuobičajenih rješenja
  15. 15. Umetnuta galerija slika
  16. 16. var scroller = new iScroll( 'wrapper', { snap: true, momentum: false, hScrollbar: false, vScrollbar: false } );
  17. 17. KAOS!
  18. 18. SWIPE CONTROLLER!
  19. 19. http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/events.html http://bitovi.com/blog/2010/10/a-crash-course-in-how-dom-events-work.html
  20. 20. Swipe Controller shm.swipeController = { /** * @param handler: reference to an object which handles the events * @param event: touchstart event object (used as the regulation medium) * @param aligning: horizontal ("h"), vertical ("v") */ registerHandler: function(handler, event, aligning) { }, grantsPermissionTo: function(handler, event) { } }
  21. 21. Takeaway UKP > P1 + P2 + P3
  22. 22. Kad se dizajner razmaše
  23. 23. Kad se dizajner razmaše
  24. 24. CSS može sve element.style { position: absolute; border-width: 69px 469px 507px 17px; } .dimmed-background.has-visible-area { background: rgba(0,0,0,0); border-color: rgba(0,0,0,.7); border-style: solid; } .dimmed-background { top: 0; left: 0; right: 0; bottom: 0; z-index: 100; background: rgba(0,0,0,.7); } top left right bottom
  25. 25. Optimizacija performansi http://pocketnow.com/2012/05/20/frustrations-of-a-windows-phone-user
  26. 26. Sencha prije: <img src='http://shoutem.com/files/u.jpg' alt='My large image' /> poslije: <img src='http://src.sencha.io/http://shoutem.com/files/u.jpg' alt='My smaller image' /> http://docs.sencha.io/current/index.html#!/guide/src
  27. 27. Zaključak ● web tehnologije su “spremne” ● native daje bolji UX ● web daje dovoljno dobar UX
  28. 28. Pitanja? email: srdan@shoutem.com twitter: @srstanic

×