Download pdf - Web осень 2013 лекция 1

Web технологи

Дмитрий Смаль

О чем этот курс ?

2

3

Как программировать на PHP / Java?

Как сверстать красивую страничку?

Как сделать сайт?

Это курс о..

4

О том, как работают web приложения

О “Best practise” web разработки

О современных web технологиях

Зачем это все ?

5

Архитектор должен быть в курсе

Неплохой способ заработать $

Или.. что бы вовремя остановиться )

6

Немного истории..

7

1969 ― сеанс связи ARPANET

1971 ― отправка первого Email

1983 ― ARPANET переходит на TCP/IP

1984 ― запущена система DNS

1989 ― появление WWW, HTTP, HTML

1993 ― первый браузер – NCSA Mosaic

1995 ― Yahoo, Hotmail, Amazon.com

1998 ― Mail.Ru

История сети Internet

8

Число хостов в Internet

9

Браузерные войны

10

Web 1.0 ― до .com bubble. Статичное содержание страниц, аскетичный дизайн, чаты, форумы, гостевые книги.

Web 2.0 ― новое поколение сайтов (после 2001) User-generated content. Предоставление и потребление API. RSS. Обновлениестраниц “на лету” (ajax).

Web 3.0 ― ??? Community-generated content. Семантическаяпаутина. Уникальные идентификаторы и микроформаты. Аскетичный дизайн

Эволюция web сайтов

11

Ситуацияна сегодняшний день

12

Клиент-серверная архитектура. Тонкие клиенты.

Глобальные приложения: социальные сети, поиск, почта – big data

Мобильные приложения

Software as a Service

Облачные сервисы

Тенденции развития ПО

13

Традиционные сайты: новости, блоги, wiki, базы знаний, визитки

Глобальные приложения: почтовые сервисы, поиск, социальные сети

E-commerce: магазины, бронирование, цифровая дистрибуция

Замена desktop приложениям: банк-клиенты, CRM, корпоративный софт

SAAS ― то же cамое, но онлайн

Web приложения

14

Front-end разработка

Back-end разработка

Разработка под мобильные платформы

Инфраструктура

Архитектура

Системное программирование

Прочее (seo, security, management)

Чем можно заняться ?

15

Как работает сеть ?

16

ISO - OSI

17

Физический: управление средой, сигналом, кодирование потокабитов

Канальный: физическая адресация, передача между двумяинтерфейсами

Сетевой: логическая адресация, передача между двумяхостами, передача в гетерогенных сетях

Транспортный: надежная доставка, передача между двумяприложениями, управление потоком байтов

Назначение уровней

18

Internet Protocol

IP

19

Глобальная адресация

Передача в гетерогенной сети (сегментация)

Маршрутизация пакетов

Задачи IP протокола

20

Схема IP сети

21

94.100.191.201 ― один из адресов Mail.Ru

127.0.0.1 ― всегда адрес лок. компьютера

192.168.12.14 ― private ip (не уникален)

192.168.0.0/16 ― адрес подсети

12.0xbad ― тоже валидный адрес

2001:0db8:11a3:09d7:1f34:8a2e:07a0:765d

IP адресация

22

Иерархия IP адресов

23

Получение дейтограммы, определение ip получателя

Поиск в таблице маршрутизации

Не найдено → отбрасываем пакет

Выбор наиболее приоритетного маршрута(по префиксу, по дистанции, по ширине канала)

Передача дейтограммы через нужный интерфес

Алгоритм роутера

24

Domain Name System

DNS

25

DNS

26

DNS ― domain vs zone

27

DNS ― domain vs zone

28

Отличие домена и зоны DNS

Что возвращает DNS? Виды записей

Рекурсивные и итеративные запросы

Обратные зоны

CDN – content delivery network

Google public DNS – 8.8.8.8 8.8.4.4

DNS

29

Transmission Control Protocol

TCP

30

Адресация приложения в пределах хоста

Последовательное двустороннее соединение

Надежная доставка

Управление потоком

Задачи протокола TCP

31

Порты

Well-known: SSH=20, FTP=21,22, HTTP=80, SMTP=25,

POP3=110

Привилегированные (<1024)

Остальные (>=1024)

Сокеты (sockets)

Серверные (bind, listen, accept)

Клиентские (connect, send, recv)

TCP

32

TCP сегмент

33

Round Trip Time (0.5ms / 150ms)

TCP handshake

34

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 сервер

35

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 клиент

36

def myreceive(sock, msglen):

msg = ''

while len(msg) < msglen:

chunk = sock.recv(msglen-len(msg))

if chunk == '':

raise RuntimeError("broken")

msg = msg + chunk

return msg

http://docs.python.org/2/howto/sockets.html

Вопрос: откуда получить msglen ?

Как правильно читать данные из сокета

37

def mysend(sock, msg):

totalsent = 0

while totalsent < len(msg):

sent = sock.send(msg[totalsent:])

if sent == 0:

raise RuntimeError("broken")

totalsent = totalsent + sent

http://docs.python.org/2/howto/sockets.html

Как правильно писать данные в сокет

38

HyperText Transfer Protocol

HTTP

39

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 ― передача гипертекста

40

URI ― идентификатор (mailto:[email protected], tel:02, urn:isbn:0-395-36341-1)

