Урок на тему «Теоретические основы web-дизайна. Топология гипертекстовой системы»

Тема: Теоретические основы web-дизайна. Топология гипертекстовой системы. Инструктаж по охране труда и технике безопасности.

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

Оборудование: ПЭВМ, мультимедийный проектор.

Ход урока:

1. Организационное начало.

Приветствие.

Проверка готовности студентов к занятию.

Работа с дежурными.

2. Работа по осмыслению и усвоению нового материала.

Беседа о предмете и количестве отведенных часов.

Требования к знаниям и умениям обучающихся.

Беседа о правилах техники безопасности в компьютерном классе.

Объявление темы и цели урока.

Первичное восприятие нового материала.

Понятие веб-дизайна.

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

В понятии «веб-дизайн» отчетливо определены две его составляющие: «веб» – (русифицированное от англ. «web» – сеть, паутина) – ключевое слово в выражении World Wide Web, которое является названием основной службы Интернета, обеспечивающей поиск и просмотр гипертекстовых документов; и «дизайн» (от англ. «design», – проектировать, создавать, конструировать) – деятельность по проектированию эстетических свойств изделия с учетом его назначения и специфики использования, а также результат этой деятельности. Из сказанного следует, что веб-дизайн направлен на разработку и оформление объектов информационной среды Интернета (дословный перевод: проектирование для Интернета).

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

Web-дизайн - новый жанр изобразительного искусства, основанный на применении специфических инструментов (компьютера и программ-редакторов), специальных языков программирования (HTML, JavaScript, Java, Perl, C++, PHP и др.) и сетевых технологий (CGI, CSS, SSI и др.).

 

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

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

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

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

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

Функции веб-дизайна:

вид открытой страницы должен привлечь внимание посетителя веб-ресурса;

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

создать уникальный, индивидуальный образ, способствующий узнаваемости веб-сайта.

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

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

Web-дизайнер - это специалист, который занимается проектированием и разработкой web-узла; созданием его структуры, подбором цветовой палитры и разработкой пользовательского интерфейса.

Web-мастер - это специалист, основной задачей которого является поддержка существующего web-сайта. Поддержка заключается в информационном наполнении страниц сайта и в виртуальном взаимодействии с пользователями интернета, которые посещают этот сайт.

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

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

Целесообразно не перегружать страницу большим числом деталей. Это связано с тем, что человек за короткое время способен воспринять и запомнить не более 7-8 объектов.

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

На последней стадии проектирования сайта целесообразно проверить работоспособность всех сделанных гиперссылок. Завершая проектирование сайта, желательно просмотреть его с помощью различных браузеров (MS Internet Explorer, Netscape Navigator, Opera).

При проектировании сайта дизайнеру необходимо уметь заранее оценить примерное время загрузки и допустимый объем создаваемой им страницы.

Гипертекст.

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

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

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

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

Топология гипертекстовой системы – это структура, отражающая основные магистральные связи между страницами. Существует несколько основных типов таких структур — древовидная (иерархическая), радиально-кольцевая, линейная (последовательная).

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

Древовидное строение характерно для сайтов компаний и организаций, где отчетливо выделена главная (домашняя) страница, с которой, как правило, начинается знакомство с сайтом. (см. рис. 1).

Некоторым подобием древовидной структуры является структура-паутина (радиально-кольцевая), примером которой может служить городская транспортная сеть (см. рис. 1).

 

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

Примером такой гипертекстовой паутины является сайт проекта Википедия.

Линейные (последовательные) структуры используются, если материал, представленный в гипертекстовой системе, выстраивается в логическую цепочку — как, к примеру, главы одной книги или последовательные шаги оформления заказа в электронном магазине (см. рис. 1).

Рис. 1. Структуры гипертекстовой сети

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

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

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

6) Обобщение.

3. Практическая работа.

1)Сообщение задания.

Упражнение. Определение топологии веб-сайта.

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

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

2)Вводный инструктаж.

3)Самостоятельная работа.

4)Текущий инструктаж.

5)Анализ готовых работ.

4. Итог урока.

Фронтальная (обобщающая ) беседа.

Назовите основные понятия Web-дизайна.

Что называют топологией гипертекстовой системы?

Назовите три основные топологические структуры гипертекстовой сети. Приведите примеры сайтов, имеющих в своей основе структуру каждого типа.

5. Задавание на дом.

Макарова, с. 4-10, https://studfiles.net/preview/2082860 /

 

Литература:

Макарова Т.В. Веб-дизайн: учебное пособие. Омск: Изд-во ОмГТУ, 2015.– 145 с.