Урок 1. Основы
Давайте представим, что наша задача очень проста: человек, обладающий базовыми навыками работы на компьютере, должен научиться делать веб-страницы. «Научиться» в моём понимании не значит получить абсолютно все возможные навыки. Это значит — понять методику решения типичных задач и разобраться, где искать ключи к решению новых.
Господа профессиональные дизайнеры! Если вы сочтёте нужным указать мне на возможные ошибки изложения, я буду этому очень рад. Но прошу вас, поосторожнее с концептуальными заключениями: опыт учит каждого по-своему. Я не получил образования в области дизайна, но у меня за плечами десятилетний опыт, который оказался небесполезным в условиях канадской иммиграции для меня самого, и который, как я надеюсь, поможет кому-то ещё.
Задачи веб-дизайна
Интересно, что многие попадаются на слове «дизайнер», полагая, что успешно подвизаться в данной области может только профессиональный художник. Это немного не так. Если вы рисовальщик, вам просто цены нет, но для того, чтобы работать веб-дизайнером, достаточно некоторого вкуса, чувства цвета и знания основных законов композиции, а собственно стиль придёт позже… если вам всё это не надоест. Кстати говоря, иногда именно офлайновым художникам оказывается очень трудно работать для веба, поскольку это совершенно другое пространство со соими непривычнами законами.
Веб-дизайнер в моём представлении — человек, строящий интерфейсы, т. е. средства общения посетителя веб-страницы с её наполнением. Главная задача здесь — обеспечить удобство навигации и лёгкость восприятия контента. Всё остальное будет выражением доброй воли веб-дизайнера, и воплощением желаний заказчика. Естественно, что для каждого сайта приходится создавать и уникальные графические элементы, так что без эскизов и Photoshop тоже не обойтись.
Вообще говоря, язык гипертекстовой разметки страниц HTML, от которого, как от печки, приходится плясать каждому разработчику, создавался никак не для дизайна. Вся свадьба затевалась из-за ссылок, с помощью которых предполагалось связывать разрознённые документы в гипертекст: вот, собственно, и всё. 90% труда веб-дизайнера состоит как раз в том, чтобы заставить HTML служить целям, для которых он не предназначался.
Надо сказать, что в настоящее время язык этот в значительной степени усовершенствовался, в результате чего мы иногда действительно можем заставить веб-страницу выглядеть так, как нам хочется. В частности, HTML-таблицы, которые задумывались как средство представления табулированных данных, теперь используются практически на каждом сайте, т. к. могут обеспечить более-менее приличную точность взаимного позиционирования элементов страницы. Приём этот так и называется: табличная вёрстка. Сейчас, правда, в моде вёрстка с помощью CSS, но лично я пока не уверен, что этот подход лучше. Кто к чему привык, знаете ли.
Ах, да, ещё и браузеры (Firefox, Internet Explorer, Opera etc.). Дело в том, что разные программы, предназначенные для отображения HTML-кода, понимают и визуализируют этот самый код очень и очень по-разному, что относится и к различным версиям одного и того же браузера. Это — ещё одна проблема, с которой веб-дизайнер сталкивается ежедневно.
Попробуем резюмировать всё вышеизложенное. Вот неполный перечень задач, которые веб-дизайнер решает на пути к готовому сайту:
1. Проектирование графического интерфейса.
В Photoshop или другом графическом пакете веб-дизайнер создаёт проект будущей веб-страницы. Если предполагается, что различные части сайта должны выглядеть по-разному, потребуется соответствующее количество эскизов. В конце концов картинки должны выглядеть в точности так же, как будущие странички, это относится и к тексту.
2. Создание HTML-шаблонов.
После того, как эскизы готовы, вам предстоит подготовить шаблоны для будущего веб-сайта, т. е. в одном из HTML-редакторов (о них будет рассказано ниже) сделать уже непосредственно веб-страницы, включающие в себя оптимизированную графику из эскизов и место для текста, который предполагается разместить. Количество таких шаблонов должно соответствовать количеству уникальных эскизов, которые вы спроектировали в Photoshop.
На этом этапе дизайнер должен позаботиться о том, чтобы прототипы страниц одинаково хорошо выглядели во всех браузерах для всех платформ (PC, Macintosh, Linux/Unix), указанных в техническом задании, и учесть требования к размеру файлов.
3. Программирование I (клиентская часть).
Как правило, веб-страницы содержат элементы интерфейса, реагирующие на действия посетителя, не сводящиеся к щелчкам на ссылках. Чаще всего используются так называемые roll-overs, т. е. изменения внешнего вида элементов страницы, над которыми проходит курсор мыши (пример: кнопка, на которую наведён курсор, меняет цвет). Такого рода функциональность обеспечивается за счёт программирования на одном из скриптовых языков (обычно JavaScript), и реализуется на компьютере посетителя страницы. Получившияеся скрипты называются client-side scripts.
4. Внесение контента (содержания).
В готовые шаблоны вносится текст, после чего шаблоны сохраняются с разными именами, соответствующими названиям разделов сайта. Расставляются ссылки, при необходимости прописываются метаданные, идентифицирующие документ. До внесения текста желательно подготовить таблицу стилей, описывающих внешний вид заголовков разного уровня и других типичных видов контента. Стоит добавить, что не помешает откорректировать текст сайта хотя бы одной из программ проверки орфографии и грамматики…
5. Программирование II (серверная часть).
Почти всегда богатые возможности того или иного сайта обеспечиваются за счёт серверного программирования (server-side scripting). Функции клиентских скриптов очень и очень ограничены, большей частью из соображений безопасности. Серверный скрипт, т. е. скрипт, выполняющийся на сервере провайдера, может работать с базами данных, генерировать динамические страницы, преобразовывать форматы документов и т. д. и т. п. Веб-дизайнер может не быть программистом, но он обязан знать, как подключить к странице серверные скрипты, написанные другими людьми; эта задача входит в построение интерфейса сайта.
7. Тестирование сайта.
До того, как готовый сайт появится на сервере, вы должны проверить его работоспособность, правильность ссылок, корректную работу скриптов и прочее. Лучше всего это делать на тестовом веб-сервере.
8. Загрузка файлов на сервер провайдера.
После того, как работа над сайтом закончена, готовые файлы необходимо загрузить на сервер провайдера. Это делается с помощью одного из так называемых FTP-клиентов, т. е. программ, передающих файлы по FTP-протоколу. Если при разработке использовались специализированные средства (пример: FrontPage Extensions), необходимо заранее убедиться, что сервер провайдера поддерживает все нужные сервисы; в этом случае загрузка файлов должна осуществляться при помощи специальных программ. После этого стоит ещё раз всё проверить: нередко можно обнаружить неправильные ссылки, возникшие вследствие того, что конфигурация сервера провайдера может существенным образом отличаться от конфигурации вашего компьютера.
Средства веб-дизайна
Под средствами я подразумеваю те технологии (языки), с помощью которых создаются веб-страницы. Перечень будет неполным, но так и должно быть: мы с вами не энциклопедию пишем.
1. HTML
Язык гипертекстовой разметки документов: этот язык описывает каждый элемент страницы и все ссылки на объекты, находящиеся за её пределами. В настоящее время используется версия 4.0, которая существенно богаче предыдущей. К сожалению, производители браузеров так и не договорились о стандартах… существуют даже теги (своего рода операторы языка HTML), предназначенные для одних браузеров и игнорируемые другими. Описание основ языка будет дано в следующем уроке.
2. CSS
Каскадные таблицы стилей. Исходя из полезной концепции разделения содержания веб-страниц и описания формы его представления, CSS дают возможность создать набор правил отображения всех элементов, входящих в страницу, и далее только ссылаться на него, не загромождая код. Также по-разному интерпретируется различными браузерами.
3. JavaScript
Язык сценариев (скриптов). Именно с его помощью можно задать правила поведения различных элементов веб-страниц, изменения свойств таблиц стилей и т. д. Синтаксис JavaScript может сильно отличаться в зависимости от того, в каком браузере будет выполняться сценарий.
Помимо JavaScript существует ещё и VBScript, язык с синтаксисом Visual Basic, предоставляющий примерно те же возможности, что и JavaScript, но он используется значительно реже вследствие совместимости с единственным браузером: Internet Explorer.
4. DHTML
Фактически DHTML (Dynamic HTML) есть не что иное как сочетание расширенного HTML и продвинутого JavaScript. Используя последние достижения в этой области, разработчик может на ходу менять вид и содержание ЛЮБОГО элемента веб-страницы без её перезагрузки. К сожалению, Opera не поддерживает DHTML в полной мере, и поэтому при условии наличия требований совместимости с этим браузером приходится ограничивать функциональные возможности скриптов.
5. Java
Кроссплатформенный язык программирования. В нашу с вами жизнь он войдёт в виде готовых апплетов: специальных файлов, написанных на Java и внедряемых в HTML как объекты.
6. ActiveX
Технология, позволяющая помещать на веб-страницы объекты, очень напоминающие апплеты, но обладающие значительно большими возможностями вследствие полного доступа к операционной системе Windows, с которой эта технология единственно совместима. Распространена не слишком широко из-за низкого уровня безопасности.
7. CGI
Технология обмена информацией между веб-сервером и CGI-программой, т. е. такой программой, которая способна принимать и передавать данные по спецификации CGI (Common Gateway Interface). Мудрёно, не спорю… Проще представить себе следующее: вам наверняка приходилось встречать в интернете формы, которые надо заполнить и куда-то там отправить по нажатию соответствующей кнопки. Так вот, после того, как вы на эту кнопку нажимаете, введённые в форму данные передаются CGI-программе, работающей на сервере, и именно эта программа отправит их по назначению, например — добавит запись в гостевую книгу. В этом курсе мы познакомимся с CGI-скриптами, написанными на языке Perl.
8. Flash и Shockwave.
Достаточно специфические — и очень популярные в последнее время — продукты компании Macromedia, с помощью которых можно создавать анимированные ролики для веб-сайтов, а иногда и полностью строить веб-интерфейсы. Если вы возьмётесь освоить их, ваша ценность для будущего работодателя значительно вырастет… хотя вот тут-то как раз и нужно быть хотя бы немного художником.
Инструменты веб-дизайнера
Если вы уже пытались создавать HTML-страницы, используя соответствующие возможности Microsoft Word, забудьте об этом. Если начали изучать FrontPage — также рекомендую забыть, он вам не пригодится… я сам работал в нём два года и наконец оставил это невесёлое занятие. Вам понадобится… вот почитайте-ка ниже, что вам понадобится.
1. Adobe Photoshop
Мощное средство создания графики для интернета и не только. Веб-дизайнера он интересует в особенности, т. к. оснащён развитыми средствами оптимизации графики, т. е. уменьшения размеров графических файлов без проигрыша в качестве или с мининальным проигрышем. Имейте в виду, что в интернете используются два основных графических формата: GIF (для изображений с небольшим количеством цветов) и JPEG (для полноцветных фотографических изображений), с каждым из которых Photoshop справляется очень неплохо. Представьте: каждая веб-страница должна весить не более 50–100 килобайт в худшем случае… сами понимаете, без оптимизации не обойтись.
Я пользуюсь 8-й версией Photoshop, но, если у вас установлена версия 6.0 или 7.0, ничего страшного. Сайт программы:
Adobe Systems Incorporated
2. Macromedia Dreamveaver
Самый приличный из современных визуальных редакторов веб-страниц.
Существует мнение, что HTML должен писаться только руками и только в текстовом редакторе. Это чистейшей воды снобизм: при таком «профессиональном» подходе большой заказ переживёт заказчика… да и исполнителя, возможно. Другое дело, что вы должны уметь писать HTML руками без помощи визуальных редакторов, иначе какой же вы профессионал? Лично я, к сожалению, шёл к HTML от Front Page, что существенно замедлило прогресс.
Я использую версию 4.01, она предоставляет разработчику наибольшие возможности и снабжена прекрасной информационно-справочной системой по HTML, CSS и JavaScript. Более поздние версии этого редактора мне не понравились. Сайт программы:
Macromedia
Эта же компания разрабатывает Flash и Shockwave.
3. Notepad
Без этого весёлого редактора тоже не обойтись: по крайней мере вы всегда будете знать, что код сохранён именно в том варианте, в котором вы его создавали. Сам я пишу в Notepad-е файлы таблиц стилей, правлю скрипты… а если приходится сесть за компьютер без Dreamweaver-а, то и полностью делаю странички. Никто не заставляет вас заниматься этим постоянно, но уметь это необходимо. Сайт программы:
Microsoft
4. Perl
Если вы собираетесь изучать Perl в среде Windows, установите на своём компьютере Active Perl версии 5.6 или выше. Не волнуйтесь, практически все ваши скрипты будут работать и под Unix. Сайт программы:
ActiveState — Programming for the People
5. Perl Builder
Так вот, если вы всё ещё собираетесь изучать Perl, вам понадобится соответствующий редактор-отладчик. Вообще говоря, сейчас почти к любому текстовому редактору можно подключить и подсветку синтаксиса, и возврат диагностики компилятора (интерпретатора), но я выбрал для себя упомянутый редактор и пока им доволен. Используйте версию 2.0, она значительно лучше первой. Сайт программы:
Solutionsoft Home Page
6. Apache Web-server
Этот сервер вы можете использовать для тестирования веб-страниц и скриптов, написанных на языке Perl. Используйте версию 2.0 или более современную. Сайт программы:
The Apache Software Foundation
7. Браузеры.
Для начала достаточно, если вы будете тестировать свои страницы на совместимость с тремя браузерами: Internet Explorer, Firefox и Opera. Сайты программ:
Internet Explorer
Netscape Navigator
8. LeapFTP
Для загрузки файлов на сервер провайдера вы можете воспользоваться одним из множества FTP-клиентов. Я по-старинке использую LeapFTP версии 2.72, хотя и знаю, что он далеко не лучший в своём роде. Сайт программы:
LeapWare
…
Если вы окончательно заскучали, читая это длинное введение, дождитесь следующего урока: мы с вами займёмся чем-нибудь практическим. Например — построим первый эскиз веб-страницы.
Я предполагаю, что на вашем компьютере уже установлены Dreamweaver 4.01 и Photoshop версии не ниже 8, в противном случае нам с вами просто нечем будет заняться.
До встречи!
Урок 2. Эскизы
наверх
| 
