Тщательно все спланировать

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

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

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

Грамотно присвоить имена элементам XHTML структуры

Фокус в том, чтобы правильно “обозвать” пронумерованные вами ранее функциональные блоки. Сразу скажу, — пренебрегать этим просто глупо. Функциональным элементам структуры нужно присваивать функциональные имена. Это значит, что имена нужно присваивать основываясь на том, что данный элемент структуры делает, а не на том, как он сейчас выглядит. И тогда, даже через год, вы сможете быстро сообразить, что это за элемент и зачем он нужен на странице.

Простой пример. Можно назвать боковую панель redsidebar, а можно и outsidelinkblock. Как называть блоки — дело ваше, главное, чтобы это было вам понятно и носило функциональную окраску. Тогда ваша структура реально не зависит от презентации — дизайна и может иметь таких дизайнов сколько угодно. К тому же, пару раз воспользовавшись этой методикой вы, скорее всего, станете присваивать одинаковые имена одинаковым функциональным блокам на разных сайтах. Если это произошло — ваша эффективность как кодера возросла. Вот парочка интересных ссылок о том, как люди называют свои блоки в HTML структуре:

What’s in a name
What’s in a name (pt2)

А так же:

Use class with semantics in mind
Structural Naming

Компетентно использовать id и class’ы

Атрибут id или уникальный идентификатор, в отличие от атрибута class, может быть включен в код конкретной валидной страницы только один раз, для этого (идентификации элемента) и предназначен. Любая веб-страница имеет свой набор уникальных (единственных для каждой страницы) элементов, например #global-navigation, #search и так далее. Также, надо помнить, что у конкретного HTML элемента может быть только один id. А вот классов может быть несколько (сколько угодно), поэтому их можно “сцеплять”, как, например, в следующем коде:
<ul id="lookalsolinks" class="intext bullets outside"></ul>

Здесь я (зачем-то, для примера) захотел добавить буллеты (.bullets) к списку ссылок в тексте (.intext) и указать визуально признак того, что это внешниие ссылки, например прописав картинку в классе outside. Конечно, все это можно сделать и в одном классе, но тогда у меня не будет возможности манипулировать этими параметрами. Обращаю ваше внимание на то, что я не призываю плодить ненужные классы, наоборот, я предлагаю использовать возможности CSS эффективно и “гибко”.

Использовать CSS манипуляции с XHTML элементом body

