AboutPC
Реклама в журнале
Главная 
Hi-Tech 
Интернет 
Безопасность 
Антиспам 
Железо 
КПК 
Мобильники 
Windows 
*nix 
Софт 
Игры 
Веб-дизайн 
Кодинг 
Заработок 
Юмор 
Отдыхай с PC 
Разное
:: о журнале
:: друзья
:: партнеры
:: авторам
:: читателям
:: веб-мастеру
:: copyright
:: рассылки
:: реклама
:: мыло
:: сайт

Раздел "Веб-дизайн". Содержание:

Статьи:

Нефритовое оружие пролетариата
Как это не сделать
Недизайн
Чем плох Flash? Или как ложка дегтя в бочке меда придает меду пикантный вкус

 

Раздел "Веб-дизайн". Рассылка "всё для вебмастера":

 

Раздел "Веб-дизайн". Статьи:

Нефритовое оружие пролетариата

Павел Протасов
Компьютерра
site@computerra.ru

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

Стратегия

Вселенная — некоторые называют ее Библиотекой — состоит из огромного, возможно, бесконечного числа шестигранных галерей, с широкими вентиляционными колодцами, огражденными невысокими перилами.
Х. Л. Борхес.
«Вавилонская библиотека»

GreenStone Digital Library (www.greenstone.org) предназначается как раз для страдальцев-недоМошковых, ввязавшихся в подобную авантюру. «Greenstone» переводится как «нефрит». Мочить супостата нефритовыми глыбами — вроде бы роскошь, но с этой программой такую роскошь можно себе позволить. Собственно, не совсем это и программа, а нечто из самых глубин юникс-вея: обло, стозевно и лаяй… GSDL представляет собой набор утилит, макросов и скриптов для работы с текстовыми файлами. И может она вот что:

- создавать подборки (в терминологии программы — коллекции), пригодные для веб-публикации, причем работа с коллекциями (создание и добавление файлов) возможна как на отдельном компьютере, так и онлайн;
- производить поиск по текстам коллекции, менять настройки поиска и интерфейса;
- создавать индексы коллекции по заданным метаданным: автору, тематике, названию, структуре документа (индексы сохраняются в отдельных веб-страницах);
- индексировать не только текстовые данные, но и картинки, аудио- и видеофайлы, ссылки на которые помещаются в текст документа;
- конвертировать документы, находящиеся в файлах самых разнообразных форматов (в дистрибутив входят модули для конвертации текстов MS Word, PostScript, писем электронной почты, PDF).
С сайта GSDL, который, кстати, и сам работает под ее же управлением, можно получить, кроме виндового, дистрибутивы для Unix, Mac OS, а также исходные коды, поскольку распространяется пакет на условиях GNU GPL.
Существует и набор скриптов для создания CD-ROM с текстами, оболочка которых представляет собой все ту же GSDL. Только имейте в виду: в дистрибутив этого набора какая-то добрая душа запихала Netscape Navigator 4.5, предназначающийся, по идее, для просмотра страниц, причем — аж две версии, 16- и 32-разрядную. И зачем-то Win32s. Спасибо тебе, неизвестный друг…
С сайта можно скачать руководство по инсталляции пакета, руководство для разработчиков коллекций с описанием процесса их создания, инструкцию для пользователей и т. п. Руководства, правда, несут на себе явные следы машинного перевода, но читать можно. И даже нужно, поскольку они содержат много полезной информации, а с дистрибутивом, лежащим на сайте, документация не поставляется.

Тактика

Во-вторых: число знаков для письма равно двадцати пяти.
Х. Л. Борхес.
«Вавилонская библиотека»

