|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 339 / 30 | Длительность: 11:36:00
Специальности: Программист
Лекция 6:
Использование 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>
Дмитрий Белов