Сайт "Молодежный хор Brevis"

Размещено на http://www.allbest.ru

Размещено на http://www.allbest.ru

СОДЕРЖАНИЕ

Введение

1. Анализ концепции сайта

1.1 Краткий обзор проекта

1.2 Структура сайта

1.3 Анализ сайтов конкурентов

2. Композиционные и цветовые решения сайта

2.1 Композиционное построение страниц

2.2 Цветовое решение

2.3 Изготовление графических элементов

2.4 Выбор шрифтов

3. Технология реализации верстки

3.1 Файловая структура проекта

3.2 Описание шаблонов сайта

3.3 Использование CMS

3.4 Заполнение шаблонов содержимым

3.5 Описание функциональных элементов сайта

4. Тестирование и запуск сайта

4.1 Процесс тестирования

4.2 Размещение сайта на хостинге

4.3 Регистрация в поисковых системах и каталогах

Заключение

Список используемых источников

Акт о внедрении web-проекта

Приложения

ВВЕДЕНИЕ

Проектом представленной дипломной работы является разработка современного и функционального сайта, посвященного белорусскому творческому музыкальному коллективу - молодежному хору «Brevis», основанному на базе хорового отделения Минского Государственного колледжа Искусств. Исходя из предпочтений заказчика, была проведена активная работа по созданию стиля сайта, цветового решения, визуальной привлекательности, функциональности и т.д.

В последнее время внимание поклонников белорусского хорового творчества, а также музыковедов и исследователей привлекает изучение деятельности молодых и перспективных музыкальных коллективов. Однако информация в сети Интернет представлена фрагментарно ( в контексте изучения белорусской музыкальной культуры ) или полностью отсутствует. Это не дает возможности популяризации белорусского хорового искусства в частности как на территории Республики Беларусь, так и за ее пределами. Размещение материалов моих разработок в Глобальной Сети поможет пользователям всего мира познакомиться с культурным наследием белорусского молодежного хорового коллектива «Brevis». Поэтому выбранная мной тема дипломного проекта является актуальной и своевременной.

Цель сайта - предоставление полной и исчерпывающей информации о хоровом коллективе «Brevis», описание его истории и традиций, объявление афиши выступлений и гастролей. Также на сайте будет размещена информация для абитуриентов и учащихся хорового отделения Минского Государственного Колледжа Искусств. Сайт должен привлекать посетителей удобством пользования, создавать впечатление профессионализма, фундаментальности, основательности и в то же время быть ярким, запоминающимся, со своим «особым» стилем и визуальной убедительностью.

В ходе работы над проектом автором были выявлены следующие задачи:

определить цели сайта, собрать и проанализировать необходимую информацию, определить целевую аудиторию, исследовать структуру, концепцию, дизайн и функциональность сайтов-конкурентов;

разработать структуру сайта, создать карту сайта, визуализировать макеты будущих web-страниц, осуществить навигацию по сайту, определить необходимые и дополнительные сервисы, выбрать технологию реализации сайта;

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

выполнить HTML-верстку, заполнить шаблоны содержимым, внедрить в них динамические элементы, графическое наполнение, Flash анимацию;

произвести работу над программированием сайта: создать базы данных и написать PHP-скрипты и JavaScript-сценарии для реализации функциональных возможностей сайта;

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

проверить эффективность адаптации HTML кода для SEO-оптимизации;

опубликовать сайт в сети Internet, зарегистрировать его в поисковых системах и каталогах.

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

1. АНАЛИЗ КОНЦЕПЦИИ САЙТА

1.1 Краткий обзор проекта

Проект представляет собой информационный сайт о молодежном хоровом коллективе «Brevis», который функционирует на базе хорового отделения Минского Государственного Колледжа Искусств.

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

Молодежный хор «Brevis» является студенческим коллективом, ведущим активную творческую жизнь. За свою историю он дал огромное количество концертов во многих городах Беларуси и за ее пределами. В репертуаре хора произведения русской хоровой классики, песнопения из церковной литературы, ораторий, кантат, литургий. Хор «Brevis» является лауреатом и дипломантом многочисленных международных и республиканских конкурсов и фестивалей.

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

учащиеся и абитуриенты Минского Государственного Колледжа Искусств;

поклонники творчества данного коллектива;

лица, интересующиеся информацией о музыкальных (хоровых ) коллективах Беларуси;

