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

Дипломная работа

Сайт "Мир Фэнтези в литературе"

Реферат

Ключевые слова: web-сайт, сайт о фэнтези, литература, дизайн, верстка, программирование, система управления содержимым, Joomla!, юзабилити.

Целью работы является создание сайта "Мир Фэнтези в литературе", реализация верстки на основе разработанного оригинального дизайна, программирования.

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

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

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

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

· Adobe Dreamweaver CS3. В данной среде разработки были созданы скриптовые документы, написанные на языках программирования JavaScript, PHP 5, а так же CSS файлы;

· Набор серверных утилит XAMPP, с помощью которых производилась работа над сайтом на домашнем сервере localhost;

· СУБД MySQL 5. В этой среде были проведены работы по созданию баз данных типа MyISAM;

· Notepad++. Данный текстовый редактор использовался для быстрой корректировки кода при проектировании сайта;

· Mindjet MindManager Pro. В этой среде создавалась структура сайта, создаваемого на основе системы управления содержимым Joomla!, с указанием необходимых разделов, категорий и расширений Joomla!

· Браузеры Internet Explorer 7, Opera 8, Mozilla Firefox 2.0.0.3 были привлечены для проверки и контроля корректности написания кодов и верстки сайта;

· Для редактирования текста пояснительной записки и проверки его синтаксиса использовался Microsoft Word 2007.

Оглавление

Введение

1. Предпроектный анализ

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

2. Дизайн и юзабилити - тестирование сайта

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

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

3.1 Описание макета сайта

3.2 Верстка шаблона сайта

3.3 Подготовка шаблона для использования CMS Joomla!

4. Разработка и реализация программного компонента

4.1 Система управления содержимым Joomla!

5. Запуск и сопровождение

5.1 Выбор хостинга для размещения сайта

5.2 Перенос сайта на сервер

5.3 Сопровождение сайта

Заключение

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

Приложения

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Предпроектный анализ

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

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

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

1. Создать сайт на собственной системе управления содержимым CMS.

2. Создать сайт на бесплатной системе управления содержимым CMS.

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

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

Поскольку создание собственной работоспособной CMS предоставленного времени для разработки проекта не достаточно, данный проект будет создан на бесплатной системе управления содержимым Joomla!

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

· люди, интересующиеся фэнтези;

· люди, интересующиеся литературой в целом.

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

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

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

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

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

· PHP 5;

· MySQL 5;

· HTML;

· CSS;

· ХML;

· CMS Joomla!

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

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

Разделы сайта:

1. Главная;

2. О фэнтези:

· История;

· Жанры;

· Премии;

3. Авторы;

4. Галереи;

5. Форум;

6. Контакты.

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

Основная навигация:

1. Главная;

2. О фэнтези:

3. Авторы;

4. Галереи;

5. Форум;

6. Контакты.

Навигация "О Фэнтези":

1. История;

2. Жанры;

3. Премии.

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

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

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

Раздел "Авторы" даст информацию об авторах жанра фэнтези, их биографии и произведениях.

Раздел "Галереи" будет содержать галереи картинок к различным произведениям жанра фэнтези, таким как "Властелин Колец" Дж. Р.Р. Толкина и д.р.

Раздел "Форум" содержит форум для общения и обсуждения различных произведений авторов и т.п.

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

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

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

Для поиска вышеуказанных сайтов необходимо создать запрос в нескольких популярных поисковых системах. Для наиболее эффективного ответа на запрос было определено несколько словосочетаний, которые наиболее четко и исчерпывающе характеризуют суть моего поискового запроса. Такими словосочетаниями являются: "фэнтези", "авторы фэнтези". Данные запросы производились в поисковых системах "yandex.ru", "google.ru". Для реализации поисковых запросов в иностранных поисковиках (в данном случае "google.com"), использованными словами были "fantasy".

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

Следующие сайты рассматриваются как конкуренты:

1. Citadel of Olmer, http://www.olmer.ru;

2. Лаборатория Фантастики, http://www.fantlab.ru;

3. Fantasy, http://www.fantasy.open.by;

4. Миры Фэнтези, http://www.fantasy-worlds.ru;

5. The SF Site, http://www.sfsite.com;

6. "Фензин" - сайт о фантастике и фэнтези, http://www.fenzin.org;

