Интерактивные элементы Web-страниц и скрипты

Размещено на http://www.allbest.ru/

Реферат на тему: «Интерактивные элементы Web-страниц и скрипты»

Выполнила: Козловская Д.С.

Архитектурный факультет,

специальность «архитектура»,

2 курс, гр.11101615

Содержание

Введение

1. AJAX и принцип работы скриптов

2. История AJAX

3. Преимущества и недостатки использования скриптов

4. Интерактивные элементы

Заключение

Список использованной литературы

Введение

Internet - всемирная сеть, которая объединяет множество компьютерных сетей различного уровня и отдельных компьютеров, обменивающих друг с другом информацией по каналам общественных телекоммуникаций на базе протоколов связи TCP/IP. Информация в Интернет хранится на серверах (сайтах). Серверы, объединенные высокоскоростными магистралями, составляют базовую часть сети Интернет. Доступ пользователей к информационным ресурсам Internet обычно осуществляется через провайдеров или корпоративную сеть.

Сайт является набором веб-страниц, объединенных общей тематикой и связанных между собой гиперссылками, единой системой навигации. Прикладным протоколом для передачи гипертекста (веб-страниц) является http (https), который указывается в URL или адресе любого ресурса (документа, файла) в Internet.

1. Статические сайты, содержащие статические HTML или XHTML страницы. Статические веб-страницы - это статические файлы (набор текста, таблиц, рисунков и т.д.), которые создается с помощью языка разметки HTML (имеют расширение .html или .htm) и хранятся в готовом виде в файловой системе сервера.

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

3. Flash-сайты - это интерактивные приложения, разработанные в среде Macromedia Flash. Основным инструментом разработки flash-программ является векторная графика (интерактивная векторная анимация для Web). Flash придает сайтам динамичность и интерактивность.

4. Комбинированные сайты, в которых используются вышеизложенные технологии создания сайтов.

Сайты по взаимодействию пользователя с ресурсами веб-страницы можно разделить на:

§ Пассивные сайты - это сайты с пассивными веб-страницами. В пассивных сайтах пользователь имеет возможность только просматривать информацию на веб-страницах.

§ Интерактивные сайты - это сайты с активными веб-страницами. При работе с интерактивными веб-страницами пользователь имеет возможность обмениваться данными с сервером, участвовать в интерактивном диалоге.

Статические сайты с интерактивными веб-страницами

Для придания статическим веб-страницам интерактивности и динамичности в веб-страницу можно вставлять скрипты на языках сценариев JavaScript и VBScript, исполняемых на стороне клиента. Скрипты на JavaScript и VBScript могут исполняться либо при наличии каких-либо действий пользователя либо автоматически во время загрузки веб-страницы. 

Кроме того, в HTML документ можно вставлять элементы DHTML (динамический HTML). DHTML - это способ создания интерактивного веб-сайта. Динамический HTML построен на языке программирования JavaScript, каскадных таблицах стилей CSS и DOM (объектной модели документа). [1]

В данном реферате будет рассмотрено и описано применение интерактивных элементов Web-страниц и скриптов, принцип их работы, их преимущества и недостатки.

AJAX и принцип работы скриптов

AJAX, Ajax (от англ. Asynchronous Javascript and XML - «асинхронный JavaScript и XML») - подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.

Рис.1 Логотип AJAX

· Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.

· Браузер формирует и отправляет запрос серверу.

· В ответ сервер генерирует совершенно новую веб-страницу и отправляет её браузеру и т. д., после чего браузер полностью перезагружает всю страницу.

При использовании AJAX:

· Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.

· Скрипт (на языке JavaScript) определяет, какая информация необходима для обновления страницы.

· Браузер отправляет соответствующий запрос на сервер.

· Сервер возвращает только ту часть документа, на которую пришёл запрос.

· Скрипт вносит изменения с учётом полученной информации (без полной перезагрузки страницы). [2]

