Складываем кубики
Материалы

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

Общие принципы

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

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

Отдельный разговор об иллюстративном материале для официальных сайтов. Здесь я рекомендую определить один жесткий размер изображения (или два: вертикальный и горизонтальный), зависящий от модульной сетки, и привязать его к формату отпечатка (лучше стандартному). В этом случае у вас, во-первых, не будет проблем с выбором формата печати, сканирования, обработкой и пр. Вполне возможно, что для соблюдения стилистики вам придется обязать фотографа снимать предпочтительно вертикальные кадры или наоборот, но зато ваш сайт будет выглядеть более гармоничным и строгим. То есть, единый стиль для официального сайта - это тот фетиш, в жертву которому имеет смысл принести все остальное. В конце концов, не стоит зацикливаться на строгости корпоративного сайта и пытаться совместить его с контент-проектом. Надо просто разделить официальную информацию о корпорации и работающие проекты этой корпорации: посмотрите, например, на сайт "Лукойл" и "Мультимедиа" - вот пример подобного разделения.

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

Как обычно, это требование особенно жестко предъявляется публикой к представительским материалам, то есть корпоративным, торговым, сервисным, правительственным и подобным сайтам. Для контент-проектов и развлекательных узлов не столь важен их официальный, и строгий вид, однако практика показывает, что появление таких разделов не приносит никакой выгоды - ни прямой, ни косвенной. Поэтому старайтесь избегать "under construction", если только у вас есть такая возможность. Единственным исключением из этого правила может быть предварительное анонсирование проекта или его части. Так, например, поступила Transmeta, представляя свой первый процессор Crusoe, однако обратите внимание, что, во-первых, реклама этого проекта проходила не только в Сети, но и в других медиа-носителях, а во-вторых, и это ключевой момент подобной технологии, на сайте стояла дата "откроется такого-то", а не "скоро будет". Точная дата подстегивает интерес, тогда как вторая фраза лишь вызывает досаду от того, что желаемую информацию вы так и не смогли получить.

Работа с текстами

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

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

Задачей редактора в данном случае будет являться подбор оптимальной стилистики и направленности текста и постоянное следование ей. Текст должен быть относительно ровным (длина фразы, количество знаков препинания и т.д.), но не слишком однообразным, потому что, в этом случае его будет совершенно невозможно читать, так как после второго абзаца от скуки начнет сводить челюсти. Если вы смогли добиться примерно одинакового ритмического рисунка текста по всей его длине, то у пользователя не возникнет (пусть и подсознательно) ощущения, что его куда-то гонят или затягивают. Если у вас есть сомнения в стилистике собственных текстов, то всегда можно обратиться к специалисту, например в "Редколлегию". Следует сказать, что если у вас нет ни малейшего опыта в написании бизнес-текстов, тем паче - текстов вообще, то стоит серьезно задуматься о привлечении к работе профессионального журналиста или редактора. Конечно, вышесказанное актуально только для коммерческих проектов, где от качества написания текстовых материалов напрямую зависит прибыль. Услуги профессионала в этой области обойдутся вам в пределах 10 долларов за килобайт написанного текста (при желании, конечно, можно найти и дороже, но 10 долларов - это нормальная цена для не очень известного журналиста), услуги редактора обычно несколько дешевле, однако, к редактору вы уже приносите готовый текст, требующий некоторой доработки. Таким образом, при суммарных вложениях в сайт, по крайней мере, нескольких сотен долларов (стоимость средне-минимального коммерческого проекта в Сети сейчас около 600-800 $, куда входит дизайн-студия, работа программистов, хостинг на несколько месяцев, доменное имя и немного маркетинга), трата на стилистическое состояние основных материалов нескольких десятков долларов не кажется чрезмерным расходом.

