Embed Size (px)
DESCRIPTION
Citation preview
Web технологи
Дмитрий Смаль
1969 – сеанс связи ARPANET
1971 – отправка первого Email
1983 – ARPANET переходит на TCP/IP
1984 – запущена система DNS
1989 – появление WWW, HTTP, HTML
1993 – первый браузер – NCSA Mosaic
1995 – Yahoo, Hotmail, Amazon.com
История сети Internet
Браузерные войны
●Клиент-серверная архитектура. Тонкие клиенты.
●Глобальные приложения: cоциальные сети, поиск, почта
●Мобильные приложения
●Software as a Service
●Облачные сервисы
Направления развития ПО
●Традиционные сайты: новости, блоги, wiki, базы знаний, визитки.
●Глобальные приложения: почтовые сервисы, поиск, социальные сети.
●E-commerce: магазины, бронирование, цифровая дистрибуция.
●Замена desktop приложениям: банк-клиенты, CRM, корпоративный софт.
●SAAS – то же cамое, но онлайн.
Web приложения
●Front-end разработка
●Back-end разработка
●Разработка под мобильные платформы
●Инфраструктура
●Архитектура
●Системное программирование
●Прочее (seo, security, management)
Чем можно заняться ?
Как работает современный сайт ?
●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 адресация
DNS
●Отличие домена и зоны DNS
●Что возвращает DNS? Виды записей
●Рекурсивные и итеративные запросы
●Обратные зоны
●CDN – content delivery network
●Google public DNS – 8.8.8.8 8.8.4.4
DNS
●HTTP – передача гипертекста
●FTP – передача файлов
●SMTP – передача почты
●POP3, IMAP – получение почты
●SSH – удаленный доступ к серверу
●SFTP – FTP через SSH
●XMPP – Jabber, мгновенные сообщения
●TCP ?
Протоколы Internet
●RFC822 - Internet Text Message format
●XML
●JSON, JSONP
●CSV
●MIME
●JPEG / PNG / GIF
Форматы Internet
HTTP
GET /wiki/страница HTTP/1.1Host: ru.wikipedia.orgAccept: text/htmlConnection: close(пустая строка)
HTTP/1.1 200 OKServer: ApacheContent-Language: ruContent-Type: text/html; charset=utf-8Content-Length: 1234Connection: close(HTML)
URI vs URL
URI – идентификатор
URL – определяет положение ресурса
mailto:[email protected]:02urn:isbn:0-395-36341-1
http://tom:[email protected]/h/1.html?a=bhttp – протоколtom:abc – логин / парольhost.com – адрес сервера/h/1.html – путь к ресурсуa=b – параметры (query string)
HTTP – загрузка файлов
Загрузка с диска
Загрузка с сервера
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
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>
HTML
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
Формы и ссылки
<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>
CGI
REQUEST_METHOD – метод (GET, POST, …)
REQUEST_URI – строка запроса
QUERY_STRING - строка параметров
REMOTE_ADDR – ip адрес клиента
SCRIPT_NAME – имя текущего скрипта
HTTP_COOKIE – заголовок Cookie:
HTTP_REFERER – заголовок Referer:
Переменные окружения
CGI - скрипт
#!/usr/bin/python2.7print "Content-Type: text/html"print ""print "<html><body>"print "<h1>hello, world!</h1>"import osfor k, v in os.environ.items(): print "%s = %s<br>" % (k, v)print "</html></body>"
Ошибочка ?
Шаблонизация
<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})
SSI
<!--# include file=”/header.html” –->
<div class=”user-email”><!--# set var=”Email” value=”[email protected]” --><!--# echo var=”Email” --> </div>
<!--# if expr=”$Email” →Авторизован<!--# else --> Вам нужно авторизоваться<!--# endif -->
<!--# config -->
JavaScript
●Язык программирования браузера
●Java / C подобный синтаксис
●DOM – дерево, DHTML
●События и обработчики
●XHR и Ajax
●Event-driven programming
●JQuery, Prototype, Backbone, YUI, ...
FireBug - F12
Спасибо за вниманиеДмитрий Смаль, [email protected]
