Строим офлайновое приложение |
153 |
Изменив и перезалив таблицу стилей clock.css, вы не увидите разницы: файл манифеста не поменяется. Поэтому каждый раз, внося изменения в один из ресурсов вашего офлайнового веб-приложения, обязательно меняйте и сам файл манифеста. Достаточно такой несложной вещи, как замена одного символа. Насколько мне известно, проще всего включать в файл манифеста комментарий с порядковым номером версии. Когда меняется один из ресурсов, меняйте версионный номер в комментарии. Веб-сервер передаст браузеру новый, измененный файл манифеста, а браузер, видя, что содержимое файла изменилось, повторно скачает все ресурсы, перечисленные в манифесте:
CACHE MANIFEST
# rev 43 clock.js clock.css
Строим офлайновое приложение
Помнитеигру«Уголки»,котораявпервыепоявиласьв этойкнигев разделе «Живой пример» главы 4 и была улучшена, когда мы стали сохранять состояния игры в локальном хранилище (см. раздел «HTML5-хранилище в действии» главы 7)? Выпустим «Уголки» на волю — в офлайн. Для этого надо составить список всех ресурсов, от которых зависит игра. Есть главная HTML-страница, есть один файл JavaScript совсемкодомигры —ивсе!Картинокнет,потомучтопрорисовкавыполняетсяпро- граммно с помощью API холста, а все необходимые CSS-стили содержатся в теге <style> в верхней части страницы. Таким образом, манифест кэша выглядит так:
CACHE MANIFEST halma.html
../halma-localstorage.js
Пару слов о путях к файлам. В директории examples/ я создал поддиректорию offline/, куда и поместил файл манифеста кэша. Поскольку HTML-страницы нуждаются в одном маленьком дополнении, чтобы работать офлайн (об этом ниже), была создана отдельная копия HTML-файла, которую я тоже поместил в папку offline/. Но ввиду того, что код на JavaScript остался прежним с того времени, как в игру вступило локальное хранилище (см. раздел «HTML5-хранилище в действии» главы 7), я повторно использую тот самый файл с расширением JS, хранящийся в родительской папке examples/. В совокупности размещение всех файлов таково:
/examples/localstorage-halma.html /examples/halma-localstorage.js /examples/offline/halma.manifest /examples/offline/halma.html
В файле манифеста (/examples/offline/halma.manifest) мы хотим сослаться на два файла: во-первых, на офлайновую версию HTML-файла (/examples/offline/halma. html), путь к которой описан в файле манифеста без префикса, и, во-вторых, на файл
JavaScript из родительской папки (/examples/halma-localstorage.js). Путь к нему в файле манифеста относительный: ../halma-localstorage.js. Аналогичным образом можно использовать относительные пути в атрибуте src тега <img>. Как будет ясно из следующего примера, допускается также использование абсолютных путей
154 |
Глава 8.. На волю, в офлайн! |
(то есть таких, которые начинаются с корня текущего домена) и даже абсолютных URL-адресов (которые указывают на ресурсы, размещенные на других доменах).
Теперь мы должны добавить в HTML-файл атрибут manifest, ссылающийся на файл манифеста кэша:
<!DOCTYPE html>
<html lang="en" manifest=”halma.manifest”>
Вот и все! Когда браузер с поддержкой офлайновых приложений впервые загрузит нашу HTML-страницу, он скачает связанный с ней файл манифеста и начнет сохранять все перечисленные в нем ресурсы в кэше приложения, загружая их. С этого времени при повторных посещениях страницы в Сети офлайновый алгоритм будет перезагружаться. Поскольку в «Уголки» стало возможно играть автономно, а позиции незаконченных игр локально сохраняются, то пользователь может сколь угодно часто прерывать партию и возвращаться к ней.
Для дальнейшего изучения
Стандарты: «Офлайновые веб-приложения в спецификации HTML5» (http://bit..ly/ cCkWZa).
Документация от разработчиков браузеров:
«Офлайновые ресурсы в Firefox» (https://developer..mozilla..org/En/Offline_resources_ in_Firefox) на сайте Центра Mozilla для веб-разработчиков;
«Кэш офлайновых приложений HTML5» (http://developer..apple..com/safari/ library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/
OfflineApplicationCache..html) — часть «Руководства по программированию для
локального хранилища и офлайновых приложений в среде Safari» (http:// developer..apple..com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/
Introduction/Introduction..html).
Учебные и демонстрационные материалы:
«Об использовании HTML5 в платформе Gmail для мобильных устройств. Автономная работа с помощью кэша приложения. Часть 1» (http://googlecode.. blogspot..com/2009/04/gmail-for-mobile-html5-series-using..html) — статья Эндрю Гри-
ва (Andrew Grieve);
«Об использовании HTML5 в платформе Gmail для мобильных устройств. Автономная работа с помощью кэша приложения. Часть 2» (http://googlecode..blogspot.. com/2009/05/gmail-for-mobile-html5-series-part-2..html) — статья Эндрю Грива;
«Об использовании HTML5 в платформе Gmail для мобильных устройств. Автономная работа с помощью кэша приложения. Часть 3» (http://googlecode..blogspot.. com/2009/05/gmail-for-mobile-html5-series-part-3..html) — статья Эндрю Грива;
«Отладка кэша офлайновых приложений HTML5» (http://jonathanstark..com/ blog/2009/09/27/debugging-html-5-offline-application-cache/) — статья Джонатана Старка (Jonathan Stark);
«Офлайновое HTML5-приложение для редактирования и публикации изобра-
жений» (http://hacks..mozilla..org/2010/02/an-html5-offline-image-editor-and-uploader- application/) — статья Пола Руже (Paul Rouget).
9 Веб-формы как форма безумия
Приступим
Вы знаете о веб-формах все, не так ли? Действительно, чего там сложного: создать контейнер <form>, добавить несколько полей <input type="text">, возможно, одно <input type="password"> и увенчать конструкцию великолепной кнопкой <input type="submit">.
Увы, это лишь незначительная часть всех современных функций. В HTML5 появилось больше десятка новых типов полей ввода, которые теперь можно использовать в формах. Когда я говорю «использовать», я имею в виду «использовать прямо сейчас» — без каких-либо уловок или обходных путей. Не стоит обольщаться: я не хочу сказать, что все эти новые чудесные функции уже поддерживаются во всех браузерах. Отнюдь. В современных браузерах формы с новыми элементами по-настоящему в фаворитах, а вот в старых браузерах такие формы выглядят более прохладно. Но в каждом старом браузере, даже в IE6, благополучно поддерживается какой-то рудимент новой функциональности.
Подсказывающий текст
Первое, чем обогащены HTML5-формы по сравнению с прежним поколением вебформ, — это подсказывающий текст в полях ввода. Подсказывающий текст отображается внутри поля до тех пор, пока оно пусто и не несет фокуса. Как только пользователь щелкнет на нем или перейдет к нему с помощью табулятора, подсказывающий текст исчезнет.
Вам, наверное, уже приходилось видеть подсказывающий текст. Так, в адресной строке Mozilla Firefox есть подсказывающий текст вида Поиск в закладках и журна-
ле (рис. 9.1).
Рис. 9.1. Подсказывающий текст в строке поиска браузера Firefox
Если щелкнуть на адресной строке или перейти к ней с помощью табулятора, подсказывающий текст исчезнет (рис. 9.2).
156 |
Глава 9.. Веб-формы как форма безумия |
Рис. 9.2. Подсказывающий текст исчезает при наведении фокуса
Забавно, что Firefox 3.5 не поддерживает подсказывающий текст в веб-формах на страницах. Что ж, такова жизнь. В каких версиях браузеров работают подсказки, можно узнать из табл. 9.1.
Таблица 9.1. Поддержка подсказывающего текста
IE |
Firefox |
Safari |
Chrome |
Opera |
iPhone |
Android |
– |
3..7+ |
4..0+ |
4..0+ |
– |
– |
– |
Спомощью следующего кода вы можете добавить подсказывающий текст
всвои веб-формы:
<form>
<input name="q" placeholder="Поиск в закладках и журнале">
<input type="submit" value="Поиск">
</form>
Браузеры без поддержки атрибута placeholder его вполне безвредно игнорируют.
Разметка в вопросах и ответах
Вопрос: Можно ли пользоваться HTML-разметкой в атрибуте placeholder? А вдруг я захочу вставить картинку или, скажем, поменять цветовую схему?
Ответ: Атрибут placeholder — сугубо текстовый и не может содержать HTML-кода. Однако в некоторых
браузерах стиль текста подсказок позволяет установить особые расширения CSS (http://trac.webkit.org/ export/37527/trunk/LayoutTests/fast/forms/placeholder- pseudo-style.html).
Поля с автофокусировкой
На многих сайтах с помощью JavaScript реализована автоматическая фокусировка первого из полей веб-формы. Так, на главной странице Google..com форма поиска несет фокус, так что запрос можно вводить сразу, не помещая курсор в поле. Это удобно для большинства посетителей, но может мешать «продвинутым» пользователям и людям с особыми потребностями. Если на такой странице нажать Пробел, то прокрутка на один экран вниз не сработает, как можно ожидать; вместо этого в поле ввода появится пробел. Еще пример: если переместить фокус в другое из полей формы, пока страница грузится, то «услужливая» система вернет курсор обратно, в начальное поле. Это сбивает с ритма, к тому же пользовательский ввод попадает не туда, куда следует.
Все эти специальные случаи трудно учесть при автофокусировке с помощью JavaScript. Еще недавно пользователей, которых раздражает «кража» фокуса вебстраницами, ничем нельзя было утешить.
Поля с автофокусировкой |
157 |
Для решения проблемы в HTML5 введен атрибут autofocus, который может быть применен к любому элементу веб-формы. Этот атрибут работает в полном соответствии с названием, то есть перемещает курсор в одно из полей ввода на форме. Но это не сценарное решение, а HTML-код, значит, его поведение на всех сайтах будет одинаково. Со своей стороны, разработчики браузеров и браузерных расширений, возможно, предложат пользователям функцию отключения автофокусировки.
В табл. 9.2 показано, какие из браузеров поддерживают автофокусировку.
Таблица 9.2. Поддержка автофокуса
IE |
Firefox |
Safari |
Chrome |
Opera |
iPhone |
Android |
– |
– |
4..0+ |
3..0+ |
10..0+ |
√ |
√ |
Вот как можно назначить автофокусировку одного из полей формы:
<form>
<input name="q" autofocus>
<input type="submit" value="Поиск">
</form>
Браузеры, которые не поддерживают атрибут autofocus, просто игнорируют его. Аеслимызахотим,чтобыавтофокусировкаработалавезде,анетольковHTML5браузерах? Тогда придется остаться при нынешнем сценарии автофокусировки, сде-
лав в нем два небольших изменения.
1.Добавить атрибут autofocus в HTML-код.
2.Протестировать поддержку атрибута autofocus в браузере (см. раздел «Автофокусировка в формах» главы 2). Запускать сценарий следует только в том случае, если встроенной поддержки атрибута autofocus в браузере нет.
<form name="f">
<input id="q" autofocus> <script>
if (!(“autofocus” in document.createElement(“input”))) { document.getElementById("q").focus();
}
</script>
<input type="submit" value="Поехали">
</form>
...
Страница http://diveintohtml5..org/examples/input-autofocus-with-fallback..html являет собой пример автофокусировки с запасным (сценарным) вариантом.
Секреты разметки
Многие веб-страницы для установки фокуса дожи- |
пока не будут загружены все картинки. Таким обра- |
даются события window.onload. Но оно не сработает, |
зом, если на странице много картинок, «наивный» |
|
|