Разработка сайтов для любых браузеров и устройств


Скачать Фрайн Б. - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств

mexalib.com

Фрайн Б.

Автор Фрайн Б.
Издательство Питер
Год 2014
Формат PDF
Рейтинг книги

0.00

(оценок&nbsp&lt&nbsp5)

0 10

Сегодня как никогда остро стоит проблема адаптивного веб-дизайна. Все больше планшетных компьютеров, смартфонов и даже телевизоров используется для выхода в Интернет. Разработчикам веб-страниц требуется принимать во внимание огромное разнообразие размеров экранов, а также учитывать особенности соответствующего пользовательского взаимодействия. Адаптивный веб-дизайн позволяет наилучшим образом отобразить содержимое сайтов на экранах устройств, используемых для просмотра. При этом веб-страницы будут хорошо смотреться на дисплеях не только современных устройств, но и тех, что появятся в ближайшее время.  Начните разрабатывать сайты в соответствии с новой методологией адаптивного веб-дизайна, благодаря чему они будут красиво отображаться на экранах любых размеров. Читайте эту книгу, попутно создавая и улучшая адаптивные веб-дизайны с использованием HTML5 и CSS3. Вы научитесь применять на практике новые технологии и методики, призванные стать инструментами будущего для веб-разработчиков клиентских приложений.

В этой книге описаны все основные средства языка C++ — от элементарных понятий до супервозможностей. После рассмотрения основ программирования на C++ (переменных, операторов, инструкций управления, функций, классов и объектов) читатель освоит такие более сложные средства языка, как механизм об...

2010 год

10.54 МБ

9.6

скачиваний: 10596

В мире постоянно кто-то сталкивается с такими же проблемами программирования, которые возникают и у вас. Многие разработчики решают совершенно идентичные задачи и находят похожие решения. Если вы не хотите изобретать велосипед, используйте готовые шаблоны (паттерны) проектирования, работе с которыми...

2011 год

30.42 МБ

9.7

скачиваний: 5253

Книга представляет собой пособие, позволяющее быстро освоить приемы разработки и модификации прикладных решений на платформе "1С:Предприятие 8.2". На примере создания реального прикладного решения показана структура различных объектов системы, их назначения и методика использования. При...

2009 год

56.65 МБ

8.7

скачиваний: 10740

Первое издание этой книги вышло в свет во время проведения конференции Tech-Ed в 2001 г. в Атланте (шт. Джорджия). На тот момент платформа .NET пребывала в стадии бета-тестирования. Это вовсе не означает, что ранние издания этой книги не приносили пользу – так или иначе, но книга стала финалис...

2010 год

20.7 МБ

9.3

скачиваний: 8142

Такие известные компании, как Google и Intel, Cisco и Hewlett-Packard, используют язык Python, выбрав его за гибкость, простоту использования и обеспечиваемую им высокую скорость разработки. Он позволяет создавать эффективные и надежные проекты, которые легко интегрируются с программами и инструмент...

2011 год

12.21 МБ

8.6

скачиваний: 6430

Книга является общепризнанным руководством для изучения языка С, который был в свое время разработан специально как язык реализации операционной системы UNIX. Приводится полное описание языка, ориентированное на его практическое изучение. Кроме того, дополнительно излагается C++ - язык, являющийся л...

2009 год

53.4 МБ

8.8

скачиваний: 5187

Рассмотрена разработка программ для мобильных устройств под управлением операционной системы Google Android. Приведены базовые сведения о платформе Android. Описано программное обеспечение, необходимое для разработки Android-пpилoжeний. Рассмотрены основные компоненты приложений, использование базов...

2011 год

13.47 МБ

8.3

скачиваний: 5353

Книга является одним из самых популярных в мире учебников по C++. Характерной ее особенностью является "раннее введение" в классы и объекты, т. е. начала объектно-ориентированного программирования вводятся уже в 3-й главе, без предварительного изложения унаследованных от языка C элементов ...

2008 год

18.49 МБ

9.2

скачиваний: 11281

Книга Герберта Шилдта «Java . Полное руководство» (Java SE 7, 8-е издание) предназначена для всех программистов — как для новичков, так и для профессионалов. Начинающий программист найдет в ней подробные пошаговые описания и множество чрезвычайно полезных примеров. А углубленное ра...

2012 год

19.38 МБ

6.3

скачиваний: 6433

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

2012 год

132.25 МБ

7.6

скачиваний: 4985

HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств

Глава 1. Основы адаптивного веб-дизайна 20 Итак, вперед к неизведанному 20 Определение адаптивного веб-дизайна 21 Установка уровней поддержки браузеров 21 Первый пример придания адаптивности 24 Наш исходный файл HTML 24 Укрощение изображений 27 Ввод медиазапросов 30 Несовершенство нашего примера 35 Резюме 36

Глава 2. Медиазапросы — поддержка различных окон просмотра 37Зачем в адаптивном веб-дизайне нужны медиазапросы 38Синтаксис медиазапроса 39Объединение медиазапросов 40Медиазапросы с использованием @import 41Медиазапросы в CSS 41Что можно тестировать с помощью медиазапросов 42Использование медиазапросов для изменения дизайна 43В медиазапрос может быть заключен любой код CSS 45Медиазапросы для HiDPI-устройств 46Рассмотрение аспектов организации и разработки медиазапросов 46Привязка различных CSS-файлов с помощью медиазапросов . 46Практические аспекты разделения медиазапросов 47Вложение медиазапросов путем их встраивания 48Как поступать — объединять медиазапросы или же записывать их там,где они пригодятся? 48Метатег viewport 50Спецификация Media Queries Level 4 51Медиасвойство использования сценариев 52Медиасвойства, связанные с взаимодействием со страницей 53Медиасвойство hover 54Медиасвойства среды 54Резюме 55

