Html5 использование. Что такое HTML5? Примеры использования html5

Если вам никогда раньше не приходилось встречаться с объектом history, не стоит волноваться по этому поводу. До сих пор он не мог предложить нам ничего полезного. В действительности, традиционный объект history имеет только одно свойство и три основных метода. Это свойство length - содержит информацию о количестве элементов в списке истории просмотров (т.е. в поддерживаемом браузером списке недавно посещенных веб-страниц). Вот пример использования этого свойства:

Alert("У вас сохранено " + history.length + " страниц, в истории браузера.");

History.back();

Эффект этого метода равнозначен нажатию пользователем кнопки браузера "Назад". Подобным образом можно использовать метод forward() для перемещения на один шаг вперед или метод go() для перехода вперед или назад на определенное количество шагов.

Но все это не представляет большой ценности, если только вы не хотите создать для веб-страницы собственные кнопки "Назад" и "Вперед". Но HTML5 добавляет этому объекту history несколько дополнительных возможностей, которые можно использовать для реализации намного более амбициозных задач.

Главной из этих возможностей является метод pushState() , который позволяет изменить URL в адресной строке браузера, не обновляя при этом содержимого страницы. Эта возможность приходится кстати в специфической ситуации, а именно при создании динамических страниц, которые незаметно загружают новое содержимое и плавно обновляют себя. В такой ситуации URL страницы и ее содержимое могут рассогласоваться.

Например, если страница загрузит в динамическом режиме содержимое с другой страницы, первоначальный URL страницы не изменится, что может вызвать разнообразные проблемы с созданием закладки для этой страницы. Эту проблему можно решить с помощью отслеживания истории сеансов.

Если вы пока не видите, как это сделать не переживайте, в следующем разделе мы рассмотрим страницу, идеально подходящую для применения истории просмотров.

Простой документ HTML5

Рассмотрим один из простейших документов HTML5. Он начинается с указания типа документа с помощью специального кода описания типа документа (значение этого кода объясняется в следующем разделе), после чего задается кодировка и название документа, а потом идет его содержимое. В данном случае содержимое состоит из одного абзаца текста:

Крошечный документ HTML5

Этот простой документ можно упростить еще больше. Например, конечный тег вообще-то не является обязательным в стандарте HTML5, т. к. браузеры знают, как закрывать все открытые элементы в конце документа (а стандарт HTML5 узаконивает это поведение). Но подобное срезание углов вместо упрощения делает разметку более сложной для понимания и может вызвать неожиданные ошибки.

Большинство веб-разработчиков придерживается мнения, что использование традиционных разделов и полезно для облегчения восприятия документа, т.к. они четко разделяют информацию о странице (заголовок страницы) и само содержимое (основная часть страницы). Такая структура особенно полезна, когда к странице добавляются сценарии, таблицы стилей и метаэлементы:

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент , как показано в следующем листинге:

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

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

Использование элементов , и является просто вопросом стиля. Страница без этих элементов будет работать отличнейшим образом даже на старых браузерах, которые и слыхом не слыхивали ни о каком HTML5. Фактически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов , и , даже если разработчик и не использовал их.

На данном этапе этот пример страницы является чем-то средним между самым простым HTML5-документом и расширенной отправной точкой практической веб-страницы HTML5. В последующих разделах мы добавим к нему остальные необходимые элементы и копнем глубже в разметку.

Описание типа документа HTML5

В первой строке каждого HTML5-документа всегда дается описание типа документа. Это описание ясно указывает, что далее следует HTML5-содержимое, и выглядит следующим образом:

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

Даже профессиональные веб-разработчики были вынуждены вставлять описание типа документа XHTML методом копирования и вставки из другого документа. А описание типа документа HTML5 короткое, четкое и легко вводится вручную.

Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответствует новой концепции HTML5 как живого языка. Добавленные в HTML новые возможности автоматически доступны для размещения на странице, не требуя для этого изменений в описании типа документа.

Все это порождает непростой вопрос: если HTML5 - живой язык, то зачем тогда для страницы вообще нужно описание типа документа?

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode) . В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