Работая над стилистикой текста, не стоит забывать о грамматике. Люди очень чувствительны к ошибкам в тексте и легко их ловят, тем более, что чужой текст обычно читают значительно внимательнее чем свой собственный. Поэтому, кстати, лучше доверить проверку ваших текстов другому человеку, даже если вы вполне уверенны в своей компетентности в качестве корректора или редактора. Практика показывает, что одной проверки средствами word недостаточно (хотя это уже очень приличная чистка). Поэтому, если ваш сайт содержит много текстовых материалов, то установите дополнительно к word какой-либо мощный языковый корректор, например, Orfo, тогда полученный результат будет вполне удовлетворительным для неофициального ресурса. Если же вам нужен действительно грамотно написанный текст, то, как уже говорилось выше, обратитесь к специалистом, тем более, что таких служб в Сети сейчас появилось довольно много. Когда же в вашем распоряжении находится постоянный поток информации (например, ежедневные новости, сводки, курсы и пр.), то имеет смысл нанять в штат собственного корректора, назначив ему постоянную зарплату, - это будет и экономичнее, и, главное, удобнее в работе. То же самое касается и версий сайта на иностранных языках, хотя следует учитывать, что англоговорящие, например, менее требовательны к правильности языка, чем русскоговорящие.

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

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

Старайтесь использовать интересные, интригующие названия: напустите туману, используйте иносказания, вопросы, загадки и пр. Любое название, даже самое скучное, можно переделать так, чтобы оно зазвучало интригующе. Например: "Причинно-следственные связи в последовательности действий, предпринятых царем Петром Алексеевичем Романовым для женитьбы арапа, находящегося у него на службе". Узнаете? Конечно - "Как царь Петр арапа женил" - какое из приведенных названий кажется вам наиболее интересным? Обратите внимание, как хорошо продумано название для фильма: оно и простоватое, и немного со старорусским оттенком, и с вопросом (интригой), и с юмором, словом, оно не только точно передает ощущение от самого фильма, но и хорошо привлекает внимание потенциальных зрителей. А будь этот фильм снят сегодня, то его название, скорее всего, звучало бы как "Свадьба арапа" или "Петр и арап", что, согласитесь, опять же скучно. Так что не стоит впадать в крайности.

Работа с изображениями

Сейчас мы говорим только о тех картинках, которые составляют содержание вашего сайта, а не являются элементами его оформления (о них речь тоже пойдет, но всему свое время). Чаще всего, контентными изображениями являются семейные фотографии (походные, свадебные, институтские и пр.), иллюстрации продаваемой продукции, рисунки или картины (особенно, если сайт посвящен художнику), кадры из фильмов, скриншоты игрушек и… несть им числа. Иллюстрации - это и благо, и бич Интернета. Благо, потому что с их помощью вы можете лучше донести до посетителя нужную информацию, - визуальные образы практически всегда более наглядны и понятны, нежели описательные. Фактически, без картинок (а значит, и без WWW) Интернет бы не переживал сейчас такой бум, который мы можем наблюдать последние два-три года, когда объемы подключений растут в экспоненциальной прогрессии, а за новыми пользователями следует рост информационного наполнения, финансовых инвестиций; развитие элементарной базы, не говоря уже о таких супер-проектах, как, например, SETI@HOME - распределения вычислений для решения сверхсложных задач. В то же время, современные скорости работы телекоммуникационного оборудования, составляющего "железную" основу Интернета, не в состоянии предоставить веб-мастерам того комфорта при работе с изображениями, который есть у дизайнеров печатной продукции. В результате, вы, как веб-мастер, все время должны помнить об объеме получающегося изображения, чтобы вашим посетителям не пришлось полчаса ждать его загрузки (вы сами стали бы столько ждать?).

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

Формат GIF

