Книга научит вас основам современного веб-дизайна и сч ерпывающ ее руководствое издание эксмо
 Скачать 23.7 Mb.
| Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |
| Часть III: Правила CSS для представления В этой части вы перейдете от изучения основ использования каскадных таблиц стилей для изменения внешнего вида текста к созданию много колоночных макетов и добавлению на страницу синхронизированной повремени анимации и интерактивности. Здесь также рассматриваются распространенные методы использования CSS, в том числе описывается, как создать страницу с помощью адаптивного веб-дизайна. Часть IV: Создание графических изображений для Всемирной пау тины Здесь описаны различные форматы файлов, подходящие для использования во Всемирной паутине, и способы их оптимизации с целью максимально уменьшить размер файла. Часть V: JavaScript для поведения Мэтт Маркус начинает свою часть с краткого описания синтаксиса языка JavaScript, чтобы вы могли отличить переменную от функции. Вы также познакомитесь с некоторыми способами использования Предисловие языка JavaScript, в том числе сценариев объектной модели документа ( Document Object Model, DOM), а также существующих инструментов JavaScript таких, как полизаполнители и библиотеки, которые позволят вам быстро приступить к работе с JavaScript, даже если вы еще неготовы писать собственный код с нуля. Благодарности Я хочу поблагодарить моего редактора, Саймона Сент-Лорена (Simon St. Laurent), с которым мне посчастливилось работать над совместными проектами, и я надеюсь на дальнейшее сотрудничество. Спасибо моему соавтору, Мэтту Маркусу (M at M arquis) (matmarquis.com), зато, что он смог показать интересные стороны языка JavaScript и не терял хорошего настроения при работе со мной. Множество умных и замечательных людей поддерживали меня при написании этой книги. Я хочу поблагодарить моих основных технических рецензентов, Аарона Густафсона (Aaron Gustafson) (easy-designs. net), Джоэль Марши Мэтта Мен- зера (M att Menzer), зато, что уделили так много времени проверке глав этой книги. Также спасибо следующим людям за их точные рецензии Энтони Кал- задилле (A nthony Calzadilla), Дэнни Чэпману (D anny Chapman), М эт ту Хофи (M att Haughey), Джералду Льюису (Gerald Lewis), Джейсону Паменталу (Jason Pamental) и Стефани Ригер (Stephanie К счастью, я знакома со множеством экспертов в данной области, чьи книги, статьи, презентации, слайды и личное общение подпитывали мою работу. Яне смогла бы закончить ее без помощи этих гениев Дэна Се- дерхольма (Dan Cederholm), Джоша Кларка (Josh Clark), Энди Клэрка (Andy Clarke), Криса Койера (Chris Coyier), Брэда Фроста (Brad Frost), Лизы Гарднер (Lyza Gardner), Джейсона Гризби (Jason Grigsby), Стефана Хэя (Stephen Hay), Скотта Джела (Scott Jehl), Скотта Дженсона (Scott Jenson), Тима Кадлека (Tim Kadlec), Джереми Кейта (Jeremy Keith), Сан дерса Кляйнфильда (Sanders Kleinfeld), Питера-Пола Коха (Peter-Paul Koch), Брюса Лоусона (Bruce Lawson), Итана Маркотта (Ethan Marcotte), Эрика Мейера (Eric Meyer), Карен МакГрейн (Karen McGrane), Шелли Пауэрс (Shelley Powers), Брайана Ригера (Bryan Rieger), Стефании Ригер (Stephanie Rieger), Реми Шарпа (Remy Sharp), Люка Вроблевски (Luke Wroblewski) и Джеффри Зелдмана (Jeffrey Книга пишется всем миром, поэтому я хочу поблагодарить за их вклад Мелани Ярбро (M elanie Yarbrough) (выпускающий редактор и корректор, Ж еневьеву Д ’Энтремон (Genevieve d ’Entrem ont) (литературный редактор, Ребекку Демарест (Rebecca Demarest) (создание рисунков, компанию Ньюген (Newgen) (создание макета страницы, Эллен Трау- мен Зейг (Ellen Troutmen Zeig) (предметный указатель, Рэнди Комера (Randy Comer) (дизайн обложки книги) и Рона Билоде (Ron Bilodeau) дизайн книги Наконец, я хочу поблагодарить Эди Фридман (Edie Freedman) (самую лучшую начальницу) за ее терпение, когда я с головой уходила в процесс написания книги. И моих дорогих, любимых Джефа и Арно. Я счастлива наконец сказать Я вернулась!» Об авторе Дженнифер Роббинс начала работать в области веб-дизайна в 1993 году в качестве графического дизайнера первого коммерческого веб-сайта системы Global Network Navigator. Помимо этого издания, она также является автором книги (доступной также в виде приложения для операционной системы iOS), опубликованных издательством O ’Reilly. В прошлом Джен нифер выступала на многих конференциях, в том числе на «Seybold» и «South By Southwest» и преподавала начальный курс веб-дизайна в университете Johnson and Wales University в Провиденсе, штат Род- Айленд. В данный момент она занимается созданием цифровых продуктов для компании «O ’Reilly Media», где уделяет основное внимание информационной архитектуре, интерактивному дизайну и созданию веб-сайтов, приложений и электронных книг, приятных в использовании. В свободное время Дженнифер любит что-нибудь мастерить, слушать инди-рок, готовить и заниматься детьми. Использование примеров кода Цель этой книги — помочь вам в работе. Можно использовать приведенный в книге код в собственных программах и документации. Вам ненужно запрашивать разрешение издательства, если заимствуете небольшие фрагменты кода. Например, для написания программы, в которой используется несколько фрагментов кода изданной книги, вам не потребуется разрешение. Для продажи и распространения оптического диска с примерами необходимо получить разрешение. Если вы цитируете книгу и приводите пример кода, отвечая на вопрос, разрешение ненужно, а вот для включения значительного количества примеров кода из этой книги в документацию по собственному продукту оно вам потребуется. Нам будет приятно, если вы сошлетесь на эту книгу как на источник, но это необязательно. Ссылка обычно содержит название книги, фамилию и имя автора, сокращение от города издания, название издательства и год. Например Дженнифер Роббинс. Веб-дизайн: HTML, CSS и JavaScript. М Эксмо, Если использование примеров кода требует получения разрешения, обращайтесь к нам по адресу info@eksmo.ru. НАЧАЛО РАБОТЫ ЧАСТЬ I _ В этой части Глава 1. Самое начало Глава 2. Как работает Всемирная паутина Глава 3. Важные концепции для веб-дизайнера С чего начать? Я хочу лишь блог! Вам необязательно становиться веб-дизайнером, чтобы начать публиковать свои изречения и рисунки во Всемирной паутине. Вы можете создать собственный блог, используя одну из бесплатных или недорогих платформ. Эти ресурсы предоставляют шаблоны, что избавляет от необходимости изучать язык HTML (хотя и это не повредит. Ниже представлены некоторые из популярных платформ блогов: • Word Press (w w w .w ordpress.com ) • Blogger (w w w .blogger.com ) • Tumblr (ww w.tum blr.com ) • Squarespace (w w w .squarespace.com ) еще один сервис, позволяющий создавать сайты простым перетаскиванием и предлагающий услуги хостинга. Его возможности не ограничиваются только созданием блогов. Термин «веб-дизайн» применим к целому ряду дисциплин, в том числе к: • Визуальному (графическому) дизайну • Проектированию пользовательского интерфейса и опыта взаимодействия • Производству веб документации и таблиц стилей • Написанию сценариев и программированию • Контент-стратегиям • Созданию мультимедийных элементов _____________________ J С чего начать? Ваша индивидуальная отправная точка, без сомнения, зависит от вашего опыта и целей. Однако изучение принципов функционирования Интернета и веб-страниц — отличный первый шаг для каждого. Эта книга предоставляет такие базовые знания. Овладев основами, вы сможете посетить множество ресурсов во Всемирной паутине и приобрести книги для более глубокого изучения определенных областей. Существует множество уровней вовлечения в веб-дизайн — от создания персонального веб-сайта до превращения разработки страниц в полномасштабную карьеру. Вам может понравиться быть специалистом широкого профиля или профессионалом в чем-то одном, например в сфере разработки на платформе Если вы относитесь к веб-дизайну как к хобби или хотите опубликовать один или два веб-проекта, то самостоятельное обучение (такое как чтение этой книги) в сочетании с использованием доступных шаблонов и надежных инструментов веб-дизайна (например, программы Dreamweaver корпорации Adobe) — это, возможно, все, что вам нужно для выполнения поставленной задачи. Многие программы повышения квалификации предлагают вводные курсы по веб-дизайну и производству веб-сайтов. Если же вы интересуетесь веб-дизайном для построения карьеры, то должны довести свои навыки до профессионального уровня. Работодатели могут не требовать сертификатов курсов по веб-дизайну, но они ожидают увидеть примеры работающих сайтов в подтверждение ваших навыков и опыта. Это могут быть результаты учебных заданий, персональные проекты или корпоративные ресурсы. Важно, чтобы они выглядели профессионально и строились с использованием четких, правильно функционирующих H TM кода, таблиц стилей и, возможно, закадровых сценариев. Получение работы начального уровня и работа в составе команды — отличный способ узнать, как построены большие сайты, и решить, какими аспектами веб-дизайна вы хотели бы заниматься. Задачи веб-дизайнера Со временем термин «веб-дизайн» превратился в общее понятие, описывающее процесс, который фактически охватывает многоразличных дисциплин, от графического дизайна до разметки документа и серьезного программирования. В этом разделе описываются некоторые наиболее распространенные сферы деятельности. Если вы самостоятельно проектируете небольшой веб-сайт, придется быть мастером на все руки. Хорошая новость заключается в том, что вы, вероятно, этого не заметите. Ежедневное содержание домашнего хозяйства требует, чтобы выбыли и поваром, и уборщиком, и бухгалтером, иди пломатом, и садовником, и рабочим-строителем — но для вас это только обязанности, которые нужно делать по дому. Таким же образом в качестве самостоятельного веб-дизайнера вы станете и графическим дизайнером, Часть I. Начало работы Задачи веб-дизайнера и сценаристом, и верстальщиком HTM кода, и информационным архитектором, но для вас это будет выглядеть только как создание веб-страниц». Выполнение задач, для решения которых у вас нет навыков, можно поручить приглашенным специалистам. Например, я создаю веб-сайты с 1993 года и все еще нанимаю программистов и мультимедийных разработчиков, когда клиенты требуют интерактивные элементы. Это позволяет сосредоточиться на тех частях проекта, которые я могу сделать качественно (в моем случае это организация контента, проектирование интерфейса и визуальный дизайн). Крупномасштабные веб-сайты почти всегда создаются командой людей, насчитывающей от нескольких сотрудников до сотен человек. При таком сценарии каждый член команды сосредотачивается только на одном аспекте создания сайта. Вы можете просто приспособить свои навыки (написание текстов, владение программой Photoshop, программирование и т. д) и интересы к новой среде. Я разделила множество ролей и обязанностей, обычно понимаемых под словом «веб-дизайн», на четыре очень широкие категории дизайн, разработка, контент-стратегии и создание мультимедийных элементов. Дизайн Дизайн! Звучит довольно просто, но даже это требование разделено наряд специальностей, когда дело доходит до создания сайтов. Ниже представлено несколько профессий, связанных с проектированием сайта. Но имейте ввиду, что дисциплины часто пересекаются, и человек, называющий себя дизайнером, нередко несет ответственность за несколько (если не за все) из этих обязанностей. Проектирование взаимодействия, опыта взаимодействия и пользовательского интерфейса Часто под дизайном мы подразумеваем внешний вид. Ново Всемирной паутине сначала обращают внимание на то, как сайт работает. Прежде чем выбирать цвета и шрифты, важно определить цели сайта, как он будет использоваться и как посетители будут по нему перемещаться. Эти задачи относятся к таким видам профессиональной деятельности, как проектирование взаимодействия (IxD *-проектирование)у проектирование пользовательского интерфейса ( UI* проектирование и проектирование опыта взаимодействия проектирование У этих обязанностей много общего, и нередко один человек или команда выполняют все три. Цель проектировщика взаимодействия — сделать сайт как можно более простым, эффективными приятным в использовании. С проектированием взаимодействия тесно связан дизайн пользовательских интерфейсов, который обычно более сосредоточенна сокращение от англ. Interaction Design — проектирование взаимодействия (примеч. ред UI — сокращение от англ. User Interface — пользовательский интерфейс (примеч. ред UX — сокращение от англ. User experience — опыт взаимодействия (примеч. ред.) Если вы не заинтересованы стать независимым веб-дизайнером на все руки, то можете выбрать специализацию и работать в составе команды или как фри iiлансер (по договору). Глава 1. Самое начало функциональной организации страницы, а также конкретных инструментах (кнопках, ссылках, меню итак далее, с помощью которых пользователи перемещаются по контенту или выполняют задачи. Более новая профессия в мире веб-дизайна — проектировщик опыта взаимодействия Такой специалист использует более целостный подход, чтобы гарантировать положительный опыт взаимодействия от работы с сайтом. Проектирование опыта взаимодействия требует глубокого понимания пользователей и их потребностей на основе наблюдений и интервью. По словам Дональда Нормана, который ввел этот термин, проектирование опыта взаимодействия включает в себя все аспекты взаимодействия пользователя с продуктом как он воспринимается, изучается и используется. Для веб-сайта или приложения это подразумевает графический дизайн, пользовательский интерфейс, качество контента и содержащееся в нем сообщение, а также общую производительность сайта. К числу документов, создаваемых проектировщиками взаимодействия, пользовательского интерфейса или опыта взаимодействия пользователя, относятся: Изучение пользователей и отчеты о тестировании Понимание потребностей, желаний и ограничений пользователей играет основную роль в успехе дизайна сайта или веб-приложения. Этот подход к дизайну с учетом потребностей пользователей называется дизайном, ориентированным на пользователя, и является основным направлением современного дизайна. Дизайн сайта часто начинается с изучения пользователей, в том числе посредством интервью и наблюдений, чтобы лучше понять, как сайт может решить проблемы или как он будет использоваться. Обычно дизайнеры проводят пользовательское тестирование на каждом этапе процесса разработки, чтобы обеспечить необходимый уровень практичности своего дизайна. Если пользователи с трудом могут выяснить, где найти контент или как перейти к следующему шагу процесса, стоит вернуться к проектированию. Каркас сайта Каркас сайта отображает структуру веб-страницы, используя только контуры для каждого типа контента и виджетов (рис. 1.1). Задача каркаса — сообщить, как распределяется пространство на экране, и показать, где находятся функциональные элементы и контент (например, навигация, поле поиска, элементы формы итак далее) без каких-либо декоративных или графических элементов. Как правило, он сопровождается инструкциями о том, как все должно действовать, чтобы команда разработчиков знала, что следует проектировать. Схема сайта Схема сайта показывает структуру сайта в целом и то, как отдельные страницы связаны друг с другом. На рис. 1.2 представлена простая схема веб сайта. А некоторые схемы могут занимать целые стены! Раскадровки и пользовательские блок-схемы Раскадровка отслеживает путь обычного пользователя персоны на жаргоне проектировщиков опыта взаимодействия) через сайт или приложение. Этот путь обычно включает в себя сценарий и сцены, состоящие из изображений ЛОГОТИП Влад или Р8Г йстм ш ы соитагтъ | ом супггъ i подмсха | isprt u > -i I Цаапие Все категории Категория Категория Категория 3 [ПРОМО ИЗОБРАЖЕНИЯ ОТОБРАЖАЮТСЯ ЗДЕСЬ] Категория Категория Категория в 2 3 4 Спецпредложения и Акции П р оду к т 1 Продукт Продукт Продукта Пр оду к т 5 Продукт б О НАС ОБЩЕНИЕ ПОДДЕРЖКА К ом пан ия F a c e P o o k Ч аВ о Н оаости Twitter Обратная связь В аканси и Приложение Карта сайта Контакты Авторские права Рис. 1.1. Схема каркаса Рис. 1.2. Простая схема веб-сайта экрана или взаимодействий пользователя с экраном. Раскадровка призвана продемонстрировать шаги, необходимые для выполнения задач, возможные варианты, а также вводит некоторые стандартные типы страниц. На рис. 1.3 представлена простая раскадровка. Пользовательская блок-схема — еще один способ показать, как связаны между собой части сайта или приложения. Его основной принцип заключается в том, чтобы сосредотачиваться на технических деталях, а не описывать последовательность событий. Например такое-то действие пользователя запускает функцию на сервере. Обычно дизайнеры создают пользовательские блок-схемы для пошаговых процессов, таких как регистрация участников сообщества или онлайн-платежи. Задачи веб-дизайнера Style Другой подход к созданию «look and feel» сайта — использование стиля Style Tiles, который содержит примеры цветовых схем, элементы брендинга, контента и пользовательского интерфейса, а также палитры настроения, без применения их к конкретным макетам страницы. Идея состоит в том, чтобы прийти к общему знаменателю относительно согласованного визуального языка сайта. См. сайт style til.e Ъ ft £ Цоп ft (ft- уТц ft li^l * - у * /ТашГцУамм./ц» " Рис. Эскизы «look and feel» простого веб-сайта Р ис. /.3 . Типичная раскадровка предоставленная компанией Adaptive Path и нарисованная Брэндоном Шоером Графический дизайн Поскольку Всемирная паутина — визуальная среда, веб-страницы требуют особого внимания к проектированию их внешнего вида. Графический дизайнер создает «look and feel» — внешний вид и поведение сайта — логотипы, графики, шрифты, цвета, макеты и т. д, чтобы обеспечить положительное первое впечатление и согласованность с брен дом и миссией организации, которую он представляет. Графические дизайнеры обычно создают эскизы возможных вариантов внешнего вида сайта, как показано на рис. 1.4. Кроме того, они могут быть ответственны за подготовку графических файлов, оптимизированных для доставки через Интернет (о техниках оптимизации изображений читайте в главе Если вы планируете профессионально заняться разработкой визуального дизайна коммерческих сайтов, я настоятельно рекомендую пройти курсы графического дизайна, а также изучить программу Adobe Photoshop (стандарт в данной области) или Adobe Если вы уже работаете графическим дизайнером, то легко приспособите навыки иод веб-дизайн, хотя это не значит, что вам ненужно хорошо разбираться в HTML, CSS и других веб-технологиях. Поскольку на большинстве веб-сайтов присутствует хотя бы несколько изображений, даже непрофессиональным веб-дизайнерам необходимо получить минимальные знания по использованию графических редакторов. Я опять же подчеркиваю, что все эти обязанности могут выпасть на долю одного дизайнера, создающего и внешний вид, и функциональные элементы сайта. Однако, работая с крупными веб-сайтами, имеющими большой бюджет, есть шанс найти собственную нишу в сфере дизайна. (К+ ьа Р ф Я ш * 1 I Гол ф _| I Часть I. Начало работы Разработка Изрядный объем времени процесса веб-дизайна занимает создание и поиск проблем в документах, таблицах стилей, сценариях и изображениях, которые составляют сайт. В больших компаниях, занимающихся веб-дизайном, группа, которая занимается созданием файлов, составляющих веб-сайт, может быть названа отделом разработки или производства. Веб-разработчики могут не разрабатывать внешний вид и структуру сайта сами, но они должны тесно общаться с дизайнерами и понимать намеченные цели сайта, чтобы они могли предложить решения, отвечающие этим целям. Понятие разработка включает в себя такие широкие дисциплины, как авторская разработка, создание стилей и написание сценариев/программиро вание. Верстка/разметка Верстка — это термин, обозначающий процесс подготовки контента для публикации во Всемирной паутине, или, точнее, разметки контента с помощью HTM тегов, описывающих содержимое и его функции. Если вы хотите стать веб-разработчиком, вам потребуются знания тонкостей языка HTML итого, как он функционирует в различных браузерах и устройствах. Спецификация HTM L постоянно развивается, и это означает, что вы должны идти в ногу с последними достижениями и возможностями, а также знать об ошибках и ограничениях. К счастью, начинать несложно, а потом вы сможете постепенно совершенствовать свои умения. Мы займемся языком HTM L в главе 2, а затем обсудим его подробно во второй части этой книги. Стилизация В веб-дизайне, внешний вид страницы в браузере определяется правилами стилей, прописанными в CSS (каскадных таблицах стилей. Мы углубимся в изучение CSS в третьей части этой книги (а также разберемся, что означает слово каскадные, а пока просто уясните, что в современном веб-дизайне, внешний вид страницы обрабатывается отдельно от H TM разметки страницы. Опять же, если вас интересует веб-разработка, знание стилей CSS итого, как они поддерживаются (или не поддерживаются) браузерами, гарантированно будет частью ваших должностных обязанностей. Создание сценариев и программирование Так как Всемирная паутина превратилась в платформу приложений для выполнения различных задач, программирование еще никогда не играло такой важной роли. JavaScript — это язык, заставляющий элементы страницы выполнять определенные действия. Он добавляет поведение и функциональность этим элементами даже самому окну браузера. Задачи веб-дизайнера Front-end- и back-end-разработка Вы можете услышать, как веб-дизайнеры и разработчики говорят, что они специализируются на front-end- и back-end- разработке веб-сайта. Fron t-en разработка относится к любому аспекту процесса разработки, который проявляется при загрузке страницы в браузере или имеет к этому непосредственное отношение. Эта книга сосредоточена, прежде всего, на front-end-разработке. Следующие задачи обычно относят к front-end-разра- ботке: • Графический дизайн и подготовка изображений • Дизайн интерфейса • Информационный дизайн, в той мере, в какой он имеет отношение копыту взаимодействия пользователя с сайтом • Верстка документов и таблиц стилей разработка относится к программами сценариям, которые скрытно выполняются на стороне сервера, чтобы сделать веб-страницы динамичными и интерактивными. В целом, разработка обычно выполняется опытными программистами, но всем веб-дизайнерам пригодятся знания функциональных возможностей back-end-разработки. Следующие задачи относятся к back-end-разработке: • Информационный дизайн, в той мере, в какой он имеет отношение к организации данных на серве ре • Обработка форм • Программирование баз данных • Системы управления контентом • Другие веб-приложения, работающие на стороне сервера, использующие РНР, JSP, Ruby, ASP.NET, Java и другие языки программирования. ПРИМЕЧАНИЕ Многие графические дизайнеры сами переводят свои проекты в документы HTM L и CSS. На самом деле, бытует распространенное мнение, что для того, чтобы называться «веб-дизайнером», нужно уметь создавать дизайн самостоятельно, и почти все согласны, что ваши шансы при поиске работы возрастают, если вы можете не только создавать дизайны, но и писать код. Существуют и другие языки программирования для Всемирной паутины, в том числе РНР, Ruby, Python и ASP.NET, которые запускаются на стороне сервера и обрабатывают данные и информацию перед отправкой в браузер пользователя. Подробнее о том, что происходит на стороне сервера, см. во врезке «Front-end и back-end разработка». Создание веб-сценариев и программирование определенно требует некоторых навыков программирования. В то время как многие веб программисты — дипломированные специалисты, нередко они оказываются и самоучками. Разработчики, которых я знаю, обычно начинали с копирования и адаптации существующих сценариев, а затем постепенно развивали свои навыки программирования. И все же, если у вас нет опыта программирования, вначале вы можете испытывать некоторые сложности. Обучение веб-программированию выходит за рамки этой книги. С языком JavaScript вы познакомитесь в главе 21 (обучению работе с JavaScript посвящены отдельные книги. Можно создавать отвечающие всем требования, богатые контентом, отлично разработанные сайты, не имея навыков программирования, поэтому веб-дизайн не должен отпугивать непрофессионалов. Однако, как только понадобится собрать сведения посредством форм или вывести информацию по запросу пользователя, обычно в команде требуется программист. Вы также можете спросить сотрудников вашей хостинговой компании, предлагают ли они нужные вам элементы функциональности в форме простых в использовании готовых сервисов. Часть I. Начало работы Контент-стратегии и наполнение Третьим в нашем списке, хотя в идеале первым в самом процессе создания сайта, стоит важный вопрос о контенте самого сайта. Каждый, кто называет себя «веб-дизайнером», должен быть в курсе, что все наши действия направлены на поддержание процесса передачи контента или функциональности нашим пользователям. Кроме того, хорошо написанный текст может помочь повысить эффективность создаваемых нами пользовательских интерфейсов. Конечно, кто-то должен создавать и поддерживать контент — не стоит недооценивать, сколько сил требуется на то, чтобы делать это успешно. Кроме того, я хочу обратить ваше внимание, что в современной команде веб-разработчиков контентом занимаются два специалиста контент- стратеги информационный архитектор. Если контент написан неверно, сайт не может быть эффективным в полной мере. Контент-стратег гарантирует, что каждый фрагмент текста на сайте, от длинных описательных текстов до меток или кнопок, способствует развитию фирменного стиля и маркетинговых целей компании. Контент-стратегия может также распространяться на моделирование данных и управление контентом в больших и постоянных масштабах, например планирование многократного использования контента и режима обновлений. Информационный архитектор (также называемый информационным дизайнером организует контент логически для удобства нахождения информации. Он может быть ответственным за функционирование поиска, схемы сайта, а также способы организации контента и данных на веб-сервере. Информационная архитектура неизбежно переплетается с проектированием опыта взаимодействия и пользовательских интерфейсов, и нередко всем этим занимается один человек. Мультимедиа Одной из эффектных сторон Всемирной паутины является то, что вы можете добавить на сайт мультимедийные элементы, такие как звуки, видеофайлы, анимация и даже интерактивные игры. Возможно, вы захотите освоить навыки работы с мультимедийным контентом - например редактирование аудиофайлов, видеомонтаж или Flash- программирование (см. врезку Несколько слово) вдобавок к уже имеющимся дизайнерским умениям — или заняться только этими стать специалистом в данной сфере. Если не привлекает возможность превратиться в разработчика мультимедийных элементов, вы всегда можете нанять соответствующего специалиста. Компании по разработке веб-продуктов обычно ищут людей, которые освоили стандартные мультимедийные инструменты, а также имеют отличное визуальное чутье и инстинкт для интуитивного и креативно го дизайна мультимедийных проектов Требуемые знания Несколько слово (ранее Macromedia Flash, а еще ранее — FutureSplash) — мультимедийный формат, разработанный специально для Всемирной паутины. Эта технология предоставляет возможность создавать полноэкранную анимацию, интерактивную графику, интегрированные аудио- и видеоклипы, даже основанные на сценариях игры и приложения, и представлять все это в файлах небольшого размера. Однако в последнее время происходит снижение интереса к Flash- технологии вследствие ряда причин: • Решения корпорации Apple не обеспечивать поддержку Flash на устройствах iPhone и iPad, отдав предпочтение бесплатным методам языка Решения корпорации Adobe прекратить поддержку Flash (своего собственного продукта) в мобильных браузерах. • Нового программируемого элемента в языке HTML5, который обеспечивает некоторую функциональность, аналогичную платформе Критики того, что элементы иногда мешают пользователям. Например, кому захочется просматривать целиком ролик или прослушивать звуковое сопровождение на сайте ресторана, если всего лишь нужно узнать, открыт ли он в воскресенье? • Некоторые разработчики с неприязнью относятся к элементам Flash, так как для их воспроизведения требуется плагин. Нередко веб-профессионалы заявляют, что технология Flash мертва, но несмотря на такое резкое превращение в аутсайдера, платформа Flash все равно имеет ряд преимуществ, при правильном использовании. • Поскольку используется векторная графика, файлы имеют небольшой размер и изображения масштабируются без потери детализации. • Это потоковый формат, поэтому видеоролики начинают воспроизводиться сразу после начала загрузки параллельно со скачиванием данных. • Вы можете использовать язык ActionScript, чтобы назначить объектам поведение и добавить расширенную интерактивность, применяя объекты Flash в качестве элементов интерфейса для динамически генерируемого контента или функций электронной коммерции. • Плагин для поддержки технологии Flash широко распространен и поддерживается большинством браузеров настольных компьютеров. • Несмотря на то что HTML5 — многообещающий и быстроразвивающийся язык, на момент написания книги HTML5 отстает по свойствами функциональности от платформы Технология Flash не исчезнет мгновенно, хотя даже корпорация Adobe прилагает усилия по разработке альтернативных вариантов обеспечения должной функциональности средствами языка Требуемые знания НА ЗАМЕТКУ Веб-технологии: • Язык гипертекстовой разметки (Каскадные таблицы стилей Сценарии Сценарии на стороне сервера и управление базами данных Если вы — графический дизайнер, работающий в программах Photoshop и Illustrator, вас может выбить из колеи необходимость научиться создавать свои проекты с помощью текста, ноя уверяю, что начать довольно просто. Кроме того, существуют средства разработки, ускоряющие процесс верстки, которые мы обсудим далее в этой главе. Ниже приводится список технологий, связанных с веб-разработкой. Какие языки и технологии вы изучите, зависит оттого, в какой роли вы видите себя в процессе веб-дизайна. Однако я советую всем, кто занимается созданием веб-сайтов и желающим превратить front-end разработку в источник заработка, освоить языки каскадные таблицы стилей. Веб-профессионалы, подкованные с технической стороны, могут дополнительно изучить конфигурирование сервера, базы данных и вопросы производительности сайта, но, как правило, перед front-end- разработчиками такие задачи не ставятся (хотя базовое знакомство с работой сервера никогда не помешает). Часть I. Начало работы Требуемые знания Язык гипертекстовой разметки (HTML) HTML (HyperText M arkup Language, Язык гипертекстовой разметки) — язык, используемый для создания документов веб-страниц. В настоящее время используется несколько версий HTML: прочно утвердился HTML 4.01, а более новая и мощная, черновая спецификация HTML5 обретает популярность и получает все большую поддержку в браузерах. У этих двух версий есть более узкая реализация, называемая XHTML (extensible HTML, расширяемый HTM L). Это, по существу, тот же самый язык HTM L с более строгими правилами синтаксиса. Мы поговорим об отличиях этих версий в главе 10. HTML язык не программирования, а разметки, он создает систему для идентификации и описания различных компонентов документа, таких как заголовки, абзацы и списки. Разметка обозначает скрытую структуру документа (можно сказать, что это подробная машинно- считываемая схема. Чтобы написать H TM код, вам ненужны навыки программирования — только терпение. Лучший способ изучить язык HTM L — написать код нескольких страниц вручную, что мы и сделаем в упражнениях этой книги. Если вы в конечном итоге займетесь веб-дизайном, язык HTM L будет вашим воздухом. Даже людям, увлеченным версткой веб-страниц лишь как хобби, принесут пользу знания о том, как все это функционирует. Хорошая новость заключается в том, что основы изучить легко. Каскадные таблицы стилей (В то время как HTM L используется, чтобы описать содержимое веб страницы, именно каскадные таблицы стилей (Cascading Style Sheets, CSS) влияют на то, как выглядит контент. Говоря о веб-дизайне, способ, которым представлена страница, известен как ее представление. Это означает, что шрифтами, цветами, фоновыми изображениями, интервалами между строками, макетом страницы и прочим. управляют CSS. С помощью новейшей версии (CSS3) вы можете добавлять на страницу даже специальные эффекты и простую анимацию. Каскадные таблицы стилей также управляют представлением документов не только в браузерах, но ив таких контекстах, как печать и устройства с экранами с малой диагональю. Кроме того, в таблицах стилей существуют правила для определения невизуального представления документов, например как будет звучать текст при считывании его программой экранного доступа (однако они не очень хорошо под держиваются). Таблицы стилей отличный инструмент, позволяющий автоматизировать процесс разработки, потому что вы можете производить изменения, относящиеся ко всем страницам сайта, редактируя один-единственный документ таблицы стилей. Они в некоторой степени поддерживаются всеми современными браузерами. Обычно отсылки на HTML и XHTML имеют вид (X ) H TM L S--------------------------------------------- Консорциум Всемирной паутины Консорциум Всемирной паутины (World Wide Web) именуемый сокращенно W3C) — это организация, которая наблюдает за развитием веб-технологий. Группа была основана в 1994 году Тимом Бернерс-Ли, изобретателем Всемирной паутины, в Массачусетском технологическом институте. В начале, консорциум Всемирной паутины интересовался главным образом протоколом HTTP и развитием языка HTML. Теперь же он закладывает основы для будущего Всемирной паутины, развивая множество технологий и протоколов, которые должны взаимодействовать в надежной инфра структуре. Для получения ответов на любые вопросы по веб технологиям перейдите на сайт консорциума Всемирной паутины по адресу w w w .w Для получения дополнительной информации о консорциуме Всемирной паутины и о том, чем занимаются его сотрудники, см. w w w .w 3 .org/Consortium Глава 1. Самое начало Требуемые знания ПРИМЕЧАНИЕ Когда в этой книге говорится о таблицах стилей, это всегда относится к каскадным таблицам стилей (CSS), стандартному языку таблиц стилей Всемирной паутины. Три слоя веб-дизайна Современный веб-дизайн можно представить как состоящий из трех отдельных «слоев». Содержимое документа с разметкой (X)HTML составляет структурный слой Он формирует основу, на которой могут применяться другие слои. Как только структура документа создана, вы можете добавить информацию из таблицы стилей, чтобы управлять тем, как должно выглядеть содержимое. Это называют слоем представ ления. Наконец, слой поведения включает сценарии, которые наделяют страницу интерактив ностью. V______________________________________________ у Хотя вполне возможно создавать веб-страницы, используя только H T M L -теги, вы, вероятно, захотите применить таблицы стилей, чтобы не ограничивать себя стилями браузеров, заданными но умолчанию. Если вы занимаетесь проектированием веб-сайтов профессионально, мастерство использования таблиц стилей просто необ ходимо. Таблицы стилей обсуждаются далее, в части III данной книги. Сценарии JavaScript/DOM JavaScript — язык сценариев, который наделяет веб-страницы интерак тивностью и вариантами поведения, включая следующие (перечислены далеко не все): • Проверка правильности значений, введенных в элементы формы • Замена стилей для элемента или всего сайта Требование от браузера запомнить информацию о пользователе для следующего сеанса его посещения Создание интерфейсных виджетов, таких как раскрывающиеся меню. Язык JavaScript используется для управления элементами на веб странице, примененными к ним стилями, или даже самим браузером. Существуют и другие языки веб-сценариев, но JavaScript (также называемый ECM AScript) стандартизирован и наиболее широко распро странен. Вы можете также услышать термин сценарии объектной модели документа или сценарии DOM, используемый в отношении JavaScript. Технология DOM является сокращением термина объектная модель документа (D ocum ent Object Model) и обращается к стандартизированному списку элементов веб-страницы, к которым можно получить доступ и управлять ими, используя JavaScript (или другой язык сценариев. Сценарии DOM используются взамен подхода D H TM L (Dynamic HTML, динамический HTM L), который теперь считается устаревшим. Написание кода на языке JavaScript — по сути, программирование, обучение этому языку может занять много времени, если у вас нет опыта в данной сфере. Многие люди самостоятельно изучают язык JavaScript, читая книги, а также используя уже созданные сценарии и изменяя их. Большинство инструментов для верстки веб-страниц поставляется со стандартными сценариями, которые вы можете использовать наряду с прочими функциями этого программного обеспечения. Профессиональные веб-разработчики обязаны знать язык JavaScript, однако многие дизайнеры полагаются на программистов в добавлении поведений в свои проекты. Таким образом, хотя код на языке JavaScript и полезен, изучение его не является обязательным для всех Часть I. Начало работы веб-дизайнеров. Эта книга не научит вас языку JavaScript, поэтому стоит обратить внимание, например, на книгу Дэвида Макфарланда. «JavaScript. Подробное руководство (Эксмо, 2009), если вы хотите узнать больше. Программирование на стороне сервера Некоторые простые веб-сайты — коллекции статических H TM L- документов и файлов изображений, но большинство коммерческих сайтов имеет более продвинутые функциональные возможности, такие как поддержка форм, динамически генерируемые страницы, корзины покупателей, системы управления контентом, базы данных и т. д. Этот функционал поддерживается специальными приложениями, запущенными на стороне сервера. Существует множество языков сценариев и программирования, которые используются для создания веб приложений, включая следующие: • РНР (CakePHP, Codelngniter, Drupal) • Python (Django, TurboGears) • Ruby (Ruby on Rails, Sinatra) • JavaScript (Node.js, Rhino, SpiderM onkey) • Java (Grails, Google Web Toolkit, JavaServer Faces) • ASP.Net (DotNetN uke, ASP.Net Разработка веб-приложений — задача программистов и не требуется от всех веб-дизайнеров. Однако это не означает, что вы не можете предложить такие функциональные возможности вашим клиентам. Покупательские корзины, системы управления контентом, списки рассылок и гостевые книги легко можно приобрести как готовые решения без необходимости программировать их с нуля. Необходимое обеспечение Неудивительно, что профессиональные веб-дизайнеры нуждаются в изрядном количестве, как аппаратных средств, таки программного обеспечения. Один из самых общих вопросов, который мне задают мои студенты Что я должен приобрести Яне могу сказать вам определенно, что купить, но предоставлю краткий обзор типичных инструментов, которые вам понадобятся. Примите во внимание, что в то время как я перечислю самые популярные платные программы, у многих из них существуют бесплатные или условно-бесплатные эквиваленты, которые вы можете загрузить, если ограничены в средствах (посетите ресурс  перейти в каталог файлов | Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |