Сайт-каталог моделей одежды с функцией заказа на индивидуальный пошив

 

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

к выпускной квалификационной работе

Сайт-каталог моделей одежды с функцией заказа на индивидуальный пошив

Введение

интернет сайт продвижение каталог

Интернет - это Всемирная (Глобальная) Паутина. Это не поэтическая метафора, а расшифровка символов WWW - World Wide Web.страницы (веб-страницы) - гипертекстовые документы. Веб-страницы, объединенные одной темой, имеющие одинаковый дизайн и находящиеся на одном веб-серверы, представляют собой веб-сайт. Просматривать веб-страницы можно с помощью специальной программы - браузера.

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

Произнося сегодня слово «Интернет» большинство не думает о технической стороне дела. Что может дать Интернет человеку? Что такое Интернет в человеческом сознании?

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

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

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

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

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

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

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

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

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

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

Задачи:

1)проанализировать информацию по видам веб-сайтов и способам их создания;

2)систематизировать данные по разработке веб-сайтов и их продвижению в сети Интернет;

)разработать сайт-каталог с возможностью заказа (функцией обратной связи)

Метод исследования: изучение документов, литературы, экспериментальная работа.

1. Теоретическая часть

1.1 Создание сайта

Изготовление сайтов как работающих целостных информационных ресурсов и систем - составной процесс, вовлекающий труд различных специалистов. Этот вид деятельности называется веб-разработка. Владельцы будущего сайта (частные лица или организации) разрабатывают сайты своими силами, либо обращаются к специализированным разработчикам (фрилансерам, студиям, бюро, конторам и т.п.). Отношения между заказчиком и исполнителем регулируется с помощью договоров, технических заданий, специальных систем (различных сайтов, выступающих посредником между заказчиком и фрилансерами), либо устной договорённостью. Заказанная работа может представлять собой как полный комплекс создания сайта, вплоть до придумывания названия и регистрации домена, так и расширение сайта, техническую оптимизацию и редизайн. Всё больше разработка и сопровождение сайта (портала) становится мощным сегментом активов предприятий (организаций). Поэтому разработчиков предпочитают штатных или поручают проект вести одному из директоров аппарата управления (коммерческий директор, директор департамента по связям или непосредственно руководителю проекта с группой штатных специалистов и / или совместителей). Особую роль выполняют «тестеры» конечного продукта. Это ответственная роль в продвижении и оценке проекта, так как стадия разработки для динамического большого проекта никогда не прекращается. Если вы видите сайт невредимым 2-3 года без изменений, то он возможно никому не нужен, то ли пользуется спросом на базисную информацию. Но сопровождение проекта становится не менее ответственным делом.

1.2 Виды сайтов

Сайт-презентация

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

Корпоративный сайт

Сайт представительство организации / фирмы / корпорации. К оформлению подобных сайтов, и информации в нем (а так же к балансу графики и текста), предъявляются высокие требования. Модульная сетка, обычно, 2-3х колоночная. Сайт должен соответствовать фирменному стилю и в структуре информации и в цветовой гамме.

Информационные ресурсы (Электронные библиотеки, газеты)

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

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

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

Электронный магазин

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

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

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

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

Контент-проект

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

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

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

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

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

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

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

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

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

1.3Разделы сайтов

Сайт компании - это 90% текстовой информации. Исключение могут составлять только имиджевые сайты. Остальные 10% составляет графика, анимация, презентации, аудио / видео информация. Сайт имеет множество сервисов, которые по своей природе интерактивны. Рассмотрим основные разделы, встречающиеся на большинстве сайтов.

Главная страница

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

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

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

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

Страница новостей

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

Страница статей

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

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

FAQ

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

Контакты

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

Возможно размещение поля, где пользователь может указать, где он узнал о вашей организации.

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

Форум

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

Форум - это достаточно быстрый и удобный способ решить какую-то проблему, или получить ответ по какому-то вопросу.

Календарь событий

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

Подписка

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

Каталог продукции

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

В каталогах можно сделать интеграцию с различными системами учёта продукции (например «1C Предприятие»).

1.4Теоретические основы создания веб-сайтов

Способы создания веб-сайтов

Существую следующие способы создания веб-сайта.

Создать сайт при помощи программирования, используя языки програмирования html, css, php, flash.

Плюсы: сайт содержит только то, что на самом деле нужно для его работы, поэтому он работает быстро и не нагружает сервер; вы на 100% знаете, как он устроен и в любой момент можете его изменить, что-то добавить или убрать.

Минусы: большие временные затраты; ограниченная функциональность (сложность в написании скриптов); возможные недочеты в системе безопасности; умение работать с локальным сервером и уметь переносить данные и БД на сервер.

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

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

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

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

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

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

Минусы: полная зависимость от сервиса.

