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

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

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

Это курс о..

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

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

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

История сети 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

Число хостов в Internet

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

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

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

Тенденции развития ПО
●

●

Клиент-серверная архитектура.
Глобальные приложения:
поиск, почта – big data

●

Мобильные приложения

●

Software as a Service

●

Облачные сервисы

Тонкие клиенты.
cоциальные сети,

Web приложения
●

●

●

●

●

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

Чем можно заняться ?
●

Front-end разработка

●

Back-end разработка

●

Разработка под мобильные платформы

●

Инфраструктура

●

Архитектура

●

Системное программирование

●

Прочее (seo, security, management)

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

Архитектура

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

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

DNS
●

Отличие домена и зоны DNS

●

Что возвращает DNS? Виды записей

●

Рекурсивные и итеративные запросы

●

Обратные зоны

●

CDN – content delivery network

●

Google public DNS – 8.8.8.8 8.8.4.4

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)

Протоколы Internet
●

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

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)

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 тэги
Парные: <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

Формы и ссылки
<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>"

Ошибочка ?

Python

●

Скриптовый язык общего назначений

●

Синтаксис основан на отступах

●

Минимализм

●

Динамическая (но строгая) типизация

http://www.codecademy.com/tracks/python

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()

Шаблонизация
Скрипт 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>

SSI


</div>

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

JavaScript

●

Язык программирования браузера

●

Java / C подобный синтаксис

●

DOM – дерево, DHTML

●

События и обработчики

●

XHR и Ajax

●

JQuery, Prototype, Backbone, YUI, …

http://www.codecademy.com/tracks/javascript

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

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Web весна 2013 лекция 1

Semelhante a Web весна 2013 лекция 1 (20)

Mais de Technopark

Mais de Technopark (20)

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