Burak Dede - Developing mobile applications with open source web frameworks

1. ÖZGÜR WEB ÇATILARI İLE MOBİL UYGULAMALAR GELİŞTİRMEK Burak Dede – Sezer Yeşiltaş

2. MOBİL UYGULAMA GELİŞTİRME YÖNTEMLERİ NELERDİR ?

4. Mobil Web Uygulaması

5. Hibrit Mobil Uygulamalar

7. Cihaza indirilir.

10. Blackberry AppWorld

12. Cihazla veri alışverişi yapabilir

14. Belli bir kitleye hitap ediyor , tüm kullanıcılara değil !!!

18. Hızlı güncelleme olanağı

20. Lokal depolama

21. IP & GPS Geolocation

22. Movement detection ( javascript )

24. Donanım & lokasyon ihtiyacı (?)

25. Hıza ihtiyaç duyulan uygulamalarda

26. Geliştirme yapılacak platform tek ise

28. Donanım ihtiyacı olmayınca

29. İşlemci hızı önemini yitirdiği durumlarda

30. Taşınabilirlik önem arzediyosa

31. Uzak bir bilgisayarda saklanması gerekirse

34. HTML & XHTML standartının bir sonraki versiyonu

38. HTML5 den önce çeşitli javascript eklentileri veya cihaza özel api ile

40. HTML 5 – GEOLOCATION function updatePosition(position) { //get the position of the device var myLatitude = position.coords.latitude; var myLongitude = position.coords.longitude; } //callback function for location update navigator.geolocation.getCurrentPosition(updatePosition) ; //check if browser support geolocation if (Modernizr.geolocation) { // let's find out where you are!} else { // no native geolocation support available :( // maybe try Gears or another third-party solution}

42. Web Sql Veritabanı & String (key-value) depolama

44. Her yeni sayfa isteğinde tarayıcı cookie’yi server tarafına tekrar gönderir

45. Yerel depolamada ise javascript ile uygulama bu veriye ulaşılabilir

46. GÜVENLİK ??? - Sandbox

47. HTML 5 – LOCAL STORAGE localStorage.setItem("height", "400"); //store height key with 400 value var height = localStorage.getItem("height"); //retrieve height back if(!localStorage.getItem("height")) alert('no height set yet'); else alert('height is :' + localStorage.getItem("height")); // web sql database var db = window.openDatabase("Database Name", "Database Version"); db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback); });

49. Gecko ve Opera daha sonra kullanmaya başladı

51. Bitmap imajını anlık olarak işlemeye izin verir

52. HTML 5 ‘in bir parçası

53. HTML 5 – CANVAS <canvas id=&quot;canvas&quot; width=&quot;838&quot; height=&quot;220&quot;> </canvas> <script> var canvasContext = document.getElementById(&quot;canvas&quot;).getContext(&quot;2d&quot;); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke(); </script>

55. canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);

57. HTML 5 – VIDEO & AUDIO <video width=&quot;640&quot; height=&quot;360&quot; controls> <!-- MP4 must be first for iPad! --> <source src=&quot;__VIDEO__.MP4&quot; type=&quot;video/mp4&quot; /> <!-- WebKit video --> <source src=&quot;__VIDEO__.OGV&quot; type=&quot;video/ogg&quot; /> <!-- Firefox / Opera --><!-- fallback to Flash: --> <object width=&quot;640&quot; height=&quot;360&quot; type=&quot;application/x-shockwave-flash&quot; data=&quot;__FLASH__.SWF&quot;> <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> <param name=&quot;movie&quot; value=&quot;__FLASH__.SWF&quot; /> <param name=&quot;flashvars” value=&quot;controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO_.MP4” /> <!-- fallback image. note the title field below, put the title of the video there --> <img src=&quot;__VIDEO__.JPG&quot; width=&quot;640&quot; height=&quot;360&quot; alt=&quot;__TITLE__&quot; title=&quot;No video playback capabilities, please download the video below&quot; /> </object> </video>

58. HTML 5 – VIDEO vs FLASH