Wild wild web. html5 era
Upcoming SlideShare
Loading in...5
×
 

Wild wild web. html5 era

on

  • 3,905 views

 

Statistics

Views

Total Views
3,905
Views on SlideShare
3,682
Embed Views
223

Actions

Likes
2
Downloads
10
Comments
0

6 Embeds 223

http://web-sites 120
http://localhost 57
http://192.168.88.208 35
http://web-sites.kontur 9
http://nv-ur-077 1
http://mackler 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Процесс эволюции ~ живые системыВсе живые системы различны, но иногда в их развитии можно найти схожие шаблоны
  • Браузеры, Стандарты, Устройства, Технологии и техники... Люди
  • Бурное развитие и стабилизация сменяют друг другаИногда мы видим часто много промежуточных версийИногда мы видим только конечные результаты
  • Считалось, что они вымерли 73 млн. лет назад! ~400 млн. лет назадпути их предков разошлись и одна из ветвей в конечном счете стала нами!Буквально несколько дней назад появилась информация, что японский аквариум провинции Фукусима сообщил о запечатлении на пленку молодого целаканта в водах Индонезии. //http://www.cybersecurity.ru/news/136097.html
  • Старые версии браузеров будут всегдаФрагментация будет всегдаосновная причина – изоляция и отсутствие конкуренции для развитияВопрос вМасштабе, скорости измененийПереносимости решений (адаптации)
  • 375 млн. лет назад. Не вполне понятно, зачем они выходили на сушу, но среди поводов называются кислород и солнце (для повышения собственной температуры – современные крокодилы и ящерицы тоже греются на солнце), возможно, также пропитание.
  • Токсоплазмоз, болезнь, вызываемая токсоплазмой, обычно протекает у человека легко.

Wild wild web. html5 era Wild wild web. html5 era Presentation Transcript

  • Wild Wild Web. Эра HTML5Константин Кичинскийkonkich@microsoft.com@kichinskyhttp://html5insight.ru.тостер {веб-разработка} Microsoft
  • 1Шаблоны эволюции.тостер {веб-разработка}
  • История веба— это историямультиэволюции..тостер {веб-разработка}
  • 1.1Возникновение видов.тостер {веб-разработка}
  • Эволюция системпостепенна, но не всегда мывидим промежуточные шаги..тостер {веб-разработка}
  • Эволюция живых системприводит к видовомуразнообразию.Эволюция браузеров приводитк... фрагментации!.тостер {веб-разработка}
  • 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
  • Эволюция сложнее, чем простопереход от версии к версии.
  • Разнообразие браузеров 4 версии IE 11 версий Chrome 8 версий Firefox 5 версий Safari http://www.netmarketshare.com 3 версии Opera.x
  • 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 не определено
  • http://ie6countdown.com
  • Латимерия(Целакант)
  • Старые браузеры будут всегда..тостер {веб-разработка}
  • Для зоопарка нужныстандарты.Для старых версий нужнаразумность..тостер {веб-разработка}
  • 1.2Усложнение организмов.тостер {веб-разработка}
  • ПримерАгенты и сигналы в ―HTML5‖.тостер {веб-разработка}
  • Усложнение организмов
  • Усложнение приложений
  • Web Workers// UI Threadvar worker = new Worker(worker.js);worker.onmessage = function (event) { $(result).text = event.data;};// worker.jsvar n = getNextPrime();postMessage(n); Microsoft
  • 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
  • ПримерИзоляция особей в ―HTML5‖.тостер {веб-разработка}
  • Изоляция особей
  • Изоляция сессий приложения
  • Web Storage<label> <input type="checkbox"onchange="sessionStorage.insurance =checked ? true : "> I want insurance on this trip.</label>// js-codeif (sessionStorage.insurance) { ... } Microsoft
  • ПримерВыход на сушу в ―HTML5‖.тостер {веб-разработка}
  • Тиктаалик
  • Океан сайтов и приложений
  • Океан сайтов и приложений
  • 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
  • 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
  • 2Почему эра HTML5?.тостер {веб-разработка}
  • HTML5 vs. ―HTML5‖ HTML5 = веб-стандарт — http://www.w3.org/TR/html5/ ―HTML5‖ = экосистема нового поколения веб-стандартов
  • 2.1Дерево эволюции.тостер {веб-разработка}
  • Эволюциявеб-стандартов
  • HTML5 XHTML 1.1 CSS 2.1 HTML 4.01Эволюциявеб-стандартов
  • HTML 2— HTML4
  • CSS 2.1— CSS3Modules
  • РазвитиеXML-мира
  • Эра―HTML5‖
  • 2.2Фундамент HTML5.тостер {веб-разработка}
  • Семантика вчера и сегодня<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
  • Семантика сегодня и завтра<header> <h1>...</h1> <h2>...</h2></header><section> <article>...</article></section><aside>...</aside><footer>...</footer> Microsoft
  • Семантика — это переходк дифференциации клеток. div header div nav div section div section div footer
  • Ланцетник
  • 2.3Роль плагинов/расширенийв эволюции технологий.тостер {веб-разработка}
  • Заполнение пробелов?
  • Они похожи, но не одинаковы Схожие возможности Уникальные возможности Схожие возможности
  • Летучиемышитожелетают
  • ПримерГрафика и видео в HTML5.тостер {веб-разработка}
  • SkyDrive + HTML5 Video
  • OneNote Promo + HTML5Video
  • Bing + HTML5 Video для фона
  • Вообще говоря,плагины — это паразиты.Однако это не означает,что они бесполезны.
  • Сценарии развитияСимбиоз Включение Откази соразвитие внутрь себя от плагина (чистый ―HTML5‖)
  • Токсо-плазма
  • Гены ваппаратеГольджи отбактерий схлоропластами
  • 2.4Эволюция веб-стандартов.тостер {веб-разработка}
  • Эволюция может иметьтупиковые ветки. Иногда онизакрепляются и их таскают ссобой всю жизнь..тостер {веб-разработка}
  • WebSQLDatabase
  • ПримерРабота с данными в ―HTML5‖.тостер {веб-разработка}
  • 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
  • 2.5Практики и стандарты.тостер {веб-разработка}
  • Стандартизация — это нестолько придумываниенового, сколько закреплениеудачного..тостер {веб-разработка}
  • ECMAScript 5var numbers = [31, 33, 35, 37, 39, 41];var primes = numbers.filter(CheckPrimes);function CheckPrimes(value, index, ar) { ...} Microsoft
  • ПримерАнимации и трансформациив CSS3.тостер {веб-разработка}
  • 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
  • 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
  • 2.6Расширение ареала.тостер {веб-разработка}
  • Эволюция веб-стандартов— это также упрощениетого, что обычно делаетсястрашными костылями..тостер {веб-разработка}
  • ПримерСетки и блоки в CSS3.тостер {веб-разработка}
  • 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
  • 3— HTML5 — толстый клиентили..?— Или..тостер {веб-разработка}
  • ―HTML5‖ — это расширениевозможностей и ареаладля веб-разработчиков..тостер {веб-разработка}
  • Десктоп тожеэволюционирует, вбирая в себяметоды распространения веб-сайтов..тостер {веб-разработка}
  • Предкидельфиновпохожина койотов
  • Internet Explorer 10 & HTML5 http://ietestdrive.com http://dev.windows.com http://buildwindows.com http://msdn.com/ie/
  • Главная техническая конференция Microsoft• 160 докладов в 15 треках• Самое большое число мировых экспертов в истории msteched.ru
  • КонстантинКичинскийkonkich@microsoft.com@kichinskyhttp://html5insight.ru http://html5camp.ru