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

Web-технологии

Смаль Дмитрий

История сети Internet1969 – сеанс связи 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 URIURI – идентификатор - mailto:[email protected],

tel:02, urn:isbn:0-395-36341-1

URL – определяет положение ресурса

http://tom:[email protected]/h/1.html?a=b

http – протокол

tom:abc – логин / пароль

host.com – адрес сервера

/h/1.html – путь к ресурсу

a=b – параметры (query string)

DNS — Domain Name System

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 Root1) Загрузка с диска

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













mailto:[email protected]

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

Documents