любители классической, духовной и светской хоровой музыки;

научные исследователи, работающие над соответствующими темами проектов;

посетители всех возрастных групп, независимо от статуса и рода деятельности.

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

В ходе анализа структуры сайта и его целей были определены следующие требования к верстке сайта:

1) сайт будет построен на основе баз данных и наполнен динамическим содержимым, управляемым при помощи PHP-скриптов;

2) дизайн страниц будет основан на «фиксированных» размерах страниц, минимальное разрешение экрана монитора - 17 дюймов (содержимое монитора будет отображаться без горизонтальной линии прокрутки);

3) верстка сайта будет оптимизирована на корректную работу популярных браузеров (Opera, Mozilla FireFox, Internet Explorer)

При работе над версткой сайта и создании необходимых сервисов будут использованы технологии:

PHP 5;

JavaScript;

MySQL 5;

HTML.

1.2 Структура сайта

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

Главная страница;

О хоре «Brevis»:

Гастроли;

Достижения;

Репертуар;

Участники хора:

Дирижер;

Артисты хора;

Солисты;

Аккомпаниаторы;

Афиша;

Учебный процесс:

Абитуриентам;

Учащимся;

Наши педагоги;

Традиции;

Фотогалерея:

Наши фото;

Выпускники;

Преподаватели;

Концерты;

Мероприятия;

Дипломы;

Наша жизнь;

Архивы(аудио-видео):

Аудиоархив;

Видеоархив;

Отзывы;

Наши контакты;

Карта сайта.

1.3 Анализ сайтов конкурентов

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

Для поиска вышеуказанных сайтов необходимо создать запрос в нескольких популярных поисковых системах. Для наиболее эффективного ответа на запрос я определила несколько словосочетаний, которые наиболее ярко и исчерпывающе характеризуют суть моего поискового запроса. Такими словосочетаниями являются: «хор», «молодежный хор», «официальный сайт хора», «хоровое искусство». Данные запросы производились в поисковых системах «Tut.by», «Yandex.ru», «Google.ru». Для реализации поисковых запросов в иностранных поисковиках (в данном случае «Yahoo.com»), использованными словами были «choir», «youth choir», «choral music».

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

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

сайт «Хор Турецкого», http://www.turetsky.ru/;

сайт «Большой детский хор», http://www.bdh.ru/news/news.shtml;

сайт «Академический хор» , http://hor.tarakanov.net/;

сайт хора «Кантилена», http://www.cantilena.ru/;

сайт «Хор Третьяковской галереи», http://www.tretyakovchoir.ru/;

сайт церковного хор «Анна-хор», http://annachoir.narod.ru/;

сайт хора «Choral», http://choral.ru/;

сайт альтернативного христианского хора «The Choir», http://www.thechoir.net/pages/home.html;

сайт хора «College William and Mary», http://www.wm.edu/so/choir/index.html.

Рассмотрим сайт «Хор Турецкого» с точки зрения вышеперечисленных позиций (рисунок 1.1).

Рисунок 1.1

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

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

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

Другую ситуацию мы можем наблюдать, анализируя сайт другого хорового коллектива - «Большого детского хора» (рисунок 1.2).

Рисунок 1.2

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

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

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

Следующий пример сайта отличается от первых двух и дизайном, и технологией. Это сайт «Академического хора» (рисунок 1.3).

Рисунок 1.3

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

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

Система навигации достаточно удобна, функциональность выполнена на хорошем уровне.

Сайт хора «Кантилена» (рисунок 1.4) можно назвать «имиджевым».

Рисунок 1.4

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

Структура сайта логична, понятна, убедительна. Цвета подобраны гармонично, их сочетание приятно. Однако оформление шапки сайта, и особенно графическое изображение в виде глаза вызывают недоумение, как же данная картинка поддерживает семантическое значение этого сайта? Оболочка сайта, и графика в том числе обязана подчиняться смыслу и идее содержания сайта, а не быть самой по себе. Фотогалерея реализована не очень неудачно, неудобно просматривать изображения, они открываются в новом не оформленном окне.

Сайт «Хор Третьяковской галереи» очень прост по структуре и дизайну (рисунок 1.5).

Рисунок 1.5

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

Сайт молодежного церковного хора «Анна-хор» (рисунок 1.6) не отличается профессиональной проработкой формы и структуры. Главная страница скорее напоминает газетную зарисовку.

