Обзор средств разработки веб-приложений. Основы веб-программирования. Компоненты веб-сайтов. - презентация

1 Обзор средств разработки веб-приложений. Основы веб-программирования. Компоненты веб-сайтов.

2 70-е годы Сеть ARPAnet, протокол IP 80-е годы Локальные сети (Ethernet, TokenRing и др.) Протокол TCP протоколы FTP, POP3, SMTP, Usenet (сообщество групп новостей), Gopher (предшественник WWW, архив документов) 90-е годы Язык HTML (язык создания платформенной-независимых, связанных друг с другом документов – Тим Бернерс-Ли, 1989) протокол обмена HTML-документами HTTP интернет-сервис предоставления доступа к гипертекстовым документам WWW (World Wide Web) браузеры для просмотра гипертекстовых документов и навигации по WWW (Mosaic, Netscape Navigator, Internet Explorer) Настоящее время Кроссплатформенный язык Java, платформа.NET Динамически генерируемые документы: JavaScript, Dynamic HTML, Jscript, VBScript и т.д. История возникновения WWW

3 Браузер NCSA Mosaic Браузер NCSA Mosaic Разработан в 1993 году Марком Андриессоном. Первый веб браузер под операционную систему Microsoft Windows (тогда ещё MS-DOS с графической оболочкой MS Windows 3) с графическим интерфейсом пользователя и развитыми возможностями, на котором основаны и Mozilla Firefox, и Microsoft Internet Explorer. В 1994 году переименован в Netscape Navigator. Компания Netscape в 1998 году была куплена компанией America Online. В 2003 году проект Netscape Navigator был закрыт. Марк Андриессен в 90-х годах принимал участие в разработке браузера Netscape Navigator. В настоящее время работает в Microsoft над новыми версиями Internet Explorer

4 Архитектура клиент-сервер Взаимодействующие приложения могут быть отнесены либо к клиенту, либо к серверу. Приложение-клиент запрашивает обслуживание и данные с сервера, а приложение-сервер отвечает на запросы клиента. Задача сервера состоит в обработке как можно большего числа запросов на извлечение и сохранение данных. Основное преимущество модели «клиент-сервер» состоит в том, что она позволяет нескольким пользователям одновременно получить доступ к данным приложения, при этом изменения, внесенные с одного компьютера, становятся доступными для всех клиентов.

5 Архитектура веб-приложений Веб-приложения относятся к распределенным многозвенным системам. Под «веб-приложениями» понимаются серверные приложения, являющиеся расширением функциональности веб-сервера. В качестве клиента используется веб-браузер. К первому виду веб-приложений можно отнести программы, не использующие компонентных моделей. Например, программы, написанные с помощью простых скриптовых языков. Второй вид веб-приложений приложения, использующие для расширения функциональности веб-серверов и реализации бизнес-логики универсальные компонентные модели, не предназначенные для создания только веб-приложений. Третий вид веб-приложения, созданные с использованием специализированных компонентных моделей, например сервлетов и документов.

6 Веб-серверы Веб-серверы Веб-сервер это сервер, принимающий HTTP-запросы от клиентов (веб-браузеров) и выдающий им HTTP-ответы вместе с HTML-страницей, файлом, изображением, медиа- потоком или другими данными. Веб-серверы основа Всемирной паутины. Клиенты получают доступ к веб- серверу по URL адресу нужной им веб-страницы. Дополнительными функциями многих веб-серверов являются: 1. Ведение журнала сервера про обращения клиентов к ресурсам 2. Аутентификация пользователей 3. Поддержка динамически генерируемых страниц 4. Поддержка протокола HTTPS защищенных соединений с клиентами Наиболее распространёнными веб-серверами, вместе занимающими около 90 % рынка, являются: 1. Apache веб-сервер с открытым исходным кодом, наиболее часто используется в Unix-подобных ОС 2. IIS от компании Microsoft, распространяется с ОС семейства Windows NT

