Наноблог Артёма Сапегина

Мне всегда было интересно, где люди учатся делать те самые безвозвратно ужасные сайты, которыми полнятся интернеты. И кажется я нашёл ответ. Это книга С. Н. Бердышева «Искусство оформления сайта», изданная издательством Дашков и Ко в 2010 году. Не судите об этой книге по обложке — она совершенно не даёт представления о том, насколько она ужасна. Больше всего в книге удивляют пересказы умных книг о веб-дизайне и юзабилити с последующим созданием страницек-уродцев, полностью им не соответствующим. Судя по содержанию, книге уже лет 10, хотя все скриншоты сделаны в Висте, а список литературы составлен из книг 2008 года издания. Кстати, у автора почти два десятка книг о различных аспектах рекламы, маркетинга, бизнеса и других предметов. (Кстати, меня тоже пытались учить плохому, но я удержался.)

Далее идут цитаты из книги без каких-либо комментариев, чтобы не портить вам удовольствие.

(После того, как ссылка на пост появилась на Хабре, какой-то шутник заново зарегистрировал сайт, на который ссылается автор книги, и разместил там всё правду о ней.)

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

Готовы к работе? Тогда отложите в сторону книгу, идите в магазин по продаже программного обеспечения («софта») и отыщите там диск со стандартным набором программ для веб-дизайна, но чтобы при этом в комплект обязательно входила великолепная программка для новичков (и не только!) под названием Web Page Maker, что означает «Конструктор веб-страниц». Установим эту программу на ваш компьютер, что совсем нетрудно сделать, так как все указания есть в прилагаемом файле Readme.txt. Вы спросите, пригоден ли ваш «комп» для профессионального, коммерческого веб-дизайна. Уместный вопрос, и ответ на него можно найти в дальнейшем. А пока не станем бежать впереди паровоза, потому что ученическую страничку сделать можно на всяком ПК, где установлена Windows XP, Windows Vista или Windows 2000. Скорее всего, у вас какая-то из этих операционных систем.

«Хвостик» после имени файла, отделяемый точкой, носит название расширения. Веб-дизайн, будучи синтетическим видом искусства, совмещает в себе:
> фотографии, которые существуют в виде файлов с расширением *.jpg (*.jpeg) или, значительно реже, *.gif (другие форматы графических файлов в Сети не применяются);

Основу, тело странички составляет файл, приспособленный для несения текста и скрепляющий все остальные файлы. В современном Интернете он чаще всего имеет формат HTML или PHP, но может обладать расширением *.mhtml, *.xhtml и т. д. Мы с вами будем учиться созданию наиболее простых и одновременно наиболее широко редставленных в Сети страничек с расширением *.html. Осилить конструирование остальных будет несложно самостоятельно после знакомства с html-форматом. Почему? Да потому, что в основу веб-дизайна изначально положен особый язык программирования, который так и называется — HTML…

В приведенном примере использовался явно принцип доминирования физической структуры над логической, то есть рисунки рассортированы по их свойствам, главным образом по «весу», как называется объем занимаемой памяти ПК (в байтах).

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

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

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

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

Форум — место для общения. Cобеседниками здесь выступают гости ресурса, они ведут между собой перепалку, дают советы и т. д. Форумом в Риме называлась базарная площадь, если кто подзабыл. Для определения слова «базарный» можете воспользоваться словарями Даля или Ожегова. Когда дойдете до конца списка, вообразите себе, какой негативный заряд приобретет ваш сайт благодаря форуму. Разумеется! Коммерческому ресурсу форум необходим столь же мало, как и гостевая книга.

Первое, что мы увидим, это непонятный набор символов вместо нашего текста. Так передаются Эксплорером русские буквы, и подобная передача нас, естественно, не устраивает.

Концепция юзабилити, то есть удобства на грани искусства, достигла апогея в своем развитии в трудах Я. Нильсена и вряд ли продвинется дальше. На этом западная традиция угасает, уступая место восточной. И это логично! Ведь Нильсен и вслед за ним другие дизайнеры, которые интуитивно следуют духу западной традиции, требуют достижения максимальной простоты при верстке веб-страничек. Но простота бывает разной, очень часто она оказывается хуже воровства. Понятно, что традиция зашла в тупик, выйти из которого не сможет. А вот дизайн сможет, он станет развиваться в русле восточной традиции, а если говорить конкретнее – дальневосточной, поскольку сформировалась она в искусстве Индии, Китая, Японии и Юго-Восточной Азии. Две ключевые формулы успеха, которые препятствуют превращению простоты в воровство, носят японские названия ваби-саби и канзай-инжиниринг. На их основе современные «вебисты» стремятся построить дао дизайна.

