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

Писателям, временно севшим на мель,
Отныне дорога открыта:
Роман напишите на HTML --
"Вебмастер и Вебмаргарита".
Из "Сетевой" мудрости

"Кухня и кулуары"

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

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

Для простоты дальнейшего сопровождения Web-сайта давайте всем HTML-файлам осмысленные имена, при необходимости разработайте четкую систему именования документов. Например, названия файлов с новостями можно смело привязывать к текущей дате: new011200.html; new151200.html и т. д.

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

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

http://www.guestbook.ru/ http://www.dreambook.com/; http://www.freeguestbooks.com/; http://www.guestpage.com/; guestworld.tripod.lycos.com; http://www.lpage.com/

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

http://www.webpics.newmail.ru/; www.penpal.ru/info; designlib.boom.ru; www.erinet.com/jelane/families/index.html; http://www.animfactory.com/; http://www.coolgraphics.com/; http://www.buttonmaker.com/; http://www.cooltext.com/; http://www.grapholina.com/; reallybig.com

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

http://www.w3.org/; http://www.citforum.ru/; http://www.js.ru/; catbig.virtualave.net; webreview.com; www.bfree.on.ca/html; http://www.widowsweb.com/; www.worldwidemart.com/scripts

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

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

http://www.topping.com.ua/; top100.rambler.ru; top.list.ru; http://www.spylog.ru/; http://www.hitbox.com/; www.extreme-dm.com; http://www.icount.com/; http://www.site-stats.com/; www3.freestats.com; http://www.thecounter.com/

http://www.freecode.com/, http://www.javascripts.ru/ -- райские сады для всех тех, кто желает вкусить плоды чужого труда: алгоритмы поисковых машин; коды для реализации управления паролем доступа; сценарии счетчиков обращений, звуковых эффектов, калькуляторов, календарей и прочих аксессуаров.

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

Решение второй задачи сопряжено с определенными трудностями. Самое главное -- это договориться с оператором Web-сервера, где находятся ваши странички, о предоставлении подобной статистики. Ее анализ дает возможность живо реагировать на все запросы клиентов, учитывать их склонности, вкусы, потребности. Существует множество программ для анализа такой информации, часть из них вы найдете на сервере http://www.winfiles.com/ в разделе Site Builder Solutions (например, WebTrends Log Analyzer и др.)

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

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

<meta http-equiv="content-type" content="text/html; charset= windows-1251">

Естественно, значение параметра charset может быть и другим, например KOI8-r.

О серверах, предоставляющих бесплатные услуги по размещению ваших страничек, читайте в журнале "Домашний ПК", # 1--2, 2000.

Платная регистрации доменов второго уровня осуществляется на сайтах, пути к которым исходят из http://www.internic.net/, но для этого надо иметь кредитную карточку. Деньги по безналичному расчету за подобную операцию принимают http://www.register.com.ua/ и ukrname.com.

Соблюдайте "сетикет" (netiquette), правила которого можно прочесть на сайтах http://www.albion.com/; ic.krasu.ru/rev/rev2.html.

