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

29

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

Введение

сайт гипертекстовый язык программный

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

· расширения бизнеса;

· увеличения продаж имеющихся товаров и услуг;

· поднятие рейтинга фирмы и её товаров;

· рекламы;

· поиска новых клиентов и партнёров.

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

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

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

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

Целью дипломной работы является создание презентационного сайта предприятия “Царь Мебель”. Для реализации поставленной цели необходимо решить следующие задачи:

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

· рассмотреть основные понятия web-технологий

· создать дизайн сайта;

· провести анализ программных средств для разработки web-сайтов;

· создать шаблон сайта с помощью html и CSS;

· изучить CMS joomla ;

· создать динамический сайт;

· разместить сайт на хостинг;

Вид исследований - прикладной.

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

Объектом исследования является процесс разработки сайта средствами web-технологий, в частности применение гипертекстового языка html и CMS Joomla для вёрстки страниц.

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

Сокращения:

Аббревиатура	Полное название
ОС	Операционная система
ПО	Программное обеспечение
с	страница
СУБД	Системма управлемния бамзами дамнных
CSS	Cascading Style Sheets - язык иерархических стилевых спецификаций
CSS	Cascading Style Sheets «каскадные таблицы стилей»
DNS	Domain Name System -- система доменных имён
ECMAScript	встраиваемый расширяемый не имеющий средств ввода/вывода язык программирования
ed	Вариант частного домена
e-mail	electronic mail Электромнная помчта
fr	.fr (фр. France) -- национальный домен верхнего уровня для Франции.
FTP	File Transfer Protocol - протокол передачи файлов
GB	Gigabyte гигабайт
ge	.ge -- национальный домен верхнего уровня для Грузии.
gif	Graphics Interchange Format - формат для обмена изображениями
GNU	Универсальная общественная лицензия GNU или Открытое лицензионное соглашение GNU
GPL	General Public License Универсальная общедоступная лицензия
HTML	Hyper Text Markup Language язык разметки гипертекстовых документов
HTML	HyperText Markup Language «язык разметки гипертекста»
jpeg	Joint Photographic Experts Group, по названию организации-разработчика
jpg
MB	Megabyte мегабайт
MySQL	свободная реляционная система управления базами данных
PHP	Personal Hypertext Preprocessor персональный гипертекстовый процессор
png	portable network graphics, растровый формат хранения графической информации.
PostgreSQL	свободная объектно-реляционная система управления базами данных
RTF	Rich Text Format вид текстового файла
ru	национальный домен верхнего уровня для России
SGML	Standard Generalized Markup Language стандартный обобщённый язык разметки
SSI	Server Side Includes -- включения на стороне сервера
SVG	Scalable Vector Graphics «масштабируемая векторная графика»
uk	.uk -- национальный домен верхнего уровня для Великобритании.
URL	Uniform Resource Locator единообразный локатор
web	World Wide Web Всемимрная паутимна
WWW	World Wide Web
XHTML	The Extensible HyperText Markup Language расширяемый язык разметки гипертекста
XHTML	Extensible Hypertext Markup Language «расширяемый язык разметки гипертекста»
XML	eXtensible Markup Language расширяемый язык разметки
XSLT	eXtensible Stylesheet Language Transformations язык преобразования XML-документов

Обозначения:

Вид	Значение
Amazon	Популярный сайт магазин
Artisteer	Программа для создания шаблонов
Background-color	Свойство CSS
Background-image	Свойство CSS
banner	Позиция в шаблоне
border	Свойство CSS
cherry_picker	Модуль для joomla
color	Свойство CSS
com_virtuemart	Модуль для joomla
DJ Image Slider	Модуль для joomla
DJ Image Slider	Модуль для joomla
Drupal	CMS движок
em	Параметр для отображения величины в css
FastSeller	модуль
Firebug	Программа для отладки веб страниц
Font-family	Свойство CSS
Font-size	Свойство CSS
Google	Поисковик
Google Chrome	Браузер
heilght	Свойство CSS
Image MooTools Slideshow	Модуль для joomla
Internet Explorer	Браузер
JAVASCRIPT	язык программирования
joomla	CMS движок
LINUX	операционная система
margin	Свойство CSS
Mozilla Firefox	Браузер
Newegg	Популярный сайт магазин
notepad++	Блокнот с подсветкой кода
On-line	находящийся в состоянии подключения
Opera	Браузер
overflow	Свойство CSS
padding	Свойство CSS
photoshop	Программа для редактирования и создания изображений
phpMyAdmin	веб-приложение с открытым кодом, написанное на языке PHP и представляющее собой веб-интерфейс для администрирования СУБД MySQL.
position	Свойство CSS
right	Позиция в шаблоне
Safari	Браузер
top	Свойство CSS
top	Позиция в шаблоне
User 3	Позиция в шаблоне
Vmbreadz	Сайт с модулями для магазина
width	Свойство CSS
WINDOWS	операционная система
WordPress	CMS движок
Yahoo	поисковик
z-index	Свойство CSS
.htm	Расширение документа
.html	Расширение документа
.fr	домен
.uk	домен
.ge	домен
.ed	домен
<html>	Тег языка html
<head>	Тег языка html
<title>	Тег языка html
<div>	Тег языка html
<link>	Тег языка html
<span>	Тег языка html
<p>	Тег языка html
<hr>	Тег языка html
<a>	Тег языка html
<table>	Тег языка html
<tr>	Тег языка html
<td>	Тег языка html
<nav>	Тег языка html
<ul>	Тег языка html
<li>	Тег языка html
<img>	Тег языка html
<adress>	Тег языка html
<form>	Тег языка html