Создать сайт на CMS.

Существуют платные и бесплатные CMS (англ. Content Management System) - системы управления сайтом. Все они очень функциональны.

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

Минусы: необходимо уметь работать с локальным сервером; сайты на CMS «тяжелее», чем самописные сайты.

Информационное, программное и техническое обеспечение работы веб-сайта

Информационное обеспечение.

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

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

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

Программное и техническое обеспечение.

Для создания сайта на локальном компьютере (с операционной системой Windows или Unix), необходимо иметь следующее программное обеспечение:

Редактор, способный сохранить на диске текстовый файл (для создания HTML или XHTML документов), можно использовать программы с подсветкой кода, например, Notepad или Adobe Dreamweawer.

Web-сервер Apache - программное обеспечение, отвечающее за отображение документов, запрашиваемых при наборе URL-адреса в командной строке Web-браузера. Основными достоинствами Apache считаются надёжность и гибкость конфигурации. Он позволяет подключать внешние модули для предоставления данных, использовать СУБД для аутентификации пользователей, модифицировать сообщения об ошибках. Он используется для создания динамичного сайта с использованием языков программирования. [4]

- Интерпретатор PHP - для выполнения программ, написанных на зыке PHP.

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

PhpMyAdmin - набор скриптов на PHP для управления базами данных. [6]

браузер - программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), их обработки, вывода и перехода от одной страницы к другой. Желательно установить несколько самых популярных браузеров, чтобы иметь возможность увидеть результаты работы и вовремя отреагировать на некорректный вывод изображения каким-либо браузером. Самые популярные на сегодняшний день браузеры: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari и Opera.

Особенности создания сайта с помощью системы Joomla

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

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

Создание динамического сайта с помощью системы Joomla! имеет ряд преимуществ перед другими CMS:

Joomla бесплатна;

Joomla развивается профессионалами уже > 5 лет (это не проект-однодневка);

система спроектирована под расширяемость. Изначально в нее заложена только база, все остальное можно дополнить исходя из направленности конкретного сайта;

более 3800 бесплатных и платных расширений;

система реализована по блочному принципу, что упрощает понимание системы;

Joomla позволяет создавать сайты любой сложности;

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

Как устроен шаблон Joomla можно увидеть на рисунке 1.

Рисунок 1 - Составная часть шаблона Joomla

index.php - отвечает за размещение элементов. Он указывает, где выводить основной текст, блоки, модули.

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

На рисунке 2 представлено примерное строение сайта, созданного на основе системы Joomla.

Рисунок 2 - схема построение сайта

1.5Поддержка, обслуживание и продвижение сайтов

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

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

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

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

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

Способы рекламы сайта:

реклама по целевым запросам: контекстная реклама (Яндекс. Директ, Бегун (begun.ru) и Google. Adwords);

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

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

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

отсутствие той информации, которую он хочет получить от Вас: информация должна легко находиться;

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

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

2. Практическая часть

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

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

2.1 Построение основной части сайта

Для решения задачи построения основной части сайта, основную задачу можно разделить на следующие подзадачи:

1.Разработка макета дизайна сайта.

2.Организация навигации сайта

.Установка системы управления контентом сайта и определение ее дополнений под задачи сайта.

Теперь решаем каждую из подзадач последовательно.

Разработка макета дизайна сайта

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

Рисунок 3 - Эскиз расположения основных блоков сайта на главной странице

Макет сайта представлен на рисунке 4.

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

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

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

Организация навигации сайта

Вертикальное меню. Для основной навигации на сайте решено сделать вертикальное меню с выделяющими названиями категорий (Рисунок 10). Данный тип навигации отличается удобством для пользователя сайта. Такое меню корректно отображается в браузерах Mozila Firefox, Safari, Opera и Internet Explorer.

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

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

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

Общий вид сайта представлен на нижеследующих рисунках:

Рисунок 5 - Главное меню сайта (блок слева)

Рисунок 6 - Главное меню сайта (История моды)

Рисунок 7 - Главное меню сайта (Каталоги одежды)

Рисунок 8 - Увеличенное изображение модели одежды из любого каталога сайта

Рисунок 9 - Контакты Дизай-Студии на сайте

.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-сервера, необходимо в адресной строке интернет - браузера ввести следующий адрес: «#"justify">Как установить PHPMyAdmin? В пакете Denwer он уже встроен, поэтому можно просто перейти по адресу: #"justify">Загрузится web - интерфейс для работы с СУБД MySQL. Сначала необходимо создать базу данных. После создания базы данных необходимо создать таблицу. Для создания таблицы нужно в поле «имя» указать имя таблицы, в поле «поля» указать количество полей таблицы и нажать кнопку «пошел». Далее указываем имя каждого поля и тип, так же необходимо указать первичный ключ. После этого заполнить таблицу данными.