А обнаружив на странице описание типа документа, браузер знает, что обработку этой страницы требуется выполнять, следуя более строгим правилам режима стандартов (standards mode) , который обеспечивает единообразное форматирование и структуру страницы при ее отображении любым современным браузером. За некоторыми исключениями, браузеру совершенно безразлично, какой именно тип документа указан в описании. Он просто проверяет, что страница имеет какое-либо описание типа документа. Описание типа документа HTML5 просто самое короткое действительное описание типа документа, которое задействует режим стандартов браузера.

Кодировка символов

Кодировка - это стандарт, указывающий компьютеру, каким образом преобразовывать текст в последовательность байтов при записи текста в файл (а также, как выполнять обратное преобразование при открытии файла). По историческим причинам в мире существует множество разных кодировок. В настоящее время практически на всех веб-сайтах используется компактная и быстрая кодировка UTF-8, поддерживающая все символы других алфавитов, которые вам когда-либо могут потребоваться.

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

HTML5 делает эту задачу легкой. Для этого нужно лишь вставить элемент в самом начале блока (или, если элемент не используется, сразу же после кода описания типа документа):

Крошечный документ HTML5

Инструменты для веб-разработки, такие как Dreamweaver или Expression Web, вставляют этот элемент автоматически при создании страницы. Эти инструменты также обеспечивают сохранение файлов в кодировке UTF. Но при создании веб-страницы с помощью обычного текстового редактора, чтобы обеспечить сохранение файлов в правильной кодировке, может потребоваться выполнить дополнительные шаги.

Язык

Считается хорошим тоном указывать естественный язык веб-страницы. Эта информация может быть иногда полезной для других, например, поисковые движки могут использовать ее для фильтрации результатов поиска, чтобы возвратить только страницы на указанном языке.

Вставить в веб-страницу информацию о языке легче всего через элемент :

Информация о языке также может быть полезной, если страница содержит текст на разных языках, который нужно прочитать с помощью программы чтения экранного текста. В таком случае атрибут lang с кодом соответствующего языка вставляется в нужном месте документа, например, в элементы , охватывающие текст на разных языках. Таким образом, программа чтения экранного текста способна определить, какой текст она может читать.

Добавление таблицы стилей

Практически в каждой странице должным образом разработанного профессионального веб-сайта используются таблицы стилей. Для указания требуемой таблицы стилей используется элемент в блоке документа HTML5:

Крошечный документ HTML5

Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей - CSS, то в добавлении атрибута type="text/css", который требовался ранее, больше нет надобности.

Добавление JavaScript-кода

Язык сценариев JavaScript изначально создавался как средство для трудоемкого способа придания блеска и обаяния скучным веб-страницам. В настоящее время основная область применения JavaScript сместилась с разработки прибамбасов интерфейса на разработку нестандартных веб-приложений, включая сверхэффективных клиентов электронной почты, текстовых редакторов и картографических движков, которые исполняются непосредственно в браузере.

Код JavaScript вставляется в документ HTML5 по большому счету таким же способом, как и в традиционную HTML-страницу. В следующем листинге приводится пример вставки в веб-документ кода JavaScript по ссылке на внешний файл:

Крошечный документ HTML5

Атрибут language="JavaScript" не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript - единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге . Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web - метка особенности сети) в блок сразу же после строки кодировки. Делается это таким образом:

Крошечный документ HTML5

Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку "Разрешить заблокированное содержимое".

Все другие браузеры не обращают внимания на метку MOTW и используют одни и те же настройки безопасности как для страниц, загружаемых с удаленных веб-сайтов, так и для локальных файлов HTML.

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

Что такое HTML5?

На первый взгляд HTML5 - это всего лишь новая версия языка разметки. Однако сейчас под этим термином подразумевают несколько иное. Рассматривать HTML5 без упоминания того же CSS3 просто нелепо, поскольку для разработки действительно современных web-приложений без него никак не обойтись. Нельзя забывать и о JavaScript. С его помощью реализуется обращение к богатому API, описанному в стандарте HTML5. Резюмируя все вышесказанное, напрашивается определение: HTML5 - это совокупность современных технологий/стандартов (JS, HTML5, CSS3 и так далее), применяемых для разработки web-приложений.

Капелька истории