Глава 1. Теоретические аспекты создания сайта

1.1 Сайт для предприятия и выбор нужной типовой модели

“Сайт - совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённых под одним адресом (доменным именем или IP-адресом).” [18, с.9]

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

Основной задачей сайта является организация информации. Тем самым на сайтах она подаётся в виде организационных потоков для привлечения новых посетителей.

Сайт нужен для решения следующих задач:

· создание связей с новыми и уже с существующими партнёрами;

· организация каталогов с целью ознакомления их посетителями;

· информационное обслуживание, представительские функции;

· продажи товаров, услуг;

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

· проведение акций с целью высокого торгового оборота;

· установление связи с территориально распределенными офисами компании;

· снятие временного ограничения по доступу к информации компании. Интернет офис двадцать четыре часа;

· развитие сайта как отдельного вида бизнеса;

· поддержка акций для проведения вне сети интернет;

· развитие базы компании;

· привлечение новых клиентов.

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

Главной целью разработки веб-сайта является создание важного инструмента развития бизнеса. Причиной создания собственного сайта может стать появление web-сайта у конкурента.

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

1.Сайт - визитка такой сайт является продолжением визитной карточки. Отсюда и его название - "Сайт визитка". Сайт визитка может быть корпоративным или частным.

На страницах сайта визитки находится основная информация о компании или частном лице, предназначенная для партнёров, клиентов, друзей. Сайт визитка обычно имеет объем от одной до пяти или десяти страниц.

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

2. Корпоративный информационный web-сайт - необходим для автоматизации внутреннего документооборота, учёта показателей компании, управления персоналом. Может быть оснащён функциями обмена информацией между удалёнными филиалами. Корпоративный сайт позитивно влияет на репутацию и имидж компании; дизайн должен соответствовать фирменному стилю компании. Чаще всего, включает «администраторскую часть» для создания и изменения контента, позволяющую менеджеру или секретарю компании добавлять или менять новости, информационные статьи, справочную и прочую информацию. На таком сайте используется минимум графики, основной упор идет на текст.

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

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

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

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

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

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

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

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

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

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

11. Блог - это сайт, представляющий собой интернет-дневник, или журнал, который ведется наподобие новостной ленты, при этом на каждую тему блога посетители могут оставлять свои комментарии-сообщения, доступные с главной страницы соответствующей темы. Блог обычно очень часто обновляется, по этой причине он может намного чаще индексироваться поисковыми машинами, чем обычные сайты. [35]

Используется для общения людей объединенных какими-либо общими интересами.

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

Для предприятия “Царь Мебель” подходит вариант промо-сайта в сочетании с функциями интернет - магазина, такой своеобразный mix может в полной мере отобразить потребности сегодняшнего дня на мировом рынке.

1.2 Выбор инструментальных средств для разработки сайта

При выборе инструмента для создания сайта необходимо изначально определиться с масштабностью проекта и его целями. Так как необходимо создать промо-сайт, то нет смысла покупать программное обеспечение для разработки в связи с тем, что на рынке ПО представлено большое количество программ: WordPress, Joomla, Drupal. Для того чтобы сделать правильный выбор необходимо знать преимущества и недостатки каждого их них.

Система WordPress -- предназначена для управления содержимым сайта. Написана на PHP, в качестве базы данных использует MySQL. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать практически любые проекты.

