Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00
Специальности: Программист
Лекция 4:

Использование локального HTML5 контента на мобильном устройстве

Основная структура кода разметки

Типичный мобильный документ можно разделить на четыре основные части:

  • заголовок;
  • основная навигация;
  • содержимое;
  • "подвал".

Заголовок должен быть максимально простым и содержать определенный с помощью тега h1 текст и/или логотип или баннер компании. Основная навигация - более пяти основных ссылок, упорядоченных по частоте использования в мобильном контексте (начиная с наиболее часто используемых). Назначение содержимого очевидно; "подвал" должен содержать краткую информацию об авторских правах, ссылку на домашнюю страницу, ссылку на предыдущую страницу и, опционально, другие относительные ссылки (например, ссылку "вверх страницы"). Конечно, это упрощенная схема, однако большинство мобильных html-страниц будут удовлетворять этой структуре. Если же страница обладает более сложной структурой, то стоит оценить ее необходимость.

Далее приведен пример простой HTML5 - разметки.

<!DOCTYPE HTML>
<html lang = "ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Список данных</title>
</head>
<body>
<header id="header">
<h2>Мои жизненные планы</h2>
</header>
<nav id="nav">
<ul>
 <li><a href="Flights">Поездки</a></li>
 <li><a href="Hotels">Гостиницы</a></li>
 <li><a href="Restaurants">Рестораны</a></li>
</ul>
</nav>
<section id="content">
<p> Надеюсь их выполнить!<p>
</section>
<footer id="footer">
<p> Создано в HTML5<p>
</footer>
</body>
</html>

Для добавления смыслового значения вместо привычных, традиционных тегов "div" в разметке использованы семантические элементы HTML5 <header>, <nav>, <section>, <footer>, добавляющие смысловое значение заключенному в них содержимому. Конечно, возможности, предоставляемые этим набором тегов, не потрясают воображение. Тем не менее, если воспользоваться CSS-стилями и рассчитанными на мобильные устройства библиотеками JavaScript (например, JQueryMobile), то сможем на основе этой разметки создать великолепную функциональность для устройств высокого класса. При этом использование простой структуры документа будет одной из лучших и позволит избежать дублирования кода.

Если приведенный выше пример набрать в блокноте, сохранив с расширением *.html, то открыв его в браузере Internet Explorer 9 (и выше) вы получите:


Рис. 5.1.

Результат запуска это же примера, как мобильного Cordova-виджета, в эмуляторе мобильного устройства, поддерживающего Windows Phone 8:

При создании средствами HTML5 мобильных виджетов, учитывайте, что тело документа представляет собой самую важную его часть, в которой определяется видимое пользователем содержимое.

Вот некоторые из лучших практик:

  • старайтесь не использовать информацию о стиле в требующем форматирования элементе разметки;
  • используйте семантически корректный, чистый код HTML, форматирование элементов добавьте позже, используя стили CSS;
  • размер документов не должен быть большим (например, для ряда устройств не может превышать 25 Кб); более крупные документы вызывают проблемы в старых, а иногда и в новых браузерах;
  • если нужно отобразить большой объем текста, разделите содержимое на несколько страниц;
  • для компоновки страницы не используйте таблицы.

Еще один пример разметки с реализацией вывода небольшого текста двумя способами - старым HTML с использованием тега <div> и более современным с семантической разметкой HTML5:

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Управление тегами p и div</title>
</head>
<body>
<!--Старым способом-->
<div><h1>О самом главном</h1>
<p><h2>В поисках настоящей любви </h2></p>
<p><h2>Выбор профессии</h2></p>
<p><h2>Поиск места для парковки</h2></p></div>
<!--Лучше вот так -->
<header>
 <h1>О самом главном</h1>
</header>
<section>
 <h2>Поиск настоящей любви </h2>
 <h2>Выбор профессии</h2>
 <h2>Поиск места для парковки </h2>
</section>
</body>
</html>

Результат выполнения кода разметки на эмуляторе:

Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?