Рисунок 10 - Список необходимых данных для работы с web-сервером ссылок

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

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

Поисковая оптимизация (англ. search engine optimization, SEO) - комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей.

Одним из важнейших параметров каждой из сущностей является псевдоним, т.к. если включить SEO-оптимизацию в Joomla! в строке с адресом доступа будут отображаться псевдонимы разделов, категорий или материала, которая удобнее для восприятия пользователем. Например: #"justify">Установка системы управления контентом сайта и дополнение ее под задачи сайта

Загружается актуальная версия Joomla, на данный момент Joomla 1.5. Разархивируются файлы дистрибутива Joomla в корневой каталог сервера (C:\WebServers\home\test1.ru\www - для локального сервера). Открывается интернет-браузер и вводится адрес: www.test1.ru, загрузится веб-инсталлятор Joomla. Нужно выполнить пошаговые действия:

1.Проверка системы и принятие лицензии. Joomla! проверяет настройки сервера, является ли сервер подходящим для того, чтобы установить Joomla! Затем должна загрузиться страница с лицензией GNU/GPL, которую нужно прочитать и принять (Рисунок 12).

Рисунок 11 - Лицензия Joomla!

1Основная настройка и установка Joomla!

Настройка Joomla! для подключения к базе данных MySQL. Показана на рисунке 13.

Имя хоста MySQL - localhost

Имя пользователя MySQL - root

Пароль доступа к БД MySQL

Имя БД MySQL - rebaz

Префикс таблиц БД MySQL - rebaz! предоставляет возможность удаления существующих таблиц (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 адрес - [email protected];

проверочная система - 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 отправляется сообщение на указанный электронный адрес. А пользователь видит текст сообщения «Форма успешно отправлена, мы свяжемся с Вами как можно скорее».

2.5 Организация фото-галереи на сайте

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

Сначала надо скачать компонет и плагин к себе на компьютер. Установка расширения, как всегда, происходит из администраторской зоны: Расширения - Установка и удаление.

Рисунок 14 - Установка модуля Phoca Galery

Нажимаем на кнопку Обзор, выбираем сначала компонент com_phocagallery_v2.7.1.zip и нажимаем на кнопку Закачать файл. После установки компонента он появится в списке Компоненты - Phoca Galery.

Заключение

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

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

Были определены задачи, которые поможет решить веб-сайт. Изложен процесс разработки сайта-каталога для компании «Уникальность». Основные этапы разработки основной части сайта: разработка макета дизайна сайта, установка системы управления контентом сайта Joomla и дополнение ее под задачи сайта, разработка шаблонной страницы сайта и создание основных модулей сайта.

Список использованных источников

1.Дизайн-студия Smart [Электронный ресурс]: типы сайтов, или классификация интернет ресурсов. Режим доступа: http://www.smart-web.ru/types-of-sites.html - 07.05.2012.

2.Дизайн-студия Trilan [Электронный ресурс]: разработка и создание сайтов. Режим доступа: http://develop.trilan.ru - 07.05.2012.

3.Веб-студия BSWS [Электронный ресурс]: информационное обеспечение сайта. Режим доступа: http://bsws.com.ua/ru/teoriya/stati.html - 08.05.2012.

4.Russian Apache - сайт о сервере Apache [Электронный ресурс]: краткий обзор сервера. Режим доступа: http://apache.lexa.ru/intro.html - 08.05.2012.

.Колесниченко Д.Н. PHP 5/6 и MySQL 6. Разработка Web-приложений. - 2-е изд., перераб. И доп. - СПб.: БХВ-Петербург, 2010. - 560 с.: ил.

6.phpMyAdmin по-русски [Электронный ресурс]: описание приложения. Режим доступа: http://php-myadmin.ru/about/notice.html - 10.05.2012.

.Портал о веб-технологиях [Электронный ресурс]: основы и синтаксис PHP. Режим доступа: http://php.su/learnphp/? syntax - 13.05.2012.

.Курс PHP [Электронный ресурс]: типы данных, переменные и операторы в PHP / Артемьев С.И. Режим доступа: http://on-line-teaching.com/php/struct.types.htm - 13.05.2012.

.Портал о веб-разработке [Электронный ресурс]: циклы в PHP. Режим доступа: http://wcode.ru/php/89 - 13.05.2012.

10. Дюбуа П. MySQL. Полное и исчерпывающее руководство по применению и администрированию баз данных MySQL, а также программированию приложений [Текст]: учебник - 2-е изд. - пер. с англ. - М.: Изд. дом «Вильямс», 2004. - 1056 с.

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА к выпускной квалификационной работе Сайт-каталог моделей одежды с функцией з

Больше работ по теме: