Технологии для создания мобильных web приложений<br />Константин Жандов<br />
Устройства с web-kit браузерами<br />
iPhone like UI<br />
Layout приложения<br />
Один HTML файл<br />
Загрузка контента<br />1. Все данные сразу<br />2. AJAX<br />3. Частьданных сразу + AJAX<br />
Загрузка контента<br />Все данные сразу<br />AJAX<br />Частьданных сразу + AJAX<br />
Загрузка контента<br />Все данные сразу<br />AJAX<br />Частьданных сразу + AJAX<br />
Загрузка контента<br />Все данные сразу<br />AJAX<br />Часть данных сразу + AJAX<br />
Кэшируем ресурсы<br />CSS<br />Javascript<br />Images<br />
Cache manifest<br />#Cache v1.0<br />CAHCE MANIFEST<br />index.html<br />stylesheet.css<br />scripts.js<br />image.png<br />
Cache manifest<br />CACHE:<br />stylesheet.css<br />NETWORK:<br />only_online.js<br />FALLBACK:images/ offline_image.png<b...
Cache manifest<br />CACHE:<br />stylesheet.css<br />NETWORK:<br />only_online.js<br />FALLBACK:images/ offline_image.png<b...
Cache manifest<br />CACHE:<br />stylesheet.css<br />NETWORK:<br />only_online.js<br />FALLBACK:images/ offline_image.png<b...
Cache manifest<br />CACHE:<br />stylesheet.css<br />NETWORK:<br />only_online.js<br />FALLBACK:images/ offline_image.png<b...
Cache manifest<br />#Cache v1.0<br />CAHCE MANIFEST<br />index.html<br />stylesheet.css<br />scripts.js<br />image.png<br />
Подключение manifest файла<br /><!DOCTYPE html><br /><htmlmanifest="cache.manifest"><br /># MIME type<br />text/cache-mani...
Online или offline?<br />if (navigator.onLine == false)<br />{<br />// Блокируем бессмысленные действия<br />}<br />
Локальное хранение данных<br /><ul><li>Web Storage
 Web SQL Database</li></li></ul><li>Web Storage<br /><ul><li> Session Storage
 Local Storage</li></li></ul><li>Web Storage API<br /><ul><li>setItem
getItem
removeItem
 clear
 length</li></li></ul><li>Web Storage API<br />localStorage.setItem('username', 'SomeUser');<br />varusername = localStora...
Web SQL Database<br /><ul><li>openDatabase
 transaction
exequteSql</li></li></ul><li>openDatabase<br />var db = openDatabase("someDb", "1.0", "Some local database", 5242880);<br />
transaction<br />db.transaction(function(tx){    // Some sql})<br />
Upcoming SlideShare
Loading in …5
×

Konstantin Zhandov Presentation

702 views
650 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
702
On SlideShare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 />

×