Глава 3. Динамически изменяемые разметки и адаптивные изображения 56Преобразование дизайна с фиксированными размерами в пикселах в подстраиваемую пропорциональную разметку 57Зачем нам нужен Flexbox 61Линейные блоки и свободное пространство 62Плавающие элементы (floats) 62Table и table-cell 62Представляем Flexbox 63Тернистый путь к сегодняшнему Flexbox 63Браузерная поддержка Flexbox 63Разбираемся с возможностью динамического изменения 65Текст, безупречно выровненный по вертикали 65Смещение элементов 67Изменение порядка следования элементов 68Различные разметки Flexbox внутри разных медиазапросов 69inline-flex 70Свойства выравнивания, имеющиеся у Flexbox 71Свойство flex 76Простой зафиксированный подвал 78Изменение порядка следования исходных элементов 79Краткое заключение по Flexbox 84Адаптивные изображения 85Проблема, присущая адаптивным изображениям 85Простое переключение разрешения с помощью srcset 86Более совершенный вариант переключения с использованиематрибутов srcset и sizes 87Вы что, сказали, что браузер может предпочесть одно изображениедругому? 88Режиссура, применяемая в отношении элемента picture 88Резюме 89

Глава 4. Использование HTML5 в целях разработки адаптивного веб-дизайна 91Разметку на HTML5 понимают все современные браузеры 92Как правильно написать начало страницы на HTML5 93doctype 93Тег HTML и атрибут lang 93Указание альтернативных языков 94Кодировка символов 94Покладистость HTML5 94Разумный подход к разметке на HTML5 95Приветствую могучий тег <a> 96Новые семантические элементы в HTML5 96Элемент <main> 97Элемент <section> 98Элемент <nav> 98Элемент <article> 98Элемент <aside> 99Элементы <figure> и <figcaption> 99Элементы <details> и <summary> 100Элемент <header> 101Элемент <footer> 102Элемент <address> 102Замечания относительно элементов <h2> — <h6> 102Семантика HTML5 на текстовом уровне 103Элемент <b> 103Элемент <em> 104Элемент <i> 104Устаревшие функции HTML 104Практическое применение элементов HTML5 105Использование WCAG и WAI-ARIA для повышения доступностивеб-приложений 106Руководство по обеспечению доступности веб-контента (WCAG) 106Стандарт предоставления возможности полноценного использованияИнтернета людьми с физическими ограничениями (WAI-ARIA) 107Если вы не в состоянии запомнить более одной рекомендации 107Развитие стандарта ARIA 108Медиавозможности, встроенные в HTML5 108Добавление видео и аудио средствами HTML5 109Работа audio и video практически ничем не различается 111Адаптивное HTML5-видео и iFrames 111Замечание относительно приоритетности автономной работы 112Резюме 113

Глава 5. CSS3. Селекторы, разметка, цветовые режимы и новые возможности 114Разве можно знать абсолютно все? 115Анатомия правила CSS 115Простые и полезные трюки CSS 115Использование CSS при создании многоколоночных разметокдля адаптивных конструкций 116Перенос слов на новые строки 119Усечение текста с добавлением многоточия 119Создание панелей, прокручивающихся по горизонтали 120Предоставление возможности разветвления функций в CSS 122Запросы возможностей 123Комбинирование условий 124Modernizr 125Новые селекторы в CSS3 и порядок их использования 126Селекторы атрибутов в CSS3 126Селекторы CSS3, соответствующие подстрокам значений атрибутов 127Особенность выбора по атрибутам 129Селекторы атрибутов позволяют выбрать элементы,чьи идентификаторы и классы начинаются с цифр 130Структурные псевдоклассы CSS3 130Селектор :last-child 131Селекторы nth-child 131Усвоение порядка работы nth-правил 132Выбор на nth-основе в адаптивных веб-конструкциях 135Селектор отрицания (:not) 137Селектор пустого элемента (:empty) 138Работа с :first-line независимо от размеров окна просмотра 139Пользовательские свойства и переменные в CSS 139CSS-функция calc 140Селекторы CSS Level 4 141Псевдокласс :has 141Адаптивные меры длины, выражаемые в процентных отношенияхприменительно к окнам просмотра (vmax, vmin, vh, vw) 141Шрифтовое веб-оформление 142CSS-правило @font-face 142Реализация веб-шрифтов с помощью @font-face 143Предостережение, касающееся пользовательского шрифтовогооформления с применением @font-face в адаптивныхвеб-конструкциях 145Новые форматы цвета в CSS3 и альфа-прозрачность 146Цвет в формате RGB 146Цвет в формате HSL 147Альфа-каналы 148Работа над цветовым оформлением с CSS Color Module Level 4 149Резюме 149

Глава 6. Создание эстетически привлекательных эффектов средствами CSS3 150Создание теней для текста средствами CSS3 151Если размытие не нужно, его значение можно опустить 152Получение нескольких теней для текста 152Создание теней для блоков 152Тень внутри элемента 153Создание нескольких теней 153Понятие протяженности 154Градиентные фоны 155Запись линейного градиента 155Радиальные градиентные фоны 158Удобные ключевые слова распространения для задания размеровадаптивных конструкций 159Повторяющиеся градиенты 160Узоры из градиентных фонов 160Использование нескольких фоновых изображений 162Размер фона 163Позиция фона 163Краткий метод записи фона 164Фоновые изображения с высоким разрешением 165CSS-фильтры 165Доступные CSS-фильтры 167Объединение CSS-фильтров 171Предупреждения, касающиеся CSS-производительности 172Резюме 174HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств

Глава 7. Использование SVG для достижения независимости от разрешения 175Краткая история SVG 177Графика, представляющая собой документ 178Корневой элемент SVG 179Пространство имен 180Теги title и desc 180Тег defs 180Элемент g 180Фигуры SVG 181SVG-пути 181Создание SVG-графики с помощью популярных пакетов и сервисовредактирования изображений 181Вставка SVG-графики в веб-страницы 182Использование тега img 183Использование тега object 183Вставка SVG-графики в качестве фонового изображения 184Краткое отступление по поводу URI-идентификаторов данных 185Создание спрайтов изображений 186Непосредственная вставка SVG 187Повторное использование графических объектов из символов 187Встраиваемая в код SVG-графика позволяет задавать различныецвета в разных контекстах 189Повторное использование графических объектов из внешнихисточников 190Что можно делать с любым методом вставки SVG-данных 191Дополнительные возможности и особенности технологии SVG 192SMIL-анимация 193Задание стилей SVG с помощью внешней таблицы стилей 194Задание стилей SVG с помощью внутренних стилей 195Анимация SVG-графики с помощью CSS 195Анимация SVG-графики с помощью JavaScript 197Оптимизация SVG 199Использование SVG в качестве фильтров 200Заметки по медиазапросам внутри SVG 202Советы по внедрению 203Дополнительные ресурсы 204Резюме 204

Глава 8. Переходы, преобразования и анимация 205Что такое CSS3-переходы и как ими можно воспользоваться 206Свойства перехода 208Краткая форма записи перехода с помощью свойства transition 208Переходы различных свойств за разные периоды времени 209Основные сведения о функциях развития процесса по времени 209Развлечение с переходами на адаптивных сайтах 211CSS3 2D-преобразования 211Масштабирование (scale) 212Перемещение (translate) 213Вращение (rotate) 215Наклон (skew) 216Матрица (matrix) 216Свойство transform-origin 217CSS3 3D-преобразования 219Свойство transform3d 222Использование преобразований при постепенном усложнении 223Создание эффектов анимации средствами CSS3 226Резюме 229

Глава 9. Обуздание форм с помощью HTML5 и CSS3 231Формы HTML5 231Основные сведения о компонентах формы HTML5 233placeholder 233required 234autofocus 235autocomplete 235Атрибут list и связанный с ним элемент datalist 236Типы вводимой информации, определяемые в HTML5 237email 238number 239url 240tel 242search 243pattern 243color 244Ввод даты и времени 244range 247Как воспользоваться полифиллами для тех браузеров, которыене поддерживают новые свойства 248Придание формам HTML5 стилевого оформления с помощью CSS3 249Обозначение полей, требующих обязательного заполнения 252Создание эффекта заливки фона 254Резюме 255

Глава 10. Подходы к адаптивному веб-дизайну 256Обкатка дизайна в браузере на самых ранних стадиях 257Просмотр и обкатка дизайна на реальных устройствах 258Использование принципа постепенного усложнения 258Определение матрицы браузерной поддержки 259Функциональное, но не эстетическое единообразие 260Выбор поддерживаемых браузеров 260Создание нескольких уровней пользовательского восприятия 261Привязка контрольных точек CSS к JavaScript 261Отказ от использования сред разработки CSS при создании конечногопродукта 263Выработка наиболее практичных решений 264Использование как можно более простого кода 267Скрытие, показ и загрузка содержимого для всевозможных окон просмотра 267Средства контроля качества кода 269Производительность 270В преддверии великих перемен 271Резюме 272

www.htbook.ru

Книга «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.»

Привет, Хаброжители! У нас вышло второе издание книги Бена Фрэйна:

Книга охватывает все важные особенности адаптивного веб-дизайна. Методология адаптивного веб-дизайна расширяется в ней за счет применения новейших, наиболее полезных технологий, предоставляемых HTML5 и CSS3, как никогда ранее повышающих компактность и облегчающих сопровождение создаваемых конструкций. В книге также даются объяснения самым востребованным и передовым методам написания и предоставления кода, изображений и файлов.

Если вы в состоянии разобраться в коде HTML и CSS, значит, вам также под силу освоить создание конструкций на основе адаптивного веб-дизайна.

О чем эта книга

Глава 1 «Основы адаптивного веб-дизайна» представляет собой краткий обзор ключевых составляющих в создании программных продуктов, отвечающих требованиям адаптивного веб-дизайна. Глава 2 «Медиазапросы — поддержка различных окон просмотра» охватывает все, что нужно знать о медиазапросах CSS: их возможности, варианты синтаксиса и различные способы применения.

Глава 3 «Динамически изменяемые разметки и адаптивные изображения» показывает, как создавать код пропорциональных разметок и адаптивных изображений, и содержит детальное исследование разметок, создаваемых с помощью Flexbox.

Глава 4 «Использование HTML5 в целях разработки адаптивного веб-дизайна» охватывает все семантические элементы HTML5, семантику текстового уровня и вопросы обеспечения доступности веб-продуктов. В ней также рассматриваются методы вставки видео и аудио в ваши страницы с использованием средств HTML5.

Глава 5 «CSS3. Селекторы, разметка, цветовые режимы и новые возможности» позволяет разобраться с безграничными возможностями CSS: селекторами, установками цветовых решений в форматах HSLA и RGBA, веб-оформлением, относительными единицами измерений окон просмотра и многим другим.

Глава 6 «Создание эстетически привлекательных эффектов средствами CSS3» охватывает CSS-фильтры, блоковые тени, линейные и радиальные градиенты, множественные фоновые изображения и способы нацеливания фоновых изображений на устройства с высоким разрешением экрана.

Глава 7 «Использование SVG для достижения независимости от разрешения» содержит все необходимые объяснения по использованию SVG-графики внутри документов и в качестве фоновых изображений, а также дает описания способов взаимодействия с ними с помощью JavaScript.

Глава 8 «Переходы, преобразования и анимация» дает информацию, как привести все в движение с помощью CSS, и содержит исследование способов организации взаимодействия и анимации элементов с использованием CSS.

