Создание сайта на тему "Экстремальные виды спорта"

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

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ БЕЛАРУСЬ

Учреждение образования

«Гомельский государственный технический университет имени П.О. Сухого»

Институт повышения квалификации и переподготовки кадров

Кафедра «Информатика»

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

к дипломной работе

на тему: Создание сайта на тему «Экстремальные виды спорта»

Разработал слушатель гр. ЗВД-22

Дмитриев И.А.

Руководитель работы доцент,

к.т.нТрохова Т. А.

Гомель 2012



Перечень условных обозначений и сокращений

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

CMS - это система управления контентом/содержимым сайта. Под контентом и содержимым сайта понимают: текст, картинки, видео - данные и файлы.

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

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

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



Реферат

Дипломная работа :48 страниц, 9рисунков, 2 таблицы, 10 источников.

Объектом исследования является разработка и проектирование web-сайта являются «Экстремальные виды спорта».

web-сайт, CMS, web-дизайн, шаблон, карта сайта, Динамика сайта, КОМПЬЮТЕРНАЯ ГРАФИКА, БЛОГ.

При создании сайта были рассмотрены программные пакеты по созданию Web-сайтов (Adobe Photoshop CS5,Illustrator, Macromedia Dreamweaver MX, Artisteer).

Были изучены различные системы управления содержимым (CMS), обеспечивающие доступ к информации в сети Internet и удобное редактирование сайта. Из многообразия существующих в настоящее время CMS была выбрана наиболее оптимальная для работы с Web-приложениями - CMSWordPress, отвечающая всем требованиям разработчика.

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

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



СОДЕРЖАНИЕ

• ВВЕДЕНИЕ
• 1 Аналитическая часть
• 1.1 Характеристика сайта
• 1.2 Обзор CMS
• 1.3 Обзор графического ПО
• 1.4 Обоснование выбора
• 2 Информационно-логическая модель
• 3 Разработка сайта
• 3.1 Разработка логотипа сайта «ExtremeZone»
• 3.2Создание анимированного баннера для сайта
• 3.3Создание шаблона сайта для WordPress
• 3.4Установка и настройка WordPress
• Заключение
• Список использованных источников


ВВЕДЕНИЕ

интернет сайт информационный дизайн

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

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

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



1 Аналитическая часть

1.1 Характеристика сайта

Сайт в первую очередь должен осуществлять следующий функционал:

- Пропаганда активного и здорового образа жизни.

- Информирование пользователей о событиях в области экстремального спорта.

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

Рисунок 1.1 - Дерево сайта

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

1.2 Обзор CMS

CMS - это система, которая позволяет в удобном виде создавать и управлять (редактировать, удалять) текстовыми материалами и мультимедиа документами (содержимое или контент) на сайте. Аббревиатура «CMS» появилась от английской фразы Content Management System, что и переводится как система управления контентом. CMS были созданы для экономии времени, которое необходимо на создание или редактирование статьи.

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

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

К бесплатным CMS относятся: Joomla, Drupal, Wordpress, 2z-project и другие.

Из платных CMS широкое распространение получили DLE (DataLifeEngine), которая больше подходит для развлекательных сайтов, UMI.CMS, NetCat.

Рассмотрим более подробно каждую CMS.

Joomla - самая популярная в мире система управления сайтом с открытым кодом. CMS Joomla позволяет добиваться наилучшего соотношения цена-качество при создании любого сайта. В отличие от многих других систем, для Joomla подойдет практически любой хостинг с поддержкой php и mysql. Управление сайтом на Joomla не требует специальных знаний программирования и html-верстки.

Joomla обладает следующими характеристиками:

- полностью основана на базах данных с использованием PHP/MySQL;

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

- секции новостей, продукции или услуг легко редактируемы и управляемы;

- разделы тем могут быть добавлены авторами;

- полностью настраиваемые схемы расположения элементов; включая левый, правый и центральный блоки меню;

- возможность загружать изображения при помощи браузера в собственную библиотеку - для последующего использования с любого места сайта;

- форум, опросы, голосования для эффективной обратной связи;

- работа под Linux, FreeBSD, MacOSX, Solaris, AIX, SCO, WinNT, Win2K.

