Embed Size (px)
DESCRIPTION
Web лекция 1
Citation preview
Разработка интернет приложений
Сергей Лихобабин, Александр Горный
Коротко о лекторах
Александр Горный
2
CIO Mail.Ru Group, Выпускник кафедры СП ’2000
начальник отдела внутренней разработки в Mail.Ru Group,
выпускник кафедры АЯ’2013
Сергей Лихобабин
Организационные вопросы
9 лекций 6 семинаров Сдача зачета
Сдача практической работы Спецкурс ставится за три курса
3
5
• Веб, его роль в современном мире
• Базовые основы веба: HTML, HTTP
• Уровнем ниже веба: TCP, DNS
Программа: введение
6
• Unix: демоны, инсталляторы, пакеты
• Веб-сервера: разница между ними и их устройство
• ЯП для веба и их экосистемы
Программа: инструменты разработчика
7
• Основные возможности конфигурации
• Интерфейсы взаимодействия с прикладным кодом
• Расширенные возможности конфигурации
Программа: web-сервера
8
Программа: Client-side
• HTML, CSS, DOM
• JavaScript, AJAX, Comet
• JQuery
9
• Механизмы взаимодействия с клиентом
• Безопасность этих взаимодействий
• Интеграция веб-приложений между собой
Программа: Server-side
10
• Django ORM
• Django Views
• Шаблонизатор Django
Программа: Django
11
• Скрипт управления
• Авторизация
• Стандартные приложения
Программа: Django
12
• Работаем с Linux, Apache и nginx
• Программируем на Python и Javascript
• Используем Django, Bootstrap, FireBug.
Результат практики – написание и защита собственного приложения.
Практика
13
Вопросы
14
Популярность Web-приложений
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
Dec
ember
, 199
5Dec
ember
, 199
6Dec
ember
, 199
7Dec
ember
, 199
8Dec
ember
, 199
9M
arc
h, 2
000
July
, 200
0M
arc
h, 2
001
June,
200
1Apr
il, 2
002
July
, 200
2Sep
tem
ber
, 200
2M
arc
h, 2
003
Sep
tem
ber
, 200
3Oct
ober
, 200
3Dec
ember
, 200
3Fe
bruary
, 200
4M
ay, 2
004
Oct
ober
, 200
4Dec
ember
, 200
4M
arc
h, 2
005
June,
200
5Sep
tem
ber
, 200
5Nov
embe
r, 2
005
Dec
ember
, 200
5M
arc
h, 2
006
June,
200
6Sep
t, 2
006
Dec
, 200
6M
ar, 2
007
June,
200
7Sep
t, 2
007
Dec
, 200
7M
ar, 2
008
June,
200
8Sep
t, 2
008
Dec
, 200
8M
ar, 2
009
June,
200
9Sep
t, 2
009
Dec
, 200
9Ju
ne,
201
0Sep
t, 2
010
Mar, 2
011
Jun, 2
011
Sep
t, 2
011
Dec
, 201
1M
ar, 2
012
June,
201
2Sep
t, 2
012
Dec
, 201
2M
arc
h, 2
013
Проникновение интернета в мире
15
Популярность Web-приложений
16
Особенности Web-приложений
• Архитектура всегда клиент-серверная • Клиент всегда далеко от сервера • Клиентов очень много
17
• Что такое http://www.domain.ru:81/page.php ?
• Что такое браузер?
• Что умеет HTML?
Кратко об очевидном
DNS
18
DNS ― domain vs zone
19
A и AAAA
CNAME
PTR
TXT
NS
MX
DNS: виды записей
20
Адресация приложения в пределах хоста
Последовательное двустороннее соединение
Надежная доставка
Управление потоком
Задачи протокола TCP
21
Порты
Well-known
Привилегированные
Остальные
Сокеты (sockets)
Серверные
Клиентские
TCP
22
import socket
s = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
s.bind(('127.0.0.1', 8080))
s.listen(10)
while True:
conn, addr = s.accept()
data = conn.recv(1024)
conn.send(data)
conn.close()
TCP сервер
23
import socket
s = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
s.connect(('127.0.0.1', 8080))
s.send('Hello world')
print s.recv(1024)
s.close()
TCP клиент
24
HyperText Transfer Protocol
HTTP
25
GET /wiki/страница HTTP/1.1
Host: ru.wikipedia.org
Accept: text/html
Connection: close
(пустая строка)
HTTP/1.1 200 OK
Server: Apache
Content-Language: ru
Content-Type: text/html; charset=utf-8
Content-Length: 1234
Connection: close
(пустая строка)
(HTML)
HTTP ― передача гипертекста
26
OPTIONS ― запрос методов сервера (Allow)
GET ― запрос документа (Условный GET)
HEAD ― аналог GET, но без тела запроса
POST ― передача данных клиент
PUT ― размещение файла по URI
DELETE ― удаление файла по URI
TRACE, LINK, UNLINK, CONNECT ― редко
Методы HTTP
27
1xx ― Информационные
2xx ― Успешное выполнение
200 ― OK
204 ― NoContent (только заголовки)
206 ― PartitialContent (часть ответа)
3xx ― Перенаправления
301 ― Moved Pemanently (SEO, кеширование)
302 ― Found (логика работы сайта)
304 ― Not Modified (при условном GET)
Коды состояния HTTP
28
4xx ― Ошибка клиента
400 ― Bad Request
401 ― Unauthorized
403 ― Forbidden (allow, deny)
404 ― Not Found
408 ― Request Timeout
418 ― I'm teapot
499 ― Client Closed Request (Nginx)
Коды состояния HTTP
29
5xx ― Ошибка сервера
500 ― Internal Server Error
502 ― Bad Gateway (проксирование)
503 ― Service Unavailable
504 ― Gateway Timeout
505 ― HTTP version not supported
507 ― Insufficient Storage
Коды состояния HTTP
30
Host ― указание домена
User-Agent ― описание клиента
Accept-* ― поддержка MIME типов, кодировок, языков и т.п.
Cookie ― куки для данной страницы
Referer ― текущая страница
If-Modified-Since ― условный GET
Connection ― управление соединением
Заголовки HTTP запросов
31
Время жизни
Сессионность
Домены и их наследование
2nd и 3rd party
HTTP-Only
Ограничения
Cookies
32
Content-Type ― MIME тип документа
Content-Length ― размер документа
Content-Encoding ― кодирование документа
Date ― текущее время сервера
Expires ― время актуальности документа
Last-Modified ― время изменения файла
Set-Cookie ― установка кук для данного URI
Connection ― управление соединением
Заголовки HTTP ответов
33
HTTP: multipart
34
POST /send-message.html HTTP/1.1 Host: webmail.example.com Content-Type: multipart/form-data; boundary=Asrf456BGe4h Content-Length: (суммарный объём, включая дочерние заголовки) (пустая строка) (отсутствующая преамбула) --Asrf456BGe4h Content-Disposition: form-data; name="MessageTitle" (пустая строка) Я негодую --Asrf456BGe4h Content-Disposition: form-data; name="AttachedFile1"; filename="horror-photo-1.jpg" Content-Type: image/jpeg (пустая строка) (двоичное содержимое первой фотографии) --Asrf456BGe4h Content-Disposition: form-data; name="AttachedFile2"; filename="horror-photo-2.jpg" Content-Type: image/jpeg (пустая строка) (двоичное содержимое второй фотографии) --Asrf456BGe4h-- (отсутствующий эпилог - пустая строка)
HTTP: кеширование
35
HTTP: воображаемые альтернативы
• UDP
• Бинарный протокол
• XML-протокол
36
HTTP: реальные проблемы
• Безопасность (HTTPS)
• Скорость (SPDY)
• Централизованность (bitTorrent)
• Клиент-серверность
• Legacy
37
<ul id="tab_main"> <li>
<a href="/content">
<img src="/img/content.png" alt="Статьи">
Статьи
</a>
</li>
<li>
<a href="/blog">
<img src="/img/blog.png" alt="Блог">
<b>Блог</b>
</a>
</li>
</ul>
HTML
38
HTML тэги
HTML аттрибуты
Парные: <b></b>(bold), <i></i>(italic), <a></a> (anchor), <quote></quote>
Одиночные: <img>, <link>
Структурые: <body>, <ul>, <div>,<span>
Стандартные: id, style, class, title, ..
Специфичные: href, src, rowspan,
Пользовательские: data-myattr
HTML
39
<a href=”/search/?q=bob&site=mail.ru”>Найти</a>
<a name=”chapter1”></a>
<a href=”#chapter1”>Глава 1</a>
<form method=”GET” action=”/search/”>
<input type=”text” name=”q” value=””/>
<input type=”text” name=”site” value=””/>
<input type=”submit”/>
</form>
Формы и ссылки
40
41
Вопросы