Задача чжан-компонентов сводится к тому, чтобы накапливать чи. Они аккумулируют, хранят, перерабатывают и очищают энергию сайта в соответствии с установками шэнь. Сюда относятся:
> HTML-код;
> информационное наполнение (контент).
Задача фу-компонентов сводится к тому, чтобы оптимизировать потребление и усвоение чи. Эти компоненты в их совокупности нужно называть мастерской сайта по поглощению, усвоению, трансформации и выведению энергии. Сюда относятся:
> CSS-сценарии;
> скрипты;
> динамические эффекты;
> графика и цветовое решение;
> шрифты.

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

Прежде всего, поговорим о «мозге» компьютера, то есть о центральном процессоре. Как вы помните, он находится в системном блоке и управляет всеми устройствами, к системному блоку подсоединяемыми (так называемая периферия), по программе, написанной людьми. Проверьте технические параметры вашей ПЭВМ: скорость действия безупречного процессора должна составлять 1,5—1,7 ГГц (скорость электронных устройств измеряется в герцах, поскольку выражается через частоту передачи данных).
Подобную скорость развивают в первую очередь Pentium 4 и Athlon.

А в-третьих, драйвер мыши по-настоящему исправно работает, если является резидентской («родной») программой.

Блокнот. Другой наш верный друг и соратник — это Блокнот. Многие юзеры, далекие от работы с сайтами, незаслуженно презирают его, как «никчемную» программу. Разумеется, он не обладает такими возможностями в работе с текстом, как знаменитый Microsoft Word, однако для веб-дизайнера служит отличным вспомогательным инструментом. Ни от какой другой программы такой помощи, как от Блокнота, особенно при быстром внесении правки в уже сверстанные веб-странички и при прочтении html-кода чужих веб-страничек.

W.Y.S.I.W.Y.G. имеют много минусов, но на начальном этапе следует пользоваться ими, потому что W.Y.S.I.W.Y.G. — это быстро, эффективно, наглядно. С редактором W.Y.S.I.W.Y.G. вы растете как веб-художник.

Чем пользуюсь лично я? Всегда и только — комбинацией программ. Для достижения большой скорости работы начальная верстка выполняется в Web Page Maker или, при высоких требованиях к проекту, — в Microsoft Expression Web. Для экспериментирования, опробирования новых тем, тренировки своего вкуса удобно применять Page Mill, Studio Line, Front Page и некоторые аналогичные программки. Доработка html-кода выполняется в любом приличном редакторе <…> Перед завершением проекта полезно свежим взглядом просмотреть код страничек в Блокноте.

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

Лапидарность при составлении контента главной странички (равно как и некоторых других) — это и великая радость и большое зло для веб-дизайнера. Радость потому, что маленький текст легко и быстро читается и возбуждает интерес, желание продолжить ознакомление с ресурсом. Зло состоит в том, что поисковая система тем быстрее и легче находит ваш сайт, чем крупнее и богаче его контент. Сразу скажу, что эта проблема решается использованием скрытого текста. Дизайнер берет большой кусок текста, объемом около 500 знаков, и вставляет его в открытый html-код главной странички сразу после слова (тэга) <body>. Чтобы этот текст был скрытым, он заключается в кавычки вида: <!-- здесь ваш текст-->. На страничке этот кусок не объявится, зато поисковик будет его свободно читать и засчитывать. (Убрав лишнее, возмести ущерб!)

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

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

И еще одно замечание! Не увлекайтесь скрытыми текстами, поскольку они портят html-код, причем портят в разных отношениях.

«ПЕРВАЯ, ПРЕДЫДУЩАЯ, СЛЕДУЮЩАЯ, ПОСЛЕДНЯЯ» — верхняя и «Вы на <…>-й странице. Все страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10» — нижняя. И рад бы сделать удобнее, но это предел вирутального комфорта.