Изображение не может содержать более 256 цветов (именно поэтому он не пригоден для фотографий), файл может содержать несколько изображений и описание, отражающее последовательность их воспроизведения, то есть, может использоваться для записи анимации. Формат поддерживает прозрачный фон, что делает его чрезвычайно удобным, когда есть необходимость размещения какого-либо графического элемента на сложной текстуре. Анимированные GIF умеет делать PhotoShop версии 5.5, совмещенный с ImageReady (последняя программа может поставляться отдельно). Кроме того, существует огромное количество программ сторонних разработчиков, которые поддерживают как анимированные, так и статичные GIF, в том числе и специально приспособленные к работе с изображениями для Интернета. Одной из лучших программ можно считать Ulead GifAnimator версии 2 и выше (на момент написания лекции, кажется, вышла уже четвертая), а также Gif Construction Set версии не ниже 1.3. Все эти программы позволяют очень качественно "сжимать" полученные файлы, эффективно уменьшая их объем.

Формат JPEG

Содержит не менее 8 бит на канал, то есть может содержать только полноцветное (true) или серое (grayscale) изображение, а следовательно, плохо приспособлен для деловой графики. Важное отличие от GIF (как и от других графических форматов) - искажающее сжатие, которое позволяет вам получить изображение очень маленькое, но настолько же далекое от совершенства. Алгоритм сжатия основан на удалении части цветовой гаммы изображения, с учетом того, что в целом и сложном изображении человек не очень хорошо различает близкие цвета. За счет этого изображения могут быть сжаты в несколько сотен раз, однако, чем больше сжатие, тем больше полутонов удаляется и тем заметнее искажения в изображении. Формат JPEG поддерживается всеми современными графическими программами, включая и самые простые. При работе с картинками для web я рекомендую использовать сжатие от 4 до 6, в зависимости от исходных размеров изображения, и прогрессивное сканирование оригинала (изображение анализируется последовательно несколько раз - это умеют не все программы, но PhotoShop версии 4 и выше понимает без проблем). При работе с этим форматом обязательно сохраняйте исходное изображение в формате Tiff или собственном формате рабочей программы, создавая JPEG файл только в самом конце работы, поскольку сжатие происходит при каждом сохранении файла, следовательно, ошибка будет накапливаться и с каждым сохранением вы будете получать картинку все более и более низкого качества.

Об иллюстрациях вообще

Принято считать разрешение мониторов равным 72 dpi. Поэтому все изображения для web следует подготавливать именно с таким разрешением, несмотря на то, что в действительности на вашем мониторе разрешение будет совсем другим (72 dpi - разрешение старых 14' дисплеев). Также обязательно учитывайте, что в вашем распоряжении есть не более 600-700 точек по ширине экрана, - удерживайтесь в рамках, чтобы избежать горизонтальной прокрутки изображения.

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

Несколько слов о подготовке фона. Не нужно подготавливать подложку формата предполагаемой вами страницы, более того, это даже очень вредно, поскольку вы имеете очень много шансов, что большая доля вашей аудитории будет иметь другое разрешение экрана или, по меньшей мере, другой формат окна браузера. Подготовьте изображение форматом 100*100 точек и браузер сам повторит его по всему полю экрана пользовательского монитора. Конечно, в данном случае возникает проблема создания повторяющегося изображения, но существует довольно большое количество клипартов на эту тему, некоторые ссылки вы найдете в конце лекции. Также у вас есть большой простор для творчества в PhotoShop, где можно сделать все что угодно; очень удобным фильтром для создания повторяющихся тонов является Texturizer и Andromeda (последняя - отдельно устанавливаемый фильтр). Подогнать края также можно, немного растушевав 5-6 пикселов по обрезу картинки.

В зависимости от назначения изображения стоит придерживаться следующих эмпирических размеров:

Все эти размеры, теоретически должны укладываться в общую величину 70-100 килобайт на страницу, хотя, надо сказать, что и эти цифры достаточно высоки для средних страниц, обычно, если вы не слишком увлекаетесь анимацией и Java, общий объем не будет получаться более 30-40 kb (если это не галерея картинок).

[Назад] [Содержание] [Вперед]