Необходимо рассмотреть преимущества данной системы:

· может быть использована для создания блога или небольшого проекта;

· простота установки и использования;

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

· пользоваться очень легко, благодаря понятному встроенному редактору;

· wordPress --популярная в мире система управления содержимым сайта. Официально доля рынка WordPress среди других конкурентов превышает 55%.

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

· некоторые изменeния внутри сайта выполняются в WordPress достаточно сложно. Для изменения или удаления даты постов без специальных дополнительных знаний не обойтись;

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

· универсальность заключается в возможности применять другие доступные плагины. Именно из-за них CMS приблизился к таким системам как Drupal и Joomla. Однако наличие большого количества плагинов может отрицательно сказаться на скорости загрузки страниц. [13, с.45-64]

Joomla-система управления содержимым ,написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL для выбор данномй CMS необходимо было рассмотреть преимущества данной системы.

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

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

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

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

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

· универсальность CMS joomla дают пользователю создать сайт любой сложности и содержания с минимальным использованием различных модулей, расширений и плагинов.

У joomla так же есть свои недостатки, которые следовало рассмотреть для дальнейшего выбора:

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

· для старых версий Joomla актуальна и сложность обновлений. К большой радости в последних версиях реализован автопоиск и установка обновлений;

· по статистике данное ПО лидирует в числе систем для взлома. Сайты часто подвергаются атакам. Причиной является и не слишком высокая защищённость системы, но ситуация постоянно улучшается благодаря оперативной работе сообществ Joomla;

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

· отсутсвуют службы поддержки, что является особенностью всех свободно распространяемых продуктов. [7, с. 54-67]

Drupal -- система управления содержимым (CMS), написанная на языке PHP и использующая в качестве хранилища данных реляционную базу данных (поддерживаются MySQL, PostgreSQL).

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

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

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

· множество людей являются поклонниками данного ПО, и постоянно ведутся работы по его улучшению;

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

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

· в отличие от других CMS, в Drupal есть хорошая система поиска, реализованная на уровне ядра.

Недостатки данного инструментального средства:

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

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

· интерфейс администрирования сайта в Drupal сложен для понимания. [7, с. 116-134]

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

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

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

“HTML -- стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML).

Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками -- тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font).” [18, с. 43]

CSS-- Язык для описания внешнего вида, html документа. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других элементов представления внешнего вида веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида данной веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля. [20, с. 9]

PHP-- скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов.[12, с. 15]

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

· определить идею, модель и внешний вид;

· создать дизайн;

· вёрстка страниц;

· наполнение контентом;

· выкладывание на хостинг;

· продвижение.

Для всех этих шагов нужно иметь инструмент, который поможет всё это реализовать. Размышляя над дизайном, всегда следует посмотреть другие похожие сайты, оценить их лучшие и негативные стороны. Для этого был произведён мониторинг следующих сайтов: (Рисунок 1), (Рисунок 2), (Рисунок 3), (Рисунок 4).

Рисунок 1- Вид сайта http://www.mebel-art.net/

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

Рисунок 2- Вид сайта http://www.obrazstroy.ru/portfolio/mebel/147/1/

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

Рисунок 3- Вид сайта http://www.bravomebel.ru/catalog/69.html

В данной модели привлекает шапка сайта, наличие анимации для демонстрации товаров является правильным решением для привлечения внимания посетителя.

Рисунок 4- Вид сайта http://mm-32.ru/catalog/myagkaja_mebely/

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

На основе проведённого анализа, была начата работа, по созданию сайта предприятия.

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

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

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

Отладка и настройка осуществлялась с помощью браузера Мozilla firefox и Firebug, который интегрируется с браузером Firefox, позволяет расширять возможности браузера. Работая с данным инструментом можно редактировать, выполнять отладку и исследовать CSS, HTML и Javascript, на любой веб-странице.

Глава 2. Разработка презентационного сайта для фабрики мягкой мебели “Царь мебель”

2.1 Техническое задание

1. Введение

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

2. Основания для разработки

Основанием для разработки является задание на выполнение дипломной работы в рамках завершения учебного процесса в соответствии с договором с БФ МЭСИ № 01 от 01.09.2012 года.

3. Назначение

Основным назначением программного продукта является:

Представление информации о продукции фирмы “Царь мебель”

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

4.1 Требования к функциональным характеристикам

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

· доступность информации;

· лёгкость в обращении;

