|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 27 | Длительность: 11:36:00
Специальности: Программист
Лекция 4:
Использование локального HTML5 контента на мобильном устройстве
Разметка изображений
Иногда изображение стоит тысячи слов. Это справедливо и для мобильного Интернета. Тем не менее, всегда следует использовать оптимальное количество изображений в документе. Каждое дополнительное изображение увеличивает объем передаваемых данных, количество запросов и время загрузки. Рассмотрим тег <img>. Используйте этот тег только для следующих изображений:
- логотип компании;
- фотография (например, продукта);
- карта.
Для следующих элементов тег img обычно нe используется:
- кнопки;
- значки для ссылок или меню;
- фон;
- визуальные разделители;
- заголовки.
Обязательными атрибутами тега img являются атрибуты src, width, height и alt. Очень важно определить ширину и высоту каждого из используемых в мобильном документе изображений с помощью атрибутов width и height. Это позволит уменьшить время первой визуализации страницы, поскольку в данном случае мобильному браузеру не требуется дожидаться загрузки изображения, чтобы узнать, сколько места оно займет, и как разместить остальное содержимое страницы.
Почти все мобильные браузеры понимают обычные форматы веб-изображений: GIF, JPEG и PNG. Лучше использовать формат PNG, поскольку, благодаря тому, что этот формат является открытым, PNG-изображение сможет отобразить практически каждый мобильный браузер. Далее приводится пример HTML5-разметки страницы, содержащей изображение. Смысловые теги позволяют улучшить читаемость кода.
<!DOCTYPE HTML> <html lang = "ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Изображение</title> </head> <body> <figure> <img src="Images/Dog.jpg" width="800" height="900"> <figcaption>Бобик</figcaption> </figure> </body> </html>
Результат выполнения кода настольным браузером Internet Explorer:
Дмитрий Белов