Пояснительная записка (WEB-сайт для Института международного сотрудничества Дальневосточного государственного университета путей сообщения), страница 3

Линейная навигация – типично содержит ссылки «Предыдущее», «Следующее» и «Начало» и ничего более [19].

Иерархическая навигация – напоминает корни. От страниц, находящихся выше по уровням иерархии, отходят связи к страницам, находящимся ниже.

Сетевая навигация – является типом без любой очевидной группировки этих ссылок.

Для разрабатываемого web-сайта выбрана сетевая навигация для главной страницы и линейная навигация для отдельных разделов.

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

Содержание сайта, как уже говорилось, играет важнейшую роль в проявлении интереса к вашему сайту, но не стоит забывать и то, как это содержание подано пользователю. Если полезная нагрузка составляет менее 25% от площади страницы или пользователь должен вновь и вновь загружать страницы, чтобы дочитать интересную статью, которую автор сайта разбил на множество кусков, то в конце концов посетитель откажется от дальнейшего просмотра и вряд ли вернется сюда вновь [20].

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

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

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

Разборчивость текста должна быть определяющим фактором. Большинство пользователей предпочитает читать текст с засечками (например, Times New Roman), в то время, как текст, служащий для комментариев или подписей лучше воспринимается пользователями в качестве рубленого шрифта (например, Arial).

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

Исходя из поставленных задач можно сформулировать техническое задание. В ходе работы необходимо:

– разработать дизайн сайта и выбрать цветовую палитру;

– сверстать макет сайта (html, css);

– придать сайту динамики (javascript, jQuery);

– разработать базу данных (MySQL);

– реализовать серверную часть – взаимодействие с базой данной, вывода содержимого.

Этап разработки базы данных так же можно разбить на этапы:

– нормализация базы данных (где это возможно);

– реализация базы данных в MySQL.

Аналогично предыдущему, этап реализации серверной части тоже разбит на составные части:

– разработка ядра сайта;

– реализация связей с базой данных;

– реализация административной панели;

– реализация добавления, редактирования и удаления статей (новостей);

– реализация добавления, редактирования и удаления блогов студентов;

– реализация формы обратной связи;

– реализация регистрации в Международный клуб;

– реализация авторизации.

2.2 Разработка дизайна сайта

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

– создавать у посетителя web-сайта ощущение комфорта благодаря правильной компоновке информации на странице [21];

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

– быть стильным, чтобы подчеркивать имидж организации;

– цветовая гамма должна вызывать положительные эмоции у подавляющего большинства посетителей web-сайта и, по крайней мере, не раздражать остальных [22].

В соответствии с последним пунктом так же необходимо выбрать цветовую палитру.

В качестве основы сайта выбрана блочная верстка.

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

Макет главной страницы представлен на рисунке 1.

Рисунок 1 – Макет главной страницы

На главной странице будут располагаться следующие блоки:

– блок навигации (он же блок меню);

– «имиджевый» блок с названием института и его логотипом (в качестве фона использовано видео, в браузерах старых версий будет отображаться изображение;

– блок обратной связи;

– блок «10 причин поступить на ИМС»;

– блок «Что интересного?», включающий в себя ссылки на Международный клуб и на блоги студентов за границей;

– новости института.

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

Рисунок 2 – Макет остальных страниц

На рисунке 3 изображен макет страницы контактов.

Рисунок 3 – Макет страницы контактов

В конце данного этапа имеем макеты всех страниц сайта.

2.3 Верстка макета сайта

Следующим шагом является создание макета сайта. Средствами языка разметки и каскадных таблиц стилей необходимо сверстать макет сайта.

В ходе верстки использованы возможности новых стандартов HTML5 и CSS3 – специальные теги <nav>, <footer>, <article> и т.д., вставка видео/аудио, hover-эффекты и др. [23].

На данном этапе необходимо сверстать ряд страниц:

– главная страница;

– страница «история института»;

– страница «о кафедре»;

– страница «российским абитуриентам»;

– страница «иностранным гражданам»;

– страница «FESTU INTERNATIONAL CLUB»;

– страница «программы международной мобильности»;

– страница «блог студента за границей»;

– страница «контакты»;

– страница с формой обратной связи [24];

– страница с регистрацией заявок в FESTU INTERNATIONAL CLUB;

– страница панели администратора;

– страница просмотра заявок на регистрацию в FESTU INTERNATIONAL CLUB (просмотр в панели администратора) [25];

– страница просмотра вопросов директору, отправленных из формы обратной связи (просмотр в панели администратора);

– страница авторизации;

– страница просмотра новости;

– страница просмотра всех блогов студентов [26];

– страница просмотра блога студента.

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

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

Страница «о кафедре» содержит направления подготовки студентов, а также необходимые документы.

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

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

Страница «FESTU INTERNATIONAL CLUB» содержит информацию о Международном клубе ДВГУПС. Международный проект Института международного сотрудничества ДВГУПС «FESTU International Club» – группа волонтеров, целью которых является помощь в адаптации иностранных студентов на территории России, а также помощь в изучении Русского языка.

Страница «программы международной мобильности» содержит информацию о различных обменных программах – трансферных обменах, программах с включенным или частичным обучением, а так же о сезонных языковых школах, требования к претендентам, необходимые пакеты документов, а так же университеты, с которыми сотрудничает ИМС [28].

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

На странице «контакты» размещены контактные данные сотрудников института.

На странице «вопрос директору» пользователь может заполнить специальную форму и отправить свой вопрос администратору сайта, который в свою очередь передаст заданные вопросы за какой-либо период в виде отчета [29].

На странице регистрации заявок в Международный клуб ДВГУПС пользователь может отправить свою заявку заполнив форму, отправив ее администратору аналогично вопросу директору.

2.4 Придание динамики сайту

После того, как сделан статичный макет сайта, необходимо его «оживить» – добавить движения элементам сайта.

Для этого понадобятся сценарии на языке javascript, а так же javascript фреймворк jQuery.

С помощью доступа к DOM-модели сайта, можно изменять их CSS-свойства, например, прозрачность, отступы, отображение. С помощью данных инструментов следует анимировать элементы сайта [30].

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов.

Согласно DOM-модели, документ является иерархией [31].

Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста – текстовый элемент, и т.п.

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

Для примера, простейшее дерево DOM для следующего документа выглядит следующим образом:

<html>

<head>

<title>Заголовок</title>

</head>

<body>

Прекрасный документ

</body>

</html>

Самый внешний тег – <html>, поэтому дерево начинает расти от него.

Внутри <html> находятся два узла: <head> и <body> – они становятся дочерними узлами для <html> (рисунок 4).

Рисунок 4 – Дерево DOM

Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами (text node). И то и другое – равноправные узлы дерева DOM.