7 Хостинг Хостинг (hosting) услуга по предоставлению дискового пространства для размещения информации на сервере, постоянно находящегося в сети Интернет. Можно разделить услуги хостинга по типу ресурса: виртуальный хостинг предоставляется место на диске и/или внешний трафик, среда исполнения веб- сервисов единая для многих пользователей. виртуальный выделенный сервер (VPS или VDS) предоставляется место на диске, внешний трафик, часть общей памяти, процессорное время сервера. выделенный сервер предоставляется целый сервер с определенным дисковым пространством, памятью, процессорами и внешним трафиком. Колокация, колокейшн (co-location) услуга связи, состоящая в том, что провайдер размещает оборудование клиента на своей территории (в датацентре) и подключает его к каналам связи с высокой пропускной способностью.

8 Браузеры CSS2 4ФрэймыJavaJavascri pt XHTML 5RSSAtom FTPNNTP (Usenet) SSLIRC Internet Explorer Частич но Да Нет Да Нет Да Нет Да Нет K- Meleon Частич но Да Нет Да Нет Да Нет Konquer or Частич но Да Нет Да Нет Да Нет Links (текстовый) Нет Да Нет Частич но Нет Да Нет Да Нет Maxthon Частич но Да Нет Да Нет Да Нет Да Нет Mosaic Нет Да Нет Mozilla Firefox Частич но Да Интегр ируем Частич но Да (плагин) Плагин ДаПлагин Netscap e Частич но Да Нет Да Нет Opera Частич но Да Safari Частич но Да Нет Частич но Нет Да Нет

9 Стандарт HTML HTML-документ представляет собой текстовый документ, форматированный в соответствии со специальными правилами. Структура HTML-документа выглядит следующим образом: Содержание_1 Содержание_2 Содержание_4 Элементы, ограниченные угловыми скобочкам, носят название тегов и предназначены для форматирования текста и назначения ему некоторых атрибутов. Различают старт- теги ( ) и стоп-теги ( ), которые должны обязательно составлять пару. Минимально возможный документ должен состоять из ссылки на определение типа документа (DTD) и элемента …, содержащего название документа.

10 Пример HTML-страницы Простейший пример HTML-страницы, соответствующий DTD HTML 4.01 Strict: Проверить, что данный код соответствует стандарту HTML 4.01 можно на странице Простейшая содержательная веб-страница, созданная при помощи HTML 4.01: Минимальный документ Эта веб-страница имеет простейшую структуру из всех возможных.

11 Отображение веб-страницы Текст «Минимальный документ» отображен в заголовке окна браузера, а содержимое контейнера … – абзац текста – отображается в окне браузера.

12 Более сложный пример Пример Web-страницы Пример Web-страницы Демонстрация Web-страницы. Полужирный шрифт. Еще и курсив. Так оформляются ссылки

13 Отображение примера

14 Некоторые теги и их значение Тег Значение … Полужирный текст … Увеличенный текст … Текст, выделенный курсивом … Уменьшенный текст … Верхний индекс … Нижний индекс … Подчеркнутый текст Разрыв строки текста Горизонтальная линия … Гиперссылка Вставить изображение … Вставить абзац … Вставить заголовок уровня N

15 Стандарт CSS Каскадные листы стилей (Cascading Style Sheets) призваны упростить язык HTML, отказавшись от нежелательных тегов и атрибутов, отвечающих за визуальное представление данных. Сегодня актуальна CSS level 2. CSS2 также позволяет управлять представлением данных, учитывая специфику среды или устройства вывода информации, включая, например, программы синтеза речи, дисплеи Брайля и т.д. В основе CSS лежит особый язык, не связанный с HTML. Лист стилей – это набор правил, каждое из которых имеет следующий вид: Селектор { свойство_1: значение_1; … свойство_N: значение_N; }

