Пример использования html5. Примеры использования некоторых новых возможностей HTML5. Новые элементы html5

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

В этой статье мы рассмотрим некоторые новые возможности HTML5 с конкретными примерами их применения на практике

Новый DOCTYPE

Давайте вспомним, как определяется типичный XHTML документ в разделе DOCTYPE :

‹!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"›

Объявление типа документа на языке разметки выглядит куда более лаконично и читабельно

‹!DOCTYPE html›

Более того, вы можете применять данный DOCTYPE при верстке любой страницы. Если браузер не знаком с HTML5, то он применит отобразит страницу в стандартном режиме.

Улучшенная семантика кода

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

Элементы Header и Footer

Теперь можно избавиться от конструкций типа

‹div id="header"› … ‹/div› ‹div id="footer"› … ‹/div›

И начать использовать более понятные как человеку, так и машине

‹header› … ‹/header› ‹footer› … ‹/footer›

‹div› по происхождению не имеют никакой семантической структуры и могут многократно вкладываться в друг друга и в другие контейнеры. Использование же более продуманной семантической структуры позволяет четко разграничить для поисковой системы, где находится заголовок, подвал, а где основная информационная часть.

Элемент FIGURE

Рассмотрим следующую часть кода:

‹img src="mars.jpg" alt="About Mars" /› ‹p›This is an image of Mars‹/p›

В данном случае поисковым системам сложно определить, что тег ‹p›, содержащий описание картинки, собственно и является ее описанием. Именно поэтому такие конструкции лучше объединять в общий контейнер, которым является ‹figure ›:

‹figure› ‹img src="mars.jpg" alt="About Mars" /› ‹figcaption› ‹p›This is an image of Mars‹/p› ‹/figcaption› ‹/figure›

В данном случае пристутсвует дополнительный тег ‹figcapture› , который уточняет, где содержимое фигуры, а где ее заголовок

Использование hgroup

Представьте, что у вас на сайте заголовок состоит из основного заголовка и подзаголовка. Использование обычных тегов ‹h1› и ‹h2› никак не отображает зависимость между двумя этими пунктами. Поэтому их можно объединить семантически, используя тег ‹hgroup› :

‹header› ‹hgroup› ‹h1›Photogallery‹/h1› ‹h2›Our vacancy in Prague‹/h2› ‹/hgroup› ‹/header›

Никаких types для подключения скриптов и таблиц стилей

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

‹link rel="stylesheet" href="stylesheet.css" type="text/css" /› ‹script src="script.js" type="text/javascript"›‹/script›

Так вот, теперь больше нет необходимости указывать тип подключаемого файла. Браузер определит его автоматически. А значит в атрибуте type больше нет необходимости:

‹link rel="stylesheet" href="stylesheet.css" /› ‹script src="script.js"›‹/script›

Структура кода

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

‹p class=myClass id=pId›Content

Однако это может повредить читабельности кода со стороны разработчика. Поэтому стиль написания кода полностью зависит от вас, ведь старый (проверенный временем) стиль все так же поддерживается.

Редактируемый контент

HTML5 позволяет сделать контент вашего сайта полностью редактируемым, при этом нет необходимости вставлять скрытые поля для ввода текста. Все, что необходимо – это добавить атрибут contenteditable="true" (или без кавычек, как мы узнали из предыдущего пункта) к тому элементу, который вы хотите сделать доступным для редактирования. После этого, пользователь сможет редактировать его содержимое непосредственно со страницы.

В данном случае пользователь может добавлять, удалять и редактировать пункты неупорядоченного списка ‹ul› . Ниже приведен пример списка, пункты которого можно изменить

• Watch TV
• Listen to music
• Play videogames

Новые возможности форм

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

Поля для ввода email

Используйте атрибут type="email" к тегу ‹input› и e поля ввода появятся дополнительные уникальные способности по проверке правильности ввода адреса, и если адрес введен неверно, то браузер продемонстрирует пользователю предупреждающее сообщение.

‹input id="email" name="email" type="email" /›

Результат может быть таким (Google Chrome):

Также существуют и другие поля для ввода, например, адреса вебсайта или номера телефона. Принцип их работы схож с полем email .

Использование подсказок

Теперь нет необходимости использовать javascript для создания подсказок (placeholders) для ввода в текстовые поля. HTML5 предлагает использовать специальный атрибут placeholder , который может выводить фоновую текстовую подсказку для поля.

‹input name="email" type="email" placeholder="[email protected]" /›

Результат отображен ниже:

Данный пример будет работоспособен только в браузерах с поддержкой HTML5

Email:

