Разработка структуры сайта

Содержание
Вступление 5
Постановка задачи на разработку структуры сайта 6
Проектирование сайта 13
Интерфейс сайта 16
Интерфейсная часть 16
Меню 17
Контент сайта 17
Общие подходы к разработке дизайна сайта 19
Гиперссылки и переходы 20
Требования к структуризации и дизайна контента 21
Техническое задание на разработку Сайта-визитки 25
Структура сайта 27
Начальные требования к дизайну сайта 31
Понятие стиля. 31
Структура страниц сайта: 34
Выводы 36
Список литературы 37

Сайт создается в соответствии с услугой: Создание сайта «Под ключ», в которую входит:
Регистрация доменного имени.
Покупка хостинга для выбранного типа сайта.
Разработка структуры и навигации сайта.
Создание индивидуального дизайна.
Верстка.
Программирование сайта.
Подключение и настройка системы администрирования сайта.
Установка сайта на хостинг.
Установка на сайт системы обратной связи Реформал.
Установка на сайт модуля проверки опечаток и ошибок пользователями.
Тестирование.
Бесплатное обучение и консультирование по работе c сайтом.
Бесплатная техническая поддержка в течение 6 мес.
Основные задачи сайта
Сайт должен предоставлять пользователям информацию:
о компании (ее миссии, истории, направлениях деятельности);
о новостях компании;
о товарах и услугах компании;
о контактах и местонахождении компании.
Целевая аудитория сайта
Пол: мужчины и женщины.
Возраст: от 20-55 лет.
Интересы: корма для охотхозяйств, заповедников, заказников.
Целевые потребители услуг: охотхозяйства, заповедники, заказники частные лица
Дизайн сайта
Дизайн сайта разрабатывается, основываясь на современных тенденциях Web-дизайна с использованием предоставленного Заказчиком логотипа (в электронном виде). Цветовые решения логотипа должны максимально использоваться в дизайне сайта. Дизайн должен быть согласован с Заказчиком.
Дизайн должен быть:
лаконичным и соответствовать интересам целевой аудитории;
подчеркивать узнаваемость корпоративного стиля предприятия (включая цветовое оформление и логотип компании);
обеспечивать интуитивно-понятную навигацию по сайту,
содержать флэш компоненты и игровой баннер.
Требования к средствам просмотра Сайта
Браузеры:
Сайт должен обеспечивать корректное отображение данных в следующих браузерах:
Internet Explorer (версия 8 и выше);
Opera (версия 15.0 и выше);
Mozilla Firefox (версия 30.0 и выше).
Разрешение мониторов:
Основное разрешение, на которое оптимизируется сайт: 1024х768 пикселей.
Минимальное - 800 х 600 пикселей (мобильные устройства).
* При указанном разрешении допускается возможность просмотра страниц сайта с горизонтальной прокруткой в окне браузера.
Структура сайта
Структура сайта представляет собой вложенное меню, состоящее из набора страниц и каталогов, следующего вида (рис.8):
Рис.8. Навигация на сайте
Для создания сайта необходимо определить его структуру и изображать ее на рисунке (рис. 8).
Этапы построения карты нет смысла описывать вследствие того, что это довольно несложная операция и не требует знания языков программирования и разметки. Каждый блок содержит информацию (текст, графику видео, звук) - это и есть наполнение сайта.
После того, как моделирование закончено - генерируем сайт, для этого выбираем экспорт как веб-сайт (рис. 9).
Затем определяем его представления из группы шаблонов.
На следующем этапе проводим тонкие настройки будущего сайта, они понятны, только на английском языке. После нажатия кнопки происходит автоматическая генерация сайта (рис. 10). В результате в указанном месте на диске или хост площадке создается папка с сайтом. В окончательном виде сайт выглядит так показано. Для оказания сайта индивидуальных черт необходимо поработать с HTML и CSS, которые доступны в той же папке.
Рис. 10. Начало генерации сайта
Рис.5. Карта сайта Фуражир в текстовом виде
Созданный сайт является статическим и содержит только элементы, написанные на языке JavaScript, которые так же могут быть настроены.
У этой программы есть огромный плюс. Сайт можно разрабатывать в текстовом процессоре Microsoft Word, затем импортировать в MindManager, который при установке встраивается как интегрированный компонент текстового процессора.
Проблема этой системы заключается в сложности обновление контента.
Карты мозга используются при проектировании концепции сайта в наиболее удобной для человеческого восприятия форме. Особенностью данной программы является, то, что она позволяет конвертировать карту мозга в форму веб интерфейса, выполняя роль программы для разработки прототипов сайта. Это дает возможность заказчику уже на самом начальном этапе проектирования видеть примерный вид будущего сайта
На этапе проектирования после определения общей структуры сайта на этапе анализа требований, приходится создавать прототипы (каркасы) сайта, которые делаются перед рисованием оригинал-макета сайта. Они используются при разработке дизайна сайтов, чтобы показать, как в дальнейшем будет выглядеть структура сайта, а также где находятся функциональные блоки.
Для этих целей существует большое количество специальных редакторов разработки прототипов с разным уровнем функциональности. Axure RP Pro – редактор прототипов сайтов, который позволяет выполнять быстрое макетирование для приложений вебсайта, ориентированное под каркасные прототипы веб-сайтов. Продукт предназначен для снижения издержек проектирования веб-сайтов. Это решение помогает быстро в визуальном режиме создать рабочий прототип будущего сайта, затем выгрузить прототип в HTML и просмотреть его через браузер. Качество прототипа позволяет в дальнейшем ставить задачи дизайнерам и программистам, а также используется для понимания заказчика конечного результата. Интерфейс программы аналогичен стандартному офисному интерфейсу. В результате генерирования прототипа получается статический сайт, широко использующий JavaScript. Axure RP Pro используется для проектирования небольших, но функционально-насыщенных проектов, а также больших проектов на начальном этапе.
На этапе проектирования был разработан прототип сайта (рис.11), который в дальнейшем использовался в техническом задании.
Рис.11. Фрагмент разработки прототипа главной страницы сайта
После разработки прототипа его можно просмотреть в браузере, на этом этапе формируются первые требования к дизайну сайта (рис.12).
На этом этапе определяются цветовая схема, шрифты, положение блоков, количество колонок, размеры и положения картинок, требования к выравниванию.
Начальные требования к дизайну сайта
Веб-дизайн это отрасль веб-разработк Дизайн веб-ресурса (веб-дизайн) - спроектированная структура веб-ресурса, отличающаяся оригинальностью применения цветовых и технических решений, обеспечивает эстетическое восприятие и удобство пользования веб-ресурсом.
Понятие стиля.
Стиль - это система визуальных элементов, призванная обеспечить целостность восприятия этой странички или всего сайта. Исходя из разработанной концепции и контента (текстового материала, готовых иллюстраций и рисунков), выбираются шрифты, цвет фона, способ обработки картинок, коллажей, иконок и др. элементов. После определения схем оформления при разработке элементов сайта придерживаются выбранной манеры исполнения.
Стиль позволяет обеспечить уникальность сайта. Каждый сайт обязательно должен обладать собственной индивидуальностью.
Стиль сайта представляет собой дизайн набора основных элементов:
Логотипа
Модулей (блоков)
Страницы (размера, цветовых схем, количество элементов и их размещение)
Шрифтов
Цветов
Иллюстративного ряда (приемы обработки изображений)
Видов и оформления меню
Веб-дизайн - разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений. Веб-дизайнеры проектируют логическую структуру веб-страниц, продумывают наиболее удобные решения подачи информации, а также занимаются художественным оформлением веб-проекта. В результате пересечения двух отраслей человеческой деятельности грамотный веб-дизайнер должен быть знаком с последними веб-технологиями и иметь соответствующие художественные качества.
В современном дизайне стандартного корпоративного сайта используется дизайн юзабилити, который и будет рассматриваться в работе в дальнейшем. Понятие юзабилити было расширено и сейчас под ним понимается не только дизайн интерфейсной части, а удобность использования всех элементов сайта с точки зрения пользователя. Рассмотрим данное понятие подробнее.
Юзабилити (от англ. Usability) - простота и удобство использования сайта.
Основной принцип разработки дизайна современного сайта заключается в том, что сайт должен быть простым и понятным посетителю, сайт создается для посетителя и ни для кого больше. Этот принцип означает, что в той мере, насколько это достижимо, веб-страница должна быть максимально простой, понятной и «самоочевидной».
Текстовая страница воспринимается хуже, тяжелее, чем графика. Один из немногих фактов, хорошо подтвержденных исследованиями, заключается в том, что в большинстве случаев люди стремятся тратить меньше времени на чтение страниц. С другой стороны графика на экране монитора не настолько информативна как текст. Современный дизайн сайта должен использовать на страницах как текст так и графику.
Структура страниц сайта:
Все страницы содержат (содержимое для всех страниц):
В верхней части экрана:
Главное меню (навигация) со ссылками (Главная, О нас, Услуги / товары, Контакты, Карта сайта).
Логотип, минимальные контактные данные.
Название компании.
Слоган компании (текст не определен).
В боковых панелях:
Новости.
Рекламные баннеры.
Поиск (место расположение определяется на этапе разработки дизайна).
Главная страница содержит:
Содержимое для всех страниц.
В центральной части экрана приветственная страница (кратко «о нас», «услуги», «преимущества»).
Игровой баннер.
Страница товаров и услуг
Содержимое для всех страниц.
В центральной части экрана:
Описание товаров и услуг предприятия.
Страница контактов
Содержимое для всех страниц.
В центральной части экрана:
Контакты центрального офиса: адрес, телефон, мобильный, E-mail, ICQ, Skype.
Форма обратной связи.
Страница «Карта сайта»
Содержимое для всех страниц
В центральной части экрана:
Структура сайта.
Возможность прямого перехода к интересующей странице.
Также сайт должен содержать следующие возможности:
Поиск по сайту.
Сайт http://furagir.ru
Выводы
В результате проведенной работы мною были решены ряд задач по разработке и пред проектной реализации структуры сайта и определения основных направлений и требований к его дизайну. Прежде всего были изучены наиболее перспективные направления web развития и определенные проблемы связаны с разработкой качественных сайтов.
Одной из серьезных проблем разработки сайта является скупость дизайна и отсутствие индивидуальности сайта. Эта проблема практически полностью может быть решена разработкой качественного шаблона.
В процессе выполнения работы мною был изучен вопрос проектирования сайтов.
Кроме того, в процессе выполнения работы мною были изучены и использованы средства полной и частичной автоматизации разработки шаблонов.
Список литературы
Алексей Старыгин. XML Разработка Web – приложений//Мастер программ.
Аргерих Л. и др. Проффесиональное PHP программирование, 2-ое издание. – Тэр. с англ. – СПб: Символ-плюс, 2003. -1048с., ил.
ВайкАллен. JavaScript. Энциклопедия пользователя: Пер.с англ./Аллен Вайк.— К.: ООО "ТИД" ДС", 2001.— 480с.
Вильямсон X. Универсальный Dynamic HTML. Библиотека программиста. — СПб.: Питер,2001. — 304 с.: ил.
Граф, Хаген. Создание веб-сайтов с помощью Joomla! .: Пер. с англ. – М. : Издательский дом "Вильяме", 2009. — 296 с.: ил. — Парал. тит. англ.
Гудман Д., JavaScript.Библия пользователя, 4-ое издание.: Тэр. с англ. – М.: Издательский дом «Вильямс», 2003. –960с.
Кищенко О.Н. Лекции по дисциплине «Языки информационного обмена», 2006 г.
Кузнецов М., Сидянов И., Голышев С. PHP 5. Практика разработки Web-сайтов. – СПб.:БХВ-Питербург, 2005. – 960 с.: ил.
Норт. Б. Joomla! Практическое руководство. М.; СПб.: Символ-Плюс, 2008, –448 с.: ил.
Патерсон Л. Использование HTML 4. К.; М.; СПб.: Вильямс, 1998.
Рамел, Дэн Самоучитель Joomla!: Пер с англ. –Спб.: БХВ-Питербург, 2008. – 448 с.: ил.
Томсон Лаура. Разработка Web-приложений на РНР и MYSQL: Тэр. с англ./Лаура Томсон, Люк Веллинг. – 2-ое изд., испр. – СПб: ООО ДиаСофтЮП, 2003. – 672 с.