ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 25 (1 час)

Тема: «Проектирование web - приложений»

Цель занятия: овладеть навыками проектирования web – приложений, создания графического интерфейса web – приложения, стилей

Форма проведения:индивидуальное задание

Задание:

1. Разработать web - приложение

2. Осуществить отправку данных на сервер

3. Произвести выбор графического интерфейса web – приложения

4. Создание стилей

5. Оформить отчет

МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Создание Web-приложений является одной из важнейших технологий разработки ресурсов Internet.

В настоящее время набирает популярность новый подход к разработке веб-приложений, называемый Ajax. При использовании Ajax страницы веб-приложения не перезагружаются целиком, а лишь догружают необходимые данные с сервера, что делает их более интерактивными и производительными.

Веб-приложение - клиент-серверное приложение, в котором клиентом выступает браузер, а сервером - веб-сервер. Логика веб-приложения распределена между сервером и клиентом, хранение данных осуществляется, преимущественно, на сервере, обмен информацией происходит по сети. Одним из преимуществ такого подхода является тот факт, что клиенты не зависят от конкретной операционной системы пользователя, поэтому веб-приложения являются межплатформенными сервисами.

Существенное преимущество построения Web-приложений для поддержки стандартных функций браузера заключается в том, что функции должны выполняться независимо от операционной системы данного клиента. Вместо того чтобы писать различные версии для Microsoft Windows, Mac OS X,GNU/Linux и других операционных систем, приложение создается один раз для произвольно выбранной платформы и на ней разворачивается. Однако различная реализация HTML, CSS, DOM и других спецификаций в браузерах может вызвать проблемы при разработке веб-приложений и последующей поддержке. Кроме того, возможность пользователя настраивать многие параметры браузера (например, размер шрифта, цвета, отключение поддержки сценариев) может препятствовать корректной работе приложения.

Другой (менее универсальный) подход заключается в использовании Adobe Flash, Silverlight или Java-апплетов для полной или частичной реализации пользовательского интерфейса. Поскольку большинство браузеров поддерживает эти технологии (как правило, с помощью плагинов), Flash - или Java-приложения могут выполняться с легкостью. Так как они предоставляют программисту больший контроль над интерфейсом, они способны обходить многие несовместимости в конфигурациях браузеров, хотя несовместимость между Java или Flash реализациями на стороне клиента может приводить к различным осложнениям.

Веб-приложение состоит из клиентской и серверной частей, тем самым реализуя технологию "клиент-сервер".

Клиентская часть реализует пользовательский интерфейс, формирует запросы к серверу и обрабатывает ответы от него.

Серверная часть получает запрос от клиента, выполняет вычисления, после этого формирует веб-страницу и отправляет её клиенту по сети с использованием протокола HTTP.

Само веб-приложение может выступать в качестве клиента других служб, например, базы данных или другого веб-приложения, расположенного на другом сервере. Ярким примером веб-приложения является система управления содержимым статей Википедии: множество её участников могут принимать участие в создании сетевой энциклопедии, используя для этого браузеры своих операционных систем (будь то Microsoft Windows, GNU/Linux или любая другая операционная система) и не загружая дополнительных исполняемых модулей для работы с базой данных статей.

В свою очередь на стороне клиента используется следующие веб технологии:

- Для реализации GUI.

- HTML, XHTML.

- CSS.

Для формирования и обработки запросов, создания интерактивного и независимого от браузера интерфейса:

- ActiveX.

- Adobe Flash, Adobe Flex.

- Java.

- JavaScript.

- Silverlight.

HyperText Markup Language - язык гиппертекстовой разметки. Фактически термин "язык" не совсем точно отражает сущность HTML. Скорее HTML можно назвать расширенным текстом (текстом со свойствами), поскольку основа любого HTML-документа - это текст со вставками (маркерами, операторами, тегами,), придающими тексту различные свойства (шрифт, его размер, цвет, позицию и т.д.). Например: у нас есть буковка "Х", и это просто буква без свойств и прочего. С ней ничего нельзя поделать - это просто буква. Теперь мы хотим выкрасить эту букву в синий цвет и наклонить ее чуть вправо. Как это сделать? Надо объяснить браузеру, который эту букву будет показывать юзеру, что мы хотим ее покрасить и наклонить, поэтому мы должны где-то в свойствах буквы это указать. Иначе браузер покажет просто букву - прямую и черную. Вот для этого и существует HTML, он фактически говорит браузеру, как мы хотим отобразить букву (слово, текст) на экране. В обычном текстовом файле мы пишем свою букву (слово, текст) и с помощью HTML-тэгов назначаем ей свойства: цвет - синий, наклонена. Браузер видит эти свойства и согласно им отображает букву.

Кроме этого в текст можно вставлять ссылки на другие документы, файлы, скрипты и т.д. Редактировать HTML-файлы можно через банальный MS Word, стандартный Front Page Express и, наконец, MS InterDev - мощная среда, входящая в пакет MS Visual Studio 6.0. Из них самые продвинутые средства предлагает InterDev - интеграцию скриптов, ActiveX элементов и т.д., не говоря уже об удобном HTML-editing'е. Правда, - самые продвинутые порталы были сделаны в. notepad'e.

