Web весна 2013 лекция 1
-
Upload
technopark -
Category
Documents
-
view
230 -
download
2
Transcript of Web весна 2013 лекция 1
![Page 1: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/1.jpg)
Web технологи
Дмитрий Смаль
![Page 2: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/2.jpg)
О чем этот курс ?
![Page 3: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/3.jpg)
Как программировать на PHP / Java?
Как сверстать красивую страничку?
Как сделать сайт?
![Page 4: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/4.jpg)
О том, как работают web приложения.
О “Best practise” web разработки.
О современных технологий web.
Это курс о..
![Page 5: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/5.jpg)
Зачем это все ?
![Page 6: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/6.jpg)
Архитектор должен быть в курсе
Неплохой способ заработать $
Или.. что бы вовремя остановиться )
![Page 7: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/7.jpg)
Немного истории..
![Page 8: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/8.jpg)
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
![Page 9: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/9.jpg)
Число хостов в Internet
![Page 10: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/10.jpg)
Браузерные войны
![Page 11: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/11.jpg)
Web 1.0 – до .com bubble. Статичное содержание страниц, аскетичный дизайн, чаты, форумы, гостевые книги.
Web 2.0 – новое поколение сайтов (после 2001) User-generated content. Предоставление и потребление API. RSS. Обновление страниц “на лету” (ajax).
Web 3.0 - ??? Community-generated content. Семантическая паутина. Уникальные идентификаторы и микроформаты. Аскетичный дизайн
Эволюция web сайтов
![Page 12: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/12.jpg)
Ситуация на сегодняшний день
![Page 13: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/13.jpg)
● Клиент-серверная архитектура. Тонкие клиенты.
● Глобальные приложения: cоциальные сети, поиск, почта – big data
● Мобильные приложения
● Software as a Service
● Облачные сервисы
Тенденции развития ПО
![Page 14: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/14.jpg)
● Традиционные сайты: новости, блоги, wiki, базы знаний, визитки.
● Глобальные приложения: почтовые сервисы, поиск, социальные сети.
● E-commerce: магазины, бронирование, цифровая дистрибуция.
● Замена desktop приложениям: банк-клиенты, CRM, корпоративный софт.
● SAAS – то же cамое, но онлайн.
Web приложения
![Page 15: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/15.jpg)
● Front-end разработка
● Back-end разработка
● Разработка под мобильные платформы
● Инфраструктура
● Архитектура
● Системное программирование
● Прочее (seo, security, management)
Чем можно заняться ?
![Page 16: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/16.jpg)
Как работает web сайт ?
![Page 17: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/17.jpg)
Клиент-серверное приложение
Ресурсы и адресация
Запрос – ответ (альтернативы ?)
Архитектура
![Page 18: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/18.jpg)
● 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 адресация
![Page 19: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/19.jpg)
DNS
![Page 20: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/20.jpg)
● Отличие домена и зоны DNS
● Что возвращает DNS? Виды записей
● Рекурсивные и итеративные запросы
● Обратные зоны
● CDN – content delivery network
● Google public DNS – 8.8.8.8 8.8.4.4
DNS
![Page 21: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/21.jpg)
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)
![Page 22: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/22.jpg)
● HTTP – передача гипертекста
● FTP – передача файлов
● SMTP – передача почты
● POP3, IMAP – получение почты
● SSH – удаленный доступ к серверу
● SFTP – FTP через SSH
● XMPP – Jabber, мгновенные сообщения
● TCP ?
Протоколы Internet
![Page 23: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/23.jpg)
● RFC822 - Internet Text Message format
● XML
● JSON, JSONP
● CSV
● MIME
● JPEG / PNG / GIF
Форматы Internet
![Page 24: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/24.jpg)
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)
![Page 25: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/25.jpg)
HTTP – загрузка файлов
Загрузка с диска
Загрузка с сервера
1.html /home/user/ht/1.html→img/1.jpg /home/user/ht/img/1.jpg→
DocumentRoot = /htdocshttp://www.ru/ /htdocs/index.html→http://www.ru/img/1.jpg /htdocs/img/1.jpg→
![Page 26: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/26.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>
![Page 27: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/27.jpg)
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
![Page 28: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/28.jpg)
Формы и ссылки
<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>
![Page 29: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/29.jpg)
CGI
REQUEST_METHOD – метод (GET, POST, …)
REQUEST_URI – строка запроса
QUERY_STRING - строка параметров
REMOTE_ADDR – ip адрес клиента
SCRIPT_NAME – имя текущего скрипта
HTTP_COOKIE – заголовок Cookie:
HTTP_REFERER – заголовок Referer:
Переменные окружения
![Page 30: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/30.jpg)
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>"
Ошибочка ?
![Page 31: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/31.jpg)
● Скриптовый язык общего назначений
● Синтаксис основан на отступах
● Минимализм
● Динамическая (но строгая) типизация
http://www.codecademy.com/tracks/python
Python
![Page 32: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/32.jpg)
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 datetimetd = datetime.date.today()from datetime import datetd = date.today()
![Page 33: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/33.jpg)
Шаблонизация
<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})
![Page 34: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/34.jpg)
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 -->
![Page 35: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/35.jpg)
JavaScript
● Язык программирования браузера
● Java / C подобный синтаксис
● DOM – дерево, DHTML
● События и обработчики
● XHR и Ajax
● JQuery, Prototype, Backbone, YUI, …
http://www.codecademy.com/tracks/javascript
![Page 36: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/36.jpg)
FireBug - F12
![Page 37: Web весна 2013 лекция 1](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a31e5f1a28ab0e318b4636/html5/thumbnails/37.jpg)
Спасибо за вниманиеДмитрий Смаль, [email protected]