Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Konstantin Zhandov Presentation

736 views

Published on

  • Be the first to comment

  • Be the first to like this

Konstantin Zhandov Presentation

  1. 1. Технологии для создания мобильных web приложений<br />Константин Жандов<br />
  2. 2. Устройства с web-kit браузерами<br />
  3. 3. iPhone like UI<br />
  4. 4. Layout приложения<br />
  5. 5. Один HTML файл<br />
  6. 6. Загрузка контента<br />1. Все данные сразу<br />2. AJAX<br />3. Частьданных сразу + AJAX<br />
  7. 7. Загрузка контента<br />Все данные сразу<br />AJAX<br />Частьданных сразу + AJAX<br />
  8. 8. Загрузка контента<br />Все данные сразу<br />AJAX<br />Частьданных сразу + AJAX<br />
  9. 9. Загрузка контента<br />Все данные сразу<br />AJAX<br />Часть данных сразу + AJAX<br />
  10. 10. Кэшируем ресурсы<br />CSS<br />Javascript<br />Images<br />
  11. 11. Cache manifest<br />#Cache v1.0<br />CAHCE MANIFEST<br />index.html<br />stylesheet.css<br />scripts.js<br />image.png<br />
  12. 12. Cache manifest<br />CACHE:<br />stylesheet.css<br />NETWORK:<br />only_online.js<br />FALLBACK:images/ offline_image.png<br />
  13. 13. Cache manifest<br />CACHE:<br />stylesheet.css<br />NETWORK:<br />only_online.js<br />FALLBACK:images/ offline_image.png<br />
  14. 14. Cache manifest<br />CACHE:<br />stylesheet.css<br />NETWORK:<br />only_online.js<br />FALLBACK:images/ offline_image.png<br />
  15. 15. Cache manifest<br />CACHE:<br />stylesheet.css<br />NETWORK:<br />only_online.js<br />FALLBACK:images/ offline_image.png<br />
  16. 16. Cache manifest<br />#Cache v1.0<br />CAHCE MANIFEST<br />index.html<br />stylesheet.css<br />scripts.js<br />image.png<br />
  17. 17. Подключение manifest файла<br /><!DOCTYPE html><br /><htmlmanifest="cache.manifest"><br /># MIME type<br />text/cache-manifestmanifest<br />
  18. 18. Online или offline?<br />if (navigator.onLine == false)<br />{<br />// Блокируем бессмысленные действия<br />}<br />
  19. 19. Локальное хранение данных<br /><ul><li>Web Storage
  20. 20. Web SQL Database</li></li></ul><li>Web Storage<br /><ul><li> Session Storage
  21. 21. Local Storage</li></li></ul><li>Web Storage API<br /><ul><li>setItem
  22. 22. getItem
  23. 23. removeItem
  24. 24. clear
  25. 25. length</li></li></ul><li>Web Storage API<br />localStorage.setItem('username', 'SomeUser');<br />varusername = localStorage.getItem('username'); localStorage.removeItem('username');<br />varstorageCount = localStorage.length;<br />localStorage.clear();<br />
  26. 26. Web SQL Database<br /><ul><li>openDatabase
  27. 27. transaction
  28. 28. exequteSql</li></li></ul><li>openDatabase<br />var db = openDatabase("someDb", "1.0", "Some local database", 5242880);<br />
  29. 29. transaction<br />db.transaction(function(tx){    // Some sql})<br />
  30. 30. exequteSql<br />db.transaction(function(tx){<br />tx.exequteSql(query, [parameters], function(tx, result){}, function(tx, error){})<br />})<br />
  31. 31. Geolocation<br />
  32. 32. Geolocation API<br />if (navigator.geolocation)navigator.geolocation.getCurrentPosition(showResult);<br />function showResult (position){   var latitude = position.coords.latitude;<br />var longitude = position.coords.longitude;}<br />
  33. 33. Технологии для создания мобильных web приложений<br />Константин Жандов<br />

×