16 Стандарт CSS Селектор определяет, к каким элементам HTML-документа будет применяться заданное правило. В самом простом случае селекторы совпадают с именами тегов. h1, h2, p { … } – сформированное правило будет применяться к заголовкам первого и второго уровня, а также к абзацам. Также бывают селекторы атрибутов, уникальных элементов, классов и т.д. Селекторы могут быть комбинированными, то есть состоять из нескольких элементов, например p a {…}. Этот селектор указывает на элементы …, но не все подряд, а только те, которые заключены в контейнерах …. Cледующее правило задает такое форматирование текста, при котором все абзацы выравниваются по правому краю и выводятся красным цветом: p {text-align: right; color: red;}

17 Внутренние и внешние листы стилей Стиль может задаваться как внутри HTML-документа, так и в отдельном файле. Для подключения внешнего листа стилей можно использовать следующее правило: Для задания листа стиле внутри HTML-документа используется тег : … Эти элементы должны помещаться между тегами и. Листы стилей лучше держать во внешних файлах, чтобы не смешивать данные, хранящиеся внутри HTML- документов, и правила их отображения, форматирования и т.д.

18 Пример использования CSS Пример использования CSS body { color: red; background: blue; } Этот текст будет выводиться красным на синем фоне. В данном примере любой текст, заключенный в контейнер … будет выводиться красным цветом на синем фоне.

19 Отображение примера

20 Некоторые атрибуты и их значение Атрибут Значение color: {Цвет};Цвет элемента (текста) background-color: transparent | {Цвет}; Цвет фона. Если transparent – фон прозрачный background-image: none | {Адрес файла}; Фоновый рисунок. Если none – рисунок отсутствует font-family: {Настройки шрифта} Устанавливает шрифт для вывода текста font-size: {Размер}Размер шрифта font-style: {Стиль}Стиль начертания шрифта text-align: left | right | center | justify; Выравнивание текста text-decoration: none | underline | overline | blink | line-through; Стиль оформления текста

21 Веб-форумы Веб-форум специальное программное обеспечение для организации общения посетителей веб-сайта. Форум предлагает набор разделов для обсуждения. Работа форума заключается в создании пользователями тем в разделах с последующим их обсуждением. Распространённое деление веб-форума: Разделы темы сообщения. Обычно сообщения несут информацию «автор тема содержание дата/время». Сообщение и все ответы на него образует ветку («тред»). На форумах может применяться гибкое разграничение доступа к сообщениям. На одних форумах чтение и создание новых сообщений доступны любым посетителям, на других необходима предварительная регистрация такие форумы называют открытыми. Применяется и смешанный вариант когда отдельные темы могут быть доступны на запись всем посетителям, а другие зарегистрированным участникам. Существуют закрытые форумы, доступ к которым определяется персонально для каждого участника администраторами форума. Встречается вариант, когда некоторые разделы форума общедоступны, а остальная часть доступна только узкому кругу участников.

22 Движки веб-форумов Программное обеспечение форума Число инсталляций Доля vBulletin109158,5% Invision Power Board23812,8% phpBB21011,3% Custom1015,4% UBB412,2% Ezboard372,0% Simple Machines Forum331,8% ASP Playground150,8% MesDiscussions.net150,8% Burning Board110,6% Другие проекты 733,8%

23 Блоги Блог (blog, «сетевой журнал или дневник событий») это веб- сайт, основное содержимое которого регулярно добавляемые записи, изображения или мультимедиа. Для блогов характерны записи вре́менной значимости. Блоггерами называют людей, ведущих блог. Совокупность всех блогов Сети принято называть блогосферой. По авторскому составу блоги могут быть личными, групповыми (корпоративными, клубными…) или общественными (открытыми). По содержанию тематическими или общими. Отличия блога от традиционного дневника обусловливаются средой: блоги обычно публичны или доступны хотя бы определённому множеству пользователей Сети. Движок блога может быть на личном веб-пространстве автора (в этом случае он называется stand alone блог) или на мощностях одной из служб, предоставляющих место специально для блогов, - блог-платформ. Блоги могут быть связаны ссылками по технологии «трэкбэк»; на блог- платформах часто создаются свои внутренние механизмы, способствующие множению связей и образованию социальных сетей. Например, механизм «друзей» (френдов) на популярнейшей в Рунете блог-платформе Живой журнал.

