Разработка Web-сайта компании по производству обуви Cicross Footwear®

      Бизнес-политика компании Cicross Footwear^® находит прямой отклик в лицах своих потенциальных клиентов. Итак, целевой аудиторией компании являются молодые люди в возрасте от 19 до 40 лет, ведущие активный, урбанистический стиль жизни, предпочитающие в предметах одежды баланс комфортабельности и креативных дизайнерский решений.

2. Анализ существующих логических структур Web-сайтов

      Одним из важнейших терминов интернет-пространства стал термин «юзабилити» (usability), состоящих из двух английских слов – use (использовать) и ability (способность), и на русский язык данный термин переводить как «удобство использования».

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

     Связи между страницами, существующие на любом сайте, всегда складываются в некоторую структуру, отражающую внутренние связи его содержимого, – эта структура носит названия «логическая структура» Web-сайта. Логическая структура сайта включает в себя:

1. Набор тематических разделов, из которых состоит сайт.
2. Набор документов и иллюстраций, составляющих каждый раздел.
3. Гипертекстовые связи между всеми страницами ресурса.

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

1. Линейная структура сайта

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

      Создание сайтов с линейной структурой обычно применяют для онлайн-презентаций, описаний пошаговых процессов и т. д. Из-за того, что поведение пользователя на сайте с подобной структурой весьма предсказуемо, еще при создании сайта можно предугадать действия посетителя и поместить нужную информацию на нужной странице [1]. Для Web-сайтов с большим объемом информации линейная структура не подходит. Здесь целесообразнее использовать другие логические структуры, например, «решетку». На рисунке 1 показана линейная структура Web-сайта.

Рисунок 1 – Пример линейной структуры Web-сайта

2. Структура сайта «Решетка»

      «Решетка» – это та же линейная структура, но направленная как на горизонтальные взаимосвязи между Web-страницами, так и на вертикальные. Часто с использованием «решетки» создают Web-сайты интернет-магазинов. К примеру, каталог интернет-магазина объединяет товары по виду и по цене. Именно «решетка» в таком случае обеспечит возможность просмотреть товары по обоим признакам, что благотворно влияет на удовлетворение запросов посетителей. Логическая структура Web-сайта «решетка» представлена на рисунке 2.

Рисунок 2 – Пример решетчатой структуры Web-сайта

3. Иерархическая структура сайта

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

      У иерархической структуры есть и свои недостатки. Например, она может оказаться слишком «узкой». Тогда пользователю придется проделывать слишком много переходов между страницами. Это – довольно трудоёмкий процесс. В свою очередь слишком «широкая» иерархия может привести к излишне большому количеству вариантов и чтобы их все рассмотреть придется затратить очень много времени, что также не нравится пользователям.

      Пример иерархической структуры сайта представлен на рисунке 3.

Рисунок 3 – Пример иерархической структуры сайта

4. Структура сайта «Паутина»

      Запутанную и непонятную логическую структуру сайта называют «паутиной». Часто такая структура может быть следствием неправильного проектирования сайта, но нередки случаи, когда она создается намеренно, дабы более выразительно представить информацию. Это можно наблюдать на примере статей о технических изделиях, с множеством ссылок на схемы, техническую документацию, нормы и стандарты и т. п. Такой «запутанный» подход, тем не менее, дает посетителю самую полную информацию. Логическая структура сайта в виде паутины представлена на рисунке 4.

Рисунок 4 – Пример логической структуры сайта «Паутина»

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

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

3. Обзор программного инструментария Web-сайтов

      На сегодняшний день существует множество различных программ для создания Web-сайтов. Данный программный инструментарий носит название «HTML-редактор». Для того чтобы лучше понять сущность программного инструментария для создания Web-сайтов, дадим определения основных терминов, которыми оперируют Web-разработчики [5].

      HTML от англ. Hypertext Markup Language – (язык разметки гипертекста) – стандартный язык разметки документов в глобальной сети Интернет. Большинство Web-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.

      Гипертекст – термин, введённый Тедом Нельсоном в 1965 году для обозначения «текста ветвящегося или выполняющего действия по запросу». Обычно гипертекст представляется набором текстов, содержащих узлы перехода между ними, которые позволяют избирать читаемые сведения или последовательность чтения. Общеизвестным и ярко выраженным примером гипертекста служат Web-страницы, размещённые в Сети.

      Браузер (от англ. Web browser) – программное обеспечение для просмотра Web-сайтов, то есть для запроса Web-страниц их обработки, вывода и перехода от одной страницы к другой.

      Все существующие HTML-редакторы можно систематизировать в 3 основные группы:

1. Редакторы HTML-кода (редакторы тегов)

      Редакторами тегов в основном, пользуются профессиональные Web-разработчики – так как такие инструменты подразумевают написание кода самостоятельно. С помощью редакторов HTML-кода создается чистый программный код, который позволяет Web-программистам полностью воспроизводить задуманное, без вмешательства инструментов и шаблонов «по умолчанию».

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

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

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

2. Визуальные редакторы (WYSIWYG)

      Принцип разработки Web-сайтов по методу WYSIWYG (от англ. – What You See Is What You Get – что видишь, то и получаешь) представляет собой визуальный редактор, который дает возможность создавать полноценные Web-сайты без необходимости знания HTML-разметки, PHP-кода и прочих средств, которые используются профессиональными Web-разработчиками. Подобные программы просты в использовании – есть рабочая область, на которую предлагается добавлять различные элементы сайта. Таким образом, задача разработчика сводится к управлению проектированием при помощи визуальных компонентов, используя окно редактора, где на любом этапе работы над проектом можно посмотреть, как будет выглядеть страница в браузере, а генерация кода происходит полностью автоматически, что является несомненным плюсом подобных систем создания сайтов.

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

3. Системы управления контентом (CMS)

      CMS – это аббревиатура английской фразы «Content Management Software» (программное обеспечение для управления контентом). Чаще можно встретить другую интерпретацию CMS – «Content Management System» (Система управления контентом).

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

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

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

1. Редактор HTML-кода HomeSite 4.5.2

      Один из самых продуктивных редакторов, снабженный большим количеством приспособлений, призванных серьезно облегчить работу HTML-кодеру или Web-дизайнеру.

      Объемистый дистрибутив редактора включает в себя, помимо самого редактора, редактор TopStyle для редактирования таблиц CSS. При желании его можно не устанавливать. Вторым компонентом, который существует вне самого HomeSite, является довольно удобный Plug-In, позволяющий прямо из проводника Windows связываться с удаленными FTP-хостами для загрузки файлов. То есть, в проводнике между «Панелью управления» и «Назначенными заданиями» возникает пункт «Allaire FTP & RDS», и вам остается только добавить туда координаты своих сайтов для FTP-загрузки. Просто и удобно.

      Весьма мощным инструментом в руках разработчика может стать Visual Tools Markup Language и WizML (Wizard Markup Language), язык разметки инструментов и язык разметки мастеров, соответственно. Это – инструменты, позволяющие пользователю HomeSite изменять встроенные в HomeSite диалоги и мастера для редактирования тегов HTML, а также создавать свои собственные. Каждый инструмент представляет собой специально разработанный для этих целей язык, для работы с которым в HomeSite встроен специальный редактор – Allaire Visual Tools.

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

      Во-первых – Tag Chooser (выбор тегов). В небольшом окне отображен древовидный список тегов, причем теги скомпонованы не только по назначению, но и по степени новизны – теги устаревшие, а также поддерживаемые не всеми браузерами приведены в отдельных подрубриках. Кроме того, здесь же вы найдете теги для работы не только с HTML, но и с HDML, WML, и многими другими языками.