Программирование в Интернет Петухин Вячеслав Алексеевич 1 семестр, 72 часа лекций, 38 часов практики, 38 часов лабораторных.

Программа 1.Синтаксис HTML 2.Каскадные таблицы стилей 3.JavaScript 4.XML 5.Серверные технологии

Основные понятия Интернет это глобальная информационная система, которая: 1. логически взаимосвязана пространством глобальных уникальных адресов, основанных на Интернет-протоколе (IP); 2. способна поддерживать коммуникации с использованием семейства Протокола управления передачей/Интернет-протокола (TCP/IP); 3. обеспечивает, использует или делает доступной, на общественной или частной основе, высокоуровневые сервисы, надстроенные над описанной здесь коммуникационной и иной связанной с ней инфраструктурой.

Основные понятия Интернет Сервисы Интернет (WWW, , FTP,...) Протокол - система соглашений о передачи и приеме данных в сети Сервер - компьютер или программа, предоставляющая некоторые услуги другим компьютерам или программам. На одном компьютере могут работать несколько разных серверов. Клиент - это компьютер или программа, использующая ресурсы сервера. На одном компьютере одновременно могут работать несколько клиентов. Пользователь Адресация. IP-адреса, URL, URI.

IP - адреса Биты, задающие класс адреса Номер (адрес) сети Номер компьютера

URL ( uniform resource locator) Имя www-сервера Путь к файлу Имя файла протокол Запрос Метка Порт

Домены

Интернет WWW World Wide Web Всемирная паутина

Уровни функционирования Интернет

Протоколы IP – интернет-протокол TCP – протокол управления передачей (transfer control protocol) Telnet – протокол терминального подключения к удаленному компьютеру, исторически был одним из первых, сейчас используется редко FTP – file transfer protocol, протокол передачи данных в виде файлов HTTP- hyper text transfer protocol, основной протокол передачи данных в WWW POP3, IMAP, SMTP – протоколы передачи электронной почты, входящие и исходящий NNTP – протокол передачи новостей или телеконференций

Подробная схема работы WWW пользователь адрес браузерwww-сервер tcp-программы ip ethernetсетевое оборудование DNS

Подробная схема работы WWW пользователь адрес браузер http-запрос www-сервер tcp-программы ip ip ethernetсетевое оборудование http-протокол tcp-протокол DNS

Подробная схема работы WWW пользователь адрес браузер http-запрос www-сервер tcp-программы ip ip-пакеты ip ethernetсетевое оборудование http-протокол tcp-протокол ip-протокол DNS

Подробная схема работы WWW пользователь адрес браузер http-запрос www-сервер tcp-программы ip ip-пакеты ip ip-пакеты ethernetсетевое оборудование http-протокол tcp-протокол ip-протокол DNS

Подробная схема работы WWW пользователь адрес браузер http-запрос www-сервер ответ на запрос tcp-программы ip ip-пакеты ip ip-пакеты ethernetсетевое оборудование http-протокол tcp-протокол ip-протокол DNS

Подробная схема работы WWW пользователь адрес браузер http-запрос www-сервер ответ на запрос tcp-программы ip ip-пакеты ip ip-пакеты ethernetсетевое оборудование ip-протокол DNS http-протокол tcp-протокол

WWW-сайт Тематически единый и оформленный в едином стиле объём информации, выполненный в виде гипертекста и расположенный на WWW-сервере

WWW-страница WWW-страница соответствует тому объёму информации, который поступает на клиентский компьютер при одном действии пользователя (обращении к одному адресу) WWW-страница состоит из главного файла (обычно HTML-файл) и файлов, представляющих отдельные части страницы Имеет свой адрес (URL)

клиент WWW-клиенты Браузеры: MS Internet Explorer, Mozilla FireFox, Opera и т.д. Визуализируют WWW-страницы Получают файлы WWW-страниц по http-протоколу браузер локальные файлы (локальная версия сайта) сервер файлы сайта http-протокол

Организация WWW-страницы рисунки: image1.gif, image2.gif гиперссылки: page1.html, page2.html frame1.html frame3.html рисунки: image1.gif, image2.gif гиперссылки: page1.html, page2.html программы: prog.js Простой вариант страницы (html, swf и т.д.) page.html image1.gif image2.gif style.css page.html image1.gif image2.gif style.cssprog.js image3.giftext1.html frames.html frame1.html frame3.html frame2.html Страница, использующая динамический HTML Фреймы frame2.html

Динамический HTML Страница не статична, а реагирует на действия пользователя Основной способ реализации: К каждому элементу страницы можно получить доступ из программы и изменить его

Статические сайты Статические страницы Страницы хранятся на сайте в том же виде, в котором передаются клиенту

Динамические сайты Динамические страницы Страницы формируются в момент получения запроса от клиента Способы формирования: Универсальные программы (.exe и т.п.) Скриптовые программы (т.е. программы, состоящие из инструкций, интерпретируемых WWW-сервером) XML + XSLT

Визуализация информации сайта База данных (сервер БД) Программа HTML Браузер Внешние сервера XML-данные + XSLT- таблица HTML Браузер XML + XSLT Браузер HTML + JavaScript Браузер

Выполнение программ на стороне сервера и на стороне клиента серверклиент данные программа браузер HTML + JavaScript интерпретирует java-скрипт

Выполнение программ на стороне сервера и на стороне клиента серверклиент данные программа браузер HTML + данные + программы внешние программы плагины

Технология создания сайтов

Технологическая цепочка разработки сайта Автор идеи (директор проекта, заказчик) Цели и задачи Содержание Способ функциони- рования 1. Постановка задачи Исполнительный директор, проектировщик, дизайнер 2. Проектирование Структура сайта Навигация Платформа (оболочка, язык програм- мирования) + Программист База данных Программы на стороне сервера Интерфейс на стороне клиента + 3. Програм- мирование Веб-дизайнер + Графическое оформление Шаблоны страниц Шрифты Цветовая схема Графические элементы 4. Оформле- ние (графичес- кий дизайн) Содержание (тексты) + HTML-кодер Html - код 5. HTML- кодирование

Технологическая цепочка разработки сайта Автор идеи (директор проекта, заказчик) Цели и задачи Содержание Способ функциони- рования 1. Постановка задачи Исполнительный директор, проектировщик, дизайнер 2. Проектирование Структура сайта Навигация Платформа (оболочка, язык програм- мирования) + Веб-дизайнер + Графическое оформление Шаблоны страниц Шрифты Цветовая схема Графические элементы 3. Оформление (графический дизайн) Программист База данных Программы на стороне сервера Интерфейс на стороне клиента + 4. Програм- мирование Содержание (тексты) + HTML-кодер Html - код 5. HTML- кодирование Администратор Создание сервера Доменное имя Размещение на сервере 6. Размещение информации + Поддержка сайта

Элементы страницы Заголовок страницы, основное меню навигации Меню раздела Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст Графичекие эл-ты Общая схема страницы, стилевой файл Веб- дизайнер HTML- кодер База данных

Технологии специализации HTML + CSS. Активное использование каскадных таблиц стилей для форматирования – выделение оформления в стилевые файлы. Специализированные редакторы (Dreamweaver). Автоматизируют создание набора страниц сайта. SSI. (Server Side Include) Вставки на стороне сервера. Позволяют собирать страницу «из кусков». Динамический сайт (программа + база данных) Позволяют произвольным образом генерировать страницу по данным.