Рис.2 Модель классических приложений для сети (слева) в прямом сравнении с применением AJAX (справа)

История AJAX

Впервые термин AJAX был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб-приложениям». Гарретт придумал термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им клиенту.

Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе «Remote Scripting», предложенном компанией Microsoft в 1998 году, или с использованием HTML-элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.

AJAX стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.

Рис.3 AJAX в ленте развития веб-технологий (обведен красным)[3]

Преимущества и недостатки использования скриптов

сайт интерактивный скрипт

Преимущества.

Экономия трафика

1. Использование AJAX позволяет значительно сократить трафик при работе с веб-приложением благодаря тому, что вместо загрузки всей страницы достаточно загрузить только изменившуюся часть или вообще только получить/передать набор данных в формате JSON или XML, а затем изменить содержимое страницы с помощью JavaScript.

2. Уменьшение нагрузки на сервер

При правильной реализации AJAX позволяет снизить нагрузку на сервер в несколько раз.

В частности, все страницы сайта чаще всего генерируются по одному шаблону, включая неизменные элементы («шапка», «навигационная панель», «подвал» и т. д.), для генерации которых требуются обращения к разным файлам, время на обработку скриптов (а иногда и запросы к БД) - всё это можно опустить, если заменить полную загрузку страницы генерацией и передачей лишь содержательной части. Дизайн страницы также обычно содержит множество файлов, связанных с оформлением (картинки, стили), на повторную обработку которых не надо тратить время, используя AJAX (экономия на количестве HTTP-соединений значительно выгоднее, чем на сокращении трафика каждого из них).

3. Ускорение реакции интерфейса

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

4. Почти безграничные возможности для интерактивной обработки

Например, при вводе поискового запроса в Google выводится подсказка с возможными вариантами запроса. На многих сайтах при регистрации пользователь вводит имя, и сразу же видит, доступно это имя или нет. AJAX удобен для программирования чатов, административных панелей и других инструментов, которые выводят меняющиеся со временем данные.

Недостатки.

1. Отсутствие интеграции со стандартными инструментами браузера

Динамически создаваемые страницы не регистрируются браузером в истории посещения страниц, поэтому не работает кнопка «Назад», предоставляющая пользователям возможность вернуться к просмотренным ранее страницам, но существуют скрипты, которые могут решить эту проблему.

Другой недостаток изменения содержимого страницы при постоянном URL заключается в невозможности сохранения закладки на желаемый материал. Проблему можно успешно решить с помощью History.pushState[4].

2. Динамически загружаемое содержимое недоступно поисковикам (если не проверять запрос, обычный он или XMLHttpRequest)

Поисковые машины не могут выполнять JavaScript, поэтому разработчики должны позаботиться об альтернативных способах доступа к содержимому сайта.

3. Старые методы учёта статистики сайтов становятся неактуальными

Многие сервисы статистики ведут учёт просмотров новых страниц сайта. Для сайтов, страницы которых широко используют AJAX, такая статистика теряет актуальность.

4. Усложнение проекта

Перераспределяется логика обработки данных - происходит выделение и частичный перенос на сторону клиента процессов первичного форматирования данных. Это усложняет контроль целостности форматов и типов. Конечный эффект технологии может быть нивелирован необоснованным ростом затрат на кодирование и управление проектом, а также риском снижения доступности сервиса для конечных пользователей.

5. Требуется включенный JavaScript в браузере

JavaScript может быть выключен из соображений безопасности. И, конечно же, AJAX-страницы труднодоступны неполнофункциональным браузерам, роботам и веб-архивам.

6. Проблемы с отображением нестандартных кодировок в некоторых сценариях ajax-скриптов 

О проблемах AJAX и кириллицы много сказано в обсуждениях в Интернете[5].

7. Низкая скорость при грубом программировании

Казалось бы, AJAX предназначен именно для повышения скорости. Но, когда AJAX-запросов на одной странице много и, например, по каждому щелчку подгружается список, AJAX-страница становится даже медленнее традиционной.

8. Плохое поведение на ненадёжных соединениях 

Если связь часто теряется (из-за потери несущей или перегрузки канала), обычную страницу можно как минимум перезагрузить. AJAX-страницу (например, с «бесконечной» прокруткой) приходится перезагружать с самого начала и искать, где остановился. Параллельная работа - особенность AJAX - здесь оказывает медвежью услугу, деля и без того узкий канал на множество маленьких соединений, и велика вероятность, что какое-то будет разорвано. Частично решается API истории.

9. Риск фабрикации запросов другими сайтами

Результат работы AJAX-запроса может являться JavaScript-кодом (в частности, JSON). XMLHttpRequest действует только в пределах одного домена, а вот тег <script> - нет. Если написать

<script type="text/javascript" src="http://example.org/inbox.php"></script>

то в HTML будет вставлена папка входящих сообщений того пользователя, который на этом компьютере авторизован на example.org. Для защиты используют POST-запрос. Но GET считается идемпотентным и потому кэшируется, POST - нет, поэтому Google вставляет в начало ответа бесконечный цикл: AJAX может делать с ответом что угодно, в том числе убрать цикл, а тэг <script> подключит скрипт как есть и зациклится.

Интерактивные элементы

Интерактивные элементы - это блоки сайта, реагирующие на действия пользователя: по наведению курсора мыши или клике,- причем, взаимодействие с этими элементами не приводит к перезагрузке страницы.

Для создания таких элементов обычно используют язык программирования JavaScript, поэтому чтобы все работало, как вы задумали, поддержка JavaScript должна быть включена в браузере пользователя. Также встречается использование технологий Adobe Flash и ActivX.

Все элементы можно условно разбить на группы сложности:

o простые: выпадающее меню, слайдер, увеличивающаяся фотография, всплывающая подсказка, раскрывающийся список

o средней сложности: фотогалерея, подбор по параметрам, редактор контента

o сложные: заставка на главной странице, персональная карта, калькулятор.[5]

Рис.3 Сайты, где имеются интерактивные элементы

Заключение

Исходя из всех возможностей, которые дают интерактивные элементы веб-страниц, которые, впринципе, и делают сайты интерактивными, можно сделать некоторые выводы о смысле их использования.

Раньше сайты были статичными, то есть каждая страница представляла из себя заранее "прописанный" код, который никто не мог изменить, кроме администратора сайта. И никакой случайный посетитель сайта не мог изменить содержание страниц. Он мог только просматривать их. С появлением интерактивных веб-страниц посетитель имеет возможность изменять содержимое сайта. Таким образом на сайте могут появиться нецензурные выражения, непотребные фотоматериалы и прочие нелицеприятные вещи, а владелец ресурса может даже об этом не знать. Как ни прискорбно, но приходится делать для себя следующий вывод: или закрывать все эти интерактивные сервисы на сайте или постоянно следить за тем, что добавляют посетители и удалять то, что кажется неправильным. Если Вы удалите интерактивные элементы вашего сайта, то Вам скорее всего достанется от вышестоящих органов за то, что не соблюдаете требования к сайтам. Поэтому если у Вас интерактивный сайт, будьте готовы к тому, что у Вас появится дополнительная работа по проверке того, что посетители пишут в гостевых книгах, форумах и других местах общения.

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

Список использованной литературы

1. http://www.lessons-tva.info/articles/net/002.html

2. Б. Маклафлин. Изучаем Ajax = Head Rush Ajax. - СПб.: Питер, 2007. - ISBN 978-5-91180-322-3.

3. http://www.evolutionoftheweb.com/?hl=ru

4. http://designformasters.info/posts/start-with-ajax/

5. http://easy-it.ru/tag/interactivnye-elementy/

Размещено на Allbest.ru