7. Русская фантастика, http://www.rusf.ru.

Рассмотрим сайт "Citadel of Olmer" http://www.olmer.ru (Рисунок 1.1).

Рисунок 1.1 - Сайт "Citadel of Olmer"

Первое что бросается в глаза - это несколько различных меню. Все ссылки открываются в новых окнах. Меню "Fantasy портал" и "Писатели" имеют ссылки на сайты различных клубов любителей фэнтези и писателей.

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

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

Совсем другую ситуацию мы видим на сайте "Лаборатория Фантастики" http://www.fantlab.ru (Рисунок 1.2). Сайт содержит очень много информации о фэнтези и фантастики.



Рисунок 1.2 - Сайт "Лаборатория Фантастики"

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

Главное меню на данном сайте сливается со всеми остальными элементами сайта.

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

Рассмотрим сайт "Fantasy" http://www.fantasy.open.by (Рисунок 1.3). Это белорусский сайт о фэнтези.

Дизайн седлан так, что все содержимое сайта прижимается к правому краю. Однако при расширении экрана 1280х 1024рх и более левая половина экрана свободна (как видно из рисунка 1.3). Размер шрифта пунктов меню довольно маленький (около 6 рх), что не удобно для чтения.



Рисунок 1.3 - Сайт "Fantasy"

Форум на данном сайте выполнен как гостевая книга: имеется форма для сообщений и отправленные сообщения размещаются друг под другом (Рисунок 1.4).

Рисунок 1.4 - Форум сайта "Fantasy"

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

Сайт "Миры Фэнтези" http://www.fantasy-worlds.ru сделан довольно удобно (Рисунок 1.5). Дизайн не навязчивый и не агрессивный. Имеются блоки, отображающие случайное изображение, случайную книгу.



Рисунок 1.5 - Сайт "Миры Фэнтези"

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

При расширении экрана 1024х 768рх появляется горизонтальная прокрутка.

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

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

Сайт "The SF Site" http://www.sfsite.com - это англоязычный ресурс о фэнтези (Рисунок 1.6). Содержит много информации об авторах жанра фэнтези и их произведениях.



Рисунок 1.6 - Сайт "The SF Site"

Дизайн сайта выполнен в стиле HTMинимаLизм (HTMinimaLizm School).

Главная страница переполнена материалом, который распологается в две колонки и имеет вертикальную длину главной страницы больше трех экранов

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

Сайт о фантастике и фэнтези - "Фензин", http://www.fenzin.org сделан довольно удобно (Рисунок 1.7). Дизайн не навязчивый и не агрессивный.



Рисунок 1.7 - Сайт "Фензин"

В разделе "Новинки книжного рынка" выводится реклама от Google. Раздел "Совет недели" последний раз обновлялся 05.02.2007, "Новинки библиотеки" - 09.12.2008.

На сайте содержится много рекламы далекой по тематике от тематики сайта. На некоторых страницах такая реклама появляется под разделителем "Сейчас на сайте".

Вертикальная длина главной страницы больше трех экранов.

Сайт "Русская фантастика" http://www.rusf.ru (Рисунок 1.8).

Дизайн данного сайта выполнен в стиле HTMинимаLизм (HTMinimaLizm School).

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

Блок "Писатели" содержит ссылки на сайты авторов. Блок "Разделы" так же включает в себя ссылки на внешние сайты.



Рисунок 1.8 - Сайт "Русская фантастика"

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

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

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

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

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

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

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

· соблюдение "единого стиля" сайта;

· баланс "главного" и "второстепенного" на странице;

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

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

2. Дизайн и юзабилити - тестирование сайта

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

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

1 - блок навигации по сайту; 2 - блок поиска; 3 - "шапка" страницы; 4 - блок вывода меню; 5 - блок вывода формы авторизации; 6 - блок основного контента; 7 - блок вывода последних книг; 8 - блок вывода популярных книг; 9 - "футер" страницы для служебной информации

Рисунок 2.1 - Макет страницы сайта

В "шапке" страницы располагается иллюстрация дракона и замка.

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

· Основное меню.

· Меню "О фэнтези".

Блок вывода формы авторизации содержит:

· Блок самой формы авторизации.

· Блок внутренней почты - для авторизированных пользователей.