Возможности администрирования:

- возможность создавать неограниченное количество страниц;

- четкая организация структуры сайта;

- для каждой динамической страницы можно создать свое описание и ключевые слова в целях повышения рейтинга в поисковых системах;

- начало и окончание публикации любых материалов можно запрограммировать по календарю;

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

- секции новостей, продукции или услуг легко редактируемы и управляемы;

- полностью настраиваемые схемы расположения элементов по 5 областям, что позволяет сделать оригинальный дизайн;

- различные модули - такие как последние новости, счетчик посещений, подробная статистика посещений, гостевая книга, форум;

- возможность создания не одной, а нескольких форм обратной связи для каждого контакта;

- изменение порядка объектов, включая новости, вопросы, статьи;

- генератор показа случайной новости;

- модуль приёма от удалённых авторов новостей, статей и ссылок;

- иерархия объектов - количество секций, разделов, подразделов и страниц, зависит от поставленных задач;

- библиотека изображений позволяет хранить все GIF и JPEG файлы «под рукой» для лёгкого доступа;

- менеджер рассылки новостей. Возможность выбирать из более чем 360 служб рассылки новостей по всему миру;

- менеджер архива (перемещение старых статей в архив);

- возможность распечатать или отправить на e-mail любую статью с сайта;

- выбор из 3 визуальных редакторов, что упрощает редактирование материалов до уровня редактирования текста в программе Word;

- предварительный просмотр перед окончательным размещением;

- возможность легкой смены дизайна;

- экономное использование места на сервере за счет использование базы данных MYSQL;

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

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

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

В качестве Web-сервера может использоваться так же MS IIS (Internet Information Server) версии 5.0 и выше.

Joomla может использоваться совместно c наиболее известными браузерами, такими как Internet Explorer (версия 5.5+), Netscape и Mozilla Firefox. С данными браузерами секция администрирования наиболее совместима.

Перейдём к изучению CMS WordPress.

WordPress -- система управления содержимым сайта с открытым исходным кодом, распространяемая под GNU GPL. Данная CMSнаписана на языке программирования PHP, в качестве базы данных использует MySQL. Сфера применения достаточно широка - от блогов до достаточно сложных новостных ресурсов и даже интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать практически любые проекты. WordPress выпущен под лицензией GPL версии 2.

На 2007 год WordPress была самой популярной системой для ведения автономных блогов:

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

- простота установки, настройки;

- поддержкаRSS, Atom, trackback, pingback;

- подключаемые модули (плагины) с уникальной простой системой их взаимодействия с кодом;

- поддержка «тем», позволяющих легко менять как внешний вид, так и способы вывода данных;

- «темы» реализованы как наборы файлов-шаблонов на языке программирования PHP, что положительно сказывается на скорости и гибкости;

- большие библиотеки «тем» и «плагинов»;

- заложенный потенциал архитектуры позволяет легко реализовывать сложные решения;

- наличие URL;

- наличие русских переводов.

Требования к ПО

Начиная с версии 3.2

- PHP версии 5.2.4 или выше;

- MySQL версии 5.0 или выше;

- (Необязательно (требуется для режима Multisite)) Модуль Apachemod_rewrite (для красивых адресов, называемых постоянными ссылками).

До версии 3.2

- PHP версии 4.3 или выше;

- MySQL версии 4.1.2 или выше.

DataLifeEngine это многопользовательская система, предназначенная для организации блогов и СМИ в сети интернет. Благодаря мощной системе публикации, настройки и редактирования новостей, данная CMS превосходит конкурентов. А благодаря точной и продуманной структуре ядра, сводящей к минимуму требования к ресурсам сервера, DLE способен быстро работать с высоко посещаемыми проектами, не создавая при этом нагрузок на сервер. Гибкость и легкость в настройке и интеграции дизайна позволяет расширить сайт в короткие сроки без дополнительных материальных затрат. Использование технологии AJAX сократит как трафик сервера, так и трафик посетителей. Благодаря повышенному вниманию к безопасности скрипта, к удобству работы с ним, а также динамическому развитию, в пользу использования DataLifeEngine уже высказались более 70 000 порталов, успешно использующие его в работе. CMS оптимизирована под поисковые системы, что позволяет привлечь дополнительных клиентов.