рисунок 1.6

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

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

Сайт хора «Choral» (рисунок 1.7) вызывает двоякие чувства при посещении его страниц.

рисунок 1.7

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

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

Основным недостатком, на мой взгляд, является отсутствие целостности в композиционном отношении, неопределенность соотношения «главного» и «второстепенного» на странице.

В целом, сайт организован хорошо, пользователь различной степени подготовки сможет находить информацию.

Примером конкурентно-способного проекта, созданного на территории дальнего зарубежья можно назвать сайт американского альтернативного христианского хора «The Choir»( рисунок 1.8).

рисунок 1.8

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

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

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

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

Сайт американского хора «College William and Mary» также, как и предыдущий сайт нельзя назвать профессиональной работой (рисунок 1.9).

рисунок 1.9

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

Первое, что бросается в глаза - обилие различных семейств шрифтов, их размеры, начертание.

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

Структура страниц не рациональна, много пустоты, скученность элементов, ощущение нестабильности, неравновесия - все это отталкивает от посещения такого сайта. Этот проект я не могу назвать полноценным конкурентом представляемого мной сайта.

Таким образом, проведенный мной анализ дизайна сайтов конкурентов выявил следующие проблемы в разработке web-проекта, на которые следует обратить особое внимание:

работа над оптимизацией структуры web-страниц;

построение удобной системы навигации;

выбор удачной технологии верстки;

определение шрифтовых размеров и их цветовых решений;

качественная подготовка графических изображений;

соблюдение «единого стиля» сайта;

баланс «главного» и «второстепенного» на странице;

активная работа над деталями;

создание упора на удобство пользования;

разработка оптимального дизайнерского решения.

2. КОМПОЗИЦИОННЫЕ И ЦВЕТОВЫЕ РЕШЕНИЯ САЙТА

2.1 Композиционное построение страниц

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

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

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

цельность и единство стиля;

баланс равновесия;

соподчинение и равноценность элементов.

Благодаря первому закону композиции, проект воспринимается как единое неделимое целое, а не как сумма разрозненных объектов. Все эти элементы приводятся к упорядоченности, организуя форму.

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

Система соподчинения и равноценности элементов связана с первым законом композиции. Выделение центра композиции (главного объекта) влечет за собой подчинение второстепенных элементов.

Исходя из этого, композиция шаблона страниц представляет собой организованное и взаимодействующее соотношение блоков:

шапка сайта;

блок основного содержимого;

правый блок;

подвал сайта.

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

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

рисунок 1.10

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

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

По задумке заказчика роль «главного» объекта на странице должен принадлежать шапке сайта. Она обязана привлекать внимание посетителя, производить притягательное впечатление, не оставлять никого равнодушным, но при этом не должна отвлекать от содержимого, не мешать чтению и не утомлять пользователей ни громоздкими размерами, ни цветовым решением.

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

2.2 Цветовое решение

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

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

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

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

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

Для фона (<body>) был создан графический модуль темно-синего цвета, который при повторении по осям x и y образовывает едва уловимый рисунок, состоящий из косых линий; Цвет рамок страниц, шапки сайта выбран оттенок темно-синего (код #054b81). Ссылки в меню навигации имеют оттенок синего цвета ( код #005a8c).

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

Белый цвет на сайте окрашивает все свободное пространство, не занятое блоками или другим содержимым.

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

Ссылки в меню навигации при наведении меняют цвет на оранжевый (код # ff6600), этот же цвет подобран для активных ссылок и выделенных в тексте строк жирных шрифтов. Также оранжевый цвет имеет кнопка типа submit в форме поиска на главной странице.

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

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

Оформление отдельных элементов разметки, таких, как контактная форма, карта сайта и др. представляет собой оттенок бледно-серого цвета (код #f5f5f5).

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

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

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

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

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

2.3 Изготовление графических элементов

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

лаконичность и простота;

яркость и убедительность;

стилевое и цветовое единство с сайтом;

запоминаемость, уникальность.

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

рисунок 2.1

сайт шаблон графический файловый

Работа над шапкой производилась средствами приложения Adobe Photoshop CS2 на шести слоях.

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

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

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

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

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

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

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

рисунок 2.2 а) в) с)

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

2.4 Выбор шрифтов

