Анализ существующих технологий создания сайтов

Еще одной тенденцией в развитии веб-ресурсов нового поколения стала эргономичность и динамичность интерфейсов. Дизайн в стиле веб 2.0 предполагает создание комфортной среды с помощью цветовой гаммы, увеличенного размера шрифта, умеренной яркости, невысокой плотности объектов на странице, проработанности мелких элементов в дизайне (иконочки, кнопочки, тени). Пока официальные веб-ресурсы вузов не демонстрируют в полной мере этих признаков. Динамичность же веб-интерфейсов сегодня достигается разработчиками за счет технологии Ajax (построение пользовательских интерфейсов, при котором веб-страница, не перезагружаясь, асинхронно загружает нужные пользователю данные). Это направление современного сайтостроения также пока не нашло широкого применения в академической среде. В качестве примера здесь можно привести тестовый проект Бурятского государственного университета: http://www.eva2.ru [4].4. Рейтинг Webometrics: мировые вузы в виртуальном пространстве [Электронный ресурс] // Независимое рейтинговое агентство РейтОР. – Режим доступа:

http://www.reitor.ru/ru/analitic/experience/index.php?id19=304

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

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

 

 

 

3. Разработка  сайта для НОУ СПО «Колледж  управления бизнеса и права»

3.1 Дизайн и  структура сайта

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

Рисунок 6. Примеры двух- и трех-колоночных сеток

 

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

Модульные сетки в дизайне часто строятся на основании правила золотого сечения или правила двух третей. Это правило широко распространено в архитектуре и искусстве. При соблюдении правила золотого сечения отношение большей части поделенного надвое отрезка, к меньшей всегда дает магическое число 1,6. Это знаменитое «число Фибоначчи». Такое же число получается и при делении большей стороны прямоугольника на меньшую.

Рисунок 7. Пример сайта первого типа

 

Еще один немаловажный аспект – это подбор цветовой шкалы сайта. Задача успешного веб-дизайнера состоит именно в грамотном подборе цвета. Зачастую заказчик уже дает определенные цвета для сайта, которые являются его «фирменными цветами». Это в том случае, если у организации уже разработан свой фирменный стиль, включающий шрифты, цвета, логотип и пр. В нашем случае у организации был разработан логотип, который не совсем устраивал заказчика. Поэтому разработка дизайна сайта началась с разработки логотипа. Для разработки логотипа использовалась программа CorelDraw, как наиболее подходящая и часто используемая в рекламе и дизайне. Изображения старого и нового логотипа приведены на рисунке 8.

Исходя из цветов логотипа строилась и цветовая гамма сайта. Для подбора цветов использовалась программа Adobe Color CC. Она представляет собой цветовой микшер с возможностью создания, редактирования, экспорта различных цветовых палитр, которые можно использовать в таких программах как Adobe Photoshop, Illustrator и др.

 

Рисунок  8. Старый (слева) и новый (справа) логотипы Колледжа

 

Рисунок 9. Работа с программой Adobe Color CC

 

Помимо создания собственных цветовых палитр, Adobe Color CC предоставляет возможность использовать уже созданные палитры. Они расположены в разделе «Explore». Там же можно отсортировать их по популярности и тд. Выбранная цветовая схема сайта представлена на рисунке 10.

Рисунок 10. Цветовая модель сайта

 

После выбора цветовой модели в программе CorelDraw были созданы три варианта дизайна сайта и представлены на рассмотрение заказчику.

 

Рисунок 11. Разработанный дизайн сайта

 

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

3.2 Создание шаблона  сайта

При создании шаблона сайта использовался формат HTML и каскадные таблицы стилей, прописанные в текстовом редакторе NotePad++. Ниже приведен HTML код страницы шаблона сайта:

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=[(modx_charset)]"> 
<meta name="keywords" content=""> 
<base href="[(site_url)]"></base> 
<meta charset="utf-8"> 
<title>[(site_name)] » [*pagetitle*]</title> 
<link rel="stylesheet" type="text/css" href="/assets/CSS/styles.css"> 
<link rel="stylesheet" type="text/css" href="/assets/CSS/css_menu.css"> 
<link rel="stylesheet" type="text/css" href="/assets/CSS/news.css"> 
</head> 
<body> 
<div id="header"> 
<a href="[(site_url)]"><img src="/assets/images/Logo.jpg"></a> 
</div> 
<div id="centerblock"> 
<div id="mainblock">  
<div id="sidebar"> 
<div id="menublock">{{MENU}}</div> 
</div> 
<div id="content">[*content*]</div> 
<div id="sidebarright"> 
</div> 
</div> 
</div> 
<div id="footer"><img src="/assets/images/Footer.jpg" id="footerlogo"> 
<p id="footertxt">{{footer}}</p> 
</div> 
</body> 
</html>

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

.mainmenu {

list-style: none;

}

.mainmenu li {

margin-top: 2px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

margin-left: -32px;

}

.mainmenu li a {

border-radius: 5px;

width: 105px;

display: block;

padding: 15px 20px;

background: #8f8f8f;;

color: #000000;

text-decoration: none;

position: relative;

}