· Блок "Сейчас на сайте" - для авторизированных пользователей.

· Блок "Все пользователи" - для авторизированных пользователей.

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

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

Блок вывода популярных книг содержит пронумерованный список ссылок на страницы самых посещаемых книг на сайте.

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

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

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

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

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

На сайте будут присутствовать два основных цвета: цвет для фона страницы и цвет для заднего плана.

Цветом фона страницы выбран бежевый цвет. Бежевый цвет - светло-коричневый цвет, с кремовым (желтоватым) или сероватым оттенком.

Цветом заднего плана выбран темно-коричневый цвет.

Традиционно коричневый цвет считался сильным и энергичным, однако, не настолько сильным, как черный, красный или белый. Коричневый цвет считается более неформальным, чем черный или красный.

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

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

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

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

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

· Adobe Photoshop CS3. Один из самых популярных и профессиональных редакторов для работы с графикой. С помощью этого пакета изменялись параметры изображений. Выполнялась их обрезка; убирались дефекты изображения, компоновка макета сайта.

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

Одним из важнейших элементов на странице является шапка сайта.

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

Рисунок 2.2 - Изображение замка



Рисунок 2.3 - Изображение дракона

Работа над шапкой производилась средствами приложения Adobe Photoshop CS3. Создание шапки осуществляется компоновкой двух изображений. Поскольку основной цвет станиц сайта бежевый, то шапка будет выполнена в коричневом цвете. Это осуществляется наложением на изображения слоя залитого коричнего цвета с режимом наложения слоя Hue.

Готовая шапка сайта представлена на рисунке 2.4

Рисунок 2.4 - Готовая шапка сайта

Кроме шапки сайта необходимо еще создать изображение для фона названий блоков средствами приложения Adobe Photoshop CS3 (Рисунок 2.4).

Рисунок 2.5 - Фон для названий блоков сайта

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

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

Так, при правильном использовании шрифтов и безупречной верстке, можно водить пользователя по сайту и подсознательно заставлять его углубляться все дальше и дальше в проект. В шрифте должны сочетаться два аспекта: эстетический и его удобочитаемость [1].

В нашем случае используется три шрифта (нужно сказать, что это максимально допустимое количество в рамках одного сайта):

· Фирменный шрифт - SkazkaForSergeMedium. Используется в логотипе, отображающем название сайта. Поскольку это шрифт не имеет широкого распространения на сайте он будет представлен виде картинки (Рисунок 2.6). Его присутствие на сайте необходимо, так как такие элементы придают особую атмосферу сайту.

Рисунок 2.6 - Шрифт названия сайта

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

· Tahoma - шрифт без засечек, схож с Arial и Helvetica, но чуть уже. Строгий, но в тоже время мягкий шрифт, прекрасно подходит для оформления текста. Используется для оформления названий блоков сайта.

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

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

3.1 Описание макета сайта

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

На всех страницах сайта, кроме форума меняется только информация в блоке основного контента (Приложение А, рисунок А.1).

Таким образом, все страницы дополняются текстовым содержимым по тематике открытой страницы, графическими объектами, галереей (Приложение А, рисунок А.2). На странице форума отсутствуют блоки вывода последних книг и популярных книг (Приложение А, рисунок А.3).

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

3.2 Верстка шаблона сайта

Шаблон Joomla! содержит некоторый набор файлов и директорий. Шаблоны должны быть размещены в директории /templates/ установленного дистрибутива Joomla!, каждый в собственной поддиректории.

Внутри директории шаблона находятся два ключевых файла:

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

· второй файл - это основной движок шаблона - index.php - этот файл является самым важным. Он определяет визуальное расположение элементов сайта и сообщает Joomla! CMS, куда поместить различные компоненты и модули. Этот файл является комбинацией PHP и (X)HTML.

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

/css/template.css - таблица стилей шаблона. Название директории устанавливается произвольно, но вы должны указать, путь к этому файлу в index.php.

/images/logo.png - любые изображения, включенные в шаблон. [2]

Первым делом создаем файл index.php.

