Главная страница
qrcode

Книга научит вас основам современного веб-дизайна и сч ерпывающ ее руководствое издание эксмо


НазваниеКнига научит вас основам современного веб-дизайна и сч ерпывающ ее руководствое издание эксмо
Анкор1. HTML5 CSS3 i JavaScript Ischerpyvayuschee rukovod.pdf
Дата21.05.2017
Размер23.7 Mb.
Формат файлаpdf
Имя файла1_HTML5_CSS3_i_JavaScript_Ischerpyvayuschee_rukovod.pdf
оригинальный pdf просмотр
ТипДокументы
#20646
страница4 из 8
Каталог
1   2   3   4   5   6   7   8
говорит о том, что следующий текст должен быть отформатирован как заголовок уровня 1;
обозначает наконец заголовка. У некоторых элементов, именуемых пустыми, нет содержимого. В нашем примере тег

указывает на пустой элемент, который предписывает браузеру создать в этой позиции горизонтальную линию».
Поскольку я не была знакома с программированием, когда впервые начала писать H T M L -код, мне помогала мысль о тегах и тексте, как об узелках на веревочке, которые браузер обрабатывает последовательно, один за другим.
Например, когда браузер сталкивается с открытой скобкой (<), он считает все следующие символы частью разметки, пока не находит закрывающую скобку (>). Точно также он считает весь контент после открытия тега
заголовком, пока не сталкивается с закрывающим тегом
. Это способ, которым браузер анализирует H TM документ. Понимание принципов работы браузера с H TM кодом может быть полезно при анализе неправильного H TM доку мента.
Но где изображения?
Как вы уже поняли, изображения не встраиваются в H TM файл, но как они там оказываются, когда вы просматриваете веб-страницу?
На рис. 2.3 продемонстрировано, что каждое изображение — это отдельный графический файл.
Графика помещается в текст с помощью H T M L -элемента изображения
(img), который сообщает браузеру, где искать графический файл (согласно U адресу. Когда браузер находит элемент
img, он запраши-
Анатомия веб-страницы
) @
) Щ Пр мм еры глава и Р
-
^ Кухня Кристины Пга ЯП
L
5
I U Кухня Кристины iЕсли вы любите читать о приготовлении пищи, хотели бы узнать о некоторых лучших ресторанах в мире или просто ищите вкусные рецепты, чтобы приготовить новые блюда самостоятельно, этот сайт для вас!

Всегда ваша, Кристина
Все права защищены Эта веб-страница на самом деле состоит из четырех отдельных файлов текстового HTML- документа, таблицы стилей и двух рисунков. Теги в документе задают браузеру инструкции, как должен быть обработан текст и где следует разместить изображения.
index.html
С!DOCTYPE html>
chtml>
chead>

clink r e l = " s t y l e s h e e t " h r e f = " k i t c h e n .css" t y p e = " t e x t / c s s " >

cbody>
c h l x i m g s r c = Mf o o d s .
g i f "
alt="noroTnn с продуктами"Жухня Кристины
<р>Если вы любите читать о <збгопд>приготовлении nniiiH
, хотели бы узнать о некоторых лучших ресторанах в мире или просто ищете вкусные рецепты, чтобы приготовить новые элюда самостоятельно, <еш>этот сайт для вас !
c p x i m g s r c = " s p o o n .g i f
" а1б="изображение ложки">Всегда ваша, Кристина


