Материал: Разработка веб-сайта для учреждения системы начального профессионального образования

Внимание! Если размещение файла нарушает Ваши авторские права, то обязательно сообщите нам

Спонсоры

Информация о спонсорах, их вкладе в развитие данной школы.

Партнеры

Информация о партнерах школы: Вузах, прочих организациях.

Разделы и темы школьного сайта могут быть иными, шире, уже на усмотрение школы.

Подбор материала

Это чуть ли не самое главное. Посетитель сайта простит вам многое: «кривой» дизайн, грамматические ошибки, неудобную навигацию - если на сайте будет то, что он ищет. Содержание - самое главное! Распространенной ошибкой является стремление сделать сайт интересным во всем мире. Не забывайте, на кого нацелен сайт. Нельзя объять необъятное, работайте на свою целевую аудиторию. Представьте себя на месте родителя, ученика, директора, спонсора. Что вам интересно, что вы ожидаете увидеть на сайте школы?

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

Сайт ВУЗа

1 - Изучение целевых групп

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

- Выделение блоков информации в соответствии с целевыми группами.

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

- Структура и навигация.

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

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

· Поиск по сайту.

· Архив материалов сайта.

· Раздел «Контакты» с указанием адресов, телефонов, e-mail, схемы расположения ВУЗа.

· Постоянно модерируемый раздел для неформального общения пользователей, обмена мнениями: форумы, конференции, блоги и др.

Удобная, понятная пользователю навигация - важнейшая составляющая юзабилити сайта. Попав на любую из страниц сайта, пользователь должен сразу сориентироваться, где он находится и куда ему двигаться дальше. Система навигации должна быть единой для всех страниц сайта. Основные элементы навигации:

· Навигационная панель сайта должна включать в себя ссылки на основные разделы сайта.

· Главное меню сайта должно содержать не более 9 пунктов - именно это количество разделов наиболее комфортно для пользователя. Допускается уровень вложенности подразделов в главном меню.

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

· Ссылка на главную страницу должна быть доступна со всех других страниц сайта.

· Место каждой страницы в структуре сайта должно быть визуально определено. Это может быть реализовано навигационной строкой: Главная -> раздел -> подраздел -> название текущей страницы. При этом названия разделов должны быть указаны в виде ссылок на соответствующие разделы.

· Гиперссылки должны подсвечиваться при наведении, чтобы была понята их функция в массиве текста. Посещённые ссылки должны отличаться по цвету, чтобы пользователь мог ориентироваться, где он был, а где ещё не был.

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

· Основные технические разделы сайта - такие как «На главную», «Контакты», «Карта сайта», «Архив» и др. - должны дублироваться вверху и внизу страницы и всегда находиться в зоне видимости пользователя.

- Дизайн интернет-ресурса: функциональность на первом месте.

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

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

·              Главное меню рекомендуется размещать в левой части сайта. Вспомогательное - в верхней части сайта.

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

·              Цвет ссылок должен отличаться от цвета текста. Посещённые ссылки должны подсвечиваться цветом, отличным от цвета непосещённых ссылок и текста.

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

·              Дизайн сайта должен быть оптимизирован для различных разрешений экрана, не быть слишком сжатым или слишком широким при просмотре на мониторах с разрешением от 800х600 до 1280х1024.

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

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

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

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

Корректное расположение текстов на сайте также является частью его дизайна, помогает пользователю быстро ориентироваться в содержимом страниц. Признаки корректного текстового наполнения сайта:

· Количество информации на странице - не больше чем 2 прокрутки экрана. Оптимальное количество информации - один экран. Документы большего размера должны быть доступны для скачивания или открываться в отдельном окне.·Шрифт на всём сайте должен быть однородным, классическим, без засечек. Рекомендуется Arial и Verdana. Комфортный размер шрифта - не менее 10 пунктов.

· Заголовки и подзаголовки разделов и текстов должны быть визуально выделены увеличенным размером шрифта и/или цветом.

Глава 2. Программная реализация ППС

.1      Структура и содержание ППС по теме: «Разработка веб-сайта для учреждения системы НПО»

