Верстка и программирование сайта ресторана «Рояль»

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ БЕЛАРУСЬ

БЕЛОРУССКИЙ НАЦИОНАЛЬНЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ

Институт повышения квалификации и переподготовки кадров по новым направлениям развития техники, технологии и экономики Кафедра «Новые материалы и технологии»

ДИПЛОМНАЯ РАБОТА

«Верстка и программирование сайта ресторана Рояль»

1−40 01 74 «Web-дизайн и компьютерная графика»

Слушатель-дипломник

группы № 41 034

О.В. Ваконюк Руководитель Р. В. Семак Минск 2014

1. ПРОЕКТИРОВАНИЕ САЙТА

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

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

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

2. ДИЗАЙН САЙТА

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

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

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

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

3. ВЕРСТКА ГРАФИЧЕСКИХ МАКЕТОВ САЙТА. ПОДГОТОВКА ШАБЛОНОВ ДЛЯ ДАЛЬНЕЙШЕГО ИХ ИСПОЛЬЗОАНИЯ CMS

3.1 Файловая структура проекта

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

3.3 Редактирование контента макета

3.4 Структура базы данных

4. ДОБАВЛЕНИЕ ПРОГРАММНОГО КОМПОНЕНТА

4.1 Реализация вывода категорий раздела «Кухня ресторана»

4.2 Реализация фотогалереи

4.3 Реализация взаимодействия пользователя с администратором

4.4 Реализация раздела «Контакты»

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ ПРИЛОЖЕНИЯ

РЕФЕРАТ

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

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

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

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

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

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

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

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

· Joomla —веб приложение, служащее для управления сайтом и его содержимым;

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

· Текстовый процессор Microsoft Word 2007. Использовался для редактирования текста пояснительной записки и проверки ее синтаксиса;

· Браузеры Internet Explorer 7, Opera 10, Mozilla, FireFox 4. Были привлечены для проверки и контроля корректности написания кодов и верстки сайта.

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

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

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

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

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

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

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

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

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

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

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

· разработка концепции сайта, создание графических шаблонов, обработка элементов графики (изображений, иконок и др.), проектирование фотогалереи;

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

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

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

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

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

1. ПРОЕКТИРОВАНИЕ САЙТА

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

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

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

1. Написать сайт самостоятельно.

2. Купить или заказать скрипт сайта у фирм которые занимаются этими разработками.

3. Воспльзоваться готовым скриптом распостраняющимся по лицензии GNU.

Рассмотрим каждый вариант.

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

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

Из вышеизложенных вариантов для создания сайта ресторана «Рояль» был выбран последний. Он подразумевает создание интернет ресурсов на бесплатно распространяющемся программном обеспечении. Получили очень широкое распространение готовые системы управления контентом (CMS). CMS — это компьютерное программное обеспечение, предназначенное для упрощения и систематизации совместного создания документов и контента. Таким образом, CMS — это веб-приложение, служащее для управления веб-сайтами и их содержимым.

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

К основным категориям пользователей, на которых ориентирован сайт ресторана «Рояль», можно отнести:

· жителей и гостей города Бреста;

· постоянных посетителей ресторана;

· работников и владельцев других заведений общественного питания.

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

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

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

2) дизайн страниц основан на «фиксированных» размерах страниц, минимальное разрешение экрана монитора — 17 дюймов (содержимое монитора будет отображаться без горизонтальной линии прокрутки);

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

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

· PHP 5;

· MySQL 5;

· HTML;

· CSS;

· Photoshop.

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

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

Главное меню:

1. Главная.

2. Фотогаллерея.

3. Кухня ресторана.

4. Гостевая книга.

5. Контакты.

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

В разделе «Фотогаллерея» представлена галерея изображений. При активации одного из изображений оно отображается в увеличенном размере в центральной части страницы.

Страница «Кухня ресторана» имеет меню второго уровня, в котором содержатся следующие пункты:

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

2. Горячие закуски (содержит 3 подпункта: Блюда из мяса и птицы; Блюда из рыбы; Гарниры).

3. Холодные закуски (включает подпункты: Овощные блюда, Салаты.)

4. Десерты (отображает сведения о десертах, тортах, имеющихся в ресторане).

Посещение раздела «Гостевая книга» предоставляет возможность пользователю связаться с администратором ресторана, отправив сообщение посредством заполнения формы.

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

В нижней части странице, в «подвале», содержатся сведения о разработчике сайта.

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

сайт целевой программирование верстка

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

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

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

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

Сайт белорусского ресторана «Falcone» — http://www.falcone.by/

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