HTML5 появился отнюдь не внезапно. Его разработка началась еще в 2007 году. За процесс работки отвечала специально созданная группа от консорциума W3C. Но многие возможности HTML5 были придуманы еще в рамках стандарта Web Application 1.0, а над ним корпели аж с 2004 года. Так что в реальности HTML5 не такая уж и юная технология, как может показаться на первый взгляд.

Первая черновая версия спецификации HTML5 стала доступна уже 22 января 2008 года. Прошло три года, но окончательная версия спецификации так и не готова и вряд ли поспеет в ближайшие годдва. Этот печальный момент обязывает разработчиков аккуратно применять новые возможности в своих проектах. Спецификация может запросто поменяться, да и не все современные браузеры (FireFox 4, Google Chrome 10, IE9, Opera 11) в полной мере поддерживают новые возможности.

Полезные рецепты

Говорить о теории HTML5 можно очень долго, но рубрика у нас называется «Кодинг», поэтому я предлагаю тебе прочувствовать возможности стандарта на практике. Я не стал заморачиваться над созданием сверхоригинальных рецептов, а решил привести примеры вещей, которые действительно полезны и которые уже сейчас можно и нужно применять на своих сайтах. Итак, поехали.

Рецепт №1: Включаем Drag&Drop на полную

Одной из приятных няшек (наверное, зря ты употребил столько энергетиков, ведь тут должно быть слово «фишек» - прим. ред.) HTML5 стала возможность применения File API и Drag and Drop API .

С их помощью можно организовать красивую передачу файлов с компьютера пользователя на сервер. Помнишь, раньше для отправки файлов всегда было поле с кнопочкой «Browse»? После ее нажатия появлялся стандартный диалог выбора файлов, в котором и требовалось выбрать файл для передачи. Назвать этот способ удобным язык не поворачивается. Особенно если речь идет о добавлении в очередь загрузки нескольких файлов.

Чуть позже умельцы начали лепить аплоадеры на флеше, которые предоставляли больший функционал, но имели серьезный недо статок - потребность в установленном флеше. Кроме того, в обоих случаях у пользователя не было возможности добавлять файлы для передачи путем простого перетаскивания мышкой на страницу.

А ведь технология Drag&Drop применяется в системе сплошь и рядом. Мне лично всегда хотелось просто выделить нужные файлы и легким взмахом крысы кинуть на страницу. Это куда удобней, чем рыскать в поисках файла при помощи стандартного диалога.

HTML5 внес свои коррективы, и теперь ничто не мешает организовать полноценный Drag&Drop для передачи файла на страницу. Первыми эту фичу реализовали гугловчане в Gmail. Если ты пользуешься гмылом, то наверняка давно заметил область, на которую можно перетащить файлы для приаттачивания к письму. Лично я активно пользуюсь этой функцией и сейчас покажу тебе, как замутить такую же для своего проекта. Наш проект будет состоять из трех файлов: sample.html, style.css и scripts.js. Мы, конечно, могли бы ограничиться и одним html-файлом, но тогда код получился бы нечитабельным. Не нужно мешать HTML с JS или CSS. Лучше все разбить по файлам, и потом спокойненько с ними работать. Первым делом подготовим структуру нашего приложения. Создавай файл sample.html и напиши в нем:

Тащи свои файлы сюда

Для удобства написания кода на JavaScript я подключил библиотеку jquery . После этого описал структуру будущего html-документа. Она проста до безобразия - нам требуется описать поле, на которое пользователь должен перетягивать файлы. Для этого необходим лишь один div-контейнер. Если сейчас открыть страницу в браузере, то ничего хорошего ты не увидишь. Чтобы наше поле стало заметным визуально, требуется его оформить при помощи CSS. Открываем файл style.css и пишем в него следующий код:

#box { width: 500px; height: 300px; border: 2px dashed #000000; background-color: #FCFFB2; text-align: center; color: #3D91FF; font-size: 2em; font-family: Verdana, sans-serif; -moz-border-radius: 8px; -webkit-border-radius: 8px; } #label { position: relative; top: 2%; }

