[МУЗЫКА] [МУЗЫКА] Мы продолжаем рассматривать пользовательскую модель формообразования сайта. Она включает в себя пять уровней: стратегия, набор возможностей, гипертекстовая структура, навигация и интерфейс, компоновка страницы. Следующий за базовым уровень — это уровень набора возможностей. Здесь мы с вами будем рассматривать сайт с двух сторон: и как информационное пространство, и как программный интерфейс. С точки зрения проектирования информационного пространства мы будем говорить о подготовке контента, необходимого для достижения стратегических целей и решения стратегических задач. С точки зрения проектирования программного интерфейса мы будем говорить об отборе программных алгоритмов, необходимых для функционирования сайта. Набор возможностей информационного пространства — это сведения и данные. Иными словами, это тот объем знаний, которые система будет хранить и распространять. Набор возможностей программного интерфейса — это набор опций сайта как программы. Это множество алгоритмов, которые программа будет реализовывать в процессе работы сайта. Джесс Гарретт, описывая набор возможностей, говорит о том, что возможности обоснованы требованиями, которые предъявляет к изданию разработчик. Эти требования базируются на стратегии проектирования сайта. Они могут быть связаны с содержанием, с идеей сайта. Они могут быть связаны с идентификацией. Они могут быть связаны с аппаратным обеспечением работы сайта. Они могут быть связаны с удобством использования сайта, в частности с юзабилити для людей с ограниченными возможностями. Продумывая возможности, следует сформулировать темы издания, которые будут отвечать стратегическим задачам. Следует определить, будет ли на сайте использована айдентика, продумать то, какие программные возможности потребуются для корректного отображения на устройствах вывода, которыми будут пользоваться представители целевой аудитории. Например, следует учесть разрешение и формат дисплеев, на которых будет воспроизводиться сайт, для определения и алгоритма верстки страницы. В качестве примера требований к изданию я рассмотрю требования к презентации студенческих проектов по курсу «Пропедевтика». Это работы, выполненные одним студентом в течение одного семестра. Сейчас на экране вы увидите презентацию Ольги Наумовой. Презентация сделана под руководством Анны Макаровой. В ней собраны проекты, созданные в рамках курса «Пропедевтика» под руководством Татьяны Журавской в Санкт-Петербургской художественно-промышленной академии в 2008 году. Проекты представляют собой рисованную графику. Это серия упражнений на композиционные закономерности и средства, а также сделанный на их основе буклет. В презентации студенту требовалось показать все разнообразие работ, выполненных в течение семестра. В соответствии с графической природой информации техническим требованием была четкость отображения работ. При этом должны были быть решены задачи как представления комплекса рисунков, так и обособленного представления каждой работы в крупном масштабе. Таким образом, было необходимо подготовить изображение в двух масштабах. Преподаватель курса «Пропедевтика» требовал от презентации представления совокупности курсовых заданий, то есть логики построения курса, поэтому была важна последовательность выполнения работ, а также полнота сведений. Следующая работа выполнена Екатериной Ерлиной. В ней также представлена рисованная графика студентки. Помимо практического представления проектов Екатерина стремилась передать образ сада с птицами. Для этого ей потребовалась возможность воспроизведения аудиоинформации. Так же, как и в первом случае, студенту и преподавателю требовалось показать все работы, сопоставив рисунки с заданиями. И уже на главной странице презентации для этого появились интерактивно возникающие подписи с темами заданий. Сотрудникам кафедры требовалось оценить собранные в презентации проекты. Нужно было, чтобы сотрудники выборочно могли отсмотреть работы. Поэтому была продумана возможность интерактивного выбора проекта. Текст буклета, написанный в каллиграфической форме, с трудом считывался с экрана. Поэтому студентка предусмотрела еще одну возможность — возможность дублирования каллиграфии наборным шрифтом. Таким образом, у нее в работе совместилась графическая и текстовая информация одного и того же характера. Графическая и текстовая природа, характер информации — это свойства контента, свойства сведений и данных, которые содержит сайт. Помимо характера их рода данные определяются объемом. Первая составляющая — это смысловая, а вторая и третья — это материальные характеристики информации, которые следует учитывать при подготовке контента. Характер информации — это содержание издания. В информации по характеру выделяют темы и свойства, где темы — это содержательные позиции, раскрываемые изданием. Например, в сайтах вузов сферы дизайна раскрываются темы о вузе, образовательные программы, условия поступления, студенческая жизнь и так далее. Свойства — это постоянные атрибуты издания. Например, постоянными атрибутами являются ссылки на социальные сети, адресная информация, условия использования сайта, элементы идентификация. В веб-среде используется информация различной природы: текстовая, изобразительная, звуковая. Изобразительные данные включают в себя графику, фотографию, анимацию, видео. Звуковая — музыку, шумы, дикторский текст. Объем данных для текстовой информации — это количество знаков, объем изображений, размер изображений в пикселях. В рассмотренных выше примерах информация по характеру и природе соотносится следующим образом: резюме автора и информация о курсе — это текстовая информация. Формулировка и название заданий в первом случае текстовая, во втором случае — изобразительная. Я имею в виду каллиграфию изданий разделов презентаций информации. Непосредственно проекты в малом и крупном масштабе — изобразительная информация, голоса птиц — звуковая. После сбора необходимого для функционирования сайта контента темы содержания распределяются по группам, которые впоследствии станут разделами издания. Устанавливается иерархическая зависимость между темами содержания. Определяется приоритетность тем содержания, которая раскрывается в оглавлении — развернутом плане издания. Например, при разработке презентаций проектов можно по-разному вложить темы одна в другую. То есть различным образом определить, какая тема будет общей, а какая — частной по отношению к этой общей. Сейчас на экране вы видите два варианта приоритетности тем одного и того же содержания. В первом случае общими темами являются задания — первое, второе, третье. Внутри каждой темы происходит разбиение на более узкие темы: изображение проекта, формулировка задания, эскизы к проекту, укрупненные фрагменты проекта. Во втором случае общими темами являются формулировка заданий, эскизы к проектам, проекты и укрупненные фрагменты. И уже внутри этих тем рассматриваются первое, второе и третье задания. Приоритетность тем содержания зависит от того, какие вы предполагаете, задачи будет решать пользователь на страницах сайта. Вторая сторона набора определения набора возможностей — это определение программной функциональности сайта. Здесь разработчик рассматривает то, что система должна делать. В частности рассматриваются такие возможности, как отображение графической информации, возможность воспроизведения и остановки анимации, видео, аудио, возможность дискретной интерактивности, например, переходы между страницами, возможность продолженной интерактивности, то есть изменение страницы в рамках экрана. Работа подпрограмм, возможности обратной связи, поиска, возможности адаптивной верстки. В рассмотренных выше примерах предусмотрена и реализована возможность дискретной интерактивности, изменение кнопок по наведению, а также переход на другую страницу презентации в презентации Екатерины Ерлиной. Предусмотрена возможность появления overlay — всплывающего окна — в презентации Ольги Наумовой. В силу того, что презентация выполнена во флеш-технологиях, в данном случае реализуется подгрузка внешнего связанного клипа в контейнер, размещенный на странице презентации. Мы с вами будем разрабатывать ваш сайт в HTML, CSS и Javascript технологиях. Мы будем использовать фреймворк разработки сайтов Bootstrap. В нем реализованы программные модули, включающие следующие возмодности дискретной и продолженной интерактивности: кнопка и ссылка для выполнения действий, например, отправки данных или перехода на другую страницу, что является дискретной интерактивностью; выпадающий список, который позволяет выбирать действия, что является продолженной интерактивностью. При открытии всплывающего окна в него поверх видимого текста страницы подгружается размещенная, но не отображаемая на странице информация. При взаимодействии пользователя с панелью-аккордеоном реализуется продолженная интерактивность. Нажатие на заглавие вкладки аккордеона влечет за собой раскрытие по умолчанию неотображаемой информации, а также смещение информации, расположенной ниже аккордеона. Внутри вкладок панели можно скрыть большой объем информации, представив его на экране в компактном виде заглавий и вкладок. В компоненте «карусель» также реализована продолженная активность. Это так называемая виртуальная страница, замаскированное окно просмотра. В окне просмотра отображается часть информации, нажатие на кнопки «вперед», «назад» позволяет прокручивать информацию в нем. Другой пример виртуальной страницы — постраничная навигация внутри страницы, в которой реализуется возможность прокрутки страницы внутри окна по нажатию на панель навигации, ссылки которой связаны с определенной зоной страницы. При прокрутке страницы посредством полосы прокрутки в панели навигации подсвечивается ссылка, соответствующая отображаемой в окне зоны страницы. Условие просмотра сайта на разных устройствах вывода — на настольных мониторах или на телефонах — обуславливает необходимость перекомпоновки страницы под разный формат. Реализация отзывчивости требует умения страницы сопоставлять заложенные в нее варианты верстки с разрешением экрана устройства вывода. Эта функциональность реализуется посредством CSS. [БЕЗ_ЗВУКА]