Содержание сайта более подробно и полно излагает деятельность ресторана (помимо других имеются разделы «Шеф-повар Falcone», «Кухня», «Знаменитые гости Falcone»), что заинтересует даже не посещающего ранее ресторан пользователя. Контент размещен в верхней части страницы по центу, что благоприятно для восприятия.

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

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

Сайт ресторана «Золотой гребешок» Ї http://www.lacretedor.by/

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

Цветовая гамма выбрана достаточно удачно: сочетание черного фона с оттенками коричнего и зеленого.

Панели навигации расположены слева и справа от основного содержания. Ссылки панелей оформлены в виде картинок, некоторые из которых («Кофейня», «События») не гармонируют с цветовой гаммой сайта. Кроме того, при наведении курсора ссылки не выделяются и ни разделены друг от друга.

Основной недостаток сайта Ї не реализована интерактивность сайта. Следует дополнить содержимое формой заказа, обратной связи, гостевой книги либо анкетирования.

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

Сайт украинского ресторана «Барон Мюнхаузен» Ї http://www.restaurant.com.ua/

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

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

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

Дизайн сайта простой, однако соответствует названию ресторана. Цветовая гамма выбрана удачно: сочетание оттенков малинового цвета и белого, черного цвета текста. На странице имеются элементы Flash-анимации, они не замедляют работу сайта, а лишь украшают страницу.

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

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

При проверке на валидность данного сайта появляется лишь одно предупреждение, что свидетельствует о хорошей верстке сайта.

Сайт киевского ресторана «Тифлис» Ї http://www.tiflis.com.ua/

На данном сайте встречается распространенная ошибка Ї на странице «О нас» контактная информация о ресторане является ссылкой на ту же страницу.

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

При проверке на валидность данного сайта определено 29 ошибок, что свидетельствует о неграмотной верстке.

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

Самым главным недостатком сайта является не функционирование раздела «Гостевая книга» при наличии ссылки на данный раздел.

Сайт московского ресторана «Сулико» Ї http://www.sulico.ru/

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

Основным достоинством данного сайта в сравнении от предыдущих является реализации раздела «Меню ресторана». Имеется возможность скачать прайс-лист карты вин и меню. Блюда подробно описаны и корректно изложены по категориям.

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

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

Поскольку первая страница отличается от последующих, правильность верстки отличается. При проверке на валидность первой страницы сайта выявлена 51 ошибка и 54 предупреждения, страницы «Контакты» Ї 6 ошибок, страницы «Суши» Ї 31 ошибка.

Сайт минского ресторана «James» Ї http://www.james.by/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

· создание упора на функциональность сайта;

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

2. ДИЗАЙН САЙТА

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

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

· «шапка» страницы;

· верхний горизонтальный элемент (включает «Поиск»);

· левая навигация (главное меню);

· основная часть (контент страницы);

· правая навигация (опросы);

· «футер» страницы.

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

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

· Главный раздел.

· Фотогаллерея.

· Кухня ресторана.

· Гостевая книга.

· Контакты.

Кроме того, в правом блоке страницы расположен блок «Опросы». Он позволяет высказать свое мнение любому пользователю по предложенному вопросу.

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

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

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

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

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

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

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

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

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

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

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

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

· Pixie v3.1 Ї программа для определения цвета любого элемента экрана. Полезна при определении цвета имеющихся элементов и подборе гармоничных цветов.

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

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

Работа над шапкой производилась средствами приложения Adobe Photoshop CS4. Сначала фотография была изменена до определенного размера. Затем к изображению применена векторная маска и затемнены границы. После этого добавлена надпись с названием ресторана.

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

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

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

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

· размер основного шрифта документа — не менее 10 px;

· запрещается применение сглаживания и эффектов для шрифтов в основном тексте и заголовках сайта, а также в тексте размером менее 14 рх;

· запрещается использовать эффекты прозрачности для основного текста сайта;

· цвет текста указывается явно в свойствах шрифта, а не через эффекты слоя;

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

Самой легкой для чтения в Интернете является гарнитура Verdana, которая создавалась именно для этой цели. Применяются часто и такие простые и строгие гарнитуры, как Arial, Courier, Tahoma и Georgia.

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

С учетом изложенного в качестве шрифтов сайта выбраны следующие:

· Arial. Используется в качестве основного шрифта на сайте. Шрифт плотный, аккуратный, тем самым является удобочитаемой гарнитурой для основного текста.

· Georgia. Является одним из самых распространенных и читаемых шрифтов.

