4. Zašto hibridne aplikacije? write once, run anywhere web developeri su najzastupljeniji programiranje mobilnih aplikacija bez znanja nativnog jezika npr. Objective-C manje programiranja -> jedan kod koji se vrti na više platformi manje testiranja manje održavanja -> jedan kod za debugiranje i implementaciju novih funkcionalnosti
5.
6. Podrška za Webkit iPhone iPad Android Palm WebOS BlackBerry (od OS 6.0) Nokia WRT
7. Web aplikacije - principi jedna html stranica koja sadrži sve ekrane svi ekrani sakriveni osim trenutno aktivnog navigacija pomoću location.hash tako da nema osvježavanja stranice http://stranica.html#drugi_ekran animacije pomoću CSS3 scrollanje dijela ekrana pomoću iScroll javascript plugina
9. Biblioteke za izradu web aplikacija ubrzavanje razvoja gotova logika za prikaz i izmjenu ekrana podrška za rotaciju ekrana CSS prilagođen za mobilne uređaje gotovi GUI elementi i lagana promjena teme automatska kontrola performansi
10. jQTouch http://jqtouch.com/ plugin za jQuery omogućava brzo generiranje ekrana vrlo jednostavan podržava teme nije baš flexibilan animacije ne rade na androidu ne razvija se više -> Sencha besplatan: MIT License
11. Sencha Touch http://www.sencha.com/products/touch/ plugin za ExtJS javascript library od kreatora jQToucha podrška za Android i iOS fenomenalno izgleda i lako se prilagođava komercijalan: od 99$ na više $14M Sequoia Capital
14. Animacija ekrana (1) vidljiv je samo aktivni ekran webkitAnimationEnd handler na novom ekranu postavljaju se CSS klase na oba ekrana po završetku animacije poziva se handler 2 1
15. Animacija ekrana (2) .slideIn { -webkit-animation-duration: 350ms; -webkit-animation-name: slideinfromright; } @-webkit-keyframes slideinfromright { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); } } priča se da je translate3d(x, y, z) brži, ali kod nas je uzrokovao treptanje ekrana pa koristimo translateX
16. Scrollanje sadržaja (1) Cijeli ekran zajedno sa headerom i footerom Dio ekrana pomoću javascripta (CSS positon: fixed NE radi ) iScroll - prati pokrete prsta i generira CSS3 animacije http://cubiq.org/iscroll
19. Geolokacija (1) implementacija ovisi o uređaju iOS, Android v2.2 -> html5 standard Android < v2.2 -> Google gears if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(pos) { alert(pos.coords.latitude+", "+pos.coords.longitude); }); } var provider = google.gears.factory.create("beta.geolocation"); provider.getCurrentPosition(function(pos) { alert(pos.timestamp+": “+pos.latitude+", “+pos.longitude); }, errorCallback, {});
20. Geolokacija (1) Google geo-location-javascript http://code.google.com/p/geo-location-javascript/ iPhone OS 3.x, Android, Windows Mobile Blackberry Devices (8820, 9000,...) Nokia Web Run-Time (Nokia N97,...) webOS Application Platform (Palm Pre) Torch Mobile Iris Browser Mozilla Geode add-on
21. iOS tips (1) aplikacije na desktopu (+ pa “Add to home screen”): ikona ikona bez defaultnog “shine” efekta splash screen <link rel="apple-touch-icon" href="icon.png" /> <link rel="apple-touch-icon-precomposed" href="icon.png" /> <link rel="apple-touch-startup-image" href="splash.png" />
22. iOS tips (2) korisni meta tagovi http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html veličina ekrana i kontrola pinch zooma gašenje detekcije telefonskih brojeva vidljivost statusne trake na vrhu ekrana
25. PhoneGap (1) 200 000 downloada, stotine aplikacija u App Store-u samo WebKit prozor + API za neke platform specific stvari besplatan: MIT License
26. PhoneGap (2) API primjer: korištenje kamere navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI }); function onSuccess(imageURI) { var image = document.getElementById('myImage'); image.src = imageURI;}
27. Appcelerator Titanium (1) wrapper + nativni elementi sučelja koji se kontroliraju iz Javascripta 300 API metoda za komunikaciju prema wrapperu multimedia, kamera, kompleksne funkcionalnosti pomoću nativnih custom plugina dobra dokumentacija, vrlo moćan i vrlo native-like eBay, MTV, Jaguar, Dakine, ... komercijalna upotreba: od 199$ na više mjesečno $6,2M investicije
28. API primjer: Appcelerator Titanium (2) var label1 = Titanium.UI.createLabel({ color:'#999', text:'Hello World!', font:{fontSize:20,fontFamily:'HelveticaNeue'}, textAlign:'center', width:'auto' });
29. QuickConnectFamily osnovna podrška za široku paletu platformi (iOS, Android, BB, WebOS) za iOS postoji najviše funkcionalnosti malo dokumentacije, postoje primjeri spor razvoj, upitna budućnost besplatan
31. Naša iskustva od početka 2010. prvo mijenjali dijelove postojećih nativnih aplikacija sa html elementima do sada 4 potpuno hibridnih aplikacija u to doba nije postojao dovoljno kvalitetan framework -> sami smo ga razvili
34. Što nas je mučilo (1) performanse dosta ovise o snazi uređaja: benchmark na startu pa graceful degradacija detekcija usporenih animacija WebKit ubacuje svoje request headere implementacija proxy servera u wrapperu Reachability test wrapper dojavljuje aplikaciji kada je dostupna internet veza
35. Što nas je mučilo (2) combo box se ne može otvoriti ako je unutar sadržaja koji se scrolla: JS/CSS3 Spining wheel http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch
36. Zaključak (1) znatno ubrzava razvoj/testiranje/debugiranje idealno za jednostavnije aplikacije koje ciljaju na puno plaformi nešto ipak mora biti native: naprednije igre aplikacije s puno animacija rich multimedija
37. Zaključak (2) paziti da se dobije native look&feel dobro za proof of concept aplikacije: Gowalla -> prvo web aplikacija pa native budućnost je svijetla