«Движок», с помощью которого осуществляется чтение и конвертация текстов, — это, в первую очередь, локальный веб-сервер плюс скрипты, которые работают под его управлением. Скриптов два вида: на Perl и на внутреннем языке программы (файлы *.dm). Первые в основном заняты сбором и приведением информации в единый формат — внутренний, с которым, собственно, и работает программа, представляющий собой разновидность XML. При этом определение формата документа производится одним скриптом, который затем вызывает другие, предназначенные для разбора конкретного формата. Если текст упрятан внутри архива, то соответствующий скрипт может туда влезть и достать что надо1. И, разумеется, можно добавлять в число скриптов свои, для других документов.

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

Параметры коллекции устанавливаются с помощью специального конфигурационного файла collect.cfg. В нем указано, какие части документа используются для индексирования, какие индексы создаются, какие плагины используются при построении коллекции, дается ее описание и т. п.

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

Вскрытие генерируемых программой HTML-страниц показало, что чукча умер от вскрытия: никаких болезней, столь характерных для автоматических средств создания гипертекста, там нет — за исключением необходимых для GSDL команд XML, помещаемых внутри HTML-комментариев. Ни тегов font face для каждого абзаца, ни нарушений вложенности2.

Я специально начал с упоминания Perl и призывов копаться в скриптах. Это чтобы вы прониклись и попросили чего попроще. На самом деле, в GSDL существует несколько интерфейсов для более или менее «визуальной» работы с коллекциями. Номер раз — тот самый локальный веб-сервер, под управлением которого происходит формирование коллекции. Задача стандартной программы, запускающейся при клике по ярлыку GSDL, — обеспечить работу сервера и скриптов. При нажатии кнопки Enter Library происходит запуск браузера со страницей веб-интерфейса. Первая ссылка — Collector, туда и направимся. Но сначала с помощью страницы Preferences установим русский язык в настройках интерфейса3.

Формирование коллекции осуществляется в несколько этапов. Сначала определяется ее описание: название, e-mail администратора, краткая аннотация. Затем формируется список текстов. Кнопка для вызова диалога выбора локального файла на жестком диске не предусмотрена, для включения текста в список необходимо указать полный путь к нему. Это можно объяснить тем, что веб-интерфейс предназначен главным образом для работы в онлайне и сбора документов из Сети.

Да-да, если кто еще не понял, — при замене локального веб-сервера на полноценный становится возможной работа с коллекциями через Интернет. Для разграничения доступа предусмотрены возможности администрирования, позволяющие создавать пользователей, определяя для них логины и пароли. Пользователи в стандартной конфигурации GSDL бывают двух категорий: стратег administrator, работающий с записями пользователей, и тактик colbuilder, который может только изменять и конфигурировать подборки текстов.

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

Для тех, кто тоскует по диалоговым окнам, есть второе стандартное приложение — Greenstone Librarian Interface, написанное на Java и требующее для работы Java Virtual Machine. GLI представляет собой окно с вкладками для формирования подборки текстов (как и положено, с диалогом выбора файлов). Можно конфигурировать коллекцию точно так же, как и при использовании конфигурационного файла — определять описание, название, список используемых плагинов и другие параметры.

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

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

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

Вкус победы

Я утверждаю, что Библиотека беспредельна.
Х. Л. Борхес.
«Вавилонская библиотека»

А теперь — о главном: что же мы увидим, открыв в браузере страницу коллекции, созданную с помощью GSDL?

Запуск GSDL пользователем осуществляется точно так же, как и администратором, — тем самым окошком с тремя кнопками. После этого на странице нужно выбрать коллекцию (в данном случае — Greenstone demo).

Как я уже писал, интерфейс пользователя коллекции может настраиваться так же, как и администраторский. В числе настроек — язык, кодировка и формат — пользователи Linux могут выставить «текстовый» и наслаждаться. Настраивается и поиск: простой или с булевыми операторами, с учетом регистра и окончаний слов, с историей запросов или без нее.

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

Если у книги, включенной в подборку, есть отсканированная обложка, то она выводится на странице, показываемой при выборе названия. Там же мы видим оглавление книги, сформированное при построении коллекции, в соответствии с распознанными названиями глав и частей текста. С помощью кнопок под изображением обложки оглавление можно сворачивать и разворачивать, показывая элементы более низкого уровня. Также можно просмотреть весь текст книги — опять же кнопкой с соответствующей надписью. А можно — нажать на изображение листка рядом с той или иной главой и получить на экране только ее текст. Имеется еще кнопка «Снять выделение», предназначенная для приведения найденного текста (с выделенными поисковым роботом ключевыми словами) к нормальному виду. Все страницы формируются на лету.

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


Cноски:
1 (назад) - Под Windows эта функция, к сожалению, не работает.
2 (назад) - В теге Generator тестовой коллекции, входящей в дистрибутив, правда, прописано «Microsoft Word 97», но это — наглая ложь: манеру Word’а создавать гипертекст я знаю и мусор после него вычищал многократно. Скорее всего, Word использовался для создания исходных текстовых файлов, прошедших через горнило конвертации, но память о родном формате сохранивших.
3 (назад) - Правда, диалоги выбора языка немного глючат, и помимо выбора языка приходится повторно выбирать кодировку UTF-8 в выпадающем списке. Такая же проблема и у настроек интерфейса пользователя.

 Наверх

Как это не сделать

Владимир Гуриев
Компьютерра
site@computerra.ru

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

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

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

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

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

В общем, эти материалы следовало бы выпустить в рубрике «Как это не сделать». Причем про «не» здесь гораздо больше, чем про «как».

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

 Наверх

Недизайн

Виктор Каплунов
Компьютерра
site@computerra.ru

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

Когда известный веб-дизайнер говорит, что правила дизайна не догма, он отпускает себе грехи, потому что сам этим правилам следует далеко не всегда. И вместо того, чтобы каждый раз объяснять, почему он пренебрег тем или иным стандартом, проще сказать, что придерживаться его необязательно. Это действительно так, но что позволено Юпитеру, увы, не позволено быку. Мы с вами быки — иначе вы не читали бы эту статью, а нам Якоб Нильсен приносил бы кофе. С сахаром.

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

Браузер браузеру волк

Компания AOL долго судилась с Microsoft, обвиняя последнюю в монопольных замашках и неправедном занятии рынка, телефона и телеграфа. И все прогрессивное человечество сочувствовало разработчикам Netscape, которых задавила корпоративная махина Microsoft. Однако если бы кто-то поинтересовался мнением веб-дизайнеров и верстальщиков HTML, то с удивлением узнал бы, что всю команду Netscape нужно вывести в чистое поле, поставить лицом к стенке и расстрелять. А потом вывести в это же поле разработчиков Opera.

Войны браузеров привели к тому, что все браузеры обрабатывают HTML по-разному. И нет никакой уверенности, что ваша страничка будет корректно отображаться и в Internet Explorer, и в Netscape, и в Opera, трех самых распространенных на сегодняшний день семействах. Ситуация усугубляется еще и тем, что каждая программа просмотра веб-ресурсов представлена на рынке множеством версий (да еще и под разные платформы!), причем если со спецификацией HTML 4 худо-бедно совместимы все, то поддержка JavaScript и CSS — уже больной вопрос.

Наверное, больше всех виновата в возникшей сумятице именно Microsoft, которая начала вводить в свои продукты фишки, противоречащие стандартам, однако победителей не судят — различные инкарнации IE на сегодня являются самым популярным браузером в мире. Отсюда не следует, что можно ограничиться совместимостью с IE и «забить» на поддержку остальных смотрелок (хотя многие дизайнеры-любители поступают именно так, зачастую даже не подозревая, что пользователям Opera и Netscape их сайт недоступен). «Забить» нельзя, потому что при этом отсекаются целые сегменты пользователей. Например, те, кто работает в Linux. Да и в любом случае — устанавливать новый браузер только для того, чтобы зайти на ваш сайт, никто не будет.

Пример простейшего скрипта, определяющего пользовательский браузер и перенаправляющего его на соответствующую страничку:

<script type=»text/javascript»>
function redirect_navigator()
{
 if(navigator.appName==’Microsoft Internet Explorer’)
 window.location.href=’ie.html’;
 else if(navigator.appName==’Netscape’)
window.location.href=’netscape.html’;
 else
 { window.location.href=’other.html’; }
}
</script>
Скрипт вызывается в теге body так:
<body onLoad=»redirect_navigator();»>

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

Обычно для определения типа браузера используется JavaScript, хотя у этого способа есть существенный недостаток. Дело в том, что код JavaScript выполняется на машине клиента, где этот модуль может быть просто-напросто отключен. Более надежным выглядел бы скрипт, выполняющийся на сервере (пример такого кода можно найти по адресу forum.dklab.ru/php/heap/SkriptOpredeleniyaBrauzera.html.

Второй путь полегче. Необходимо кодировать страничку так, чтобы ее понимали все браузеры, упрощая те элементы, которые Netscape и Opera понять не в состоянии, и отказываясь от фирменных «фишек» Microsoft. При этом первоначальный дизайн, если он писался без оглядки на альтернативные браузеры, может заметно измениться.

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

К сожалению, в журнальной статье нет места, чтобы описать все различия между браузерами. Впрочем, в этом нет нужды — в Сети достаточно сервисов (в том числе и бесплатных; см., например, anybrowser.com/siteviewer.html), позволяющих определить, насколько страница совместима с разными версиями смотрелок.

Картинки с выставок

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

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

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

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

Вариант использования платных баз изображений чуть хуже. Во-первых, это довольно дорого — с учетом российской специфики заказ набора изображений местным специалистам обойдется гораздо дешевле, чем покупка сопоставимых по качеству картинок в фотобанках. Во-вторых, нет никакой гарантии, что те же картинки не использовались для создания других сайтов. Однако это маловероятно, поскольку цены на изображения поистине драконовские, и далеко не каждый владелец сайта может позволить платить от 50 долларов за снимок (а на Gettyimages, например, дешевле не бывает).

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

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

ПОЛЕЗНЫЕ ССЫЛКИ

www.corbis.com. Фотобанк. Хороший, большой и дорогой.
www.gettyimages.com. Еще один фотобанк, и тоже хороший, большой и дорогой.
www.apwideworld.com Фотобанк AP. Относительно дешевый, фотографии стоят от 15 долларов.
www.freefoto.com. Коллекция изображений, которые можно бесплатно использовать на своих страницах (с определенными ограничениями, но можно).
www.digitalphotocontest.com. Этот сервис вообще не предполагает использование размещенных на нем изображений на других сайтах. Однако вы всегда можете связаться с авторами фотографий и договориться напрямую.
www.deviantart.com. Сайт хороший, но по умолчанию запрещает использовать свои изображения в Сети. Надо писать и договариваться.
www.photobox.ru. Российская библиотека изображений. Большинство представленных изображений бесплатны. Всего же в базе более 13 тысяч фотографий.
www.picturequest.com. Еще один фотобанк. 500 тысяч изображений.
www.pixtal.com. Снова фотобанк. Не вся коллекция выложена онлайн, однако часть изображений можно заказать на CD-ROM.
www.clipart.com. Два с половиной миллиона изображений и шрифтов! В том числе наборы иконок — фотографий тут относительно мало. Платный, но платить нужно не за загруженные материалы, а за пользование сервисом — 8 долларов в неделю.

Иконы на вес золота

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

Когда мы говорим о бесплатных/хороших изображениях, речь идет прежде всего о библиотеках иконок, которые в умелых руках способны скрасить даже скупой текстовый дизайн. Можно, конечно, использовать популярные библиотеки — и в единстве интерфейса есть свой смысл, однако если имеется возможность сделать сайт чуть отличным от других, зачем ею пренебрегать?

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

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

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

Что касается тематических изображений, то зачастую без них можно вообще обойтись. Сайт наверняка будет смотреться не хуже. А уж скорость загрузки точно возрастет. Если вы считаете иначе, то кроме вышеупомянутых хранилищ типа Gettyimages можете поискать картинки в Google и AllTheWeb. Напомним еще раз, что далеко не все картинки (даже найденные в бесплатном доступе) можно использовать на своем сайте.

Воруйте на здоровье!

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

Речь не идет о плагиате. Это еще хуже, чем воровать картинки, и, без сомнения, сослужит вам плохую службу. Есть, правда, и удачные примеры — например, сайт kinoafisha.ru не скрывает, что «слизан» с imdb.com. Но это исключение из правил. Обычно к плагиаторам отношение негативное как со стороны веб-дизайнеров, так и со стороны посетителей, знакомых с оригиналом. Но формат, основные принципы устройства страницы — заимствовать можно и нужно. Так, художник набивает руку, делая копии чужих картин, или начинающий писатель, читая мэтров, мотает на ус, как строится фабула, как закручивается сюжет… Свой долг вы отдадите позже, когда на ваших работах будут учиться «молодые львы». А пока… Классики плохого не посоветуют.

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

Роршах почти не виден

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

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

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

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

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

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

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

Помнится, Стивен Кинг в повести «On Writing», посвященной писательскому труду, рассказывал, как он пишет книги. Особенность подхода Кинга в том, что, закончив книгу, он прячет ее в стол на пару месяцев, чтобы абстрагироваться от содержания. И только потом, когда голова уже занята другим проектом, начинает вычитку. Думается, этот подход был бы очень полезен и в веб-дизайне. Если вы сомневаетесь в том, что дизайн хорош, прервитесь, допустим, на неделю. Или на две. Или на месяц. Не смотрите на него, не дайте глазу «привыкнуть» — посетитель к вашему дизайну, если тот ему не понравится, привыкать не будет. Он просто уйдет на страничку, автор которой не дальтоник и не садист, набравший темно-серый текст на черном фоне. Забудьте про свою страницу и спустя некоторое время посмотрите на нее как посетитель, свежим взглядом. Наверняка вы найдете множество огрехов, которых раньше не замечали.

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

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

Экипировка

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

- Adobe Photoshop
www.adobe.com/products/photoshop/main.html
Главный дизайнерский пакет для обработки растровой графики. Несмотря на свои неоспоримые достоинства, для начинающего дизайнера неудобен, поскольку рассчитан на профессионалов и многие эффекты, которые в других пакетах делаются одним движением мыши, в Adobe Photoshop потребуют большего вовлечения в процесс. Зато в Adobe Photoshop есть очень удобный модуль для сохранения изображения в веб-формате (jpeg или gif).
Кроме того, Adobe Photoshop откровенно дорог, если, конечно, покупать не «горбушечную» версию, а лицензию.
Впрочем, обучение работе в Photoshop не помешает в любом случае. На сегодняшний день это стандарт в обработке растровой графики, и его «сложность» — просто другая сторона универсальности.

- Paint Shop Pro
www.jasc.com/products/paintshoppro
Очень мощный графический пакет, который несомненно уступает Photoshop, однако из-за того, что Paint Shop Pro рассчитан на простых смертных, многие вещи в нем делаются намного проще. С другой стороны, в целом возможности пакета гораздо скромнее, чем у Photoshop.
Paint Shop Pro тоже платный, но стоит гораздо дешевле своего большого брата. К тому же всегда можно с чистой совестью запрыгнуть в вагон для бета-тестеров — за использование бета-версий денег не требуют, а выходят они часто. Ложка дегтя: бета-версии Paint Shop Pro прекрасно оправдывают свое название, поскольку, как правило, являются очень глючными.
И Adobe Photoshop, и Paint Shop Pro могут быть расширены за счет использования плагинов. Причем Paint Shop Pro понимает формат плагинов Adobe Photoshop.

- Macromedia HomeSite
www.macromedia.com/software/homesite
Очень хороший HTML-редактор. Поставляется с редактором CSS от TopStyle. Официально поддерживает визуальное редактирование страницы, но, слава богу, не предлагает этот вариант изготовления сайта как основной.

- Macromedia DreamWeaver
www.macromedia.com/software/dreamweaver
Еще один хороший HTML-редактор. Когда-то рассматривался как конкурент HomeSite, однако на практике многие HTML-верстальщики использовали оба редактора вместе. Противостояние закончилось когда Macromedia выкупила HomeSite у компании Allaire.

- Macromedia Flash
www.macromedia.com/software/flash
Программа для подготовки Flash-роликов. Конкурентов практически не имеет. Если вы решили делать Flash-сайт, то Macromedia Flash MX — это пакет, который вы должны установить первым.


Сноски:
1 (назад) - Не помешает еще прочитать книжку Дмитрия Кирсанова «Веб-дизайн». — Прим. ред.

 Наверх

Чем плох Flash? Или как ложка дегтя в бочке меда придает меду пикантный вкус

Дмитрий Гурский, Юрий Стрельченко
Компьютерра
site@computerra.ru

Компьютеры упрощают многие вещи, но многие вещи, которые они могут упростить, просто не нужны.
Энди Руни

Дмитрий Гурский — программист, автор нескольких книг, в том числе «Flash MX и ActionScript: обучение на примерах».

Чем плох Flash? Да, собственно, ничем. Более того, Flash просто великолепен! Как по-своему великолепен молоток: трудно придумать что-то лучшее для забивания гвоздей. Но пытаться построить при помощи только лишь молотка целый дом — далеко не самый рациональный шаг. Однако людям свойственно впадать в крайности — и особенно ярко эта черта нашего вида проявилась во Flash-сообществе. Освоив на досуге одну технологию (пусть самую совершенную и эффектную из существующих), гордо именующие себя флешерами считают ее универсальным средством для решения любых задач. Широкие возможности опьяняют их, заставляя подменять формой содержание, а эффектом — смысл. Flash-формат стал своего рода раком Интернета, его болезнью. Ее симптомы — длительная загрузка, неудобство навигации и поиска, тотальное распространение дурного вкуса и неконструктивного дизайна. Давайте попробуем разобраться, что послужило тому причиной и так ли страшен черт (то бишь Flash), как его малюют?

Как все начиналось

Первой острую потребность рынка уловила компания Macromedia. Пытаясь удовлетворить спрос на мультимедиа в Сети, она решает сделать ставку на векторную анимацию. Для этого Macromedia покупает маленькую фирму Future Animation, разработавшую скромную (всего 3 Мбайта), но очень оригинальную для своего времени программу FutureSplash Animator, предназначенную для создания анимации на домашних ПК. Дополнив ее всем тем, о чем так страстно мечтали веб-дизайнеры, Macromedia выпустила новый продукт под названием Flash.

При создании Flash Macromedia решилась на достаточно смелый шаг: не дожидаясь, пока W3C приведет в порядок стандарты, а Microsoft и Netscape доработают свои браузеры до надлежащего технического уровня, она выпустила собственный встраиваемый проигрыватель для воспроизведения swf-фильмов (диалоговое окно с предложением загрузить его выводилось автоматически при обнаружении на странице соответствующих Flash-элементов). Это позволило разработчикам в одночасье забыть о трудностях с платформами, браузерами и операционными системами и целиком посвятить себя творчеству. Теперь гордо именоваться веб-дизайнером мог человек, не способный написать ни строчки на HTML и JavaScript. Художники-гуманитарии ликовали, пользователи тоже были довольны появлением огромной массы ярких и динамичных сайтов. Но когда опьянение новизной прошло, стало ясно, что далеко не все так безоблачно, как казалось…

Головокружение от успехов

Веб-дизайнеры слишком долго сидели на голодном пайке чистого HTML, чтобы от них можно было требовать умеренности при появлении такого изысканного деликатеса, как Flash. В одно мгновение Интернет, походивший ранее своей сдержанностью на подшивку «Правды» за 1932 год, превратился в броский и безвкусный Мулен-Руж. «Крутой» стиль победил дизайн, информативность, доступность. Стало считаться, что если сайт не блестит огнями, не поражает эффектами и не гудит в динамиках наушников заводной мелодией из трех зацикленных нот, то он недостаточно хорош и современен. Простота Flash способствует злоупотреблению его возможностями. Действительно, если анимированное меню «круче» статичного — почему бы его не использовать везде: благо на его изготовление требуется всего пара минут. Flash давит на разработчиков, навязывая им избыточное использование своего потенциала. А в результате появляются сайты солидных коммерческих структур, похожие, скорее, на кислотную дискотеку, чем на лицо фирмы. И заказчикам, воспитанным на телевизионной рекламе, это нравится. Конечно, не может не впечатлить анимированный и интерактивный сайт в футуристическом стиле размером в 500 Кбайт. Но сможет ли выдержать конкуренцию такой ресурс, если на просмотр двух-трех его страниц уходит четверть часа?

Flash подобен алкоголю. Он прекрасен в малых дозах и смертелен при отсутствии меры. К сожалению, соблюсти эту самую меру не так просто. Вычурной форме приносится в жертву сама цель создания страницы. А ведь большинство пользователей идут в Сеть не за тем, чтобы поглазеть на новый изощренный Flash-фокус, а за информацией — следовательно, дизайн должен быть информативным, то есть максимально упрощающим доступ к сведениям. Богатые возможности Flash стали причиной дурного вкуса, победить который удастся только тогда, когда клиенты веб-студий поймут, что стильная страница размером в 20 Кбайт — куда лучше, чем многотонное собрание украденных эффектов, гордо именуемое Flash-сайтом.

Usability превыше всего

Можно ли сделать сайт целиком на Flash? Конечно, да. И в Париж можно пойти через Чукотку. И в Москве апельсины выращивать. Очень просто сделать так, чтобы по нажатию нужных кнопок или ссылок в текущее или даже новое окно браузера подгружался очередной swf-фильм, выполняющий роль страницы сайта. Но можно ли Flash-ролик считать сайтом лишь потому, что он загружается из Интернета? Если да, то таковым придется признать и PDF-документы, и Excel-таблицы, и видео в формате QuickTime, поскольку все эти объекты могут быть просмотрены в Internet Explorer аналогично swf-клипам. То, что изготовленный исключительно на Flash сайт на самом деле сайтом не является, доказывает полнейшее игнорирование им привычных и устоявшихся годами элементов пользовательского интерфейса браузера. Хотя в будущем, вполне вероятно, мы сможем рассчитывать на более тесную интеграцию мультимедиа в браузеры, на нынешнем этапе то, что Flash не является стандартной веб-технологией, порождает массу проблем. Перечислим основные из них.

- Так как Flash-сайт является обычным swf-фильмом, внедренным в HTML-страницу в качестве объекта ActiveX, то кнопки «Вперед» и «Назад» работать не будут. При попытке вернуться к предыдущему разделу, вас просто «вынесет» за пределы материнской страницы. А разрешить проблему можно очень просто, разместив каждый из разделов сайта на индивидуальной HTML-странице. Однако для этого понадобятся некоторые познания в языке разметки, что является для многих непреодолимой преградой.
- Не поддерживается подсветка ссылок. А это осложняет навигацию по Сети, так как зачастую вы не можете определить, где уже побывали, а куда еще стоит зайти. Проблема в принципе решаемая с помощью нового класса ActionScript SharedObject, позволяющего записывать данные на винчестер пользователя. Однако это из области высшего пилотажа…
- При наведении курсора мыши на ссылку или баннер в строке состояния браузера не отображается соответствующий им адрес. Справиться с этим недостатком позволит возможность согласованной работы Flash и JavaScript.
- Нельзя увеличить размер шрифта, из-за чего усложняется доступ к информации людям с ослабленным зрением. Вообще, Flash крайне жесток к людям с ограниченными возможностями. Например, голосовые браузеры для слепых не смогут прочитать swf-содержимое, так как воспринимают лишь текстовую информацию в определенных тегах HTML.

- Не работает стандартная функция браузера по поиску на странице. Абсолютно неразрешимая проблема, если сайт изготовлен исключительно при помощи Flash.
- Динамические Flash-вставки, содержащие множество двигающихся объектов, могут серьезно загружать процессор и занимать много оперативной памяти. Например, авторы наблюдали баннер, очень яркий и интересный, который поглощал практически все ресурсы Celeron 400!
- Из Flash-страницы невозможно импортировать изображения. Также не получится отключить отображение картинок при помощи стандартной настройки браузера.
- Не работает прокрутка страницы при помощи колеса мыши, клавиш управления курсором. Существенный недостаток, значительно осложняющий чтение больших документов и изучение обширных каталогов.
- До сих пор острой проблемой остается индексация содержимого swf-файла роботами поисковых машин. В некоторых поисковых системах такая функция уже присутствует, но правилом это еще не стало из-за высокой стоимости технологии.
- Flash очень слабо приспособлен к работе с базами данных, что значительно осложняет создание интерактивных сайтов. Так, организовать при помощи ActionScript поиск в телефонной базе из сотен тысяч записей практически невозможно.
- Flash-сайт гораздо сложнее обновлять, чем «обычный».

Компания Macromedia, желая более широкого распространения формата Flash, яростно отстаивает концепцию полных Flash-страниц в Сети. Важнейший из приводимых в защиту тотальной «флешизации» Интернета доводов заключается в том, что это позволит создавать более простые в обращении сайты, содержимое которых можно будет редактировать выборочно, не перезагружая всю страницу. А это означает, что, например, проголосовав в рейтинге, вам не придется ждать, пока заново перезагрузятся все элементы страницы — обновятся лишь непосредственно связанные с выполненным действием фрагменты. Описанная возможность является, без сомнений, крупным достоинством Flash-сайтов, так как ликвидирует, возможно, самую большую слабость традиционных технологий. Однако не стоит преувеличивать ее важности, поскольку, ввиду качественного кэширования современными браузерами элементов страниц, повторная загрузка последних обычно не связана со значительной нагрузкой на линию. Также использование полных Flash-страниц позволяет применять видеовставки без открытия нового окна браузера.

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

Почему разработчики обожают Flash

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

Примечательно, что сайт самой компании Macromedia (www.macromedia.com; кстати, очень хороший источник информации для разработчиков в сфере Flash и ActionScript) очень умеренно использует Flash. Кажется алогичным, что страница компании, сотрудники которой с пеной у рта доказывают огромные преимущества полных Flash-страниц, на собственном ресурсе побрезговали реализовать свои же идеи. А причина тому проста: создать полноценный сайт, используя только Flash, практически невозможно. Да и нужно ли?

Бочка меда

Flash — революционная по своим возможностям система, предоставляющая невиданную доселе свободу творчества. Являя собой уникальный синтез графики, анимации и программирования, она позволяет легко справляться с невероятно сложными для более традиционных технологий задачами. Освоив Flash, вы сможете создавать баннеры, собственные игры, мультфильмы, презентации… Однако не стоит возводить Flash в культ, слепо веря, что с его помощью можно решить абсолютно все проблемы. Flash —всего лишь один из инструментов, такой же, как HTML, JavaScript или CSS. Каждая из этих технологий может эффективно решать свои узкие задачи. На Flash отлично получаются меню, заставки и баннеры — и не стоит поручать ему большее. Иначе ваше творение станет живым примером всех тех проблем, которые были описаны в этой статье!

 Наверх

 
design: ФуксЪ 
Реклама в журнале