· Sans Serif. Шрифт без засечек, установленный на компьютере пользователя.

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

3. ВЕРСТКА ГРАФИЧЕСКИХ МАКЕТОВ САЙТА. ПОДГОТОВКА ШАБЛОНОВ ДЛЯ ДАЛЬНЕЙШЕГО ИХ ИСПОЛЬЗОВАНИЯ CMS

3.1 Файловая структура проекта

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

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

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

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

· файлы разных типов размещаются в отдельных папках; например, графические файлы — в папке Images, звуковые файлы — в папке Sound и т. п.;

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

С учетом вышеизложенного корневой каталог сайта «royal» сожержит следующие основные папки:

· Папка «administrator» (содержит все файлы для работы в администраторской зоне сайта);

· Папка «components» (включает папки компонентов, необходимых для выполнения определенных функций; например, com_search Ї папка компонента «Поиск по сайту», com_mailto Ї папка компонента, обеспечивающего рассылку статей по электронной почте);

· Папка «images» (содержит папки с изображениями, размещаемыми на сайте: «stories» Ї папка с изображениями, расположенным на страницах; «M_images» Ї папка с изображениями иконок элементов сайта; «com_morfeoshow/images» Ї папка с изображениями, расположенными в галереи сайта);

· Папка «modules» (содержит папки модулей, используемых на сайте);

· Папка «plugins» (включает папки плагинов, установленных для корректной работы компонентов сайта).

· Templates (содержит папку шаблона Joomla, используемого при разработке сайта).

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

Макет сайта — это основа основ будущего проекта в сети. Именно на основе полученного дизайна строится динамическая визуализация, контентная и программная часть будущего веб-сайта.

При разработке сайта ресторана «Рояль» используется готовый шаблон, который представляет законченный дизайн главной страницы сайта. Однако шаблон сайта не является законченным на 100% дизайном, и поэтому его можно рассматривать как дизайн-макет будущего сайта.

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

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

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

3.3 Редактирование контента макета

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

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

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

Весь макет был разбит на отдельные блоки:

· header;

· user3;

· left;

· main;

· right;

· footer.

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

defined ('_JEXEC') or die ('Restricted access'); // no direct access

require_once dirname (__FILE__). DIRECTORY_SEPARATOR. 'functions.php';

$document = null;

if (isset ($this))

$document = & $this;

$baseUrl = $this→baseurl;

$templateUrl = $this→baseurl. '/templates/'. $this→template;

artxComponentWrapper ($document);

?>

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

/css/template.css">

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

3.4 Структура базы данных проекта

Вся изменяющаяся информация сайта хранится в базе данных Joomla. Joomla использует систему управления базами данных (СУБД) MySQL. Работа с этой СУБД требует знание языка SQL (язык структурированных запросов). Однако в составе Денвера, как и на многих хостингах, существует инструмент phpMyAdmin, позволяющий работать с MySQL даже людям, не знакомым с языком SQL.

phpMyAdmin Ї веб-приложение с открытым кодом, написанное на языке PHP и представляющее собой веб-интерфейс для администрирования СУБД MySQL. phpMyAdmin позволяет через браузер осуществлять администрирование сервера MySQL, запускать команды SQL и просматривать содержимое таблиц и баз данных. Основное достоинство данного приложения Ї возможность управлять СУБД MySQL без непосредственного ввода SQL команд, предоставляя дружественный интерфейс.

Рассмотрим, например, таблицу jos_content. Она создана для хранения всей информация о текстовом наполнении сайта.

В этой таблице существуют следующие основные поля:

· id Ї идентификатор;

· title Ї поле для определения названия текстовых статей;

· fulltext Ї поле для текста, содержащегося в статьях;

· created_by Ї поле для имени пользователя, вносившего изменения в содержание статей;

· modified_by Ї поле для имени пользователя, вносившего изменения в содержание статей;

· metadesk Ї поле для описания статей;

· metakey Ї поле для ключевых слов статей;

· image Ї поле для указания пути к миниатюре для статьи.

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

4. ДОБАВЛЕНИЕ ПРОГРАММНОГО КОМПОНЕНТА

4.1 Реализация вывода категорий раздела «Кухня ресторана»

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

Раздел «Обслуживание» создаем посредством команды «Статьи/ Разделы/ Новый». Создание категории в CMS Joomla производится выполнением команды «Статьи/ Категории/ Новый». Задаем название категории «Кухня», в поле «Раздел» выбираем «Обслуживание».

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