Существует несколько стандартов шрифтов. Наиболее популярны шрифты корпорации Adobe Systems, разработавшей стандарт Type 1, и Microsoft Corp., создавшей формат TrueType. Оба стандарта имеют свои достоинства и недостатки, что привело к их параллельному сосуществованию. Шрифты TrueType поддерживаются системой, в то время как для шрифтов Type l необходима промежуточная поддержка (например, Adobe Type Manager).

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

Термин «шрифт» имеет несколько значений:

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

комплект текстовых знаков для набора;

рисунок (конфигурация ) букв, цифр, знаков.

Кегль - это величина площадки, на которой размещается знак (буква). Размер кегля определяется в пунктах. В основу измерений шрифтов положена система Дидо, распространенная в Европе и принятая в России, и так называемая система Пика (англо-американская). Основной единицей измерения является пункт, равный в системе Дидо 0,376 мм, а в системе Пика - 0,352 мм. Выбрать подходящий кегль для текстов сайта это важный процесс, т.к. необходимо предусматривать аудиторию посетителей с плохим и хорошим зрением.

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

Часто полагают, что в длинных текстах легче читать шрифты с засечками, чем без них. Исследования этого вопроса дают неоднозначные результаты, давая основание полагать, что основная причина этого эффекта в большей привычности шрифтов с засечками. Как правило, в печатных работах, таких как газеты и книги, применяются шрифты с засечками. Web-сайты могут не определять некоторые шрифты и используют пользовательские настройки браузера. По умолчанию браузер обычно выбирает шрифты без засечек, потому что считается, что, в отличие от печатных материалов, на компьютерных экранах с низким разрешением их читать легче.

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

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

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

На web-страницах теги HTML <tt> </tt> или <pre> </pre> чаще всего задают непропорциональные шрифты. Любые две строки текста с одинаковым числом символов при использовании моноширинного шрифта должны отображаться имеющими одинаковую ширину, тогда как при использовании пропорционального шрифта те же две строки могут иметь совершенно разную ширину. Это происходит из-за того, что в последнем случае широкие символы (такие как буквы W, Q, Z, M, D, O, H, и U) требуют больше места, чем узкие (такие как i, t, l, и 1).

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

Для текстов сайта «Brevis» был выделен шрифт Tahoma, разработанный Мэтью Картером. Картер создал шрифты ITC Galliard, Shelley, Helvetica, Bell Sentennial, ITC Charter, Мантиниа, София, Big Caslon, Alisal, Miller, шрифты по заказу "Microsoft" (Verdana, Georgia), журналов "Time", "Newsweek", "Sports Illustrated", газеты "Washington Post" и Центра искусств Уокера. Картер одним из первых серьезно занялся проблемой адаптации шрифта к низкому экранному разрешению. Результатом длительной работы стали шрифты Verdana и Tahoma, сразу же принятые большинством web-дизайнеров.

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

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

13px - текст основного содержимого (помещенный в дескрипторе <body></body>);

16px - текст заголовков блоков на главной странице;

13px - ссылки в меню навигации;

11px - текст в подвале сайта;

10px - текст всплывающих сообщений и предупреждений;

10px - результаты поиска.

3. ТЕХНОЛОГИЯ РЕАЛИЗАЦИИ ВЕРСТКИ

3.1 Файловая структура проекта

В виду того, что сайт разрабатывался с использованием CMF/CMS Drupal, существует определенная структура упорядочивания файлов и папок. Корневой каталог сайта выглядит следующим образом:

папка files (хранит загружаемые пользователем медиа данные);

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

папка includes (содержит библиотеки общих функций, которые использует Drupal);

папка misc (хранит сценарии JavaScript, различные значки и изображения, входящие в дистрибутив Drupal);

папка modules (содержит основные модули);

папка profiles (содержит различные установочные профили для сайта);

папка scripts (хранит пользовательские сценарии JavaScript, а также сценарии Perl для проверки синтаксиса кода очистки и обработки событий через демон cron);

каталог sites (содержит сделанные автором модификации в виде параметров настройки, модулей, тем). В этом каталоге содержится подкаталог default, с файлом конфигурации сайта settings.php;

папка themes (содержит механизмы создания шаблона и темы, предлагаемые для Drupal по умолчанию, а также и созданная автором тема).

3.2 Описание шаблонов сайта

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

Согласно композиционному решению, описанному выше, шаблон состоит из шапки сайта, блока основного содержимого, блок меню навигации, подвала сайта.

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