Краткий перечень возможностей DataLifeEngine:

- Использует для хранения данных MySQL;

- Поддержка расширения MySQLi;

- Мощная система безопасности;

- Минимальная нагрузка на базу данных (от 0 до 5 запросов);

- Использование продвинутой технологии AJAX, позволяющей существенно сократить нагрузку на сервер и траффик пользователей;

- Абсолютно независимое создание дизайна сайта, скрипт не накладывает никаких ограничений на фантазию вебмастера

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

- Упрощенная система управления шаблонами;

- Продвинутая система управления баннерами (или любой рекламной информации);

- Возможность создания не только динамического контента, но и статического;

- Автоматическая и ручная генерация метатегов;

- Система почтовых шаблонов, на основе которых осуществляется генерация и отправка сообщений с сайта;

- Возможность временной блокировки доступа на сайт;

- Вывод новостей и статей, да и вообще всего что угодно;

- Поддержка ЧПУ (человеко-понятный URL) позволяет использовать тему статьи или любой другой текст в URL броузера, благодаря этому индексация сайта в поисковых системах будет более качественной (необходим modrewrite);

- Возможность отключение ЧПУ;

- Общая статистика сайта;

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

- Возможность написания статей содержащих несколько страниц и показ на сайте с разбивкой на страницы;

- Возможность автоматического поиска и показа на сайте сходных по тематике новостей;

- Возможность использования вложенных категорий;

- Флуд контроль и многочисленные механизмы защиты от спама;

- Автоматический фильтр слов в комментариях;

- Поддержка неограниченного количества категорий, а также подкатегорий;

- Автоматический перенос длинных слов в комментариях;

- Рейтинг новостей;

- Календарь;

- Поиск по статьям включая дополнительные поля (подсветка найденного текста);

- Обзор непрочитанных новостей с момента последнего посещения сайта;

- Возможность просмотра сколько раз была прочитана новость;

- Возможность добавления статей в раздел "Избранное";

- Отсылка писем пользователям через форму на сайте;

- Вывод страницы используя сжатие gzip а также без него;

- Поддержка персональных сообщений между пользователями;

- Поддержка нескольких языков;

- Вывод популярных статей в отдельном блоке;

- Создание голосований на сайте;

- Возможность создания статических страниц непосредственно через админпанель;

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

- Поддержка неограниченного количества групп пользователей;

- Возможность ограничения доступа к различным разделам для определенных групп пользователей;

- Возможность загрузки и прикрепления файлов к новостям;

- Встроенные средства защиты от несанкционированного скачивания файлов (antileech);

- RSS Импорт новостей;

- RSS Экcпорт новостей;

- RSS Информеры;

- Мультиязычная поддержка новостей на сайте;

- Поддержка Облака Тегов;

- Поддержка единой регистрации на нескольких различных сайтах под управлением DLE;

- Автоматическая поддержка смартфонов.

Возможности для посетителей сайта:

- Регистрация на сайте;

- Добавление комментариев;

- Выставление рейтинга новостям;

- Изменение и удаление пользователями своих собственных комментариев;

- Возможность добавления новостей со стороны посетителей;

- Модерирование новостей;

- Статистика по конкретному пользователю (включая рейтинг и профиль);

- Вывод различной информации для зарегистрированных посетителей и нет;

- Возможность загрузки фотографии в профиле пользователя Возможность восстановления забытого пароля;

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

- Массовая загрузка картинок на сервер;

- Просмотр и добавление видео на сайт;

- Персонализация вывода рекламы для определенных групп;

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

- Возможность загрузки большого количества картинок и файлов в один клик;

- Полный настраиваемый доступ для различных групп пользователей. Возможности администрирования:

- Добавление, редактирование и удаление новостей;

- Автоматическая типографская подготовка текста новостей к публикации в Web;

- Возможность распределения доступа для конкретной новости;

- Для создания новостей возможно использование WYSIWYG редактора или BBCODES;

