Web осень 2012 лекция 1

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? Виды записей
●Рекурсивные и итеративные запросы
●Обратные зоны
●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
●PDF
Форматы Internet

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)

URI vs URL
URI – идентификатор
URL – определяет положение ресурса
mailto:me@tut.ru
tel:02
urn:isbn:0-395-36341-1
http://tom:abc@host.com/h/1.html?a=b
http – протокол
tom:abc – логин / пароль
host.com – адрес сервера
/h/1.html – путь к ресурсу
a=b – параметры (query string)

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→

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.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>"
Ошибочка ?

Шаблонизация
<ul>
[% IF say_hello %]
<h1>Hello, world!</h1>
[% END %]
[% FOR e IN environ %]
<li>[% e.name %] = [% e.value %]</li>
[% END %]
</ul>
Шаблон sample.tpl
Скрипт do.cgi
return render_to_response('sample.tpl', {
'say_hello' : True,
'environ': os.environ
})

SSI


</div>

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

JavaScript
●Язык программирования браузера
●Java / C подобный синтаксис
●DOM – дерево, DHTML
●События и обработчики
●XHR и Ajax
●Event-driven programming
●JQuery, Prototype, Backbone, YUI, ...

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

Web осень 2012 лекция 1

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Web осень 2012 лекция 1

Semelhante a Web осень 2012 лекция 1 (20)

Mais de Technopark

Mais de Technopark (20)

Web осень 2012 лекция 1