· уникальный дизайн;

· обеспечить удобный пользовательский интерфейс;

· интерактивность с пользователем.

4.2 Исходные данные:

Материалы, предоставленные фирмой, для которой делается сайт.

4.3 Выходные данные:

Презентационный сайт.

4.4 Требования к надёжности

· предусмотреть работу с различными браузерами;

· предусмотреть работу с различными разрешениями монитора.

4.5 Требования к составу и параметрам технических средств:

· Сайт должен обеспечить работу на IBM-совместимых ПК

· Минимальная системная конфигурация:

· тип процессора Pentium II и выше;

· объем оперативного запоминающего устройства 64 Мб и более;

· В) Клавиатура, мышь

4.6 Требования к информационной и программной совместимости.

ПП должен работать под управлением семейства ОС Windows 2000 и выше.

4.7 Требования к программной документации

· разрабатываемые программные модули должны быть самодокументированы. Тексты программ должны содержать необходимые комментарии;

· в состав сопровождающей документации должны входить;

· пояснительная записка на 75-80 листах, содержащая описание разработки;

· руководство программиста;

· руководство пользователя;

· сроки начала и окончания работ.

Дата начала работ: 10.04.2013

Дата окончания работ: 15.05.2013

Руководство программиста

ГОСТ 19.504-79*(СТ СЭВ 2095-80)

1. ОБЩИЕ ПОЛОЖЕНИЯ

1.1 Структуру и оформление документа устанавливается в соответствии с ГОСТ 19.105-78.

1.2.Руководство программиста:

· данная программа применяется для демонстрации продукции мебельной фабрики “Царь мебель”;

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

· входные данные: материалы предоставленные предприятием;

· выходные данные: презентационный сайт.

2. СОДЕРЖАНИЕ РАЗДЕЛОВ

2.1. Назначение и условия применения программ

Назначение: Реклама товаров и услуг фабрики “Царь мебель”

Функции: Удобный поиск продукции.

Условия: Наличие браузера.

Минимальная системная конфигурация:

· тип процессора Pentium II и выше;

· объем оперативного запоминающего устройства 64 Мб и более;

· клавиатура, мышь.

2.2. Характеристика программы:

Удобное средство для получения и предоставления информации о продукции фабрики “Царь мебель”

2.3. Обращение к программе: обращение и открытие к программе осуществляется с помощью запущенного браузера.

2.4. Входные данные: материалы предоставленные предприятием;

Выходные данные: презентационный сайт;

Руководство пользователя

РД 50-34.698-90 (п.п. 3.4 Руководство пользователя)
Введение
Область применения: Демонстрация продукции фабрики “Царь мебель”
Описание возможностей: Демонстрация, удобный поиск, описание продукции.
Уровень подготовки пользователя: Знание ОС, и работы бразуера.
Руководство пользователя
Назначение и условия применения
Виды деятельности и функции, для автоматизации которых предназначена программа Демонстрация.
Условия, при которых обеспечивается применение программы Наличие: компьютера, ОС не ниже версии XP2000 , браузера.
Подготовка к работе
.Html .css .javascript фалый, а также папка с изображениями и сервер.
Открыть с помощью браузера
Определить загрузку сайта
Описание операций
Загрузка .html документа с поддержкой .css файла находящиеся на сервере.
Аварийные ситуации проверить работоспособность браузера, перезагрузить компьютер.
Рекомендации по освоению : Внимательно ознакомится с Руководством пользователя

2.2 Создание дизайна, локальная вёрстка сайта теги и свойства

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



Рисунок 5- Фон для сайта

Далее выполнились работы, по определению основного внешнего вида сайта и расположению на нём компонентов. В результате работы создан прототип сайта представленный на рисунке (Рисунок 6).

Рисунок 6 -Вид дизайна сайта.

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



Рисунок 7 -переработанный дизайн для сайта

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

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

Для внедрения рисунка (Рисунок 8) использовались:

· создание листа 200х300 px;

· коррекция цветового тона;

· трансформация;

· вставка.

Рисунок 8 - Изображение девушки, для будущей рекламы.

Картинка редактировалась и подгонялась под нужные размеры в графическом редакторе. Готовое изображение размещалось и помещалось на странице с выравниванием текста (Рисунок 9)

Рисунок 9- Создание банера.

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

Рисунок 10- Картинка с пустым видом

.

Рисунок 11- Доработанное изображение

Далее использовался photoshop был вырезан и вставлен диван, с дороботкой тени, цветовым тоном и корекцие тени. (Рисунок 11).

