Web технологи
Дмитрий Смаль
О чем этот курс ?
Как программировать на PHP / Java?
Как сверстать красивую страничку?
Как сделать сайт?
Это курс о..

О том, как работают web приложения.
О “Best practise” web разработки.
О современных технологий web.
Зачем это все ?
Архитектор должен быть в курсе
Неплохой способ заработать $
Или.. что бы вовремя остановиться )
Немного истории..
История сети Internet
1969 – сеанс связи ARPANET
1971 – отправка первого Email
1983 – ARPANET переходит на TCP/IP
1984 – з...
Число хостов в Internet
Браузерные войны
Эволюция web сайтов
Web 1.0 – до .com bubble. Статичное содержание
страниц, аскетичный дизайн, чаты, форумы, гостевые
книг...
Ситуация на сегодняшний день
Тенденции развития ПО
●

●

Клиент-серверная архитектура.
Глобальные приложения:
поиск, почта – big data

●

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

●

●

●

●

Традиционные сайты: новости, блоги, wiki, базы знаний,
визитки.
Глобальные приложения: почто...
Чем можно заняться ?
●

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

●

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

●

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

●

Инфраструк...
Как работает web сайт ?
Архитектура

Клиент-серверное приложение
Ресурсы и адресация
Запрос – ответ (альтернативы ?)
IP адресация
●

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

●

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

●

192.168.12.14 – ...
DNS
DNS
●

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

●

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

●

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

●

Обратные з...
HTTP
GET /wiki/страница HTTP/1.1
Host: ru.wikipedia.org
Accept: text/html
Connection: close
(пустая строка)
HTTP/1.1 200 O...
Протоколы Internet
●

HTTP – передача гипертекста

●

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

●

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

●

POP3, IMAP – пол...
Форматы Internet
●

RFC822 - Internet Text Message format

●

XML

●

JSON, JSONP

●

CSV

●

MIME

●

JPEG / PNG / GIF

●...
URI vs URL
URI – идентификатор
mailto:me@tut.ru
tel:02
urn:isbn:0-395-36341-1

URL – определяет положение ресурса
http://t...
HTTP – загрузка файлов
Загрузка с диска
1.html → /home/user/ht/1.html
img/1.jpg → /home/user/ht/img/1.jpg

Загрузка с серв...
HTML
<ul id="tab_main">
<li>
<a href="/content">
<img src="/img/content.png" alt="Статьи">
Статьи
</a>
</li>
<li>
<a href=...
HTML
HTML тэги
Парные: <b></b>(bold), <i></i>(italic), <a></a>
(anchor), <quote></quote>
Одиночные: <img>, <link>
Структур...
Формы и ссылки
<a href=”/search/?q=bob&site=mail.ru”>Найти</a>
<a name=”chapter1”></a>
<a href=”#chapter1”>Глава 1</a>
<fo...
CGI
Переменные окружения
REQUEST_METHOD – метод (GET, POST, …)
REQUEST_URI – строка запроса
QUERY_STRING - строка параметр...
CGI - скрипт
#!/usr/bin/python2.7
print "Content-Type: text/html"
print ""
print "<html><body>"
print "<h1>hello, world!</...
Python

●

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

●

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

●

Минимализм

●

Динамическая (но строгая...
Python (примеры)
animals = ['dog', 'tux', 'caterpillar']
for a in animals:
print(a)
if len(a) > 3:
print('%s_%s' % (a[0:2]...
Шаблонизация
Скрипт do.cgi
return render_to_response('sample.tpl', {
'say_hello' : True,
'environ': os.environ
})

Шаблон ...
SSI
<!--# include file=”/header.html” –->
<div class=”user-email”>
<!--# set var=”Email” value=”me@a.ru” -->
<!--# echo va...
JavaScript

●

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

●

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

●

DOM – дерево, DHTML

●

События и обрабо...
FireBug - F12
Спасибо за внимание
Дмитрий Смаль, smal@corp.mail.ru
Upcoming SlideShare
Loading in …5
×

Web весна 2013 лекция 1

423 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
423
On SlideShare
0
From Embeds
0
Number of Embeds
129
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web весна 2013 лекция 1

  1. 1. Web технологи Дмитрий Смаль
  2. 2. О чем этот курс ?
  3. 3. Как программировать на PHP / Java? Как сверстать красивую страничку? Как сделать сайт?
  4. 4. Это курс о.. О том, как работают web приложения. О “Best practise” web разработки. О современных технологий web.
  5. 5. Зачем это все ?
  6. 6. Архитектор должен быть в курсе Неплохой способ заработать $ Или.. что бы вовремя остановиться )
  7. 7. Немного истории..
  8. 8. История сети Internet 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
  9. 9. Число хостов в Internet
  10. 10. Браузерные войны
  11. 11. Эволюция web сайтов Web 1.0 – до .com bubble. Статичное содержание страниц, аскетичный дизайн, чаты, форумы, гостевые книги. Web 2.0 – новое поколение сайтов (после 2001) Usergenerated content. Предоставление и потребление API. RSS. Обновление страниц “на лету” (ajax). Web 3.0 - ??? Community-generated content. Семантическая паутина. Уникальные идентификаторы и микроформаты. Аскетичный дизайн
  12. 12. Ситуация на сегодняшний день
  13. 13. Тенденции развития ПО ● ● Клиент-серверная архитектура. Глобальные приложения: поиск, почта – big data ● Мобильные приложения ● Software as a Service ● Облачные сервисы Тонкие клиенты. cоциальные сети,
  14. 14. Web приложения ● ● ● ● ● Традиционные сайты: новости, блоги, wiki, базы знаний, визитки. Глобальные приложения: почтовые сервисы, поиск, социальные сети. E-commerce: магазины, бронирование, цифровая дистрибуция. Замена desktop приложениям: банк-клиенты, CRM, корпоративный софт. SAAS – то же cамое, но онлайн.
  15. 15. Чем можно заняться ? ● Front-end разработка ● Back-end разработка ● Разработка под мобильные платформы ● Инфраструктура ● Архитектура ● Системное программирование ● Прочее (seo, security, management)
  16. 16. Как работает web сайт ?
  17. 17. Архитектура Клиент-серверное приложение Ресурсы и адресация Запрос – ответ (альтернативы ?)
  18. 18. IP адресация ● 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
  19. 19. DNS
  20. 20. DNS ● Отличие домена и зоны DNS ● Что возвращает DNS? Виды записей ● Рекурсивные и итеративные запросы ● Обратные зоны ● CDN – content delivery network ● Google public DNS – 8.8.8.8 8.8.4.4
  21. 21. HTTP 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)
  22. 22. Протоколы Internet ● HTTP – передача гипертекста ● FTP – передача файлов ● SMTP – передача почты ● POP3, IMAP – получение почты ● SSH – удаленный доступ к серверу ● SFTP – FTP через SSH ● XMPP – Jabber, мгновенные сообщения ● TCP ?
  23. 23. Форматы Internet ● RFC822 - Internet Text Message format ● XML ● JSON, JSONP ● CSV ● MIME ● JPEG / PNG / GIF ● PDF
  24. 24. URI vs URL URI – идентификатор mailto:me@tut.ru tel:02 urn:isbn:0-395-36341-1 URL – определяет положение ресурса http://tom:abc@host.com/h/1.html?a=b http – протокол tom:abc – логин / пароль host.com – адрес сервера /h/1.html – путь к ресурсу a=b – параметры (query string)
  25. 25. HTTP – загрузка файлов Загрузка с диска 1.html → /home/user/ht/1.html img/1.jpg → /home/user/ht/img/1.jpg Загрузка с сервера DocumentRoot = /htdocs http://www.ru/ → /htdocs/index.html http://www.ru/img/1.jpg → /htdocs/img/1.jpg
  26. 26. HTML <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>
  27. 27. HTML HTML тэги Парные: <b></b>(bold), <i></i>(italic), <a></a> (anchor), <quote></quote> Одиночные: <img>, <link> Структурые: <body>, <ul>, <div>,<span> HTML аттрибуты Стандартные: id, style, class, title, .. Специфичные: href, src, rowspan, Пользовательские: data-myattr
  28. 28. Формы и ссылки <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>
  29. 29. CGI Переменные окружения REQUEST_METHOD – метод (GET, POST, …) REQUEST_URI – строка запроса QUERY_STRING - строка параметров REMOTE_ADDR – ip адрес клиента SCRIPT_NAME – имя текущего скрипта HTTP_COOKIE – заголовок Cookie: HTTP_REFERER – заголовок Referer:
  30. 30. CGI - скрипт #!/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>" Ошибочка ?
  31. 31. Python ● Скриптовый язык общего назначений ● Синтаксис основан на отступах ● Минимализм ● Динамическая (но строгая) типизация http://www.codecademy.com/tracks/python
  32. 32. Python (примеры) 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()
  33. 33. Шаблонизация Скрипт do.cgi return render_to_response('sample.tpl', { 'say_hello' : True, 'environ': os.environ }) Шаблон sample.tpl <ul> [% IF say_hello %] <h1>Hello, world!</h1> [% END %] [% FOR e IN environ %] <li>[% e.name %] = [% e.value %]</li> [% END %] </ul>
  34. 34. SSI <!--# include file=”/header.html” –-> <div class=”user-email”> <!--# set var=”Email” value=”me@a.ru” --> <!--# echo var=”Email” --> </div> <!--# if expr=”$Email” → Авторизован <!--# else --> Вам нужно авторизоваться <!--# endif --> <!--# config -->
  35. 35. JavaScript ● Язык программирования браузера ● Java / C подобный синтаксис ● DOM – дерево, DHTML ● События и обработчики ● XHR и Ajax ● JQuery, Prototype, Backbone, YUI, … http://www.codecademy.com/tracks/javascript
  36. 36. FireBug - F12
  37. 37. Спасибо за внимание Дмитрий Смаль, smal@corp.mail.ru

×