Разделы презентаций


История Веб

Содержание

Как работает веб?

Слайды и текст этой презентации

Слайд 1История Веб
Иван Домашних
Введение в специальность

История ВебИван ДомашнихВведение в специальность

Слайд 2Как работает веб?

Как работает веб?

Слайд 3Как работает веб?

Как работает веб?

Слайд 4Как работает веб?

Как работает веб?

Слайд 5Зарождение Интернета
На случай ядерной войны

Зарождение ИнтернетаНа случай ядерной войны

Слайд 6Создана в 1969 году Управлением перспективных исследовательских проектов Минобороны США, чтобы

обеспечить связь в случае ядерной войны
ARPANET = Advanced Research Projects

Agency Network
DARPA = Defense Advanced Research Projects Agency

ARPANET

Создана в 1969 году Управлением перспективных исследовательских проектов Минобороны США, чтобы обеспечить связь в случае ядерной войныARPANET

Слайд 7Межсетевой протокол
Создан на основе протоколов ARPANET в 1972
1 января 1983

– ARPANET перешел на IP, официальная дата рождения Internet
Internet Protocol

Межсетевой протоколСоздан на основе протоколов ARPANET в 19721 января 1983 – ARPANET перешел на IP, официальная дата

Слайд 8IP-адрес
Идентификатор хоста в рамках сети
Хост – компьютер подключенный сети
Хост может

находится в нескольких сетях одновременно со своим IP-адресом в каждой

IP-адресИдентификатор хоста в рамках сетиХост – компьютер подключенный сетиХост может находится в нескольких сетях одновременно со своим

Слайд 9LAN и WAN
LAN = Local Area Network, локальная сеть
WAN =

World Area Network, глобальная сеть
Маршрутизатор управляет адресацией в локальной сети

и имеет какой-то адрес у вышестоящего маршрутизатора
LAN и WANLAN = Local Area Network, локальная сетьWAN = World Area Network, глобальная сетьМаршрутизатор управляет адресацией

Слайд 10IP работает как почта: умеет передавать пакеты данных по адресу,

но никаких гарантий доставки









TCP/IP
TCP = Transmission Control Protocol
Устанавливает соединение и

гарантирует доставку за счет нумерации и повторения пакетов

IP работает как почта: умеет передавать пакеты данных по адресу, но никаких гарантий доставкиTCP/IPTCP = Transmission Control

Слайд 11Неудобно запоминать IP-адреса, хочется названия
DNS = Domain Name System

DNS :

имя → IP
DNS

Неудобно запоминать IP-адреса, хочется названияDNS = Domain Name SystemDNS : имя → IPDNS

Слайд 12Есть глобальная сеть, состоящая из подсетей, в которой по имени или цифровому адресу

компьютера можно передавать и получать данные
Итоги

Есть глобальная сеть, состоящая из подсетей, в которой по имени или цифровому адресу компьютера можно передавать и

Слайд 14Создание World Wide Web
Для ученых всего мира

Создание World Wide WebДля ученых всего мира

Слайд 15Ученые
проводят исследования по всему миру
публикуют научные результаты в виде статей в

научных журналах
ссылаются на статьи друг друга


Обмениваться статьями через интернет?
Обмен научными

статьями
Ученыепроводят исследования по всему мирупубликуют научные результаты в виде статей в научных журналахссылаются на статьи друг другаОбмениваться

Слайд 16Оформление документов
Адресация и перекрестные ссылки
Передача документов по сети
Программа для просмотра
Программа

для отправки документов
Протокол взаимодействия этих программ
Обмен научными статьями

Оформление документовАдресация и перекрестные ссылкиПередача документов по сетиПрограмма для просмотраПрограмма для отправки документовПротокол взаимодействия этих программОбмен научными

Слайд 17Оформление документов

Оформление документов

Слайд 18
История веб-разработки


Домашних И.

А.,

преподаватель УрФУ

Ключевые слова: интернет,

html, веб-разработка




История веб-разработки



Развитие всемирной паутины началось после того, как Тим Бернерс-Ли изобрел HTML.



Lorem ipsum…




Разметка для документов

Как называются эти вставки?

История веб-разработки      Домашних И. А.,   преподаватель УрФУ

Слайд 20Тэги для описания

Тэги для описания

Слайд 21HTML – HyperText Markup Language, язык разметки гипертекстовых страниц