Глава 9 «Обуздание форм с помощью HTML5 и CSS3» показывает, что такой нелегкий во все времена вопрос, как работа с формами, существенно упростился с появлением самых последних свойств HTML5 и CSS3.

Глава 10 «Подходы к адаптивному веб-дизайну» содержит исследование основных вопросов, требующих разрешения, прежде чем можно будет приступать к непосредственной разработке адаптивного веб-дизайна, а также целую подборку самых актуальных мудрых мыслей, призванных вдохновить вас на увлекательнейшее занятие — создание адаптивных веб-конструкций.

Для кого написана эта книга

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

Чтобы следовать за авторской мыслью, нужны лишь некоторые познания в HTML и CSS, а все, что требуется знать об адаптивном веб-дизайне и создании качественных сайтов, включено в эту книгу!

Об авторе

Бен Фрэйн (Ben Frain) занимается веб-дизайном и разработкой веб-приложений с 1996 года. В настоящее время он работает ведущим разработчиком пользовательского интерфейса в компании Bet365.

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

О рецензентах

Эстебан С. Эбэйт (Esteban S. Abait) — разработчик архитектуры программных продуктов и бывший аспирант. Имеет опыт разработки архитектуры сложных программных продуктов и планирования работы по их созданию. Был штатным и внештатным работником в компаниях Cisco, Intuit и Southwest. Работал с различными технологиями, в частности Java, PHP, Ruby и Node.js. В последние годы проявлял особый интерес к разработке веб-приложений, приложений для мобильных устройств и к REST API-интерфейсам. Разработал несколько довольно объемных веб-приложений с использованием JavaScript. Кроме того, он создавал методические рекомендации по REST-технологиям на основе оценок клиентов. Разрабатывал сайты с высоким объемом трафика, в которых использовал такие ключевые для масштабирования технологии, как репликация, сегментирование и распределенное кэширование данных.

В настоящее время Эстебан работает главным инженером компании Globant. В этой должности он добивается сдачи проектов в срок с обеспечением наивысшего качества конечного продукта. Он также занимается разработкой обучающих курсов по созданию программных продуктов и проводит совещания с разработчиками программных средств. Кроме того, Эстебан работает выездным консультантом по вопросам веб-технологий.

Компания Globant относится к новому поколению поставщиков технологических услуг, нацеленных на выработку инновационных программных решений с использованием новых технологий и тенденций. Globant сочетает в своей деятельности жесткость в вопросах проектирования и технических решений, характерную для поставщиков сервисов информационных технологий, с творческим и культурным подходом, присущим агентствам по внедрению цифровых технологий. В компании Globant выдерживаются четкие пропорции инженерных наработок, дизайна и инноваций.

Кристофер Скотт Эрнандес (Christopher Scott Hernandez), будучи по профессии дизайнером, стал разработчиком веб-технологий, начав с того, что в 1996 году создал для своего отца первый в Интернете сайт по обивке катеров. После этого он стал передавать свой опыт мелким и крупным компаниям, поработав над наиболее посещаемыми в мире сайтами, включая eBay, LinkedIn и Apple.

Был техническим редактором книги HTML5 Multimedia Development Cookbook, вышедшей в Packt Publishing. Является заядлым читателем и любителем книг. Когда не занимается расстановкой пикселов и написанием кода, любит проводить время с женой и дочерью, знакомясь с парками и пешеходными тропами красивого города Остина в штате Техас.

Мовис Ледфорд (Mauvis Ledford) занимается комплексным созданием и техническим руководством компаний, специализирующихся в области веб-технологий, мобильных веб-технологий и создания приложений, масштабируемых в облачных сервисах.

Работал в компаниях Disney Mobile, Skype, Netflix, и многих других молодых компаниях в Сан-Франциско, Нью-Йорке и их окрестностях. В настоящее время он является техническим директором в недавно созданной компании Pathbrite, занимающейся разработкой образовательных технологий и специализирующейся на создании бесплатных адаптивных мультимедийных электронных портфолио и цифровых резюме для всех желающих. Вы также можете воспользоваться ее услугами, если зайдете на сайт.

Мовис также был техническим редактором первого издания книги Responsive Web Design with HTML5 and CSS3, вышедшей в Packt Publishing, и книги Building Hybrid Android Apps with Java and JavaScript, вышедшей в O’Reilly Media.

Софи Уильямс (Sophie Williams) — весьма взыскательный человек, увлекающийся дизайном. Имеет ученую степень в области графического дизайна и в настоящее время работает веб-дизайнером и разработчиком пользовательского интерфейса в компании www.bet365.com. Несмотря на любовь к созданию дизайна веб-приложений, в ее сердце всегда остается особый уголок для печатных изданий. В свободное время она любит выпекать небольшие кексы, экспериментировать в области декоративно-прикладного искусства и склонна к раздаче указаний (тем, кто к ней прислушивается), когда что-нибудь в реальном мире идет не так, как ей нравится.

» Более подробно с книгой можно ознакомиться на сайте издательства » Оглавление » Отрывок

Для Хаброжителей скидка 25% по купону — Фрэйн.

habrahabr.ru

HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств

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

Начните разрабатывать сайты в соответствии с новой методологией адаптивного веб-дизайна, благодаря чему они будут красиво отображаться на экранах любых размеров. Читайте эту книгу, попутно создавая и улучшая адаптивные веб-дизайны с использованием HTML5 и CSS3. Вы научитесь применять на практике новые технологии и методики, призванные стать инструментами будущего для веб-разработчиков клиентских приложений.

