16+
ComputerPrice
НА ГЛАВНУЮ СТАТЬИ НОВОСТИ О НАС




Яндекс цитирования


Версия для печати

Модуль поиска не установлен.

Сайт в идеале

28.07.2004

Сергей Антропов

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

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

С чего начинается ресурс

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

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

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

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

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

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

Другой немаловажный вопрос - скорость загрузки начальной страницы. В Интернете много сайтов, документы которых весят сотни килобайт и даже мегабайт. Трудно представить, что, обладая даже выделенной линией, человек решится их посетить или долго задержаться на сайте. Но в другом случае, стремясь к минимизации размера страницы, разработчики получают скромный дизайн при тусклой графике. Где находится золотая середина? Согласно исследованиям американских ученых Якоба Нильсена и Мари Тахир, оптимальный размер страницы - 50 Кб. Даже в случае плохой связи такой документ будет грузиться 10-15 секунд. В случае выделенного канала страница появится почти мгновенно.

Оформление сайта

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

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

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

Тип и размер шрифта играют важную роль при чтении текста. Шрифт бывает с засечками (маленькие черточки на концах символа) и без таковых. Буквы с засечками смотрятся лучше, их легче читать, так как глаз "цепляется" за границы символов. Однако на устаревших типах мониторов засечки могут плохо отображаться, поэтому рекомендуется использовать шрифт без засечек, к примеру, Verdana или Arial. При достаточно крупном размере букв лучше использовать буквы с засечками, к примеру, Times New Roman. Рекомендуемый размер шрифта - 12 пунктов. Этот параметр задается в css-файле. Мелкий шрифт в восемь пунктов используют для размещения менее важной информации. Заголовки на сайте лучше делать крупнее основного текста или выделять жирным шрифтом. Иногда рекомендуют не использовать фиксированный размер основного шрифта, чтобы пользователь мог изменять его в большую или меньшую сторону в настройках браузера (меню Вид - Размер шрифта). Особенно щепетильны в этом вопросе американцы. Сторонники данного подхода в css-файле указывают размер заголовков и менее важного текста относительно основного шрифта.

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

Современное требование - наличие поиска на сайте. Домашняя страница должна содержать непосредственное поле для ввода поисковых запросов, а не ссылку на страницу поиска. Поле ввода запроса лучше размещать вверху страницы. Рекомендуемая длина для него - 25-30 символов. По умолчанию поиск должен охватывать весь Web-узел и не включать в себя другие ресурсы Интернета. Зачем рекламировать конкурентов?

Графика и анимация - один из больных вопросов. Рекомендуется использовать только необходимые картинки, которые несут смысловую нагрузку, и избегать бессмысленной красочности. Из-за этого многие красивые сайты весят сотни мегабайт, при том, что реально полезной информации на них - килобайт-другой. Как сказал мне знакомый бизнесмен, качающий много прайс-листов оптовых компаний: "Мне нужны цены, а как выглядят сок и шоколад, я и без них знаю". Совсем без графики ресурс тоже выглядит тускло и просто, поэтому в данном вопросе необходимо искать компромисс. По мнению специалистов, рисунки должны занимать от 5 до 15% площади страницы. Если они превышают лимит, значит, графики на сайте слишком много или его специфика требует много визуальной информации (ресурс музея или картинной галереи). Все рисунки и фотографии лучше подписывать, используя параметр alt в теге img. Это даст шанс разобраться в ресурсе тем, кто отключает отображение графики в настройках браузера. И обязательно тестируйте сайт в режиме без графики: многие сайты, лишенные графической информации, выглядят непривлекательно и запутанно.

Где взять информацию для сайта

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

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

Интернет-издание Gazeta.ru в представлении не нуждается. Однако мало кто знает, что ресурс предоставляет возможность экспорта новостей на другой сайт. Для получения кода необходимо указать раздел и количество анонсов по каждой теме. Всего разделов больше десятка, среди которых первая полоса, политика, бизнес, финансы, общество, комментарии, парк культуры, спорт, автомобили. Из дополнительных опций предлагается выбор между кодировками koii-8 или win-1251, а также настройка формата получаемых новостей, к примеру, с отображением времени поступления или только даты. По желанию можно самостоятельно создать внешний вид экспортируемых новостей. Для этого на сайте дан специальный шаблон. Результат ваших действий отобразится в отдельном окне, при желании его можно отредактировать заново. Полная ссылка к экспорту новостей: http://www.gazeta.ru/cgi-bin/newexport/export?action=show&uid=0&cid=1.

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

Специализированный проект Sources.ru посвящен вопросам программирования и IT. Соответственно и новости на первой странице заточены под эти темы. При желании их тоже можно экспортировать в виде информера. Для этого необходимо скопировать код, размещенный на странице http://www.sources.ru/informer.shtml. Указывать адрес электронной почты не требуется.

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