Автофокус

Без использования javascript можно автоматически передать фокус элементу после загрузки страницы. Для этого нужно добавить атрибут без параметров тому полю, которое необходимо вводить в первую очередь.

‹input name="name" type="text" autofocus /›

Поле name будет активировано автоматически и готово для ввода текста.

Обязательные поля

Если необходимо отметить некоторые поля, как обязательные для заполнения теперь достаточно указать атрибут . Таким образом, при подтверждении формы браузер проведет проверку, заполнены ли необходимые поля и, если нет, выдаст сообщение.

‹input name="name" type="text" placeholder="John Smith" required /›

Ниже иллюстрация результата работы этого кода (Google Chrome):

Range Input

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

‹input type="range" name="quantity" min="0" max="100" step=".25" value="10" /›

Атрибуты min и max используются для задания крайних значений бегунка, step – это шаг изменения значения. Браузер Google Chrome отображает этот элемент управления следующим образом:

Данный пример будет работоспособен только в браузерах с поддержкой HTML5

Локальное хранилище

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

Само по себе Local Storage не является частью спецификации HTML5, однако тесно с ней связано.

Управление локальным хранилищем происходит через объект класса localStorage с помощью двух методов setData() и getData() . Ниже приведен пример, в котором используется описанный выше редактируемый список, который будет хранить последние введенные в него значения.

‹h1›To-Do List‹/h1› ‹ul contenteditable=true› ‹li›Watch TV‹/li› ‹li›Listen to music‹/li› ‹li›Play videogames‹/li› ‹/ul›

JavaScript (с применением библиотеки jQuery, но это необязательно):

$("#todo").blur(function () { localStorage.setItem("todoData", this.html); }); if (localStorage.getItem("todoData")) { $("#todo").html(localStorage.getItem("todoData")); }

Поддержка мультимедиа

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

Аудио

Для внедрения на страницу звукового файла необходимо воспользоваться тегом ‹audio› с необходимыми атрибутами. Пример ниже выводит на странице блок управления аудиофайлом, содержащим ссылку на скачивание этого файла. Звук будет воспроизводиться автоматически.

‹audio autoplay controls›
‹source src="file.ogg" /›
‹source src="file.mp3" /›
‹a href="file.mp3"›Download this file.‹/a›
‹/audio›

На странице данный блок может выглядеть вот так (браузер Google Chrome)

У данного тега есть свои особенности поддержки в браузерах. Например, браузер Mozilla Firefox работает с.ogg файлами, тогда как Webkit-браузеры работают с.mp3

Видео

До недавнего времени, единственным способом вставки видеоконтента на HTML-страницу было интегрирование Flash-контента. Однако теперь такую возможность предоставляют сами браузеры, отвечающие спецификациям HTML5. Особую популярность это приобрело тогда, когда на формат HTML5 перешел крупнейший видеохостинг YouTube.com.

Для успешного интегрирования видео в страницу необходимо воспользоваться тегом ‹video› . К сожалению между производителями браузеров нет единого мнения в каком формате должно быть представлено видео, поэтому каждый из них продвигает свой формат. Если IE и Safsri поддерживают видео в формате H.264 (которое поддерживалось Flash-плеерами), то Opera и Firefox продвигают open source форматы Vorbis и Theora. Chrome же может правильно отображать видео во всех форматах, в том числе WebM.

‹video controls preload› ‹source src="video.ogv" type="video/ogg; codecs="vorbis, theora"" /› ‹source src="video.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" /› ‹p›Your browser is old. ‹a href="video.mp4"›Download this video instead.‹/a› ‹/p› ‹/video›

Не все браузеры могут отображать HTML5 видео, поэтому под тегом ‹source› можно указать ссылку для скачивания видео, либо интегрировать Flash плеер.

Атрибут preload позволяет браузеру автоматически начинать загрузку видео, что может быть полезно, если размер видео достаточно большой. Атрибут controls позволяет установить стандартные элементы управления видеопотоком.

Кто на свете всех милее, всех румяней и желанней? Не подумай ничего пошлого, я имею в виду всего лишь новую версию языка разметки - 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 «широко шагает по стране», я в этой статье приведу пример пустого шаблона HTML5.

В новом стандарте многое упростилось и теперь базовая часть выглядит так:

...

Новые теги HTML5

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

С использованием новых тегов пустой шаблон HTML5 может выглядеть так:

Заголовок страницы Меню навигации Боковая колонка SideBar Контент - основное содержимое страницы. Подвал сайта

Упрощение написания DOCTYPE

Вспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:

Теперь же запись минимальна, проще, наверное некуда:

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