.mainmenu li a:hover {

background: #000000;

color: #CD3700;

}

Далее приведены настройки новостной ленты:

#news {padding:0; margin:0 0 15px 0;}

#news h2 {padding:0px; margin:0px; border:none}

#news a {text-decoration:none; color: #CD3700; size: 18px;}

#news .introtext{padding:5px 0 0 0}

#news .introtext .date {font-weight:bold;}

#news .readmore {text-align:right}

#news .date {color: #000000; font-weight: bold;}

#txtnews {

vertical-align: top;

display: inline-block;

}

#imgnews {

width: 200px;

display: inline-block;

}

Ниже приведен код каскадных таблиц стилей, отвечающих за стиль основного шаблона сайта:

body {

color: #8f8f8f;

font: 12px Tahoma, sans-serif;

background-color: #8f8f8f;

margin: 0px;

padding: 0px;

}

#header {

position: relative;

background: #000000;

text-align:center;

width: 100%;

height: 100px;

margin: 0px;

padding: 0px;

display: inline-block;

}

#centerblock {

width: 1024px;

margin: 0 auto;

text-align: center;

}

#sidebar {

float: left;

position: relative;

margin-left: 10px;

margin-top: 10px;

background:#ffffff;

width: 160px;

height: 500px;

border-radius: 15px;

padding: 0px;

display: inline-block;

}

#menublock {

width:160px;

margin: 0 auto; text-align: center;

padding: 0px;

display: table;

}

#content {

float: left;

position: relative;

margin: 10px;

width: 637px;

background:#ffffff;

min-height: 500px;

border-radius: 15px;

padding: 0px 5px;

text-align: left;

display: inline-block;

}

#sidebarright {

float: left;

position: relative;

margin-top: 10px;

background:#ffffff;

width: 160px;

height: 500px;

border-radius: 15px;

padding: 0px;

display: inline-block;

}

#footer {

position: relative;

text-align:center;

background: #000000;

width: 100%;

height: 100px;

display: inline-block;

}

#footerlogo {

float:right;

width:200px;

}

#footertxt {color: #ffffff;}

3.3 Установка сайта на хост

Для установки сайта на хост был выбран бесплатный хост Hostinger.ru. Он предоставляет услуги бесплатного хостинга с поддержкой PHP, MySQL, обеспечивает 2GB места на диске, 100 GB трафика и бесплатным доменом.  Бесплатный хостинговый план идеально подходит для различных типов небольших, личных, общественных веб-сайтов, форумов, блогов. Поскольку заказчику пока не требуется много ресурсов на сайте, на первое время решено было ограничиться бесплатным предложением. Регистрация и создание доменного имени показано на рисунке 12.

Рисунок 12. Регистрация на Hostinger.ru

 

Адрес сайта после регистрации принял вид www.kubip.96.lt.

После регистрации доменного имени происходит заливка файлов движка MODx на хост по протоколу FTP. В качестве системы управления контентом web-сайта была выбрана система MODx CMS, как наиболее современная из существующих в настоящее время. Установка данной системы показана на рисунке 13.

После установки системы начинается установка разработанного шаблона сайта. Получившийся в итоге сайт несколько отличается от шаблона, разработанного в программе CorelDraw. Это связано с тем, что в процессе редактировалась заливка кнопок управления сайтом, градиентная заливка, цвета заголовков для новостей и др.

Рисунок 13. Установка системы управления контентом MODx CMS

 

Также на сайт был добавлен счетчик посещений.

Когда шаблон сайта был окончательно доработан, началась работа по его заполнению. С системой MODx это не составляет большого труда. Особенно это касается добавления текста на страницы. На рисунке 14 показана работа с текстом: можно менять размер и тип шрифта, выравнивание, начертание и многое другое, не прописывая при этом теги.

Рисунок 14. Редактирование страниц сайта

Окончательный вариант сайта показан на рисунке 15.

Рисунок 15. Готовый сайт Колледжа.

 

 

 

 

 

 

 

 

 

 

 

 

Список использованных источников

http://sitecraftstudio.ru/ru/content

"Системный администратор", №7(32), Июль 2005

Алексей Моисеев

Алексей Моисеев 
Опубликовано в журнале "Компьютерра" №32 от 08 сентября 2005 года

Курдюков А.И. Создание web-сайтов. Учебно-методическое пособие. НОУ СПО «Колледж управления, бизнеса и права», Архангельск, 2014

Веб-сайт вуза как эффективный инструмент обеспечения вузовской деятельности,  Полтавец А.В. Вопросы управления № 3 2010 г.

Мартинес А. Секреты создания недорогого Web-сайта. Как создать и поддерживать удачный Web-сайт, не потративни копейки. – М.:ДМК Пресс, 2006

Рейтинг Webometrics: мировые вузы в виртуальном пространстве [Электронный ресурс] // Независимое рейтинговое агентство РейтОР. – Режим доступа: http://www.reitor.ru/ru/analitic/experience/index.php?id19=304