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

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

История сети Internet
1969 – сеанс связи ARPANET
1971 – отправка первого Email
1983 – ARPANET переходит на TCP/IP
1984 – запущена система DNS
1989 – появление WWW, HTTP, HTML
1993 – первый браузер – NCSA Mosaic
1995 – Yahoo, Hotmail, Amazon.com

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

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

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

URL vs URI
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)

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

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

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)

Другие протоколы
HTTP – передача гипертекста
FTP – передача файлов
SMTP – передача почты
POP3, IMAP – получение почты
RFC822 - Internet Text Message format

Document Root
1) Загрузка с диска
1.html → /home/user/ht/1.html
img/1.jpg → /home/user/ht/img/1.jpg
2) Загрузка с сервера
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 тэги
Парные: <b></b>(bold), <i></i>(italic), <a></a>
(anchor), <quote></quote>
Одиночные: <img>, <link>
Структурые: <body>, <ul>, <div>, <span>
HTML аттрибуты
HTML тэги
Стандартные: id, style, class, title, ..
Специфичные: href, src, rowspan,
Пользовательские: data-myattr

SSI

CGI скрипты
#!/usr/bin/python2.7
print "Content-type: text/html"
print ""
print "<h1>Hello, world!</h1>"
import os
for k, v in os.environ.items():
print "%s = %s<br>" % (k, v)

CGI Environment
REQUEST_METHOD – метод (GET, POST, …)
REQUEST_URI – строка запроса
QUERY_STRING - строка параметров
REMOTE_ADDR – ip адрес клиента
SCRIPT_NAME – имя текущего скрипта
HTTP_COOKIE – заголовок Cookie:
HTTP_REFERER – заголовок Referer:

Forms and Anchors
<a href=”/search/?q=bob&site=mail.ru”>
Найти </a>
<form method=”GET” action=”/search/”>
<input type=”text” name=”q” value=””/>
<input type=”text” name=”site” value=””/>
<input type=”submit”/>
</form>

Шаблоны
<ul>
[% IF say_hello %]
<h1>Hello, world!</h1>
[% END %]
[% FOR e IN environ %]
<li>[% e.name %] = [% e.value %]</li>
[% END %]
</ul>

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

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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Viewers also liked

Viewers also liked (19)

Similar to Web весна 2012 лекция 1

Similar to Web весна 2012 лекция 1 (20)

More from Technopark

More from Technopark (20)

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