- Антивирус проверяющий состояние файлов на предмет возможного взлома;

- Редактирование пользователей;

- Имеется возможность использовать смайлы и HTML код;

- Создание неограниченных групп пользователей с возможностью назначения им различных прав доступа;

- Возможность выставления бана для посетителей;

- Средства для создания и редактирования шаблонов непосредственно в админцентре;

- Возможность корректировки времени;

- Возможность изменения автора и даты публикации;

- Автоматическая публикация статьи при наступлении установленного времени;

- Возможность отключения календаря и архивов (для экономии ресурсов);

- Возможность фиксации новостей (будут всегда наверху, независимо от даты);

- Отключение регистрации посетителей;

- Автоматическая временная приостановка регистрации при достижении максимального количества зарегистрированных пользователей;

- Автоматическое урезание загруженных картинок с сохранением пропорций до указанных размеров;

- Автоматическое удаление пользователей которые не посещали сайт заданное время;

- Наложение водяных знаков на картинки;

- Возможность загрузки картинок для каждой конкретной новости (при удалении новости, картинки тоже будут удаляться);

- Удобный менеджер загруженных картинок;

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

- Поиск пользователей по IP адресам;

- Удобное управление рекламными материалами;

- Быстрый поиск и замена в базе данных;

- Публикация "правил" на сайте;

- Создание карты сайта для Google;

- Создание фильтров для автоподстановки слов и значений.

«1С-Битрикс: Управление сайтом» - универсальный программный продукт для разработки, поддержки и успешного развития любых интернет-проектов: корпоративных сайтов, интернет-магазинов, информационных порталов, сайтов сообществ, социальных сетей и других. Созданным сайтом можно профессионально управлять даже без специальных знаний программирования и html-верстки.

«1С-Битрикс: Управление сайтом» - универсальный программный продукт для разработки, поддержки и успешного развития любых интернет-проектов:

- корпоративных сайтов;

- интернет-магазинов;

- информационных порталов;

- сайтов сообществ;

- социальных сетей и других.

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

«1С-Битрикс: Управление сайтом» может быть использован как платформа (FrameWork) для создания собственного веб-решения.

Особенности «1С-Битрикс: Управление сайтом»:

- Комплексное решение бизнес-задач;

- Удобный и понятный интерфейс;

- Многосайтовость;

- Безопасность;

- Полная интеграция с «1С:Предприятие»;

- Мастера создания сайта;

- Упрощенная интеграция с дизайном и шаблоны;

- Подробная документация;

- Технология обновлений SiteUpdate;

- Среда для разработки индивидуальных решений (FrameWork).

«1С-Битрикс: Управление сайтом» позволяет:

- управлять структурой и меню сайта через веб-интерфейс;

- редактировать внутреннюю область страниц в визуальном режиме;

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

- управлять показом рекламы на сайте;

- отправлять рассылки группам подписчиков;

- управлять интернет-магазином;

- вести учет статистики посещений;

- анализировать эффективность рекламных кампаний;

- создавать форумы, блоги и многое другое.

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

Многосайтовая версия «1С-Битрикс: Управление сайтом» позволяет создавать неограниченное число сайтов с единой системой авторизации пользователей, единой системой управления, единым рекламным пространством, уникальной системой веб-аналитики для анализа эффективности проектов, расширенными возможностями по созданию и управлению сообществами.

Безопасность Positive Technologies, лидирующая компания на рынке информационной безопасности, провела аудит безопасности программного продукта «1С-Битрикс: Управление сайтом». Тестирование подтвердило неуязвимость продукта ко всем видам известных атак на веб-приложения. По результатам проверки программному продукту «1С-Битрикс: Управление сайтом» присвоен статус «Безопасного веб-приложения» и выдан сертификат соответствия.

Высокая производительность заключается в то, что сайт, созданный на основе продукта, выдерживает любую нагрузку. Используя разные конфигурации оборудования и продукт «1С-Битрикс: Управление сайтом», можно масштабировать проект в зависимости от нагрузки на сервер, что позволяет каждому клиенту найти оптимальный уровень, соответствующий задачам проекта и нагрузке.

