Фгбоу впо «Сибирский государственный индустриальный университет»
Скачать 317.43 Kb.
|
Особенности создания сайта с помощью системы Joomla Каждая отображаемая страница динамических веб-сайтов основана на шаблонной странице, в которую вставляется постоянно меняющееся информационное наполнение, которое обычно хранится в базе данных. Когда пользователь запрашивает страницу, соответствующая информация извлекается из базы, вставляется в шаблон, образуя новую веб-страницу, и пересылается Web-сервером в пользовательский браузер, который и отображает ее должным образом. Кроме информационного наполнения, динамически могут создаваться также и элементы навигации по веб-сайту. Таким образом, если нужно обновить содержимое сайта, просто добавляется текст для новой страницы, который затем вставляется в базу данных. В результате получается, что веб-сайт как бы сам себя обновляет. Сразу после того как динамический сайт создан и запущен в работу, начинают проявляться его преимущества. Теперь имеется сравнительно небольшое количество шаблонных страниц, с помощью которых генерируются сотни или тысячи веб-страниц. Дизайн сайта может быть легко изменен с помощью модификации шаблонов. Изменение содержимого базы данных можно производить через веб-интерфейс с использованием HTML-формы, не вторгаясь при этом в технические детали каждой специфической СУБД. Создание динамического сайта с помощью системы Joomla! имеет ряд преимуществ перед другими CMS: - Joomla бесплатна; -Joomla развивается профессионалами уже > 5 лет (это не проект-однодневка); -система спроектирована под расширяемость. Изначально в нее заложена только база, все остальное можно дополнить исходя из направленности конкретного сайта; -более 3800 бесплатных и платных расширений; -система реализована по блочному принципу, что упрощает понимание системы; - Joomla позволяет создавать сайты любой сложности; - много бесплатных и платных шаблонов, которые легко модифицируются. Как устроен шаблон Joomla можно увидеть на рисунке 1.  Рисунок 1 – Составная часть шаблона Joomla index.php – отвечает за размещение элементов. Он указывает, где выводить основной текст, блоки, модули. template.css – отвечает за стили. Каким шрифтом будет отображаться текст на сайте, каким цветом будут ссылки, размер полей и т.д. На рисунке 2 представлено примерное строение сайта, созданного на основе системы Joomla.  Рисунок 2 – схема построение сайта.
Само по себе создание сайта – это отправная точка его жизни. Чтобы он давал какой-то эффект от своего существования, необходимо продумать этап его продвижения, а также заняться его поддержкой и обновлениями. Отсутствие таковых часто сводит на нет все преимущества даже отлично сделанного сайта. Сайт должен постоянно обновляться, он должен быть так же динамичен, как и ваш бизнес, а ещё лучше, если его динамика гораздо выше. Это покажет клиентам, что вы постоянно находитесь в работе и никуда не пропадаете. Стоит также периодически думать об улучшениях и доработках сайта, так как в процессе пользования сайтом у пользователей будут возникать какие-то предложения, трудности и замечания. Продвижение сайта стоит намного дешевле в расчёте на целевого клиента, чем реклама на радио, ТВ и печатных изданиях. Через интернет приходят только целевые посетители, которые действительно ищут именно ваши товары и услуги. Нужно дать им возможность увидеть ваш сайт. Для этого необходимо всего лишь быть в первой десятке поисковиков. Способы рекламы сайта: - реклама по целевым запросам: контекстная реклама (Яндекс.Директ, Бегун (begun.ru) и Google.Adwords); - продвижение в поисковых системах. Цель - попасть в первую десятку (или двадцатку) запросов, привлнчь как можно больше целевых посетителей к вам на сайт и побудить их к действию, а именно покупке вашей продукции (услуги). При продвижении сайта необходимо учитывать следующие моменты: - медленно загружается: по статистике, для того чтобы понять, тот это сайт или нет и принять решение уйти или остаться, пользователю надо не более семи секунд. Именно секунды решают всё в борьбе за пользователя, который может стать вашим клиентом, партнёром или инвестором; - отсутствие той информации, которую он хочет получить от Вас: информация должна легко находиться; - привычки людей в отношении пользования сайтами: привычная структура на сайте позволяет пользователю быстро и чётко адаптироваться к нему и ориентироваться. Средства и способы продвижения подбираются индивидуально исходя из целей и бюджетов продвижения. 2 Практическая часть Задачей данной выпускной квалификационной работы является создание веб-сайта с функцией обратной связи и применение дополнительных функций. Поставленные задачи решаются последовательно. Сначала мы разработали и создали основную часть сайта, затем создали базу данных, установили функцию обратной связи, модуль Fhoca Gallery. 2.1 Построение основной части сайта Для решения задачи построения основной части сайта, основную задачу можно разделить на следующие подзадачи:
Теперь решаем каждую из подзадач последовательно. Разработка макета дизайна сайта. В первую очередь была разработана концепция дизайна сайта. Вся информация на сайте должна быть удобна для использования и поиска информации. На рисунке 3 представлен эскиз расположения основных блоков сайта на главной странице.  Рисунок 3 - Эскиз расположения основных блоков сайта на главной странице. Макет сайта представлен на рисунке 4. - Основная панель навигации (левая часть) – здесь находится строка поиска и располагается главное меню сайта, каталоги одежды, форма обратной связи, контактная информация, карта сайта. - Основной информационный блок (занимает большую часть экрана) – в этой части, на главной странице, располагаются предложения Дизайн-Студии.  Рисунок 4 - Макет главной страницы сайта Организация навигации сайта Вертикальное меню. Для основной навигации на сайте решено сделать вертикальное меню с выделяющими названиями категорий (Рисунок 10). Данный тип навигации отличается удобством для пользователя сайта. Такое меню корректно отображается в браузерах Mozila Firefox, Safari, Opera и Internet Explorer. Для того чтобы позиционирование меню было одинаково корректным во всех браузерах и одинаково отображалось на мониторах разного разрешения, нужно привязать его к одному из модулей (к логотипу, позиционирование которого однозначно). Главная страница является визиткой с описанием сути проекта. Это сделано для того, что бы было сразу понятно, для чего и для кого этот сайт. Предполагается, что не заинтересованный человек просто выйдет, а тех, кто в этом заинтересован, примут участие в развитии проекта. На главной странице логотип, который, по сути, продиктовал стиль оформления сайта. Оформление и шапка сайта не меняются в разделах. Общий вид сайта представлен на нижеследующих рисунках:  Рисунок 5 – Главное меню сайта (блок слева)  Рисунок 6 – Главное меню сайта (История моды)  Рисунок 7– Главное меню сайта ( Каталоги одежды)  Рисунок 8 – Увеличенное изображение модели одежды из любого каталога сайта.  Рисунок 9 – Контакты Дизай-Студии на сайте. 2.2 Программно-технические средства Для решения поставленной задачи использовались следующие средства: Компьютер с ОС Windows 7, с выходом в интернет, на который были установлены - Сервер Apache 2.2 - Dreamweaver CS5 - MySQL 5.1.49 - Joomla 1.5. - PHP 5.2.7 - phpBB - EasyCaptcha - ArtForms - Phoca Gallery - Графические редакторы Photoshop и CorelDRAW - Все эти и другие средства использовались в той или иной мере. 2.3 Установка программного обеспечения После установки пакета программ Denwer и запуска web-сервера, необходимо в адресной строке интернет – браузера ввести следующий адрес: «http://localhost/». На экран будет выведена информация о web-сервере и список необходимых для работы ссылок. Данный список представлен на рисунке 10. Для начала проектирования базы данных необходимо запустить web–интерфейс phpMyAdmin, для этого нужно перейти по ссылке «http://localhost/phpmyadmin» . Как установить PHPMyAdmin? В пакете Denwer он уже встроен, поэтому можно просто перейти по адресу: http://localhost/tools/phpmyadmin, и мы сразу попадаем в PHPMyAdmin. Загрузится web – интерфейс для работы с СУБД MySQL. Сначала необходимо создать базу данных. После создания базы данных необходимо создать таблицу. Для создания таблицы нужно в поле «имя» указать имя таблицы, в поле «поля» указать количество полей таблицы и нажать кнопку «пошел». Далее указываем имя каждого поля и тип, так же необходимо указать первичный ключ. После этого заполнить таблицу данными.  Рисунок 10 - Список необходимых данных для работы с web-сервером ссылок Для хранения практически всей информации о сайте Joomla используем базу данных MySQL. Она позволяет хранить значительные объемы данных, при этом предоставляет нам удобный интерфейс для взаимодействия с ней. Для сайта-каталога моделей одежды мы создаем базу данных, в которой создаются и хранятся таблицы для четкого разделения хранящейся на сайте информации. В базе данных основной сущностью является категория продукции, принадлежащая некоторому разделу. Взаимодействие основных сущностей представлено на ER-диаграмме (Приложение). Основные параметры, которые присутствуют во всех сущностях – это заголовок, псевдоним, статус публикации, порядок показа. Во всех сущностях кроме базовой сущности Раздела важным является принадлежность к вышестоящей сущности. Поисковая оптимизация (англ. search engine optimization, SEO) — комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей. Одним из важнейших параметров каждой из сущностей является псевдоним, т.к. если включить SEO-оптимизацию в Joomla! в строке с адресом доступа будут отображаться псевдонимы разделов, категорий или материала, которая удобнее для восприятия пользователем. Например: http://www.test1.ru/index.php/bags-photo - ссылка с включенной SEO-оптимизацией, или обычная ссылка http://www.test1.ru/index.php?option=com_content&view=article&id=48&Itemid=34 Установка системы управления контентом сайта и дополнение ее под задачи сайта. Загружается актуальная версия Joomla, на данный момент Joomla 1.5. Разархивируются файлы дистрибутива Joomla в корневой каталог сервера ( C:\WebServers\home\test1.ru\www - для локального сервера). Открывается интернет-браузер и вводится адрес: www.test1.ru , загрузится веб-инсталлятор Joomla. Нужно выполнить пошаговые действия:
 Рисунок 11 – Лицензия Joomla!
