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

Книга-учебник по созданию универсального, адаптированного дизайна для ВЕБ проектов.

Бен Фрейн » HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств » Питер, 2014 год, 304 стр., (17,8 мб, pdf)

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

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

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

Скачать

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

Второе издание, Питер, 2017 год, 272 стр. (9,01 мб. pdf + 16,0 мб. fb2)

 

 

 

 

Оглавление книги
Глава 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) 62
Table и table-cell 62
Представляем Flexbox 63
Тернистый путь к сегодняшнему Flexbox 63
Браузерная поддержка Flexbox 63
Разбираемся с возможностью динамического изменения 65
Текст, безупречно выровненный по вертикали 65
Смещение элементов 67
Изменение порядка следования элементов 68
Различные разметки Flexbox внутри разных медиазапросов 69
inline-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 93
doctype 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
Замечания относительно элементов <h1> — <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
Комбинирование условий 124
Modernizr 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 139
CSS-функция calc 140
Селекторы CSS Level 4 141
Псевдокласс :has 141
Адаптивные меры длины, выражаемые в процентных отношениях
применительно к окнам просмотра (vmax, vmin, vh, vw) 141
Шрифтовое веб-оформление 142
CSS-правило @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
Фоновые изображения с высоким разрешением 165
CSS-фильтры 165
Доступные CSS-фильтры 167
Объединение CSS-фильтров 171
Предупреждения, касающиеся CSS-производительности 172
Резюме 174
HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств

Глава 7. Использование SVG для достижения независимости от разрешения 175
Краткая история SVG 177
Графика, представляющая собой документ 178
Корневой элемент SVG 179
Пространство имен 180
Теги title и desc 180
Тег defs 180
Элемент g 180
Фигуры SVG 181
SVG-пути 181
Создание SVG-графики с помощью популярных пакетов и сервисов
редактирования изображений 181
Вставка SVG-графики в веб-страницы 182
Использование тега img 183
Использование тега object 183
Вставка SVG-графики в качестве фонового изображения 184
Краткое отступление по поводу URI-идентификаторов данных 185
Создание спрайтов изображений 186
Непосредственная вставка SVG 187
Повторное использование графических объектов из символов 187
Встраиваемая в код SVG-графика позволяет задавать различные
цвета в разных контекстах 189
Повторное использование графических объектов из внешних
источников 190
Что можно делать с любым методом вставки SVG-данных 191
Дополнительные возможности и особенности технологии SVG 192
SMIL-анимация 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
Развлечение с переходами на адаптивных сайтах 211
CSS3 2D-преобразования 211
Масштабирование (scale) 212
Перемещение (translate) 213
Вращение (rotate) 215
Наклон (skew) 216
Матрица (matrix) 216
Свойство transform-origin 217
CSS3 3D-преобразования 219
Свойство transform3d 222
Использование преобразований при постепенном усложнении 223
Создание эффектов анимации средствами CSS3 226
Резюме 229

Глава 9. Обуздание форм с помощью HTML5 и CSS3 231
Формы HTML5 231
Основные сведения о компонентах формы HTML5 233
placeholder 233
required 234
autofocus 235
autocomplete 235
Атрибут list и связанный с ним элемент datalist 236
Типы вводимой информации, определяемые в HTML5 237
email 238
number 239
url 240
tel 242
search 243
pattern 243
color 244
Ввод даты и времени 244
range 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

Скачать Скачать

Похожая литература