При увеличении нагрузки на сервер необходимо обеспечить бесперебойную работу сайта, а для этого требуется надежная база данных. Пользователи MySQL-версии «1С-Битрикс: Управление сайтом» могут быстро перейти на Oracle или MSSQL-версию продукта.

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

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

Продукт «1С-Битрикс: Управление сайтом» разработан на языке программирования PHP и может эффективно работать на любой UNIX или Windows платформе. В качестве базы данных используется MySQL, Oracle/OracleXE или MSSQL/MSSQL Express.

Минимальные технические требования:

- PHP 5.0 и выше;

- Apache 1.3 и выше или MS IIS 5.0* и выше или Eserv 3.0 и выше;

- MySQL 4.1 и выше, Oracle 9 и выше или MSSQL 2000 и выше;

- И если раньше было распространено мнение «Wordpress - это система только для блогов», то сейчас мы видим всё больше и больше сайтов с совершенно иным функционалом выполненные именно на WP;

- На данный момент на сайте http://wordpress.com/ зарегистрировано более 25 миллионов блогов, дистрибутив CMS WordPress 3.0 и выше был скачан более 32,5 миллионов раз.

Рисунок 1.2 - Рейтинг CMS, используемых в web-пространстве



1.3 Обзор графического ПО

Как известно, web-графика бывает растровой и векторной.

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

Важными характеристиками изображения являются:

- количество пикселей -- количество цветов. Может указываться отдельно количество пикселей по ширине и высоте (1024?768, 640?480, …);

- количество используемых цветов или глубина цвета;

- цветовое пространство (цветовая модель) RGB, CMYK, XYZ, YCbCr и др.;

- разрешение -- справочная величина, говорящая о рекомендуемом размере пикселя изображения.

Достоинства растровой графики:

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

- Распространённость -- растровая графика используется сейчас практически везде: от маленьких значков до плакатов;

- Высокая скорость обработки сложных изображений, если не нужно масштабирование;

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

Недостатки растровой графики:

- Большой размер файлов с простыми изображениями;

- Невозможность идеального масштабирования;

- Невозможность вывода на печать на плоттер.

Векторная графика -- способ представления объектов и изображений в компьютерной графике, основанный на использовании элементарных геометрических объектов, таких как точки, линии, сплайны и многоугольники [3].

Преимущества векторного способа описания графики над растровой графикой:

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

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

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

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

Фундаментальные недостатки векторной графики:

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

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

- Преимущество векторной картинки -- масштабируемость -- пропадает, когда начинаем иметь дело с особо малыми разрешениями графики (например, иконки 32?32 или 16?16). Чтобы не было «грязи», картинку под такие разрешения приходится подгонять вручную.

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

Для работы с растровой графикой существуют несколько программ.

SAI или PaintTool SAI, предназначена для цифрового рисования и разработанную японской компанией SYSTEMAX.

Особенности программы:

- Небольшая по размеру программа, стартующая за считанные секунды;

- Полная поддержка графического планшета;

- Большая скорость работы;

- Почти все горячие клавиши взяты из AdobePhotoshop плюс свои сочетания;

- Сглаживание пера и высокая интерполяция штриха;

- Поворот холста;

- Высокое качество рендеринга картинки.

Рисование:

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

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

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

CorelPainter.

Функции:

- Имитация традиционных средств живописи (карандаш, пастель, масляные краски, акварель, аэрограф; в сумме около 200 инструментов и их вариаций);

- Цифровые средства живописи (около 200 разнообразных кистей и эффектов), система работы со слоями и их наложением, маски, каналы цвета;

