Оглавление

 

Введение  и постановка задач

Общие сведения

Европейская Федерация  Лао-Тайских боевых искусств предоставляет  услуги по обучению восточным видам  спорта таким как тайский бокс (муай-тай, тай-бо), кунг-фу и юдха-йога (боевая йога). Московское представительство федерации желает заняться рекламой своих услуг посредством печатной продукции и созданием информационного сайта (далее eflt.ru) своей федерации.

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

Теоретическое задание

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

Освоить теорию создания рекламных плакатов.

Техническое задание

Разработать сайт федерации. На сайте должны быть: форум, фотогаллерея, новостная лента и возможность добавления своих статических страниц. Дизайн сайта должен соответствовать тематике ресурса, быть негромоздским в светлых тонах. Провести SEO.

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

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

• Муай-тай для мужчин. Плакат должен содержать изображения бойцов, быть констрастным, текст плаката простым и популярным. Возможна ориентация на молодеж.
• Кунг-фу для детей. Плакат ориентированный на родителей. Яркий, возможно использование персонажа мультфильма «Панда кунг-фу».
• Тай-бо для женщин. Акцент делается на поддежание хорошей формы и красивой фигуры. Слоган плаката должен передавать смысл «Тай-бо – новое имя красивой фигуры».

 

 

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

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

Школа Тайского Бокса Москва (www.thai-boxing.ru) 

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

Преимущества:

• Быстрая загрузка, малый вес страниц
• Цветовая гамма и элементы дизайна полностью соответствуют тематике

Недостатки:

• Плохо оформлена страница с видео

 
 Тайбокс_Ру (www.thaibox.ru)

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

Недостатки:

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

 

Московская Федерация Тайского Бокса (www.mtbf.ru)

Недостатки:

• Режущий глаза красный фон справа
• В шапке фотография плохого качества. Меню закрывает часть фотографии.
• Пункт меню «Спонсорам» в непонятном месте
• В подвале сайта пустые блоки

Преимущества:

• Удачное использование рисунка в качестве фона под текстом страницы
• В целом удачная цветовая гамма, основанная на контрастах

 

Клуб «Барс» (muay-thai-kickboxing.com)

Ужасно оформленный сайт, сделанный исключительно для лучшей индексации в поисковиках, однако, концентрация ключевых слов зашкаливает, сайт занимает 5-7 позиции по запросу «тайский бокс москва».

Недостатки:

• Слишком пестрый дизайн
• Страницы перегружены информацией и изображениями
• Много посторонней рекламы
• Шапка и содержание сайта разной ширины
• Нелогичная структура страницы, важная информация находится под несколькими экранами рекламных баннеров 
  Выбор CMS. Общие сведения о CMS Drupal

CMS Drupal является открытой и бесплатной системой менеджмента контента сайта. Основными преимуществами Drupal являются гибкая настройка, многофункциональность (за счет дополнительных модулей), низкая нагрузка на сервер, широкие возможности поисковой оптимизации и управления контентом. CMS Drupal второй год подряд является лучше CMS по версии конкурсов Webware 100 и Packt Publishing, сместив с этого места старейшую и популярную CMS «Joomla!».

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

Разработка  тем для CMS Drupal

Структура файлов темы

Все темы в CMS Drupal располагаются в папке /themes/[название_темы]. Эта папка может содержать разное количество файлов, однако, есть набор основных, необходимых и рекомендованных к использованию:

• page.tpl.php – основной файл темы, шаблон страницы. Содержит разметку страницы сайта (является скелетом) со вставками дополнительных частей страниц, параметров и ссылками на файлы стилей. Является единственным обязательным файлом.
• block.tpl.php – файл шаблона блока темы. Состоит из html-разметки блока с php-вставками параметров, часто также содержит функции для генерации и отображения некоторых параметров. Необязательный файл, используется для задания особых парметров отображения блоков на сайте или перегрузки функций использующих блоки. Этот файл и остальные *.tpl.php схожи по функциям и структуре и различаются только областью применения.
• box.tpl.php – файл шаблона общего содержимого. Дает возможность корректировать отображение секции, содержащей контент сайта.
• comment.tpl.php – файл шаблона одного комментария. Дает возможность корректировать отображение комментариев. Необязательный файл.
• node.tpl.php – шаблон общего содержимого. Дает возможность корректировать отображение материала новости.  Необязательный файл.
• *.tpl.php- прочие файлы, где * - имя молудя, в отображение которого вы хотите внести правки. Выше рассмотрены лишь наиболее часто употребляемые.
• style.css – основной файл каскадных стилей темы. В нем рекомендуется хранить все стили темы. Файл необязательный, но крайне рекомендуемый именно с таким названием.
• Прочие *.css файлы – используются редко и в основном для исправления ошибок отображения в различных браузерах. Подключаются в page.tpl.php после проверки браузера пользователя.
• screenshot.png – файл превью темы 150х90 пикселей (при необходимости вирируется высота), позволяющий посмотреть тему без ее установки. Необязательный, но крайне рекомендуемый в случае, если вы планируете публиковать свою тему.
• /images/ - папка, содержащая все графические элементы дизайна. Крайне рекомендуется. Единственные графические файлы, которые необязательно хранить в этой папке это: файл логотипа – обычно, logo.png и файл иконки – favico.ico.

 