Тщательно протестируйте свой проект различными броузерами и при разных разрешениях экрана. Проверьте работоспособность каждой ссылки. Этот процесс можно автоматизировать с помощью специальных сайтов (например, websitegarage.netscape.com) и программ (Linkbot, http://www.watchfire.com/).

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

Кроме того, для повышения релевантности поиска каждую страничку вашего Web-проекта снабдите ключевыми словами, фразами и аннотацией (на русском и английском языках), которые также часто используются при индексировании. Для этого в теле документа в разделе <head>...</head> применяют метатеги. Сайты http://www.metatagbuilder.com/; http://www.y4i.com/; www.incense.nm.ru/meta более подробно ознакомят вас с принципами их построения.

Ну а в качестве примера приведем конструкцию, описывающую странички, посвященные творчеству Киплинга:

<head>

<title>Творчество Киплинга</title>

<meta name="keywords" content="Киплинг, Редьярд Джозеф, английский писатель, поэт, Ким, Песни казармы, Книга джунглей, Маугли, лауреат Нобелевской премии, Kipling, Rudyard Joseph, poet, short-story writer, Kim, Barrack-Room Ballads, The Jungle Books, Mowgli">

<meta name="description" content="Сборник произведений Редьярда Киплинга. Прославление личной отваги, пропаганда культурной миссии англичан на Востоке. Психологически достоверные образы животных.">

</head>

Итак, в поле content первого метатега вы пытаетесь предугадать те слова и фразы, что будут использовать посетители для поиска вашей странички. Содержание одноименного поля второй конструкции часто необходимо для отображения в поисковых системах аннотации найденного сайта. По идее, длина полей content не должна превышать 1000 символов, но для второго метатега стоит ограничиться 200--300 знаками, поскольку поисковые серверы, как правило, не отображают большего объема информации.



К вопросу о дизайне

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

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

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

Старайтесь реже применять фразы, подобные следующей: "Страница (раздел) находится в стадии разработки". Это раздражает посетителей.

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

Избегайте перенасыщения страниц анимационными эффектами и мерцающим текстом.

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

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

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

В народе говорят: "Глупый учится на собственных ошибках, умный -- на чужих". Давайте будем умными людьми -- http://www.webpagesthatsuck.com/.

Не стоит оптимизировать свой сайт для чрезмерно высоких разрешений экрана. 800 x 600 -- наиболее подходящий вариант. Следите за тем, чтобы при таком значении размер страницы по горизонтали не превышал размера окна броузера. И вообще, старайтесь избавляться от горизонтальных полос прокрутки (они ухудшают вид и читабельность страницы), а слишком большие документы делить на несколько независимых частей.

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


Графика вне графика

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

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

Кроме того, убедитесь, что все картинки имеют описание в параметре alt тега img (например, <img src= "bobik.jpg" alt ="Фотография моей любимой собаки">).

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

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

<a href="big_version.jpg"><img src="small_version.jpg"></a>

Для создания анимированных GIF-файлов, используемых, скажем, для хранения баннеров, вам понадобятся специальные приложения, например Animagic GIF Animator (rtlsoft.com/animagic), Ulead GIF Animator (http://www.ulead.com/, trial-версия).

Бесплатный редактор для построения Image map можно загрузить здесь: Mapedit (www.boutell.com/mapedit).


Приобретаем известность

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

Зарегистрируйтесь в наиболее популярных поисковых системах и тематических каталогах ("Домашний ПК", # 5--7, 1999). Используйте специальные службы, позволяющие обретать прописку сразу в нескольких системах.

123Launch.com; submit-It.com; addme.com; submitit.bcentral.com; broadcaster.com; http://www.scrubtheweb.com/; http://www.1second.com/; 212.net; http://www.2coolweb.com/, http://www.design.ru/

Раскручивая русскоязычный проект, заявите о себе на страницах:

http://www.meta-ukraine.com/; http://www.uaportal.com/; http://www.gala.ne/t; http://www.bigmir.net/; http://www.au.ru/; http://www.up.ru/; http://www.ulitka.ru/; www.look.ru; url.linet.ru; stars.ru; list.ru; http://www.fair.ru/; hi.ru

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

Прежде чем создать баннер, решите, в какой системе, а лучше, на каком конкретном сайте (по договоренности) вы его будете демонстрировать. Глубже понять идеологию баннерной рекламы и электронного бизнеса в целом вам помогут, например, сайты http://www.promo.ru/; http://www.clickz.com/; http://www.netb2b.com/.

Оперативные сводки новостей, форумы, чаты, доски бесплатных объявлений, конкурсы и лотереи -- вот та благодатная почва, на которой расцветает популярность любого сайта. За бесплатными чатами последуйте на такие сайты, как chat.land.ru; http://www.multichat.com/.

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

http://www.da.ru/, 4u.ru, zerkalo.ru; attend.to; http://www.dk3.com/

А вот и адреса некоторых популярных баннерных систем:

banner.kiev.ua; banner.topping.com.ua; http://www.abn.com.ua/; http://www.echo.com.ua/; http://www.netvertising.com.ua/; http://www.rle.ru/; http://www.ir.ru/; tbn.ru; http://www.reklama.ru/

Подписывая электронное письмо, добавляйте адрес своего сайта.

Как стать продюсером собственного Web-проекта? Как грамотно организовать раскрутку сайта? Профессионалы советуют:

http://www.promo.ru/; http://www.webclub.ru/; wm.diaspora.ru; http://www.hitbox.com/; http://www.accusubmit.com/

Организуйте для ваших клиентов бесплатную рассылку новостей (http://www.sub-scribe.ru/).

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


Тексты и содержание

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

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