HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Автор: Владимир Дронов
Год: 2011
ISBN: 978-5-9775-0596-3
Страниц: 416
Язык: Русский
Формат: PDF
Размер: 11 Мб

Download

Практическое руководство по созданию современных Web-сайтов, соответствующих концепции Web 2.0. Описаны языки HTML 5 и CSS 3, применяемые, соответственно, для создания содержимого и представления Web-страниц. Даны принципы Web-программирования на языке JavaScript с использованием библиотеки Ext Core. Рассказано о создании интерактивных Web-страниц, приведены примеры интерактивных элементов, позволяющие сделать Web-страницы удобнее для посетителя. Раскрыты вопросы реализации подгружаемого и генерируемого содержимого, семантической разметки, применения баз данных для формирования Web-страниц. Показаны способы расширения функциональности Web-сайтов с использованием Web-форм, элементов управления, свободно позиционируемых элементов и программного рисования средствами HTML 5.

+

API HTML5

Веб-приложения, работающие в режиме офлайн

До недавнего времени пользователи веб-приложений могли работать с ними лишь при наличии соединения с Интернетом. В офлайновом режиме веб-почта, календари и другие подобные инструменты оставались недоступными, и такая ситуация с большинством подобных приложений сохраняется до сих пор.
Работая офлайн, пользователи все-таки могут обращаться к некоторым страницам тех сайтов, которые они посещали. Эти страницы находятся в браузерном кэше, но его объем ограничен, а самим кэшем не так просто управлять. Если пользователя выбрасывает в офлайн непосредственно во время важного процесса — например, написания электронного сообщения или заполнения формы, — то, нажав кнопку Submit (Отправить), он может потерять все введенные данные.
В спецификации HTML5 описано несколько решений этой проблемы, в частности локальное и сеансовое сохранение данных на устройстве, а также работа
с офлайновым HTTP-кэшем приложений. Благодаря такой технологии приложение остается доступным даже в офлайновом режиме. В HTML5 есть ряд возможностей, позволяющих справляться именно с такими проблемами и создавать приложения, которые не теряют всех функций, оказываясь в офлайне. К числу таких решений относятся indexDB, API для офлайнового кэширования приложений, события соединения, статусы, а также API LocalStorage и SessionStorage.

Кэш приложений

Если вы хотите создавать игры для Интернета, которые могли бы составить конкуренцию нативным играм с мобильных устройств, то необходимо гарантировать, что пользователь сможет играть в вашу игру, даже будучи в офлайне. Мы хотим, чтобы любители игры CubeeDoo могли развлекаться ею и дома, используя Wi-Fi, и на природе — некогда любоваться пейзажами, если под рукой такая классная игра, — и даже во время перелета через Тихий океан. Кэш приложений позволяет создавать такие веб-приложения, которые будут доступны и в режиме офлайн. Ранее браузеры для ПК могли сохранять HTML-файл и ассоциированные с ним медиа лишь в папке на локальном компьютере. Этот метод работает со статическим контентом, но не предусматривает возможности обновления, а это обычно очень негативно воспринимается пользователями. С повсеместным распространением веб-приложений как никогда важно стало
обеспечивать доступность таких приложений в офлайновом режиме. Браузеры уже давно умеют кэшировать компоненты веб-сайта, но HTML5 позволяет справиться с некоторыми сложностями этого процесса, предоставляя API кэша приложений (AppCache).

Обновление кэша

Браузерный кэш не обновляется и не перезаписывается до тех пор, пока в файл описания не будут внесены изменения или пока не будут применены методы
JavaScript applicationCache. Недостаточно внести изменения в один из файлов, перечисленных в файле описания, — например, на языке JavaScript, HTML или
CSS. Каждое такое изменение должно быть отражено в самом файле описания. Как правило, в файл описания добавляют комментарий, чтобы принудительно
выполнить обновление файла. Так, если в предыдущем фрагменте кода заменить комментарий #version01 на #version02, то браузер будет проинформирован о том, что кэш требуется обновить. Если использовать вместо номера версии отметку времени, то такая информация будет более интуитивно понятной. Обратите внимание: неважно, какую именно информацию вы внесете в комментарий, — важны сам факт внесения изменения и то, что эта операция будет зафиксирована браузером.

В целом, номер версии для нашего кэша — это и есть комментарий во второй строке. Когда пользователь обращается к этой веб-странице, браузер сначала загружает сайт из кэша — при условии наличия такого кэша. Затем с сервера скачивается файл .appcache и сравнивается с файлом .appcache, находящимся в памяти. Если в файле описания обнаруживаются изменения — например, изменился номер версии, — то будет скачана и остальная часть кэша. Именно поэтому мы и добавляем комментарий. Изменить его гораздо проще, чем, например, имя файла (и всех файлов, которые на него ссылаются). Изменение комментария с указанием номера версии или отметкой времени уже стало стандартным способом информирования браузера о том, что файл описания следует считать обновленным. Как только приложение оказывается в офлайне, оно остается в кэше до тех пор, пока пользователь сам не удалит в браузере данные, касающиеся вашего сайта, либо файл .appcache не будет изменен, либо кэш приложений не будет изменен программно.