рисунок 3.1

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

рисунок 3.2

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

3.3 Использование CMS

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

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

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

Система Drupal написана на языке PHP, взаимодействует с базой данных MySQL и PostgreSQL.

Технология Drupal может применяться для создания Интернет-порталов, сайтов, интрасетей, каталогов сетевых ресурсов. Функциональные возможности реализуются с помощью модулей, использование которых можно разрешить или заблокировать.

Основные особенности системы Drupal:

обеспечение безопасности (защита от автоматического заполнения форм СAPTCHA, подтверждение email, log авторизаций, уведомления администратору, разделение прав доступа);

юзабилити (перетаскиваемый контент, ЧПУ, встроенный редактор изображений, пакетная загрузка файлов, отмена действий, визуальный редактор WYSIWYG, копирование объектов, скины);

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

производительность (кеширование страниц);

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

В терминологии Drupal темы - это коллекция файлов, отвечающие за внешний вид сайта. Темы состоят их набора файлов: таблиц стилей, файлов JavaScript, файлов шаблона, изображений и т.д.

Файлы шаблона (page.tpl.php) построены на HTML коде, в который вставляются элементы динамического содержимого, написанного на PHP. (приложение №1, пример №1). Этот файл отвечает за полное размещение страницы на сайте. Другие файлы шаблона (block.tpl.php и node.tpl.php) автоматически вставляются системой управления темами.

Node.tpl.php (шаблон узла) управляет отдельными частями содержимого, размещенного в page.tpl.php, влияет только на переменную $content в документе page.tpl.php (приложение №1, пример №2).

Block.tpl.php (шаблон блоков) использует иерархию указаний, позволяющую найти файл шаблона для заключения блока в оболочку (приложение №1, пример №3).

Файл comment.tpl.php добавляет разметку к комментариям (приложение №1, пример №4).

Основой файла шаблона является HTML код, не содержащий динамических элементов:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="iestyles/ie6.css" /><![endif]-->

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="iestyles/ie7.css" /><![endif]-->

</head>

<body>

<div id="utilities"> </div>

<div id="page">

<div id="header"> </div>

<div class="content">

<div id="primary">

<div class="singlepage"></div>

</div>

<div class="rsidebar">

<div class="clear"></div>

</div>

</div>

<!-- Close Page -->

<div id="footer"></div>

</body>

</html>

Для реализации управления динамически содержимым файла шаблона (page.tpl.php) разработчиком были использованы переменные, отвечающие за определенные функции и элементы страниц. Они внедрены в отдельные участки HTML кода. Переменные, участвующие в создании страниц:

$styles - возвращает HTML код для соединения со страницей необходимых CSS файлов. Они добавляются в переменную $styles с помощью функции drupal_add_css();

$head - возвращает HTML который будет помещен в разделе <head></head>;

$scripts - возвращает HTML код , позволяющий добавить добавить на страницу дескрипторы <script>;

$search_box - возвращает HTML код для формы поиска;

$breadcrumb - возвращает HTML код, чтобы отобразить на странице навигационную линейку;

$messages - возвращает HTML код для проверки на предмет ошибок и уведомлений о правильности заполнения форм;

$content - возвращает HTML содержимое, которое будет отображено на страницах;

$footer_message - возвращает текст сообщения нижнего блока (подвала сайта).

Некоторые переменные и функции, помещенные в этом файле шаблона, мной не использовались, они были отключены, но не удалены из файла шаблона.

Таким образом, была создана и отредактирована php-страница, которая отображает шаблон вывода содержимого для страниц сайта.

3.4 Заполнение шаблонов содержимым

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

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

с помощью тэгов <p></p> для четкого разделения абзацев, удобства чтения и легкого восприятия текста;

тэги списка <ul><li></li></ul> использовались для структурирования текстового наполнения, поданного в виде перечисления данных и в виде списков;

<span></span> употреблялся для оформления текстового содержимого исходя из решения проблем верстки, заменяя блочные тэги;

жирные шрифты, определенные тегами <b></b> и <strong></strong> использовались для выделения важных слов/словосочетаний в тексте;

иногда текстовую информацию было удобно разместить в табличном виде ( выполнение карты сайта), для реализации чего использовался тег таблицы <table><tr><td></td></tr></table>;

тег <br> великолепно выполнял функцию разделителя блоков, изображений, текстовых разделов, таблиц на странице;

