обеспечить связь в случае ядерной войны
ARPANET = Advanced Research Projects
Agency NetworkDARPA = Defense Advanced Research Projects Agency
ARPANET
Разделы презентаций
- Разное
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
История Веб
Содержание
- 1. История Веб
- 2. Как работает веб?
- 3. Как работает веб?
- 4. Как работает веб?
- 5. Зарождение ИнтернетаНа случай ядерной войны
- 6. Создана в 1969 году Управлением перспективных исследовательских
- 7. Межсетевой протоколСоздан на основе протоколов ARPANET в
- 8. IP-адресИдентификатор хоста в рамках сетиХост – компьютер
- 9. LAN и WANLAN = Local Area Network,
- 10. IP работает как почта: умеет передавать пакеты
- 11. Неудобно запоминать IP-адреса, хочется названияDNS = Domain Name SystemDNS : имя → IPDNS
- 12. Есть глобальная сеть, состоящая из подсетей, в
- 13. Слайд 13
- 14. Создание World Wide WebДля ученых всего мира
- 15. Ученыепроводят исследования по всему мирупубликуют научные результаты
- 16. Оформление документовАдресация и перекрестные ссылкиПередача документов по
- 17. Оформление документов
- 18. История веб-разработки
- 19. Слайд 19
- 20. Тэги для описания
- 21. HTML – HyperText Markup Language, язык разметки
- 22. Оформление документов – HTMLАдресация и перекрестные ссылки
- 23. Веб-сервер – это программа, использующая протокол HTTP для передачи данных
- 24. Веб-браузер – это программа для просмотра веб-страниц, содержания веб-документовWorldWideWeb – первый веб-браузерБыл переименован в NexusВеб-браузер
- 25. Оформление документов – HTMLАдресация и перекрестные ссылки
- 26. Оформление документовАдресация и перекрестные ссылкиПередача документов по
- 27. Всемирную паутину образуют миллионы веб-серверов сети Интернет, расположенных по всему мируWorld Wide Web
- 28. NCSA Mosaic – первый веб-браузер с GUINational
- 29. Появился World Wide WebДокументы – благословление и проклятие ВебаHTMLHTTPURLВеб-серверВеб-браузерИтоги
- 30. Слайд 30
- 31. Readonly WebНачало коммерческого использования
- 32. Визионеры считали, что за Интернетом будущее коммерции
- 33. Первые версии Internet Explorer и Netscape Navigator
- 34. Новые веб-сервера – 1995Встроен в WindowsС 1996 года – самый популярный веб-серверInternet Information ServicesApache HTTP Server
- 35. Модули позволяют подключать различные языки программирования к
- 36. СSS = Cascading Style SheetsПозволяет управлять стилями
- 37. Брендан Айк разработал JavaScript для Netscape NavigatorJS
- 38. В том же году компания Microsoft выпустила
- 39. Конец 90-х – начало 2000-х
- 40. Конец 90-х – начало 2000-х
- 41. Конец 90-х – начало 2000-х
- 42. Но что-то пошло не так…
- 43. Война браузеров – 1998Internet Explorer 4.0 победил
- 44. Доступ через телефонные линииМодем
- 45. Немного кодаМаркетингВливание инвестицийБольше маркетингаБольше инвестицийЗачем вообще нужен код? Только маркетинг!Завышенные ожидания
- 46. Крах доткомовГрафик индекса NASDAQ
- 47. ДокументыInternet ExplorerБэкенд: основная логика, генерация HTMLФронтендверсточка, минимальная динамикавсе в одном HTML-файлеИтоги
- 48. Слайд 48
- 49. Web 2.0Взаимодействие с клиентом
- 50. Реальный конкурент IE6, несущий инновации:ВкладкиПлагиныИнструменты разработчикаMozilla возвращается с Firefox – 2002PhoenixFirebirdFirefox
- 51. Развитие серверных фреймворковASP .NET – 2002PHP 5
- 52. Asynchronous JavaScript and XML - подход к построению
- 53. jQuery предоставил единый API для разных браузеровКроссбраузерные
- 54. Переиспользуемые карусельки, работающие во всех браузерах
- 55. Появление jQuery
- 56. Появление jQuery
- 57. Появление jQuery
- 58. Появление jQuery
- 59. Широкополосный интернетРаспространение в 2005Для фото, видео, аудио и множества скриптов
- 60. GoogleGmail – 2004Youtube – 2005Google Docs – 2006Facebook – 2004Spotify – 2006Развивается бизнес на веб
- 61. Интернет-магазины, лендинги, блоги…«Зоопарк» браузеровБэкенд: генерация HTML, основная логикаФронтендверсточка, анимации, запросыотдельно файлы стилей, разметки и JSИтоги
- 62. Слайд 62
- 63. Web Applications
- 64. У веб-приложений низкая производительность по сравнению с нативными приложениями
- 65. Проблематично компилировать язык с динамической типизациейРешение – Just-In-Time-компиляция
- 66. Evergreen-браузер - получает все новые фичи за счет
- 67. Большой взрыв – 2009
- 68. Исполняющая среда, построенная на движке V8Node.js – 2009Райан Дал
- 69. Возможность создавать приложения, работающие вне браузераСерверные =>
- 70. ECMAScript edition 3 был принят еще в
- 71. 2009 - CoffeeScript2011 - Dart от Google2012 - TypeScript от Microsoft2013 - asm.js -
- 72. 2009 – Angular.js от Google2010 - Knockout2010
- 73. Хранение данных: MongoDB, Firebase, …Статический анализ: JSHint,
- 74. Слайд 74
- 75. Google, Facebook, Microsoft и другие IT-компании, развивая свой бизнес в
- 76. ES6 - это рабочее название, но все привыклиОчень много классных улучшенийСтандарт ES2015, известный как ES6
- 77. TC39 - новый процесс стандартизации ECMAScriptНовый стандарт выпускается ежегодноПодробнее о процессе Подробнее о результатахПроцесс стандартизации TC39 – 2015
- 78. Чтобы новый стандарт работал в старых каких-то
- 79. Single Page Application – одностраничные приложение, в
- 80. Веб-приложения
- 81. Веб-приложения
- 82. Веб-приложения
- 83. Single Page Application: одностраничные приложенияБраузеры работают по
- 84. Слайд 84
- 85. Слайд 85
- 86. С чего начать?
- 87. JavaScript http://learn.javascript.ru Mozilla Developer NetworkВерстка HTML и
- 88. ASP.NET Core или другой веб-фреймворк ASP.NET Core на Metanit.comExpress для Node.js Express на Metanit.comБэкенд
- 89. Слайд 89
- 90. Скачать презентанцию
Как работает веб?
Слайды и текст этой презентации
Слайд 6Создана в 1969 году Управлением перспективных исследовательских проектов Минобороны США, чтобы
обеспечить связь в случае ядерной войны
Agency NetworkDARPA = Defense Advanced Research Projects Agency
Слайд 7Межсетевой протокол
Создан на основе протоколов ARPANET в 1972
1 января 1983
– ARPANET перешел на IP, официальная дата рождения Internet
Internet Protocol
Слайд 8IP-адрес
Идентификатор хоста в рамках сети
Хост – компьютер подключенный сети
Хост может
находится в нескольких сетях одновременно со своим IP-адресом в каждой
Слайд 9LAN и WAN
LAN = Local Area Network, локальная сеть
WAN =
World Area Network, глобальная сеть
Маршрутизатор управляет адресацией в локальной сети
и имеет какой-то адрес у вышестоящего маршрутизатора
Слайд 10IP работает как почта: умеет передавать пакеты данных по адресу,
но никаких гарантий доставки
TCP/IP
TCP = Transmission Control Protocol
Устанавливает соединение и
гарантирует доставку за счет нумерации и повторения пакетов
Слайд 12Есть глобальная сеть, состоящая из подсетей, в которой по имени или цифровому адресу
компьютера можно передавать и получать данные
Итоги
Слайд 15Ученые
проводят исследования по всему миру
публикуют научные результаты
в виде статей в
научных журналах
ссылаются на статьи друг друга
Обмениваться статьями через интернет?
Обмен научными
статьями
Слайд 16Оформление документов
Адресация и перекрестные ссылки
Передача документов по сети
Программа для просмотра
Программа
для отправки документов
Протокол взаимодействия этих программ
Обмен научными статьями
Слайд 18
История веб-разработки
Домашних И.
А.,
преподаватель УрФУ
Ключевые слова: интернет,
html, веб-разработкаИстория веб-разработки
Развитие всемирной паутины началось после того,
как Тим Бернерс-Ли изобрел HTML.
Lorem ipsum…
Разметка для документов
Как называются эти вставки?
Слайд 21HTML – HyperText Markup Language, язык разметки гипертекстовых страниц
URL –
Uniform Resource Locator, единообразный определитель местонахождения ресурса
HTTP - HyperText Transfer Protocol,
протокол передачи гипертекста, работает над TCP/IPHTML, URL, HTTP
Слайд 22Оформление документов – HTML
Адресация и перекрестные ссылки – URL
Передача документов
по сети
Программа для просмотра
Программа для отправки и хранения документов
Протокол взаимодействия
этих программ – HTTPОбмен научными статьями
Слайд 23Веб-сервер – это программа, использующая протокол HTTP для передачи данных по сети
При ответе
на HTTP-запрос:
либо отдает файл с локального жесткого диска
либо генерирует ответ
динамическиОбычно использует 80 порт
CERN httpd – первый веб-сервер
Веб-сервер
Слайд 24Веб-браузер – это программа для просмотра веб-страниц, содержания веб-документов
WorldWideWeb – первый
веб-браузер
Был переименован в Nexus
Веб-браузер
Слайд 25Оформление документов – HTML
Адресация и перекрестные ссылки – URL
Передача документов
по сети
Программа для просмотра – веб-браузер
Программа для отправки документов –
веб-серверПротокол взаимодействия этих программ – HTTP
Обмен научными статьями
Слайд 26Оформление документов
Адресация и перекрестные ссылки
Передача документов по сети
Решены в 1986
– 1991
британцем Тимом Бернерсом-Ли
в стенах ЦЕРН
в Женеве в Швейцарии
Обмен научными
статьямиТимоти Джон Бе́рнерс-Ли
Слайд 27Всемирную паутину образуют
миллионы веб-серверов сети Интернет, расположенных по всему миру
World Wide Web
Слайд 28NCSA Mosaic – первый веб-браузер с GUI
National Center for Supercomputing
Applications
at the University of Illinois
Первая версия в 1993 году
Слайд 29Появился World Wide Web
Документы – благословление и проклятие Веба
HTML
HTTP
URL
Веб-сервер
Веб-браузер
Итоги
Слайд 33Первые версии Internet Explorer и Netscape Navigator созданы в 1994 году и использовали
код NCSA Mosaic
Новые браузеры – 1994
Mozilla – внутреннее название
браузера Netscape
Mozilla
= Mosaic Killer + Godzilla
Слайд 34Новые веб-сервера – 1995
Встроен в Windows
С 1996 года – самый
популярный веб-сервер
Internet Information Services
Apache HTTP Server
Слайд 35Модули позволяют подключать различные языки программирования к веб-серверам
PHP = Personal
Home Page Tools – 1994
ASP = Active Server Pages от
Microsoft – 1996…
Генерация HTML на сервере
Слайд 36СSS = Cascading Style Sheets
Позволяет управлять стилями единообразно
CSS – 1994
div
{
color: gray;
}
.orange {
background: orange;
}
.orange span {
color: white;
}
#theSun
{background: yellow;
}
Слайд 37Брендан Айк разработал JavaScript для Netscape Navigator
JS должен был
дополнить Java-апплеты
и
стать Java для простаков
Java и JavaScript от Netscape
vs
Visual C++ и
Visual Basic от MicrosoftJavaScript – 1995
Слайд 38В том же году компания Microsoft выпустила свою реализацию JavaScript,
использовав ее в InternetExplorer и Windows - JScript
Затем JavaScript был стандартизирован
как ECMAScript (ECMA-262)
Слайд 43Война браузеров – 1998
Internet Explorer 4.0 победил Netscape Navigator 4.0
Бесплатный
Интегрированный
в Windows
Нестандартизированные особенности у каждого
Microsoft получает иск от антимонопольщиков
Сотрудники Netscape
основывают Mozilla Foundation
Слайд 45Немного кода
Маркетинг
Вливание инвестиций
Больше маркетинга
Больше инвестиций
Зачем вообще нужен код? Только маркетинг!
Завышенные
ожидания
Слайд 47Документы
Internet Explorer
Бэкенд: основная логика, генерация HTML
Фронтенд
версточка, минимальная динамика
все в одном
HTML-файле
Итоги
Слайд 50Реальный конкурент IE6, несущий инновации:
Вкладки
Плагины
Инструменты разработчика
Mozilla возвращается с Firefox –
2002
Phoenix
Firebird
Firefox
Слайд 51Развитие серверных фреймворков
ASP .NET – 2002
PHP 5 – 2004
Symphony на
PHP– 2005
Ruby on Rails – 2005
Django на Python –
2005nginx – легковесный веб-сервер – 2004
Новое на server-side
Слайд 52Asynchronous JavaScript and XML - подход к построению интерактивных веб-приложений, заключающийся в
фоновом обмене данными браузера с веб-сервером без перезагрузки страницы
Название предложено Джеймсом
ГарретомXmlHttpRequest и другие технологии, лежащие в основе AJAX, были созданы ранее
Примеры приложений: Gmail, ВКонтакте, Яндекс.Карты
AJAX – 2005
Слайд 53jQuery предоставил единый API для разных браузеров
Кроссбраузерные селекторы и переходы
по DOM
События
Обертка над AJAX
Визуальные эффекты
Расширение плагинами
jQuery – 2006
Джон Резиг
Слайд 60Google
Gmail – 2004
Youtube – 2005
Google Docs – 2006
Facebook – 2004
Spotify
– 2006
Развивается бизнес на веб
Слайд 61Интернет-магазины, лендинги, блоги…
«Зоопарк» браузеров
Бэкенд: генерация HTML, основная логика
Фронтенд
версточка, анимации, запросы
отдельно
файлы стилей, разметки и JS
Итоги
Слайд 65Проблематично компилировать язык с динамической типизацией
Решение – Just-In-Time-компиляция
Это ленивая компиляция: только
по запросу в момент выполнения
Впервые в движке TraceMonkey от Mozilla
Затем
в движке V8 от Google в браузере ChromeБыстрый JavaScript был нужен Google для работы своих сервисов
Толчок для развития JavaScript-фреймворков
JIT-компиляция – 2008
Слайд 66Evergreen-браузер - получает все новые фичи за счет фонового автоматического обновления
Впервые
появилось в Chrome
Толчок для развития JavaScript и вебстандартов
Evergreen-браузеры – 2008
Слайд 69Возможность создавать приложения, работающие вне браузера
Серверные => Изоморфные
Десктопные:
текстовый редактор Atom
на
базе Electron в 2014
В 2010 появился Node Package Manager
Слайд 70ECMAScript edition 3 был принят еще в 1999 ECMAScript edition 4
был отменен
ECMAScript edition 5 исправил многие грабли
ES5 – 2009
Слайд 712009 - CoffeeScript
2011 - Dart от Google
2012 - TypeScript от Microsoft
2013 - asm.js - подмножество JS
2014 - Flow от
Facebook
…
JavaScript как Intermediate Language, ASM для браузера
Развитие диалектов ES ≥2009
Слайд 722009 – Angular.js от Google
2010 - Knockout
2010 - Backbone
2011 -
Ember
2013 - React от Facebook
2013 – Vue при поддержке Alibaba
…
Развитие
веб-фреймворков ≥2009
Слайд 73Хранение данных: MongoDB, Firebase, …
Статический анализ: JSHint, ESLint, …
Тестирование: Jasmine,
Mocha, Chai, Sinon, Jest, …
Сборка: Grunt, Gulp, WebPack, …
…
любое английское
слово + .js = название фреймворкаРазвитие всего для JS ≥2009
Слайд 75Google, Facebook, Microsoft и другие IT-компании, развивая свой бизнес в сфере веб и облачных
технологий, активно участвуют в развитии веб-стандартов и технологий
HTML5
CSS3
ECMAScript
Участие крупнейших компаний
≥2009
Слайд 76ES6 - это рабочее название, но все привыкли
Очень много классных
улучшений
Стандарт ES2015, известный как ES6
Слайд 77TC39 - новый процесс стандартизации ECMAScript
Новый стандарт выпускается ежегодно
Подробнее о процессе
Подробнее о
результатах
Процесс стандартизации TC39 – 2015
Слайд 78Чтобы новый стандарт работал в старых каких-то браузерах нужно преобразовать
ES2015 хотя бы в ES5
Babel - транспайлер для JavaScript
Транспайлер - это как
компилятор,
только структура программы не меняетсяBabel
Слайд 79Single Page Application – одностраничные приложение, в которых используется единственный
HTML-документ, как основа, а остальной контент динамически формируется JavaScript или подгружается
посредством AJAX.SPA
Слайд 83Single Page Application: одностраничные приложения
Браузеры работают по стандартам
Бэкенд:
JSON API
тяжелые вычисления,
хранение данных, контроль доступа, обеспечение целостности, бизнес-логика
Фронтенд:
красота и анимации, много
бизнес-логики, автономностьбиблиотеки контролов
Итоги
Слайд 87JavaScript
http://learn.javascript.ru
Mozilla Developer Network
Верстка HTML и CSS
https://htmlacademy.ru/
Какой-нибудь фреймворк: React, Vue, Angular
Официальная
документация по React
Фронтенд
Слайд 88ASP.NET Core или другой веб-фреймворк
ASP.NET Core на Metanit.com
Express для Node.js
Express
на Metanit.com
Бэкенд