Если вы решили, что вам необходимо создать мобильную версию вашего сайта, не торопитесь, подумайте еще! Адаптивный веб-дизайн позволит вам разработать единый вариант сайта, который будет отлично смотреться на экранах смартфонов, настольных компьютеров и другой подобной техники. Дизайн такого сайта будет легко приспосабливаться под определенный размер пользовательского экрана, обеспечивая наиболее качественное взаимодействие, возможное на устройствах как сегодняшнего, так и завтрашнего дня.

Эта книга — исчерпывающее практическое руководство по тому, как сделать адаптивным имеющийся дизайн с фиксированной шириной. Кроме того, в ней описываются новейшие и самые полезные методики, обеспечиваемые HTML5 и CSS3 и позволяющие сделать дизайн сайта более компактным и удобным в сопровождении, чем когда-либо прежде. В этой книге также разъясняются общие и наиболее эффективные методы написания и доставки кода, изображений и файлов.

Если вам понятны HTML и CSS, то вы сможете создавать адаптивные веб-дизайны.

В главе 1 «Знакомство с HTML5, CSS3 и адаптивным веб-дизайном» поясняется, что такое адаптивный веб-дизайн, приводятся примеры таких дизайнов, а также подчеркиваются преимущества и эффект экономии от использования HTML5 и CSS3.

Из главы 2 «Медиазапросы: поддержка разных областей просмотра» вы узнаете, что такое медиазапросы, как их написать и применить к любому дизайну для адаптации CSS-стилей к возможностям устройств.

В главе 3 «Использование резиновых макетов» рассказывается о преимуществах «резиновых» макетов и демонстрируется, как можно с легкостью преобразовать текущий дизайн с фиксированной шириной в «резиновый» макет либо использовать CSS-фреймворк для быстрого создания адаптивных веб-дизайнов.

В главе 4 «HTML5 для адаптивных веб-дизайнов» исследуются преимущества написания кода на HTML5 (более компактный код, семантические элементы, автономное кэширование и WAI-ARIA для внедрения вспомогательных технологий).

В главе 5 «CSS3: селекторы, типографика и цветовые режимы» демонстрируется мощь CSS3-селекторов, позволяющих с легкостью преобразовывать все что угодно. Я также воспользуюсь CSS3-правилом @font-face, чтобы создать красивую веб-типографику, и расскажу вам о таких новых цветовых режимах CSS3, как RGB(A) и HSL(A).

В главе 6 «Великолепная эстетика с использованием CSS3» рассказывается, как создавать тени, отбрасываемые текстом и блочными элементами, а также градиенты исключительно с помощью CSS3. Мы также поговорим о том, как добавлять разнообразные фоновые изображения и создавать значки с использованием шрифтов.

В главе 7 «CSS3-переходы, трансформации и анимации» я поведаю вам о том, как создавать, преобразовывать и анимировать экранные элементы, используя лишь CSS3.

В главе 8 «Покорение форм с помощью HTML5 и CSS3» иллюстрируется, как реализовать кросс-браузерные методики, касающиеся форм и работающие на всем, начиная от новейших смартфонов и заканчивая настольными браузерами.

В главе 9 «Решение кросс-браузерных проблем с адаптивностью» разъясняется, как обеспечить поддержку адаптивности в устаревших версиях Internet Explorer, как адаптировать тот или иной набор ссылок к меню на мобильных устройствах, как обеспечивать другое содержимое для устройств с экранами высокого разрешения и условно загружать ресурсы с помощью Modernizr.

Об авторе книги «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств»

Бен Фрейн (Ben Frain) — независимый веб-дизайнер и разработчик клиентских приложений с более чем десятилетним опытом, сотрудничающий с дизайнерскими фирмами со всего мира. Он также работает журналистом — его перу принадлежит множество публикаций, касающихся платформы Mac, перспективных технологий, дизайна сайтов и технологических систем в авиационной промышленности.

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

HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств - Бен Фрейн. ISBN 978-5-496-00185-4

Смотрите также другие материалы:

HTML5. Рецепты программирования. Шмитт К., Симпсон К.
Отзывчивый веб-дизайн. Итан Маркотт.
CSS – каскадные таблицы стилей. Подробное руководство. Эрик Мейер.

 

artageless.com

Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. читать онлайн и скачать бесплатно

 

Б. Фрэйн

HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

2016

Переводчик Н. Вильчинский

Технический редактор Н. Рощина

Литературный редактор Н. Рощина

Художники Н. Гринчик, С. Заматевская , С. Маликова

Корректоры Н. Гринчик, Е. Павлович

Верстка А. Барцевич

Б. Фрэйн

HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.. — СПб.: Питер, 2016.

ISBN 978-5-496-02271-2

© ООО Издательство "Питер", 2016

Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.

Об авторе

Бен Фрэйн (Ben Frain) занимается веб-дизайном и разработкой веб-приложений с 1996 года. В настоящее время он работает ведущим разработчиком пользовательского интерфейса в компании Bet365.

До того как заняться веб-технологиями, работал скромным, не получившим должного признания актером на телевидении и техническим писателем. Окончил Салфордский университет, получив высшее образование в области театрального искусства.

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

В настоящее время доступна еще одна книга, вышедшая из-под его пера, — Sass and Compass for Designers. О его делах можно узнать на сайте www.benfrain.com или в «Твиттере» — на страничке twitter.com/benfrain.

Хочу поблагодарить технических рецензентов книги за то, что они потратили свое свободное время на внесение ценного вклада в этот труд. Спасибо им за повышение качества результата.

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

А главное, хочу выразить признательность своей семье. Могу привести множество примеров жертв, приносимых ими ради предоставления мне возможности работать над книгой, включая приглушенный звук телевизора (от жены), чашку чая (от родителей) и прекращение пиратских боев на мечах (от сыновей).

О рецензентах