Присваивая конкретный класс элементу body на конкретной странице вы обретаете возможность кардинально сменить CSS параметры как всей страницы в целом, так и отдельного элемента на такой странице. Этот класс работает как переключатель. Освоив эту технику вы сможете менять дизайн каждой отдельной страницы и “подсвечивать” навигацию, например текущее расположение пользователя на сайте. Все просто как 2x2:
body {background:#fff;}
body.about {background:#fff url(aboutus.jpg) top right no-repeat;}

И продолжая эту тему, подсвечиваем (изменяем стиль по умолчанию на другой) в меню ссылку “О Нас” на странице “О нас”, указывая тем самым “местоположение” пользователю на сайте:
body.about ul#navigation a#aboutuslink {color:#f50;}

Естественно, вы можете писать какой-угодно стиль, изменяя все, что угодно, а не только цвет. Три строчки кода — и 2 решенные серьезные задачи :) — альтернативный дизайн страницы “О нас” и улучшение usability сайта. Ну а что вы хотите? Современный CSS дизайн.

Использовать CSS каскад

Вот как использую его я. В коде страницы я прикрепляю css файл для отображения на экране компьютера (media screen). Этот файл называю почти всегда screen.css В этом файле содержится следующий код:
@import url(layout.css);
@import url(typo.css);
@import url(visuals.css);

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

Использовать стандартные возможности CSS по полной программе

Никита Вакорин, from Umade.ru замечательно на мой взгляд перевел статьи Роджера Йохансена (Roger Johansson) CSS tips and tricks, для начинающего CSS дизайнера — “источник мудрости и вдохновения”, переводы прочесть просто необходимо, вот они:

CSS: советы и приёмы, часть 1
CSS советы и приёмы, часть 2

Подводя итог, в очередной раз хочу напомнить, что CSS это не “rocket science” и все зависит от практики и желания. Чем быстрее человек освоит CSS, тем быстрее его работа станет похожа на творчество, а не на тупое переписывание табличных тегов.

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

XHTML врядли можно считать языком программирования, но свои “языковые конструкции” он точно имеет. Остается только использовать эти конструкции по назначению.

Правду сказать, — все очень просто. Сложности, у некоторых, начинаются там, где надо использовать CSS. А поскольку эти самые “некоторые” изучать CSS, прямо скажем, не хотят, то и продолжают делать меню с помощью табличных тегов (<td>ссылка</td>), а заголовки с помощью тегов <b>. Но я думаю, что такой код свидетельствует о компетентности кодера лучше, чем все остальное.

XHTML имеет простую и понятную структуру

В набор тегов (tag set) входит все, что необходимо для написания HTML кода веб-страницы в соответствии со стандартной спецификацией.

Особенно замечателен (во всяком случае для меня) факт, суть которого заключается в следующем: (X)HTML структура нормального веб-сайта, может состоять из простейших тегов элементов, таких как заголовки <h1>, абзацы <p>, нумерованные, ненумерованные списки <ol>, <ul>, списки определений <dl>, формы <form> и, конечно, ссылки <a>. Добавьте к этому набору тэги, объединяющие эти элементы в логические блоки — <div> или <span> и вы получите впечатляющие результаты. Конечно, визуально таких же результатов можно добиться, просто порезав картинку на слайсы в Image Ready, но будет ли конечный продукт современным веб-сайтом, очень большой вопрос.

Рискну предположить, — суть метода “семантической” HTML верстки в использовании тегов, соответствующих по смыслу содержанию. Что представляет из себя навигация сайта? Это список, состоящий из ссылок. Как правило, это ненумерованный список — unordered list — <ul>. Тогда навигацию можно закодировать, например, так:

<ul><li><a>ссылка 1</a></li><li><a>ссылка 2</a></li></ul>

или вот так, если это список определений, definition list — <dl> :

<dl><dt><a>Мобильные телефоны</a></dt>
<dd><a>Nokia</a></dd>
<dd><a>Motorola</a></dd></dl>

Выбор того или иного набора тегов зависит от контекста и личных предпочтений. Надеюсь, что из этих примеров видно, что ничего сложного в этой концепции нет. Эта “best practice” известна давно. Я не могу понять почему до сих пор люди пишут меню сайтов, используя совершенно не предназначенные для этого табличные теги? Особенно, если учесть, что их код получается гораздо больше и практически абсолютно недоступным (inaccessible) для альтернативных устройств. Хотя нет, — могу понять, эти люди просто не хотят изучать CSS.

Откуда берется семантика

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

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

Но с помощью того же XML можно создать стандартизованный формат, описывающий информацию по известным правилам, где каждый конкретный элемент несет заведомо определенное значение, которое и есть семантика этого конкретного элемента. Например? RDF или набирающие обороты Микроформаты.

Отлично. Но для чего нужна эта семантика?

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

Мы можем внести свой скромный вклад в процесс превращения информации в знания просто кодируя содержание веб-страниц в соответствии с семантическим значением элементов стандартизованного формата XHTML.

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

Операционная система Linux

Почему Linux? Потому, что надежно, устойчиво и безопасно. К тому же, купив или скачав дистрибутив (дистрибутив — это набор программ и программных библиотек, входящих в поставку той или иной версии Линукс), — вы получите практически все, что вам нужно для веб разработки: веб-сервер, базу данных, PHP, редактор и много, очень много других, весьма полезных программ.

Веб-сервер Apache

Надо ли еще что-то говорить? Этот широко распространенный, очень надежный веб-сервер более чем успешно конкурирует с продуктами известных фирм. Apache входит в стандартную поставку Linux (я пользуюсь Mandriva Linux, там точно входит), — нужно только при установке не пропустить момент, когда флажком выделить “Веб-сервер”. По умолчанию работает как и должен.

Базы данных MySQL и PostgreSQL

Тоже входят в стандартную поставку. Просто установите и работайте. Создавать, администрировать и редактировать базы данных можно с помощью простых интерфейсов, я пользуюсь Webmin. Маньяки могут все делать “руками”, из командной строки.

Server side scripting

:) Опять же, практически все есть на установочном DVD. PHP точно есть и Pyton и Ruby.