В данном проекте используется "фиксированная" верстка. При "фиксированной" верстке, макет создается на основе тегов <div> с конкретной шириной. Выбор ширины зависит от того, на какое разрешение, настроенное на мониторе пользователя ориентируются разработчики. В данном случае - это 1024 пикселей. При разрешении выше указанного, то может создать ощущения пустого пространства, в данном случае этот недостаток компенсируется подложкой выполненной в виде графической композиции, которая так же является частью макета.

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

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

Ниже приведен код каркаса макета сайта.

<body>

<div id="header">

В данном <div>'е будет находиться шапка сайта.

</div>

<div id="content">

<div id="leftcolumn">

Данный <div> образует левую колонку.

</div>

<div id="maincolumn">

Данный <div> образует центральную колонку.

</div>

<div id="rightcolumn" style="float:right;">

Данный <div> образует правую колонку.

</div>

</div>

<div id="footer">

В данном <div>'е будет находиться "футер".

</div>

</body>

К этим основным <div>'ам будут добавляться и другие <div>'ы для правильного размещения всех элементов дизайна макета.

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

После создания файлов index.php и template.css, размещения всех необходимых изображений в директории images приступаем к созданию XML-файла templateDetails.xml. он будет выглядеть следующим образом:

<?xml version="1.0" encoding="utf-8"?>

<install version="1.5" type="template">

<name>TEMPLATE </name>

<description>TEMPLATE_DESCRIPTION</description>

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>params.ini</filename>

<filename>images/button_bg.jpg</filename>

<filename>images/content.jpg</filename>

<filename>images/content_bottom.jpg</filename>

<filename>images/h3.jpg</filename>

<filename>images/header.jpg</filename>

<filename>images/headerbottom.jpg</filename>

<filename>images/headerimg.jpg</filename>

<filename>images/headertop.jpg</filename>

<filename>images/menu_li.jpg</filename>

<filename>images/menu_row.jpg</filename>

<filename>images/search_field.jpg</filename>

<filename>images/searchbut.jpg</filename>

<filename>images/spacer.png</filename>

<filename>images/submenu_row.jpg</filename>

<filename>images/top_with_search.jpg</filename>

<filename>images/bottom_left.jpg</filename>

<filename>images/bottom_right.jpg</filename>

<filename>images/logo.png</filename>

<filename>css/index.html</filename>

<filename>css/template.css</filename>

<filename>css/editor.css</filename>

</files>

</install>

3.3 Подготовка шаблона для использования CMS Joomla!

Для корректного отображения шаблона в Joomla! необходимо в файл index.php прописать специальные инструкции Joomla!

В самом начале файла index.php прописывается строка:

<?php defined('_JEXEC') or die('Restricted access'); ?>

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

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

Инструкции Joomla выглядят следующим образом:

<jdoc:include type="тип" [name="имя"] [style="стиль"] />

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

type="head" - добавляет вывод методанных, т.е. заголовков страницы, описание страницы, ключевых слов и т.д. Инструкция с данным типом распологается между тегами <head> </head>

type="modules" - выводит модули Joomla!, данный тип используется с атрибутом name="имя". Атрибут name="имя" может принимать различные значения (left, top, right, user) и определяет место вывода модуля.

type="component" - выводит компонент. Какой компонент будет использован, будет определяться ссылкой в меню.

type="message" - вывод warning сообщения.

type="module" name="breadcrumbs" - вывод модуля Навигатор сайта. [3]

Полный код макетной страницы приведен в приложении Б.

4. Разработка и реализация программного компонента

4.1 Система управления содержимым Joomla!