Необязательные теги в HTML5

Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только .

Трактовка русского языка как основного языка HTML документа

Тег определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.

В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».

Лишнее свидетельство того, что, нравится нам это или нет, но HTML5 обосновался здесь всерьёз и надолго, УЖЕ превратившись в стандарт. Мы делали интересные обзоры по данной теме в нашем журнале и прежде, приводя примеры роскошных новых сайтов, сконструированных средствами HTML5. Чтобы не повторяться, я решил предложить вам новую подборку образцов, не вошедших в предыдущие публикации, наглядно демонстрирующих передовые достижения, ставшие возможными, благодаря HTML5. Некоторые из них, правда, не такие уж новые, но есть и совсем свежие примеры. А также несколько сайтов, в оригинальном оформлении которых прослеживаются, пусть пока и не слишком явно, новые, но уже прижившиеся приёмы.

Надеюсь, подборка вдохновит и порадует вас. Всемирная паутина ждёт своих новаторов!

Хотелось вам когда-нибудь увидеть эпизоды из собственной жизни в качестве видео-ряда клипа на песню одной из ваших любимых групп? Благодаря HTML5, это стало не только возможным, но и легко осуществимым в вашем браузере. Заходите на страницу The Wilderness Downtown и указывайте там адрес дома, в котором прошло ваше детство. А дальше смотрите и наслаждайтесь удивительным путешествием в ваше прошлое, куда вас под музыку The Arcade Fire отправят Google Maps и Крис Милк (Chris Milk, режиссёр фильма).

02.

Компактная и гибкая ОС на основе Linux, обеспечивающая вам беспрепятственный доступ к нужным приложениям – как сетевым, так и встроенным.

03.

Хотите посмотреть на слово или фразу, набранные всеми шрифтами, заложенными в ваш компьютер, и представленные немного удобнее, чем в развёртывающемся меню? Что ж, пожалуйста. Попробуйте сами!

04.

Почему эта игра не попалась мне в начальной школе, когда я учился печатать? Серьёзно, если сумеете оторваться от неё, не дойдя до "10 атаки", то вы - более волевой человек, чем я. Z-type стимулирует развитие навыков быстрого и грамотного набора текста, используя элемент HTML5 Canvas, звуковые эффекты и javascript в космическом антураже, где вам угрожают пришельцы и астероиды. Давайте, попробуйте!

05.

Кто сказал, что прямолинейность и броскость (присущая, например, Flash-элементам) рррраздражают? Уж точно, не Nike, ведь сайт этой фирмы, прекрасно оформленный и отнюдь не режущий глаз, наглядно демонстрирует нам возможности HTML5 в плане отображения природной красоты совершенно по-новому. Зайдите и посмотрите.

06.

Новейший и лучший (однако, это спорное утверждение) способ представить доказательства того, что увиденное вами в небе не было иллюзией, - запечатлеть его на этом HTML5-холсте, разработанном ребятами из команды Klowdz. Можно даже купить оттиски ваших художеств! А ещё они обещают в скором будущем открыть "состязательный" раздел, где вы сможете до бесконечности спорить с друзьями о том, правое полушарие чьего мозга развито лучше.

07.

Ещё один из любопытных пробных проектов серии "Chrome Experiments", Canvas Cycle похож на окно редактирования, встроенное в вашу игровую приставку Super Nintendo. С его помощью можно выбирать 8-битные эпизоды из целого их ряда, настраивать параметры воспроизведения звука, масштабировать изображение, задавать скорость цикличного проигрывания (движения воды/звукового сопровождения), применять различные модификации циклов и, естественно, варьировать цвета.

08.

Трёхмерный калькулятор, сконструированный средствами HTML5, и позволяющий вам рассматривать объёмные диаграммы путём их вращения с помощью кнопок мыши. Что тут можно добавить? Вращайте!

09.

Эта гремучая смесь "зацепила" меня сильнее всех остальных примеров в нашей подборке. Почему? Да потому, что API-интерфейс от Google Maps позволяет вам снимать с изображения его модифицированные кальки, используя холст HTML5 Canvas. Замечательнее всего то, что возможности применения этой функции, очевидно, безграничны, при всей её практичности. В нашем конкретном случае мы видим, сколько велосипедов сейчас можно взять на прокат в пунктах вело-сети London Cycle, по данным, полученным через API-интерфейс Boris Bikes.

10.

Веб-приложение, дающее вам возможность извлекать картинки с различных сетевых ресурсов, подобных Flickr, и редактировать/сохранять их, используя для обработки основной набор весьма действенных инструментов.

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 формата.