URL –

Uniform Resource Locator, единообразный определитель местонахождения ресурса

HTTP - HyperText Transfer Protocol,

протокол передачи гипертекста, работает над TCP/IP


HTML, URL, HTTP

HTML – HyperText Markup Language, язык разметки гипертекстовых страницURL – Uniform Resource Locator, единообразный определитель местонахождения ресурсаHTTP -

Слайд 22Оформление документов – HTML
Адресация и перекрестные ссылки – URL
Передача документов

по сети
Программа для просмотра
Программа для отправки и хранения документов
Протокол взаимодействия

этих программ – HTTP

Обмен научными статьями

Оформление документов – HTMLАдресация и перекрестные ссылки – URLПередача документов по сетиПрограмма для просмотраПрограмма для отправки и

Слайд 23Веб-сервер  – это программа, использующая протокол HTTP для передачи данных по сети

При ответе

на HTTP-запрос:
либо отдает файл с локального жесткого диска
либо генерирует ответ

динамически

Обычно использует 80 порт
CERN httpd – первый веб-сервер

Веб-сервер

Веб-сервер  – это программа, использующая протокол HTTP для передачи данных по сетиПри ответе на HTTP-запрос:либо отдает файл с локального жесткого

Слайд 24Веб-браузер  – это программа для просмотра веб-страниц, содержания веб-документов





WorldWideWeb – первый

веб-браузер
Был переименован в Nexus
Веб-браузер

Веб-браузер  – это программа для просмотра веб-страниц, содержания веб-документовWorldWideWeb – первый веб-браузерБыл переименован в NexusВеб-браузер

Слайд 25Оформление документов – HTML
Адресация и перекрестные ссылки – URL
Передача документов

по сети
Программа для просмотра – веб-браузер
Программа для отправки документов –

веб-сервер
Протокол взаимодействия этих программ – HTTP

Обмен научными статьями

Оформление документов – HTMLАдресация и перекрестные ссылки – URLПередача документов по сетиПрограмма для просмотра – веб-браузерПрограмма для

Слайд 26Оформление документов
Адресация и перекрестные ссылки
Передача документов по сети

Решены в 1986

– 1991 британцем Тимом Бернерсом-Ли в стенах ЦЕРН в Женеве в Швейцарии

Обмен научными

статьями

Тимоти Джон Бе́рнерс-Ли

Оформление документовАдресация и перекрестные ссылкиПередача документов по сетиРешены в 1986 – 1991 британцем Тимом Бернерсом-Ли в стенах

Слайд 27Всемирную паутину образуют миллионы веб-серверов сети Интернет, расположенных по всему миру
World Wide Web

Всемирную паутину образуют миллионы веб-серверов сети Интернет, расположенных по всему мируWorld Wide Web

Слайд 28NCSA Mosaic – первый веб-браузер с GUI
National Center for Supercomputing

Applications at the University of Illinois
Первая версия в 1993 году

NCSA Mosaic – первый веб-браузер с GUINational Center for Supercomputing Applications at the University of IllinoisПервая версия

Слайд 29Появился World Wide Web

Документы – благословление и проклятие Веба

HTML
HTTP
URL
Веб-сервер
Веб-браузер
Итоги

Появился World Wide WebДокументы – благословление и проклятие ВебаHTMLHTTPURLВеб-серверВеб-браузерИтоги

Слайд 31Readonly Web
Начало коммерческого использования

Readonly WebНачало коммерческого использования

Слайд 32Визионеры считали, что за Интернетом будущее коммерции

Визионеры считали, что за Интернетом будущее коммерции

Слайд 33Первые версии Internet Explorer и Netscape Navigator созданы в 1994 году и использовали

код NCSA Mosaic

Новые браузеры – 1994
Mozilla – внутреннее название браузера Netscape
Mozilla

= Mosaic Killer + Godzilla
Первые версии Internet Explorer и Netscape Navigator созданы в 1994 году и использовали код NCSA MosaicНовые браузеры

Слайд 34Новые веб-сервера – 1995
Встроен в Windows
С 1996 года – самый

популярный веб-сервер
Internet Information Services
Apache HTTP Server

Новые веб-сервера – 1995Встроен в WindowsС 1996 года – самый популярный веб-серверInternet Information ServicesApache HTTP Server

Слайд 35Модули позволяют подключать различные языки программирования к веб-серверам