- Настройка Joomla! для подключения к базе данных MySQL. Показана на рисунке 13. Имя хоста MySQL - localhost Имя пользователя MySQL - root Пароль доступа к БД MySQL Имя БД MySQL - rebaz Префикс таблиц БД MySQL – rebaz Joomla! предоставляет возможность удаления существующих таблиц (Drop Existing Tables), как и возможность создания резервной копии старых таблиц (Backup Old Tables). При первой инсталляции необходимо оставить эти флажки пустыми. Программа установки Joomla! Создаст необходимые таблицы и разместит в них пробную информацию. Следующая страница отобразит список ошибок, если они возникли при установке базы данных.  Рисунок 12 – Настройка Joomla! для подключения к базе данных MySQL - Название сайта. Необходимо ввести название сайта. Это название отображается в заголовке окна браузера, при обращении в web-сайту и в Административной панели. В данном случае Сайт о моде. - Подтверждение параметров настройки. Проверяется: абсолютный путь и url сайта. Вводится e-mail и пароль администратора. Это все основные этапы установки Joomla! После завершения установки можно перейти в панель Администратора www.test1.ru/administrator и выполнить основные настройки сайта. 2.4 Организация обратной связи на сайте Для удобства посетителей сайта кроме контактной информации, создана форма обратной связи, ведь заполнить поля ввода легче и быстрее, чем сформулировать текст письма и его структуру. Более всего для создания форм к сайту Перемена подходит компонент ArtForms для Joomla! 1.5. Этот компонент дает широкие возможности для создания разнообразных индивидуальных форм на сайте. ArtForms имеет следующие преимущества: - неограниченное количество форм и полей; - сохранение форм в базе данных; - индивидуальный стиль для разных полей; - поддержка Captcha. Этапы создания «обратной связи»: Планирование полей, которые должна содержать обратная связь и анализ степени важности этих полей (обязательно для заполнения, необязательно для заполнения), определение типа поля (ввод данных, текстовое поле, выбор, пароль). Форма обратной связи для данного сайта должна содержать следующие поля с указанием (в скобках) типа поля: - обязательные - имя отправителя (ввод данных), e-mail отправителя (ввод данных), текст сообщения (текстовое поле); - необязательные – тема сообщения (ввод данных). Установка компонента ArtForms через Установку/Удаление расширений в Административной панели Joomla! Настройка формы (происходит во вкладке Формы) – название формы, электронный адрес получателя формы, отправка копии формы клиенту (да/нет), пользовательский JavaScript код, загрузка пользовательского CSS-кода, возможность включения проверочной системы (Captcha), указать параметры публикации. Для сайта используются следующие настройки: - название формы – «напишите нам»; - e-mail адрес - tyci4@rambler.ru; - проверочная система – Captcha Form. Разрешение загрузки файлов – если загрузка разрешена, то определяется размер прикрепляемого файла, количество вложенных файлов, выбор разрешенных типов файлов. Для вложения используются следующие типы файлов: doc (Microsoft Word), pdf (Adobe Acrobat), gif, jpg, png, cdr (Corel Draw), psd (Adobe Photoshop). Создаются поля обратной связи в соответствии с типом поля, важностью выполнения, если необходимо выполняется проверка полей, например, проверка e-mail или номера. Интерфейс формы обратной связи приведен на рисунке 13.  Рисунок 13 - Интерфейс формы обратной связи. Все данные компонента ArtForms хранятся в базе данных: в таблице jos_artforms – параметры формы, jos_artforms_inbox – входящие сообщения, в jos_artforms_items – поля таблицы и их свойства. Принцип работы формы: после заполнения пользователем полей, и нажатия кнопки «Отправить» форма проверяет была ли произведена попытка заполнения, затем проверяется были ли заполнены все обязательные поля и правильность введения Captcha, если поля заполнены не верно или не заполнены, форма выдает сведения об ошибке. Если все верно, то с помощью команды sendmail отправляется сообщение на указанный электронный адрес. А пользователь видит текст сообщения «Форма успешно отправлена, мы свяжемся с Вами как можно скорее». |
Похожие:
 | Московский государственный индустриальный университет (фгбоу впо «мгиу») утверждаю Умк составлен на основании Государственного образовательного стандарта высшего профессионального образования и типовой (примерной)... | | Московский государственный индустриальный университет (фгбоу впо «мгиу») утверждаю Умк составлен на основании Государственного образовательного стандарта высшего профессионального образования и типовой (примерной)... |
 | Основная образовательная программа магистратуры, реализуемая фгбоу... Фгбоу впо «Чувашский государственный университет имени И. Н. Ульянова» по направлению подготовки 210700 Инфокоммуникационные технологии... | | Методические указания к выполнению семинарских занятий учебной дисциплины... «Московский государственный индустриальный университет» в г. Вязьме Смоленской области (филиал фгбоу впо «мгиу» в г. Вязьме) |
