Wild wild web. html5 era

3,810 views
3,753 views

Published on

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

No Downloads
Views
Total views
3,810
On SlideShare
0
From Embeds
0
Number of Embeds
225
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Процесс эволюции ~ живые системыВсе живые системы различны, но иногда в их развитии можно найти схожие шаблоны
  • Браузеры, Стандарты, Устройства, Технологии и техники... Люди
  • Бурное развитие и стабилизация сменяют друг другаИногда мы видим часто много промежуточных версийИногда мы видим только конечные результаты
  • Считалось, что они вымерли 73 млн. лет назад! ~400 млн. лет назадпути их предков разошлись и одна из ветвей в конечном счете стала нами!Буквально несколько дней назад появилась информация, что японский аквариум провинции Фукусима сообщил о запечатлении на пленку молодого целаканта в водах Индонезии. //http://www.cybersecurity.ru/news/136097.html
  • Старые версии браузеров будут всегдаФрагментация будет всегдаосновная причина – изоляция и отсутствие конкуренции для развитияВопрос вМасштабе, скорости измененийПереносимости решений (адаптации)
  • 375 млн. лет назад. Не вполне понятно, зачем они выходили на сушу, но среди поводов называются кислород и солнце (для повышения собственной температуры – современные крокодилы и ящерицы тоже греются на солнце), возможно, также пропитание.
  • Токсоплазмоз, болезнь, вызываемая токсоплазмой, обычно протекает у человека легко.
  • Wild wild web. html5 era

    1. 1. Wild Wild Web. Эра HTML5Константин Кичинскийkonkich@microsoft.com@kichinskyhttp://html5insight.ru.тостер {веб-разработка} Microsoft
    2. 2. 1Шаблоны эволюции.тостер {веб-разработка}
    3. 3. История веба— это историямультиэволюции..тостер {веб-разработка}
    4. 4. 1.1Возникновение видов.тостер {веб-разработка}
    5. 5. Эволюция системпостепенна, но не всегда мывидим промежуточные шаги..тостер {веб-разработка}
    6. 6. Эволюция живых системприводит к видовомуразнообразию.Эволюция браузеров приводитк... фрагментации!.тостер {веб-разработка}
    7. 7. Internet Explorer Chrome Safari Firefox Opera100.00% Ch16 Fx8 Ch15 Fx7 Op11.x IE990.00% Ch14 Sa5.180.00% IE870.00%60.00%50.00% Fx6 http://www.netmarketshare.com40.00% Fx530.00% Sa5 Fx4 Fx3.620.00% IE710.00% IE6 Ch13 Op10.x Ch12 Sa4.1 Fx3.5 0.00% … Fx3 Op9.x Sa4 Jul% Feb% Mar% Apr% Oct% Aug% Sep% Jun% May% Ch5 Fx2
    8. 8. Эволюция сложнее, чем простопереход от версии к версии.
    9. 9. Разнообразие браузеров 4 версии IE 11 версий Chrome 8 версий Firefox 5 версий Safari http://www.netmarketshare.com 3 версии Opera.x
    10. 10. http://html5insight.ru 4 версии IE (6 – 9) 13 версий Chrome (4 – 17) 10 версий Firefox (3.0 – 10.0a) 5 версий Safari (3.1 – 5.1) 2 версии Webkit (533.17, 534.46) за 1 месяц 15 версий Opera (9.64 – 12.00) 2 версии Opera Mini (6.1, 6.24) 1 версия Opera Mobile (9.80) 1 версия Gecko (1.9) 1 версия IE Mobile (9.0) и еще 8 не определено
    11. 11. http://ie6countdown.com
    12. 12. Латимерия(Целакант)
    13. 13. Старые браузеры будут всегда..тостер {веб-разработка}
    14. 14. Для зоопарка нужныстандарты.Для старых версий нужнаразумность..тостер {веб-разработка}
    15. 15. 1.2Усложнение организмов.тостер {веб-разработка}
    16. 16. ПримерАгенты и сигналы в ―HTML5‖.тостер {веб-разработка}
    17. 17. Усложнение организмов
    18. 18. Усложнение приложений
    19. 19. Web Workers// UI Threadvar worker = new Worker(worker.js);worker.onmessage = function (event) { $(result).text = event.data;};// worker.jsvar n = getNextPrime();postMessage(n); Microsoft
    20. 20. Web Messaging var channel = new MessageChannel();1 worker.postMessage({code:"port"}, [channel.port2]);3 channel.port1.onmessage = function (event) { alert("Message is: " + event.data); } // Worker Thread2 onmessage = function (event) { if (event.data.code == "port") { event.ports[0].postMessage("Port received."); } } Microsoft
    21. 21. ПримерИзоляция особей в ―HTML5‖.тостер {веб-разработка}
    22. 22. Изоляция особей
    23. 23. Изоляция сессий приложения
    24. 24. Web Storage<label> <input type="checkbox"onchange="sessionStorage.insurance =checked ? true : "> I want insurance on this trip.</label>// js-codeif (sessionStorage.insurance) { ... } Microsoft
    25. 25. ПримерВыход на сушу в ―HTML5‖.тостер {веб-разработка}
    26. 26. Тиктаалик
    27. 27. Океан сайтов и приложений
    28. 28. Океан сайтов и приложений
    29. 29. File APIvar reader = new FileReader();// Read file into memory as UTF-16reader.readAsText(readFile, "UTF-16");// Handle progress, success, and errorsreader.onprogress = updateProgress;reader.onload = loaded;reader.onerror = errorHandler;//...var fileString = evt.target.result; Microsoft
    30. 30. Application Cache API("AppCache")CACHE MANIFESTCACHE:script/library.jscss/stylesheet.cssimages/figure1.pngFALLBACK:photos/ figure2.pngNETWORK:figure3.png=========<!doctype html><html manifest="appcache.manifest"> Microsoft
    31. 31. 2Почему эра HTML5?.тостер {веб-разработка}
    32. 32. HTML5 vs. ―HTML5‖ HTML5 = веб-стандарт — http://www.w3.org/TR/html5/ ―HTML5‖ = экосистема нового поколения веб-стандартов
    33. 33. 2.1Дерево эволюции.тостер {веб-разработка}
    34. 34. Эволюциявеб-стандартов
    35. 35. HTML5 XHTML 1.1 CSS 2.1 HTML 4.01Эволюциявеб-стандартов
    36. 36. HTML 2— HTML4
    37. 37. CSS 2.1— CSS3Modules
    38. 38. РазвитиеXML-мира
    39. 39. Эра―HTML5‖
    40. 40. 2.2Фундамент HTML5.тостер {веб-разработка}
    41. 41. Семантика вчера и сегодня<div class="header"> <h1>...</h1> <h2>...</h2></div><div class="section"> <div class="article">...</div></div><div class="sidebar">...</div><div class="footer">...</div> Microsoft
    42. 42. Семантика сегодня и завтра<header> <h1>...</h1> <h2>...</h2></header><section> <article>...</article></section><aside>...</aside><footer>...</footer> Microsoft
    43. 43. Семантика — это переходк дифференциации клеток. div header div nav div section div section div footer
    44. 44. Ланцетник
    45. 45. 2.3Роль плагинов/расширенийв эволюции технологий.тостер {веб-разработка}
    46. 46. Заполнение пробелов?
    47. 47. Они похожи, но не одинаковы Схожие возможности Уникальные возможности Схожие возможности
    48. 48. Летучиемышитожелетают
    49. 49. ПримерГрафика и видео в HTML5.тостер {веб-разработка}
    50. 50. SkyDrive + HTML5 Video
    51. 51. OneNote Promo + HTML5Video
    52. 52. Bing + HTML5 Video для фона
    53. 53. Вообще говоря,плагины — это паразиты.Однако это не означает,что они бесполезны.
    54. 54. Сценарии развитияСимбиоз Включение Откази соразвитие внутрь себя от плагина (чистый ―HTML5‖)
    55. 55. Токсо-плазма
    56. 56. Гены ваппаратеГольджи отбактерий схлоропластами
    57. 57. 2.4Эволюция веб-стандартов.тостер {веб-разработка}
    58. 58. Эволюция может иметьтупиковые ветки. Иногда онизакрепляются и их таскают ссобой всю жизнь..тостер {веб-разработка}
    59. 59. WebSQLDatabase
    60. 60. ПримерРабота с данными в ―HTML5‖.тостер {веб-разработка}
    61. 61. Indexed DBvar oDB;var dbReq = window.msIndexedDB.open("EventsDB");dbReq.onsuccess = function( event ) { oDB = event.target.result;};...var events = [{ date: "281011", name: "Toster.Web" }, { date: "301111", name: "HTML5Camp" } ];var request = oDB.setVersion("1.0");request.onsuccess = function( event ) { var objectStore = oDB.createObjectStore("events", { keyPath: "name" }); objectStore.createIndex("date", "date", { unique: false }); for (i in events) { objectStore.add(events[i]); }}; Microsoft
    62. 62. 2.5Практики и стандарты.тостер {веб-разработка}
    63. 63. Стандартизация — это нестолько придумываниенового, сколько закреплениеудачного..тостер {веб-разработка}
    64. 64. ECMAScript 5var numbers = [31, 33, 35, 37, 39, 41];var primes = numbers.filter(CheckPrimes);function CheckPrimes(value, index, ar) { ...} Microsoft
    65. 65. ПримерАнимации и трансформациив CSS3.тостер {веб-разработка}
    66. 66. CSS3 3D Transformsdiv{ -ms-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0,0.406737, 0, 0, 0, 0, 1); -ms-transform: translate3d(20px, -60px, 50px);} Microsoft
    67. 67. CSS3 Animationsdiv:active { -ms-animation-name: demo 5s ease 0s 2 normal;}@-ms-keyframes demo { from { -ms-animation-timing-function: ease; } 50% { background-color: purple; -ms-animation-timing-function: ease-in; -ms-transform: translate(20px,30px); } to { background-color: blue; }} Microsoft
    68. 68. 2.6Расширение ареала.тостер {веб-разработка}
    69. 69. Эволюция веб-стандартов— это также упрощениетого, что обычно делаетсястрашными костылями..тостер {веб-разработка}
    70. 70. ПримерСетки и блоки в CSS3.тостер {веб-разработка}
    71. 71. CSS3 Grid#myGrid { display: -ms-grid; -ms-grid-columns: 100px 1fr 2fr; -ms-grid-rows: 50px 5em auto;}#item1 { -ms-grid-row: 1; -ms-grid-column: 1;}#item2 { -ms-grid-row: 2; -ms-grid-column: 2;} Microsoft
    72. 72. 3— HTML5 — толстый клиентили..?— Или..тостер {веб-разработка}
    73. 73. ―HTML5‖ — это расширениевозможностей и ареаладля веб-разработчиков..тостер {веб-разработка}
    74. 74. Десктоп тожеэволюционирует, вбирая в себяметоды распространения веб-сайтов..тостер {веб-разработка}
    75. 75. Предкидельфиновпохожина койотов
    76. 76. Internet Explorer 10 & HTML5 http://ietestdrive.com http://dev.windows.com http://buildwindows.com http://msdn.com/ie/
    77. 77. Главная техническая конференция Microsoft• 160 докладов в 15 треках• Самое большое число мировых экспертов в истории msteched.ru
    78. 78. КонстантинКичинскийkonkich@microsoft.com@kichinskyhttp://html5insight.ru http://html5camp.ru

    ×