Cамоучитель по Web-разработке на Macromedia Studio MX
Web-пространство давно уже стало универсальным носителем информации, а следовательно, работа в нем требует настолько серьезного подхода и тщательного планирования, насколько позволяет бюджет, выделенный клиентом на создание Web-узла. В последние несколько лет требования к Web-дизайну определялись понятием торговая марка. Клиенты требовали, чтобы все, представляющее их на рынке, имело корпоративный вид. В наше время клиенты участвуют в каждом этапе создания узла. Теперь стало недопустимым выплеснуть на клиента совокупность идей, а после погрузиться в автономную работу. Теперь, для того чтобы называться Web-дизайнером, не достаточно просто купить компьютер и установить на нем набор приложений. Причина в том, что процесс создания Web-узлов значительно усложнился, а скорость изменений в нем возросла. Короче говоря, Web-дизайн стал профессией, что привело к разделению процесса создания Web-узла на планирование и реализацию.Даже более впечатляющим был рост рабочих групп. Когда все было проще и графические Web-броузеры только начинали заявлять о себе, группа разработчиков из одного-двух человек считалась нормой. С ростом электронной коммерции и утверждением Web как главного двигателя продвижения товаров и услуг на рынке техническая и творческая нагрузка на Web-разработчиков стала нарастать. Пропорционально рос и объем работы, так что скоро справляться с ним одному человеку стало не под силу. В современной динамичной среде разработки с четко очерченными рамками бюджета и со строгими сроками такие проекты способны выполнить только высокопроизводительные команды специалистов, способные вписаться в жесткие рамки графика работ.
Планирование узла
Способность управлять производственным процессом и взаимодействием членов команды в современном мире стала искусством. В прошлом остался производственный процесс, сводившийся к тому, чтобы уловить, чего добивается клиент, к выбору программного обеспечения, наброске эскиза идей и концепций дизайна, и затем созданию страниц. Новый производственный процесс никогда не начинается с выбора программного обеспечения. Он начинается с обычного чистого листа бумаги.
Управление содержанием
Нельзя забывать, что Web-дизайнеры работают в команде. В данном случае взаимодействие членов команды особенно важно. Используя панель Assets и операции Check In/ Check Out в программе Dreamweaver MX, а также ее функции Cloaking, Design Notes и Reports, команда будет обеспечена полным набором средств кооперации.
Совместная работа
В этой главе речь пойдет об обмене информацией. От этого процесса зависит, как взаимодействуют члены команды, как руководитель проекта обменивается информацией с клиентом, как клиент дает свое согласие на переход команды к новому этапу работ над проектом.
Проверка своих идей на модели узла
Хотя мы работаем в условиях, где правит бал технология, она совершенно не играет роли в процессе планирования. В частности, на этом этапе вполне достаточно таких изобретений цивилизации, как карандаш и листок бумаги. На стадии планирования вырабатывается стратегия всего проекта. Эта стратегия находится не в секторах жесткого диска и не на установочном диске Dreamweaver MX. Она находится в голове и начинает воплощаться в жизнь только тогда, когда вы сформулируете и сравните свои цели и задачи.
Каркасная модель узла
Перенос узла на другой носитель информации включает в себя множество вопросов: от общей композиции элементов до цветовой гаммы. На эти вопросы редко обращают внимание при создании карты узла. Каркасная модель узла переводит разработчика с макроуровня (узла) на микроуровень (страницу). Ошибки в организации информации сначала могут быть незаметными, однако со временем они начинают проявляться. Иногда их обнаружение требует внесения больших изменений в схему навигации и в компоновку страницы. Задержка с решением этих вопросов на ранней стадии выполнения проекта ведет к дополнительным расходам в будущем.
Создание динамических страниц
Динамическое содержание переводит Web-узлы совершенно в иное измерение, в котором информация, отображаемая пользователю, может постоянно обновляться. Преимуществом такого подхода является то, что громадный объем данных может обслуживаться всего несколькими Web-страницами. Например, если некий фотограф решит рассортировать свои работы по категориям, для всех категорий потребуется всего одна страница. Когда страница вызывается из броузера, в нее загружается с сервера необходимое содержание.
Планирование внешнего вида страниц
Опыт показывает, что люди, в основном, бороздят Internet не ради развлечения. Главным их занятием на Web-страницах является чтение текста. Рисунки и анимация могут иллюстрировать текст, однако основная информация заключена в словах. Поэтому очень важно сделать текст на странице как можно более разборчивым и понятным. Рисунки и цвет дополняют содержание, однако только слова описывают то, что ищет пользователь. Вопросы выбора шрифта и разборчивости текста не менее важны, чем его компоновка на странице.
Планирование узла
Наше движение в ходе реализации этого этапа будет более поступательным, чем при создании сложной системы навигации. Мы приведем .узел к тому внешнему виду, который больше всего будет соответствовать требованиям клиента.
Работа с рисунками в Fireworks MX
Fireworks был одним из тех странных продуктов, которые рынок долго не принимал. Одни по-прежнему работали с Photoshop, другим это приложение казалось просто игрушкой. Все это продолжалось до тех пор, пока обе группы не поняли, что главным назначением этого приложения является создание и оптимизация рисунков для Web.
Цифровое видео и Flash MX
До. выхода в начале 2002 года версии Flash MX венцом желаний Flash-разработчиков была возможность воспроизводить видео в приложении Flash. В более ранних версиях продукта эту функцию можно было считать в лучшем случае недоработанной (многие даже скажут, что примитивной).
В то время во Flash можно было загрузить видео, но управлять им можно было только случайным образом, поэтому этой возможностью практически никто не пользовался. В лучшем случае видео можно было импортировать и быть счастливым, если получилось, что все его кадры преобразовались в кадры Flash. По необходимости кадры можно было трассировать и удалять.
Создание штриховой графики для Web
К категории штриховой графики относятся такие элементы, как логотипы, карты, иллюстрации и даже шрифты. Хотя большая часть этой работы происходит в цифровом формате, художники и иллюстраторы обычно начинают процесс с изложения своих идей на доске или листке бумаги.
Работа с текстом
Внешний вид текста имеет огромное значение для восприятия Web-страницы. Правильный выбор шрифта и размера символов, цвета и других эффектов может повлиять на восприятие сообщения сильнее, чем серии рисунков и фотографий. В данной главе мы поговорим о том, как с помощью форматирования текста подчеркнуть то или иное слово.
Создание динамических Web-узлов
За последние несколько лет процесс создания Web-узлов претерпел значительные изменения. Если раньше типичный Web-узел был статическим набором информации, вроде журнала, то современный Web-узел — это динамическое приложение, работающее в реальном времени. Пакет Macromedia Studio MX содержит средства для создания таких Web-узлов.
Анимация в Web
Качество анимации в Web пока что оставляет желать лучшего. От всех этих мигающих огоньков, которыми украшают, как елочными игрушками, семейные страницы ко дню Благодарения, от примитивных мультиков, взятых из готовых коллекций в той же Internet, глаза лезут на лоб. Собираясь украсить анимацией свой Web-узел, первым делом спросите себя: "А нужно ли мне все это?"
Создание Web-страниц с помощью Flash
Если сравнить приложения, которые произвели революцию в своей области, то Flash, безусловно, окажется на первом месте. Это приложение произвело в среде Web-разработчиков эффект, подобный землетрясению, и мы до сих пор ощущаем его последствия.
Создание анимации для Web-узла JCT
Анимация, которой мы сейчас займемся, будет служить как бы приглашением на сайт и будет воспроизводиться на каждой его странице. Создание Flash-кнопки аналогично созданию простейшей мультипликации. При воспроизведении ее выводится последовательность неподвижных рисунков, что создает иллюзию движения при наведении курсора на кнопку или после щелчка на ней.
Создание элементов навигации
Мы рассмотрим множество способов создания кнопок, но сначала вы должны осознать, как много зависит от того, хорошо ли сконструированы кнопки вашего Web-узла. Ведь кнопки и другие элементы навигации — это то, с чем в первую очередь сталкивается посетитель вашего узла, и если разобраться в назначении той или иной кнопки ему не удается сразу, то он может и не продолжать попыток, а просто уйти с вашего узла. Нам всем приходилось встречать коммерческие Web-узлы, на которых кнопка передачи была выполнена так, что посетителю оставалось только закрыть страницу и поискать другой узел.
Этапы
Мы рассмотрели много вопросов, связанных с созданием разных элементов страниц, начиная с планирования содержания и заканчивая созданием графических рисунков. В оставшейся части книги мы рассмотрим, как собрать материалы в динамические Web-страницы; таким образом, наша работа подошла к некоторому важному этапу.
Создание динамических страниц в Dreamweaver MX
Как вы уже догадались, шаблон определяет компоновку страницы. Различие между шаблоном и обычной страницей HTML довольно расплывчатое. Например, Web-узел JCT впоследствии может обрасти страницами, посвященными носкам, украшениям, скейтбордам и роликовым конькам. Если страницы делать статическими, для каждой группы товаров придется создавать ее конструкцию с нуля, каждый раз наполняя ее ссылками на другие страницы. Естественно, такой процесс будет достаточно утомительным и малоэффективным.
Связь с ColdFusion MX
Предполагается, что вы уже ознакомились с основами создания динамических страниц, описанными в главе 6. Используя три страницы, созданные на основе шаблонов ColdFusion MX, в этой главе будет показано, как загрузить на них динамическое содержание из базы данных, создание которой также описывалось в главе 6.
Оптимизация рисунков и пакет Studio MX
Сегодня перемещение по Web-пространству так же естественно для конечного пользователя, как и пользование телефоном или телевизором. Однако при этом от пользователя остается скрытой та часть работы (о которой велась речь в этой книге), которая касается работоспособности Web-узла на различных используемых , сегодня платформах.
Оптимизация узла и программ
Чаще всего Web-дизайнеры, пользующиеся автоматической генерацией HTML-кода в пакете MX Studio, жалуются на то, что Fireworks MX и Dreamweaver MX создают программы-заготовки (ugly code). Этим термином они хотят подчеркнуть, что создаваемые программы являются сложными и слишком длинными.
Избавляемся от ошибок и выпускаем Web-узел в свет
Итак, Web-узел можно считать готовым. Теперь перед командой встает естественный вопрос: "А работает ли он?" Ответ на него не так очевиден, как кажется на первый взгляд. Может, вы и тестировали страницы по мере их создания в Fireworks и Dreamweaver MX с помощью броузера, однако полноценным тестированием узла это назвать нельзя.
Практика создания динамических Web-узлов
За последние несколько лет процесс создания Web-узлов претерпел значительные изменения. Если раньше типичный Web-узел был статическим набором информации, вроде журнала, то современный Web-узел — это динамическое приложение, работающее в реальном времени. Пакет Macromedia Studio MX содержит средства для создания таких Web-узлов.Современные Web-узлы стали динамическими, а это означает, что в зависимости от запроса их содержание передается броузеру или Flash-приложению. Содержание динамически встраивается на Web-страницу непосредственно в процессе передачи. Это фундаментально отличается от статических Web-страниц, содержание которых встраивается дизайнером в процессе разработки.
Распространение динамических Web-узлов и развитие технологии их создания оказали влияние на команды разработчиков, создающих такие Web-узлы. В эпоху статических Web-узлов творчество команды разработчиков зависело от содержания создаваемых страниц. Члены команды, задействованные в творческом процессе, создавали рисунки, текст, разрабатывали внешний вид и управляющие элементы страницы.
Появление и развитие динамических Web-узлов перевернули всю эту модель с ног на голову. Программисты и разработчики баз данных теперь закладывают основу Web-узла. В новой модели решающую роль при создании динамического содержания играет специфика работы этих разработчиков.
В некотором отношении это разделило создателей Web-узлов на два полярных лагеря — на технических и творческих работников. Такое разделение команды разработчиков на два лагеря создает опасность попасть в неприятную ситуацию, даже можно сказать, что эта неприятность неизбежна, если не предпринять специальные меры. Рано или поздно возникнет ситуация, когда дальнейшая работа невозможна, если дизайнеры не понимают основ программирования и принципов работы баз данных, а программисты не представляют себе, как именно должно быть представлено содержание страницы.
Создание динамических Web узлов
Дизайнеры теперь уже не просто создают Web-страницы. Скорее они создают интерфейс для вывода содержания, полученного в результате работы программной части Web-узла. Работа дизайнеров теперь не статична, как раньше. Элементы дизайна перемещаются на странице и функционируют в зависимости от конкретной ситуации и содержания. Научиться этому невозможно, не понимая сути работы своих партнеров.
Анимация в Web
Недостаточно продуманная анимация может перегрузить Web-узел и сделать его загрузку слишком медленной. Можете быть уверены, что плохую анимацию посетители запомнят в первую очередь. Например, в те дни, когда технология Flash только набирала обороты, почти на каждой Web-странице можно было увидеть вращающийся глобус. Именно тогда один из авторов этой книги посетил Web-узел компании из Акрона, штат Огайо, торгующей автомобильными покрышками.
Создание Webстраниц с помощью Flash
Первые версии приложения не были особенно замечены, но способность создавать небольшие по объему анимационные ролики для Web-страниц или полностью интерактивные страницы произвела должное впечатление. С появлением 3-й версии все изменилось. Неожиданно для многих разработчиков появилась возможность создавать анимацию и интерактивность с помощью простого и знакомого интерфейса, и повсюду на Web-узлах стали появляться анимационные ролики. В 4-й версии появился специальный язык — Actionscript, и технология Flash стала серьезным инструментом для создания не только анимации, но и всего, что движется по экрану или как-то общается с пользователем. Фактически эта технология расширила наши представления о том, что можно делать в ограниченном пространстве Web.
Создание анимации для Webузла JCT
В этой главе мы не раз повторим, что нужно много раз подумать, прежде чем приступить к созданию анимации. Такой аргумент, как "если есть инструмент, то нужно им воспользоваться", не пригоден в сегодняшнем Web-дизайне. Если вы предусмотрите в бюджете создание анимации, то будьте готовы к тому, что у вас потребуют обоснования такого решения.
Создание элементов навигации
Мы рассмотрим множество способов создания кнопок, но сначала вы должны осознать, как много зависит от того, хорошо ли сконструированы кнопки вашего Web-узла. Ведь кнопки и другие элементы навигации — это то, с чем в первую очередь сталкивается посетитель вашего узла, и если разобраться в назначении той или иной кнопки ему не удается сразу, то он может и не продолжать попыток, а просто уйти с вашего узла. Нам всем приходилось встречать коммерческие Web-узлы, на которых кнопка передачи была выполнена так, что посетителю оставалось только закрыть страницу и поискать другой узел. Если кнопка передачи сделана правильно, то пользователь должен понять, что ему нужно щелкнуть на ней и его заказ будет передан куда следует и немедленно обработан.
Этапы
На этом этапе работы нам не помешает взглянуть на проделанный путь. Мы можем оценить принятые ранее решения и подумать о том, не могли ли мы сделать это более эффективно. До сих пор мы много внимания и сил уделяли созданию средств навигации. Панель навигации появляется у нас практически на каждой странице Web-узла JСТ. Мы приняли несколько важных решений относительно этой панели, но теперь хотим повторить эти размышления вместе с вами.
Создание динамических страниц в Dreamweaver MX
Как вы уже догадались, шаблон определяет компоновку страницы. Различие между шаблоном и обычной страницей HTML довольно расплывчатое. Например, Web-узел JCT впоследствии может обрасти страницами, посвященными носкам, украшениям, скейтбордам и роликовым конькам. Если страницы делать статическими, для каждой группы товаров придется создавать ее конструкцию с нуля, каждый раз наполняя ее ссылками на другие страницы. Естественно, такой процесс будет достаточно утомительным и малоэффективным.
Связь с ColdFusion MX
Если вспомнить, с чего начиналась Internet, то окажется, что она изначально создавалась как механизм передачи данных, позволяющий ученым обмениваться научными работами. Тогда Web представляла собой статичное информационное средство; для нее были характерны страницы, содержащие текст. Каждая страница была обособленной и не связывалась с другими страницами Web-узла. По мере роста популярности Web-пространства возникла потребность в совершенно ином, более современном механизме хранения информации.
Оптимизация рисунков и пакет Studio MX
Сегодня перемещение по Web-пространству так же естественно для конечного пользователя, как и пользование телефоном или телевизором. Однако при этом от пользователя остается скрытой та часть работы (о которой велась речь в этой книге), которая касается работоспособности Web-узла на различных используемых , сегодня платформах.
Оптимизация узла и программ
Чаще всего Web-дизайнеры, пользующиеся автоматической генерацией HTML-кода в пакете MX Studio, жалуются на то, что Fireworks MX и Dreamweaver MX создают программы-заготовки (ugly code). Этим термином они хотят подчеркнуть, что создаваемые программы являются сложными и слишком длинными.
Избавляемся от ошибок и выпускаем Webузел в свет
Во многих отношениях тестирование узла знаменует собой возврат к точке зрения на лес, а не на отдельные деревья в нем. До этого момента мы концентрировали внимание на отдельных фрагментах узла. Нас мало интересовало, как из них складывается общая картина. Теперь пришло время протестировать узел в целом и убедиться, что все в нем (именно все!) работает так, как планировалось.
