[МУЗЫКА] [МУЗЫКА] В процессе проектирования структура сайта и наименование ее элементов фиксируются в форме графической нотации. Нотация — это набор символов, используемых для визуального моделирования структуры сайта. Она описывает на высоком уровне абстракции информационную архитектуру и сценарии взаимодействия пользователя с электронным изданием. В нотации структуры для обозначения узлов информации и способов взаимодействия пользователей с ними применяется определенный набор символов. Узлом гипертекста может быть или страница или файл, например, PDF. Файл не имеет навигационных свойств в отличие от страницы. Страницы обозначаются прямоугольником, файлы — прямоугольником с загнутым углом. Наборы страниц, обозначаемые группой прямоугольников, представляют в нотации идентичные страницы, навигационные свойства которых несущественны по отношению к общей структуре сайта. Аналогично наборы файлов, обозначаемые группой соответствующих символов, представляют на диаграмме набор файлов. Отношения между элементами на диаграмме изображаются в виде линии или связи. При пошаговом сценарии взаимодействия связи имеют направления, что обозначают стрелками. Стрелки, как правило, представляют не обязательное, а наиболее вероятное направление движения пользователя. Узлам сайта присваивают ярлыки, соответствующие системе предметизации сайта. На экране вы видите графическую нотацию структуры сайта Королевского колледжа искусств, сделанную в 2011 году. Большинство сайтов дизайн-школ и сейчас имеют иерархическую структуру, в которой информация постепенно от уровня к уровню становится более детальной. В качестве примеров графической нотации я приведу работы студентов образовательной программы «Графический дизайн СПбГУ». В работах воспроизводится графическая нотация актуальной на сегодняшний день структуры сайтов вузов дизайн-образования. Графическая нотация зафиксирована в формате веб-страницы. Веб-страница, которую вы сейчас увидите, похожа на ту страницу, которую вам предстоит выполнить в результате освоения данного модуля. В то же время студенческие работы отличаются от вашей, во-первых, тем, что показывают нотацию структуры уже существующего сайта; во-вторых, тем, что показывают только логическую сторону организации сайта. Образная или композиционная сторона в студенческих работах рассмотрена на отдельных страницах. По работе над заданиями предыдущего модуля вы уже поняли, что вам на одной веб-странице следует описать и логику построения сайта, и средства создания образа вашего сайта-проекта одновременно. Начнем работать над заданиями с рассмотрения логической стороны. Сейчас на экране вы видите знакомую страницу сайта Международной школы дизайна в Кельне. Графическая нотация, выполненная Ольгой Баритко, еще более условна, чем нотация Королевского колледжа искусств, рассмотренная ранее. Условность нотации обусловлена тем, что она выполнена в HTML- и CSS-технологиях. В нотации в верхнем горизонтальном углу показаны узлы верхнего уровня структуры сайта, то есть заглавные страницы разделов сайта. Вертикально под каждым узлом расположены дочерние узлы, то есть страницы, входящие в раздел. По данной графической нотации видно, что в структуре сайта некоторые узлы являются дочерними по отношению к нескольким узлам-родителям, то есть одна страница принадлежит сразу нескольким разделам. Это отличительная особенность архитектуры сайта Международной школы дизайна в Кельне. Теперь на экране главная страница сайта школы дизайна ArtCenter. В структуре сайта Лариса Друнченко выделила пять разделов верхнего уровня. Разделы проименованы на английском языке, студент перевела названия, как «Учебные дисциплины», «Приемная комиссия», «Студенческая жизнь», «О колледже» и «Как связаться». Вам для вашего сайта-проекта необходимо, продумав гипертекстовую структуру, задать названия разделов и подразделов сайта. Они составят систему предметизации и именования вашего проекта. Названиями следует промаркировать символ каждой страницы графической нотации. На экране страница школы дизайна в Род-Айленде. Графическая нотация, выполненная Анной Разумовой, показывает, что иерархическая структура сайта характеризуется большим количеством узлов на верхнем уровне, то есть большим количеством разделов сайта. И если вы вспомните занятие, посвященное уровню набора возможностей, то увидите, что эти разделы соответствуют темам содержания сайта, которые выделила студентка. Подобно тому, как студенты программы «Графический дизайн» показали графическую нотацию структуры сайтов дизайн-школ, в качестве ответа на задание сегодняшнего урока вам следует показать в графической нотации структуру вашего сайта-проекта. Для определения структуры вашего сайта подумайте, пожалуйста, над вопросами: по каким схемам организации классифицируются разделы? Какова структура сайта: иерархическая или табличная? Я думаю, что именно один из этих двух типов структуры следует использовать. Сколько вы предполагаете разделов в сайте? Какие подразделы включают в себя разделы? Как называются разделы? Как страницы связаны между собой? Какая модель используется в сценариях взаимодействия? Будут ли все страницы связаны между собой напрямую или для попадания на некоторые из них нужно будет пройти путь через несколько страниц? На основании ответов на эти вопросы вам нужно будет создать веб-страницу с графической нотацией, выполненной посредством абсолютного позиционирования. То, каким образом в CSS позиционируются элементы, мы рассмотрим на уроке, посвященному веб-технологиям. И как и в предыдущих уроках, в качестве примера описания структуры я опишу структуру текущего курсового задания. Текущий сайт состоит из пяти равнозначных разделов (страниц), расположенных на одном уровне и связанных между собой возможностями выборочного просмотра одной страницы с другой. Графическую нотацию текущей работы можно представить как пять плашек с надписями названий разделов: идея, материал, гипертекст, взаимодействие и дисплей.