| Фгбоу впо «дагестанский государственный аграрный университет имени М. М. Джамбулатова» Фгбоу впо «дагестанский государственный аграрный университет имени М. М. Джамбулатова» (Лицензия: серия 09Л01 №0000564, регистрационный... | | Дипломного проекта/работы В соответствии с Уставом фгоу впо «Сибирский федеральный университет» и Положением об итоговой государственной аттестации выпускников... |
| Фгбоу впо «Санкт-Петербургский государственный политехнический университет» Правила приема в Государственный университет – Высшую школу экономики в 2010 году | | Федеральное государственное бюджетное образовательное учреждение... Федеральных государственных требований к структуре основной профессиональной образовательной программы послевузовского профессионального... |
| Фгбоу впо «Красноярский государственный педагогический университет... Фгбоу впо «Красноярский государственный педагогический университет им. В. П. Астафьева» | | Федеральное агентство по рыболовству Федерального государственного бюджетного образовательного учреждения высшего профессионального образования «Дальневосточный государственный... |
| П. К. Рыбин фгбоу впо «Петербургский государственный университет путей сообщения» Программу составили: к т н профессор П. К. Рыбин – фгбоу впо «Петербургский государственный университет путей сообщения» | | Правила приёма в аспирантуру фгбоу впо «Брянский государственный... Фгбоу впо «Брянский государственный университет имени академика И. Г. Петровского» |
| Сибирский федеральный университет Дробница Августина Васильевна доктор исторических наук, профессор кафедры истории и культуры фгбоу впо «Дальневосточный институт-филиал... | | Ю. А. Безруких (к э. н., ст преподаватель), С. О. Медведев (ассистент, аспирант) Лесосибирск, гоу впо «Сибирский государственный технологический университет» Лесосибирский филиал |
| Фгбоу впо «Российский государственный педагогический университет им. А. И. Герцена» Фгну «Институт педагогического образования и образования взрослых рао»; кафедрой социальной педагогики фгбоу впо ргпу им. А. И. Герцена;... | | Отчет о реализации программы развития Фгбоу впо «Южно-Уральский государственный университет» (национальный исследовательский университет) |