А чтобы добиться большего, нам придется познакомиться поближе с языком HTML-программирования.

Первая описывает рисунок: <img border="0" src="file://images.files/girl.jpg" width="275" height="416">. Кстати, сразу видно, что перед нами код, сгенеренный каким-то редактором. Веб-дизайнер написал бы короче и проще: <img width=275 height=416 border=0 src="images.files/girl.jpg">.

Соответственно тэг <meta name="expires" content="…"> отображает дату закрытия страницы.

Иногда полезно включить тэг <meta name="generator" content="…">, чтобы показать, в какой программе сверстана страничка, поскольку это нередко помогает броузеру прочитать ту ахинею, которую накрутил визуальный редактор.

На многих сайтах случается видеть указания: «сделать стартовой» или «добавить в избранное». Это ценные указания, которые помогают юзеру не забывать про ваш ресурс, часто бывать на нем и рекомендовать друзьям. А самое главное, такие надписи уже подчеркивают значимость ресурса.

Например, вместо «http://obrazcats.narod.ru/index.html» достаточно написать просто «index.html», и компьютер переместит юзера куда надо. Однако подобная простота хуже воровства. Мой собственный опыт показывает, что без указания папки легко находится единственно и только главная страничка, иногда еще несколько. Более трех адресов компьютер уже обслуживает с трудом, нередко отмечаются сбои.

Все эти дожди, листопады, метели и т. д. страшно мешают читать текст. Кое-кого попросту раздражают. А на некоторых броузерах еще и не видны вдобавок. Вместо них появляется суровое предупреждение: «Активное содержимое страницы может ПОВРЕДИТЬ ВАШ КОМПЬЮТЕР» (хотя на самом деле не может). Неопытный юзер на ваш сайт после пережитого испуга ни за что в жизни не вернется.

Напоследок скажем несколько слов про допустимые объемы контента. Здесь справедливо правило «магической семерки», как называется ключевой принцип минимизации текста, найденный опытным путем неутомимыми рекламистами: максимальное число букв в слове — 7, максимальное число слов в предложении — 7, максимальное число предложений в тексте — 7, максимальное число коротких абзацев (по 2—3 предложения) на странице — 7.

Стоит ли пользоваться этими шаблонами? Скажем так: их нужно изучать и развивать. Даже поверхностное знакомство с сайтом «Образованные котята», построенном шутки ради на основе нашего ученического дизайна, покажет вам, что из шаблонов вырастают смелые и красивые идеи, весьма простые в исполнении. А самое главное: обилие деталей в веб-конструкторе способствует развитию обостренного восприятия дисгармонии. В процессе учебы нужно как можно чаще пользоваться готовыми темами, кнопками, иконками и т. д., комбинируя их и так и эдак, а потом критически изучая свое творение. Забракованные образцы подскажут, в каком направлении двигаться опасно, а это поспособствует отточенности вкуса и улучшению виртуальной сенсорики.

Ту же мысль проводит и [Якоб] Нильсен, допуская, однако, при этом ошибку, простительную для человека без художественного образования.

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

Конечно, страничка с аватарками для скачивания сделает развлекательный ресурс более популярным. Однако эта картинка отличается еще и той специфической особенностью, что может по-разному вести себя на сайте. Например, иногда она бегает за курсором, как приклеенная. Чтобы добиться такого, нужно написать в «шапку» документа скрипт, приведенный в табл. 3.

Полезный совет: начинающему веб-дизайнеру полезно знать, как хранить ценные скрипты, которые он может прочесть в справочнике или скачать с Интернета.19 Для этих целей следует создать специальную папку «Скрипты» на диске D, а в ней субдиректории: «Графика», «Текст», «Математика», «Открытие странички», «Другие» — смотря по виду эффектов, которыми управляют скрипты.

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

Заметим, что приведенный здесь пример неудачен. Вместо слова «Очистить», которое поставлено намеренно, нужно написать «Сброс» или «Очистить форму». Дело в том, что два одинаковых по длине слова на букву «О» (отправить и очистить), расположенные на двух соседствующих кнопочках послужат причиной множества досадных ошибок, отчего ваш сайт невзлюбят посетители.

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

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

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