URL ― определяет положение ресурса(http://tom:[email protected]/h/1.html?a=b)

http ― протокол

tom:abc ― логин / пароль

host.com ― адрес сервера

/h/1.html ― путь к ресурсу

a=b ― параметры (query string)

URI vs URL

41

OPTIONS ― запрос методов сервера (Allow)

GET ― запрос документа (Условный GET)

HEAD ― аналог GET, но без тела запроса

POST ― передача данных клиент

PUT ― размещение файла по URI

DELETE ― удаление файла по URI

TRACE, LINK, UNLINK, CONNECT ― редко

Методы HTTP

42

1xx ― Информационные

2xx ― Успешное выполнение

200 ― OK

204 ― NoContent (только заголовки)

206 ― PartitialContent (часть ответа)

3xx ― Перенаправления

301 ― Moved Pemanently (SEO, кеширование)

302 ― Found (логика работы сайта)

304 ― Not Modified (при условном GET)

Коды состояния HTTP

43

4xx ― Ошибка клиента

400 ― Bad Request (размер, формат..)

401 ― Unauthorized (запрос авторизации)

403 ― Forbidden (allow, deny)

404 ― Not Found

408 ― Request Timeout (на чтение)

418 ― I'm teapot


44

5xx ― Ошибка сервера

500 ― Internal Server Error

502 ― Bad Gateway (проксирование)

503 ― Service Unavailable

504 ― Gateway Timeout

505 ― HTTP version not supported

507 ― Insufficient Storage


45

Host ― указание домена, вирт. Хостинг

User-Agent ― описание клиента

Accept-* ― поддержка MIME типов, кодировок, языков и т.п.

Cookie ― куки для данной страницы

Referer ― текущая страница

If-Modified-Since ― условный GET

Connection ― управление соединением

Заголовки HTTP запросов

46

Content-Type ― MIME тип документа

Content-Length ― размер документа

Content-Encoding ― кодирование документа

Date ― текущее время сервера

Expires ― время актуальности документа

Last-Modified ― время изменения файла

Set-Cookie ― установка кук для данного URI

Connection ― управление соединением

Заголовки HTTP ответов

47

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

48

FTP ― передача файлов

SMTP ― передача почты

POP3, IMAP ― получение почты

SSH ― удаленный доступ к серверу

SFTP ― FTP через SSH

XMPP ― Jabber, мгновенные сообщения

BitTorrent ― Передача легального контента

Какие еще есть протоколы ?

49

RFC822 - Internet Text Message format

XML

JSON, JSONP

CSV

MIME

JPEG / PNG / GIF

PDF

А еще есть «форматы»

50

Как работает web сайт ?

51

Клиент-серверное приложение

Ресурсы и адресация

Запрос – ответ (альтернативы ?)

Архитектура

52

URI ― идентификатор (mailto:[email protected], tel:02, urn:isbn:0-395-36341-1)

URL ― определяет положение ресурса(http://tom:[email protected]/h/1.html?a=b)

http ― протокол

tom:abc ― логин / пароль

host.com ― адрес сервера

/h/1.html ― путь к ресурсу

a=b ― параметры (query string)

URI vs URL

53

Загрузка с диска

Загрузка с сервера

1.html → /home/user/ht/1.htmlimg/1.jpg → /home/user/ht/img/1.jpg

DocumentRoot = /htdocshttp://www.ru/ → /htdocs/index.htmlhttp://www.ru/img/1.jpg → /htdocs/img/1.jpg

HTTP – загрузка файлов

54

<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

55

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

56

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

Формы и ссылки

57

#!/usr/bin/python2.7

print "Content-Type: text/html"

print ""

print "<html><body>"

print "<h1>hello, world!</h1>"

import os

for k, v in os.environ.items():

print "%s = %s<br>" % (k, v)

print "</html></body>"

Ошибочка ?

CGI - скрипт

58

REQUEST_METHOD ― метод (GET, POST, …)

REQUEST_URI ― строка запроса

QUERY_STRING ― строка параметров

REMOTE_ADDR ― ip адрес клиента

SCRIPT_NAME ― имя текущего скрипта

HTTP_COOKIE ― заголовок Cookie:

HTTP_REFERER ― заголовок Referer:

Переменные окружения

CGI

59

Скриптовый язык общего назначений

Синтаксис основан на отступах

Минимализм

Динамическая (но строгая) типизация

http://www.codecademy.com/tracks/python

Python

60

animals = ['dog', 'tux', 'caterpillar']

for a in animals:

print(a)

if len(a) > 3:

print('%s_%s' % (a[0:2], ' for short'))

def reply(msg, user='author'):

return '<blockquote>' + user + ' says:<br>' \

+ msg + '</blockquote>'

import datetime

td = datetime.date.today()

from datetime import date

td = date.today()

Python (примеры)

61

<ul>

[% IF say_hello %]

<h1>Hello, world!</h1>

[% END %]

[% FOR e IN environ %]

<li>[% e.name %] = [% e.value %]</li>

[% END %]

</ul>

Шаблон sample.tpl

Скрипт do.cgireturn render_to_response('sample.tpl', {

'say_hello' : True,

'environ': os.environ

})

Шаблонизация

62





</div>



Вам нужно авторизоваться





SSI

63

Язык программирования браузера

Java / C подобный синтаксис

DOM – дерево, DHTML

События и обработчики

XHR и Ajax

JQuery, Prototype, Backbone, YUI, …

http://www.codecademy.com/tracks/javascript

JavaScript

64

FireBug - F12

65

Спасибо за внимание

Дмитрий Смаль, [email protected]