PHP = Personal

Home Page Tools – 1994
ASP = Active Server Pages от

Microsoft – 1996

Генерация HTML на сервере

Модули позволяют подключать различные языки программирования к веб-серверамPHP = Personal Home Page Tools – 1994ASP = Active

Слайд 36СSS = Cascading Style Sheets
Позволяет управлять стилями единообразно
CSS – 1994
div

{
color: gray;
}

.orange {
background: orange;
}
.orange span {
color: white;
}

#theSun

{
background: yellow;
}
СSS = Cascading Style SheetsПозволяет управлять стилями единообразноCSS – 1994div { color: gray;}.orange { background: orange;}.orange span

Слайд 37Брендан Айк разработал JavaScript для Netscape Navigator
JS должен был дополнить Java-апплеты и

стать Java для простаков


Java и JavaScript от Netscape
vs
Visual C++ и

Visual Basic от Microsoft

JavaScript – 1995

Брендан Айк разработал JavaScript для Netscape NavigatorJS должен был дополнить Java-апплеты и стать Java для простаковJava и

Слайд 38В том же году компания Microsoft выпустила свою реализацию JavaScript,

использовав ее в InternetExplorer и Windows - JScript

Затем JavaScript был стандартизирован

как ECMAScript (ECMA-262)


В том же году компания Microsoft выпустила свою реализацию JavaScript, использовав ее в InternetExplorer и Windows - JScriptЗатем

Слайд 39Конец 90-х – начало 2000-х

Конец 90-х – начало 2000-х

Слайд 40Конец 90-х – начало 2000-х

Конец 90-х – начало 2000-х

Слайд 41Конец 90-х – начало 2000-х

Конец 90-х – начало 2000-х

Слайд 42Но что-то пошло не так…

Но что-то пошло не так…

Слайд 43Война браузеров – 1998
Internet Explorer 4.0 победил Netscape Navigator 4.0
Бесплатный
Интегрированный

в Windows
Нестандартизированные особенности у каждого



Microsoft получает иск от антимонопольщиков
Сотрудники Netscape

основывают Mozilla Foundation
Война браузеров – 1998Internet Explorer 4.0 победил Netscape Navigator 4.0БесплатныйИнтегрированный в WindowsНестандартизированные особенности у каждогоMicrosoft получает иск

Слайд 44Доступ через телефонные линии
Модем

Доступ через телефонные линииМодем

Слайд 45Немного кода
Маркетинг
Вливание инвестиций
Больше маркетинга
Больше инвестиций
Зачем вообще нужен код? Только маркетинг!


Завышенные

ожидания

Немного кодаМаркетингВливание инвестицийБольше маркетингаБольше инвестицийЗачем вообще нужен код? Только маркетинг!Завышенные ожидания

Слайд 46Крах доткомов
График индекса NASDAQ

Крах доткомовГрафик индекса NASDAQ

Слайд 47Документы
Internet Explorer
Бэкенд: основная логика, генерация HTML
Фронтенд
версточка, минимальная динамика
все в одном

HTML-файле
Итоги

ДокументыInternet ExplorerБэкенд: основная логика, генерация HTMLФронтендверсточка, минимальная динамикавсе в одном HTML-файлеИтоги

Слайд 49Web 2.0
Взаимодействие с клиентом

Web 2.0Взаимодействие с клиентом

Слайд 50Реальный конкурент IE6, несущий инновации:
Вкладки
Плагины
Инструменты разработчика
Mozilla возвращается с Firefox –

2002
Phoenix
Firebird
Firefox

Реальный конкурент IE6, несущий инновации:ВкладкиПлагиныИнструменты разработчикаMozilla возвращается с Firefox – 2002PhoenixFirebirdFirefox

Слайд 51Развитие серверных фреймворков
ASP .NET – 2002
PHP 5 – 2004

Symphony на

PHP– 2005
Ruby on Rails – 2005
Django на Python –

2005

nginx – легковесный веб-сервер – 2004

Новое на server-side

Развитие серверных фреймворковASP .NET – 2002PHP 5 – 2004Symphony на PHP– 2005 Ruby on Rails – 2005Django

Слайд 52Asynchronous JavaScript and XML - подход к построению интерактивных веб-приложений, заключающийся в

фоновом обмене данными браузера с веб-сервером без перезагрузки страницы
Название предложено Джеймсом