Структура Сайта состоит из разделов и подразделов в соответствии с требованиями Российского законодательства (Приложения).

Образовательное учреждение обеспечивает достоверность, открытость и доступность следующей информации:

1)      Сведения (Приложение 3):

·        о дате создания образовательного учреждения;

·        о структуре образовательного учреждения;

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

·        об образовательных стандартах и о требованиях, самостоятельно установленных федеральными государственными образовательными учреждениями высшего профессионального образования в соответствии с пунктом 2 статьи 7 настоящего Закона (при их наличии);

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

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

·        об электронных образовательных ресурсах, доступ к которым обеспечивается обучающимся;

·        о наличии стипендий и иных видов материальной поддержки, об условиях предоставления их обучающимся;

·        о поступлении и расходовании финансовых и материальных средств по итогам финансового года;

) копии:

·        документа, подтверждающего наличие лицензии на осуществление образовательной деятельности (Приложение 1);

·        свидетельства о государственной аккредитации (Приложение 2);

·        утвержденные в установленном порядке плана финансово-хозяйственной деятельности или бюджетной сметы образовательного учреждения;

) отчет о результатах самообследования;

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

.1.     Минимальная типовая структура сайта является обязательной и включает в себя:

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

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

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

.        Органы самоуправления образовательного учреждения.

.        Нормативные документы и локальные акты. Публичный доклад.

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

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

.        Научно-исследовательская, творческая деятельность учащихся (воспитанников).

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

.2      Средства создания ППС

Для разработки электронного образовательного ресурса учреждения системы НПО, используются следующие программные средства: Adobe Photoshop CS5, Macromedia Dreamweaver 8, OpenCube NavStudio 2005.Photoshop - многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют просто Photoshop (Фотошоп). В настоящее время Photoshop доступен на платформах Mac OS X/Mac OS и Microsoft Windows.Dreamweaver 8 - увлекательнейшая программа для создания Web-страниц. Ее возможности шире по сравнению с обычными функциями подобных редакторов.

Dreamweaver позволяет создавать объекты и страницы с использованием языка DHTML, поддерживает каскадные таблицы стилей, а также слои и действия JavaScript [1, с. 49].

Разработчику Web-проекта предлагаются гибкий и мощный инструментарий управления сайтом, включая встроенный полноценный FTP-клиент, визуальные карты сайтов и контроль над ссылками. Новые возможности Dreamweaver 8 значительно облегчают процесс создания страниц и управления сайтом. Dreamweaver 8 обеспечивает беспрецедентную поддержку лучших алгоритмов, ставших промышленным стандартом. Визуальные средства проектирования для интеграции XML-данных в веб-страницы, [8, с.31] используя простой интерфейс импорта данных в режиме drag-and-drop. Новая объединенная панель CSS обеспечивает легкость в изучении и работе с таблицами стилей, применяемых к страницам. Все функциональные возможности CSS объединены в одну группу и расширены, чтобы сделать работу более легкой и производительной. Новый интерфейс облегчает применение стилей к заданным элементам, а таблица свойств ускоряет редактирование. Можно применять визуальные подсказки, чтобы определить границы применения стилей, также использовать собственную цветовую маркировку для визуального контроля уровней вложения сложных схем. Всплывающие подсказки способствуют лучшему управлению элементами каскадных таблиц стилей в проекте. Используя панель переключения стилей для контроля, можно увидеть как будет выглядеть проект на экране, при печати или на мобильном устройстве. Контролировать качество отображения элементов CSS в большинстве браузеров, используя существенно возросшую точность представления проекта. Dreamweaver теперь полностью поддерживает современные средства CSS, такие как наложение, псевдо-элементы, и элементы форм. Встроенный инструмент аудита теперь поддерживает проверку совместимости для стандартов Section 508 и WCAG Priority 1 и 2. WebDAV теперь поддерживает протоколы Digest Authentication и SSL для защищенной передачи файлов и имеет улучшенные возможности соединения с более широким множеством серверов[6, с. 78].