Cp>Bce права защищены 2013
c/body>
c/html>
kitchen.css
Dody { font: normal lem Verdana; margin: lem 10%;}
il { font: italic 3em Georgia; color: rgb(23, 109, 109); margin: lem 0 lem;} img { margin: 0 20px 0 0 ; } il img { margin-bottom: -20px; }
small { color: #666666; }
fo o d s.g if
sp o o n .g if
Puc. 2.3. Исходный файл и изображения, которые составляют простую веб-страницу
Глава 2. Как работает Всемирная паутина
Анатомия веб-страницы вает у сервера файл изображения и затем помещает его в поток контен­
та. Программное обеспечение браузера собирает отдельные фрагменты в финальную страницу. Видеоконтент и прочие вложенные файлы добавляются тем же способом.
Сборка страницы происходит мгновенно, поэтому она появляется так, как будто вся страница загружается сразу. При медленных соединениях, или на более медленных компьютерах, или если страница содержит большое количество графики, процесс сборки более заметен, поскольку изображения появляются позже текста. Иногда странице даже требуется перезагрузка по мере появления новых изображений (хотя вы можете сконструировать свои страницы так, чтобы этому воспрепят­
ствовать).
Добавление стилей
Я хочу обратить ваше внимание на последний ключевой компонент нашей простой страницы. В верхней части H T M L -документа есть элемент lin k , который указывает на файл таблицы стилей kitchen.css, которая содержит информацию о том, как должна выглядеть страница в брау­
зере. Это инструкции стилей, написанные в соответствии с правилами каскадных таблиц стилей ( CSS). CSS позволяет дизайнерам добавлять визуальные инструкции стилей (известные как представления документа) к размеченному тексту ( структура документа в терминологии веб-дизайнеров). В третьей части книги вы по-настоящему почувствуете мощь каскадных таблиц стилей.
На рис. 2.4 показана веб-страница сайта Кухня Кристины с примененными стилями и без них. Браузеры оснащены стилями, используемыми по умолчанию для каждого поддерживаемого ими H T M L -элемента, так что если для H TM документа нет собственных инструкций стилей, браузер применит свои (то, что вы видите на скриншоте слева. Всего несколько правил стилей способны значительно улучшить внешний вид страницы- =
»
( Ф Х Э [ ? ПрИМ«ры\.ГЛа§1-02\|Г р - •* Ц 0 Кухнв Кристины х В Н
Н
Р н В Ш
П
Ж
? Щ Ф ДО Д С : Примеры\гла*а-02\и Р - -*
|
0
Кутя
Кристины
Я
Ш
Кухня Кристины
Если вы любите читать оп риг ото в лени и пиши, хотели бы узнать о некоторых лучших ресторанах в мире или просто ищите вкусные рецепты, чтобы приготовить новые блюда самостоятельно, этот сайт для вас Всегда ваша, Кристина
Кухня Кристины
Если вы любите читать о приготовлении пищи, хотели бы узнать о некоторых лучших ресторанах в мире или просто ищите вкусные рецепты, чтобы приготовить новые блюда самостоятельно, этот iiсайтi для вас Всегда ваша, Кристина
Все права защищены Все права защищены Рис. Веб-страница сайта Кухня Кристины с примененными стилями (справа) и без них (слева)

Часть I. Начало работы
Добавление поведений с помощью В дополнение к структуре документа и представлению существует также компонент поведения который определяет, как все работает Во Всемирной паутине поведение определяется языком сценариев, который называется JavaScript. Я затрону его в части V этой книги, однако для изучения языка JavaScript требуется больше информации, чем я могу предоставить в рамках данного издания.
Многие дизайнеры (включая меня) обращаются к людям, имеющим опыт написания сценариев, чтобы добавить сайтам функциональность. Однако знание языка JavaScript становится все более необходимым для профессии веб-дизайнера.
--------------------------------------------- У
Резюме РезюмеВ завершение этой главы давайте рассмотрим события, происходящие с каждой веб-страницей, которая появляется на экране вашего компьютера (рис. О Вы запрашиваете веб-страницу, указав ее U адрес (например,
http://jenskitchensite.com) непосредственно в браузере или переходя
Ф
Б раузер
Q Введите адрес или щелкните по ссылке в браузере.
Сервер
1
0 О Я вижу, что вы запрашиваете каталог, поэтому я отсылаю файл, заданный по умолчанию
index.html. Вот он».
Браузер анализирует документ. Если в нем есть ссылки на изображения, таблицы стилей и сценарии, браузер опять связывается с сервером для запроса каждого требующегося файла.
К у хн я Кристины iЕсли вы любите читать оп р иго тов лени и пищи, хотели бы узнать о некоторых лучших ресторанах в иире или просто ищите вкусные рецепты, чтобы приготовить новые блюда самостоятельно, этот сайт для вас!
всегда ваша, Кристина 1 kitchen, css foods.gif
© Страница собирается в окне браузера.
Ф ай лы на сервере index.html foods.gif l i l spoon.gif Сервер ищет файл и отвечает, отсылая ответ п. протоколу НИР.
Нет такой страницы. Если файл не найден на сервере, тот возвращает сообщение об ошибке.
вое
404 Not found
I
Horn. У http ,'/ WWW (Mnklu lKnv
Not Found
The roqueted URL b nt* срк» » u not found on this «
AparkeH J J 4 Srrrrr of mh и JtnUihair iam P(trt ЛГ)
Puc. 2.5. Как браузеры отображают веб-страницы
Глава 2. Как работает Всемирная паутина
Резюме по ссылке на странице. адрес содержит всю информацию, необходимую, чтобы найти в Интернете определенный документ Ваш браузер посылает H T T P -запрос на сервер, указанный в URL- адресе, и запрашивает нужный файл. Если U адрес указывает не на файла на каталог, браузер запрашивает находящийся там индексный файл Сервер ищет требуемый документ и выдает НТТР-ответ.
а. Если страница не может быть найдена, сервер возвращает сообщение об ошибке. Сообщение обычно следующее — «404. Нет такой страницы, хотя могут быть выведены и более гостеприимные сообщения об ошибках.
б. Если документ найден, сервер извлекает требуемый файл и возвращает его браузеру.
О Браузер разбирает H TM документ. Если страница содержит изображения (обозначенные элементом im g ), браузер связывается с сервером снова, чтобы запросить каждый графический файл, указанный в разметке Браузер вставляет каждое изображение в позицию документа, обозначенную элементом im g. И все Собранная веб-страница отображается на вашем экране.
Часть I. Начало работы
ВАЖНЫЕ КОНЦЕПЦИИ ДЛЯ ВЕБ-ДИЗАЙНЕРА
По мере того как Всемирная паутина развивается и количество устройств, с которых мы можем посещать ее ресурсы, экспоненциально увеличивается, работа веб-дизайнеров и разработчиков значительно усложняется. Честно говоря, мне не хватит книги, чтобы изложить все происходящее. В последующих главах я остановлюсь на краеугольных камнях веб-дизайна — HTM элементах, стилях CSS, обзоре JavaScript и подготовке веб-графики — знание которых обеспечит прочную основу для дальнейшего развития ваших навыков.
Но прежде чем начать с азов, я хочу ввести несколько важных понятий, которые, по-моему, должен знать каждый веб-дизайнер. Мы рассмотрим идеи и соображения, которые вдохновляют наши решения и вносят вклад в современную среду веб-дизайна. Я часто буду употреблять термины, поясняемые ниже.
Суть в том, что веб-дизайнер никогда не знает точно, как будут просматриваться создаваемые им страницы. Неизвестно, какие из сотен брау­
зеров будут использованы, запустят их на рабочем компьютере или на каком-нибудь портативном устройстве, насколько велико будет окно браузера, какие шрифты установлены, включены ли дополнительные функции, такие KaiCJavaScript, какова скорость соединения с Интернетом, будут ли страницы считываться с помощью программ экранного доступа итак далее. Важные понятия этой главы в первую очередь обозначают методы борьбы с неизбежным элементом неизвестности в нашей среде. К ним относятся:

Множество устройств

Веб-стандарты

Прогрессивное улучшение

Адаптивный веб-дизайн

Доступность

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

Всемирная паутина на мобильных устройствах
Преимущества веб-стандартов

Прогрессивное улучшение

Адаптивный веб-дизайн

Доступность

Производительность сайта
Множество устройств соединением. А на новых планшетах iPad с экранами с высоким разрешением можно путешествовать по Всемирной паутине с помощью низкоскоростного ЗС-соединения. Другими словами, все сложно!
Скоро люди будут чаще посещать веб-сайты с мобильных и альтернативных устройств, чем с настольного компьютера. Уже сейчас значительная часть пользователей использует смартфоны как единственное средство доступа в Интернет. Значит, важно оценить ситуацию правильно Но, честно говоря, на момент написания книги я не совсем понимала, как уместить весь контент, который мы привыкли видеть на своем рабочем столе, в портативные устройства так, чтобы использовать его было по-прежнему приятно. Веб-дизайнеры достигли больших успехов в понимании проблемы и выработали замечательный дух сотрудничества, но дело в том, что наши инструменты и технологии не совсем подходят для этой задачи, и понадобится некоторое время, чтобы наверстать упущенное.
Мобильная Всемирная паутина?
Вы можете услышать, как дизайнеры используют термин мобильный Интернет или мобильная Всемирная паутина, нона самом деле (как написал Стивен Хэй в своем Twitter-аккаунте в 2011 году, см. рис. 3.2) мобильной Всемирная паутина является не более чем настольной или планшетной и т. д. Существует только Всемирная паутина, доступ к которой можно получить со всевозможных устройств. На момент написания книги термин мобильная Всемирная паутина использовался как некое всеобъемлющее понятие для описания усилий по адаптации наших навыков дизайна, чтобы охватить большее количество всевозможных случаев. И как выясняется, расколоть этот крепкий орешек можно разными способами.
Рис. 3.2. Перевод сообщения Стивена Хэя по поводу мобильной Всемирной паутины Hay А ’ # читал.

Мобильной Всемирной паутины не существует. Как нет настольной или планшетной. Есть только Всемирная паутина, воспринимаемая нами
по-разному.
Глава 3. Важные концепции для веб-дизайнера
Соблюдение стандартов
Следование
веб-
стандартам — основной инструмент для обеспечения максимальной согласованности вашего
сайта.
Я хочу, чтобы вы уяснили дизайн, каким вы его видите, работая над ним на своем настольном компьютере, не всеми будет восприниматься одинаково. Об этом факте должен помнить каждый специалист по веб- дизайну.
Дополнительны е источники информации
Статья «Тренды мобильного интернета позволит вам быть в курсе основных тенденций, характерных для развивающейся мобильной Всемирной паутины (seo-box.ru/new s-30.htm Книга Сначала мобильные Люка Вроблевски (Манн, Иванов и Фербер). Люк раньше других начал настаивать, что веб-сайты должны прекрасно функционировать на мобильных устройствах, ион делится своей точкой зрения в этой небольшой книге, набитой идеями.
Статья w w w .cisco.com /w eb /R U /n ew s/releases/txt/2011/02021 lb.
html рассматривает тенденции развития мобильной Всемирной паутины до 2015 года.
Соблюдение стандартов
Так как же справиться с этим разнообразием Для начала хороший вариант — соблюдать стандарты HTML, CSS, JavaScript, задокументированные консорциумом Всемирной паутины. Соблюдение веб-стандартов поможет обеспечить единообразное представление вашего сайта во всех браузерах, которые их придерживаются (около 99% браузеров используемых в настоящее время. Также не помешает сделать контент заранее совместимым со стандартами, поскольку веб-технологии и возможности браузеров развиваются. Еще одно преимущество состоит в том, что клиенты придерживаются более высокого мнения о дизайнерах, создающих сайты в соответствии со стандартами.
Понятие соответствия стандартам может показаться очевидным, нов прошлом все, в том числе производители браузеров, очень свободно обращались с H TM разметкой и сценариями. Мы заплатили за это необходимостью создавать сайты дважды, чтобы заставить их работать во всех браузерах. Я еще расскажу о веб-стандартах далее, поэтому сейчас не буду вдаваться в подробности. Достаточно сказать, что веб­
стандарты — ваши друзья. Все, что вы узнаете в этой книге, поможет вам двигаться в правильном направлении.
Дополнительны е источники информации
Авторитетное руководство по соблюдению стандартов, объясняющее, насколько это логично для бизнеса, — книга «Веб-дизайн по стандартам Джеффри Зельдмана (Н Т Пресс»).
Часть I. Начало работы
Прогрессивное улучшение
Прогрессивное улучшение
Со множеством браузеров появляется множество уровней поддержки веб­
стандартов. На самом деле, ни один браузер не соблюдает все стандарты на
100%, и всегда есть новые технологии, медленно набирающие обороты.
Кроме того, пользователи могут задавать собственные настройки, например отключать поддержку JavaScript. Суть в том, что мы имеем дело с широким спектром возможностей браузера, от базовой поддержки только H TM разметки до всех дополнительных функций.
Прогрессивное улучшение это одна из стратегий, помогающая справиться с неизвестными настройками браузера. При создании дизайна с прогрессивным улучшением вы начинаете с базового варианта, при котором контент и функциональность доступны даже для загрузки в самых урезанных версиях браузеров и вспомогательных устройств. Далее вы наслаиваете более современные функции для браузеров, которые могут их воспроизвести. В конце можно добавить некоторые красивые, но необязательные эффекты, такие как анимация или скругленные углы рамок, чтобы улучшить опыт взаимодействия с сайтом для пользователей с самыми передовыми браузерами.
Прогрессивное улучшение — это подход, который оживляет все аспекты дизайна и проектирования страницы, в том числе HTML, CSS и Стратегия верстки

Когда HTM документ записан в логическом порядке и все элементы имеют значимую разметку, его можно использовать в самых разнообразных средах просмотра, в том числе очень старых и еще только создаваемых браузерах, на мобильных и вспомогательных устройствах. Возможно, внешний вид документа будет отличаться, но важно то, что контент останется доступен. Это также гарантирует, что поисковые системы, такие как Google, правильно каталогизируют контент. Четкий документ и его точно и подробно описанные элементы являются основой доступности.
Стратегия стилизации
Различного опыта взаимодействия с сайтом можно добиться, просто воспользовавшись тем, как браузеры анализируют правила таблиц стилей. Не вдаваясь в излишние технические подробности, можно написать правило, которое сделает элемент фона красным, но также будет содержать стиль, добавляющий к нему красивый градиент (переход от одного цвета к другому) для браузеров, которые знают, как создавать градиенты.
Или вы можете использовать селекторы CSS для отображения определенных стилей только в последних версиях браузеров. Зная, что брау­
зеры просто игнорируют те свойства и правила, которые не понимают,
Прогрессивное улучшение это стратегия, позволяющая справиться с неизвестными настройками браузера.
ПРИМЕЧАНИЕ
Прогрессивное улучшение является оборотной стороной более старого подхода к работе с разнообразными браузерами, называемого отказоустойчивостью при котором вы сначала проектируете максимально улучшенный опыт взаимодействия, а потом создаете серию урезанных вариантов для браузеров, не поддерживающих полную версию.
Англ. термин — progressive enhancem ent (примеч. ред Англ. термин — graceful degradation (примеч. ред.)
Глава 3. Важные концепции для веб-дизайнера
вы можете смело использовать инновации, не ухудшая при этом работу старых браузеров. Просто необходимо помнить, что сначала следует прописывать базовые правила стилей, а затем добавлять улучшения, как только будут выполнены минимальные требования.
Стратегия сценариев — это язык сценариев, делающий веб-страницы интерактивными и динамическими (обновление контента налету или в ответ на ввод пользователя. Без него Всемирная паутина во многом походила бы на статичные буклеты. Как ив случаях с другими веб-технологиями, браузеры по-разному обрабатывают сценарии JavaScript (особенно на устройствах, отличных от настольного компьютера, и некоторые пользователи предпочитают совсем отключать поддержку JavaScript. Первое правило прогрессивного улучшения — убедиться, что основные функции, такие как ссылки со страницы на страницу или выполнение важных задач (например, предоставление данных с помощью форм) работают, даже если JavaScript выключен. Так вы обеспечиваете базовый опыт взаимодействия и улучшаете его, когда язык JavaScript доступен.
Дополнительны е источники информации

Статья Концепция прогрессивного улучшения (designform asters. in fo /p o sts/u n d erstan d in g -p ro g ressiv e-en h an cem en Статья
« P r o g r e s s iv e E n h a n c e m e n t
» (seren ity .su /b lo g /p o st/3 3 6 3 6 0 4 3 5 28/p ro g ressiv e-en h an ccm en Статья «Graceful Degradation» (Адаптивный веб-дизайн
По умолчанию большинство браузеров на небольших устройствах, таких как смартфоны и планшеты, сжимают веб-страницу до размеров экрана и предоставляют механизмы для масштабирования и перемещения по ней. Хотя технически все работает, это не очень удобно. Текст слишком мелкий, чтобы его прочесть, ссылки настолько малы, что по ним не попасть пальцем, а увеличение масштаба и панорамирование отвлекают.
Адаптивный веб-дизайн — это стратегия по предоставлению пользовательских макетов для устройств в зависимости от размера области просмотра (окна браузера). Хитрость адаптивного дизайна в том, что для всех устройств предоставляется один H TM документ, но применяются разные таблицы стилей в зависимости от размера экрана, чтобы обеспечить наиболее оптимизированный макет для конкретного устройства. Например при просмотре страницы на смартфоне текст отображается водной колонке с крупными ссылками для легкого нажатия.
Но когда та же самая страница просматривается в браузере на большом настольном компьютере, контент перегруппируется в несколько коло
Адаптивный веб-дизайн нок с традиционными элементами навигации. Как по волшебству Нона самом деле это просто каскадные таблицы стилей.)
Сообщество веб-дизайнеров активно обсуждает адаптивный веб-дизайн с тех пор, как Итан Маркотт впервые написал ввел это понятие в статье «Responsive Web Design» ( w w w .alistapart.com /articles/responsive- web-design/). Данный вид дизайна стал одним из основных инструментов, используемых при работе с неизвестным размером окна.
На рис. 3.3 показано несколько примеров адаптации сайта под размеры экрана монитора настольного компьютера, планшета и смартфона. Другие вдохновляющие примеры можно найти на сайте m ediaqueri.es. Попробуйте открыть один из вариантов дизайна в своем браузере, аза тем изменить размер окна на очень узкое или очень широкое и проанализировать, как при этом меняется макет.
Открытая библиотека изучения медицинской аппаратуры www.om Электронный журнал «Smashing Magazine» Адаптивный веб-дизайн -
стратегия для работы при неизвестных размерах
экрана.
Рис. 3.3. Адаптивные макеты сайтов меняются в зависимости от размера окна браузера
Глава 3. Важные концепции для веб-дизайнера
Адаптивный веб-дизайн
Специализированные мобильные сайты
Альтернативой одному адаптивному сайту станет проектирование дополнительного (вдобавок к основному) сайта с уникальным адресом, который будет запускаться с сервера в ответ на запрос, приходящий с мобильного устройства. В адресах мобильных сайтов, как правило, указывается префикс m или mobile. Для некоторых типов сайтов отдельная мобильная версия — лучшее решение, особенно если вызнаете, что посетители, заходящие с мобильных устройств, придерживаются иных моделей просмотра сайта, чем пользователи настольных компьютеров.
На специализированных мобильных сайтах наиболее часто запрашиваемые функции выделяются на первом экране, а многое излишней информации с сайта для настольного браузера (например, котировки акций) просто отбрасывается.
На рис. 3.4 сравниваются основной и мобильный сайты компании Walgreens в том виде, в каком они появились в середине 2012 года. Обратите внимание, что пользователям мобильных телефонов предлагается гораздо более узкий спектр возможностей.
Специализированный мобильный сайт может стать лучшим способом облегчить выполнение сложных задач пользователям смартфонов. Дело в том, что адаптивный веб-дизайн не является универсальным решением. Для сайтов, контент которых главным образом текстовый, небольшой настройки макета может быть достаточно для удобного чтения на всех устройствах. Для других сайтов и веб-приложений предпочтительным может оказаться совершенно иной вид.
Недостатком специализированного мобильного сайта является то, что объем работы увеличится более чем в два раза. Потребуется дополнительное планирование контента, проектирование шаблонов, затраты времени на производство и текущее обслуживание.
Но если это означает предоставление посетителям функций, которые им действительно нужны, сайт стоит вложений.
Ш pharmacy Ш ышр ша LiUii±
Tihfyt£*c±
fMMwMj
| V Pharm
acy
»J
(йГ Shop
>)
(0 Photo
•I
| 9 Find a Store
>1
jO Fm
d a Clim
e
*)
[ С W
eekly Ad
....>J
• W
et' Pirkuf ....
I Рис. Сравнение основного и специализированного мобильного сайтов

Адаптивный веб-дизайн помогает решить проблемы, связанные с макетом, но он не является панацеей от всех сложностей мобильного веб-дизайна. Чтобы обеспечить пользователям лучший опыт взаимодействия на выбранном ими устройстве, вам может потребоваться оптимизация, выходящая за пределы настройки внешнего вида сайта. Некоторые проблемы лучше решать, прибегая к помощи сервера для определения устройства и его возможностей, а затем принимать решения, что отправить обратно. Применяя прогрессивное улучшение, вы можете отобразить базовый вариант сайта во всех основных браузерах и на всех устройствах, и при этом создать расширенные параметры для тех устройств, которые смогут их использовать.
Для некоторых сайтов и сервисов, возможно, предпочтительнее создать отдельный мобильный сайт (см. врезку Специализированные мобильные сайты) с настраиваемым интерфейсом и набором функций, использующим возможности телефона, например геолокацию.
Часть I. Начало работы
Обеспечение доступности
При этом адаптивный дизайн хоть и не избавляет от всех проблем, все же является важной частью решения по формированию удовлетворительного опыта взаимодействия в широком круге браузеров.
Дополнительные источники информации
Я расскажу об адаптивном дизайне подробнее в главе 18, когда вы станете немного опытнее. Для дальнейшего изучения адаптивного дизайна я рекомендую следующие книги:

Начинающим дизайнерам необходимо прочитать книгу Итана
Маркотта Отзывчивый веб-дизайн» (Манн, Иванов и Фербер). Это короткая книга, идеально подходящая для начала изучения принципов работы адаптивного веб-дизайна итого, как применить его самостоятельно.

Книга Сначала мобильные Люка Вроблевски (Манн, Иванов и Фербер).
ПРИМЕЧАНИЕ
Даже специализированные мобильные сайты могут и должны выгодно применять адаптивные техники для настройки удобства работы с сайтом в зависимости от устройства.
Не обязательно выбирать одно из двух решений.
Обеспечение доступности
Говоря об огромном количестве браузеров, используемых сегодня, до сих пор мы касались только визуальных, управляемых с помощью указателя мыши или касаниями (жестами) пальцев. Важно, однако, иметь ввиду, что люди получают доступ ко Всемирной паутине различными путями — с помощью программ экранного доступа, ввода шрифтом Брайля, экранных луп, джойстиков, ножных педалей итак далее.
Веб-дизайнеры должны так проектировать страницы, чтобы создавать как можно меньше барьеров на пути получения информации, независимо от возможности пользователей и устройств. Другими словами, вы должны создавать дизайн с учетом доступности.
Хотя описанные методы и стратегии предназначены для пользователей с ограниченными возможностями, такими как ухудшения зрения или нарушения опорно-двигательного аппарата, они могут быть также полезны другим пользователям с неудобными средствами веб-серфинга. Например получающим доступ с портативных устройств, или имеющим медленное коммутируемое подключение к Интернету, или отключившим изображения и JavaScript. Доступные сайты также более эффективно индексируются поисковыми системами, например Google. Дополнительные усилия, затраченные на создание доступного веб­
сайта, будут вознаграждены.
Существуют четыре основные категории недостатков, которые влияют на то, как люди взаимодействуют с компьютерами и информацией в них.
Нарушения зрения. Люди с нарушениями зрения могут пользоваться вспомогательными устройствами, такими, как программы экранного доступа, дисплей Брайля или экранная лупа, чтобы прочитать текст на
Глава 3. Важные концепции для веб-дизайнера
Обеспечение доступности
Национальный стандарт Российской Федерации по доступности ГОСТ Р Следующие 10 кратких рекомендаций обобщают концепцию создания документов с расширенными возможностями доступа. Графические файлы обязаны сопровождаться текстом, поясняющим изображение. Таблицы не должны иметь большое количество вложений.
Веб-страницы не должны иметь фреймовую структуру. При наличии гиперссылки необходимо текстовое описание объекта, на который она указывает. Элементы форм веб-страниц обязаны сопровождаться текстовым описанием. Часто посещаемые страницы по своему объему не должны превышать 2 - 3 экранов текста. Число ссылок на странице должно быть небо лее 15.
8. Каждый графический файл следует снабжать поясняющим текстом в атрибуте
alt.
9. При размещении элементов необходимо предусмотреть возможность перехода на страницу с аналогичной текстовой информацией. Информация, представленная в файлах формата
PDF в виде текста, должна корректно озвучиваться с помощью программ экранного доступа.
Полностью прочитать текст стандарта вы сможете, открыв документ G0ST-52872-2007.pdf с диска, прилагающегося к книге.
экране. Они также могут использовать функцию масштабирования текста в браузере, чтобы сделать шрифт достаточно крупным для чтения.
Н аруш ения опорно-двигательного аппарата. Пользователи с нарушениями опорно-двигательного аппарата могут использовать для навигации во Всемирной паутине и ввода информации специальные устройства, такие как модифицированные мыши и клавиатуры, педали и джойстики.
Наруш ения слуха. Пользователи с нарушениями слуха не будут слышать звуковое сопровождение мультимедийных файлов, поэтому необходимо предоставить им альтернативы, например транскрипции ау­
диофайлов или субтитры для видеороликов.
Когнитивные нарушения. Пользователям с нарушениями памяти, затруднениями в понимании прочитанного, сложностями при решении проблем и концентрации внимания удобно, когда сайты разработаны простои понятно. Эти качества полезны любым пользователям вашего сайта.
В связи с необходимостью сделать Всемирную паутину удобной для всех, ее консорциум запустил программу Инициатива по обеспечению веб-доступности» (WAI, Web Accessibility Initiative). Сайт WAI (www. w 3.org/W A I) — отличная отправная точка для получения дополнительной информации о доступности веб-сайтов. Один из документов, подготовленных WAI, направленна то, чтобы помочь разработчикам создавать доступные сайты — Руководство по обеспечению доступности веб-контента (Web C ontent Accessibility Web C ontent Accessibility
Guidelines, WCAG). С ним можно ознакомиться по адресу w 3c.org. ru /w p -c o n te n t/u p lo a d s /2 0 1 1 /1 0 /русский-авторизованны й-перевод-
WCAG.pdf. Правительство РФ выпустило национальный стандарт по
Часть I. Начало работы
Производительность сайта доступности (см. врезку Национальный стандарт Российской Федерации по доступности ГОСТ Р 52872-2007»). Всем сайтам выгодно придерживаться этих руководящих принципов, но если вы разрабатываете правительственный сайт, их соблюдение является обязательным.
Еще одна разработка консорциума Всемирной паутины — Инициатива по обеспечению веб-доступности многофункциональных веб­
приложений (WAI-ARIA, Accessible Rich Internet Applications) — спецификация, в которой рассматривается доступность веб-приложений, содержащих динамически создаваемый контент, сценарии и расширенные элементы интерфейса, которые особенно сложны при использовании вспомогательных устройств.
Рекомендация ARIA описывает ряд ролей для контента и виджетов, которые авторы могут явно к ним применить с помощью атрибута
role. Роли включают в себя меню, индикаторы процесса, ползунковые регуляторы, таймеры, подсказки, и т. па также добавляют расширенный слой семантики, если это необходимо. Чтобы ознакомиться с полным списком ролей, перейдите по адресу w w w .w 3 .o rg /T R /w ai-aria/ Дополнительные источники информации
Следующие ресурсы пригодятся для дальнейшего изучения доступности веб-сайтов:

Ресурс Web Accessibility Initiative (WAI), ww w.w3.org/W A Ресурс WebAIM, Книга Универсальные принципы дизайна Уильяма Лидвелла, Кристины Холден и Джилл Батлер (Питер, Производительность сайта
Количество пользователей, выходящих в Интернет через медленные коммутируемые соединения, сокращается (менее 10% в России на момент написания книги, а процент людей, использующих для выхода в Интернет мобильные устройства, быстро растет, и ожидается, что в конечном итоге их число превысит количество пользователей сна стольными компьютерами и ноутбуками.
Более 70% пользователей в России получают доступ в Интернет посредством широкополосного подключения, и эта цифра постоянно увеличивается. Доля пользователей Интернета с мобильными устройствами или по беспроводным каналам связи доходит до 46%**.
* Поданным сервиса Руметрика, опубликованным на странице h ostin fo.
r u /a r t ic le s /e v e n ts /1 5 6 1 /
** n e t.c o m p u le n ta .r u /7 2 7 3 0 6 Глава 3. Важные концепции для веб-дизайнера
Если у вас есть смартфон, то вызнаете, как раздражает ожидание полной загрузки страницы через мобильное соединение.
Однако производительность сайта важна независимо оттого, каким способом пользователи получают к нему доступ. Исследование, проведенное корпорацией Google в 2009* году, показало, что увеличение времени загрузки страницы результатов поиска всего на 100-400 мс, привело к снижению числа поисков на (0,2-0,6% ). Компания Amazon, com показала, что сокращение времени загрузки страницы всего на
100 мс привело к росту доходов на 1%**. Другие исследования показывают пользователи ожидают, что загрузка сайта займет менее двух секунд, и почти треть аудитории уйдет с вашего сайта на другой, если загрузка длится дольше. Кроме того, эти люди вряд ли вернутся. Корпорация Google учитывает скорость загрузки сайта при ранжировании результатов поиска — если ваш сайт грузится медленно, вряд ли он окажется на желанной первой странице. Вывод производительность сайта вплоть до миллисекунды) очень важна.
Существует множество приемов для улучшения производительности вашего сайта, и их можно разделить на две категории ограничение размеров файлов и сокращение числа запросов, посылаемых на сервер. Приведенный ниже список — это лишь поверхностные меры по оптимизации сайта, но он даст вам общее представление о том, что можно сделать.

Оптимизация изображений для получения минимального возможного размера файла без потери качества. О ней вы узнаете в главе Минимизация размера документов H TM L и CSS путем удаления лишних пробелов между символами и переводов строк.

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

Запрет загрузки неиспользуемых активов (например, изображений, сценариев или библиотек Сокращение количества запросов, посылаемых браузером на сервер (известных как НТТР-запросы).
Каждое обращение к серверу в виде H T T P -запроса занимает несколько миллисекунд, и эти миллисекунды действительно способны повлиять на производительность. Все маленькие виджеты Twitter, кнопки лай- ков» Facebook и рекламные объявления могут отсылать десятки запросов на сервер. Вы удивитесь, узнав, сколько запросов на сервер отправляет самый простой веб-сайт.
* googleresearch.blogspot.com/2009/06/speed-matters.html
** Статистические данные взяты из презентации «M ake Data M atter» Грэга Л индэна (С тэнфордский Университет, 2006)

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

(View) и выберите Инструменты => Инструменты разработчика => Developer Tools). В нижней части окна браузера откроется панель. Выберите вкладку Network Сеть) на панели инструментов разработчика и перезагрузите страницу. На диаграмме (обычно называемой диаграммой водопада отображаются все сделанные запросы и загруженные активы. Столбцы справа показывают количество времени в миллисекундах, потраченного на каждый запрос. В нижней части графика можно увидеть сводную информацию о количестве поданных запросов и общий объем переданных данных.
На рис. 3.5 показана часть диаграммы водопада для определения производительности сайта. Вы можете полюбопытствовать относительно любого сайта во Всемирной паутине s m n ts
R esource*
t
N e tw ork
Source*
Tim eine
Profile*
A u d i*
Console
1
9
Name
Path
Method Ш Ш 0 Г o n le n l
T,rt"
Timeline
Latency
, 4. ,
3
34 1
*ill esc*
w w w .» p liff-
4
< ir u .u c o i.c o ш u ru .u c o i.c o m
CvgH
*26 u coz п в М тд та m r x .|i ? р « 2 4 с » С -36 u-mrx addftow ru b a te .C S S
•26 u c o i net/ere
Ieyer2.c*s
•26 u coz.net/srt
|qu«ry-1.7.2.|*
•26 u coz net/src
j uttghtbox.ci*
3
*26 uCOl iwl/trc/utghtbox
uUghtboxjs
J y *26 u coz netfsre/utghtbox or or or or e m m _ lo g o .g if w w w bo W e» oft com flm sges u w n d
.|*?2
•26 u coz n e W c
2.Q ЛИ arser
мШлючтч
Parser
P arser
Psr«or
iStkU-ausu.uiai'
P a rse r m sge/gif taxt/tftr text/css
Parser
ыШмшш ■
Parser
SM
ff-flllfUttM
f,'
Par »er
Iflfcfl-flUfU.UMI.'
Pareer мИЬашмаь tfltff-ftttftt.U M i.'
Parser
272 6 0 6 361X6 37 5 KB
5 6 4 6 232 В 7 X6

12K B
336 6 3 7 2 6
4 6 X 6
186X 6 33 2 X 8 9 2 6 X6 2 0X6
6 0 X 6
7 8 X 6 2 1 6 X 6 9 0X 6
8 6 X 6
39 2 X6 223 X 8
3 6 X 8
13 2 X 6 367 6
S6B
17 m*
17 ms
♦02
m*
163 m*
364
m i
382 m s
94 m*
92 m*
206 m»
204 ms
87 m t
85 ms
123 m*
124 ms
1.34*
154*
328 ms
322 ms
53 m*
47 m*
302 m*
300 ms
• ® CD
Docum ents
Stylesheets
Im ages
Scripts
92 m*
XHR
Fonts
W ebSocKets Рис. 3.5. Подобные диаграммы водопада, создаваемые на вкладке
Network браузера Chrome
, показывают вам индивидуальные запросы, посылаемые на сервер веб-страницей
, и количество времени, которое занимает каждый запрос
Я не буду уделять много внимания производительности сайта в этой книге, но хочу, чтобы вы, занимаясь веб-дизайном, помнили о томна сколько важно придерживаться как можно меньших размеров файлов и избавляться от ненужных запросов на сервер.
Глава 3. Важные концепции для веб-дизайнера
Дополнительные источники информации
Существуют и другие методы, слишком технические для этой книги и, честно говоря, для меня. Думаю, что если вычитаете эту книгу, то, вероятно, не совсем готовы стать мастером по повышению производительности сайта. Но когда вы захотите этим заняться, можете посетить сайт корпорации Google (d evelopers.google.com / sp eed /?h l= ru -R U ), который отлично подходит для начала изучения проблемы оптимизации сайтов. На нем собраны превосходные учебники и статьи, а также инструменты для измерения скорости сайта.
Другие инструменты увеличения производительности сайта
Попробуйте применить некоторые из этих инструментов для тестирования производительности веб-сайта:

WebPagetest (w ebpagetest.org) — инструмент доступный для общего пользования бесплатно и с открытым исходным кодом. Сайт
WebPagetest отображает диаграмму водопада, снимок и другие статистические данные вашего сайта.

Бесплатный инструмент YSlow (yslow .org) компании Yahoo! анализирует сайт в соответствии с 23 правилами веб-производительности, затем присваивает сайту класс и выдает предложения по улучшению сайта.

Для мобильных сайтов попробуйте программу MobiTest компании
Blaze (w w w .blaze.io/m obile/) — бесплатный инструмент для тестирования производительности веб-сайта на различных мобильных устройствах.

Существует также ряд эмуляторов медленного подключения к Интернету, позволяющих вам почувствовать опыт взаимодействия пользователей при далеко неидеальной скоростью работы сети (w w w .dallaw ay.com /sloppy) — веб-инструмент, на странице которого вы вводите адрес сайта и выбираете скорость работы модема (а потом ждете, ждете. Пользователи OS X могут также попробовать программу Slowy (slo w ya p p .co m ч /
РАЗМЕТКА HTML ДЛЯ СТРУКТУРИЗАЦИИ
ЧАСТЬ II
ч

В этой части
1   2   3   4   5   6   7   8

перейти в каталог файлов


связь с админом