Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Использование CSS для форматирования интерактивных элементов управления в мобильных разработках
Новые типы ввода данных в HTML5
Усовершенствование мобильных устройств сделало ввод данных HTML5 еще более нужным в современном мире. Для этого в HTML5 включены новые типы (атрибут type тега <input>) ввода данных - color, email, file, tel, time, url, date, search и ряд других. Для большинства этих типов используется виртуальная клавиатура мобильных устройств (новые типы плохо поддерживаются эмуляторами устройств, их отладку и тестирование лучше проводить на реальных мобильных устройствах). Благодаря новым типам, пользователем мобильного приложения могут быть введены, например, такие данные:
- цвет;
- дата;
- объект Datetime (преобразование даты и времени);
- Datetime-local (локальное преобразование даты и времени);
- электронная почта;
- месяц;
- число;
- диапазон;
- поиск;
- телефон;
- время;
- URL;
- неделя.
Сделаем небольшое замечание по дизайну приложений. Для мобильных форм следует использовать вертикальный дизайн, чтобы можно было разместить надписи над полями ввода, а не слева или справа. Это нужно сделать по той причине, что устройства с сенсорным интерфейсом увеличивают поле ввода при переходе к нему фокуса ввода, и таким образом не позволяют увидеть содержимое формы слева и справа от поля ввода. Нужно также постараться свести использование форм с большим объемом вводимого текста к минимуму, например, тегом <textarea>. При разработке дизайна формы не используйте таблицы. Наилучшим решением будет использовать списки определений, надписи и элементы управления формы.
Форматирование списков
Использование стандартных списков существенно поможет нам в разработке дизайна страницы. В мобильных разработках можно использовать списки следующих типов:
- упорядоченный список (тег ol) - для меню навигационных ссылок;
- неупорядоченный список (тег ul) - для отображения списков сходных объектов;
- список определений (тег dl) - для отображения пар вида ключ/значение.
Последний из упомянутых типов, возможно, является наименее распространенным. Тем не менее, например, если требуется отобразить страницу с описанием продукта, лучше использовать именно список определений, а не таблицу атрибутов, например:
<dl> <dt>Price</dt> <dd>300 EUR</dd> <dt>Memory</dt> <dd>64Gb</dd> <dt>Network</dt> <dd>3G, Wifi, Bluetooth</dd> </dl>
Тег <dt> используется для ключа (термина данного определения), а тег <dd> - для значения (описания данного определения). Это очень удобный подход, позволяющий получить семантически корректный, и более чистый по сравнению с использованием таблиц код. Пример реализации этого списка в эмуляторе:
Форматирование списка определений выполняется с использованием таблицы стилей, включающей правила для элементов списка "dl dt" (ключ) и "dl dd" (значение). HTML- код данного примера, включающий таблицу стилей имеет вид:
<html lang = "ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style > body { background-color:#ede3b5; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#171715 ; font-size:50px; max-width:1600px; } h2 { /*Синий текст + Серый фон */ color:rgb(0,0,255); background-color:rgb(150,150,150); font-size:100px; } dl { list-style:circle; } dl dt{ /*ключи в списке определений красного цвета */ color: #dc1010 ; background-color:#ede3b5; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:70px; font-weight:bold; } dl dd{ /*Значения в списке определений зеленого цвета */ color: #11ad36; background-color:#ede3b5; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:70px; font-weight:bold; } </style> <title>Список данных</title> </head> <body> <header id="header"> <h2>Windows Phone 8</h2> </header> <dl> <dt>Price</dt> <dd>300 EUR</dd> <dt>Memory</dt> <dd>64Gb</dd> <dt>Network</dt> <dd>3G, Wifi, Bluetooth</dd> </dl> <footer id="footer"> <p> Создано в HTML5<p> </footer> </body> </html>