Веб-редактор Quanta

Quanta+ — очень “взрослый” веб-редактор. Настраивается почти все. Имеет врожденную поддержку UTF-8. Помимо Quanta в дистрибутиве Mandriva Linux 2006 есть еще как минимум 2 других веб-редактора.

А вообще код можно писать вручную в простом текстовом редакторе KWrite. Highlighting (подсветка специфических кусков кода) есть.

Браузеры

Mozilla Firefox и Konqueror стоят по умолчанию. Скачать Оперу под Linux не составляет труда (что-то около 4 Мб без поддержки Java). И вот вам “бонус”. Не берусь утверждать, но думаю, что факт — если ваш сайт выглядит нормально в Konqueror, то в эпловском Safary будет выглядеть только лучше. А все потому, что Safary использует KHTML rendering engine Konqueror’a.

Тестирование. Виртуальная машина VMware

Справедливости ради нужно сказать, что VMware не Open Source. Но, как говорил мой бывший сотрудник:” — В бедных странах очень многие живут по-богатому”, так что, я думаю, справимся :). Установив на виртуальный компьютер винду (XP в самый раз) вы будете иметь все “виндовые” браузеры. Таким образом, перед вами открывается возможность на одном компьютере тестировать свою продукцию на двух операционных системах и соответствующих браузерах. Это очень удобно и эффективно.

ИT-Компания приглашает на постоянную работу квалифицированного Веб-дизайнера. Основные обязанности включают разработку дизайна веб-сайтов, интерфейсов приложений, продвижение веб-сайта в Интернете. Требования к кандидату: Практический опыт работы на позиции Web дизайнера свыше 2 лет; Профессиональное владение инструментами автоматизированного создания сайтов; Обширные знания и умение применить HTML/DHTML, XML, JavaScript, PHP, PERL, ASP, Photoshop, Flash, FreeHand or Corel draw, знание веб-технологий; Креативность, хорошие дизайнерские способности, творческий подход к решению задач, умение работать на результат.

Мда, “Профессиональное владение инструментами автоматизированного создания сайтов” или вот “PHP, PERL, ASP” в одном ряду с “Photoshop, Flash, FreeHand or Corel draw”. Заметили вот это “or”, — “FreeHand or Corel draw”. Это простой copy-paste совершенно другой позиции, я думаю. Вот так вот они нас c вами и нанимают. Впрочем я отвлекся, разговор пойдет о другом, еще немного примеров:

Требуется веб-дизайнер. Функции: создание и поддержка сайта, внесение описаний новых товаров на веб-сайт. Девушка/парень 20–27 лет. Высшее или незаконченное высшее техническое образование, знание ПК, базовые знания графических редакторов, навыки обработки фотографий товаров, способность быстро находить в интернете нужную информацию.

Вот черт, мне 32, наверное я уже “старый пердун”.

И еще один пример:

Требуется дизайнер сайтов.
Обязанности:
– Создание окончательного макета сайта по эскизам ведущего дизайнера.
– Обработка и доводка фотографий до состояния, когда придраться не к чему.
– Подготовка макетов для создания html-страниц и последующая «нарезка» картинок.
Обязательно:
Знание PhotoShop
Знание Интернет
Желание учиться
Желание делать САЙТЫ

Дамы и господа, как я и предполагал, без знания ПК, в XXI веке оказывается никуда :) Да и без Photoshop’a картинку на “нарежешь”. К тому же нам вменяется в обязанность писать код “инструментами автоматизированного создания сайтов”. Какие серьезные требования предъявляют эти компании, ну да ладно, — думаю, большинство из нас справится. Но, скажите мне, Христа ради (в комментариях), неужели я, как веб-дизайнер с высшим образованием, должен мечтать “доводить” фотографии? Довести фотографию, если она нормальная, это значит изменить размер (или вес в килобайтах) или наложить на нее маску. И это моя работа? Увольте.

