Курс посвящен основам web-разработки, включая программирование на PHP и Java, а также созданию веб-страниц и сайтов. В документе представлены исторические аспекты интернет-технологий, основные архитектурные подходы и современные тенденции в web-приложениях, включая клиент-серверную архитектуру и использование облачных технологий. Также обсуждаются возможности карьерного роста в области front-end и back-end разработки, системного программирования и других связанных сфер.

1. Web технологи
Дмитрий Смаль

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

3. Как программировать на PHP / Java?
Как сверстать красивую страничку?
Как сделать сайт?

4. Это курс о..
О том, как работают web приложения.
О “Best practise” web разработки.
О современных технологий web.

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

6. Архитектор должен быть в курсе
Неплохой способ заработать $
Или.. что бы вовремя остановиться )

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

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. Число хостов в Internet

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

11. Эволюция web сайтов
Web 1.0 – до .com bubble. Статичное содержание
страниц, аскетичный дизайн, чаты, форумы, гостевые
книги.
Web 2.0 – новое поколение сайтов (после 2001) Usergenerated content. Предоставление и потребление API.
RSS. Обновление страниц “на лету” (ajax).
Web 3.0 - ??? Community-generated content.
Семантическая паутина. Уникальные идентификаторы и
микроформаты. Аскетичный дизайн

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

13. Тенденции развития ПО
●
●
Клиент-серверная архитектура.
Глобальные приложения:
поиск, почта – big data
●
Мобильные приложения
●
Software as a Service
●
Облачные сервисы
Тонкие клиенты.
cоциальные сети,

14. Web приложения
●
●
●
●
●
Традиционные сайты: новости, блоги, wiki, базы знаний,
визитки.
Глобальные приложения: почтовые сервисы, поиск,
социальные сети.
E-commerce: магазины, бронирование, цифровая
дистрибуция.
Замена desktop приложениям: банк-клиенты, CRM,
корпоративный софт.
SAAS – то же cамое, но онлайн.

15. Чем можно заняться ?
●
Front-end разработка
●
Back-end разработка
●
Разработка под мобильные платформы
●
Инфраструктура
●
Архитектура
●
Системное программирование
●
Прочее (seo, security, management)

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

17. Архитектура
Клиент-серверное приложение
Ресурсы и адресация
Запрос – ответ (альтернативы ?)

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

20. DNS
●
Отличие домена и зоны DNS
●
Что возвращает DNS? Виды записей
●
Рекурсивные и итеративные запросы
●
Обратные зоны
●
CDN – content delivery network
●
Google public DNS – 8.8.8.8 8.8.4.4

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. Протоколы Internet
●
HTTP – передача гипертекста
●
FTP – передача файлов
●
SMTP – передача почты
●
POP3, IMAP – получение почты
●
SSH – удаленный доступ к серверу
●
SFTP – FTP через SSH
●
XMPP – Jabber, мгновенные сообщения
●
TCP ?

23. Форматы Internet
●
RFC822 - Internet Text Message format
●
XML
●
JSON, JSONP
●
CSV
●
MIME
●
JPEG / PNG / GIF
●
PDF

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. 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. 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. 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. Формы и ссылки
<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. CGI
Переменные окружения
REQUEST_METHOD – метод (GET, POST, …)
REQUEST_URI – строка запроса
QUERY_STRING - строка параметров
REMOTE_ADDR – ip адрес клиента
SCRIPT_NAME – имя текущего скрипта
HTTP_COOKIE – заголовок Cookie:
HTTP_REFERER – заголовок Referer:

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. Python
●
Скриптовый язык общего назначений
●
Синтаксис основан на отступах
●
Минимализм
●
Динамическая (но строгая) типизация
http://www.codecademy.com/tracks/python

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. Шаблонизация
Скрипт 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. 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. JavaScript
●
Язык программирования браузера
●
Java / C подобный синтаксис
●
DOM – дерево, DHTML
●
События и обработчики
●
XHR и Ajax
●
JQuery, Prototype, Backbone, YUI, …
http://www.codecademy.com/tracks/javascript

36. FireBug - F12

37. Спасибо за внимание
Дмитрий Смаль, smal@corp.mail.ru