объединение больших объемов текста и графики реализовано при помощи тэга <div></div>;

для связывания дополнительных сценариев со страницей был использован дескриптор <script></script>

При необходимости для каждого из тэгов создавался определенный стилевой класс для наиболее удобного манипулирования им в таблице стилей CSS.

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

в виде таблицы (<table></table>);

версткой со вложенными блочными элементами div><div></div></div>.

В процессе заполнения шаблонов содержимым сразу производилась проверка на соответствие оригиналу графического макета сайта, а так же осуществлялась проверка страницы на корректность отображения данных в различных браузерах (Opera, Mozilla FireFox, Internet Explorer).

3.5 Описание функциональных элементов сайта

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

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

Этот функциональный элемент может быть создан, т.к. базы данных MySQL имеют встроенные возможности полнотекстового поиска (таблицы базы данных имеют тип MyISAM).

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

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

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

Также на сайте реализованы блоки с опросами - голосования (рисунок 3.3). По желанию заказчика, количество их равно четырем. Темы для голосования были подготовлены следующие:

Ваши оценка творчеству хора «Brevis»;

Как Вы оцениваете фотографии;

Ваши пожелания хору «Brevis»;

Ваше мнение о работе сайта.

рисунок 3.3

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

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

Фотогалерея на сайте структурирована в виде категорий, которыми может воспользоваться посетитель и перейти к нужному разделу фотографий (рисунок 3.4).

рисунок 3.4

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

Данная фотогалерея реализована с помощью средств JavaScript. При нажатии на иконку фотографии, она открывается в новом (всплывающем) окне в больших размерах, доступных для детального просмотра фото. (приложение 1, пример № 5)

Доступ к категориям фотогалереи возможен как из пунктов меню навигации, так и со страницы «Фотогалерея».

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

Пользователь сайта «Brevis» сможет отправить сообщение, посетив соответствующую страницу «Наши контакты» (рисунок 3.5).

рисунок 3.5

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

Все поля формы являются обязательными для заполнения. При отправке сообщения выполняется проверка на наличие ошибок ввода, а именно:

наличие пустых полей;

наличие только одного знака @ и одной точки с расширением, в поле ввода электронного адреса;

отсутствие пробелов в названии электронного адреса;

проверяется попытка автоматического заполнения полей.

При успешном результате отправки посетитель направляется на главную страницу сайта.

4. ТЕСТИРОВАНИЕ И ЗАПУСК САЙТА

4.1 Процесс тестирования

Процессы тестирования проекта проходили по определенному порядку:

Конкретизация. Проверка работоспособности определенных функциональных элементов сайта с точной и конкретно поставленной целью и задачей. Таким образом тестировались HTML верстка, работа функциональных элементов, таких, как поиск по сайту, работа скриптов, работа баз данных и т.д.

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

Поэтапное тестирование. Проверки осуществлялись после внедрения каждого нового модуля или элемента в проект.

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

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

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

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

Особо нужно отметить проведенную работу по тестированию сайта на совместимость с браузерами и платформами, операционными системами. Сайт «Brevis» корректно отображается и функционирует в операционных системах UNIX, Windows, Apple Macintosh, в браузерах Opera 8+, Mozilla FireFox 2+, Internet Explorer 6+.

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

4.2 Размещение сайта на хостинге

Хостинг (англ. hosting) -- это услуга по предоставлению дискового пространства для физического размещения информации на сервере, постоянно находящегося в сети Интернет.

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

Хостинг баз данных, электронной почты, размещение файлов, услуги DNS могут предоставляться отдельно, как самостоятельная услуга, либо входить в понятие услуги хостинга.

Важным аспектом описания хостинга является наличие тех или иных служб и возможностей:

поддержка CGI;

поддержка Perl, PHP, ASP;

поддержка .htaccess (для Apache);

поддержка баз данных.

Хостинг как услугу сравнивают и описывают по количественным ограничениям:

размер дискового пространства;

количество месячного трафика

количество сайтов, которые можно разместить в рамках хостинга как одной услуги

количество баз данных и количество места под базы данных.

Также хостинг описывают и по качественным ограничениям:

свободные ресурсы CPU, оперативной памяти, которые влияют на быстродействие сервера;

пропускная способность каналов, которая влияет на загрузку информации.

Прежде, чем регистрировать сайт на хостинге, важным моментом является выбор доменного имени.

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