Интерфейс пользователя: от начала
времен и до наших дней
Михаил Колганов
архитектор, Тамтэк
До н.э.
В 1990 году в CERN разработан протокол HTTP, язык
разметки HTML и первый веб-браузер
Да, это там где БАК
Первый Web-сервер
До н.э.
В 1990 году в CERN разработан протокол HTTP, язык
разметки HTML и первый веб-браузер
NCSA Mosaic
До н.э.
В 1990 году в CERN разработан протокол HTTP, язык
разметки HTML и первый веб-браузер
NCSA Mosaic
Netscape Navigator
До н.э.
В 1990 году в CERN разработан протокол HTTP, язык
разметки HTML и первый веб-браузер
NCSA Mosaic
Netscape Navigator
Основан W3C
Web = HTML + ? + ?
1990 г
Web = HTML + JavaScript + ?
1990 г
1995 г
Web = HTML + JavaScript + CSS
1990 г
1996 г
1995 г
Война браузеров
График популярности браузеров
Фронтенд до н.э.
Фронтенд сегодня
AJAX
asynchronous JavaScript and XML
Без AJAX С AJAX
HTML5 + CSS3
Flash против HTML5
Flash против HTML5
Статистика браузеров по платформам
http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-
201508-201608-bar
Адаптивный веб-интерфейс
Адаптивный веб-интерфейс
Возможности CSS3
https://codepen.io/iliadraznin/pen/JcqbE
Популярный, есть в каждом браузере
JavaScript
Популярный, есть в каждом браузере
Продвинутый и выразительный
JavaScript
Популярный, есть в каждом браузере
Продвинутый и выразительный
Работает на сервере (Node.js)
* Доклад Андрея Юдина с прошлого HappyDev-lite’15 подробнее о JS:
http://2015-autumn.happydev-lite.ru/room-event/134
JavaScript
Веб-приложения без интернета
Поддержка WebGL — 3D в браузере
http://caniuse.com/#search=webgl
Поддержка WebGL — 3D в браузере
http://k9.github.io/globe-viewer/
Поддержка WebGL — 3D в браузере
http://recordit.co/tLrwIDHcAH
Другие возможности web-браузеров
Web Audio API
Camera API
Fullscreen API
DeviceMotion API
Battery Status API
Vibration API
etc.
Вездесущий веб: Плагин для браузера
и другие на
основе Chromium
Вездесущий веб: Мобильные приложения
https://cordova.apache.org/
Вездесущий веб: Smart TV
https://cordova.apache.org/
Что почитать?
https://htmlacademy.ru (курс по вёрстке)
https://learn.javascript.ru/ (учебник по JavaScript)
http://htmlbook.ru/ (справочник веб-разработчика)
http://caniuse.com/ (доступность фич в браузерах)
https://developer.mozilla.org/en-US/
http://www.w3schools.com/ (много учебников от W3C)
Спасибо за внимание!
Вопросы?
Михаил Колганов, Тамтэк
mike.kolganov@gmail.com

HappyDev-lite-2016-осень, день 2 04 Михаил Колганов. Интерфейс пользователя от начала времен и до наших дней