Гарретом

XmlHttpRequest и другие технологии, лежащие в основе AJAX, были созданы ранее

Примеры приложений: Gmail, ВКонтакте, Яндекс.Карты

AJAX – 2005

Asynchronous JavaScript and XML - подход к построению интерактивных веб-приложений, заключающийся в фоновом обмене данными браузера с веб-сервером

Слайд 53jQuery предоставил единый API для разных браузеров
Кроссбраузерные селекторы и переходы

по DOM
События
Обертка над AJAX
Визуальные эффекты
Расширение плагинами


jQuery – 2006
Джон Резиг

jQuery предоставил единый API для разных браузеровКроссбраузерные селекторы и переходы по DOMСобытияОбертка над AJAXВизуальные эффектыРасширение плагинамиjQuery –

Слайд 54Переиспользуемые карусельки, работающие во всех браузерах

Переиспользуемые карусельки, работающие во всех браузерах

Слайд 55Появление jQuery

Появление jQuery

Слайд 56Появление jQuery

Появление jQuery

Слайд 57Появление jQuery

Появление jQuery

Слайд 58Появление jQuery

Появление jQuery

Слайд 59Широкополосный интернет
Распространение в 2005
Для фото, видео, аудио и множества скриптов

Широкополосный интернетРаспространение в 2005Для фото, видео, аудио и множества скриптов

Слайд 60Google
Gmail – 2004
Youtube – 2005
Google Docs – 2006

Facebook – 2004

Spotify

– 2006

Развивается бизнес на веб

GoogleGmail – 2004Youtube – 2005Google Docs – 2006Facebook – 2004Spotify – 2006Развивается бизнес на веб

Слайд 61Интернет-магазины, лендинги, блоги…
«Зоопарк» браузеров
Бэкенд: генерация HTML, основная логика
Фронтенд
версточка, анимации, запросы
отдельно

файлы стилей, разметки и JS
Итоги

Интернет-магазины, лендинги, блоги…«Зоопарк» браузеровБэкенд: генерация HTML, основная логикаФронтендверсточка, анимации, запросыотдельно файлы стилей, разметки и JSИтоги

Слайд 63Web Applications

Web Applications

Слайд 64У веб-приложений низкая производительность по сравнению с нативными приложениями

У веб-приложений низкая производительность по сравнению с нативными приложениями

Слайд 65Проблематично компилировать язык с динамической типизацией
Решение – Just-In-Time-компиляция Это ленивая компиляция: только

по запросу в момент выполнения
Впервые в движке TraceMonkey от Mozilla Затем

в движке V8 от Google в браузере Chrome

Быстрый JavaScript был нужен Google для работы своих сервисов
Толчок для развития JavaScript-фреймворков

JIT-компиляция – 2008

Проблематично компилировать язык с динамической типизациейРешение – Just-In-Time-компиляция Это ленивая компиляция: только по запросу в момент выполненияВпервые в

Слайд 66Evergreen-браузер - получает все новые фичи за счет фонового автоматического обновления
Впервые

появилось в Chrome
Толчок для развития JavaScript и вебстандартов



Evergreen-браузеры – 2008

Evergreen-браузер - получает все новые фичи за счет фонового автоматического обновленияВпервые появилось в ChromeТолчок для развития JavaScript и вебстандартовEvergreen-браузеры

Слайд 67Большой взрыв – 2009

Большой взрыв – 2009

Слайд 68Исполняющая среда, построенная на движке V8
Node.js – 2009
Райан Дал

Исполняющая среда, построенная на движке V8Node.js – 2009Райан Дал

Слайд 69Возможность создавать приложения, работающие вне браузера
Серверные => Изоморфные
Десктопные: текстовый редактор Atom

на базе Electron в 2014

В 2010 появился Node Package Manager

Возможность создавать приложения, работающие вне браузераСерверные => ИзоморфныеДесктопные: 	текстовый редактор Atom на 	базе Electron в 2014В 2010

Слайд 70ECMAScript edition 3 был принят еще в 1999 ECMAScript edition 4

был отменен
ECMAScript edition 5 исправил многие грабли
ES5 – 2009

ECMAScript edition 3 был принят еще в 1999 ECMAScript edition 4 был отмененECMAScript edition 5 исправил многие граблиES5