Так в результате работы с графическим редактором были созданы все слайды для web-страниц. Пример работы можно увидеть нп рисунке ( Рисунок 12).

Рисунок 12-Изображение дивана в тёплых тонах

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

Рисунок 13- Пример создания изображения с правильным подбором цветового тона.

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

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

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

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

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

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

Так как разработки сайта выполняются с использованием joomla необходимо выбрать шаблон для сайта, из предлагаемых стандартных вариантов для работы не оказалось подходящего, потому было принято решение создать шаблон для сайта. В работе с созданием шаблона использовалась программа Artisteer. Из списка стандартных шаблонов выбран шаблон , который наиболее подходит для основы. (Рисунок 14)

Рисунок 14-стандартный шаблон

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

Рисунок 15- переработанный шаблон

Но всё равно даже с помощью универсальных программ не всегда всё получается сделать как надо, а потому детально шаблон пришлось дорабатывать в ручную. Сама вёрстка шаблона осуществлялась с помощью notepad++ и dreamweaver cs6 , тегов Html и таблицей стилей css. Изначально была прописана основная разметка для браузера

<html>

<head>

<title>название</title>

</head>

<body>

</body>

</html>

В работе использовалось много тегов и у каждого из них свои функции, так тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег <html> идет в документе вторым, после определения типа документа <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> , устанавливаемого через элемент <!DOCTYPE>. Закрывающий тег <html> должен всегда стоять в документе последним.

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

<meta content="text/html; charset=utf-8" http-equiv="content-type">

<meta content="Joomla! - Open Source Content Management" name="generator">, в случае работы с движком, метаданные прописывать в ручную не было нужды.

Элемент <title> определяет заголовок документа не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (Рисунок 16). Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>. <title>Главная</title> [33]

Рисунок 16- Вид заголовка в браузере Firefox

Элемент <body> хранит в себе содержимое контейнера и отображается в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. Открывающий и закрывающий теги <body> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа. В ходе работе для тега были прописаны следующий код в CSS, который при подключение каскадных таблиц стилей, сразу сообщает ему нужные функции, это цвет, адрес картинки и её формат, расположение фоновой картинки. Также задаётся повторение фоновой картинки для сайта, отступ внутренний и внешний и минимальная ширина.

body {

background-attachment: fixed;

background-color: #B2C2D1;

background-image: url("../images/Bottom_texture.jpg");

background-position: left top;

background-repeat: repeat;

color: #0F1419;

margin: 0;

min-width: 1100px;

padding: 0;

}

Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Вид блока отображается с помощью стилей. Что бы не было необходимости описывать вид блока внутри кода, его часто описывают во внешнем файле .css, а в сам тег добавлялся лишь атрибут class или id с именем селектора описанного в каскадных таблицах стилей. [33]

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

<link type="text/css" href="/components/com_virtuemart/assets/css/vmsite-ltr.css" rel="stylesheet">

<link type="text/css" href="/media/system/css/modal.css" rel="stylesheet">

<link type="text/css" href="/components/com_virtuemart/assets/css/facebox.css" rel="stylesheet">

<link type="text/css" href="http://tsarmebel-shop.vv.si/modules/mod_djimageslider/assets/style.css" rel="stylesheet">

<link type="text/css" href="http://tsarmebel-shop.vv.si/modules/mod_vm_cherry_picker/css/sakura.css" rel="stylesheet">

В данном случае было произведено подключение к модулю com_virtuemart и его компонентам и стилям, а также модулю mod_djimageslider и mod_vm_cherry_picker.

Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Использовался данный тег при работе с ценами товаров , <span class="PricesalesPrice">26000,00 руб</span> при создании стилей для некоторых товаров.

Тег <p> определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.[33]

<br> делает перевод строки в то место где тег находится, очень часто использовался при работе с редактирование текста.

<a> важный элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь.

<nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства.

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>. <img alt="5.jpg" src="/images/shapka/5.jpg"> пример загрузки изображения.

Свойство background-color устанавливает цвет фона элемента. Применение данного свойства было необходимо для создния фона. Для данного тега можно задавать цвета, как словами типа green, red, black, yellow, так и кодом что является более универсальным средством при подборе нужного оттенка.Пример кода зелёного цвета “00ff00” используемого в работе.

Цвет применяется ко всему фону содержимого элемента, и распространяется на его внутренние отступы (paddings). Внешние поля (margins) остаются прозрачными.

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