К сведению HR’ов веб-студий, Интернет-агентств и иже с ними

Производство информационных ресурсов в Сети Интернет, очень условно, можно разделить на три (минимум) взаимо“не”связанных составляющих. Я ориентируюсь в этой статье на минимум, по очевидным причинам. (Если у вас есть бюджет собрать большую команду — это роскошь на рынке наших услуг, не используйте эту роскошь вхолостую). Эти составляющие следующие: визуально-архитектурная, веб-серверная (бизнес-логика приложения, Back-end) и редакционная (web-writing). В этой статье речь пойдет о визуально-архитектурной компоненте, собственно, о работе веб-дизайнера.

Визуально-архитектурная компонента — Front-end

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

Веб-дизайнер воплощает результаты своего проектирования, используя знание (а не знакомство :) технологий форматирования (структурирования) и презентации информации в гипертекстовой (HTTP) среде. К таким технологиям относятся XHTML — структурирование информации (контента), CSS — презентация (визуальная) информации; используя JavaScript, веб-дизайнер может регулировать (воздействовать или реагировать на) некоторые действия пользователя веб-страницы.

Определимся с термином “дизайн”

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

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

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

Веб-дизайнер vs HTML кодер

Веб-дизайнер — это профессия. HTML-кодирование — это “умение” (skill). Я ни в коем случае не хочу обидеть начинающих веб-дизайнеров. Этот веблог — именно для них. Друзья, судите сами, со временем, (да и сейчас это возможно) закодировать любой текст в HTML — сможет множество программ, а создать уникальный веб-сайт, отвечающий всем требованиям потенциального клиента — отнюдь. Без участия компетентного человека это попросту нереально. Плох тот солдат…

Веб-дизайнер vs Веб-разработчик (web developer)

Вспомним первую цитату: “Обширные знания и умение применить HTML/DHTML, XML, JavaScript, PHP, PERL, ASP.…” Языки программирования, относящиеся к “Веб-серверной” компоненте (бизнес-логика) производства Интернет-ресурсов — совершенно иная “епархия”. PHP, Perl, ASP(x), Ruby, Java — это области знаний, компетентное использование которых гораздо сложнее и требует гораздо большего количества времени и опыта, чем XHTML и CSS. Я говорю о действительно компетентном, экспертном использовании этих знаний. Проектным менеджерам стоит знать, что среди таких веб-разработчиков практически нет идиотов, которые будут работать за месячную компенсацию в 700 долларов на фактической позиции HTML-верстальщика.

Но есть одно “но”. Мой опыт подсказывает, что чем “круче” программист, тем меньше внимания он уделяет значимости интерфейса. Это естественно, — правое и левое полушарие :) С точки зрения развития бизнеса напрашивается простой вывод, — в серьезных проектах использовать и веб-дизайнера и веб-разработчика. Каждый должен заниматься действительно своим делом.

Веб-дизайнер vs графический дизайнер

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

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

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

Подведем итог. Web-design skills

Необходимые знания и навыки.

1. Высокий уровень знаний технологий XHTML и CSS.
2. Умение применять на практике CSS позиционирование.
3. Понимание разницы между HTML, XHTML, XML.
4. Понимание и уместное использование JavaScript, Ajax.
5. Умение писать эффективный код без ошибок, в соответствии со спецификациями W3C.
6. Понимание необходимости писать доступный код, — Accessibility.
7. Знание основ организации информации, проектирования Информационной архитектуры.
8. Уверенное владение программными пакетами (какими — не имеет значения).

Дополнительные навыки, “большие плюсы”.

1. Базовые знания распространенных языков веб-программирования, на уровне понимания кода.
2. Художественное или околохудожественное образование.
3. Понимаие основ оптимизации информации с целью продвижения сайта в топ поискового рейтинга (SEO)

Так чем же веб-дизайнер отличается от HTML-верстальщика? Тем же, чем кутюрье от портного.