Web лекция 1

1. Разработка интернет
приложений
Сергей Лихобабин, Александр Горный

2. Коротко о лекторах
Александр Горный
2
CIO Mail.Ru Group,
Выпускник кафедры СП ’2000
начальник отдела внутренней разработки в
Mail.Ru Group,
выпускник кафедры АЯ’2013
Сергей Лихобабин

3. Организационные вопросы
9 лекций
6 семинаров
Сдача зачета
Сдача практической работы
Спецкурс ставится за три курса
3

4. Обратная связь
gornyi@corp.mail.ru
s.lihobabin@corp.mail.ru
4

5. 5
• Веб, его роль в современном мире
• Базовые основы веба: HTML, HTTP
• Уровнем ниже веба: TCP, DNS
Программа: введение

6. 6
• Unix: демоны, инсталляторы, пакеты
• Веб-сервера: разница между ними и
их устройство
• ЯП для веба и их экосистемы
Программа: инструменты разработчика

7. 7
• Основные возможности конфигурации
• Интерфейсы взаимодействия с прикладным
кодом
• Расширенные возможности конфигурации
Программа: web-сервера

8. 8
Программа: Client-side
• HTML, CSS, DOM
• JavaScript, AJAX, Comet
• JQuery

9. 9
• Механизмы взаимодействия с клиентом
• Безопасность этих взаимодействий
• Интеграция веб-приложений между собой
Программа: Server-side

10. 10
• Django ORM
• Django Views
• Шаблонизатор Django
Программа: Django

11. 11
• Скрипт управления
• Авторизация
• Стандартные приложения
Программа: Django

12. 12
• Работаем с Linux, Apache и nginx
• Программируем на Python и Javascript
• Используем Django, Bootstrap, FireBug.
Результат практики – написание и защита
собственного приложения.
Практика

13. 13
Вопросы

14. 14
Популярность Web-приложений
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
December,1995
December,1996
December,1997
December,1998
December,1999
March,2000
July,2000
March,2001
June,2001
April,2002
July,2002
September,2002
March,2003
September,2003
October,2003
December,2003
February,2004
May,2004
October,2004
December,2004
March,2005
June,2005
September,2005
November,2005
December,2005
March,2006
June,2006
Sept,2006
Dec,2006
Mar,2007
June,2007
Sept,2007
Dec,2007
Mar,2008
June,2008
Sept,2008
Dec,2008
Mar,2009
June,2009
Sept,2009
Dec,2009
June,2010
Sept,2010
Mar,2011
Jun,2011
Sept,2011
Dec,2011
Mar,2012
June,2012
Sept,2012
Dec,2012
March,2013
Проникновение интернета в мире

15. 15
Популярность Web-приложений

16. 16
Особенности Web-приложений
• Архитектура всегда клиент-серверная
• Клиент всегда далеко от сервера
• Клиентов очень много

17. 17
• Что такое http://www.domain.ru:81/page.php ?
• Что такое браузер?
• Что умеет HTML?
Кратко об очевидном

18. DNS
18

19. DNS ― domain vs zone
19

20.  A и AAAA
 CNAME
 PTR
 TXT
 NS
 MX
DNS: виды записей
20

21.  Адресация приложения в пределах хоста
 Последовательное двустороннее соединение
 Надежная доставка
 Управление потоком
Задачи протокола TCP
21

22.  Порты
 Well-known
 Привилегированные
 Остальные
 Сокеты (sockets)
 Серверные
 Клиентские
TCP
22

23. 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

24. 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

25. HyperText Transfer Protocol
HTTP
25

26. 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

27. OPTIONS ― запрос методов сервера (Allow)
GET ― запрос документа (Условный GET)
HEAD ― аналог GET, но без тела запроса
POST ― передача данных клиент
PUT ― размещение файла по URI
DELETE ― удаление файла по URI
TRACE, LINK, UNLINK, CONNECT ― редко
Методы HTTP
27

28. 1xx ― Информационные
2xx ― Успешное выполнение
200 ― OK
204 ― NoContent (только заголовки)
206 ― PartitialContent (часть ответа)
3xx ― Перенаправления
301 ― Moved Pemanently (SEO, кеширование)
302 ― Found (логика работы сайта)
304 ― Not Modified (при условном GET)
Коды состояния HTTP
28

29. 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

30. 5xx ― Ошибка сервера
500 ― Internal Server Error
502 ― Bad Gateway (проксирование)
503 ― Service Unavailable
504 ― Gateway Timeout
505 ― HTTP version not supported
507 ― Insufficient Storage
Коды состояния HTTP
30

31. Host ― указание домена
User-Agent ― описание клиента
Accept-* ― поддержка MIME типов, кодировок,
языков и т.п.
Cookie ― куки для данной страницы
Referer ― текущая страница
If-Modified-Since ― условный GET
Connection ― управление соединением
Заголовки HTTP запросов
31

32. Время жизни
Сессионность
Домены и их наследование
2nd и 3rd party
HTTP-Only
Ограничения
Cookies
32

33. Content-Type ― MIME тип документа
Content-Length ― размер документа
Content-Encoding ― кодирование документа
Date ― текущее время сервера
Expires ― время актуальности документа
Last-Modified ― время изменения файла
Set-Cookie ― установка кук для данного URI
Connection ― управление соединением
Заголовки HTTP ответов
33

34. 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--
(отсутствующий эпилог - пустая строка)

35. HTTP: кеширование
35

36. HTTP: воображаемые альтернативы
• UDP
• Бинарный протокол
• XML-протокол
36

37. HTTP: реальные проблемы
• Безопасность (HTTPS)
• Скорость (SPDY)
• Централизованность (bitTorrent)
• Клиент-серверность
• Legacy
37

38. <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

39. 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

40. <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. 41
Вопросы

42. Мы ждем обратной связи
Александр Горный, gornyi@corp.mail.ru
Сергей Лихобабин, s.lihobabin@corp.mail.ru