Joomla! (произносится "Джуммла") - система управления содержимым (англ. Content management system, CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базу данных MySQL. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.

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

Joomla! позволяет отображать интерфейс фронтальной и административной части на любом языке. Каталог расширений содержит множество языковых пакетов, которые устанавливаются штатными средствами администрирования. Доступны пакеты русского, украинского и ещё некоторых языков стран СНГ.

Основные возможности:

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

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

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

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

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

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

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

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

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

- Настраиваемые схемы расположения элементов по областям шаблона;

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

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

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

- Иерархия объектов;

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

- Встроенный визуальный редактор TinyMCE;

- ЧПУ - "человекопонятный URL";

- Около 4000 готовых модулей и компонентов. [4]

Создание сайта на базе Joomla!

Создание сайта на базе Joomla начинается с установки самой Joomla в директорию сайта. При установке на локальный компьютер необходимо наличие веб-сервера. При работе над данным проектом использовался пакет с веб-сервером XAMPP. Установка Joomla! включает загрузку файлов свежей версии Joomla! в директорию сайта. Дальнейшая установка происходит с помощью браузера. При вводе в адресную строку пути к сайту открывается Мастер установки Joomla. Не посредственно перед началом установки необходимо создать базу данных. Для создания базы данных использовали phpMyAdmin.

При входе в администраторскую зону открывается страница, содержащая главное меню администратора (Рисунок 4.1).

Рисунок 4.1 - Главная страница администраторской зоны

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

Имеющиеся элементы администрирования CMS позволяют управлять содержимым сайта и произвести настройку Joomla! без необходимости в изучении программирования и изменения исходного кода системы.

Изначально панель управления администратора доступна лишь суперадминистратору проекта. Только суперадминистратор проекта вправе назначать и предоставлять соответствующие права для других пользователей системы. Всего в Joomla! заложено восемь пользовательских групп (Таблица 4.1). [5]

Таблица 4.1 - Пользовательские группы Joomla!
Группы пользователей	Публичная часть	Панель управления
Посетитель	Только просмотр	Нет доступа
Зарегистрированный пользователь	Просмотр и доступ к различным частям и функциям сайта	Нет доступа
Автор	Все вышеперечисленные действия и создание публикаций	Нет доступа
Редактор	Все вышеперечисленные действия и редакция публикаций	Нет доступа
Публикатор	Все вышеперечисленные действия и публикация материалов	Нет доступа
Менеджер	Все вышеперечисленные действия	Медиа-менеджер, Менеджер меню, Менеджер материалов, Главная страница, Менеджер компонентов и Помощь
Администратор	Все вышеперечисленные действия	Все вышеперечисленные менеджеры и Менеджер пользователей, Установка и удаление расширений, Менеджеры модулей и плагинов, а также глобальные настройки системы
Суперадминистратор	Все вышеперечисленные действия	Все без исключения функции администратор управления системой

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

Рисунок 4.2 - Вкладка Установить/удалить

Эта вкладка будет использоваться постоянно при необходимости установки каких-либо расширений.

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

Следующим этапом создания сайта будет наполнение его контентом и создание меню.

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

* Меню - эта команда открывает страницу менеджера меню, через которую и происходит управление всеми типами меню, имеющимися в CMS (Рисунок 4.3).

* Корзина меню - мусорная корзина. Если вы удалили одну из команд меню случайно или намеренно, то с помощью этой команды сможете восстановить любой из удаленных пунктов меню;

* Далее следует перечисление созданных меню.

Рисунок 4.3 - Менеджер меню

Как видно из структуры сайта (п.1.2) на данном сайте будет два меню:

- Главное;

- О фэнтези.

При создании пунктов меню необходимо выбирать тип меню. Типы меню в Joomla!:

1. Внутренняя ссылка:

· Материалы;

· Контакты;

· Ленты новостей;

· Голосования;

· Поиск;

· Пользователь;

· Вэб-ссылки;

· Враппер;

2. Внешняя ссылка;

3. Разделитель;

4. Псевдоним.

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

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

Joomla! также декларирует определенную схему хранения и представления всех материалов на сайте. Так, все материалы, публикуемые на сайте, должны принадлежать одной из категорий. В свою очередь, категории располагаются исключительно в разделах. В итоге мы имеем своеобразную цепочку Раздел Категория Материал. Прежде чем создать статью, вы должны сначала создать отдельный раздел с помощью Менеджера разделов, затем в этом разделе создать отдельную категорию используя Менеджер категорий, и только потом можно создавать статью в этой категории.

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

Рисунок 4.3 - Менеджер главной страницы

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

В Менеджере разделов создаем один раздел "Главный". В данном разделе создадим три категории:

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

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

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

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

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

Для создания пунктов меню "Галереи", "Форум", "Контакты", блоков "Новинки", "Популярное", создания системы регистрации используются расширения Joomla!

Расширения Joomla!

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

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

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

Joomla! имеет несколько встроенных компонентов. Это компоненты Баннер, Контакты, Ленты новостей, Голосование, Поиск и Каталог ссылок.

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

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

Плагины - это программный код, выполняющий определенные низкоуровневые функции в системе. В первых выпусках Joomla! имелись так называемые мамботы. В выпуске Joomla! 1.5 все мамботы были переименованы в плагины, поскольку подход в реализации мамботов был несколько видоизменен. [5]

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

Внутренние расширения:

1. компонент - Поиск;

2. компонент - Контакты (форма обратной связи);

3. модуль - Последние новости - блок "Популярное";

4. модуль - Самые читаемые - блок "Новинки".

Внешние расширения:

1. компонент - галерея MorfeoShow - позволяет создавать галереи картинок;

2. плагин - MorfeoShow -данный плагин позволяет указать место вывода галерей;

3. компонент - авторизация Community Builder - создает систеиу регистрации пользователей;

4. плагин - CD Captcha - защита от спама;

5. модуль - CD Login - выводит блок регистрации/входа;

6. модуль - ComprofilerOnline - показывает пользователей, которые находятся online;

7. компонент - uddelM - личные сообщения;

8. модуль - uddelM Notifier - модуль оповещения о новых сообщениях

9. модуль - uddelM Mailbox - модуль личного почтового ящика, отображает в блоке папки: Входящие, Исходящие, Корзина и т.д.;

10. плагин - uddelM Inbox - добавляет в профиль новый блок "Входящие"

11. компонент - форум Fireboard;

12. плагин - Discussbot - обсуждение статей;

Все внешние расширения устанавливаются через Расширения>Установить/Удалить.

Все расширения Joomla! содержат подробные инструкции и пояснения по их использованию.

5. Запуск и сопровождение

5.1 Выбор хостинга для размещения сайта

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

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

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

Также можно разделить услуги хостинга по типу предоставляемого ресурса:

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

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

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

· колокация (Collocation) - предоставление места в датацентре провайдера для оборудования клиента (обычно путем монтажа в стойке) и подключение его к интернету. [6]

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

Таблица 5.1 - Сравнение хостинг-провайдеров
	Компания "Активные технологии"	PAGE.by	NA.BY
Условия предоставления	Избранные компанией сайты	Статичные сайты в формате HTML	Разместить на своем сайте два блока текстовой рекламы посредством добавления html-кода на страницы сайта
Домен	зоны.by, .com, .net	name.page.by	зоны.ru, .com, .biz, .org, .net или.info
поддержка PHP, Perl, MySQL, настройка Apache	+	-	+
Дисковое пространство	>100 Mb	10 Мb	100 Mb

Как видно из представленной таблицы 5.1 хостинг-провайдеров позволяющих бесплатное размещение сайта с поддержкой PHP, MySQL не много. На данном этапе выбирается хостинг провайдера NA.BY с зоной.com.

5.2 Перенос сайта на сервер

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

1) логин, пароль к ftp - чтобы закачать файлы на сервер;

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

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

