Курсовая работа: Разработка и создание сайта "Синьор Пекарь"

Курсовая работа: Разработка и создание сайта "Синьор Пекарь"

Министерство образования и науки РФ

Уральский государственный колледж имени И.И. Ползунова

РАЗРАБОТКА И СОЗДАНИЕ САЙТА "СИНЬОР ПЕКАРЬ"

Пояснительная записка

Екатеринбург 2010

Введение

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

1.1 Определение целей создания сайта

1.2 Определение целевого сегмента потребителей

2. ВЫБОР ТЕМЫ

2.1 Анализ "сайтов–аналогов" проекта

2.2 Обоснование типа разрабатываемого web–узла

3. СОЗДАНИЕ НАБРОСКА САЙТА

3.1 Перечень требований по содержимому и функциям Web–сайта

3.2 Разработка рабочего наброска сайта

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

4. РАЗРАБОТКА НАБОРОВ МАКЕТОВ СТРАНИЦ

4.1 Определение функциональных зон страниц сайта

4.2 Нахождение идеи пластического решения, определение колорита страниц

4.3 Разработка композиционного решения страниц сайта

4.4 Нахождение идеи решения основных зон страниц сайта

5. ДЕКОМПОЗИЦИЯ МАКЕТА НА СТРУКТУРНЫЕ БЛОКИ И МОДУЛИ

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

5.2 Разработка руководства по стилю

6. Оптимизация контента САЙТА

7. ВЕРСТКА САЙТА

7.1 Разработка физической и логической структуры сайта

7.2 Детализация выбранной концепции и разработка окончательного дизайн – макета сайта

8. ТЕСТИРОВАНИЕ САЙТА

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Введение

На 3 курсе в процессе обучения нам предстояло познакомиться с HTML (языком гипертекстовой разметки) и созданием сайтов. Во время выполнения работ преподаватели сказали нам, что итогом этого курса будет создание собственного сайта.

Прошло лето. Начался новый учебный выпускной год. Я стала понимать, что уже в декабре мы должны сдать сайт. Выбор темы не составил для меня труда, поскольку я очень люблю сладкое, то свой сайт я решила посвятить кулинарии, а именно выпечке. Признаюсь честно я не кулинар, но надо с чего – то начинать. Поэтому я поставила перед собой цель – создать свой сайт, все рецепты которого я попробую сделать сама. При создании web–узла я буду пользоваться знаниями по HTML. В рамках курсовой работы я должна продемонстрировать:

·  знание теоретических основ web–технологий;

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

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

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

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

Давайте посмотрим, что у меня получилось.

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

1.1 Определение целей создания сайта

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

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

·  научиться самой готовить выпечку;

·  научить другого человека готовить выпечку;

·  найти необычные рецепты;

·  попробовать приготовить их в жизни.

1.2 Определение целевого сегмента потребителей

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

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

1  Географический: значения не имеет.

2  Демографический:

·  возраст от 20 лет;

·  пол мужской и женский;

·  доход любой;

·  род занятий значения не имеет.

3  Психографический:

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

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

·  темперамент значения не имеет.

4  Поведенческий:

·  статус пользователя – это может быть и не пользователь (раньше), бывший, потенциальный, первичный, регулярный пользователь.

2. ВЫБОР ТЕМЫ

2.1 Анализ "сайтов–аналогов" проекта

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

Схема, по которой я проводила анализ сайтов – аналогов:

·  доменное имя;

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

·  посещаемость данного ресурса;

·  отображение в разных web–браузерах;

·  быстрота доступа к сайту;

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

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

·  наличие описания страницы в метатеге description;

·  области активных и пассивных полей;

·  рекомендации по улучшению дизайна узла.