24 CMS-системы Система управления контентом (Content management system) компьютерная программа, используемая для хранения и публикации большого количества документов, изображений, музыки или видео. Частным случаем такого рода систем являются системы управления сайтами, которые позволяют управлять текстовым и графическим наполнением веб-сайта, предоставляя пользователю удобные инструменты хранения и публикации информации. Существуют готовые системы управления содержимым сайта, которые можно разделить на три типа, по способу работы: Генерация страниц по запросу. Страницы заново создаются сервером при каждом запросе. Генерация страниц при редактировании. Системы этого типа суть программы для редактирования страниц, которые при внесении изменений в содержание сайта создают набор статичных страниц. Смешанный тип. Сочетает в себе преимущества первых двух. Может быть реализован путём кэширования модуль представления генерирует страницу один раз, в дальнейшем она в разы быстрее подгружается из кэша.

25 Существующие CMS-системы Название ПлатформаПоддерживаемые БД PHP-NukePHPMySQL Apache LenyaJava, XML, Apache Cocoon- DotNetNukeASP.NETMS SQL Server OpenCMSJavaMySQL, Oracle, PostgreSQL, SQL Server PloneZope, PythonZODB, SQLite, PostgreSQL, MySQL, Oracle via Zope БитриксPHPMySQL, MS SQL mojoPortalASP.NETMS SQL, MySQL, PostgreSQL и SQLite Twilight CMSPerl- DJEMC++MySQL, MS SQL

26 JavaScript В отличии от HTML и CSS, язык JavaScript – настоящий язык программирования. HTML выполняет задачи логического структурирования данных, а CSS – задачи представления данных. JavaScript позволяет создавать сценарии, расширяющие функциональные возможности браузеров, и добавлять динамику в статически сформированные HTML- страницы. Язык JavaScript относится к классу интерпретируемых языков. Для этого виртуальная машина Java разбирает код скрипта и тотчас выполняет ее. Язык JavaScript является объектно-ориентированным языком и поддерживает работу как с пользовательскими объектами, так и с внешними объектами. К внешним объектам, в частности, относятся объекты, образующие DOM – объектную модель документа. Данная модель обеспечивает доступ скриптов к элементам документов.

27 Структура JavaScript Код JavaScriptа содержится внутри тегов …. Выходные данные, генерируемые скриптом, включаются в том месте документа, где находится элемент script. Структура сценария на JavaScript выглядит следующим образом: … HTML-текст … JavaScript-сценарий может находиться и во внешнем файле и подключаться в код HTML-документа:

28 Пример формирования документа Пример формирования документа на JavaScript Сформировать новый документ

29 Результат выполнения скрипта

30 События JavaScript JavaScript не только дает возможность создавать HTML-код при загрузке Web-страницы, но также позволяет связывать с HTML-элементами фрагменты кода. Эти фрагменты получают управление при выполнении пользователями некоторых действий. Таким образом, можно отслеживать различные события: щелчок мышью на кнопке или на гипертекстовой ссылке, загрузку документа или прекращение работы с ним, указание курсором мыши на ссылку и перемещение курсора за ее пределы, получение или потерю элементом фокуса ввода, передачу данных программе на стороне сервера и возникновение ошибки при загрузке изображения. JavaScript позволяет перехватывать и обрабатывать возникающие события. Для этого необходимо связать атрибут, соответствующий некоторому событию, с действием, которое должно следовать за ним.

31 Пример обработки события Пример перехвата и обработки события на JavaScript Простая кнопка

32 Результат выполнения скрипта