Принципы разработки web-сайтов (на примере ЗАО "Кондитерская фабрика "Саратовская")

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

2

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

Принципы разработки web-сайтов (на примере ЗАО "Кондитерская фабрика "Саратовская")

Содержание

web сайт разработка контент

• ВВЕДЕНИЕ
• Глава 1. Современные тенденции разработки web-сайта
• 1.1 Интернет в современном обществе
• 1.2 Сайт как средство развития бизнеса
• 1.3 Классификация современных web-сайтов
• 1.4 Виды структурной организации web-сайтов
• 1.5 Юзабилити web-сайта
• Глава 2. Технологии, применяемые при разработке web-сайтов
• 2.1 Модель "Клиент-сервер"
• 2.2 Технологии, работающие на стороне клиента
• 2.3 Технологии, работающие на стороне сервера
• 2.4 Медиаресурсы. Платформа Flash
• 2.5 Системы управления контентом (CMS)
• Глава 3. Разработка web-сайта для ЗАО «Кондитерская фабрика «Саратовская»
• 3.1 Общая информация о ЗАО «Кондитерская фабрика «Саратовская»
• 3.2 Структура информации и навигации по сайту
• 3.3 Разработка интерфейса и дизайна сайта
• 3.4 Информационные технологии, использованные при создании сайта
• 3.5 Разработка администраторской части web-сайта
• ЗАКЛЮЧЕНИЕ
• СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Введение

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

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

В связи с актуальностью проблематики, связанной с разработкой и созданием web-сайтов, и была выбрана тема дипломной работы. Целью данной работы стало изучение web-дизайна и web-технологий как мультидисциплинарной области деятельности и применение полученных знаний на практике, при разработке web-сайта для производственного предприятия ЗАО «Кондитерская фабрика «Саратовская».

Дипломная работа состоит из трех глав.

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

Во второй главе дипломной работы рассмотрено большинство современных технологий создания web - сайтов. Описываются технологии со стороны клиента, такие как: язык гипертекстовой разметки HTML, каскадные таблицы стилей CSS, динамический язык разметки гипертекста DHTML, JavaScript, ActiveX, язык программирования сценариев просмотра HTML/DHTML страниц VB Script. Языки программирования со стороны сервера такие как: скриптовый язык программирования PHP, созданный для генерации HTML-страниц на веб-сервере и работы с базами данных (MySQL), язык для практического извлечения данных и составления отчетов Perl, высокоуровневый язык программирования общего назначения с акцентом на производительность разработчика и читаемость кода - Python, язык программирования Ruby. Также рассматривается история создания перечисленных языков, сравниваются их достоинства и недостатки.

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

Глава 1. Современные тенденции разработки web-сайта

1.1 Интернет в современном обществе

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

В 2010 году было проведено исследование "Основные тенденции и изменения предпочтений по использованию средств информации в России". Основные задачи исследования - определить тенденции в использовании Интернет, а также выявить новые требования потребителей средств информации. Почти все опрошенные на первое место поставили использование Сети для поиска информации и чтения новостей. Значительное большинство пользователей, независимо от возрастной группы, обмениваются почтовыми сообщениями и общаются в чатах: многие используют эти возможности в работе. Результаты исследования показали, что чем больше времени проводит пользователь в Интернет, тем меньше он использует традиционные источники получения информации. Например, для пользователей, которые тратят еженедельно более 20 часов на Интернет, он является основным источником получения информационных ресурсов. А те, кто заходит в Сеть на час, предпочитают телевидение, радио и газеты.

1.2 Сайт как средство развития бизнеса

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

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

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

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

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

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

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

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

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

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

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

1.3 Классификация современных web-сайтов

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

Веб-сайт (англ. Website, от web - паутина и site - "место") - в компьютерной сети объединённая под одним адресом совокупность документов частного лица или организации. По умолчанию подразумевается, что веб-сайт располагается в сети Интернет.

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

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

· проектирование;

· дизайн;

· верстка;

· программирование;

· интеграция готовых компонентов;

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

· тестирование;

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

Интернет-проекты классифицируются по различным категориям: по степени сложности, наполнению, структуре, назначению и т.д.

Самая широкая классификация делит сайты на домашние, некоммерческие, коммерческие.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интернет-магазин. Интернет-магазин, он же Сетевой магазин, Электронный магазин, Internet shop, E-shop - интерактивный веб-сайт с каталогом продукции, с помощью которого клиент может оформить заказ нужных ему товаров. Используются различные системы расчётов: от пересылки товаров наложенным платежом или автоматической пересылки счета по факсу до расчётов с помощью пластиковых карт.

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

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

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

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

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

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

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

1.4 Виды структурной организации web-сайтов

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

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

1.4.1 Линейная организация

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

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

2

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

Рисунок 1.1 - Строго линейная организация

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

1.4.2 Линейная форма с альтернативами

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

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

2

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

Рисунок 1.2 -Линейная форма с альтернативами

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

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

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

2

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

Рисунок 1.3 - Линейная форма со свободой выбора

1.4.3 Линейная организация с боковыми ответвлениями

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

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

2

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

Рисунок 1.4 - Линейная форма с боковыми ответвлениями

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

1.4.4 Решетка

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

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

2

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

Рисунок 1.5 - Решетка

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

1.4.5 Иерархия

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

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

2

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

Рисунок 1.6 - Узкая иерархия

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

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

2

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

Рисунок 1.7 - Широкая иерархия

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

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

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

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

2

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

Рисунок 1.8 Запутанные деревья

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

1.4.6 Полное связывание

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

Рисунок 1.9 - Полное связывание

При полном связывании количество ссылок равно числу страниц, помноженному на число страниц минус один. Это означает, что для сайта из пяти страниц количество ссылок будет равно 20. Для сайта из 20 страниц количество ссылок составит 90. Для сайта из 100 страниц - число ссылок составит 9900 (100x99) и для 1000-страничного сайта их число будет в районе одного миллиона! В действительности с точки зрения практичности полное связывание не является хорошим выбором. Если в качестве максимального допустимого количества ссылок на странице принять число девять, то сайт в стиле полного связывания может состоять из десяти страниц. В действительности, большинство сайтов склонны использовать частичное связывание с перекрестными ссылками только на наиболее важные страницы.

1.4.7 Смешанные формы

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

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

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

2

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

Рисунок 1.10 - Смешанная иерархия

1.4.8 Стиль паутины

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

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

2

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

Рисунок 1.11 - Паутина

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

1.5 Юзабилити web-сайта

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

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

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

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

Особенности поведения пользователей. В принципе, поведение пользователей на веб-сайте не особо отличаются от их поведения в, скажем, магазине. Пользователи мельком окидывают взглядом каждую новую страницу, просматривают отрывки текста и кликают на первую зацепившую их внимание ссылку, или хотя бы отдаленно похожую на ту, которую они искали. На самом деле, на большую часть страницы они даже не смотрят. Многие пользователи ищут что-нибудь интересное (или полезное) и "кликабельное"; как только на глаза попадается подходящий "кандидат", пользователь быстро кликает и переходит по ссылке. Если результат не оправдал его ожиданий, пользователь кликает "назад" и продолжает поиск.

Пользователи высоко ценят качество и правдивость информации. Если страница содержит высококачественный материал, пользователи готовы идти на компромисс с наличием рекламы на странице и её дизайном. Это одна из причин, почему сайты с не совсем хорошим дизайном, но с качественным содержанием получают большой трафик. Содержание намного важнее, чем обрамляющий его дизайн. Анализируя веб-страницу, пользователи ищут фиксированные точки, "якоря", которые будут направлять их по содержимому на странице. Очень простой принцип: если веб-сайт не может оправдать ожиданий пользователей, то дизайн не выполняет свою функцию, а компания теряет деньги. Чем навигация менее интуитивна, тем сильнее желание пользователя покинуть веб-сайт и найти альтернативу.

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

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

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

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

Глава 2. Технологии, применяемые при разработке web-сайтов

2.1 Модель "Клиент-сервер"

Модель «клиент-сервер» - это технология взаимодействия в информационной сети. Сервером сети Интернет называется компьютер, на котором установлена специальная программа (она тоже называется сервером, web-сервером или http-cepвером), которая отображает web-страницы по запросу клиентской машины, а так же выполняет множество других полезных функций. Владелец и администратор сервера могут гибко менять необходимые настройки, разрешать или запрещать доступ к его ресурсам, подключать, настраивать и запускать ряд дополнительных программ и функций, таких как скрипты CGI или приложения SSI, то есть полностью конфигурировать его работу по мере необходимости. Когда домашний компьютер связывается с сервером и получает от него все необходимые данные, например код web-страницы, он выступает в роли "клиента", а всю систему в этом случае принято называть связкой "клиент--сервер".

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

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

Программное обеспечение клиентов может включать:

· Браузер или универсальный клиент. Это программа, которая обеспечивает загрузку и отображение Web-страниц. Кроме того, современные версии этого ПО позволяют выполнять небольшие клиентские приложения (скрипты и апплеты), расширяющие возможности обычных Web-страниц, а также осуществлять путешествия в виртуальных мирах.

· Почтовые приложения, работающие с электронной почтой.

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

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

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

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

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

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

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

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

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

· Функции ввода и отображения данных.

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

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

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

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

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

На основе выше сказанного можно сделать вывод, что данная технология имеет как достоинства, так и недостатки.

К недостаткам можно отнести:

· дорогое техническое обеспечение;

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

К достоинствам системы клиент/сервер следует отнести:

· сильную централизованную защиту;

· центральное хранилище файлов;

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

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

2.2 Технологии, работающие на стороне клиента

2.2.1 HTML

HTML (от англ. Hypertext Markup Language -- "язык разметки гипертекста") -- это стандартный язык разметки документов во Всемирной паутине. Все веб-страницы создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, удобном для человека. HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991--1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов (размечаемых "тегами"), служащих для создания относительно простых, но красиво оформленных документов. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

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

Язык HTML позволяет размечать текст. В том числе вы можете: сделать текст жирным, курсивным или подчёркнутым; вставить специальные символы (выходящие за рамки ASCII символы пунктуации, математические символы, греческие и готические буквы, стрелки и т.п.); поменять цвет шрифта; выровнять текст по центру, левому/правому краю, по ширине; оформить текст как гиперссылку на другую страницу или файл; нарисовать таблицу.

Позже, когда появилась необходимость интерактивности веб-страниц, в HTML появились формы для введения пользователем данных, которые позднее подвергаются обработке. Формы и другую информацию можно обрабатывать с помощью специальных серверных программ (например, на языках PHP или Perl). Открытие мультимедийных файлов, выводимых как непосредственно браузером (например, изображения в форматах JPEG, GIF или PNG; аудиофайлы и др.), так и внешними приложениями, "встраиваевыми" в окно браузера (Flash-анимация, Java-апплеты и прочее).

2.2.2 XHTML

XHTML (EXtensible HyperText Markup Language, Расширенный язык разметки гипертекста) предназначен для замены HTML и считается его более строгой версией.[15]

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

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