Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Эффективная эксплуатация сайта. Практическое пособие
.pdf
как постоянные покупатели, и потому все сведения ресурса
должны обновляться регулярно. Для того чтобы упростить
процедуру поиска информации на сайте, а также для удобного
ее представления, весь ее объем обычно разбивается на разделы
по темам. Объем такого информационного сайта, как правило,
колеблется от 10 до 30 страниц.
Информационный сайт обязательно имеет приятный для
восприятия, привлекательный и неповторимый дизайн. Обычно
он выдержан в стиле компании и содержит его основные
элементы: фирменную гамму цветов и шрифты. Очень часто
в процессе построения такого интернет-ресурса как отправную
точку берут логотип. В том случае, когда фирма не имеет своего
собственного стиля, открывается прекрасная возможность его
создания.
Следует учитывать, что информационный сайт должен
иметь прекрасную графику, а также особую «сквозную» навигацию — четко организованную систему переходов и ссылок,
которая позволит пользователю легко переходить с любой
страницы сайта на главную и к любому другому разделу
данного ресурса. Еще одно преимущество — это существование на сайте поиска, существенно упрощающего навигацию.
Информационный сайт дает возможность компаниивладельцу оперативно оповещать потенциальных и существующих клиентов о текущих изменениях цен на товары и услуги,
сроков поставки, условий заключения контрактов и т. д. Главным преимуществом такого сайта можно считать сочетание
эффективности и информационной насыщенности.
Глава 3. ГРАМОТНАЯ
РАЗРАБОТКА ВЕБ-САЙТА
3.1. Разработка структуры сайта
После того как определены основные задачи будущего
информационного ресурса, наступает время подумать о его
структуре, которая должна соответствовать целям проекта.
Необходимо определить основные разделы, навигацию сайта
и ссылки внутри него. Составление грамотной структуры
позволяет сэкономить много сил и времени при создании сайта.
Лучше всего делать предварительные наброски на бумаге.
Например, отдельные страницы изображаются при помощи
различных геометрических фигур, а связи между ними —
в виде линий. Такой эскиз дает возможность постоянно
держать весь сайт перед глазами и избежать путаницы. Для
эффективной работы будущего сайта его структура должна
учитывать несколько существенных моментов.
1. Удобст во для поль зо вател я. Большинство современных
коммерческих сайтов ориентировано на определенный контингент пользователей. Каждый такой клиент посещает большое
количество информационных ресурсов Интернета, поэтому,
заходя на вашу главную страницу, он ожидает получить
определенные разделы и ссылки, их характерные названия.
Это удобно для пользователя, и, как правило, нарушающие
эти обозначение страницы повторно не посещаются. Поэтому
при разработке структуры сайта не рекомендуется отступать
от этих стандартов, а если все-таки это делается, то сайт
должен быть максимально простым, с интуитивно понятной
навигацией. Чаще всего структура сайта составляется по типу
52 53
дерева: имеется одна главная страница, с которой осуществляется переход на основные разделы (их, как правило, небольшое количество), а они, в свою очередь, ведут к более мелким
детализированным подразделам. Ссылок на странице должно
быть ровно столько, сколько требуется. При их избытке пользователь путается, а при недостатке долго не может найти
нужную страницу с информацией. При этом каждый раздел
сайта, а соответственно, и ссылка на него должны иметь короткое однозначное название, чтобы пользователю не приходилось тратить время на загрузку ненужных ему страниц. Здесь
тоже придется придерживаться определенных стандартов.
Большинство сайтов имеют ссылки с названиями: «главная
страница», «форумы», «блоги», «гостевая книга», «карта сайта»
и т. п. Они сразу понятны клиенту и приводят именно в тот
раздел, который ему требуется.
2. Очень полезно создавать на сайте два или более пере-
крывающих друг друга дерева информации. Это делается
для удобства различных пользователей. Например, переход
к отдельным статьям может одновременно осуществляться
со страницы со списком по типу «от простого к сложному»
или с алфавитным указателем. Если новичок в данной теме
выберет первый вариант, то знающий человек предпочтет
второй.
3. Размер документа. Основное требование — это логическая завершенность информации на сайте. Поэтому, какими бы
большими ни были темы, не допускается дробить их, так как
это создает путаницу как для администратора сайта, так и для
пользователя. В то же время не следует объединять в составе
сайта разнородные темы только с целью увеличения его
объема.
4. Ссылки на документы, расположенные вне информа-
ционного ресурса. Тут возможно два варианта: либо дается
ссылка непосредственно на сайт, содержащий указанный документ, либо документ копируется в собственный каталог. Второй
вариант привлекателен тем, что при этом пользователь не переходит на другой информационный ресурс и не «теряется».
Но в то же время, если исходный документ дополняется новой
информацией, необходимо своевременно это выявить и заменить копию на новую. Здесь каждый разработчик выбирает
наиболее устраивающий его вариант.
5. Мобильность структуры. Структура сайта не должна
быть слишком запутанной еще и для того, чтобы в случае необходимости разработчик мог дополнять ее и вносить изменения
в отдельные части. По возможности эти манипуляции не должны
приводить к переделке всего сайта.
3.2. Дизайн сайта
От дизайна полностью зависит первое впечатление пользователя об информационном ресурсе, а значит, и дальнейшее
желание остаться на нем и ознакомиться с его содержимым.
К дизайну относят способ размещения элементов на экране монитора, их стилистическое и цветовое оформление. Этими вопросами может заниматься как специально нанятый дизайнер, так
и сам разработчик. Какие бы задачи ни выполнял сайт, к его
дизайну обязательно будет предъявляться ряд требований.
1. Оформление всех страниц в составе сайта должно
быть выдержано в едином стиле. В этом случае пользователь
лучше запоминает сайт, создается впечатление о такой же
четко организованной его структуре. Разработчику это тоже
облегчает работу, так как позволяет создать один шаблон,
по которому будут в дальнейшем делаться все страницы.
При этом каждый раздел сайта, а соответственно, и ссылка
на него должны иметь короткое однозначное название, чтобы
пользователю не приходилось тратить время на загрузку
ненужных ему страниц. Здесь тоже придется придерживаться определенных стандартов. Большинство сайтов
имеют ссылки с названиями: «главная страница», «форумы»,
«блоги», «гостевая книга», «карта сайта» и т.п. Они сразу
понятны клиенту и приводят именно в тот раздел, который
ему требуется.
54 55
2. Стилистическое оформление сайта должно соответствовать его предназначению. Например, на сайте, посвященном
истории Древнего мира, возможно использование фигурных
текстов, орнаментов и текстур. Подобное оформление никак не
подойдет для интернет-магазина, занимающегося продажей
компьютеров и комплектующих. Здесь дизайнерские решения
будут совершенно иными.
3. Цвет текста и фона должен быть подобран таким образом,
чтобы текст был хорошо виден. Это касается и тех случаев, когда
фоном является картинка.
4. Необходимо избегать большого количества ярких цветов
в оформлении страниц, а также большого количества анимации.
Это отвлекает пользователя от основной информации и приводит к быстрому утомлению глаз, в результате чего страница
навряд ли будет посещена снова.
5. Размещая на сайте различные изображения, разработчикам
всегда приходится сопоставлять необходимое количество рисунков и скорость загрузки страниц. Если страница открывается
очень медленно, то вероятнее всего пользователь закроет ее, так
и не просмотрев, особенно если оплата за пользование Сетью у него
идет поминутно или за количество загруженной информации.
6. Блоки элементов на странице должны быть располо-
жены таким образом, чтобы, с одной стороны, это было удобно
для клиента, а с другой — заставляло его обращать внимание
на нужные администратору ссылки и информацию. Например,
известно, что чаще всего пользователь замечает элементы
навигации, расположенные в правой части экрана.
Также все виды дизайна интернет-страниц делятся на две
большие группы.
1. Жесткий дизайн — представлен таблицей, в которой
размеры каждой ячейки фиксированы и заданы в пикселях.
Достоинствами этого типа являются:
а) одинаковый размер страницы и расположение элементов друг относительно друга при разных разрешениях экрана,
что дает возможность для составления достаточно сложных
дизайнов;
б) при постоянных размерах ячеек легче управлять шириной текста.
Но имеется один очень существенный недостаток: при
таком типе дизайна размер страницы можно подогнать только
под определенное разрешение монитора. При большем разрешении между документом и краем экрана остаются свободные
отступы, а при меньшем — появляется горизонтальная полоса
прокрутки.
2. Этого недостатка лишен гибкий вид дизайна.
При нем содержимое страницы равномерно заполняет весь
экран вне зависимости от его размеров. Основными положительными моментами использования гибкого дизайна являются:
а) возможность подогнать страницу сразу под все разреше-
ния монитора;
б) заполняется весь экран, нет лишнего свободного места;
в) такой вид дизайна лучше всего совместим с языками
программирования.
Имеются и свои минусы:
а) слишком длинные текстовые строки на экранах с боль-
шим разрешением, неудобные для чтения;
б) непредсказуемость результата при смене разрешения
и браузера;
в) гибкие страницы создавать намного тяжелее, чем
жесткие.
3.3. Создание страниц сайта
Создание страниц для будущего сайта — очень важный
этап, так как правильность построения определяет удобство
для пользователей, корректное отображение в тех или иных
браузерах, слаженное функционирование всего сайта в целом.
При создании страниц сайта используются языки
программирования и специализированные программы.
Программирование без помощи ПО удобно тем, что не
требует установки специальных программ, в то же время
56 57
предоставляя разработчику неограниченное количество
возможностей. Однако сам процесс подчас очень длительный
и трудоемкий, требует знания языков программирования.
Кроме того, код готовой страницы, как правило, очень длинный и сложный, что создает трудности при необходимости
обновлен ия сайта. Эта пр облема решается оснащением сайта
дополнительными системами для управления контентом
(см. п. 3.5.).
Для создания достаточно сложных динамичных сайтов
достаточно владеть несколькими основными языками
программирования:
1) HTML (HyperText Markup Language) — стандартный
язык, при помощи которого в веб-среде создаются гипертекстовые файлы. Без этого языка практически невозможно построить сайт, так как именно он служит для выделения различных
элементов страницы (текст, картинки) и их форматирования,
а также разметки самой страницы. Применяя HTML, можно
создавать такие элементы текста, как параграфы, абзацы,
списки, заголовки, изменить размер, шрифт и цвет текста,
размер изображений. Все команды в языке HTML заключены
в угловые скобки <>, носят названия тегов и, в зависимости
от выполняемой функции, делятся на две группы:
отвечающие за отображение в окне браузере всего доку-
мента и отдельных его элементов;
применяемые для обозначения свойств файла (напри-
мер, заголовок, основная тематика, автор) — служат для интерпретации документа браузером.
Важной особенностью данного языка является то, что страницы, созданные при его использовании, одинаково корректно
отображаются разными браузерами. Следует также отметить
простоту HTML. Большая часть тегов являются парными:
имеются открывающий (в нем прописывается присваиваемое
элементу свойство) и закрывающий (тот же тег со знаком /) теги,
а между ними, как в контейнере, располагается сам элемент.
Для написания программного кода на этом языке используется
обычный блокнот или специальные текстовые редакторы;
2) CSS (Cascading Style Sheets, что переводится на русский
как «Таблицы каскадных стилей»). Его так и называют — язык
стилей, потому что при помощи этого языка можно задавать
огромное множество свойств для каждого элемента или их
группы в документе. CSS не применяется самостоятельно,
а чаще всего входит в структуру документа HTML. Выделяют
три вида таблиц стилей:
внутренние — прописываются непосредственно рядом
с одним из тегов и задают свойства лишь одного элемента;
глобальные таблицы также входят в состав HTML,
но они применяются к целой группе объектов;
связанные таблицы стилей — работают так же, как
и глобальные, но, в отличие от них, связанные таблицы сохраняются в виде отдельного документа, на который делается
гиперссылка из файла HTML;
3) JavaScript является языком, способным создавать сценарии действий для сайтов, добавляя им динамику и делая более
привлекательными для пользователей. Команды-скрипты
этого языка встраиваются в HTML-файлы и осуществляют
управление не только страницами, но и окном самого браузера.
Сценарии JavaScript являются клиентскими. Это означает, что
все полученные от пользователя данные первично обрабатываются на его компьютере. Это удобно в плане снижения сетевого
трафика, но сужает возможности языка;
4) php (Hypertext Preprocessor) — также язык, применяемый для создания сценариев, но в отличие от JavaScript обработка информации осуществляется на сервере. Это дает очень
много дополнительных возможностей. Проблема в том, что
даже в настоящее время не все серверы (особенно бесплатные)
поддерживают этот язык, что нужно учитывать при выборе
хостинга. Для того чтобы протестировать работу сценариев,
написанных на php, необходимо предварительно установить
локальный хостинг на свой компьютер.
Чаще всего для поставленных задач разработчику сайта приходится применять все указанные языки
программирования.
58 59
Самое главное удобство специализированных программ —
нет необходимости учить сложные языки программирования.
Страница сайта создается непосредственно перед глазами
разработчика в течение достаточно короткого времени.
Интерфейс таких программ достаточно прост и доступен
даже для не имеющих опыта пользователей ПК. Параллельно
с созданием страницы идет создание программного кода,
с которым впоследствии можно работать. Однако возможности
разработчика в этом случае ограничены набором возможностей самой такой программы. Кроме того, не владея языками
веб-программирования, осуществлять обновление сайта при
отсутствии программы очень сложно.
Рассмотрим наиболее популярные редакторы для создания
веб-страниц.
1) Macromedia Dreamweaver. Программа, обладающая
наиболее простым интерфейсом и возможностью параллельного
просмотра кода страницы. Редактор оснащен инструментами
для работы с текстом и изображениями, а также отладчиком
JavaScript-сценариев. При помощи Dreamweaver даже начинающий веб-програмист способен создавать профессиональные
страницы и сайты.
2) Macromedia Fireworks. Программа для профессиональных разработчиков. Основным ее преимуществом является
огромный набор возможностей для работы с графикой всех
известных форматов. Также при помощи нее можно редактировать коды HTML и скрипты JavaScript. Отличительной
особенностью Fireworks является работа с интерактивными
элементами, такими как выпадающие меню, анимированные
кнопки и др.
В Интернете на данный момент существует очень большое количество так называемых конструкторов сайтов,
которые могут играть роль вышеперечисленных программ.
Чаще всего они содержат шаблоны готовых страниц, а также
развитую систему управления контентом, позволяющую
редактировать информационное наполнение страницы, ее
дизайн и структуру, изменять общее количество страниц.
Наиболее популярным является конструктор сайтов, предлагаемый на drupal.com. Из чисто русскоязычных программ
это yandex.ru.
Неважно, каким из способов пользуется разработчик,
создавая информационный ресурс, главное — чтобы страницы
в итоге эффективно выполняли возложенные на них задачи,
были удобными для пользователей и могли легко обновляться
в будущем.
3.4. Наполнение веб-сайта информацией
Мозг человека устроен таким образом, что всю поступающую информацию он воспринимает намного более эффективно
в том случае, если она упорядочена и систематизирована. Это
касается и наполнения сайта. Каждый пользователь, посещая
страницу в Интернете, надеется найти на ней максимум полезной и доступно изложенной информации на интересующую его
тему. Этот фактор играет даже более важную роль, чем удобное юзабилити и оригинальный дизайн, ведь в конечном счете
клиент посещает сайт именно с этой целью.
Другое название информационного наполнения сайта —
контент. Работа с контентом начинается после того, как было
создано программное обеспечение и дизайн. Вначале разработчик и заказчик сайта определяют назначение того или иного
текста на странице, а также его наилучшее расположение.
Любой контент должен соответствовать основной цели сайта,
будь то простой лозунг или большая статья.
Процесс информационного наполнения сайта включает
в себя несколько последовательных этапов:
1) архитектура информационного наполнения. На этом
этапе составляется предварительный план. Решаются вопросы
о характере информационного наполнения, способе его хранения и доставки до пользователя, а также многие другие;
2) разработка информационного наполнения. Заключается
в реализации на практике всех идей, предложенных на преды-
60 61
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]