Эстебан С. Эбэйт (Esteban S. Abait) — разработчик архитектуры программных продуктов и бывший аспирант. Имеет опыт разработки архитектуры сложных программных продуктов и планирования работы по их созданию. Был штатным и внештатным работником в компаниях Cisco, Intuit и Southwest. Работал с различными технология­ми, в частности Java, PHP, Ruby и Node.js. В последние годы проявлял особый интерес к разработке веб-приложений, приложений для мобильных устройств и к REST API-интерфейсам. Разработал несколько довольно объемных веб-приложений с использованием JavaScript. Кроме того, он создавал методические рекомендации по REST-технологиям на основе оценок клиентов. Разрабатывал сайты с высоким объемом трафика, в которых использовал такие ключевые для масштабирования технологии, как репликация, сегментирование и распределенное кэширование данных.

В настоящее время Эстебан работает главным инженером компании Globant. В этой должности он добивается сдачи проектов в срок с обеспечением наивысшего качества конечного продукта. Он также занимается разработкой обучающих курсов по созданию программных продуктов и проводит совещания с разработчиками программных средств. Кроме того, Эстебан работает выездным консультантом по вопросам веб-технологий.

Компания Globant (http://www.globant.com/) относится к новому поколению поставщиков технологических услуг, нацеленных на выработку инновационных программных решений с использованием новых технологий и тенденций. Globant сочетает в своей деятельности жесткость в вопросах проектирования и технических решений, характерную для поставщиков сервисов информационных технологий, с творческим и культурным подходом, присущим агентствам по внедрению цифровых технологий. В компании Globant выдерживаются четкие пропорции инженерных наработок, дизайна и инноваций.

Кристофер Скотт Эрнандес (Christopher Scott Hernandez), будучи по профессии дизайнером, стал разработчиком веб-технологий, начав с того, что в 1996 году создал для своего отца первый в Интернете сайт по обивке катеров. После этого он стал передавать свой опыт мелким и крупным компаниям, поработав над наиболее посещаемыми в мире сайтами, включая eBay, LinkedIn и Apple.

Был техническим редактором книги HTML5 Multimedia Development Cookbook, вышедшей в Packt Publishing. Является заядлым читателем и любителем книг. Когда не занимается расстановкой пикселов и написанием кода, любит проводить время с женой и дочерью, знакомясь с парками и пешеходными тропами красивого города Остина в штате Техас.

Мовис Ледфорд (Mauvis Ledford) занимается комплексным созданием и техническим руководством компаний, специализирующихся в области веб-технологий, мобильных веб-технологий и создания приложений, масштабируемых в облачных сервисах.

Работал в компаниях Disney Mobile, Skype, Netflix, и многих других молодых компаниях в Сан-Франциско, Нью-Йорке и их окрестностях. В настоящее время он является техническим директором в недавно созданной компании Pathbrite, занимающейся разработкой образовательных технологий и специализирующейся на создании бесплатных адаптивных мультимедийных электронных портфолио и цифровых резюме для всех желающих. Вы также можете воспользоваться ее услугами, если зайдете на сайт http://www.pathbrite.com.

Мовис также был техническим редактором первого издания книги Responsive Web Design with HTML5 and CSS3, вышедшей в Packt Publishing, и книги Building Hybrid Android Apps with Java and JavaScript, вышедшей в O’Reilly Media.

Софи Уильямс (Sophie Williams) — весьма взыскательный человек, увлека­ющийся дизайном. Имеет ученую степень в области графического дизайна и в настоящее время работает веб-дизайнером и разработчиком пользовательского интерфейса в компании www.bet365.com. Несмотря на любовь к созданию дизайна веб-приложений, в ее сердце всегда остается особый уголок для печатных изданий. В свободное время она любит выпекать небольшие кексы, экспериментировать в области декоративно-прикладного искусства и склонна к раздаче указаний (тем, кто к ней прислушивается), когда что-нибудь в реальном мире идет не так, как ей нравится.

Сайт Софи находится по адресу www.sophiewill.com, а ее записи в «Твиттере» можно найти на страничке @sophiewill13.

Предисловие

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

Книга охватывает все важные особенности адаптивного веб-дизайна. Методология адаптивного веб-дизайна расширяется в ней за счет применения новейших, наиболее полезных технологий, предоставляемых HTML5 и CSS3, как никогда ранее повышающих компактность и облегчающих сопровождение создаваемых конструкций. В книге также даются объяснения самым востребованным и передовым методам написания и предоставления кода, изображений и файлов.

Если вы в состоянии разобраться в коде HTML и CSS, значит, вам также под силу освоить создание конструкций на основе адаптивного веб-дизайна.

О чем эта книга

Глава 1 «Основы адаптивного веб-дизайна» представляет собой краткий обзор ключевых составляющих в создании программных продуктов, отвечающих требованиям адаптивного веб-дизайна.

Глава 2 «Медиазапросы — поддержка различных окон просмотра» охватывает все, что нужно знать о медиазапросах CSS: их возможности, варианты синтаксиса и различные способы применения.

Глава 3 «Динамически изменяемые разметки и адаптивные изображения» показывает, как создавать код пропорциональных разметок и адаптивных изображений, и содержит детальное исследование разметок, создаваемых с помощью Flexbox.

Глава 4 «Использование HTML5 в целях разработки адаптивного веб-дизайна» охватывает все семантические элементы HTML5, семантику текстового уровня и вопросы обеспечения доступности веб-продуктов. В ней также рассматриваются методы вставки видео и аудио в ваши страницы с использованием средств HTML5.

Глава 5 «CSS3. Селекторы, разметка, цветовые режимы и новые возможности» позволяет разобраться с безграничными возможностями CSS: селекторами, установками цветовых решений в форматах HSLA и RGBA, веб-оформлением, относительными единицами измерений окон просмотра и многим другим.

www.libfox.ru

Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. читать онлайн и скачать бесплатно

Средства контроля качества кода

В общем-то, при написании кода HTML и CSS прощаются многие огрехи. Можно просчитаться с количеством вложенных элементов, забыть поставить кавычки или слеш в самозакрывающемся теге и при этом даже не всегда заметить какие-либо проблемы. Несмотря на это, мне чуть ли не еженедельно приходится сталкиваться с собственными просчетами в разметке. Иногда это ляпы вроде опечаток. А иногда школярские ошибки типа вложения div в span (разметка, при которой элемент блочного уровня div попадает в линейный элемент span, приводит к непредсказуемым результатам). К счастью, нам в помощь разработаны специальные инструментальные средства. В худшем случае, если возникли проблемы, обратитесь по адресу http://validator.w3.org/ и вставьте на этот сайт свою разметку. В результате будут помечены все ошибки и получены номера их строк, что существенно облегчит их устранение.

А еще лучше установить и настроить средства контроля качества вашего кода HTML, CSS и JavaScript. Или же выбрать текстовый редактор с определенным уровнем встроенной проверки правильности кода. Тогда по мере набора будут сразу же обозначаться проблемные области кода. Посмотрите на пример простой ошибки в написании кода CSS, которая сразу же была замечена редактором кода от компании Microsoft.

Я специально набрал widtth вместо width. Редактор это заметил и указал на ошибку, предлагая при этом ряд вполне разумных альтернатив. По возможности нужно пользоваться именно такими инструментальными средствами. Лучше потратить время на их подбор, чем на выискивание простых синтаксических ошибок в своем коде.

Производительность

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

Но есть некоторые базовые особенности реализации, остающиеся практически неизменными (по крайней мере для большинства из них до широкого внедрения HTTP2 все останется как есть). К ним относятся следующие.

1. Сведение к минимуму количества ресурсов (например, не загружайте 15 файлов JavaScript, если объединяете их в одно целое).

2. Максимальное облегчение страницы (если есть возможность сжать изображения, значительно уменьшив их размер по сравнению с исходным, то так и нужно поступать).

3. Отсрочка загрузки второстепенных ресурсов (если можно отложить загрузку CSS и JavaScript до вывода страницы на экран, это может существенно улучшить восприятие скорости загрузки страницы).

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

Имеются также весьма эффективные средства для определения уровня производительности и ее оптимизации. Лично я предпочитаю пользоваться сайтом http://webpagetest.org/.

В наипростейшем варианте набирается URL-адрес и делается щелчок на кнопке START TEST. Сайт покажет полный анализ страницы, но, что еще полезнее, он покажет раскадровку страницы по мере ее загрузки, позволяя сконцентрироваться на как можно более быстром завершении вывода страницы на экран.

На следующей странице показано, как выглядит раскадровка загрузки главной страницы сайта BBC.

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

В преддверии великих перемен

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

Например, за три года до выхода данного издания книги адаптивных изображений (получаемых с помощью атрибута srcset и элемента picture, подробно рассмотренных в главе 3) не было и в помине. Тогда, чтобы получить более подходящие для окон просмотра различных размеров изображения, нам приходилось пользоваться хитроумными обходными средствами от сторонних разработчиков. Теперь же, когда эти насущные потребности нашли свое отражение в стандартах W3C, мы можем с удовольствием пользоваться стандартными средствами.

Аналогично этому не так давно Flexbox еще только мерещился тем, кто создавал спецификацию. И даже по мере развития спецификации ее реализация давалась с большим трудом до тех пор, пока Андрей Ситник (Andrey Sitnik) и такие же умные, как он, ребята из Evil Martians (https://evilmartians.com/) не создали Autoprefixer, после чего мы смогли с относительной простотой воспользоваться кросс-браузерным кодом.

В будущем нам предстоит осваивать еще более захватывающие возможности. К примеру, в главе 4 уже упоминалось средство Service Workers (http://www.w3.org/TR/service-workers/), предоставляющее один из лучших способов создания приложения на основе веб-технологий, способных работать в автономном режиме.

Есть также Web Components — коллекция стандартов, составленная из Shadow DOM (http://w3c.github.io/webcomponents/spec/shadow/), Custom Elements (http://w3c.github.io/webcomponents/spec/custom/) и HTML Imports (http://w3c.github.io/webcomponents/spec/imports/), которая позволяет создавать полностью предсказуемые и многократно используемые компоненты.

На подходе и другие более совершенные средства вроде CSS Level 4 Selectors (http://dev.w3.org/csswg/selectors-4/) и CSS Level 4 Media Queries, частично рассмотренные в главе 2.

И наконец, на горизонте забрезжили еще более грандиозные перемены, связанные с появлением протокола HTTP2. Он обещает все, что сейчас считается передовыми наработками, просто выбросить на свалку. Чтобы получить о нем более глубокое представление, предлагаю прочитать заметки Дэниела Стенберга (Daniel Stenberg) о том, что такое HTTP2, свободно распространяемые в PDF-формате. Или же в качестве краткого обзора прочтите великолепную статью Мэтта Уилко­кса (Matt Wilcox) HTTP2 for front-end web developers (https://mattwilcox.net/web-development/http2-for-front-end-web-developers).

Резюме

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

Я убежден, что расчетливый подход к веб-проектам наряду с внесением ряда изменений в существующие рабочие процессы, сложившиеся методики и технологии позволит вам создавать адаптивные веб-конструкции, обеспечивающие сайты с высокими показателями скорости работы, гибкости и легкости в поддержке, у которых будет потрясающий внешний вид независимо от устройств, с которых их будут посещать.

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

А пока желаю вам удачи на вашем нелегком, но увлекательном пути разработки адаптивного веб-дизайна.

До новых встреч.

www.libfox.ru

Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. читать онлайн и скачать бесплатно

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

В середине 2015 года мне уже приходилось писать о том, что времена браузеров Internet Explorer 6, 7 и 8 прошли. Даже IE 9 на всемирном рынке браузеров занимает весьма скромные 2,45 % (у IE 10 только 1,94 %, а у IE 11 уже более привлекательный показатель, равный 11,68 %). Если вам не остается ничего другого, как вести разработку под Internet Explorer 8 и более ранние версии, то я вам искренне сочувствую и заявляю, что ничего особо полезного из этой книги вы для себя не почерпнете.

Все остальные должны объяснить своему клиенту или заказчику, финансирующему проект, ошибочность разработки под скудные по своим возможностям браузеры и причины, по которым выделение времени и ресурсов преимущественно на разработку под современные браузеры и платформы во всех отношениях имеет более определенный финансовый смысл.

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

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

Чтобы пояснить причину, по которой это важно знать заранее, подумайте о том, что, если вам не повезет и 25 % посетителей вашего сайта будут пользоваться, к примеру, Internet Explorer 9, придется учесть, какие функции поддерживаются этим браузером, и подстраивать свое решение под эти качества. Те же меры станут необходимы, если большой контингент ваших пользователей посещает сайт с устаревших платформ мобильных телефонов, таких как Android 2. Что именно рассматривать в качестве базового представления, будет сильно варьироваться в зависимости от проекта.

Если подходящие данные недоступны, то для определения того, нужно ли тратить время на разработку версии под конкретную платформу или браузер, я прибегаю к простому логическому приему: если стоимость разработки под брау­зер X и дальнейшей поддержки превышает выручку или выгоду, создаваемую пользователями браузера X, то вести разработку конкретных решений под брау­зер X не стоит.

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

Если при рассмотрении вопроса о том, какие функции какими платформами и версиями браузеров поддерживаются, вы еще не ознакомились с сайтом http://caniuse.com, я настоятельно советую вам сделать это. Там предоставляется весьма простой интерфейс для выявления, поддержкой какого браузера пользуются интересующие нас функции.

Краткая справка по инструментарию и текстовым редакторам. Неважно, какими именно текстовым редактором или IDE-системой вы пользуетесь для создания своих адаптивных веб-конструкций. Если самые простые текстовые редакторы позволяют вам успешно записывать код HTML, CSS и JavaScript, значит, все в порядке. Аналогично этому нет никакой особой оснастки, играющей важную роль в получении на выходе адаптивного веб-дизайна. Фактически вам нужно лишь что-то позволяющее записывать код HTML, CSS и JavaScript. Чему вы отдадите предпочтение, Sublime Text, Vim, Coda, Visual Studio или Блокноту, не играет практически никакой роли. Работайте в той среде, которая вас больше всего устраивает.

Тем не менее следует знать, что, в отличие от прежних времен, сейчас имеется множество инструментальных средств (зачастую бесплатных), способных существенно облегчить выполнение рутинных, затратных по времени задач создания сайтов. Например, CSS-процессоры (Sass, LESS, Stylus, PostCSS) способны помочь с организацией кода, с переменными, в работе с цветовыми решениями и арифметикой. Такие средства, как PostCSS, способны также автоматизировать решение трудоемких и неприятных задач, например установку в коде CSS префиксов производителей. Кроме того, проверочные средства могут сравнить ваш код HTML, JavaScript и CSS со стандартами, по которым вы работаете, сэкономив массу времени на выявление опечаток и синтаксических ошибок.

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

Первый пример придания адаптивности

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

Примеры программного кода

Все примеры кода из этой книги можно загрузить по адресу rwd.education/download.zip или через GitHub на сайте https://github.com/benfrain/rwd. Имейте в виду, что окончательные версии отдельных примеров, приводимых в главе, имеются только в загружаемом коде. Так, если загрузить примеры кода из главы 2, они будут иметь тот вид, в котором приводятся в конце данной главы. В отличие от текста самой главы, в загружаемых примерах кода никаких промежуточных состояний не приводится.

Наш исходный файл HTML

Начнем с простой структуры HTML5. Не обращайте внимания на предназначение абсолютно каждой строки (особенно на содержимое контейнера <head>, которое более подробно будет рассматриваться в главе 4).

Предлагаю пока сконцентрироваться на элементах внутри тега <body>. Я абсолютно уверен, что вы не увидите там ничего необычного: всего лишь несколько div-контейнеров, символ логотипа, изображение (симпатичная булочка), один-два текстовых абзаца и список ингредиентов.

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

Если есть желание просмотреть весь файл HTML, его можно загрузить с сайта rwd.education:

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Our first responsive web page with HTML5 and CSS3</title>

    <meta name="description" content="A basic responsive web page

      – an example from Chapter 1">

    <link rel="stylesheet" href="css/styles.css">

  </head>

  <body>

    <div>

      <a href="/"><img src="img/SOC-Logo.png" alt="Scone O'Clock logo" /></a>

      <p>Scones: the most resplendent of snacks</p>

    </div>

    <div>

      <p>Occasionally maligned and

         misunderstood; the scone is a quintessentially British classic.</p>

      <div>

        <img src="img/scones.jpg" alt="Incredible scones" />

        <p>Incredible scones, picture from Wikipedia</p>

      </div>

    </div>

    <p>Recipe and serving suggestions follow.</p>

    <div>

      <h4>Ingredients</h4>

      <ul>

      </ul>

    </div>

    <div>

      <h4>Method</h4>

      <ol>

      </ol>

    </div>

  </body>

</html>

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

А как она себя поведет на других устройствах? При полном отсутствии CSS на iPhone получится следующее изображение.

Как видите, на iPhone она отобразилась точно так же, как и обычная веб-страница. Дело в том, что изначально iOS отображает веб-страницы шириной 980 пикселов и ужимает их в области просмотра.

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

www.libfox.ru


Смотрите также