Методы создания и редактирования тем

Существует два  основных приема создания и редактирования тем:

• Редактирование или создание своего style.css
• Редактирование page.tpl.php. А также создание дополнительных .tpl.php файлов.

Первый случай является наиболее популярным и простым, не требует знаний программирования php. Чтобы изменить до неузнаваемости тему, достаточно переписать или добавить новых стилей в файл style.css.Однако, не всегда простое редактирование позволяет решить задачу и реализовать весь потенциал гибкости настройки CMS Drupal. Второй прием подходит для перегрузки функций отображения объектов темы. Каждый модуль может иметь свой .tpl.php файл, в нем можно оперировать всеми локальными переменными модуля, глобальными и тем самым добиться полного изменения отображения для конкретной темы, не внося изменений в код движка.

Структура style.css

Файл style.css является стандартным основным файлом стилей любого сайта. В CMS Drupal в этом файле разделяются три типа стилей:

• Разделы дизайна. Начинаются с # (например, #header, #content) используются для определения параметров основных разделов сайта: шапки, главное меню, панель навигации, колонки новостей и меню, содержание страницы, подвал. В html-коде задаются в атрибуте id. Название всех этих элементов некритичны, но рекомендуется логически правильно называть их:
• #header – для стилей шапки
• #primary, #secondary – для стилей главного меню
• #navbar, #sidebar-right, #sidebar-left – для стилей боковых панелей навигации
• #content – для стилей содержимого страницы
• #footer – для стилей подвала

Часто в файле  можно встретить стили #wrapper[цифра]. Они используются в основном в темах с составным разделом контента.

• Элементы дизайна. Начинаются с точки (например, .logo, .slogan) используются для определения параметров элементов дизайна входящих в # разделы.  В html-коде задаются в атрибуте class.
• Задание стилей для тегов. Обычно применяется для <body> и формирования стилей списка <ul>, <li> в меню.

Структура page.tpl.php и прочих *.tpl.php

Как было сказано  выше, *.tpl.php файлы содержат html-разметку темы, а page.tpl.php является основным файлом темы. По структуре page.tpl.php напоминает обычную html-страницу со вставками php-кода (для простоты восприятия рекомендуется использовать только переменные и условия). Например так выглядит раздел <head>:

<head>

<title><?php print $head_title; ?></title>

<?php print $head; ?>

<?php print $styles; ?>

<?php print $scripts; ?>

<?php print _sky_conditional_stylesheets(); ?>

</head>

Здесь в переменных $head, $styles, $scripts хранятся, собираемые другими модулями мета-теги, стили и javascript-коды.

Пример использования  php-кода для условий вывода информации:

<?php if ($site_name): ?>

<span id="site-name">

<a href="<?php print $base_path; ?>" title="<?php print $site_name; ?>">

<?php print $site_name; ?></a>

</span>

<?php endif; ?> 

Здесь, в случае, если $site_name (название сайта, которое можно задать в настройках CMS) непустое, то выводится все содержимое тега <span>.

Модуль  Theme Settings API

Поскольку очень  часто файлы style.css имеют большой объем и достаточно редко – комментарии, изменение темы можно облегчить с помощью популярного модуля Theme Settings API. Этот модуль позволяет в администраторском разделе сайта изменить наиболее важные параметры, такие как: шрифты, ширину сайта, некоторые другие параметры. Для того чтобы пользоваться этим модулем, тема должна его поддерживать. Обычно в папке темы создается отдельный файл theme-settings.php, в котором описываются функции возвращающие выбранные в админке параметры. Эти параметры передаются в модуль Theme Settings API, где генерируется файл, подключаемый в <head> в page.tpl.php.

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

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

Создание  и настройка темы для сайта EFLT.ru

За основу темы для  сайта была взята тема foundation, представляющая собой только скелет, с прописанными, но пустыми стилями. В ходе работы были выполнены следующие действия:

• Существенно дополнен и местами переписан файл page.tpl.php для корректности отображения темы во всех популярных браузерах. Использовались как div так и таблицы, поскольку не все решения на чем-то одном корректно поддерживаются браузерами, также комбинированость видов верстки обусловлена выбором наиболее емкого решения.
• Заполнены необходимые пустые поля стилей файла style.css.
• Добавлены новые стили.
• Добавлен модуль nice_menus для отображения primary links в виде выпадающего списка. Изменен .css файл модуля.
• Проверена работоспособность сайта при различных разрешениях экрана.