После создания статей остается создать пункты меню, вызов которого будет ссылать на опрделенные статьи. Для этого в администраторской зоне выполняем команду «Меню/ Главное меню», открываем «Пункты меню/ Создать», в качестве типа выбираем «Статьи/ Статья/ Стандартная страница статьи». Указываем название пункта, в поле «Категория» — «Обслуживание/ Кухня».

Таким способом создаются четыре пункта меню: Первые блюда; Горячие закуски; Холодные закуски; Десерты.

Пункты меню раздела «Наша кухня» отображаются лишь на странице «Наша кухня» и внутренних страницах. Это свойство настраивается в администраторской зоне Joomla в разделе «Расширения/ Модули». Из списка всех модулей сайта выбирается модуль «Наша кухня», в поле «Привязка к меню» устанавливается значение «Выбрать из списка». Затем выделяем названия страниц, на которых следует отображать подменю.

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

4.2 Реализация фотогалереи

Раздел «Фотогалерея» в отличие от остальных страниц сайта содержит большее количество изображений, организованных в виде галереи. Реализация такой галереи осуществлялась посредством установки компонента и плагина MorfeoShow.

Для этого в администраторской зоне Joomla в разделе «Расширения» выбираем пункт «Установка и удаление». Нажав на кнопку «Обзор», расположенную справа от поля «Файл пакета», выбираем архив компонента Ignette Gallery и нажимаем на кнопку «Закачать файл & Установить». Аналогичным образом устанавливаем плагин данной галереи.

Затем переходим на кладку «Расширения/ Компоненты» и включаем отображение компонента MorfeoShow. После этого данный компонент отображается в списке компонентов сайта.

Выбираем данный компонент. Создаем новую галерею, нажав по кнопке «Создать». Затем загружаем картинки и устанавливаем основные параметры галереи: цвет фона, цвет рамки картинки, цвет рамки галереи.

Наполнением страницы «Фотогалерея» является стандартная статья материала. Для отображения галереи после текстового наполнения следует прописать:

{morfeo 1}

Завершающий этапом реализации галереи Ї создание пункта главного меню «Фотогалерея», связанного со статьей «Фотогалерея».

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

4.3 Реализация взаимодействия пользователя с администратором

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

Для взаимодействия с пользователем и повышения его активности на сайте ресторана «Рояль» реализованы следующие компоненты:

· Гостевая книга;

· Опросы.

Раздел «Опросы» реализован подключением соответствующего модуля Joomla. Внесение изменений в работу данного компонента осуществляется в разделе «Расширения/ Модули» администраторской части Joomla.

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

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

Затем переходим к созданию пункта меню. Для этого выполняется команда «Меню/ Пункты меню/ Создать/», в качестве типа выбирается «Контакты/ Контактное имя».

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

4.4 Реализация раздела «Контакты»

Первоначальным этапом создания данной страницы является добавление контакта. Для этого в разделе «Компоненты/ Контакты/ Контакты» администраторской зоны создаем новый контакт «Карта проезда».

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

ЗАКЛЮЧЕНИЕ

В ходе дипломного проектирования был разработан сайт ресторана «Рояль».

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

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

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

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

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ

1. Вин, Д. Искусство веб-дизайна / Д. Вин. — СПб.: Питер, 2003. — 224 с.

2. Джамеа, К. Эффективный самоучитель по креативному Web-дизайну / К. Джамса. — М.: ДиаСофтЮП, 2005. — 672 с.

3. Карасева, Э.В. Photoshop CS2 / Э. В. Карасева, И. Н. Чумаченко. - М.: NT Press, 2006. - 408 с.

4. Роббинс, Дж.Н. Web-дизайн: справочник [Текст] / Дж.Н. Роббинс; пер с англ. — 3-е изд. — М.: КУДИЦ-ПРЕСС, 2008. — 216 с. — 2000 экз. — ISBN 978−5-91 136−039−9 (в пер.).

5. Шмит, К. Рецепты программирования [Текст] / К. Шмит; пер. с англ. — 2-е изд. — М.: Издательство «Русская Редакция»; СПб.: «БХВ-Петербург», 2007. — 592 с.: ил. — 3000 экз. — ISBN 978−5-7502−0310−9 («Русская Редакция»); ISBN 978−5-9775−0075−3 («БХВ-Петербург») (в пер.).

6. Joomla. Вынос подменю в отдельный блок / Блог музицирующего веб-девелопера [Электронный ресурс]. — 2009.? Режим доступа: http://xandeadx.ru/blog/joomla/51.? Дата доступа: 12.03.2012.

ПРИЛОЖЕНИЯ

Приложение А

HTML-код макета сайта