104
онное обучение, почитать новости и статьи, посмотреть учебные заведения в
формате 3D туров и многое другое на сайте не отходя от экрана.
В определении подчеркнута необходимость активного восприятия со сто-
роны человека-посетителя. Для того, чтобы войти в соприкосновение с соци-
ально образовательным порталом, потенциальный посетитель должен добро-
вольно зайти на него и самостоятельно ознакомиться с размещенной информа-
цией в выбранной им последовательности в соответствии со своими пожелани-
ями.
В этом – принципиальное отличие интернета от других, более активных
средств массовой информации таких как телевидения, радио, и сходство с дру-
гими пассивными источниками информации - книги, рекламные буклеты и т.д.
Рассмотрим диаграмму вариантов использования – это диаграмма, на ко-
торой отражены отношения, существующие между пользователем и сайтом.
Основная задача – представлять собой единое средство, дающее возмож-
ность заказчику, конечному пользователю и разработчику совместно обсуждать
функциональность и поведение системы.
Диаграмма вариантов использования показана на рисунке 3.3.
Рисунок 3.3– Диаграмма вариантов использования
105
3.3 Описание интерфейсов и навигации рекламно-образовательного пор-
тала
Использование навигации и её возможностей задают соответственно раз-
ные виды выводимых информационных страниц в основной части портала, при
том пользователю будут доступны все модули и вертикальное меню, они не бу-
дут меняться при переходах на другие страницы, тем самым можно получить
доступ к полному функционалу сайта с любой его страницы. Такой подход
очень удобный и правильный с точки зрения юзабилити. Облегченный интер-
фейс и интуитивно понятная навигация портала позволит его использовать лю-
дям со слабыми знаниями и навыками работы с компьютером.
Интерфейс и навигация не должны вызывать какого-либо дискомфорта во
время использования, это очень важно для развития портала. Все эти правила
должны учитываться и при создании мобильной версии или же при адаптации
уже готового сайта под мобильные устройства.
Общий вид интерфейса социального портал представляет собой веб-
страницу которая содержит в себе:
1. Логотип портала;
2. Модуль «Поиск»;
3. Мультиязычность;
4. Баннеры;
5. Главное меню с разделами:
a) Главная;
b) Новости;
c) Научные статьи;
d) Полезная информация;
e) 3D туры;
f) Видео;
g) Фотогалерея;
106
h) Онлайн обучение;
6. Горизонтальное меню с разделами:
a. Наши услуги;
b. Наши проекты;
c. Реклама на сайте;
d. Разработка сайтов;
7. Вертикальное меню с категориями;
8. Слайдер;
9. Модуль «Курсы валют»;
10. Модуль «Отзывы»;
11. Модуль «100 лучших заведений»;
12. Модуль «Обратите внимание»;
13. Модуль «Новости»;
14. Модуль «Случайные учебные заведения»;
15. Модуль «Продажи баннеров»;
16. Модуль «Недавно вы смотрели».
Общий вид образовательного портала представлен на рисунке 3.4
Главная страница может визуально меняться в зависимости от того какой
модуль или контент добавит администратор. Как описывалось выше данная си-
стема очень гибкая и позволяет буквально перемещать блоки, добавлять новые
с абсолютно любой информацией. На момент написания данной диссертацион-
ной работы сайт выглядел как показан на рисунке 3.4 и может отличаться от-
дельными элементами на самом сайте.
107
Рисунок 3.4 – Схема расположения интерфейсов и модулей
108
Первое что бросается в глаза при переходе на страницу образовательного
портала – это логотип. Логотип выполнен в цветовом стиле портала и пред-
ставляет собой изображение, на котором мы видим синим цветом надпись «Ed-
ucation образовательный портал Казахстана».
Что касается навигации – то при нажатии на логотип из любого раздела
мы попадём на главную страницу социального портала.
Логотип социального портала представлен на рисунке 3.5
Рисунок 3.5– Логотип социального портала и поиск
Справа от логотипа располагается модуль «Поиск», который изображен на
рисунке 3.6.Внедрение данного модуля на информационный образовательный
портал обосновывается тем что при выборе того или иного заведения или услуг
пользователь может воспользоваться внутренней поисковой системой. Это мо-
жет быть необходимо, если человеку нужно найти конкретное учебное заведе-
ние по названию.При вводе первых букв слова появляется выпадающий список
из совпадающих слов.
Рисунок 3.6 – Всплывающее окно поиска
109
Под логотипом находится основное горизонтальное меню. Горизонталь-
ное главное меню изображено на рисунке 3.7
Рисунок 3.7 – Горизонтальное главное меню
Рекламные баннеры расположены в самых заметных частях сайта и отоб-
ражаются на всех страницах сайта для повышения их заметности и повышения
конверсии от рекламы. Изображение рекламных баннеров в шапке сайте пока-
заны на рисунке 3.8.
Рисунок 3.8 – Рекламные баннеры в шапке сайта
Рекламные баннеры состоят из 5 блоков. Шапка сайта – 5 баннеров, левая
колонка - 2 баннера, низ сайта 3 баннера, раздел категорий – 3 баннера и стра-
ница категорий 1 большой баннер.
Главная особенность и уникальное отличие на нашем образовательном
портале –это внедрение системы продажи баннеров на автопилоте в 3 шага.
Обычно на новостных сайтах чтобы разместить рекламу необходимо
написать администратору сайта с письмо с просьбой купить рекламное место,
затем скинуть баннер и оплатить. В свою очередь администратор должен себе
записать или внести в ежедневник пометку, когда был куплен баннер и на
сколько дней. Далее идет установка на приобретенное самого баннера, а по ис-
течению срока также в ручную убирается. Это крайне неудобная система для
обоих сторон, но особенно для администратора сайта.
Я исследовал зарубежные системы и внедрил инновационный скрипт в
сфере информационного и рекламного бизнеса по продажи баннеров на авто-
пилоте. Уникальная система позволяет всего в 3 шага покупать место на сайте
под рекламу безучастие администратора.
110
Первым делом рекламодатель кликает на любой из пустых баннеров и
ему открывается окно с выбором конкретного баннера, его размера, место -
расположения и цены. В левом углу экрана, на календаре происходит выбор
дней, на которые планируется приобрести рекламу. Зеленые дни - свободны и
их можно выбрать, серые уже заняты, а синие выбранные дни. В этом же окне
рассчитывает общая стоимость и скидка если покупка осуществляется более
чем на 7 дней. Рекламодатель также вводит свое имя и электронный адрес.
Первый шаг и форма покупки баннера в автоматическом режиме показан на ри-
сунке 3.9.
На втором шаге происходит загрузка изображения самого баннера, текст
и ссылка на рекламируемы ресурс. Шаг 2 изображен на рисунке 3.10.
Рисунок 3.9 – Покупка баннера в онлайн режиме, шаг 1
111
Рисунок 3.10 –Шаг 2 - загрузка баннера
На третьем шаге происходит оплата через электронные деньги и напоми-
нание о запрете на запрещенную рекламу. Шаг 3 на рисунке 3.11
Рисунок 3.11 – Шаг 3 - оплата баннера
Данная система обеспечивает полный учет рекламы на сайте. После опла-
ты она появляется в выбранные дни в 00 часов 00 минут и отключается в это же
время следующего дня если он не входил в оплаченные. Тем самым избавляя
администратора сайта от лишних действий, и реклама размещена на портале
строго по оплаченному времени вплоть да секунд. В обязанности администра-
тора после внедрения автобаннера стало входить лишь проверка рекламы на ее
законность и обналичивание электронных денег.
Информационный образовательный портал подразумевает собой большое
количество посетителей в том числе и из-за рубежа. Для этого была добавлена
мультиязычность с тремя языками: казахский, русский, английский. Изучив со-
временные плагины работы с языками я остановился на выборе translate google.
Этот сервис вшит в браузер Google Chrome для автоперевода страниц.
112
При необходимости можно добавить еще 56 языков для перевода. Пример
перевода показаны на рисунках 3.12 и 3.13
Рисунок 3.12– Перевод сайта на английский язык
Рисунок 3.13 – Перевод сайта на казахский язык
113
Горизонтальное меню содержит разделы:
1) Главная.
При нажатии на данный раздел, как и в случаи с логотипом мы попадём
на главную страницу социального портала
2) Контакты;
При нажатии на данный раздел мы увидим страницу с контактной ин-
формацией фирмы Modern Computers, схему проезда, форму обратной связи и
дополнительную информацию. Содержание страницы раздела «Контакты»
изображено на рисунке 3.14. В низу карты имеется форма для обратной связи с
администрацией образовательного портала. После отправки приходит письмо
на почту info@edu-kz.com.А также можно подать онлайн заявку на добавление
учебного заведения в базу нажав на ссылку с надписью «Подать заявку». Дан-
ная форма была разработана для удобства подачи заявки на добавление нового
учебного заведения. Руководство заполняет все данные о свое учебном заведе-
нии и оставляет данные для обратной связи, чтобы модераторы могли прове-
рить достоверность информации и подтвердить заявку как это происходит в
любом интернет магазине при заказе товара. Содержание страницы раздела по-
дачи заявки изображено на рисунке 3.15.
Рисунок 3.14– Контакты