- •Как мы сюда попали?
- •Приступим
- •MIME-типы
- •Большое отступление о том, как появляются стандарты
- •Не отрывая карандаша
- •Все, что вы знаете об XHTML, — это ложь
- •Альтернативная точка зрения
- •WHAT? Что?!
- •И снова о W3C
- •Послесловие
- •Для дальнейшего изучения
- •Тестирование функций HTML5 в браузере
- •Приступим
- •Способы тестирования браузера
- •Modernizr: библиотека для тестирования HTML5-функций
- •Холст
- •Рисование текста
- •Видео
- •Форматы видео
- •Локальное хранилище
- •Фоновые вычисления
- •Офлайновые веб-приложения
- •Геолокация
- •Типы полей ввода
- •Подсказывающий текст
- •Автофокусировка в формах
- •Микроданные
- •Для дальнейшего изучения
- •Что все это значит?
- •Приступим
- •Определение типа документа
- •Корневой элемент
- •Элемент HEAD
- •Кодировка символов
- •Ссылочные отношения
- •Новые семантические элементы HTML5
- •Большое отступление о том, как браузеры обрабатывают незнакомые элементы
- •Верхние колонтитулы
- •Рубрикация
- •Дата и время
- •Навигация
- •Нижние колонтитулы
- •Для дальнейшего изучения
- •С чистого листа (холста)
- •Приступим
- •Простые фигуры
- •Координатная сетка холста
- •Контуры
- •Текст
- •Градиенты
- •Изображения
- •Живой пример
- •Для дальнейшего изучения
- •Видео в Сети
- •Приступим
- •Видеоконтейнеры
- •Видеокодеки
- •Theora
- •Аудиокодеки
- •MPEG-1 Audio Layer 3
- •Advanced Audio Coding
- •Vorbis
- •Что работает в Интернете?
- •Проблемы лицензирования видео H.264
- •Кодирование Ogg-видео с помощью Firefogg
- •Пакетное кодирование Ogg-видео с помощью ffmpeg2theora
- •Кодирование H.264-видео с помощью HandBrake
- •Пакетное кодирование H.264-видео с помощью HandBrake
- •Кодирование WebM-видео с помощью программы ffmpeg
- •…И наконец разметка
- •Живой пример
- •Для дальнейшего изучения
- •Вот мы вас и нашли!
- •Приступим
- •API геолокации
- •Покажите мне код
- •Обработка ошибок
- •Требую выбора!
- •На помощь спешит geo.js
- •Живой пример
- •Для дальнейшего изучения
- •Локальное хранилище: прошлое, настоящее, будущее
- •Приступим
- •Краткая история прототипов локального хранилища до HTML5
- •HTML5-хранилище: вводный курс
- •Использование HTML5-хранилища
- •Следим за состоянием HTML5-хранилища
- •Ограничения в современных браузерах
- •HTML5-хранилище в действии
- •Альтернативы: хранилище без ключей и значений
- •Для дальнейшего изучения
- •На волю, в офлайн!
- •Приступим
- •Манифест кэша
- •Раздел NETWORK
- •Раздел FALLBACK
- •Поток событий
- •«Убей меня поскорее!», или Отладка как одно из изящных искусств
- •Строим офлайновое приложение
- •Для дальнейшего изучения
- •Веб-формы как форма безумия
- •Приступим
- •Подсказывающий текст
- •Поля с автофокусировкой
- •Адреса электронной почты
- •Веб-адреса
- •Числа как счетчики
- •Числа как ползунки
- •Выборщики даты
- •Формы поиска
- •Выборщики цвета
- •И еще об одной вещи
- •Для дальнейшего изучения
- •Микроданные и другие красивые слова
- •Приступим
- •Что такое микроданные?
- •Структура микроданных
- •Разметка данных о человеке
- •Разметка данных об организации
- •Разметка данных о событии
- •Разметка клиентских отзывов
- •Для дальнейшего изучения
- •Приложение. Универсальный почти алфавитный определитель всего на свете
- •Элементы
- •Для дальнейшего изучения
Альтернативы: хранилище без ключей и значений |
141 |
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]); gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true"; gMoveCount = parseInt(localStorage["halma.movecount"]);
drawBoard(); return true;
}
Для этой функции очень важна оговорка, которую я сделал выше и повторю здесь: данныехранятсяввидестрок;есливыхотитеработатьсданныминестрокового типа, их надо конвертировать при получении. Так, например, флаг «Идет игра» (gGameInProgress) имеет булев тип. В функции saveGameState() мы сохраняем его, не заботясь о типе данных:
localStorage["halma.game.in.progress"] = gGameInProgress;
Но в функции resumeGame() надо рассматривать значение, взятое из локального хранилища, как строку. Соответствующее логическое значение мы должны построить сами:
gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
Так же и целое количество ходов (gMoveCount) в функции saveGameState() просто сохраняется:
localStorage["halma.movecount"] = gMoveCount;
В функции же resumeGame() мы должны привести значение к целочисленному типу, используя стандартную функцию JavaScript parseInt():
gMoveCount = parseInt(localStorage["halma.movecount"]);
Альтернативы: хранилище без ключей и значений
Хотя прошлое HTML5-хранилища изобилует уловками и обходными путями (см. раздел «Краткая история прототипов локального хранилища до HTML5» этой главы), его нынешнее состояние на удивление благополучно. Новый API был стандартизован и реализован во всех основных браузерах, на большинстве платформ и устройств. У веб-разработчика не каждый день такой праздник, верно? Но вообще современные опыты не ограничиваются пресловутыми 5 Мбайт и именованными парами «ключ — значение». Вот почему есть несколько альтернативных точек зрения на будущее постоянного локального хранилища.
Одна альтернатива уже знакома вам по крайней мере своим трехбуквенным названием: SQL. Разработанный специалистами Google в 2007 году кроссбраузерный плагин Gears с открытым исходным кодом имел встроенную базу данных на основе SQLite. Этот ранний прототип впоследствии повлиял на разработку спецификации Web SQL Database. База данных Web SQL (ранее известная как WebDB) — тонкая обертка вокруг базы данных SQL. С ее помощью можно из JavaScript делать, например, следующее:
142 |
Глава 7.. Локальное хранилище: прошлое, настоящее, будущее |
openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) {
db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docids (id, name)');
}, error);
});
Как можно видеть, основное действие запрограммировано в строке с методом ExecuteSQL. Здесь могла бы быть любая другая корректная SQL-команда с использованием SELECT, UPDATE, INSERT или DELETE. Итак, серверное программирование баз данных теперь доступно прямо из JavaScript!
В табл. 7.3 показано, в каких браузерах реализована спецификация Web SQL Database.
Таблица 7.3. Поддержка Web SQL Database
IE |
Firefox |
Safari |
Chrome |
Opera |
iPhone |
Android |
– |
– |
4..0+ |
4..0+ |
10..5+ |
3..0+ |
– |
Конечно, если вам доводилось пользоваться несколькими разными СУБД, то вы понимаете, что SQL — это скорее маркетинговый термин, а не жестко регламентированный стандарт (иногда то же самое говорят об HTML5, но это неважно). Есть действующая спецификация SQL, она называется SQL-92; но ни один сервер баз данных не соответствует ей и только ей. Есть SQL компании Oracle, SQL Microsoft, SQL в MySQL, SQL в PostgreSQL, SQL в SQLite. Более того, в каждом из этих про-
дуктовфункциональностьSQLсовременемрасширяется,такчтодажеобозначения вида «SQL в SQLite» оказываются недостаточными. Надо говорить: «версия SQL, которая поставляется с SQLite версии X.Y.Z».
Все это подводит нас к следующему замечанию, с которого ныне начинается спецификация Web SQL:
Эта спецификация в своем развитии достигла тупика.. Все заинтересованные разработчики пользуются одной и той же серверной системой SQL (а именно, SQLite), но, чтобы двигаться по пути стандартизации, надо иметь несколько независимых реализаций.. Пока не найдется разработчик, заинтересованный в реализации данной спецификации на основе другой СУБД, описание диалекта SQL здесь представляет собой просто ссылку на Sqlite.. Для настоящего стандарта такое положение вещей неприемлемо..
Вот тот фон, на который следует проецировать мой рассказ о другой альтернативе. Это мощное локальное хранилище для веб-приложений Indexed Database API, ранее известное как WebSimpleDB. Теперь его кратко называют IndexedDB.
Indexed Database API — так называемое хранилищеобъектов. По своей идейной базе хранилища объектов родственны SQL-СУБД. Есть базы данных с записями, в каждой из которых определенное количество полей. Каждому полю присвоен тип данных, устанавливаемый при создании базы. Можно выбрать некоторое подмножество записей и перечислить их с помощью «курсора». Изменения в хранилище объектов происходят в рамках «транзакций».
Если вы знакомы с программированием баз данных на SQL, то все эти термины, вероятно, знакомы вам. Основная разница в том, что у хранилища объектов нет
Для дальнейшего изучения |
143 |
собственного структурированного языка запросов. Нельзя построить команду вида
"SELECT * from USERS where ACTIVE = 'Y'". Вместо этого используются методы хранилища объектов, позволяющие открыть базу USERS, перечислить записи, отсеять записи, соответствующие неактивным пользователям, и востребовать значения всех полей в оставшихся записях с помощью методов-акцессоров. Статья
«IndexedDB для начинающих» (http://hacks..mozilla..org/2010/06/comparing-indexeddb- and-webdatabase/) — хорошее руководство по функциональности IndexedDB. В ней также скрупулезно сравниваются IndexedDB и Web SQL.
Ко времени написания этой главы система IndexedDB не была реализована ни в одном популярном браузере. В начале июня 2010 года разработчики Mozilla сообщили, что «в следующие несколько недель будет несколько тестовых сборок с IndexedDB», но до сих пор неизвестно, будет ли этот механизм включен в основной релиз Firefox 4. Зато фонд Mozilla заявил, что в их браузере не будет реализована спецификация Web SQL. Google рассматривает возможность поддержки
IndexedDBвChromiumиGoogleChrome.ДажеMicrosoftполагает,чтоIndexedDB— «отличное решение для веб-разработки».
Итак, чем для вас как для веб-разработчика полезна система IndexedDB? В данный момент абсолютно ничем. А через год? Возможно, как-то уже и пригодится. В разделе «Для дальнейшего изучения» есть ссылки на несколько хороших пособий начального уровня по IndexedDB.
Для дальнейшего изучения
HTML5-хранилище:
спецификация HTML5-хранилища (http://dev..w3..org/html5/webstorage/);
«Введение в DOM-хранилище» (http://msdn..microsoft..com/en-us/library/cc1 97062 (VS..85)..aspx) на сайте MSDN;
«Веб-хранилище: простое и мощное хранилище данных на клиентской стороне»
(http://dev..opera..com/articles/view/web-storage/),статьяШуэтанкаДиксита(Shwetank Dixit);
статья «DOM-хранилище» (https://developer..mozilla..org/en/dom/storage) на сайте Центра Mozilla для веб-разработчиков;
ПРИМЕЧАНИЕ
По большей части эта статья посвящена реализованному в Firefox прототипу — объекту globalStorage, нестандартному предшественнику объекта localStorage.. Поддержка интерфей-
са localStorage появилась в Mozilla Firefox начиная с версии 3..5..
«Локальное хранилище HTML5 для мобильных веб-приложений» (http://www.. ibm..com/developerworks/xml/library/x-html5mobile2/), руководство на сайте IBM для разработчиков.
Предшествующие HTML5 разработки Брэда Ньюберга и соавторов:
«В Internet Explorer есть встроенная поддержка постоянного хранения дан-
ных?!?!» (http://codinginparadise..org/weblog/2005/08/ajax-internet-explorer-has-native.. html), об объекте userData в IE;
144 |
Глава 7.. Локальное хранилище: прошлое, настоящее, будущее |
хранилище Dojo (http://docs..google..com/View?docid=dhkhksk4_8gdp9gr#dojo_ storage) — часть более обширного руководства по использованию библиотеки Dojo Offline (ныне вышедшей из употребления);
справка по прикладному интерфейсу dojox.storage.manager (http://api..dojotoolkit.. org/jsdoc/HEAD/dojox..storage..manager);
SVN-репозиторий dojox.storage (http://svn..dojotoolkit..org/src/dojox/trunk/storage/).
Web SQL:
спецификация Web SQL Database (http://dev..w3..org/html5/webdatabase/);
«Знакомство с базами данных Web SQL» (http://html5doctor..com/introducing-web- sql-databases/) — статья Реми Шарпа;
демонстрация работы Web Database (http://html5demos..com/database);
сценарий persistence.js (http://zef..me/2774/persistence-js-an-asynchronous-javascript- orm-for-html5gears) — «асинхронная ORM на JavaScript», построенная на основе
Web SQL и Gears. IndexedDB:
спецификация Indexed Database API (http://dev..w3..org/2006/webapi/IndexedDB/).
«Не только HTML5: API баз данных и путь к IndexedDB» (http://hacks..mozilla.. org/2010/06/beyond-html5-database-apis-and-the-road-to-indexeddb/) — статья Эрана Ранганатана (Arun Ranganathan) и Шона Уилшера (Shawn Wilsher);
«Firefox 4 и IndexedDB: курс молодого бойца» (http://hacks..mozilla..org/2010/ 06/comparing-indexeddb-and-webdatabase/) — статья Эрана Ранганатана и Шона Уилшера.