Строим свой дом в Сети.
Урок 2. Строим свой дом в Сети
С появлением в жизни общества сети Internet возможности рекламы резко возросли — публиковать объявления о продаже на всех обнаруженных досках объявлений не пробовал только ленивый. По сути,
вопрос об использовании Internet только для размещения рекламного объявления о продаже сводится лишь к умению грамотно составить это самое объявление. Так как эта тема уже рассматривалась в
предыдущем уроке, мы на ней специально останавливаться не будем. Мы подумаем о другом — ведь невозможно же составить объявление так, что бы у нашего уже искушенного пользователя дух захватило,
голова закружилась и он сразу же отдал «пол-царства за кота». Нужна более подробная информация, фотографии будущего любимца, его предков до энного колена и проч. Где получить такую информацию?
Разумеется, на сайте питомника. Возникает риторический вопрос «что делать?» Заказать дизайнеру? Это, конечно, правильное решение, но не всегда финансово осуществимое. Наиболее отчаянные кидаются
«строить» сами. Это стремление к творчеству можно было бы только приветствовать, если бы все не выглядело так ужасно...
Кто из нас не встречал в Сети пронзительно-синий (красный, желтый) текст, набранный заглавными буквами на жгуче-черном (зеленом, фиолетовом) фоне? За мышкой струйкой мечется какая-то
потрясающая воображение фраза (котенок, кузнечик, щенок и т.п)... Статусная строка забита восторженно-самодовольным «Добро пожаловать на сайт питомника 'Shaltai-Boltai'»... Где-то с краю серое
поле, в котором, как ты с тоской понимаешь, в ближайшие 15 минут засверкает-заблестит апплет, призванный исполнить роль меню, а текстовых ссылок нет... Довершает этот кошмар какой-нибудь бравый,
жизнеутверждающий мотивчик... Рука судорожно зажатой мышкой непроизвольно тянется нажать Back. От винта. Еще один ушел...
Что происходит? В чем цель создания сайта? Что влияет на его популярность? Как его построить? Каких ошибок надо избегать любыми путями в сайтостроении, а какие не смертельны? Разберем эти
вопросы по очереди.
--------------------------------------------------------------------------------
В чем цель создания сайта?
Для начала попробуем поставить вопрос иначе: а для чего Вы сами «ходите в Интернет»? Неужели Вас приводит в экстаз одна только мысль о том, что вот сейчас минут этак 10 Вы будете наблюдать,
как загружается мегабайтная картинка? Вы улыбаетесь? Ну, разумеется, Вы же здравомыслящие люди и не станете так неразумно вести себя в Сети, Вы как и все ходите сюда за информацией... Но, в таком
случае, что заставляет Вас думать, будто на Вашу страничку будут ходить именно за тем, чтобы вновь и вновь прослушивать назойливый напев? Вы же не всерьез полагаете, что все оставшееся
человечество — законченные идиоты? Даже если они помешаны на кошках...
Первое следствие из поставленного вопроса — сайт НЕ создается для того, чтобы потрясти воображение случайно забредших посетителей всеми мыслимыми и не мыслимыми наворотами, которые
придумали умные дядьки-программеры. Нет такой задачи, которую нельзя было бы решить проще.
Второе следствие из поставленного вопроса — если Вы ищете информацию, возможно остальное человечество ищет того же, а это значит, что содержание является одной из самых важных составных
частей сайта, если не самой важной. Если на сайте нет полезной информации, способной заинтересовать определенный круг людей, то можно ставить вопрос о необходимости существования сайта как
такового. Поэтому, прежде, чем что-то начать делать, подумайте — кто Ваш потенциальный посетитель? Что такого можете предложить Вы, напрягая его апплетами, музыкой и боевой раскраской, чего он не
найдет в другом месте, где он будет избавлен от такого издевательства? Но о дизайне позже... Сейчас об информации.
Если Вам нужно просто отрекламировать свой питомник — ядром Вашей информации станет та племенная работа, которую Вы провели, выставочная карьера животных Вашего разведения, племенной
потенциал питомника... и т.п. Но в этом случае, не расчитывайте на большое количество посетителей — Ваша аудитория слишком специфична, поскольку ограничена рамками одной породы в племенной работе
одного питомника. И только высокое качество Вашей работы, отраженное в Ваших питомцах способно привлечь на сайт людей (читаем: потенциальных покупателей)
Если Вы хотите рассказать о Своей породе — здесь простора больше, и при всей специфичности подобного сайта, его посещаемость выше за счет случайных людей, пришедших с поисковых серверов. И
вот эти-то люди могут либо уйти сразу же (плохо подана информация (либо ее мало, либо она однобока, либо просто неинтересна), сложная навигация, ужасный дизайн и проч., проч., проч.), либо стать
Вашими постоянными посетителями, а в конечном счете и единомышленниками, и покупателями.
Говорить о фелинологических серверах и порталах мы не будем — во-первых, это выходит за рамки статьи о рекламе, во-вторых, новички (Слава Богу!) на подобные аферы не
решаются.
--------------------------------------------------------------------------------
Что влияет на популярность web-сайта
Об информации мы уже говорили — это первая составляющая хорошего сайта.
Дизайн — вторая по важности составляющая, это — лицо, фасад, одежка, по которой, как известно, встречают. От вида Ваших страниц зависит, захотят люди к Вам вернуться или содрогнутся при
мысли о этом 
. Ваш сайт должен иметь «свое лицо», отличное от других, свой стиль. Не лучшее
впечатление оставляют сайты, где каждая страничка выполнена в разном дизайне — приходится гадать, то ли ты еще там, куда направлялся, то ли тебя перебросили в другое место
Стильность web-сайта достигается несколькими приемами. Можно выделить следующие элементы, участвующие в создании стиля:
шрифт — в пределах публикации он должен иметь одинаковые характеристики — такие, как начертание, высота, цвет.
абзац — желательно, чтобы преобладал какой-нибудь один из видов выравнивания на страничке: с отступом по левому краю или без него, выравниванием по обе стороны или только по левой
стороне.
цветовая схема — она начинается с выбора тех трех цветов страницы, которые используются для представления обычного текста, ссылок и посещенных ссылок. Все эти параметры указываются в
тэге <body>, либо в каскадной таблице стилей. Цветовая схема должна повторяться на всех страничках публикации, это создаст у посетителя ощущение связности сайта. Цвета ссылок старайтесь
выбирать таким образом, чтобы, с одной стороны, читатель видел, что это ссылка, а с другой стороны, она бы не мешала ему читать основной текст.
По поводу ссылок есть три полезных замечания:
первое — цвета для ссылок (и текста !) не должны вызывать желания зажмуриться,
второе — как бы Вам не хотелось сделать цвета ссылок и посещенных ссылок одинаковыми (без веских на то причин), постарайтесь перебороть себя и придать им немного различия, для этого просто
сделайте цвета уже посещенных ссылок чуть темнее;
третье — так уж получилось, что подчеркнутый текст в Web символизирует ссылку, поэтому поборите искушение использовать подчеркивания в тексте, воспользуйтесь другим способом выделения. Вы
ведь знаете, что очень неприятно, если, допустим, Ваша рука потянулась к ссылке с целью прочитать подробности, а мышка на нее никак не реагирует 
.
графическое оформление сайта — оно должно укладываться в общую цветовую схему. Все графические элементы можно разделить на два больших класса: рисунки и фотографии. Как правило,
рисунки на фелинологических сайтах используются, как элементы дизайна, фотографии в качестве иллюстраций статей или при рекламе животных питомника. При использовании фотографий в качестве
иллюстраций, перед использованием обработайте их — сделайте в случае необходимости тоновую и цветовую коррекцию, кадрирование, выберите примерный размер фотографий в публикации (это делается с
целью «облегчения» графики). А потом используйте данное оформление по всей публикации. Переборите себя и не используйте больших фотографий на рекламных страницах, лучше дайте уменьшенную копию с
возможностью просмотра фотографии в увеличенном виде отдельно. И всегда пишите пояснения к фотографиям в параметре ALT тега IMG — это будет восприниматься как подпись к фотографии и, кроме того,
избавит посетителя от ожидания в случае, если его не интересует данная страничка.
навигация по сайту — или, проще говоря, меню — именно она не дает посетителю запутаться в дебрях Вашего сайта. Всегда оставляйте для посетителя возможность перехода на главную
страничку (для этой цели обычно используют логотип в верху странички). Кроме этого, не забывайте, что очень много людей попадают на Ваши странички через поисковые системы, т.е. не на первую
страницу, поэтому дублируйте навигационную систему на всех страничках или сделайте так, чтобы они, по крайней мере, имели переход на основную страницу. В случае, если Вы выполняете навигационную
панель графическими средствами, то обязательно сделайте ее текстовую копию и поместите где-нибудь снизу (текст в любом случае загружается быстрее графики .
Скорость загрузки Ваших страничек — очень важная составляющая хорошего web-сайта — ни один нормальный человек не станет ждать загрузки Вашей (даже нужной ему) информации в течении часа.
Отсюда следует вывод — странички нужно оптимизировать для получения наименьшего их размера (разумеется, в пределах разумного). Учитывая то, что подавляющее число людей имеют доступ к Internet
через коммутируемую связь, т.е. по телефону (и, к тому же, немаловажный факт — за повременную оплату) и средняя скорость доступа по модему в республиках бывшего Союза крайне низка, а так же то,
что терпения одного человека больше чем на 30-40 сек. ожидания не хватает — максимальный объем, который может иметь страничка вместе со всей графикой, находящейся на ней не должен превышать 40
Kb. Именно поэтому следует исключить из дизайна «навороты» (апплеты с меню и просто бесполезными эффектами, скрипты с бегающими котятами и часами (Вам мало системных?), музыку и прочую
чепуху).
Раскрутка web-сайта — включает в себя регистрацию Вашего сайта во всех возможных Поисковых системах мира. Принимая во внимание специфичность сайтов фелинологической направленности, учтите,
что гораздо больше посетителей приведет к Вам регистрация на различного рода зоологических (а еще лучше фелинологических) серверах и участие в организуемых ими рейтингах. Кроме этого можно
использовать и такие средства, как размещение информации в средствах массовой информации (URL — в газете), а также упоминание о Вашем сайте на визитках, рекламках, в газетных и журнальных статьях
и т.д. Для рекламных сайтов питомников, не обладающих большим количеством познавательной информации, пожалуй, единственный способ привлечь относительно постоянный (хоть и небольшой) поток
посетителей — баннерный обмен с рекламными сайтами питомников, занимающихся этой же породой и регистрация в зоологических (фелинологических) каталогах.
Примечание: на нашем сайте вы можете разместить информацию о своем ресурсе с разделе Ссылки.
Отсутствие орфографических и грамматических ошибок — этот пункт я включаю сюда ввиду громадного количества ошибок на свежепоявляющихся web-сайтах. Ведь это так просто — набирайте текст в
редакторе с проверкой орфографии и перечитывайте то, что Вы написали, перед выставлением Вашего детища на всемирное обозрение.
Прежде, чем перейти непосредственно к построению сайта, обобщим полученную информацию, сведя ее к десяти «золотым» правилам:
--------------------------------------------------------------------------------
Десять заповедей web-дизайнера
1. Не больше пяти позиций на каждом уровне
Количество вариантов на каждом уровне каталога не должно превышать пяти. Если их получается больше, сгруппируйте позиции и создайте подкаталоги.
2. Не больше трех уровней
Каждый элемент информации должен быть доступен с трех щелчков мышью.
3. Не больше 30 Kb
Размер каждой загружаемой страницы не должен превышать 30К. Если ваша страница требует длительной загрузки, предупредите об этом посетителей. Избегайте крупных изображений и апплетов, иначе
люди потеряют терпение и уйдут на другой сайт.
4. Не раздувайте цветовую палитру
Следует воздержаться от широкого использования цвета в текстовых документах. Каждый дополнительный цвет увеличивает размер файла. Начните с нескольких цветов и добавляйте новые только по
мере необходимости.
5. Делайте изображения гладкими
Пользуйтесь функцией anti-aliasing, чтобы придать изображениям привлекательность и уменьшить размер файлов.
6. Соблюдайте меру
Избегайте пестрых, многоэлементных фоновых изображений: они сильно затрудняют чтение ваших страниц. Если необходимо следовать определенному стилю, существенно ослабьте контрастность и
увеличьте яркость.
7. Придерживайтесь стандартного размера
Составляйте крупные изображения из более мелких. Несколько маленьких картинок загружаются значительно быстрее, чем одна большая.
8. Не загадывайте
Если ваша страница пока еще в стадии разработки, не акцентируйте это. Вид дорожного знака Under Construction всем давно приелся. Если вы вносите что-то новое, просто добавьте это — без
плоских шуток.
9. Давайте эскизы
Если вы помещаете на свой сайт каталог изображений, пользуйтесь не текстовыми описаниями, а эскизами. Они быстро загружаются и несут в себе больше информации, чем слова.
10. Пользуйтесь тэгами
Для ускорения загрузки страниц применяйте в изображениях теги HEIGHT, WIDTH и ALT.
--------------------------------------------------------------------------------
Как его построить?
Минимальный набор программ для построения качественного сайта включает такие инструменты, как:
хороший html-редактор для верстки страниц
программа для обработки графики
два-три броузера
программы распознавания текста
хороший ftp-клиент для закачки страниц на сервер
В качестве html-редактора надо использовать те программы, которые специально предназначены для этого. Не стоит строить сайт, пользуясь Word'ом. Наиболее качественным инструментом для
верстки считается Allaire Home Site (для тех, кто любит работать головой и руками); если Вы предпочитаете «строить» страницу визуально — Macromedia Dreamveawer (из бесплатных редакторов весьма
неплохи Kit Html и Ace Free, для тех, кто не владеет английским языком и html'ем — русскоязычный редактор Tea)
Наиболее качественный графический редактор, конечно же, Adobe Photoshop, лучше одной из последних версий, которые поддерживают фунцию адаптации графики под Web.
Программы просмотра web-страничек, или броузеры, — в настоящее время имеется три броузера, которыми в основном пользуется человечество — это Microsoft Internet Explorer, Opera и
Netscape Navigator (хотя последний его фанаты быстро сменили на Mozilla). Хорошая web-страничка должна примерно одинаково выглядеть в любом из этих броузеров.
Программы распознавания текста — могут Вам сэкономить массу времени, избавляя от ручного набора напечатанных текстов и незаменимы при использовании фотографий. Программ по распознаванию
русского языка всего две — это CuneiForm и FineReader. Используйте по-возможности последние версии.
Ну, и в качестве ftp-клиента можно использовать как известный всем Cute Ftp, так и обычный файловый менеджер, которым Вы пользуетесь повседневно (FAR, Windows Commander и
проч.).
Начнем, пожалуй
Шаг 1. Перед тем, как заняться версткой, еще раз прочтите все, что Вы собираетесь выложить в Сеть,
во-первых, на предмет исправления ошибок, как орфографических, так и стилевых,
во-вторых, для того, чтобы перегруппировать тексты таким образом, чтобы попадая на Вашу страничку, посетитель не обязан был бы прочесть все от начала и до конца (изложенное одной
фразой 
, а имел кратко изложенную суть с гиперссылками на подробности,
в-третьих, чтобы разбить общий текст на тематические разделы. При этом обязательно учитывайте, что человек способен комфортно воспринимать не более десяти основных пунктов меню — поэтому не
напрягайте своих будущих посетителей многочисленными разделами.
Если Вы умеете рисовать — нарисуйте на листе бумаги макет будущего сайта.
Шаг 2. Создайте на своем винчестере директорию с названием Вашего будущего сайта (например: fau). В свежесозданной директории fau создайте поддиректорию для графики с названием images
(img., i. и т.п.). Скелет готов!
Шаг 3. Просмотрите всю имеющуюся графику и продумайте цветовую гамму сайта, которая бы подчеркивала достоинства фотографий Ваших животных, но при этом не раздражала бы радужную оболочку
глаз (Ваших в первую очередь — ведь Вам придется на свое детище смотреть гораздо чаще, чем кому бы то ни было). Помните, цветовая гамма создает определенное настроение — она может стать Вашим
сильнейшим помошником, а может и злейшим врагом. Подробнее эту тему мы рассмотрим в следующем уроке.
Шаг 4. В графическом редакторе создайте и оптимизируйте ту графику, с помощью которой Вы собираетесь выполнить интерфейс и меню Вашего сайта. Но не увлекайтесь чрезмерно — сайты,
перенасыщенные графикой тяжело «грузятся» и именно из-за этого мало посещаются — время в Сети стоит дорого, поэтому давайте будем взаимно заботливы. Графика сохраняется в поддиректории
images.
Шаг 5. Создание шаблона. Для шаблона Вы можете использовать любой текст, даже не связанный с Вашей тематикой: главное здесь — убедиться, что все вместе (стиль, графика, текст) выглядит
«хорошо весьма».
Остальные шаги Собственно это и все, дальше Вам нужно будет лишь вставлять текст и графику и верстать, каждый раз пересохраняя шаблон под другим именем.