В Сети великое множество погодных информеров, но одни из самых точных (в смысле прогнозов) можно найти на Gismeteo.ru. Здесь предлагают установить погодные информеры, выполненные в виде картинки gif (3-4 Кб) или flash-ролика (объем до 10 Кб). Различные информеры от маленьких до огромных позволяют отображать значения температуры, облачности, осадков, давления, скорости и направления ветра для одного выбранного города. Обновление происходит два раза в сутки. В первой половине дня отображается погода на сегодня, а после полудня - прогноз на завтра. Новинка проекта - предоставление прогноза погоды на десять дней вперед. Для получения кода необходимо ввести имя (ник), адрес ресурса, адрес электронной почты, город и язык информера. Прямая ссылка на страницу информеров: http://www.gismeteo.ru/weather/informer.htm?27731.

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

Один из таких проектов - Mlmv.com. Здесь можно взять информеры с курсами валют (доллар и евро), установленными ЦБ РФ. Коды кнопок расположены сразу на странице http://www.mlmv.com/files/informers.html, регистрация не требуется.

Расширенную финансовую информацию предоставляет Mfd.ru. На сайте лежат готовые к экспорту 30 графиков и 10 таблиц на финансовую тему. Отдельные информеры отображают колебания курса акций на протяжении 30 дней с обновлением каждые 10 минут. Кроме этого можно экспортировать строку поиска котировки. Для получения информеров необходимо зарегистрироваться. Страница с примерами графиков и таблиц находится на http://www.mfd.ru/informers/.

Сладости любят практически все. Вот только достать информацию о кондитерских новинках негде - не освещают ее в новостных лентах. И все же один проект есть - Konditerprom.ru. Пожалуй, это единственный сайт, откуда можно экспортировать новости кондитерской промышленности. Небольшая лента умещает семь заголовков, среди которых есть сугубо профессиональные новости и события, интересные всем. Для получения кода регистрироваться не нужно, можно сразу скопировать со страницы проекта http://konditerprom.ru/informer/.

Сложно представить, что при таком обилии полезных информеров нет их каталога. Есть, и не один. Informer.ru один из самых крупных и раскрученных. В одном месте находятся сотни информеров: погодных, с курсами валют, с котировками и анализом фондовой биржи. Эти данные на Informer.ru размещают такие известные ресурсы, как РБК, Relax.ru и другие. Они же отвечают за достоверность информации. На сайте есть текстовые, графические и выполненные с помощью flash информеры. Они разделяются на восемь разделов: курсы валют, погода, индексы, новости, спорт, рекомендуем, все информеры и разное. На сайте реализован удобный поиск необходимой информации. После выбора информера на нем нужно щелкнуть. В новом окне настраивается цветовая гамма и другие параметры. Для получения кода обычно требуется регистрация.

Affiliate.ru - еще один небольшой каталог информеров, состоящий из шести разделов: региональные, финансовые, Интернет и IT, порталы, погода и юмор. Сами информеры не представлены, даются лишь ссылки на другие ресурсы, где можно взять код.

Как сделать сайт краше

Для того чтобы создать хороший сайт или улучшить существующий, мало знать основы веб-дизайна и языка html. Чтобы оживить странички, необходимо мало-мальски разбираться в языках Java Script и PHP, добавить немного анимации и статичных картинок. В общем, украсить ресурс.

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

И первыми в этом списке идут поисковые системы. Они предоставляют возможность точного поиска картинок в Интернете по запросу пользователя. Если вам необходимы изображения природы, животных или клетки ДНК, а сканера под рукой нет, можно воспользоваться сервисом на Yandex.ru или Google.com, в базах которых находится больше миллиарда изображений. Для этого на сайте поисковой машины щелкаем по разделу "Картинки" и в новой строке поиска вводим запрос, лучше из одного слова. Однако владельцы сервиса предупреждают, что найденные изображения могут являться интеллектуальной собственностью и защищаться законом об авторском праве. Поэтому при использовании эксклюзивных фотографий лучше связаться с автором и согласовать с ним вопросы размещения.

Graphxkingdom.com - большой англоязычный каталог бесплатных картинок для веб-дизайнеров. Десятки рубрик (компьютеры, медицина, книги, флаги, музыка, игрушки и многое другое) находятся слева. Российский аналог, пусть и не такой большой, находится на http://graphic.centre.ru/index.htm. Здесь можно скачать иконки, анимированные gaf'ы, кнопки и полистать пособие по html.

Крупнейший русскоязычный ресурс о веб-программировании находится на Cgi.myweb.ru. Здесь размещено почти 3 тыс. скриптов, написанных на семи языках программирования (Java Script, PHP), из них русских скриптов - более 500. Все они сортируются по разделам в зависимости от средств создания и категории. Отдельно выделены новые скрипты, популярные и лучшие. Для быстрой навигации на сайте есть поиск. На Cgi.myweb.ru также доступен огромный каталог полезных ресурсов. Он разделен на разделы, посвященные отдельно скриптам, графике, деталям для сайтов и другим полезным мелочам. При желании можно подписаться на еженедельную рассылку, чтобы получать свежие версии скриптов одним из первых.

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



статьи
статьи
 / 
новости
новости
 / 
контакты
контакты