- Вспомогательные инструменты (ластик, мастихин, осветлитель, затемнитель и т. п.;

- Виртуальная палитра смешивания цветов;

- Виртуальный холст с выбором типа бумаги (например, ретро) и т.д;

- Также есть возможность настраивать текущие инструменты/средства или создавать свои собственные.

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

GNU Image Manipulation Program или GIMP - растровый графический редактор, программа для создания и обработки растровой графики. Частично поддерживается векторная графика.

Краткий обзор возможностей:

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

Таблица 1.1 - Способы реализации операций в GIMP

Вид операций	Реализация в GIMP
Расширяемость	Присутствует. Дистрибутив GIMP включает в себя более 200 расширений. Кроме того, можно подключать внешние модули, которых в Сети насчитывается более 100.
Рисование	Кисть, карандаш, аэрограф, штамп. Все инструменты рисования гибко настраиваются (толщина линий, форма, прозрачность и др.).
Слои	Присутствуют. Кроме того, допускается редактирование отдельных каналов. Есть поддержка альфа-канала.
Текст	Вы можете работать с текстом с помощью стандартного инструмента, а также рисовать художественные эмблемы с помощью специальных сценариев.
Анимация	Присутствует. Вы можете работать с кадрами анимации как с отдельными слоями изображения.
Выделение	Прямоугольник, эллипс, свободное, рассеянное и "разумное" выделение, кривые Безье.
Преобразование	Вращение, масштабирование, наклон и отражение.

Работа с экспозицией	Кривые, гистограмма и традиционные регуляторы. Присутствуют автоматические режимы, позволяющие "улучшать" изображения одним щелчком кнопки мыши.
Откат	Неограниченное количество раз.
Конвертирование RAW	Реализуется с помощью расширений.
Работа со сканером и планшетом	Через драйвера. Стандартно.
Фильтры	Присутствуют. Кроме того, GIMP поддерживает язык Script-Fu, позволяющий создавать новые инструменты на основе группы фильтров. В дистрибутив включено немало готовых сценариев.
Пакетная обработка	Присутствует. Реализуется через пользовательские сценарии.

Разумеется, встает резонный вопрос: а чем же лучше Adobe Photoshop? Рассмотрим основные преимущества платного продукта в таблице 1.2.

Таблица 1.2 - Сравнительная характеристика AdobePhotoshop и GIMP

Функция, присутствующая в AdobePhotoshop	Ситуация в GIMP
Поддержка цветовых профилей	Появится в следующей стабильной ветке 2.4. Нестабильные версии 2.3.x уже имеют поддержку цветовых профилей
Цветовое пространство CMYK	Реализуется с помощью расширения Separate
Инструмент, устраняющий эффект красных глаз	Отсутствует. Необходимо исправлять вручную, выделяя овальную область и понижая в ней яркость красного канала. Впрочем, есть специальное расширение, работающее, однако, крайне примитивно.
Инструмент "Магнитное Лассо", позволяющего производить интеллектуальное выделение БЕЗ нажатия клавиш мыши.	Аналог отсутствует. Можно пользоваться инструментом "Выделение форм", расставляя точки, между которыми программа находит оптимальный путь для выделения.
Инструмент "Восстанавливающая кисть" для удаления мелких дефектов (например, прыщи на лице)	Аналог отсутствует. Приходится довольствоваться инструментом "Штамп".
Мощные плагины, разработанные известными фото-брендами (Kodak, PhaseOne и др.)	Мощность - "субъективный" параметр, но стоит заметить, что разработкой расширений для GIMP крупные компании не занимаются.

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

Приведём краткое описание данных инструментов.

Инструмент «Перемещение»

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

Инструмент «Слои»

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

Инструмент «Кисть»

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

Инструмент «Ластик»

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

Инструмент «Заливка»

«Заливка» выполняет заливку области, близкой по цвету к пикселам, на которых вы щелкаете. Область можно также залить фоновым цветом или узором.

Инструмент «Масштаб»

Инструмент «Масштаб» увеличивает или уменьшает изображение.

Инструмент «TypeTool»

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

1.4 Обоснование выбора

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

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

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

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

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

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

Факторы, влияющие на выбор CMSWordPress.

- Простая установка. Множество хостингов позволяют установить WordPress за один клик (с помощью таких инструментов, как Fantastico), и даже если нет автоматического процесса, то установка по-прежнему является простым процессом. В самом деле, WordPress устанавливается всего за «знаменитые 5 минут».

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

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

- Плагины. Открытый исходный код WordPress означает, что бесчисленные разработчики сделали для нее плагины, которые добавляют новую функциональность. Плагины, такие как Platinum Seo Pack, Word Press Related Posts, Google XML Sitemaps, Akismet и тысячи других облегчают работу и управление wordpress. И если вы считаете, что нужно добавить какой-либо функционал, то нужный плагин скорее всего существует! Это результат многолетней работы разработчиков по всему миру и ставит WordPress впереди всех систем управления контентом.

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

Хотя у wordpress много конкурентов, но ни один не имеет такого уровня разработок в виде плагинов, шаблонов и т.д. Wordpress намного больше, чем просто блог-платформа. Это непревзойденная система управления контентом.

Установив WordPress и добавив туда необходимые плагины -- можно получить все, что угодно -- от каталога сайтов/статей до интернет-магазина.

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

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

Для запуска CMS и PHP скриптов необходимы такие программы, как: Веб-серверApache, PHP4 или PHP5 - для работы с PHP, MySQL-сервер - сервер для работы с базами данных и другие модули. При покупке хостинга с PHP и MySQL, чаще всего все уже установлено и готово к установке CMS и скриптов.

Рассмотрим установку Wordpress на Denwer в тестовом режиме.

Чтобы установить Wordpress на денвер, необходимо:

- Скачать архив с Wordpress;

- создать виртуальный хост. Для этого необходимо зайти в C:\WebServers\home или в Z:\home (все зависит от того, какие папку и букву диска вы выбрали в процессе установки) и создаем в ней папку cms1. Имя папки задаётся любое по желанию, но латинскими буквами. В созданной папке создаём папку с именем www. После создания имеем следующий путь: Z:\home\cms1\www;

- необходимо скопировать все файлы из папки wordpress, которая находилась в архиве, и вставить их в папку Z:\home\cms1\www;

- Перезапускаем Denwer, кликнув по ярлыку RestartDenwer;

- Открываем браузер и вводим localhost. Открылась страница с надписью “Ура, заработало!”, значит денвер работает;

- Необходимо создать базу данных для WordPress. Для работы с БД используется phpMyAdmin, которая уже установлена в денвере.

phpMyAdmin - это бесплатная утилита для управления базами данных MySQL. Под управлением понимается создание, редактирование и удаления базы данных через интерфейс браузера.

Чтобы войти в phpMyAdmin, необходимо опуститься вниз страницы, и кликнуть по ссылке: http://localhost/Tools/phpMyAdmin Проверка MySQL и phpMyAdmin.

Чтобы работать с базами данных нужно создать пользователя MySQL с паролем. По умолчанию в phpMyAdmin в денвере создан пользователь root без пароля. Некоторые CMS требуют чтобы у пользователя MySQL был пароль. Поэтому можно отредактировать уже созданного пользователя либо создать нового. Я создал нового. Пользователь создается один раз и потом его можно использовать для установки других скриптов или CMS, которые работают с MySQL.

Чтобы создать пользователя кликните ссылку Привилегии.

Затем ссылку Добавить нового пользователя.

Затем появится окно создания нового пользователя.

Введите Имя пользователя, пароль (в 2-ух полях) и отметьте все привилегии (ссылка «Отметить все»), нажмите кнопку «Пошел». Запомните пароль и имя, они всегда пригодятся.

Пользователь создан и теперь нужно создать базу данных MySQL для WordPress.

Чтобы создать базу вернитесь на главную страницу phpMyAdmin (http://localhost/Tools/phpMyAdmin/) и там, где «Создать новую БД» введите латинскими буквами имя вашей базы данных и нажмите кнопку «Создать» .

Имя можно выбрать любое. Я ввел имя wp.

БД wp была создана.

- Виртуальный хост с файлами Wordpress и база данных готовы. Теперь приступаем к установке CMS.

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

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

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

Затем жмите кнопку “Запуск инсталляции”. В следующем окне вводите название блога и e-mail. Затем система выдаст вам логин admin и пароль. Запишите пароль. Он нужен для входа в админ панель Wordpress.



2 Информационно-логическая модель

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

Рисунок 2.1 - Главная страница сайта

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



3 Разработка сайта

3.1 Разработка логотипа сайта «ExtremeZone»

Логотип -- оригинальное начертание полного или сокращённого наименования организации или товара. Логотип является словесной частью товарного знака.

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

Для данного сайта был разработан следующий логотип:

Рисунок3.1 - Логотип сайта

Логотип выполнен в оранжевых тонах, в стиле заголовка сайта на «шапке». В основе логотипа круг, и две буквы «E» и «Z», первые буквы названия сайта ExtremeZone. На пересечении букв и круга пустое пространство, что придает логотипу более простой и немного агрессивный вид. В правом верхнем углу изображена фигура человека, отражающая тематику сайта (экстрим). В правом нижнем углу расположен адрес сайта ExtremeZone.by. Логотип разработан в программе AdobePhotoshopCS5.

Порядок создания логотипа:

1) Нарисовали круг произвольного диаметра, цвет заливки - оранжевый.

2) На отдельных слоях написали буквы «E» и «Z» подходящего размера.

