Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Министерство образования Республики Беларусь
Учреждение Образования «Белорусский государственный университет
информатики и радиоэлектроники»
Факультет: телекоммуникаций
Кафедра: сетей и устройств телекоммуникаций
Дисциплина: объектно-ориентированное программирование
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
к курсовой работе на тему:
«Разработка Web-приложения на CMS Joomla “Рок музыка“»
Студент: гр. 360801 Белан В.А.
Руководитель: Макейчик Екатерина Геннадьевна
Минск, 2014
СОДЕРЖАНИЕ
ВВЕДЕНИЕ
1 ОПИСАНИЕ СРЕДЫ РАЗРАБОТКИ 5
1.1 Локальный сервер «Денвер» 5
1.2 Система управления содержимым 9
1.3 Описание CMS JOOMLA 10
2 РАЗРАБОТКА WEB-САЙТА 13
2.1 Установа Denwer 13
2.2 Создание базы данных 14
2.3 Установка CMS Joomla 14
2.4 Установка нового шаблона 17
2.5 Создание категорий 20
2.6 Создание материалов 22
2.7 Создание меню 25
2.8 Работа с плагинами и компонентами 29
2.9 Создание и устоновка Favicon 37
ЗАКЛЮЧЕНИЕ 39
СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ 40
Приложение А Index.php 41
Приложение Б Themes.css 42
Приложение В Template.js 48
ВВЕДЕНИЕ
Веб-приложение представляет собой пользовательскую программу, основная часть которой содержится на удаленном сервере, а пользовательский интерфейс (UI) отображается в браузере в виде веб-страниц.
По своей сути запуск веб-приложения ничем не отличается от загрузки обычной веб-страницы: вводим ссылку в браузер – и оно перед нами, точнее, верхняя часть айсберга, которой является интерфейс пользователя. В этом есть несколько плюсов. Первый из них – это то, что само по себе приложение абсолютно не зависит от того, какая операционная система установлена на компьютере пользователя, то есть оно, по сути, является кросс-платформенным. Однако есть здесь и один момент, который может создать некоторые трудности при работе с веб-приложениями – это различные реализации некоторых спецификаций в браузерах, а также возможность настраивать разные параметры вроде отображения шрифтов, что может привести к некорректной работе некоторых приложений. Но стоит отметить, что данный минус хотя и имеет место, но сколь либо существенного влияния на работу большинства веб-приложений он не оказывает.
Вторым плюсом веб-приложений можно назвать то, что сам факт их существования полностью меняет способ распространения продукта. Здесь создатели отходят от традиционных способов распространения программных продуктов путем продажи копий и установки их на каждый компьютер пользователей. Теперь все гораздо проще: единственная версия приложения расположена на сервере, а все пользователи имеют доступ к ней, вернее, к ее пользовательскому интерфейсу из любого места в мире. Из любого, где есть Интернет. При этом пользователю даже не нужно устанавливать новую версию приложения – сразу после своего появления она доступна всем, причем многие могут и не заметить каких-либо изменений, тем более если эти изменения не касаются внешнего вида интерфейса. Во всем этом явно виден и положительный момент для разработчиков – им не нужно заботиться о совместимости версий своих приложений, поскольку все пользователи единовременно получают доступ и работают с самой последней версией приложения.
Третьим плюсом для пользователя мы назовем то, что ему нет необходимости устанавливать и настраивать программное обеспечение – все уже установлено на серверах и настроено разработчиками. Все, что требуется от пользователя, это изменить на свой вкус несколько ключевых параметров. Это весьма приятно для пользователей, поскольку большинство не любит возиться с настройками и предпочитает программные продукты, полностью готовые к использованию сразу после их инсталляции, хотя есть и такие, которые предпочитают полностью настроить программу под свой вкус и нужды. Однако в случае веб-приложений мы избавлены даже от процесса инсталляции.
Четвертым плюсом можно назвать то, что для работы с приложением от пользователя, по большому счету, ничего и не нужно. Разве что компьютер и установленный браузер. Но тут проблем нет – Интернет-браузер уже имеется в любой операционной системе, и для доступа к необходимому веб-приложению достаточно просто загрузить его URL в браузер. Использование веб-приложений во многом снимает ограничения, накладываемые на аппаратную часть компьютера. То есть определенные системные требования к ПК все же есть, но их уровень автоматически достигнут компьютером, раз на нем уже запущены ОС и браузер.
Следующий положительный момент веб-приложений касается их разработчиков. Ввиду того, что основная часть веб-приложения сконцентрирована на сервере в одном месте, куда проще заниматься его настройкой, не нужно содержать огромные команды специалистов технической поддержки, занимающихся консультациями пользователей и настройкой приложения на компьютерах во всем мире. Это гораздо менее затратно в финансовом плане и куда более эффективно. При этом пользователю невидима архитектура приложения, в любой момент можно добавить любое количество серверов, на которых установлена основная составляющая приложения, добавить вычислительные мощности, и пользователь этого даже не заметит.
Таким образом, что веб-приложения имеют большое количество плюсов при отсутствии видимых минусов, самым большим и очевидным из которых является невозможность использования приложений при отсутствии доступа к Всемирной паутине.
1 ОПИСАНИЕ СРЕДЫ РАЗРАБОТКИ
1.1 Локальный сервер «Денвер»
Денвер (от сокр. Д.н.w.р или ДНВР – джентльменский набор Web-разработчика) – набор дистрибутивов и программная оболочка, предназначенные для создания, а также отладки сайтов (веб-приложений, прочего динамического содержимого интернет-страниц) на локальном ПК (без необходимости подключения к сети Интернет) под управлением ОС Windows [1]. Полностью рабочий веб-сервер Apache, работающий на локальном компьютере, на котором может работать неограниченное количество сайтов, что очень эффективно для разработки и отладки сценариев PHP без загрузки его файлов на удаленный сервер, будет доступен после установки программы Денвер, завершение установки приведено на рисунке 1.
Рисунок 1 – Экран подтверждения установки программы «Денвер»
Денвер помимо Apache оснащен следующими компонентами: система управления реляционными базами данных MySQL 5.5, интерпретатор языка программирования PHP 5.3.13 с набором широко используемых библиотек, а также систему администрирования СУБД MySQL – phpMyAdmin.
Apache HTTP-сервер – свободный веб-сервер. Apache является кроссплатформенным ПО, поддерживает операционные системы Linux, BSD, Mac OS, Microsoft Windows, Novell NetWare, BeOS. Ядро Apache включает в себя основные функциональные возможности, такие как обработка конфигурационных файлов, протокол HTTP и система загрузки модулей. Ядро (в отличие от модулей) полностью разрабатывается Apache Software Foundation, без участия сторонних программистов.
Основными достоинствами Apache считаются надежность и гибкость конфигурации. Он позволяет подключать внешние модули для предоставления данных, использовать СУБД для аутентификации пользователей, модифицировать сообщения об ошибках и т. д.
Система конфигурации Apache основана на текстовых конфигурационных файлах. Имеет три условных уровня конфигурации:
- конфигурация сервера (httpd.conf);
- конфигурация виртуального хоста (httpd.conf c версии 2.2, extra/httpd-vhosts.conf);
- конфигурация уровня директории (.htaccess).
Имеет собственный язык конфигурационных файлов, основанный на блоках директив. Практически все параметры ядра могут быть изменены через конфигурационные файлы, вплоть до управления MPM. Большая часть модулей имеет собственные параметры.
Часть модулей использует в своей работе конфигурационные файлы операционной системы (например /etc/passwd и /etc/hosts).
Помимо этого, параметры могут быть заданы через ключи командной строки.
Apache HTTP Server поддерживает модульность. Существует более 500 модулей, выполняющих различные функции. Часть из них разрабатывается командой Apache Software Foundation, но основное количество – отдельными open source - разработчиками.
Модули могут быть как включены в состав сервера в момент компиляции, так и загружены динамически, через директивы конфигурационного файла.
В модулях реализуются такие вещи, как:
- поддержка языков программирования;
- добавление функций;
- исправление ошибок или модификация основных функций;
- усиление безопасности.
Apache имеет встроенный механизм виртуальных хостов. Он позволяет полноценно обслуживать на одном IP-адресе множество сайтов (доменных имён), отображая для каждого из них собственное содержимое.
Для каждого виртуального хоста можно указать собственные настройки ядра и модулей, ограничить доступ ко всему сайту или отдельным файлам. Некоторые MPM, например Apache-ITK позволяют запускать процесс httpd для каждого виртуального хоста с отдельными идентификаторами uid и guid.
Apache имеет различные механизмы обеспечения безопасности и разграничения доступа к данным. Основными являются:
- ограничение доступа к определённым директориям или файлам;
- механизм авторизации пользователей для доступа к директории на основе HTTP-аутентификации (mod_auth_basic) и digest-аутентификации (mod_auth_digest);
- ограничение доступа к определённым директориям или всему серверу, основанное на IP-адресах пользователей;
- запрет доступа к определённым типам файлов для всех или части пользователей, например запрет доступа к конфигурационным файлам и файлам баз данных;
- существуют модули, реализующие авторизацию через СУБД или PAM.
К недостаткам обычно относят относительно меньшую производительность по сравнению с конкурентами и повышенную требовательность к аппаратным ресурсам.
MySQL – свободная реляционная система управления базами данных. Разработку и поддержку MySQL осуществляет корпорация Oracle. Разработчики создают функциональность по заказу лицензионных пользователей, именно благодаря такому заказу почти в самых ранних версиях появился механизм репликации [2].
MySQL является решением для малых и средних приложений. Входит в состав серверов WAMP, AppServ, LAMP и в портативные сборки серверов Денвер, XAMPP. Обычно MySQL используется в качестве сервера, к которому обращаются локальные или удалённые клиенты, однако в дистрибутив входит библиотека внутреннего сервера, позволяющая включать MySQL в автономные программы.
Гибкость СУБД MySQL обеспечивается поддержкой большого количества типов таблиц: пользователи могут выбрать как таблицы типа MyISAM, поддерживающие полнотекстовый поиск, так и таблицы InnoDB, поддерживающие транзакции на уровне отдельных записей. Более того, СУБД MySQL поставляется со специальным типом таблиц EXAMPLE, демонстрирующим принципы создания новых типов таблиц. Благодаря открытой архитектуре и GPL-лицензированию, в СУБД MySQL постоянно появляются новые типы таблиц.
Достоинства пакета MySQL заключается в следующем: - MySQL – бесплатная СУБД, что отличает ее от других дорогостоящих продуктов;
- многопоточность: поддержка нескольких одновременных запросов;
- оптимизация связей с присоединением многих данных за один проход;
- записи фиксированной и переменной длины;
- ODBC драйвер в комплекте с исходным кодом;
- гибкая система привилегий и паролей;
- до 16 ключей в таблице, каждый ключ может иметь до 15 полей;
- поддержка ключевых полей и специальных полей в операторе CREATE;
- поддержка чисел длинной от 1 до 4 байт (ints, float, double, fixed), строк переменной длины и меток времени;
- интерфейс с языками C и Perl;
- основанная на потоках, быстрая система памяти;
- утилита проверки и ремонта таблицы (isamchk);
- все данные хранятся в формате ISO8859_1;
- все операции работы со строками не обращают внимания на регистр символов в обрабатываемых строках;
- псевдонимы применимы как к таблицам, так и к отдельным колонкам в таблице;
- все поля имеют значение по умолчанию. INSERT можно использовать на любом подмножестве полей;
- легкость управления таблицей, включая добавление и удаление ключей и полей.
К недостаткам можно отнести низкую производительность при высоких нагрузках, неполную совместимость с SQL.
PHP – скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов [3].
К достоинствам PHP можно отнести:
- широкая распространенность;
- большой набор встроенных средств для разработки веб-приложений;
- большое число дополнительных модулей.
К недостаткам относятся:
- несогласованный синтаксис функций;
- отсутствие обратной совместимости между версиями языка;
- отсутствие поддержки многобайтовых кодировок в ядре языка;
- отсутствие поддержки многопоточности.
1.2 Система управления содержимым
Система управления содержимым (контентом) (англ. Content management system, CMS) – информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым).
Основные функции CMS:- - предоставление инструментов для создания содержимого, организация совместной работы над содержимым;
- управление содержимым: хранение, контроль версий, соблюдение режима доступа, управление потоком документов;
- представление информации в виде, удобном для навигации, поиска.
В системе управления содержимым могут находиться самые различные данные: документы, фильмы, фотографии, номера телефонов, научные данные и так далее. Такая система часто используется для хранения, управления, пересмотра и публикации документации. Контроль версий является одним из основных её преимуществ, когда содержимое изменяется группой лиц.
Главная функция CMS – показывать страницы сайта пользователям, формируя их содержимое «на лету» из заранее определенных шаблонов с дизайном и контента, то есть текстов, картинок, таблиц и других материалов, которые хранятся в базе данных.
CMS создает страницу пользователю в момент его запроса. При этом, в зависимости от ситуации, пользователю может быть показана какая-то уникальная информация, которая больше никому и никогда не будет видна. Например, содержимое его корзины в интернет-магазине. Эту работу и делает CMS, или «движок сайта». При этом CMS не просто генерирует страницы пользователям, а пытается сделать это как можно быстрее, чтобы обработать максимальное количество запросов в единицу времени. Также защищает данные от недобросовестных пользователей.
Вторая главная функция CMS – помочь владельцу сайта без каких-то специальных навыков управлять сайтом, то есть публиковать новые страницы, новости, выкладывать видео, делать ссылки на внешние ресурсы и так далее.
1.3 Описание CMS JOOMLA
1.3.1 Общая информация
Joomla – система управления содержимым (CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных MySQL, начиная с версии 2.5 и MsSQL. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.
Система управления содержимым Joomla является ответвлением широко известной CMS Mambo. Команда независимых разработчиков отделилась от проекта Mambo по причине несогласия в экономической политике. 16 сентября 2005 года вышла первая версия Joomla, являющаяся по сути переименованной Mambo 4.5.2.3 и включающая в себя исправления найденных на тот момент ошибок и уязвимостей [3].
CMS Joomla включает в себя различные инструменты для разработки WEB-сайта. Важной особенностью системы является минимальный набор инструментов при начальной установке, который дополняется по мере необходимости. Это снижает загромождение административной панели ненужными элементами, а также снижает нагрузку на сервер и экономит место на хостинге.
Joomla позволяет отображать интерфейс фронтальной и административной части на любом языке. Каталог расширений содержит множество языковых пакетов, которые устанавливаются штатными средствами администрирования. Доступны пакеты русского, украинского и еще некоторых языков стран СНГ.
1.3.2 Основные возможности
CMS Joomla обладает множеством возможностей, среди которых наиболее важными являются:
- увеличение функциональности с помощью дополнительных расширений (компонентов, модулей и плагинов);
- наличие модуля безопасности для многоуровневой аутентификации пользователей и администраторов (используется собственный алгоритм аутентификации и ведения сессий);
- система шаблонов позволяет легко изменять внешний вид сайта или создать свой уникальный. В сети существует огромный выбор готовых шаблонов, как платных, так и бесплатных;
- предусмотрены настраиваемые схемы расположения модулей, включая левый, правый, центральный и любое другое произвольное положения блока. При желании содержимое модуля можно включить в содержимое материала. Например, выражение (loadposition mod_fpslideshow), введенное вместе с фигурными скобками в произвольное место в статье, выведет содержимое модуля, которому задана позиция вывода как mod_fpslideshow;
- все компоненты, модули, плагины и шаблоны можно написать самому, разместить их в структурированном каталоге расширений или отредактировать существующее расширение по своему усмотрению;
- происходит регулярный выход обновлений. Существует публичный Багтрекер, трекеры миграции со старых версий Joomla, трекер пожеланий расширения функционала и так далее, где пользователи Joomla могут оставлять замечания по поводу работы CMS, которые впоследствии изучаются ее разработчиками;
- многоязычность;
- расширенная поддержка баз данных. Уже реализована поддержка MsSQL и PostgreSQL. В дальнейшем планируется добавить поддержку Oracle, SQLite [4].
1.3.3 Возможности администрирования
Joomla предоставляет много возможностей для администрирования, из которых можно выделить:
- возможность создания для каждой динамической страницы своего описания и ключевых слов в целях повышения рейтинга в поисковых системах;
- начало и окончание публикации любых материалов можно запрограммировать по календарю;
- возможность ограничить доступ к определенным разделам или материалам сайта только для зарегистрированных пользователей;
- настраиваемые схемы расположения элементов по областям шаблона;
- подключение различных модулей (последние новости, счетчик посещений, подробная статистика посещений, гостевая книга, форум и другие);
- возможность определить время начала и завершения публикации модулей. Улучшенные возможности по управлению отображением содержимого;
- модуль приема от удаленных авторов новостей, статей и ссылок;
- иерархия объектов;
- менеджер рассылки новостей. Поддержка более чем 360 служб рассылки новостей по всему миру;
- встроенный визуальный редактор TinyMCE;
- ЧПУ – человекопонятный URL, например, example.com/news/2011/;
- более 10000 готовых модулей и компонентов на сегодняшний день [5].
2 разработка сайта
2.1 Установка Denwer
При создании PHP сайтов или скриптов появляется необходимость постоянной загрузки файлов на хостинг для проверки кода. Постоянные загрузки файлов значительно замедляют работу над кодом, для удобства существует набор дистрибутивов, позволяющий работать с PHP сайтами и базой данных на ПК без подключения к Интернету.
Denwer включает в себя набор дистрибутивов, которые позволяют создать на ПК виртуальный хостинг с возможностью создавать различные домены. Denwer включает в себя: Apache, MySQL, Perl, PHP, которые необходимы для разработки сайтов. С помощью Denwer можно работать с PHP скриптами без выхода в Интернет и без загрузки файлов на хостинг [5].
Запускаем загруженный инсталлятор Denwer. Нам предлагают выбрать каталог для установки комплекса (по умолчанию используется C:\WebServers, нужно нажать Enter, чтобы согласиться с этим выбором). В указанном каталоге будут расположены абсолютно все компоненты системы, и вне его никакие файлы в дальнейшем не создаются (исключая ярлыки на Рабочем столе).
Рекомендуется устанавливать комплекс в каталог первого уровня, то есть, C:\WebServers, а не, например, C:\MyDocuments\WebServers. Причина в том, что инсталляторы пакетов расширений ищут базовый комплект именно на первом уровне по всем дискам. И, если не находят, заставляют пользователя ввести имя директории вручную.
Далее нам предлагается ввести имя виртуального диска, который будет связан с только что указанной директорией. Рекомендуется согласиться со значением по умолчанию (Z:). Важно, что диска с этим именем еще не должно содержаться в системе – чаще всего так и происходит с диском (Z:).
После этого начнется копирование файлов дистрибутива, а под конец будет задан вопрос, как именно мы собираемся запускать и останавливать комплекс. Существует две альтернативы:
- создавать виртуальный диск при загрузке машины (это будет происходить автоматически), а при остановке серверов его диск не отключать;
- создавать виртуальный диск только по явной команде старта комплекса (при щелчке по ярлыку запуска на рабочем столе). И, соответственно, отключать диск от системы при остановке серверов.
После установки на рабочем столе будут созданы три ярлыка: Start Denwer (запуск сервера), Stop Denwer (остановка сервера), Restart Denwer (перезапуск сервера).
2.2 Создание базы данных в Denwer
Наш движок работает с базой данных MySQL, которая входит в комплект Denwer. Рассмотрим пошагово создание базы данных:
1. Запускаем с рабочего стола ярлык «Start Denwer». На экране компьютера быстро появятся и исчезнут два черных окна. После этого открываем браузер и пишем в адресной строке следующее: http://localhost/.
2. На открывшейся странице находим заголовок «Утилиты» и переходим по ссылке «Заведение новых БД и пользователей MySQL».
3. Заполняем открывшуюся веб-страницу так:
- «Пароль администратора MySQL» (оставляем пустым).
- «Имя базы данных» – rockmuz.
- «Логин пользователя» – admin.
- «Пароль» – *******.
- «Повтор пароля» – *******.
- Нажимаем кнопку «Создать БД и пользователя».
4. Страница перезагрузится и после заголовка появится надпись: «База данных и новый пользователь заведены».
5. База данных с названием «rockmuz» создана. Для доступа к ней будут использоваться логин admin и введенный пароль.
2.3 Установка Joomla на Denwer
Мы установили Denwer на диск Z:\. Переходим в Z:\home \localhost\www\ и создаем папку rockmuz. Распаковываем в нее содержимое архива с Joomla. Запускаем Denwer (Start Denwer на рабочем столе), в строке браузера набираем http://localhost/rockmuz и видим страницу установки Joomla. Делаем следующие шаги:
1. «Выбор языка». Выбираем русский, жмем «Далее».
2. «Начальная проверка». Жмем «Далее».
3. «Лицензия». Нажимаем «Далее».
4. «Конфигурация базы данных» (рисунок 1):
- «Тип базы данных» – mysqli.
- «Название хоста» – localhost.
- «Имя пользователя» – Admin.
- «Пароль» – *******.
- «Имя базы данных» – rockmuz.
- Жмем «Далее».
Рисунок 1 – «Конфигурация базы данных»
5. «Конфигурация FTP». «Нажмите Далее».
6. «Конфигурация сайта» (рисунок 2):
- «Название сайта» –Rock Music;
- «Ваш E-mail» – bafana333@mail.ru;
- «Логин администратора» – admin
- «Пароль администратора» – *******;
- «Подтверждение пароля» – *******;
- Демо-данные не устанавливаем;
- Жмем «Далее».
Рисунок 2 – «Конфигурация сайта»
7. Завершение. Нажимаем на кнопку удаления папки installation. Нажимаем на кнопку «Сайт» и смотрим, что у нас получилось (рисунок 3).
Рисунок 3 – Сайт без демо-данных
Для перехода в Панель управления вводим в браузере http://localhost/rockmuz/administrator/. В поле Логин вводим admin, в поле Пароль – ******* (свой пароль). Нажимаем кнопку «Войти» и попадаем в «Административный раздел» (рисунок 4).
Рисунок 4 – «Административный раздел»
2.4 Установка нового шаблона
Установить шаблон в Joomla можно двумя способами: с помощью стандартной установки Joomla установить/удалить и вручную, путем копирования файлов шаблона в папку templates.
Способ первый. Устанавливаем шаблон в Joomla стандартным установщиком. Для начала скачиваем шаблон, который хотим установить. После того, как архив с шаблоном скачан, необходимо убедиться, что в скачанном архиве находится именно шаблон, а не архив с шаблонами или как очень часто бывает, что в архиве, содержится еще несколько архивов. Архив Шаблона Joomla должен иметь расширение zip, а в архиве обязательно должны находятся файлы, приведенные на рисунке 8:
- templateDetails.xml – используется для инсталляции шаблона в административном интерфейсе;
- index.php – содержит всю структуру (код) шаблона;
- params.ini – необходим Joomla для сохранения ваших настроек [6].
Так же убедитесь, что в архиве находятся папки:
- css – содержит таблицы стилей;
- images – в этой папке содержатся изображения, использующиеся в шаблоне;
- js – файлы сценариев JavaScript (jquery.js, mootools.js, scripts.js).
Рисунок 8 – Файлы установленного шаблона
В примере не все файлы и папки, которые находятся в шаблоне Joomla. Количество файлов и папок зависит от самого шаблона, я лишь перечислил только те, которые в основном есть во всех шаблонах Joomla и без которых шаблон не будет работать.
Например, если вы скачали шаблон, а в архиве находится еще несколько архивов, тогда по этим признакам можно легко определить, какой из архивов является шаблоном и установить его.
Следует отметить, что выбирая шаблон, нужно обращать внимание на дату его выпуска и насколько он соответствует той версии Joomla, с которой Вы работаете.
Примечание: архив с шаблоном для установки через стандартный установщик установить/удалить должен иметь расширение .zip или .tar.gz.
Рисунок 9 – Экран выбора расширения «Менеджер расширений»
В административной панели выберите «Расширения» – «Менеджер расширений», как показано на рисунке 9. Далее выберите архив с вашим шаблоном на вашем компьютере и нажмите кнопку «Загрузить файл и Установить». Если шаблон соответствует вашей версии Joomla, через несколько секунд шаблон будет загружен и установлен, вы увидите сообщение, что шаблон успешно установлен.
После того, как шаблон установится, выберите «Расширения» – «Менеджер шаблонов». В Менеджере шаблонов вы увидите все установленные шаблоны и шаблон, который только что установили. (По умолчанию, в Joomla уже установлены два стандартных шаблона: rhuk_milkyway и JA_Purity). Выберите нужный шаблон, установив переключатель напротив шаблона, как показано на рисунке 10, и нажмите кнопку «По умолчанию».
Рисунок 10 – Экран менеджера шаблонов
Второй способ установки шаблона в Joomla. Этот способ можно использовать, когда необходимо установить большое количество шаблонов, или просто бывают случаи, когда шаблон не устанавливается стандартным способом установить/удалить.
Для установки шаблона этим способом нужно распаковать архив с шаблоном в папку (имя папки может быть любое, главное английскими буквами). Далее запускаем FTP-клиент и открываем папку /templates на сайте, для которого устанавливаем шаблон, и закачиваем в нее нашу папку с шаблоном.
Если сайт находится на локальном сервере, нужно просто скопировать нашу папку в папку /templates/. Если необходимо изменить название шаблона, тогда в папке шаблона нужно найти файл templateDetails.xml, открыть его блокнотом или любым текстовым редактором. Найдите строчку с тегом <name>August</name>, August – это имя шаблона, меняем его на любое другое (не забываем писать латинскими буквами).
Как уже говорилось, по умолчанию в Joomla уже установлены два стандартных шаблона: rhuk_milkyway и JA_Purity, которые можно использовать при создании вашего проекта [7].
На сегодняшний день выбор шаблонов для сайта очень велик, и разработчики даже делят их по тематике: шаблоны для сайтов, связанных с бизнесом, для развлекательных порталов, праздничные, недвижимость, музыка, социальные сети, кино, видео, спорт, туризм и многие другие.
Стоит отметить, что некоторые из шаблонов созданы на коммерческой основе и, прежде чем их использовать, необходимо оплатить разработчику, в противном случае это будет считаться нарушением авторских прав. Поэтому прежде чем устанавливать на сайт тот или иной шаблон проверьте автора, их сейчас огромное количество, и на каких условиях он предоставляет шаблон для использования.
Далее откройте Ваш сайт, обновите страницу и посмотрите, каким образом новый шаблон установился на сайт.
При выборе шаблона также нужно обращать внимание на его структуру, блоки и позиции, которые он в себя включает. Ведь прежде, чем создавать сайт необходимо спланировать, что и где будет на нем располагаться: будет ли header (обычно это картинка, размещенная сверху, его еще называют шапка сайта), логотип, верхнее или вертикальное меню, количество блоков на странице и т.д.
Для того чтобы проверить позиции в том или ином шаблоне можно набрать в адресной строке браузера http://ваш сайт/?tp=1 и перед Вами предстанут все возможные позиции шаблона и их названия.
2.5 Создание категорий
Категория – это второй (после раздела) объект в иерархии структуры содержимого. Создание категории похоже на создание раздела.
Для работы с категориями необходимо перейти на страницу «Менеджер категорий».
Есть два способа перейти на страницу «Менеджер категорий».
Первый способ: можно нажать на главной странице панели кнопку «Менеджер категорий», или в основном меню выберите «Содержимое», затем пункт «Менеджер разделов». Будет открыта страница «Менеджер категорий».
Второй способ: в основном меню выбрать «Содержимое», затем «Содержимое по разделам» и далее нужный нам раздел. И в выпадающем продолжении меню пункт «Добавить / изменить категории в выбранном вами разделе». Будет открыта страница «Менеджер категорий».
При открытии страницы «Менеджер категорий» первым способом будет доступно фильтрация категории по разделам. При создании новой категории можно будет выбрать раздел, в который должна войти новая категория. Опция фильтрации на странице доступна справа под панелью инструментов [8].
При открытии страницы «Менеджер категорий» вторым способом опция фильтрации будет «жестко» привязана к выбранному нами разделу. При создании новой категории, имя раздела, в который войдет новая категории будет «жестко» привязана к выбранному нами разделу.
Примечание: Чтобы выбрать другой раздел, потребуется снова повторить способ второй или первый, для доступа на страницу «Менеджер категорий».
Рисунок 12 – Экран менеджера категорий
На странице «Менеджер категорий», приведенной на рисунке 12, при использовании кнопок на панели инструментов, можно выполнить следующие действия (перечисление справа налево):
- помощь – открыть в новом окне страницу описания поданному окну («Менеджер категорий»), нажать кнопку «Помощь»;
- создать новую категорию, нажать кнопку «Создать»;
- изменить существующую категорию, нажав на название категории или отметив нужную категорию и выбрав пункт «Изменить».
- удалить существующую категорию, отметив нужную категорию и нажав кнопку «Удалить»;
- копировать существующую категорию, отметив нужную категорию и нажав кнопку «Копировать»;
- перенести – переместить существующую категорию и все ее содержимое в другой раздел, отметив нужную категорию и нажав кнопку «Перенести»;
- скрыть (сделать неопубликованной) существующую категорию, отметив нужную категорию и нажав кнопку «Скрыть»;
- допустить (опубликовать) существующую категорию, отметив нужную категорию и нажав кнопку «Показать»;
- для создания новой категории нажать кнопку «Создать», откроется страница редактирования категории;
- страница редактирования категории аналогичная странице редактирования раздела. Основное отличие страниц редактирования «Категории» и «Раздела» – наличие поля выбора раздела, в который относиться категория, создание новой категории почти полностью аналогично созданию нового раздела [9].
2.6 Создание материалов
Для работы с объектами содержимого необходимо перейти на страницу «Менеджер материалов».
Нужно нажать на главной странице панели кнопку «Менеджер материалов» или в основном меню выберем «Материалы», затем пункт «Менеджер материалов». Будет открыта страница «Менеджер материалов», показанная на рисунке 13, при открытии страницы будет доступна фильтрация объектов по следующим критериям:
- по категориям;
- по автору;
- по заголовку, значение указывается в поле «Фильтр».
Рисунок 13 – Экран менеджера материалов
На странице «Менеджер материалов», используя кнопки на панели инструментов, можно сделать следующее (описаны справа налево). Помощь – открыть в новом окне страницу описания поданному окну («Управление содержимым»). Нажмите кнопку «Помощь». Создать новый объект содержимого. Нажмите кнопку «Создать». Изменить существующий объект содержимого. Нажмите на название объекта или отметьте нужный объект и нажмите кнопку «Изменить». Удалить существующий объект содержимого. Отметьте нужный объект и нажмите кнопку «В корзину». Копировать существующие объекты содержимого. Отметьте нужные объекты и нажмите кнопку «Копировать» и затем выберите, куда скопировать объекты. Перенести – переместить существующие объекты содержимого. Отметьте нужные объекты и нажмите кнопку «Перенести» и затем выберите, куда перенести объекты. Скрыть (сделать неопубликованным) существующие объекты содержимого. Отметьте нужные объекты и нажмите кнопку «Скрыть». Допустить (опубликовать) существующие объекты содержимого. Отметьте нужные объекты и нажмите кнопку «Показать». Отправить в архив существующие объекты содержимого. Отметьте нужные объекты и нажмите кнопку «В архив».
При создании или редактировании объекта содержимого (статьи), на странице редактирования доступны дополнительные поля, необходимые для выбора того (в отличие от страницы редактирования раздела или категории), в каком разделе (поле «Раздел») и в какой категории (поле «Категория») будет содержаться данный объект содержимого.
Далее доступны два окна HTML редактора, позволяющие разбить содержание статьи на две части: введение и все содержимое статьи [10]. Разделение содержимого статей позволяет представить их в виде так называемого «Блога» или «Вестника», т.е. списка краткого описания статей, с кнопками «Подробнее» на все содержимое статей.
Блог – популярный и удобный способ представить информацию или статьи, которые обновляются (добавляются) регулярно, например новости или пресс-релизы. Вместо простого списка ссылок к различным статьям, вывод статей как «блог» дает возможность показать название и ввода позволяют перейти ко всему содержанию статьи. Таким образом, введение может быть первым пунктом всей статьи или кратким описанием (резюме) статьи.
Далее, после сохранения, доступны дополнительные параметры управления объектом содержимого. Последняя вкладка «Связь с меню» может настраиваться при создании меню.
Если необходимо поместить изображения в содержании, то нужно использовать специальную возможность вставки изображений. Нажмем кнопку «Вставить изображение» (кнопка расположена внизу слева окна HTML редактора, показанного на рисунке 14), после этого в содержимое будет добавлен текст «mosimage», при обработке этого текста для отображения система Joomla определит, что необходимо вставлять изображения, список которых размещен на вкладке «параметры изображения» [11]. Чтобы увидеть изображение в тексте, нажмем кнопку «Просмотр» на панели инструментов.
Рисунок 14 – HTML редактор в менеджере материалов
Использовать возможность «mosimage» можно много раз, изображения отображаются в порядке, указанном в списке; порядок можно менять, используя кнопки «Вверх» и «Вниз».
Значение многих параметров на вкладке «Параметры-Расширенные», можно задать по умолчанию, для того, чтобы использовались «глобальные настройки». Задать значение «Глобальных настроек» можно в пункте меню «Менеджер материалов» раздела «Материалы» во вкладке «Параметры». Данные значения можно индивидуально изменить для каждого объекта содержимого.
На данной вкладке можно ввести описание объекта и ключевые слова.
Если использовать кнопку «Добавить (Раздел, Категория, Заголовок)», то будут добавлены в поле «Ключевые слова» названия раздела, категории и заголовок объекта.
2.7 Создание меню
Для создания меню первоначально необходимо пройти в менеджер меню (Меню – Менеджер меню).
На сайте сразу есть одно меню, называется оно «Main Menu», давайте создадим свое меню, для этого нажмите на кнопку создать в верхней части экрана, как показано на рисунке 15.
Рисунок 15 – Подготовка к созданию нового меню
Нужно заполнить следующие поля. Дадим название нашему меню, оно не будет отображаться на сайте, только в панели управления в списке меню [12]. Можно назвать, к примеру, «Главная».
В поле «Тип меню» напишем «вертикальное», это поле нам понадобится при создании модуля меню, название должно быть на английском языке, если вы заполните поле на русском, то оно автоматически преобразуется на английский. Поле «Описание» можно не заполнять.
Рисунок 16 – Экран создания нового меню
Наше меню готово. Нажмите сохранить. Теперь нам остается создать для него пункты меню, для этого вернитесь в менеджер меню.
Нажмите на кнопку «Создать». На странице создания пунктов меню нужно заполнить следующие поля. Тип пункта меню. В этом поле нам нужно выбрать тип пункта меню, для этого нажмите на кнопку «Выбрать». В появившемся всплывающем окне, которое показано на рисунке 17, следует выбрать тип пункта меню, давайте выберем «Категории».
Рисунок 17 – Экран настройки типа меню
В заголовок меню нужно задать название пункта меню, которое будет отображаться на сайте. Остальные поля в левой колонке нам пока заполнять необязательно, они нужны для тонкой настройки под особенности отдельно взятого сайта.
Рисунок 18 – Созданные пункты меню
Аналогично создадим второе меню и назовём его Верхнее меню, оно будет отображаться в шапке сайта.
Рисунок 19 – Экран создания 2-ого нового меню
Меню полностью готово, но оно не отображается на сайте. Нужно создать для него модуль для вывода меню на сайте. Для того чтобы создать модуль пройдите в менеджер модулей (Расширения – Менеджер модулей), или нажмите на иконку в панели быстрого доступа. Данная операция показана на рисунке 20.
Рисунок 20 – Вход в менеджер модулей через панель управления
Нажмите на кнопку «Создать» в верхней части экрана. Во всплывающем окне, показанном на рисунке 21, выберите модуль меню.
Рисунок 21 – Экран настройки типа модуля
В настройках модуля меню нужно заполнить несколько полей. Введите название заголовка меню, оно будет отображаться на сайте. Включите модуль. В пункте «позиция» нужно выбрать позицию на сайте, в которой будет показываться наше меню, давайте выберем позицию – left.
Аналогично для 2-ого меню создаем модуль с названием Верхнее меню, только зададим другую позицию – menu.
2.8 Работа с плагинами и компонентами
2.8.1 Работа с плагином «Socbuttons»
Плагины joomla – универсальные дополнения, которые расширяют стандартные возможности Joomla и служат решением узких задач. Их можно легко установить через административную панель и так же легко их удалить. Одним из самых популярных плагинов является «Socbuttons» [15].
Прежде чем перейти к установке, нужно скачать данный плагин. После того как плагин скачан устанавливаем его стандартным способом: Расширения – Менеджер расширений во вкладке «Установка» нажимаем кнопку «Обзор», указываем скачанный плагин и нажимаем «Загрузить и установить».
Теперь нам нужно зайти в сам плагин, для этого идем в Расширения -> Менеджер плагинов ищем там «Content – SocButtons» и открываем его.
Первое что необходимо сделать, это включить плагин.
Далее переходим к самим параметрам плагина. Настройки параметров указаны на рисунке 22.
Рисунок 22 – Экран основных параметров плагина «Socbuttons»
Ниже в основных параметрах под настройками всех кнопок находится блок «DISPLAY OPTIONS», в котором Вы можете указать отображать ли кнопки главной странице и на страницах подкатегорий, выбрать позицию отображения плагина, т.е. где будут отображаться социальные кнопки до текста статьи или после текста. Указать выравнивание блока с кнопками, слева или справа, исключить категории, в статьях которых не нужно вставлять кнопки социальных сетей, исключить определенные статьи, в которых не нужно показывать социальные кнопки, для этого нужно указать id статей через запятую. Также в дополнительных параметрах по желанию можно скрыть копирайт.
Рисунок 23 – Экран настроек отображения плагина «Socbuttons»
Все нужные настройки сделаны, теперь можем сохранять и переходить на сайт смотреть работу плагина, которая представлена на рисунке 24.
Рисунок 24 – Установленный плагин «Socbuttons» на сайте
2.8.2 Работа с компонентом «Xmap»
Компоненты Joomla являются основным средством расширения функциональных возможностей сайта и представляют собой набор специальных скриптов, которые выполняют определенную функцию на сайте. Как правило, компоненты отображаются в основной части сайта, которая находится между боковыми панелями. Они содержат панель администратора для управления настройками и пользовательский интерфейс, который доступен пользователям сайта. Компонентами в Joomla являются форумы, файловые архивы, галереи, системы сбора статистики, резервного копирования и т.д. Управление пользователями, создание разделов, добавление и отображение материалов – все это выполняют компоненты. На своем сайте я использовал компонент «Xmap».
С помощью карты сайта пользователи могут быстрее сориентироваться в его структуре, а поисковым системам упрощает индексацию, что ускоряет их работу.
Установка осуществляется в административной панели сайта, сперва необходимо найти пункт «Расширения», затем подпункт «Менеджер расширений» и, нажав на «Загрузить файл пакета», выбрать скачанный файл. Жмем «загрузить и установить». Теперь компонент установлен на сайт.
В административной панели сайта необходимо войти в "Компоненты" и выбрать «XMap». После нажатия на «Создать» в поле «Заголовок» вписываем название карты или просто «Карта сайта». Поле «Алиас» можно оставить пустым, оно заполнится автоматически. Выбрав в графе «Состояние» опцию «Опубликовано», перейдем в правую часть экрана, где выберем необходимые пункты меню для их отображения в карте сайта. После этого сохраним настройки. Все необходимые настройки показаны на рисунке 25.
Рисунок 25 – Настройки компонента «Xmap»
Необходимо, чтобы карта сайта отображалась отдельным пунктом меню, поэтому давайте создадим его. В закладке «Меню» выбираем пункт «Main menu», «top_menu» и нажимаем на ссылку «Создать пункт меню». В появившемся поле «Тип пункта меню» выберите «HTML Site map», как изображено на рисунке 26.
Рисунок 26 – Добавление компонента «Xmap» в пункт меню
В появившемся окне находим поле «Заголовок меню» и вписываем необходимое наименование или «Карта сайта». В правой части экрана находим подпункт «Choose a site map» и выбираем в нем созданную карту сайта. Для выбранной карты вы должны нажать на ссылку с ее названием. В нашем случае это «Карта сайта». Все остальные настройки лучше оставить по умолчанию. Теперь необходимо сохранить все настройки. Настройка карты сайта завершена, она поможет как посетителям, так и поисковым системам. Посмотрим, как отображается компонент «Xmap» на нашем сайте (рисунок 27).
Рисунок 27 – Компонент «Xmap»
2.8.3 Плагин для комментариев JComments
Компонент JComments позволяет посетителям сайта оставлять комментарии к различным материалам, размещенным на сайте. Гибкая система настройки прав доступа к функциям компонента, большое количество настроек внешнего вида, поддержка шаблонов, использование технологии AJAX и многое другое. Так же в JComments подкупает возможность очень тонкой настройки. Можно, например, включить или отключить комментарии не только для отдельных категорий в Joomla, но и даже к любой отдельно взятой статье. Можно задать совершенно разные настройки и добавить права для всех восьми групп пользователей, что существенно может упростить и сделать более удобной работу с комментами как для посетителей сайта, так и для его администраторов. Так же в нем реализована капча (captcha), так необходимая в условиях повального спама, которая, кстати говоря, может быть отключена, например, для зарегистрированных пользователей, что сильно повысит удобство комментирования. Итак, для начала вам нужно скачать JComments и приступить к его установке. Не распаковывая скачанный архив заходите в админку и приступаете к стандартной процедуре установки расширения.
Рисунок 28 – Внешний вид плагина JComments
После успешной установки имеет смысл сразу же перейти в его настройки. Для этого из меню админки вам нужно выбрать пункты «Компоненты» - «JComments» - «Настройки»: Сначала следует определиться: для статей, из каких именно категорий вы хотите использовать JComments. Делается это довольно просто: выделяете в поле «Включить в категориях» (удерживая «Ctrl» или «Shift» на клавиатуре) нужные вам категории, для материалов которых требуется добавить возможность комментирования, и жмете по кнопке «Сохранить», расположенной в верхней правой части окна (рисунок 29).
Рисунок 29 –Настройки плагина JComments
У данного плагина достаточно много различных настроек, поэтому все не будем рассматривать [16]. На сайте мы также использовали следующие компоненты и плагины: - Модуль JB_microblog - очень полезный модуль для вывода содержания материалов на главную страницу сайта в виде блога. Имеет множество настроек, позволяет выводить материалы в виде таблицы, списка, с изображениями и без, работает с К2. - Ignite Gallery 2.1 - компонент фотогалереи [17] (рисунок 30). Прекрасная галерея для представления изображений или фотографий посетителям. В архиве вместе с компонентом представлены плагины и модули. Сам компонент отвечает за управление галереей, а плагины и модули отслеживают вызов изображений в статьях и материалах на сайте
Рисунок 30 – Компонент Ignite Gallery
2.9 Создание и установка Favicon
Favicon – это файл небольшого размера (16×16 пикселов), имеющий расширение .ico (это расширение используется операционными системами для хранения иконок). Favicon.ico есть практически у каждого сайта, причем неважно, на каком он хостинге расположен или какой движок/тему использует. Онлайн генераторы и галереи favicon позволяют сделать иконку за пару минут из любого изображения, нарисовать ее с нуля или же скачать готовую. Есть несколько путей создания favicon.ico: - Скачать готовую иконку из галерей favicon. - Сделать фавикон с нуля с помощью фотошопа или онлaйн генератора. - Сделать favicon из готового изображения. Для создания фавикона с 0 часто используют специальные online генераторы, например, Favicon.ru. Этот онлайн генератор, пожалуй, самый простой для создания фавикон с нуля. Пиксель за пикселем вы сможете с легкостью создавать, пока не закончите делать favicon и не закрасите все 256 пикселей (рисунок 31). Так же это сервер позволяет сделать фавикон из готового изображения, для этого нужно перейти на одноименную ссылку и загрузить необходимое изображение, подогнать размер и скачать [17].
Рисунок 31– Интерфейс генератора Favicon.ru
За установку Favicon на Joomla отвечает компонент Smart Favicon. Этот компонент предназначен специально для комфортного размещения фавикона для сайта, разрабатываемого на Joomla. К дополнительным функциям SmartFavicon можно отнести: загрузка и удаление соответственно, прикрепление фавикона к любой странице и задание временных интервалов для отображения иконок. Установим данный компонент, затем выберем его и перейдем на вкладку My Favicon Images (рисунок32), там загружаем ранее созданный нами Favicon.
Рисунок 33 – Функции SmartFavicon
Так же во вкладке Icons For Pages можно на каждую страницу поставить свой фавикон, а во вкладке Settings поставить условия, когда будет тот или иной фавикон работать (по часам, дням, месяцем). К сайту иконка подвязывается прописыванием в коде документа между тегами <head></head> следующего кода: <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> Или простой заменой старого фавикона на новый, в корне сайта или в вашем шаблоне.
заключение
В ходе выполнения работы был получен полнофункциональный web-сайт, готовый к применению. Данный сайт ориентирован на любителей компьютерных игр, а так же для их разработчиков. С его помощью пользователи смогут получать необходимую информацию о возможных нововведениях приложений, а также следить за процессом создания игр.
При разработке web-сайта были проанализированы современные web-технологии, позволяющие создавать интерактивные web-страницы. Наиболее подходящей программой для выполнения поставленной задачи оказалась CMS Joomla 1.5.25.
Разработанный сайт удовлетворяет всем современным требованиям. При разработке web-сайта были использованы готовые модули социальных закладок, комментирования, галереи и карты сайта. Данные модули были настроены с учетом специфики web-сайта и успешно внедрены в его структуру. Для сайта специально был разработан и создан Favicon, придающий сайту уникальность. Так же для сайта было разработано web-приложение и доработан графический интерфейс с целью дальнейшего повышения его информативности, привлекательности и удобства.
СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ
[1] Свободная энциклопедия [Электронный ресурс]. – Электронные данные. – Режим доступа: http://ru.wikipedia.org/.
[2] Прохоренок, Н. Джентельменский набор Web-мастера / Н. Прохоренок. – СПб.: БХВ Петербург, 2010. – 250 с.
[3] Блог Антона Шевчука [Электронный ресурс]. – Электронные данные. – Режим доступа: http://anton.shevchuk.name/.
[4] Уоринг, Э. Joomla 2.5 / пер. с англ. – СПб.: Питер, 2011. – 180 с.
[5] Никсон, Р. Создаем динамический веб-сайт с помощью PHP, MySQL и JavaScript / пер. с англ. – СПб.: Питер, 2011. – 232 с.
[6] Руководство Joomla 2.5 [Электронный ресурс]. – Электронные данные. – Режим доступа: http://joomlauser.ru/.
[7] Норт, Б. Практическое руководство по Joomla / пер. с англ. – М.: Символ-Плюс, 2012. – 283 с.
[8] Создание сайтов на Joomla [Электронный ресурс]. – Электронные данные. – Режим доступа: http://joomla-code.ru/.
[9] Инструменты – JoomFans [Электронный ресурс]. – Электронные данные. – Режим доступа: http://joomfans.com/.
[10] Вильямсон, X. Универсальный Dynamic HTML. Библиотека программиста / пер. с англ. – СПб.: Питер, 2001. – 304 с.
[11] Севердиа, Р. Создание сайтов с использованием Joomla / пер. с англ. – М.: Питер, 2013. – 257 с.
[12] Валейд, Д. Joomla – создание сайтов без программирования / пер. с англ. – М.: Вильямс, 2012. – 170 с.
[13] Элементарные инструменты веб-мастера [Электронный ресурс]. – Электронные данные. – Режим доступа : http://joomaika.ru/.
[14] Крамер, Д. Как создать сайт на Joomla / пер. с англ. – М.: Рид Групп, 2008. – 315 с.
[15] Скрипт кнопок социальных закладок и сетей [Электронный ресурс]. – Электронные данные. – Режим доступа: http://share42.com/.
[16] JComments – комментарии для Joomla [Электронный ресурс]. – Электронные данные. – Режим доступа:
http://www.joomlatune.ru/.
[17] Компонент Ignite Gallery [Электронный ресурс]. – Электронные данные. – Режим доступа: http://service-joomla.ru/
ПРИЛОЖЕНИЕ А
Index.php
<?php // no direct access
defined( '_JEXEC' ) or die( 'Restricted index access' );
define('ZEN_DOCUMENT_ROOT', isset($_SERVER['DOCUMENT_ROOT']) ? $_SERVER['DOCUMENT_ROOT'] : '');
define('ZEN_SCRIPT_FILENAME', isset($_SERVER['SCRIPT_FILENAME']) ? $_SERVER['SCRIPT_FILENAME'] : '');
define('ZEN_SCRIPT_NAME', isset($_SERVER['SCRIPT_NAME']) ? $_SERVER['SCRIPT_NAME'] : '');
$zenDocRoot = preg_replace('/\/$/', '', ZEN_DOCUMENT_ROOT);
$zenBaseUrl = preg_replace('/\/~(\w+)/','',JURI::root(true));
if(!(file_exists( $zenDocRoot.$zenBaseUrl."/templates/zengridframework/index.php")))
{
// Remove '~path/' if exists
$scriptName = preg_replace('/~(\w+)\//','',ZEN_SCRIPT_NAME);
// Build doc root from other server variables
$zenDocRoot = str_replace($scriptName,'',ZEN_SCRIPT_FILENAME);
// Strip possible trailing slash
$zenDocRoot = preg_replace('/\/$/', '', $zenDocRoot);
}
// Non Framework variables
$ribbonText = $this->params->get("ribbonText", "");
// Javascript that gets loaded for individual templates and are not needed in the framework
$extraTemplateScript = "jQuery('#ribbon span').easyRotate({degrees: 45});";
$extraTemplateScripts = '<script type="text/JavaScript" src="../files/228/files/228/'.$this->baseurl.'/templates/'.$this->template.'/js/jquery.easyRotate.js"></script>';
$logopath ="templates/$this->template/images/logo";
if(file_exists( $zenDocRoot.$zenBaseUrl."/templates/zengridframework/index.php")) :
require("templates/zengridframework/index.php");
else :
?>
<body style="background:#f9f9f9">
<div style="width:500px;margin:140px auto;height:70px;background:#fffbcc;padding:20px;border:1px solid #ddd;color:#444;line-height:2em">The template you are attempting to use requires the Zen Grid2 Framework.<br /> Please refer to the Zen Grid2 framework documentation for more information.</div>
</body>
<?php
endif;
?>
Приложение Б
Themes.css
/* @override
http://showcase.joomlabamboo.com/foliolife/templates/zengrid/themes/style/base/theme.css
http://localhost:8888/joomla/1515/zengrid_1515/templates/zengrid/themes/foliolife/theme.css
http://localhost:8888/joomla/repo/templates/foliolife/css/theme.css
http://localhost:8888/joomla/1.5/foliodev/templates/foliolife/css/theme.css
http://showcase.joomlabamboo.com/foliolife/templates/foliolife/css/theme.css
*/
/* These styles set the background colour and any other style you want to attach to the rows int he theme. */
/* Used mainly to set the bottom footer colour and to create a faux footer */
body {background: #121212 url(../images/bgGrunge.jpg) repeat-x left top;color: #fff}
.containerBG {margin-top: 0px;padding: 20px 0}
.fullWrap {margin-top: 0px;background: url(../images/footer.jpg) repeat-x left bottom;padding-bottom: 160px;border-bottom: 10px solid #1a1a1a}
.topContainer {margin: 60px auto 0;}
#topShadow {background: url(../images/topShadow.png) no-repeat center 0px;padding-top: 20px;;float: left;width: 100%;}
#ribbon {position: absolute;width: 110px;height: 85px;right: -28px;top: -4px;z-index: 1;}
#ribbon span {-webkit-transform: rotate(45deg);position: absolute;margin-top: 18px;margin-left: 33px;
.topRow {padding: 0}
.topRow .containerBG {padding: 4px 0 0 0}
.topRow ul li {list-style-type: none;margin: 0 20px 0 0}
.topRow ul li {float: left}
.topRow ul li a {float: left}
#top4 ul {float: right}
#top4 ul li a {color: #fff;}
.logoRow {}
.logoRow .containerBG {margin: 0}
#tagline {
.navRow .containerBG {padding-bottom: 0}
#navWrapper {background: url(../images/divider.png) repeat-x left bottom;float: left;width: 100%;}
.bannerRow {}
.bannerRow .containerBG {padding: 30px 0 0 0}
.grid1Row {}
.grid1Row .containerBG {padding: 30px 0 0}
.grid2Row {}
.grid2Row .containerBG {padding: 0px 0;}
.grid3Row {}
.grid3Row .containerBG {padding: 8px 0}
.grid4Row {}
.grid4Row .containerBG {padding: 30px 0;background: #1a1a1a url(../images/divider.png) repeat-x left bottom;}
.grid5Row {}
.grid5Row .containerBG {padding: 30px 0;background: #1a1a1a url(../images/divider.png) repeat-x left bottom;}
.grid6Row {}
.grid6Row .containerBG {padding: 30px 0;background: url(../images/divider.png) repeat-x left bottom;}
.mainRow {background: url(../images/divider.png) repeat-x left bottom;}
.sliderRow {background:#1a1a1a;padding-top: 15px;border-bottom: 1px solid #0A0A0A;border-top: 1px solid #2a2a2a}
.sliderRow .containerBG {padding: 10px 0 0 0}
/* @group Slider */
#sliderWrap {float: left;color: #fff;display: inline;padding-bottom: 20px;background: url(../images/divider.png) repeat-x left top;padding-top: 10px;}
#sliderArea {margin-left: 0px;padding-bottom: 30px;float: left;width: 100%;height: 20px;background: url(../images/divider.png) repeat-x left bottom;}
span.slideTrigger {height: 30px;margin: 0 10px 0 0;padding: 8px 25px 5px 0px;color: #ddd;
span.slideNext {background: url(../images/next.png) no-repeat;width: 25px;height: 25px;position: absolute;margin-top: -20px;cursor: pointer;margin-left: 30px}
#slideWrapper {width: 100%}
#slides {padding-top: 10px;float: left}
#slides img {padding: 4px;background: #1C1919}
#sliderWrap ul {margin: 0}
#sliderWrap ul li {list-style-type: none;margin: 0}
#sliderWrap ul li a {display: block;width: 100%;border-bottom: 1px solid #333;text-decoration: none;padding: 4px 0}
#sliderWrap ul.tweet_list li a {display: inline}
#sliderWrap ul li a:hover {color: #AEBA34}
.slideTrigger {cursor: pointer}
#slideWrapper .border {border: 1px solid #1C1919;background: #222}
#sliderWrap h3 {color: #fff;font-weight: normal;line-height: 1.8em;background: none;padding-left: 0}
#sliderWrap .jTweet_bird1,#sliderWrap .jTweet_bird2,#sliderWrap .jTweet_bird3,#sliderWrap .jTweet_bird4,#sliderWrap .jTweet_bird5 {clear: none}
#sliderWrap .jTweetClear {clear: none}
.sliderDouble .moduletable {float: left;width: 48%;margin-right: 2%}
.sliderTriple .moduletable {float: left;width: 30%;margin-right: 3%}
.sliderQuad .moduletable {float: left;width: 23%;margin-right: 2%}
/* @end */
.bottomRow {background: #1a1a1a;padding-bottom: 50px;}
.bottomRow .containerBG {}
.bottomRow ul li {margin: 0;list-style-type: none;padding: 0;}
.bottomRow ul li a {display: block;background: #1a1a1a url(../images/divider.png) repeat-x left bottom;color: #fff;padding: 4px 0;}
.footerRow {
.footerRow a {color: #fff}
/* Pathway Classes */
#breadcrumb {margin: 0 0 0px;width: 100%;padding: 8px 0;
.pathway img {margin: 6px 10px 0}
#above {padding-top: 30px;}
/* Center Column */
#center {}
/* Main Content Row Classes */
/* Left Column */
#leftCol {padding-top: 20px}
#midCol {}
#mainContent {margin-bottom: 10px;padding-top: 30px}
#mainContent.nopadding {margin-bottom: 0px;padding-top: 0}
/* Right Column */
#right .moduletable {margin-top: 18px;margin-bottom: 0}
/* Footer Row Classes */
.footerRow {padding-bottom: 50px}
.footerRow .containerBG {border: 0;padding: 8px 0 0 0}
/* Search Styling */
#search {}
#search .inputbox,#search_searchword {border: 1px solid #333;padding: 8px;margin: 4px 0;background: url(../images/fieldShadow.jpg) repeat-x; border: 1px solid #c8c8c8;
form.search_result input#search_searchword {margin: 0;width: 60%;padding: 10px;background: #fff url(../images/fieldShadow.jpg) repeat-x;}
/* Links */
/* Headings */
h2,.contentheading{clear: both;background: url(../images/divider.png) repeat-x left bottom;padding-bottom: 4px;margin-bottom: 10px;}
h2 a {clear: both;padding-bottom: 4px}
h2.dateheading.contentheading {background: none;padding: 0 0 0 100px;margin: 0;}
.contentheading {
h3,.moduletable h3 {
h5 {padding: 2px 0 2px 4px}
h6 {padding: 2px 0 2px 4px}
/*Nav - Top levels */
#navWrap.navLeft {float: left}
#navWrap.navLeft ul {float: left;margin: 8px 20px 2px 0}
#navWrap.navLeft ul li {margin: 0}
#navWrap {float: right;padding-top: 30px}
#nav ul {float: right;margin: 0}
#nav ul li {margin: 0;padding: 0}
#nav ul li a,#nav ul li span.mainlevel,#nav ul li span.sublevel {
#nav a.mainlevel.sf-with-ul,#nav a.mainlevel_active.sf-with-ul, #nav ul li span.mainlevel span.expanded,#nav ul li a.sf-with-ul,.moduletable-superfish ul li a.sf-with-ul {background: url(../images/navParent.png) no-repeat left 10px;padding-left: 24px;}
#nav a.mainlevel.sf-with-ul:hover,#nav a.mainlevel_active.sf-with-ul:hover,#nav a.mainlevel_active.sf-with-ul, #nav ul li span.mainlevel span.expanded:hover{background: url(../images/navParent.png) no-repeat center 39px;padding-bottom: 39px}
#nav ul li li a.sf-with-ul, #nav ul li li span.sublevel span.expanded{background: url(../images/arrow.png) no-repeat 5px center;padding: 8px 0;text-indent: 10px;}
#nav a.mainlevel_active,#nav .mainlevel_current,#nav ul li a:hover {}
/* Nav - Second and third levels */
#nav li:hover ul,#nav ul li.sfHover ul {left:-1px;top:32px}
#nav li ul,#navWrap.navLeft ul ul,.moduletable-superfish ul ul {background: url(../images/blackOverlay.png);border: 1px solid #121212;border-width: 0 1px 0 1px;padding: 0;margin: 0}
#nav ul li li a, #nav ul li li span.sublevel {border-bottom: 1px solid #121212;
#nav ul li li span.expanded, #nav ul li li a.sf-with-ul {padding-left: 16px;padding-right: 0px}
#nav span.sublevel {padding-left: 15px;
/* Left and right lists and panel menu */
#leftCol ul li, #rightCol ul li {margin: 0;padding: 0}
#leftCol ul li {background: url(../images/divider.png) repeat-x left bottom;display: block}
/* Left and right Sub menus */
#leftCol ul li li a,#rightCol ul li li a {font-weight: normal;padding-left: 20px}
/* Styling for parent on panel menu */
#leftCol span.expanded,#rightCol span.expanded,#leftCol ul li span.separator,#rightCol ul li span.separator {background: url(../images/divider.png) repeat-x left bottom;display: block;padding-left: 20px;cursor: pointer;padding: 4px 0 4px 20px;background: url(../images/navParent.png) no-repeat left 12px}
/* Hidden Panel Styling */
#toppanel a#open {color: #fff;padding: 8px 10px;background: #000;border-bottom: 1px solid #2a2a2a;z-index: 100;}
#toppanel a#open:hover {color: #333}
.overlay div.close{background:url(../images/panelClose.png) no-repeat}
#panelInner {background: url(../images/blackOverlay.png);border: 1px solid #000}
/* Input Styling */
.inputbox,input#email { background: #fff url(../images/fieldShadow.jpg) repeat-x; border: 1px solid #fff;
/* Overrides */
.article_row,.leading {padding: 0 0 30px;margin: 0 0 10px;clear: both;}
.leading {float: left;width: 100%}
/* Page classes */
div.jbFrontPage {clear: both;float: left;background: url(../images/divider.png) repeat-x left top;padding-top: 8px;position: relative;width: 100%;}
div#jbArticle {background: url(../images/divider.png) repeat-x left top;padding-top: 8px;position: relative;}
div.jbSection {background: url(../images/divider.png) repeat-x left top;padding-top: 8px;position: relative;}
div.jbCategory {background: url(../images/divider.png) repeat-x left top;padding-top: 8px;position: relative;clear: both;}
/* Pdf Buttons etc */
div.buttons {position: absolute;right: 0;margin-top: -40px}
div.buttons.noborder {margin-top: -25px;}
/* Div around the title and author, date etc */
div.jbMeta {background: url(../images/divider.png) repeat-x left bottom;height: 30px;;float: left;width: 100%;margin-bottom: 20px;color: #ccc;
/* Section and Categories */
div.jbSectCat.dateheading {padding-left: 100px}
.jbCategory {clear: both;float: left;width: 100%;}
/* Author and date styling */
div.jbAuthorDate {float: right;width: 100%;}
span.jbModifydate {float: right;
div.jbCreatedate {position: absolute;width: 60px;height: 50px;text-align: center;z-index: 10;background: url(../images/dividerVert.png) no-repeat right top;padding-right: 20px}
div.jbCreatedate span.datemonth {margin-right: 8px;}
div.jbCreatedate span.dateyear {
/* Read more */
div.jbReadmore {float: left;padding-left: 15px;margin-top: 8px;
.blog_more ul li a {background: #1a1a1a url(../images/divider.png) repeat-x left bottom;padding-bottom: 8px;border: none;display: block;}
ul.pagination {margin: 0;}
ul.pagination li {float: left;list-style-type: none;margin: 0 20px 0 0}
ul.pagination li a {border: 1px solid #2a2a2a;padding: 4px 8px}
ul.pagination li a:hover {background: #101010;border: 1px solid #333}
.mbRow {
.mbWrap {margin: 0 0 8px;}
.mbWrapFlat {padding: 16px 0 4px}
.mbitemFlat {width: 100%;}
.mbWrapFlat h2 a{margin-bottom: 8px;background: none;
.mbMoreFlat .readon {float: left;padding-left: 15px;
.slideshowImage img {border: 2px solid #121212}
.mbColImage img{margin: 0 0 4px;}
.mbitemCols h2 {display: block;margin: 0;padding: 0 0 4px;}
.moduletable-heading p {display: none}
ul.three{float: left;width: 30%;margin-right: 10px;display: block}
#right ul.three li {display: block;float: none;clear: both}
.border {border: 2px solid #121212;padding: 0}
#colorbox {color: #333}
.slideshowContent {color: #fff;}
th.pagenav_next {text-align: right;}
.results ol li {background: url(../images/divider.png) repeat-x left bottom;padding-bottom: 10px;margin-bottom: 10px;}
div.clear-body{display:none;}
Приложение В
Template.js
/*
* jquery.easyRotate 1.0 - 3-11-2010
* author: Jordan Andree (jordan@noblegiant.com)
* http://noblegiant.com
* Written to ease the implementation of element rotation for cross-browser support
* Feel free to do whatever you want with this file
*/
(function($){$.fn.extend({easyRotate:function(options){var defaults={degrees:0};var options=$.extend(defaults,options);return this.each(function(){var obj=this;var deg=options.degrees;var deg2radians=Math.PI*2/360;var rad=deg*deg2radians;var costheta=Math.cos(rad);var sintheta=Math.sin(rad);var a=parseFloat(costheta).toFixed(8);var c=parseFloat(-sintheta).toFixed(8);var b=parseFloat(sintheta).toFixed(8);var d=parseFloat(costheta).toFixed(8);var matrix="matrix("+a+", "+b+", "+c+", "+d+", 0, 0);";if(obj.filters){obj.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand');";obj.filters.item(0).M11=costheta;obj.filters.item(0).M12=-sintheta;obj.filters.item(0).M21=sintheta;obj.filters.item(0).M22=costheta}else{obj.setAttribute("style","position:absolute; -moz-transform: "+matrix+"; -webkit-transform: "+matrix+"; -o-transform: "+matrix+"")}})}})})(jQuery);
jQuery('#ribbon span').easyRotate({degrees: 45});
* Accordion Script
--------------------------------------------------------------------*/
jQuery(document).ready(function(){jQuery('.moduletable-panelmenu ul ul').hide();var cookieValue=jQuery.cookie('menuCookie')||'';jQuery('.moduletable-panelmenu ul > li > span').each(function(index){var $this=jQuery(this),$checkElement=$this.next('ul');if(cookieValue.indexOf(bigIndex(index))>-1){$checkElement.show()}$this.click(function(){if($checkElement.is(':hidden')){$checkElement.slideDown("fast");cookieValue=cookieValue+bigIndex(index);jQuery.cookie('menuCookie',cookieValue)}else{$checkElement.slideUp();cookieValue=cookieValue.replace(bigIndex(index),'');jQuery.cookie('menuCookie',cookieValue)}})});jQuery('button').click(function(){jQuery.cookie('menuCookie','',{expires:-1});jQuery('.moduletable-panelmenu > li ul').hide();showCookie()})});function bigIndex(inival){return inival<10?'0'+inival+'-':''+inival+'-'}
/*--------------------------------------------------------------------
* JQuery Cookie
--------------------------------------------------------------------*/
jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options.expires=-1}var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000))}else{date=options.expires}expires='; expires='+date.toUTCString()}var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('')}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break}}}return cookieValue}};
/*--------------------------------------------------------------------
* JQuery Superfish
--------------------------------------------------------------------*/
;(function($){$.fn.superfish=function(op){var sf=$.fn.superfish,c=sf.c,$arrow=$(['<span class="',c.arrowClass,'"></span>'].join('')),over=function(){var $$=$(this),menu=getMenu($$);clearTimeout(menu.sfTimer);$$.showSuperfishUl().siblings().hideSuperfishUl()},out=function(){var $$=$(this),menu=getMenu($$),o=sf.op;clearTimeout(menu.sfTimer);menu.sfTimer=setTimeout(function(){o.retainPath=($.inArray($$[0],o.$path)>-1);$$.hideSuperfishUl();if(o.$path.length&&$$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path)}},o.delay)},getMenu=function($menu){var menu=$menu.parents(['ul.',c.menuClass,':first'].join(''))[0];sf.op=sf.o[menu.serial];return menu},addArrow=function($a){$a.addClass(c.anchorClass).prepend($arrow.clone())};return this.each(function(){var s=this.serial=sf.o.length;var o=$.extend({},sf.defaults,op);o.$path=$('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){$(this).addClass([o.hoverClass,c.bcClass].join(' ')).filter('li:has(ul)').removeClass(o.pathClass)});sf.o[s]=sf.op=o;$('li:has(ul)',this)[($.fn.hoverIntent&&!o.disableHI)?'hoverIntent':'hover'](over,out).each(function(){if(o.autoArrows)addArrow($('>a:first-child',this))}).not('.'+c.bcClass).hideSuperfishUl();var $a=$('a',this);$a.each(function(i){var $li=$a.eq(i).parents('li');$a.eq(i).focus(function(){over.call($li)}).blur(function(){out.call($li)})});o.onInit.call(this)}).each(function(){menuClasses=[c.menuClass];if(sf.op.dropShadows&&!($.browser.msie&&$.browser.version<7))menuClasses.push(c.shadowClass);$(this).addClass(menuClasses.join(' '))})};var sf=$.fn.superfish;sf.o=[];sf.op={};sf.IE7fix=function(){var o=sf.op;if($.browser.msie&&$.browser.version>6&&o.dropShadows&&o.animation.opacity!=undefined)this.toggleClass(sf.c.shadowClass+'-off')};sf.c={bcClass:'sf-breadcrumb',menuClass:'sf-js-enabled',anchorClass:'sf-with-ul',arrowClass:'sf-sub-indicator',shadowClass:'sf-shadow'};sf.defaults={hoverClass:'sfHover',pathClass:'overideThisToUse',pathLevels:1,delay:800,animation:{opacity:'show'},speed:'normal',autoArrows:true,dropShadows:true,disableHI:false,onInit:function(){},onBeforeShow:function(){},onShow:function(){},onHide:function(){}};$.fn.extend({hideSuperfishUl:function(){var o=sf.op,not=(o.retainPath===true)?o.$path:'';o.retainPath=false;var $ul=$(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass).find('>ul').hide().css('visibility','hidden');o.onHide.call($ul);return this},showSuperfishUl:function(){var o=sf.op,sh=sf.c.shadowClass+'-off',$ul=this.addClass(o.hoverClass).find('>ul:hidden').css('visibility','visible');sf.IE7fix.call($ul);o.onBeforeShow.call($ul);$ul.animate(o.animation,o.speed,function(){sf.IE7fix.call($ul);o.onShow.call($ul)});return this}})})(jQuery);
/*
* Supersubs v0.2b - jQuery plugin
* Copyright (c) 2008 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*
* This plugin automatically adjusts submenu widths of suckerfish-style menus to that of
* their longest list item children. If you use this, please expect bugs and report them
* to the jQuery Google Group with the word 'Superfish' in the subject line.
*
*/
;(function($){$.fn.supersubs=function(options){var opts=$.extend({},$.fn.supersubs.defaults,options);return this.each(function(){var $$=$(this);var o=$.meta?$.extend({},opts,$$.data()):opts;var fontsize=$('<li id="menu-fontsize">—</li>').css({'padding':0,'position':'absolute','top':'-999em','width':'auto'}).appendTo($$).width();$('#menu-fontsize').remove();$ULs=$$.find('ul');$ULs.each(function(i){var $ul=$ULs.eq(i);var $LIs=$ul.children();var $As=$LIs.children('a');var liFloat=$LIs.css('white-space','nowrap').css('float');var emWidth=$ul.add($LIs).add($As).css({'float':'none','width':'auto'}).end().end()[0].clientWidth/fontsize;emWidth+=o.extraWidth;if(emWidth>o.maxWidth){emWidth=o.maxWidth}else if(emWidth<o.minWidth){emWidth=o.minWidth}emWidth+='em';$ul.css('width',emWidth);$LIs.css({'float':liFloat,'width':'100%','white-space':'normal'}).each(function(){var $childUl=$('>ul',this);var offsetDirection=$childUl.css('left')!==undefined?'left':'right';$childUl.css(offsetDirection,emWidth)})})})};$.fn.supersubs.defaults={minWidth:9,maxWidth:25,extraWidth:0}})(jQuery);
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/ varpopupStatus=0;function loadPopup(){if(popupStatus==0){jQuery("#backgroundPopup").css({"opacity":"0.7","background-color":"#FAFAFA"});jQuery("#backgroundPopup").fadeIn("slow");jQuery("#panelInner").fadeIn("slow");popupStatus=1}}function disablePopup(){if(popupStatus==1){jQuery("#backgroundPopup").fadeOut("slow");jQuery("#panelInner").fadeOut("slow");popupStatus=0}}function centerPopup(){var windowWidth=document.documentElement.clientWidth;var windowHeight=document.documentElement.clientHeight;var popupHeight=jQuery("#panelInner").height();var popupWidth=jQuery("#panelInner").width();jQuery("#panelInner").css({"position":"absolute","top":windowHeight/2-popupHeight/2,"left":windowWidth/2-popupWidth/2});jQuery("#backgroundPopup").css({"height":windowHeight})}jQuery(document).ready(function(){jQuery("#open").click(function(){centerPopup();loadPopup()});jQuery(".close").click(function(){disablePopup()});jQuery("#backgroundPopup").click(function(){disablePopup()});jQuery(document).keypress(function(e){if(e.keyCode==27&&popupStatus==1){disablePopup()}})});