Свойство background-image устанавливает фоновое изображение для элемента. background-image: url("../images/Bottom_texture.jpg"); причём очень важно ,указать расширение загружаемой картинки.

Свойство margin сокращённое свойство, позволяющее быстро задать следующие параметры: margin-top, margin-right, margin-bottom и/или margin-left. Margin - это внешнее пространство между бордюром и невидимой границей прямоугольника.

Свойство display позволяет изменять базовые свойства элементов. Свойство top используется совместно со свойством position. В зависимости от конкретного значения position свойство top может сдвигать элемент вниз относительно верхнего края:

· своей исходной позиции (position:relative)

· позиции родительского элемента (position:absolute)

· окна браузера (position:fixed)

Свойство padding - сокращённое свойство, предоставляет быстрый способ задать следующие параметры: padding-top, padding-right, padding-bottom и/или padding-left. Padding - это пространство между содержимым элемента и “бордюром”. [32]

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

Для определения высоты использовалось свойство height.

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

Свойство font-size позволяет задать размер шрифта. Хорошей практикой считается указывать относительные размеры шрифта в процентах или em.

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

Свойство color устанавливает цвет текста элемента.

Свойство width определяет ширину прямоугольной области вокруг элемента.

Свойство border - сокращённое свойство, управляет внешним видом рамки (бордюра) вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину.

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

После создания шаблона для сайта необходимо было приступить к установке его на joomla. Для этого необходимо использовать локальный сервер на Денвер.

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

Непосредственно при запущенном Денвере , в браузере Mozila fierfox уже продолжилась дальнейшая работа , по созданию контента для сайта.

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

· Apache 2.2, SSI, SSL, mod_rewrite, mod_php.

· PHP 5.3.1

· MySQL 5.1.40.

· phpMyAdmin 3.2.3.

· Ядро Perl без стандартных библиотек

· Эмулятор sendmail

Для доступа к административной панели управления Joomla необходимо запустить Денвер и использовать адрес разрабатываемого сайта. Страница авторизации представлена на рисунке (Рисунок 17)

Рисунок 17- Вход в админ панель

На форме вводится логин и пароль для открытия главной страницы администрирования системой - панели управления Joomla, которая предоставит управление всеми функциями и возможностями пакета. (Рисунок 18)



Рисунок 18 - Панель управления

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

cherry_picker-Модуль поиска товаров, придающий магазину такую же функциональность, как Amazon или Newegg. Модуль Vmbreadz, показывает все выбранные параметры фильтра, и компонент FastSeller, позволяет быстро создавать правила фильтрации для товаров.

Для настройки модуля пришлось добавить следующие изменение в /administrator/components/com_virtuemart/models/product.php

// new

// it should be added to query only in frontend

$backend = strpos(JPATH_BASE, 'administrator');

if (!$backend) {

// search by price functionality

require_once(JPATH_BASE.'/modules/mod_vm_cherry_picker/controller.php');

$chp=new chpController();

$w=$chp->getVMPriceQuery();

//if you're using taxes, specify the tax here, e.g. 1.2 for 20%

//$w=$chp->getVMPriceQuery(1.2);

if ($w) {

$where[]=$w;

$joinPrice=true;

}

}

// new

// add filters to search

if (!$backend) {

$g=$chp->getVMFilters();

if ($g) {

$where[]=$g['where'];

$joinedTables.=$g['join'];

}

}

// end

if(count($where)>0){

$whereString = ' WHERE ('.implode(' AND ', $where ).') ';

} else {

$whereString = '';

}

com_virtuemart-бесплатный модуль для создания базы для интернет магазина.

DJ Image Slider - Image MooTools Slideshow- DJ Image Slider - продукт разработчиков Design-Joomla.eu, является одним из лучших расширений Joomla, которое позволяет отображать галерею изображений с заголовком и кратким описанием, связанных с любым пунктом меню или URL-адресом. Позволяет создавать категории для слайдов или настроить интерфейс в параметрах модуля. Использовался для создания галерей изображений.

Создание разделов сайта

Раздел - это главный (верхний) объект в иерархии структуры содержимого.

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

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

Создание категорий сайта

Категория - это второй (после раздела) объект в иерархии структуры содержимого. Создание категории похоже на создание раздела.

Для работы с категориями необходимо перейти на страницу «Менеджер категорий».

При открытии страницы «Менеджер категорий» опция фильтрации будет "жестко" привязана к выбранному разделу. (Рисунок 19)