Введение 16
Сравнение нативных приложений
и веб-приложений 17
Напутствие (прощание со старым Internet Explorer 19
Браузерный ландшафт 20
Сравнение веб-приложений и нативных приложений. Краткий исторический экскурс 20
Выход SDK. Появление сторонних приложений 21
Что нового? Новые элементы и API 23
Теги для семантической группировки 23
Веб-формы 24
Масштабируемая векторная графика и холст 24
Видео и аудио 24
Геолокационный API 24
Офлайн-контент и хранилище данных 25
Другие API 25
Что нового в
CSS 25
Проблемы, специфичные для мобильной среды 26
Что особенного в этой книге 27
Размер экрана 27
Чего хотят пользователи 28
О чем эта книга 29
Условные сокращения, используемые в книге 30
Работа с примерами кода 30
Как с нами связаться 31
Благодарности 31
От издательства 33
Глава 1. Подготовка к изучению API для работы с мобильным HTML5, CSS3 и JavaScript 34
CubeeDoo: игра для мобильных браузеров на HTML5 36
Инструменты разработки 38
Текстовый редактор 38
Браузер 38
Инструменты отладки 39
Отладчики для работы на ПК 40
Удаленная отладка 42
Инструменты тестирования 49
Эмуляторы и симуляторы 49
Онлайн-инструменты 51
Смартфоны 52
Автоматизированное тестирование 55
Глава 2. Как усовершенствоваться до HTML5 56
Синтаксис HTML5 56
Элементы 57
Атрибуты 58
Глобальные атрибуты и атрибуты интернационализации 59
Атрибуты HTML 4, вошедшие в число основных в HTML5 62
Что нового в HTML5: глобальная доступность и интерактивные атрибуты 65
Синтаксис HTML-элементов и атрибутов 69
Самозакрывающиеся элементы 71
Рекомендуемые методы 72
Необходимые компоненты 73
Элементы, находящиеся в <head> 79
<meta>: добавляем метаданные 80
Метатеги для мобильной среды 82
Специфические значения в мобильной среде, определяемые
поставщиками 84
Тег <base> веб-страницы 85
Элементы <link> применяются не только для работы с таблицами стилей 85
Глава 3. Новые элементы, появившиеся в HTML5 93
Секционирующие элементы в HTML5 94
<section> 95
<article> 96
Сравнение <section> и <article> 96
<nav> 97
<aside> 98
<header> 98
<footer> 99
Область заголовка и нижний колонтитул игры CubeeDoo 100
Элемент <address>: появился давно, но используется нечасто 101
Группирование контента: другие новые элементы HTML5 101
<main> 102
<figure> и <figcaption> 102
<hr> 103
Изменения в атрибутах элементов <li> и <ol> 103
Новые текстовые семантические элементы, появившиеся в HTML5 103
<mark> 104
<time> 105
<rp>, <rt> и <ruby> 106
<bdi> 106
<wbr> 106
Измененные семантические элементы, действующие на уровне текста 107
Мобильно-специфичная обработка ссылок 108
Изменения текстовых элементов по сравнению с HTML 4 109
Элементы, которые не изменились 110
Встраиваемые элементы 110
<iframe> Ill
<img> 112
<object> 113
<param> 113
<area> 113
<embed> 113
Интерактивные элементы 113
<details> и <summary> 114
<menu> и <menuitem> 115
Весь XHTML — это HTML5, кроме 116
Резюме 117
Глава 4. Веб-формы в HTML5 118
Атрибуты <input> (и другие элементы форм) 120
type 120
required 121
Минимальные и максимальные значения: атрибуты min и max 122
step 123
placeholder 123
pattern 124
readonly 126
disabled 127
maxlength 127
size 128
form 128
autocompletion 129
autofocus 130
Типы и атрибуты элемента <input> 130
Повторное знакомство с уже известными типами полей ввода 130
Текст: <input type="text"> 131
Пароль: <input type="password"> 132
Флажок: <input type="checkbox"> 132
Переключатель: <input type="radio"> 133
Кнопка отправки: <input type="submit"> 134
Сброс: <input type="reset"> 36
Файл: <input type="file"> 136
Скрытые элементы: <input type="hidden"> 137
Изображение: <input type="image"> 138
Кнопка: <input type="button"> 138
Оформление полей ввода разных типов 138
Новые значения типов <input> 139
Электронная почта: <input type="email"> 140
URL: <input type="url"> 140
Телефонный номер: <input type="tel"> 142
Номер: <input type="number"> 143
Диапазон: <input type="range"> 146
Поле для поиска: <input type="search"> 147
Цвет: <input type="color"> 147
Поля для ввода даты и времени 149
Дата: <input type="date"> 149
Дата и время: <input type="datetime"> 151
Локальные показатели даты и времени: <input type="datetime-local"> 151
Месяц: <input type="month"> 151
Время: <input type="time"> 152
Неделя: <input type="week"> 152
Валидация форм 153
Графическое оформление экранных сообщений об ошибках 157
Оформление для повышения удобства использования 158
Новые элементы форм 159
Элемент <datalist> и атрибут list 159
Элемент <output> 162
<meter> 163
<progress> 164
< keygen > 165
Другие элементы форм 65
<form> 166
<fieldset> и <legend> 166
<select>, <option>, <optgroup> 166
<textarea> 166
< button > 167
<label> 167
Резюме 167
Глава 5. Масштабируемая векторная графика, холст, аудио и видео 168
API HTML5 для работы с мультимедиа 168
SVG 169
Включение SVG в ваши документы 171
Метод «автомобиль клоуна»: SVG для адаптивных изображений переднего плана 172
Изучение SVG 174
Масштабируемая векторная графика для игры CubeeDoo 174
Холст 177
Сравнение холста и масштабируемой векторной графики 181
Аудио/видео 183
Типы мультимедиа 183
Добавление элемента <video> на сайт 184
Атрибуты элементов <video> и <audio> 185
Видео, аудио и JavaScript 189
Оформление видео 191
Глава 6. Другие API HTML5 194
Веб-приложения, работающие в режиме офлайн 194
У меня вообще есть соединение с Интернетом? 194
Кэш приложений 195
Локальное и сеансовое хранение данных 200
Хранение информации в SQL/базе данных 210
Улучшенное пользовательское восприятие 215
Геолокация 216
Веб-работники 219
Микроданные 221
Междокументный обмен сообщениями 224
Доступные активные интернет-приложения (ARIA 225
Резюме 228
Глава 7. Переход на новый качественный уровень с помощью CSS3 229
CSS: определение и синтаксис 230
Синтаксис CSS 231
Использование внешних таблиц стилей: повторное обращение к <link> 233
Медиазапросы 235
Рекомендуемые методы использования CSS 238
Селекторы CSS 243
Селектор типа 244
Селектор класса 245
Селектор идентификатора 246
Дополнительные селекторы CSS3 246
Основные селекторы 247
Использование селекторов 248
Реляционные селекторы: правила, основанные на порядке следования кода 249
Селекторы атрибутов 253
Псевдоклассы 259
Псевдоклассы состояния 263
Структурные псевдоклассы 263
Математика п-х типов 264
Дополнительные псевдоклассы 268
Псевдоэлементы 270
Другие селекторы: теневая DOM-модель 273
Резюме 276
Глава 8. Расширение вариантов настроек с помощью значений CSS3 277
Цветовые значения CSS 277
Шестнадцатеричные значения 278
Синтаксис rgb 280
Добавление прозрачности с помощью формата RGBA 280
Тон, насыщенность, яркость: HSL 281
CMYK 282
Поименованные цвета 283
CurrentColor 283
Значения цветов браузера 284
Единицы измерения, используемые в CSS 287
Значения длины 287
Значения углов, времени и частоты 289
Единицы измерения углов 290
Время 292
Частота 292
Как избежать путаницы со сторонами прямоугольного блока при кратком объявлении свойств и значений 293
Резюме 295
Глава 9. CSS3: модули, модели и изображения 296
Свойства блочной модели CSS 297
Границы 298
border-style 299
border-color 299
border-width 300
Блочная модель CSS 301
box-sizing 302
Изучение CSS3 303
border-radius 304
Использование border-radius для создания кнопок естественного вида для iPhone и в CubeeDoo 306
Градиенты CSS 308
Типы градиентов: линейный или радиальный 309
Радиальные градиенты 309
Линейные градиенты 310
background-size 319
Полосатые градиенты 323
Повторяющиеся линейные градиенты 325
Тени 329
Текстовые тени 330
Подгонка текста с помощью свойств width, overflow и text-overflow 332
Блочная тень 334
А теперь все вместе: CubeeDoo 337
Глава 10. CSS3: преобразования, переходы и анимация 342
CSS-переходы 343
Свойство transition-property 345
Свойство transition-duration 347
Свойство transition-timing-function 348
Свойство transition-delay 349
Краткая форма записи свойства transition 350
Множественные переходы 351
СББЗ-преобразования 353
Свойство transform-origin 353
Свойство transform 355
Множественные преобразования 359
Преобразования в составе переходов 360
Функции ЗО-преобразований 361
Дополнительные свойства ЗО-преобразований 363
А теперь все вместе 364
СББЗ-анимация 367
Ключевые кадры 369
Переходы, анимация и производительность 376
Глава 11. Использование свойств CSS в адаптивном веб-дизайне 378
Медиазапросы, контрольные точки и резиновая разметка 378
Использование нескольких столбцов 379
Изображения для границ 382
border-image-source 384
border-image-slice 384
border-image-width 385
border-image-outset 386
border-image-repeat 387
Краткая форма записи свойства border-image 388
Режим flexbox 389
flex 392
Обнаружение возможностей с помощью @supports 394
Адаптируемая информация 396
Обслуживание изображений 397
CSS-маскирование: создание прозрачных изображений формата JPEG 403
Клиентские подсказки 404
Глава 12. Разработка приложений для мобильных устройств 405
Вопросы, требующие рассмотрения перед началом работы 406
Размышления по поводу дизайна 408
Инструментальные средства: рабочие приложения 409
Развлечения: приложения в режиме погружения 410
Утилиты 411
А что подойдет конкретно вам 412
Мобильная платформа: богатые возможности 413
Небольшой экран 413
Меньший объем памяти 414
Управление памятью 415
Одно окно — одно приложение 416
Минимум документации 417
Вопросы разработки 417
Разработка с прицелом на мобильные WebKit-браузеры 418
Панель состояния 419
Панель навигации 420
Загрузочное изображение 423
Значки главного экрана 423
Сведите к минимуму ввод с клавиатуры 424
Проявляйте краткость во всем 425
Другие вопросы взаимодействия с пользователем 425
Глава 13. Ориентация на мобильные устройства и сенсоры 427
Масштабирование до нужного размера 427
Прикоснись ко мне 429
Области прикосновений 429
События мыши, сенсорные события 430
Псевдо- или не-совсем-псевдособытия щелчков 433
Доступ к оборудованию 436
Перемещение телефона и его направление 437
Состояние устройства 438
Стандартные веб-приложения, пакетные приложения и гибриды 440
Тестирование 441
Глава 14. Производительность мобильных устройств 444
Продолжительность работы от аккумулятора 444
Используйте темные цвета 445
Используйте JPEG-изображения 445
Сокращайте объем кода JavaScript 446
Избегайте сетевых запросов 448
Аппаратное ускорение 448
Задержки 452
Сокращайте количество HTTP-запросов 452
Проверка сетевых запросов 455
Сокращение размеров запросов 456
Память 461
Оптимизация изображений 462
Отзывчивость пользовательского интерфейса 468
Сенсорные события 468
Анимация 469
Резюме 470
Приложение. CSS-селекторы и уровни конкретизации 471
CSS-селекторы уровня 3 471
Памятка по селекторам CSS 475
Конкретизация CSS-селекторов 476
CSS-селекторы уровня 4 476
Добавить комментарий