XHTML (англ. Extensible Hypertext Markup Language - расширяемый язык гипертекстовой разметки) - семейство языков разметки веб-страниц на основе XML, повторяющих и расширяющих возможности HTML 4. Спецификации XHTML 1.0 и XHTML 1.1 являются рекомендациями консорциума Всемирной паутины, однако на данный момент его развитие остановлено с рекомендацией использовать HTML. Новые версии XHTML не выпускаются.

Главное отличие XHTML от HTML заключается в обработке документа. Документы XHTML обрабатываются своим модулем (парсером) аналогично документам XML. В процессе этой обработки ошибки, допущенные разработчиками, не исправляются. XHTML соответствует спецификации SGML, поскольку XML является её подмножеством.html обладает множеством особенностей в процессе обработки и фактически перестал относиться к семейству SGML, что и закреплено в черновике спецификации HTML 5.

ПРАКТИЧЕСКОЕ УПРАЖНЕНИЕ

1) Запустите Блокнот и в самой первое его строке установите элемент <!DOCTYPE html>, подсказывающий браузеру как следует интерпретировать ваш документ.

<!DOCTYPE html>

2) Сделайте перевод строки и добавьте парный тег <html>. Переведите закрывающийся тег </html> на две строки вниз.

<!DOCTYPE html>

<html>

</html>

3) Добавьте парный тег <head> в строке между тегами <html> и переведите закрывающийся тег </head> на две строки вниз.

<!DOCTYPE html>

<html>

<head>

</head>

</html>

4) В строке между тегами <head> и </head> напишите парный тег <title></title> в одну строку.

<!DOCTYPE html> <html> <head>

5) Введите заголовок вашей веб-страницы между тегами <title> и </title>. Например, такой.

<!DOCTYPE html> <html> <head>

<title>Моя первая страница сайта</title> </head> </html>

6) Установите курсор в строке после закрывающегося тега </head> и выполните перевод строки. Впишите в появившуюся пустую строку парный тег <body>.

<!DOCTYPE html> <html> <head> <title>Моя первая страница сайта</title>

</head> <body></body> </html>

7) Сделайте двойной перевод между внутри тегами <body> и </body>. В появившуюся строку впишите парный тег заголовка <h1>. Наберите внутри тега <h1> подзаголовок страницы.

<!DOCTYPE html> <html> <head> <title>Моя первая страница сайта</title> </head>

8) После закрывающегося тега заголовка </h1> сделайте перевод строки и в новой строке установите парные теги абзаца <p> и </p>. Впишите между ними текст. Например, так.

<!DOCTYPE html> <html> <head> <title>Моя первая страница сайта</title> </head>

<body> <h1>Обо мне</h1> <p>Меня зовут Иванов Иван. Я создаю свой сайт.</p> </body> </html>

9)Заключите имя и фамилию в парный тег <b> для выделения их жирным шрифтом.

<!DOCTYPE html> <html> <head> <title>Моя первая страница сайта</title> </head>

<body> <h1>Обо мне</h1> <p>Меня зовут <b>Иванов Иван</b>. Я создаю свой сайт.</p> </body> </html>

10) После закрывающегося тега абзаца </p> выполните перевод строки и впишите в новой строке парный тег <h3>. Впишите между тегами какой-либо текст.

<!DOCTYPE html> <html> <head> <title>Моя первая страница сайта</title> </head> <body>

<h1>Обо мне</h1> <p>Меня зовут <b>Иванов Иван</b>. Я создаю свой сайт.</p> <h3>Мои успехи</h3> </body> </html>

11) После закрывающегося тега подзаголовка </h3> снова сделайте перевод строки, впишите парные тег абзаца <p> и </p> и между данными тегами напишите произвольный текст.

<!DOCTYPE html> <html> <head> <title>Моя первая страница сайта</title> </head> <body> <h1>Обо мне</h1> <p>Меня зовут <b>Иванов Иван</b>. Я создаю свой сайт.</p>

<h3>Мои успехи</h3> <p>Освоен базовый синтаксис HTML и создана первая страница будущего сайта. В процессе обучения использованы материалы сайта kakimenno.ru</p> </body> </html>

12) Из перечисленных тегов остались не изученными два – перевод строки <br> и важнейший тег для создания ссылок <a href=””>. Применим их. Перед последним закрывающимся тегом впишите дескриптор <br>, а между <br> и </p> конструкцию вида <a href=””></a>. У вас должно получится следующее.

<h3>Мои успехи</h3> <p>Освоен базовый синтаксис HTML и создана первая страница будущего сайта. В процессе обучения использованы материалы сайта kakimenno.ru<br> <a href=””></a></p> </body> </html>

13) Между кавычек в теге <a href=””> впишите адрес страницы, на которую вы будете ссылаться. Перед тегом <a href=””> можно вписать слово Ссылка, а между тегами <a href=””> и </a> вписать текст, который будет отображаться на странице.

<h3>Мои успехи</h3> <p>Освоен базовый синтаксис HTML и создана первая страница будущего сайта. В процессе обучения использованы материалы сайта kakimenno.ru<br> Ссылка: <a href = ”http://kakimenno.ru/”>kakimenno.ru</a></p> </body> </html>

14) На этом создание простейшей страницы для сайта может быть завершено. В принципе, его можно было завершить еще и п.9, но если вы серьезно намерены изучать язык HTML, то дополнительная практика не будет лишней. Сохраните страницу с расширением *.html и можете открыть ее в любом браузере, чтобы просмотреть результаты своей работы. Если все сделано правильно, то вы должны увидеть примерно следующее:

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 25 (1 час) - student2.ru