3) Расположили буквы относительно круга так, как показано на рисунке.

4) На пересечении букв и круга удаляем части слоев.

5) Объединяем имеющиеся слои.

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

7) Применяем к получившемуся изображению эффект «Тиснение» для придания объема.

8) Под фигурой человека делаем надпись с адресом сайта ExtremeZone.by.

9) К надписи применяем эффект «Тень», для того чтобы она отчетливо смотрелась на любом фоне.

3.2Создание анимированного баннера для сайта

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

Последовательность создания баннера:

1) Создали новый документ размером 468х60 px, в соответствии со стандартами в области создания web-элементов.

2) Чтобы не повторяться оговорим сразу тот момент, что каждый элемент будет создаваться на отдельном слое.

3) Установили фон, на котором будут отображаться необходимые нам надписи.

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

Рисунок 3.2 - Слои текста

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

Рисунок 3.3 - Группы слоев

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

7)

Рисунок 3.4 - Тиснение текста

8) Создание анимации. В меню «Окна» выбираем пункт «Анимация» и в нижней части окна видим панель «Анимация (покадровая)». Создаем необходимое количество кадров и можно приступать непосредственно к их заполнению. Делаем активным первый кадр и на панели слои делаем видимым только один слой - фоновый (он будет видимым всегда). Выделяем следующий кадр и делаем видимым ещё один слой, в данном случае это текст «Не хватает адреналина?». Выделяем третий кадр. Скрываем слой с этим текстом и делаем видимым следующий текст. Эту операцию проделываем с последующими кадрами, где выводится текст. После этого делаем активным очередной кадр и начинаем сдвигать наши ставни. Для этого помимо слоя с фоном делаем видимой группу слоев с практически полностью раздвинутыми ставнями. Далее поочередно вставляем на кадры слои с постепенно приближающимися ставнями до тех пор, пока они не сойдутся в центре баннера. Для этого кадра устанавливаем задержку 5 сек. для того, чтобы подчеркнуть эффект закрытия и не дать тексту преждевременно отобразиться. И наконец, последний кадр, делаем поверх ставней видимым текст EXTREMEZONE.BY и устанавливаем для него задержку около 10 сек. чтобы остановить внимание на адресе сайта перед повторным проигрыванием анимации.

9) Сохранение анимации. Нажимаем «Файл/Сохранить для Web и устройств (100%)» или сочетание клавиш Alt+Shift+Ctrl+S. Увидим следующее окно:

Рисунок 3.5 - Окно сохранения web элемента

Выбираем формат GIF и нажимаем кнопку «Сохранить». Далее как обычно указываем путь и имя для сохранения в открывшемся окне и опять жмем «Сохранить». 

3.3Создание шаблона сайта для WordPress

Для создания шаблона сайта была использована программа Artisteerверсии 2.3.1.

Рисунок 3.6 - Интерфейс Artisteer2.3.1

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

На Рисунке 3.6 представлен интерфейс программы Artisteer и итог создания дизайна сайта.

Коды основных файлов шаблона сайта:

Header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); echo ' - ' ; bloginfo('name'); }

elseif (is_single() ) { single_post_title(); }

elseif (is_page() ) { bloginfo('name'); echo ': '; single_post_title(); }

else { wp_title('',true); } ?></title>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->

<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->

<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>

</head>

<body>

<div id="art-main">