Идентификатор «box » - это и есть наш будущий контейнер для приема файлов (на эту область пользователь должен перетаскивать документы). Чтобы юзер не промахнулся, я делаю область побольше и в качестве варианта обрамления выбираю dashed - пунктирные линии. Обычные пунктирные линии смотрятся не очень, поэтому я сразу задаю значения для свойств: -moz-border-radius и -webkitborderradius. Вот сейчас ты можешь открыть созданную страницу в браузере и оценить общий вид.

Однако если сейчас попробовать что-то перетащить, то ничего интересного не произойдет. Перетаскиваемый файл просто откроется в web-браузере, и все. Исправить ситуацию поможет небольшой кусочек кода на JavaScript :

$(document).ready(function() { //Добавляем обработчики событий var mybox = document.getElementById("box") mybox.addEventListener("dragenter", dragEnter, false); mybox.addEventListener("dragexit", dragExit, false); mybox.addEventListener("dragover", dragOver, false); mybox.addEventListener("drop", drop, false); }); function dragEnter(evt) { evt.stopPropagation(); evt.preventDefault(); } function dragExit(evt) { evt.stopPropagation(); evt.preventDefault(); } function dragOver(evt) { evt.stopPropagation(); evt.preventDefault(); } function drop(evt) { evt.stopPropagation(); evt.preventDefault(); var files = evt.dataTransfer.files; var count = files.length; if (count > 0) handleFiles(files); } function handleFiles(fi les) { //Берем первый файл //Если требуется работать с несколькими //файлами, то здесь нужно организовать перебор var file = files; document.getElementById("label").innerHTML = "Поймал: " + file.name; var reader = new FileReader(); reader.onprogress = handleReaderProgress; reader.readAsDataURL(file); } function handleReaderProgress(evt) { if (evt.lengthComputable) { if (evt.loaded = evt.total) { alert("Загружен..."); } } }

На первый взгляд код может показаться громоздким и непонятным, но те, кто хоть немного знаком с JavaScript и jquery, сразу должны разобраться с происходящим. В самом начале я определяю события, возникновение которых меня интересует. Для каждого из них я описываю отдельную функцию. Например, событие dragExit возникает, когда пользователь перемещает курсор мыши из элемента, над которым происходит операция перетаскивания. Если пользователь перетащил файл, то управление берет на себя функция handleFiles() .

В ней я преднамеренно обращаюсь к самому первому файлу (files ) и начинаю с ним работать. Учти, пользователь может перетащить за раз сразу несколько файлов. Если твое приложение должно уметь обрабатывать такие ситуации, то организуем перебор всего массива files. В функции handleFiles() происходит все самое интересное.

Сначала я вывожу в элемент label (помнишь надпись «Тащи свои файлы сюда»?) имя файла, который пользователь перетянул на активную область, а затем начинаю его считывать при помощи объекта типа FileReader() . Подробней про него можно почитать в этой статье . На всякий случай я определяю обработчик события onProgress для объекта типа FileReader() . Это событие будет вызываться каждый раз, когда произойдет считывание порции данных. В самом обработчике я выставил условие: если объем загруженных данных равен размеру файла, значит, считывание успешно завершено, и можно выводить радостное сообщение.

Рецепт №2: Пей пиво, смотри видео, слушай рок

До появления HTML5 просмотр видео в web’е осуществлялся при помощи всевозможных flash-плееров. Нельзя сказать, что просмотр видео этим способом неудобен. Проблемы есть разве что в безопас ности (в последнее время Flash Player просто кишит уязвимостями) и необходимости установки самого плагина. Стандарт HTML5 предлагает элегантное решение - встроенная возможность проигрывания видео- и аудио-контента.

Наверное, многие уже догадались, что я говорю о тегах и . Они-то и позволяют встраивать аудио и видео прямо в страницу. Единственное огорчение, с которым приходится сталкиваться - набор поддерживаемых кодеков. Увы, для каждого браузера этот набор различен, поэтому есть большая вероятность, что твой видеоролик будет прекрасно отображаться в Chrome , а пользователи FireFox уйдут лесом. Чтобы не попасть в такую ситуацию, рекомендуется позаботиться о подстраховочном варианте - воспроизведению ролика с помощью Flash-плеера. О няшках (нет, все-таки он не перепутал слова, придется пролечить его электросудорожной терапией от аниме-зависимости - прим. Лозовского) и проблемах поговорили, теперь перейдем к практике. Для демонстрации воспроизведения видео я накидал простенький примерчик:

Здесь должно быть видео. Если ты видишь этот текст, то твой браузер не поддерживает новый стандарт.

Обрати внимание, что в примере для тега я указал атрибут poster. В нем я указываю путь к графическому файлу, который должен быть отображен сразу после загрузки страницы - «первый кадр».

Для чего это может пригодиться? Как вариант, в качестве такого изображения можно вставлять логотип своей компании/проекта. Тег применяется аналогичным образом. В нем разрешено указать сразу несколько источников на медиафайл. Таким образом, ты можешь выложить один и тот же файл в разных форматах (ogg, mp3). Если в браузере пользователя отсутствует кодек mp3, то будет предпринята попытка воспроизвести ogg. Получается, что путем несложных манипуляций легко решить проблему совместимости и быть уверенным, что пользователю удастся воспроизвести контент.

Рецепт №3: Where are you now (geolocation API)

Geolocation API - программный интерфейс для определения координат пользователя. На основании полученных данных легко отметить местонахождение юзера, скажем, на Google Maps. Где можно применять эту возможность? Да много где! Например, разработчики популярного сервиса микроблоггинга Twitter используют Geolocation API в web-интерфейсе твиттер-клиента. Если пользователь разрешает получать сведения о своем местоположении, то ко всем его твитам будет добавляться город, в котором он находится в данный момент.

Не сомневаюсь, что сейчас тебя мучает вопрос: «А откуда GAPI получают сведения о местоположении? ». Даже не думай, что в деле замешаны спутники-шпионы и прочие бондовские штучки. Все куда прозаичней - пакет информации для анализа строится на основании данных об IP-адресе, ближайших Wi-Fi хотспотах, GPS (при наличии устройства), GSM cell ID и так далее. Если заинтересовался теорией и практикой получения примерных координат из перечисленных выше источников, то советую поднять подшивку ][ и найти статью Step’а по данной теме, где он хорошо разобрал теоретическую часть, а также дал обзор соответствующего софта. Теперь взглянем на пример использования GAPI. Все предельно просто и понятно:

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { document.getElementById("latitude").innerHTML = position.coords.latitude; document.getElementById("longitude").innerHTML = position.coords.longitude; },); } Широта: Unknown Долгота: Unknown

Перед тем как пытаться получить координаты, необходимо убедиться, что браузер поддерживает GAPI. Если метод geolocation вернул true, то все в порядке и можно выполнить попытку получения координат. Для этого воспользуемся методом getGurrentPosition объекта navigator. В случае успеха мы получим координаты, которые прямиком отправятся в документ.

Рецепт №4: База данных в браузере

При разработке web-приложений мы привыкли использовать базы данных. MySQL , SQLite - продукты, знакомые каждому программисту. Пятая версия HTML приносит нам еще один подарок - возможность пользоваться автономной SQLite базой данных. Стоп!

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

Например, IE9 и FF4 пока такой возможности не имеют, так что познакомиться с фишкой на практике можно разве что в Google Chrome. Я не стану приводить пример реального кода, а покажу лишь общий принцип работы:

This.db = openDatabase("xakep", "1.0", "test", 8192); tx.executeSql("create mytable if not exists " + "checkins(id integer primary key asc, field_number_one string)", , function() { console.log("Запрос успешно выполнен"); }););

Повнимательнее присмотревшись к приведенному выше примеру, ты заметишь, что в целом работа со встроенной БД происходит точно так же, как и с обычным SQLite: открываем базу, готовим текст запроса и выполняем его.

HTML5.Shutdown()

Применять HTML5 в своих проектах или нет - дело твое. Я считаю, что сейчас самое время. Если ты профессионально занимаешься разработкой сайтов, то не ленись встраивать HTML5 -фишки уже сейчас. Само собой, не забывай заботиться о совместимости - реализовывай поддержку, как для современных браузеров, так и для устаревших. У тебя для этого есть все необходимое. Не тормози и старайся, чтобы твои проекты выделялись на фоне остальных. Удачи!

Как подстраховаться?

На протяжении всей статьи я говорил, что в настоящий момент современные браузеры поддерживают разный объем возможностей HTML5 . Именно поэтому нужно быть аккуратным и стараться не использовать уж очень экзотичные вещи. Сразу возникает вопрос: «А как узнать, какие возможности HTML5 поддерживает определенный браузер?». Есть несколько способов решения этой задачи, но мне больше всего по душе применение крошечной JavaScript-библиотеки - Modernizr (modernizr.com).

Библиотека распространяется совершенно бесплатно и стоит ее подключить к своему проекту, как она сразу выведет список возможностей HTML5 , которые поддерживает твой браузер. Чтобы протестировать функциональность библиотеки, тебе не обязательно сразу ее качать и подключать к своему проекту. Достаточно просто зайти на официальный сайт библиотеки и ты сразу увидишь, что поддерживает твоя бродилка, а что нет. Посмотри скриншоты посещения сайта при помощи Google Chrome и Internet Explorer 9. Несмотря на хорошую pr-компанию и восхваляющие статьи, бродилка от Microsoft явно поддерживает меньше возможностей, нежели Google Chrome.

HTML5 подвинет Flash

Одной из самых интересных фишек HTML5 является возможность создания анимации. Достигается это путем микса HTML5 и CSS3.

Такая анимация выглядит достаточно красиво и во многих случаях сможет заменить Flash. Могу с уверенностью сказать, что это будет очень не скоро, поскольку сейчас Flash освоить проще, нежели разобраться в малопонятном HTML5/CSS3-коде (имхо). Тем не менее, знать о такой фиче ты обязан. Крайне рекомендую тебе пройтись по нижеприведенным ссылкам и своими глазами увидеть красивые демки, демонстрирующие возможность анимации.

http://goo.gl/ZBUq - красивая демка, показывающая возможности Canvas’a;

http://goo.gl/DqWXg5 - Красивая 3D-шкатулка со встроенной строкой поиска от Google;

http://goo.gl/BCTDS - один клик мышью, и страница начнет заполняться шарами. Больше кликов - больше шаров. Как наполнишь страницу до краев - попробуй их резко перетащить. Выглядит очень забавно.

http://goo.gl/0QX5 - просто обалденная демка, демонстрирующая различные химические соединения. Обязательно стоит посмотреть: alteredqualia.com/canvasmol;

http://goo.gl/75JmF - Ты когда-нибудь хотел почувствовать себя патологоанатомом и исследовать тайны человеческого тела? Если да, то этот линк точно для тебя. Компания Google сделала отличную демку из смеси технологий WebGL, HTML5, CSS3 и Flash. Результатом коктейля стало интерактивное приложение, демонстрирующее 3D-тело человека, у которого ты можешь рассматривать строение внутренних органов. Я когда увидел его в первый раз - не мог оторваться.

HTML5 опять спасает от поиска JS реализации. Если нужно чтобы фокус по умолчанию устанавливался на определенный input, то ему достаточно задать атрибут autofocus .

Здесь так же возможны оба стиля написания, но я предпочитаю XHTML и пишу "autofocus=autofocus" . Хотя можно было написать только имя атрибута.

13. Поддержка аудио

Нам больше не нужны сторонние плагины для вывода аудио на страницах. HTML5 предоставляет нам элемент . Теперь нам не нужно заботиться о всяких плагинах для этого. К сожалению с поддержкой браузерами у HTML5 audio все тоже не очень гладко. Сегодня хорошим стилем считается заботиться от обратной совместимости.

Download this file.

Mozilla и Webkit не полностью поддерживают такое решение. Firefox хочет видеть.ogg или.wav файлы. Поэтому, сегодня следует создавать и указывать оба формата.

Safari не поддерживает ogg, но понимает mp3 и wav. IE9+ принимает AAC. MP3, более старые версии не поддерживают тэг. Опера работает с ogg и wav.

14. Поддержка видео

Как и в случае с , HTML5 video работает только в более или менее современных браузерах. К слову, не так давно YouTube анонсировал HTML5 плеер для своих видео . К сожалею, спецификации HTML5 не определяют кодек для видео, поэтому браузеры в этом плане различаются. IE9 и Safari поддерживают видео формата H.264, в то время как Opera и Firefox поддерживают theora и WebM форматы. Поэтому для гарантированной работы следует использовать 2 формата.