XVII Международный конкурс научно-исследовательских и творческих работ учащихся
Старт в науке
Разработка современных интерактивных веб-сайтов
Автор работы награжден дипломом победителя III степени
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF
Введение
Актуальность моего проекта обусловлена тем, что в силу стремительного развития веб-технологий в наше время, наличия базовых знаний и методов разработки уже недостаточно для того чтобы создать сайт, способный привлечь к себе внимание.
Цель моей работы заключается в сборе информации по выбранной мной теме и создании при ее помощи продукта, призванного помочь учащимся при разработке их собственных сайтов.
Целевой аудиторией моего проекта являются учащиеся 9-11 классов, желающие научиться созданию более продвинутых и технологичных веб-сайтов.
Проблема, которую призван решить мой проект – нехватка навыков школьников для создания таких сайтов. В школьной программе лишь малая часть уроков уделена этой теме. В ней охвачены лишь основы создания веб-сайтов, а методики создания устарели. Проблемой может также стать и поиск нужной информации в интернете. Так, например, большинство интернет-курсов предлагает свои услуги только за деньги. Информация на многих сайтах может быть изложена недоступно: шаги создания не поясняны, невозможно посмотреть конечный результат. На моем сайте изложены способы создания различных элементов сайта, а также пояснения к ним и возможность увидеть результат.
Основными задачами являлись: изучение литературы и интернет ресурсов по теме исследования; выделение основных типов сайтов и различий между ними; анализ главных преимуществ и недостатков использования скриптов; разработка макета веб-сайта и вёрстка.
О пользе продукта можно с легкостью судить исходя из результатов голосования, предложенном на сайте. Благодаря отзывам продукт может дополняться и совершенствоваться.
ГЛАВА I.
-
- AJAX и принцип работы скриптов
Интернет - всемирная сеть, объединяющая множество компьютерных сетей и отдельных компьютеров, обменивающихся между собой информацией. Информация в интернете хранится на серверах (сайтах). Серверы, объединенные высокоскоростными магистралями, составляют базовую часть сети Интернет. Доступ пользователей к информационным ресурсам интернета обычно осуществляется через провайдеров или корпоративную сеть.
В свою очередь сайт является набором веб-страниц, связанных между собой гиперссылками, единой системой навигации. Прикладным протоколом для передачи гипертекста (веб-страниц) является http (https), который указывается в URL или адресе любого ресурса в интернете.
Скрипт (сценарий) — это последовательность действий, описанных с помощью скриптового языка программирования (JavaScript, PHP, Perl, Python и др.) для автоматического выполнения определенных задач.
Скрипты придают сайту динамику, приводят механизм в действие.
При удалении с любой веб-страницы всех сценариев, она останется статичным изображением, набором определенных данных, а взаимодействие с такой страницей станет невозможным.
В зависимости от технологии создания можно выделить следующие типы сайтов:
- Статические сайты, содержащие статические HTML или XHTML страницы. Статические веб-страницы - это статические файлы (набор текста, таблиц, рисунков и т.д.), которые создается с помощью языка разметки HTML и хранятся в готовом виде в файловой системе сервера.
- Динамические сайты, в которых веб-страницы генерируются или формируются в процессе исполнения запроса пользователя. Динамические сайты бывают двух типов. В первом типе сайтов, веб-страницы генерируются или формируются из данных хранящихся на сервере в базе данных. Во втором типе сайтов веб-страницы генерируются на стороне клиентского приложения (в браузере).
- Flash-сайты - это интерактивные приложения, разработанные в среде Macromedia Flash. Основным инструментом разработки flash-программ является векторная графика (интерактивная векторная анимация для Web). Flash придает сайтам динамичность и интерактивность.
- Комбинированные сайты, в которых используются вышеизложенные технологии создания сайтов.
Сайты по взаимодействию пользователя с ресурсами веб-страницы можно разделить на:
- Пассивные сайты - это сайты с пассивными веб-страницами. В пассивных сайтах пользователь имеет возможность только просматривать информацию на веб-страницах.
- Интерактивные сайты - это сайты с активными веб-страницами. При работе с интерактивными веб-страницами пользователь имеет возможность обмениваться данными с сервером, участвовать в интерактивном диалоге.
В данной работе я исследовал технологии скриптов (сценариев), придающих веб-страницам динамичность, выделил их основные недостатки и преимущества.
AJAX, (от англ. Asynchronous Javascript and XML - «асинхронный Javascript и XML») - подход к построению пользовательских интерфейсов веб- приложений, заключающийся в «фоновом» обмене данными браузера с сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время. Самое привлекательное в Ajax — это его асинхронный принцип работы. С помощью этой технологии можно осуществлять взаимодействие с сервером без необходимости перезагрузки страницы. Это позволяет обновлять содержимое страницы частично, в зависимости от действий пользователя.
Сравнение стандартного подхода и AJAX
В классической модели веб-приложения:
· Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.
- Браузер формирует и отправляет запрос серверу.
- В ответ сервер генерирует совершенно новую веб-страницу и отправляет её браузеру, после чего браузер полностью перезагружает всю страницу.
При использовании AJAX:
- Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.
- Скрипт (на языке JavaScript) определяет, какая информация необходима для обновления страницы.
- Браузер отправляет соответствующий запрос на сервер.
- Сервер возвращает только ту часть документа, на которую пришёл запрос.
- Скрипт вносит изменения с учётом полученной информации (без полной перезагрузки страницы)
Термин AJAX впервые был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб- приложениям». Гарретт придумал термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им клиенту.
Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе «Remote Scripting», предложенном компанией Microsoft в 1998 году, или с использованием HTML- элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.
AJAX стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.
1.2 Преимущества и недостатки использования скриптов
Преимущества
- Экономия трафика
За счёт того, что при обновлении страницы вместо eё полной загрузки нужно загружать только изменившуюся часть, использование AJAX значительно сокращает трафик.
- Уменьшение нагрузки на сервер
При правильной реализации AJAX позволяет снизить нагрузку на сервер в несколько раз.
В частности, все страницы сайта чаще всего генерируются по одному шаблону, включая неизменные элементы («шапка», «навигационная панель», «подвал» и т. д.), для генерации которых требуются обращения к разным файлам, время на обработку скриптов - всё это можно опустить, если заменить полную загрузку страницы генерацией и передачей лишь содержательной части. Дизайн страницы также обычно содержит множество файлов, связанных с оформлением (картинки, стили), на повторную обработку которых не надо тратить время, используя AJAX (экономия на количестве HTTP-соединений значительно выгоднее, чем на сокращении трафика каждого из них).
- Ускорение реакции интерфейса
Так как AJAX позволяет изменять определенные части страницы, этот процесс происходит гораздо быстрее и плавнее, чем если бы это происходило при полной перезагрузке страницы (что сопровождается eё характерным мерцанием)
- Гибкость обработки данных
При вводе запросов в поисковиках появляется подсказка с предпологаемым запросом. При регистрации на большинстве сайтов пользователь может сразу увидеть, доступно ли введённое им имя для регистрации. AJAX отлично подходит для программирования элементов, выводящих меняющиеся со временем данные.
ГЛАВА II.
2.1 Методы создания веб-сайтов, их преимущества и недостатки
По методу разработки сайты можно разделить на 3 типа.
1. Созданные при помощи конструктора.
Данный способ можно считать самым простым. Разработчик создает сайт с помощью готовых шаблонов, выбирает нужные элементы, блоки и наполняет их содержимым. Одними из самых популярных конструкторов на сегодняшний день являются Wix и Тильда. Метод подходит, когда сайт требуется создать в короткие сроки. Преимуществами является скорость, простота разработки и управления.
Из недостатков стоит отметить:
- Стоимость. Конструкторы предлагают большую часть функционала за деньги. Пользуясь бесплатной версией, разработать полностью работающий веб-сайт будет затруднительно.
- Зависимость. Созданный сайт будет привязан только к определенному к хостингу. Его перенос будет также будет стоить денег или вовсе будет невозможен.
- Реклама. Ее наличие на сайте может не зависить от вас. Таким образом конструкторы получают прибыль за счет вашего сайта. Для отключения рекламы на сайте тоже могут потребоваться дополнительные расходы.
2. Созданные при помощи CMS
CMS (система управления содержимым) – программа, помогающая управлять наполнением и настройками веб-сайта в одном месте. По аналогии с конструкторами, они бывают бесплатные и коммерческие. Однако их возможности не ограничены одним лишь созданием веб-сайтов: CMS также позволяет расширить функционал вашего сайта. Сильными сторонами являются: популярность; возможность подключения различных модулей, расширяющих потенциал сайта; техническая поддержка, наличие документации. Из немногих недостатков стоит отметить невысокую производительность, компенсирующуюся универсальностью и широкими возможностями.
- Разработанные собственными силами.
Такие сайты разрабатываются с нуля с помощью написания кода, в основном на языках HTML (язык разметки сайта), CSS (язык стилизации) и JavaScript (язык программирования). Данный способ требует гораздо больше времени и навыков, однако преимущества такой разработки легко это оправдывают.
Преимущества:
- Полный контроль над разработкой.
- Свобода – все ключевые решения принимаются разработчиком.
- Производительность – такие сайты могут переносить большие нагрузки, потому что были созданы под определенную задачу.
Именно этот метод разработки был выбран мной для создания продукта моей работы, так как он отвечает его требованиям и моим навыкам.
2.2 Разработка собственного сайта на практике
Первым шагом стал выбор программ для создания макета веб-сайта и написания кода. Проверенными инструментами современной разработки являются программа Figma для создания дизайна (рис. 1) и текстовый редактор Visual Studio Code (рис. 2).
Следующим этапом стало создание макета веб-сайта в Figma:
Последний этап заключался в написании кода на различных языках программирования в редакторе Visual Studio Code.
Пожалуй, данный этап являлся самой трудоёмкой частью моей работы.
В результате был создан веб-сайт, поставленные задачи и цель были достигнуты.
Заключение
С развитием AJAX и технологий создания интерактивных элементов веб страниц в наше время, тем, кто нуждается в создании своего сайта, необходимо не только знание HTML и CSS, а также базовые навыки при работе с AJAX и JavaScript. Сейчас сайты должны быть не только оптимизированы, красиво оформлены и интуитивно понятны, но должны быть разработаны с учетом новых технологий и совмещать в себе интерактивные элементы, чтобы опыт пользователя оставался на удовлетворительном уровне. В результате работы я достиг поставленной цели и создал продукт, способный помочь пользователям в их начинаниях в сфере создания веб-сайтов.
Библиографический список
1. История развития всемирной сети – [Электронный ресурс] http://www.evolutionoftheweb.com/?hl=ru
2. Руководства Web-разработчика Mozilla – [Электронный ресурс] https://developer.mozilla.org/ru/docs/Web/Guide/AJAX
3. Бретт Маклафлин: Изучаем Ajax – Издательство Питер, 2008 г.
4. Примеры использования интерактивных элементов – [Электронный ресурс] http://easy-it.ru/tag/interactivnye-elementy/
5. Основы разработки с AJAX – [Электронный ресурс] http://designformasters.info/posts/start-with-ajax/