Сайт №1 Готовим дома (http://gotovim–doma.ru)

Рисунок 1 – Главная страница сайта "Готовим дома"

Рисунок 2 – Второстепенная страница сайта " Готовим дома"

Удачное доменное имя – содержит ключевые слова темы.

Удобная навигационная структура – сразу видна и проста в использовании: при наведении курсора на раздел открывается список подразделов, что экономит площадь сайта и позволяет разместить больше информации или рекламы. Посещаемость по версии top–mail.ru – 105485 посетителей 734487 визитов по состоянию на 20:00 22 сентября 2010. По версии liveinternet – 101337 посетителей 702450 просмотров.

Одинаково адекватное отображение сайта в браузерах Internet Explorer и Mozilla Firefox, которые являются самыми распространенными среди пользователей сети.

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

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

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

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

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

Поисковые системы ищут этот сайт по следующему ключевому слову: <meta name="Description" content="рецепты Выпечка" />.

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

Сайт №2 Вкусности (http://vkusnosti.com)

Рисунок 3 – Главная страница сайта "Вкусности"

Рисунок 4 – Второстепенная страница сайта "Вкусности"

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

Удачный домен – отражает суть предоставленной на сайте информации.

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

Посещаемость ресурса неизвестна по причине ограниченного доступа к статистике на top–mail и liveinternet, что неудобно с точки зрения рекламодателя.

Сайт одинаково отображается при использовании Internet Explorer и Mozilla Firefox.

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

Информация с сайта соответствует заявленной теме и запросам целевой аудитории.

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

Поисковые системы ищут этот сайт по следующим ключевым словам: meta name="description" content="Все о еде и ее приготовлении: кулинарные рецепты, советы, диеты, обмен рецептами, как похудеть и поделиться опытом, рестораны Москвы с обзорами и отзывами, чат, кулинарные байки, рецепты на скорую руку, коктейли, вина, история кулинарии, новогодние рецепты и многое другое"/>

Провайдер Акадо, тарифный план "Простой" скорость входящего соединения 4 МБ/С. При данном тарифном плане страницы сайта загружаются со скоростью 1–1,5 сек.

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

Сайт №3 Хорошая кухня (http://www.good–cook.ru)

Рисунок 5 – Главная страница сайта "Хорошая кухня"

Рисунок 6 – Второстепенная страница сайта "Хорошая кухня"

Название сайта и доменное имя отражают суть темы.

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

Доступна информация о посещаемости только с ресурса openstat. Но и в этом случае подробная статистика закрыта паролем. В открытом доступе только 63353 посетителей, 74478 визитов, 203856 просмотров. Принцип формирование и включение/не включение роботов неизвестны. Ограниченность информации вызывает недоверие у рекламодателя.

Корректное отображение в двух вышеназванных браузерах.

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

Но на сайте представлено мало (по сравнению с предыдущими) кулинарных рецептов, что не совсем отвечает запросам целевой аудитории.

Поисковые системы ищут этот сайт по следующим ключевым словам:

<META NAME="Description" CONTENT="поваренная книга простых кулинарных рецептов домашней русской кухни с фотографиями и советами по приготовлению блюд">.

Провайдер Акадо, тарифный план "Простой" скорость входящего соединения 4 МБ/С. При данном тарифном плане страницы сайта загружаются со скоростью от 3 до 5 секунд.

Сайт №4 Kuking.net (kuking.net/4.htm)

Рисунок 7 – Главная страница сайта "Kuking.net"

Рисунок 8 – Второстепенная страница сайта "Kuking.net"

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

Быстрота доступа к сайту, скорость загрузки отдельных страниц: провайдер Акадо, тарифный план "Простой" скорость входящего соединения 4 МБ/С. При данном тарифном плане страницы сайта загружаются 1–1,5 сек.

Навигационная панель оформлена вверху. Гиперссылка главной страницы выделена желтым цветом, поэтому видишь, где начало сайта. Единственное, что смущает, это очень мелкий шрифт как у навигационной панели, так и у гиперссылок в новостной ленте. Что касается цветового решения, то подбор цвета мне нравится. Сочетание коричневого и зеленого вызывают у меня ассоциации с кофе. Но опять, же есть "НО", разработчики сайта использовали 5 цветов, которые в сочетании друг с другом не очень выразительны, нет так называемой "живости красок".

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

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

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

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

Сайт №5 1001 рецепт (http://www.1001recept.com)

Рисунок 9 – Главная страница сайта "1001 рецепт"

Рисунок 10 – Второстепенная страница сайта "1001 рецепт"

Последний анализируемый нами сайт так же отличается удачным доменным именем. Оно не только отражает суть сайта, но и достаточно просто запоминается. Главная страница удачно оформлена – гибкая верстка адаптирует сайт к любым мониторам, при этом не появляется горизонтальная полоса прокрутки. Удобное дерево навигации отражает все разделы сайта и позволяет легко серфить по страницам. Среди недостатков главной страницы – бедная цветовая палитра: фон отсутствует, черный и синий текст и охряные панели заголовков. Так же практически полностью отсутствуют графические и мультимедийные элементы – нет, не то что flash–анимаций, но даже картинка всего одна. В принципе, такое графическое решение могло бы подойти для какого–нибудь строго информативного сайта чего – нибудь типа налоговой инспекции или генпрокуратуры РФ. Однако, для коммерческого сайта посвященного кулинарии, который должен продавать свои площади под рекламу, так и возбуждать интерес к представленной продукции такое графическое решение не приемлемо. Это же замечание относится и к внутренним страницам сайта. На рисунке мы видим голый тест без иллюстраций. Как уже говорилось выше, кулинарный коммерческий сайт – не тот случай, когда дизайн может быть принесен в жертву скорости загрузки. Следуя из вышесказанного, разберем предполагаемую графическую модель, на которую мы будем ориентироваться при создании собственного кулинарного сайта.

Во–первых, желательно использовать принципы гибкой верстки. Однако по причине отсутствия должного опыта, мы будем применять жесткую верстку. Второе, будут использованы несколько мягких, "домашних" оттенков цвета, умеренное количество иллюстраций, чтобы одновременно поддерживать любопытство юзера, но не перегружать страницу. В идеале, хотелось бы, чтобы при скорости входящего соединения типа VPN в 4 Мб/сек, страница загружалась в среднем за 1,5 секунды. Третье: использовать разветвленное дерево навигации в совокупности с полнотекстовым поиском. Четвертое, выбирать шрифт и его размер исходя из его читабельности при различных разрешениях монитора. Желательно использовать 2–3 шрифта одного семейства: 1 шрифт для основного текста, 1 для заголовков и третий для текстовой составляющей логотипа сайта. При этом графическая составляющая должна соответствовать тематике сайта.

2.2 Обоснование типа разрабатываемого web–узла

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

Сайт визитка

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

Цель – представить компанию в Интернете.

Свойства:

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

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

·  количество страниц – 10–15;

·  тип и характеристика дизайна – несложный деловой дизайн;

·  система навигации – максимально удобная и простая система навигации;

·  частота и необходимость обновления – обновление происходит нечасто, по мере необходимости;

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

·  кем являются посетители – в основном, целевая аудитория, люди, которые ищут определенный товар, услугу;

·  наличие баннеров – баннеры на сайте–представительстве считаются плохим тоном;

·  проводимая рекламная компания – индексация в поисковых системах, обмен ссылками с дружескими сайтами.

Задачи:

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

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

·  привлечение дополнительных клиентов;

·  обеспечить запоминаемость у потенциальных клиентов и посетителей.

Промо–сайты

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

Цель – представить продукт, явление, действие для пользователей Интернет.

Свойства:

·  общее назначение сайта – проведение рекламной компании, привлечение общественного внимания;

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

·  количество страниц – 10–15;

·  тип и характеристика дизайна – яркий рекламный дизайн с элементами flash, запоминающийся и бросающийся в глаза;

·  система навигации – самая простая;

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

·  кем производится обновление – в основном, компанией–разработчиком;

·  кем являются посетители – по большей степени, целевая аудитория;

·  наличие баннеров – возможно;

·  проводимая рекламная компания – промо–сайты сам, по сути, является рекламной компанией, в основном отображается на основном сайте компании и индексируется в поисковиках.

Задачи:

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

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

·  заинтересовать общественность;

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

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

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

Цель – представить компанию в Интернете, продажи товара он–лайн, сервис и поддержка клиентов.

Свойства:

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

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

·  количество страниц – от 100;

·  тип и характеристика дизайна – деловой дизайн;

·  система навигации – максимально удобная и простая система навигации;

·  частота и необходимость обновления – частое обновление;

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

·  кем являются посетители – как целевая аудитория, так и потенциальные клиенты;

·  наличие баннеров – баненная система;

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

Задачи:

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

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

·  привлечение дополнительных клиентов;

·  обеспечить запоминаемость у потенциальных клиентов и посетителей;

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

Информационный сайт

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

Цель – представить некую информацию в Интернете, сервис и поддержка клиентов, оказание информационных услуг.

Свойства:

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

·  характеристика и основные элементы – объемное количество сервисов: опросы, голосование, чат, призванные сделать сайт интерактивным;

·  количество страниц – варьируется в зависимости от наполнения, как правило, от 50 страниц;

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

·  система навигации – сложная система навигации;

·  частота и необходимость обновления – частое обновление;

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

·  кем являются посетители – целевая аудитория, случайные посетители;

·  наличие баннеров – баненная система обеспечивает финансовую поддержку сайта;

·  проводимая рекламная компания – в зависимости от задач заказчика.

Задачи:

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

·  обеспечить запоминаемость у потенциальных клиентов и посетителей;

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

·  оперативное обновление, чтобы обеспечить интерес посетителей.

Корпоративное представительство

Такого типа сайты, как правило, автоматизируют деятельность компании. Может нести такие функции как: электронный магазин, систему заказов, коммуникационные сервисы, электронный обмен документами, on–line переговоры и т.д.

Страницы: 1, 2, 3