Во-первых, копируем весь наш сайт на сервер:

Далее запускаем XAMPP ищем свою базу данных, которая стоит на вашем сайте с помощью phpmyadmin (http://localhost/Tools/phpMyAdmin/).

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

Нажимаем на вкладку Экспорт. Там нам нужен только Экспорт (Рисунок 5.1).

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

Чтобы Joomla смогла подключиться к базе данных необходимо открыть файл файл configuration.php (который находится в корне сайта).

В данном файле надо будет поменять следующие параметры:

var $log_path = ''; - путь до места хранения логов Joomla.

var $tmp_path = ''; - путь до места хранения временных файлов Joomla.

var $live_site = ''; - путь до самого сайта.

var $host = 'localhost'; - название вашего хоста (чаще всего localhost).

var $user = ''; - имя пользователя который имеет права что-либо делать с вашей базой данных.

var $db = ''; - имя базы данных в которой хранится информация вашего сайта.

Рисунок 5.1 Вкладка Экспорт в phpmyadmin

var $password = ''; - пароль пользователя который имеет права что-либо делать с вашей базой данных.

Последнее что необходимо это выставить правильные права к папкам (chmod 777).

5.3 Сопровождение сайта

Сопровождение сайта состоит из следующих моментов:

1. регистрации сервера в основных поисковиках;

2. планирование и проведение рекламных и маркетинговых мероприятий;

3. раскрутка, продвижение сайта;

...