Слайд 712009 - CoffeeScript
2011 - Dart от Google
2012 - TypeScript от Microsoft
2013 - asm.js - подмножество JS
2014 - Flow от

Facebook



JavaScript как Intermediate Language, ASM для браузера

Развитие диалектов ES ≥2009

2009 - CoffeeScript2011 - Dart от Google2012 - TypeScript от Microsoft2013 - asm.js - подмножество JS2014 - Flow от Facebook…JavaScript как Intermediate Language, ASM для браузераРазвитие

Слайд 722009 – Angular.js от Google
2010 - Knockout
2010 - Backbone
2011 -

Ember
2013 - React от Facebook
2013 – Vue при поддержке Alibaba


Развитие

веб-фреймворков ≥2009
2009 – Angular.js от Google2010 - Knockout2010 - Backbone2011 - Ember2013 - React от Facebook2013 – Vue

Слайд 73Хранение данных: MongoDB, Firebase, …
Статический анализ: JSHint, ESLint, …
Тестирование: Jasmine,

Mocha, Chai, Sinon, Jest, …
Сборка: Grunt, Gulp, WebPack, …



любое английское

слово + .js = название фреймворка

Развитие всего для JS ≥2009

Хранение данных: MongoDB, Firebase, …Статический анализ: JSHint, ESLint, …Тестирование: Jasmine, Mocha, Chai, Sinon, Jest, …Сборка: Grunt, Gulp,

Слайд 75Google, Facebook, Microsoft и другие IT-компании, развивая свой бизнес в сфере веб и облачных

технологий, активно участвуют в развитии веб-стандартов и технологий


HTML5
CSS3
ECMAScript

Участие крупнейших компаний

≥2009
Google, Facebook, Microsoft и другие IT-компании, развивая свой бизнес в сфере веб и облачных технологий, активно участвуют в развитии веб-стандартов

Слайд 76ES6 - это рабочее название, но все привыкли

Очень много классных

улучшений
Стандарт ES2015, известный как ES6

ES6 - это рабочее название, но все привыклиОчень много классных улучшенийСтандарт ES2015, известный как ES6

Слайд 77TC39 - новый процесс стандартизации ECMAScript
Новый стандарт выпускается ежегодно

Подробнее о процессе Подробнее о

результатах

Процесс стандартизации TC39 – 2015

TC39 - новый процесс стандартизации ECMAScriptНовый стандарт выпускается ежегодноПодробнее о процессе Подробнее о результатахПроцесс стандартизации TC39 – 2015

Слайд 78Чтобы новый стандарт работал в старых каких-то браузерах нужно преобразовать

ES2015 хотя бы в ES5



Babel - транспайлер для JavaScript
Транспайлер - это как

компилятор, только структура программы не меняется

Babel

Чтобы новый стандарт работал в старых каких-то браузерах нужно преобразовать ES2015 хотя бы в ES5Babel - транспайлер для

Слайд 79Single Page Application – одностраничные приложение, в которых используется единственный

HTML-документ, как основа, а остальной контент динамически формируется JavaScript или подгружается

посредством AJAX.

SPA

Single Page Application – одностраничные приложение, в которых используется единственный HTML-документ, как основа, а остальной контент динамически

Слайд 80Веб-приложения

Веб-приложения

Слайд 81Веб-приложения

Веб-приложения

Слайд 82Веб-приложения

Веб-приложения

Слайд 83Single Page Application: одностраничные приложения
Браузеры работают по стандартам
Бэкенд:
JSON API
тяжелые вычисления,

хранение данных, контроль доступа, обеспечение целостности, бизнес-логика
Фронтенд:
красота и анимации, много

бизнес-логики, автономность
библиотеки контролов

Итоги

Single Page Application: одностраничные приложенияБраузеры работают по стандартамБэкенд:JSON APIтяжелые вычисления, хранение данных, контроль доступа, обеспечение целостности, бизнес-логикаФронтенд:красота

Слайд 86С чего начать?

С чего начать?

Слайд 87JavaScript http://learn.javascript.ru Mozilla Developer Network
Верстка HTML и CSS https://htmlacademy.ru/
Какой-нибудь фреймворк: React, Vue, Angular Официальная

документация по React

Фронтенд

JavaScript 	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

Бэкенд

ASP.NET Core или другой веб-фреймворк 	ASP.NET Core на Metanit.comExpress для Node.js 	Express на Metanit.comБэкенд

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика