Помимо красивого нового логотипа, что еще HTML5 предлагает нам как разработчикам jQuery? Я думал, что напишу пост о росте HTML5 и о том, как мы могли бы использовать его как гуру jQuery.
Фон на HTML5? HTML5 — это новая версия, которая заменяет HTML4.01 и XHTML1.1 как последний используемый веб-формат HTML. Новая спецификация W3C HTML5 «последний звонок» должна быть завершена в мае 2011 года (согласно их веб-сайту). В частности, HTML5 добавляет много новых синтаксических функций. К ним относятся элементы <video>, <audio> и <canvas>, а также интеграция содержимого SVG. Эти функции предназначены для того, чтобы упростить включение и обработку мультимедийного и графического содержимого в Интернете без необходимости использования собственных плагинов и API-интерфейсов. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, предназначены для обогащения семантического содержимого документов. Новые атрибуты были введены для той же цели, в то время как некоторые элементы и атрибуты были удалены. Некоторые элементы, такие как <a>, <cite> и <menu>, были изменены, переопределены или стандартизированы. API и DOM больше не являются запоздалыми размышлениями, но являются фундаментальными частями спецификации HTML5. HTML5 также детально определяет требуемую обработку недействительных документов, поэтому синтаксические ошибки будут обрабатываться всеми соответствующими браузерами и другими пользовательскими агентами единообразно. Ссылка: http://en.wikipedia.org/wiki/HTML5
Важные вещи, которые нужно знать:
Новые теги !!!
Новый - Определяет статью
Новый - определяет содержимое помимо содержимого страницы
Новый - Определяет звуковое содержание
Новый - Определяет графику
New - определяет командную кнопку
Новый - Определяет выпадающий список
Новый - Определяет детали элемента
Новый - Определяет внешний интерактивный контент или плагин
New - определяет заголовок элемента рисунка
Новый - Определяет группу медиа-контента и их заголовок
Новый - определяет нижний колонтитул для раздела или страницы
Новый - Определяет заголовок для раздела или страницы
Новый - определяет информацию о разделе в документе
New - определяет сгенерированный ключ в форме
Новый - определяет помеченный текст
Новый - Определяет измерение в предопределенном диапазоне
Новый - Определяет навигационные ссылки
Новый - определяет некоторые типы вывода
New - определяет ход выполнения задания любого типа
Новое - используется в аннотациях рубина
Новый - Определяет пояснения к рубиновым аннотациям.
Новый - Определяет аннотации рубина
Новый - Определяет раздел
New - Определяет медиа ресурсы
New - определяет заголовок элемента "detail"
Новый - Определяет дату / время
Новый - определяет видео
Новый - Определяет возможный разрыв строки
Устаревшие теги !!!
Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Не поддерживается в HTML5.
<![CDATA[ <span> Не поддерживается в HTML5.</span>
<span> <strike>Не поддерживается в HTML5.</strike></span> <strike>
</strike> <span> <strike><tt>Не поддерживается в HTML5.</tt></strike></span> <strike><tt>
</tt></strike> <span> <strike><tt><u>Не поддерживается в HTML5.</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <xmp> <span> <strike><tt><u>Не поддерживается в HTML5. </ Code> </ pre></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> <strong> W3C HTML5 Reference: </ strong> <a href="http://www.w3schools.com/html5/html5_reference.asp"> http://www.w3schools.com/html5/html5_reference. ASP </a> </ р></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> <strong> <audio>, <video> замените <object> для отображения мультимедийного содержимого. </ strong> </ p></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><pre> <code class = 'language-markup'> <! - следующий фрагмент кода HTML5 вставит видео WebM на веб-страницу.</u></tt></strike></span> <span> <strike><tt><u>-></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><video src = "movie.webm" poster = "movie.jpg" элементы управления></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>Это резервный текст для отображения, если браузер</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>не поддерживает элемент видео.</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u></ видео> </ код> </ PRE></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> Обратите внимание, что поддерживаемый по умолчанию формат мультимедиа для всех браузеров еще не определен. </ p></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> <strong> Новый тип документа: </ strong> <! DOCTYPE html>, который запускает режим рендеринга, соответствующий стандартам </ p></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> <strong> Элемент Canvas: </ strong> обеспечивает динамическую визуализацию 2D-фигур и растровых изображений с помощью сценариев </ p></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><h2> Примеры холста </ h2></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> Код JavaScript может получить доступ к области через полный набор функций рисования, аналогичных другим распространенным 2D API, что позволяет динамически генерировать графику.</u></tt></strike></span> <span> <strike><tt><u>Некоторые предполагаемые варианты использования холста включают построение графиков, анимации, игр и композиции изображений.</u></tt></strike></span> <span> <strike><tt><u>Использовать jQuery для динамического рисования на холсте? </ P></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><pre> <code class = 'language-markup'> <! - Следующий код создает элемент Canvas на странице HTML: -></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><canvas id = "example" width = "200" height = "200"></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>Этот текст отображается, если ваш браузер не поддерживает HTML5 Canvas.</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u></ Canvas> </ код> </ PRE></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><pre> <code class = 'language-javascript'> // Этот код рисует красный прямоугольник на экране.</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>var example = document.getElementById ('example');</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>var context = example.getContext ('2d');</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>context.fillStyle = "rgb (255,0,0)";</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>context.fillRect (30, 30, 50, 50); </ code> </ pre></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> Ссылка: <a href="http://en.wikipedia.org/wiki/Canvas_element"> http://en.wikipedia.org/wiki/Canvas_element </a> </ p></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><h2> Более интересные примеры HTML5 Canvas </ h2></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> <strong> Анимация шаров с логотипом Google </ strong> <br /></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><a href="http://jquery4u.com/demos/html5-canvas-animation/"> <img src = "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/jquery4u/2011/03/ google-html5-small.png "alt =" google-html5-small "title =" google-html5-small "width =" 176 "height =" 63 "class =" alignnone size-full wp-image-2336 "/ > </a> <br /></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><strong> Анимация падающего конфетти </ strong> <br /></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><a href="http://www.html5canvastutorials.com/labs/html5-canvas-interactive-building-map/"> <img src = "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/ jquery4u / 2011/03 / confetti-html5-small.png "alt =" confetti-html5-small "title =" confetti-html5-small "width =" 125 "height =" 108 "class =" alignnone size-full wp -image-2343 "/> </a> <br /></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><strong> Анимация дождевого облака </ strong> <br /></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><a href="http://www.html5canvastutorials.com/labs/html5-canvas-elastic-stars-with-kineticjs/"> <img src = "https://dab1nmslvvntp.cloudfront.net/wp-content/ uploads / jquery4u / 2011/03 / rainingcloud-html5-small.png "alt =" rainingcloud-html5-small "title =" rainingcloud-html5-small "width =" 177 "height =" 153 "class =" alignnone size- full wp-image-2344 "/> </a> </ p></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> <strong> WebGL: </ strong> Если вам нужна веб-графика, вы можете попробовать WebGL. <br /></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>Он использует элемент холста HTML5 и доступ к нему осуществляется через интерфейсы объектной модели документа. <br /></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>Ссылка: <a href="http://en.wikipedia.org/wiki/WebGL"> http://en.wikipedia.org/wiki/WebGL </a> </ p></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> В спецификации HTML5 ожидается <strong> поддержка перетаскивания </ strong>.</u></tt></strike></span> <span> <strike><tt><u>Еще предстоит увидеть, но Gmail использует веб-перетаскивание.</u></tt></strike></span> <span> <strike><tt><u>Я предпочитаю использовать jQuery для перетаскивания! </ P></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> <strong> Улучшенная обработка типов MIME: </ strong> читайте подробнее: http://en.wikipedia.org/wiki/MIME_type </ p></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><p> <strong> Использование микроданных: </ strong> это в основном данные, вложенные (html машиночитаемые аннотации) в контент для поисковых систем и сканеров, которые лучше понимают, какая информация содержится на веб-странице.</u></tt></strike></span> <span> <strike><tt><u>Узнайте больше о словарях микроданных: http://www.data-vocabulary.org/ </ p></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><h2> Пример микроданных </ h2></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><pre> <code class = 'language-markup'> <section itemscope itemtype = "http://data-vocabulary.org/Person"></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>Привет меня зовут</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><span itemprop = "name"> Джон Доу </ span>,</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>Я</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><span itemprop = "title"> аспирант-исследователь </ span></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>на</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><span itemprop = "affiliation"> Университет снов </ span>.</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>Мои друзья называют меня</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><span itemprop = "ник"> Джонни </ span>.</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>Вы можете посетить мою домашнюю страницу по адресу</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><a href="http://www.JhonnyD.com" itemprop="url"> www.JhonyD.com </a>.</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u></ section> <section itemprop = "address" itemscope itemtype = "http://data-vocabulary.org/Address"></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>я живу в</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><span itemprop = "street-address"> 1234 Peach Drive </ span></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><span itemprop = "locality"> Уорнер Робинс </ span></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u>,</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u><span itemprop = "region"> Грузия </ span>.</u></tt></strike></span> <strike><tt><u>
</u></tt></strike> <span> <strike><tt><u></ раздел></u></tt></strike></span> <strike><tt><u>
</u></tt></strike> </xmp>]]>
Распространенным заблуждением является то, что HTML5 может предоставлять анимацию на веб-страницах, что не соответствует действительности. Для анимации HTML-элементов необходим JavaScript / jQuery или CSS3. Анимация также возможна с использованием JavaScript / jQuery и HTML 4.
Лучшая обработка ошибок: HTML5 (текстовый / HTML) браузер будет гибким в обработке неверного синтаксиса.
HTML5 разработан так, что старые браузеры могут безопасно игнорировать новые конструкции HTML5. Нет больше тегов суп!
Улучшения в File API: много материалов для чтения на официальном рабочем проекте W3C: http://www.w3.org/TR/FileAPI/
Тестирование браузера
Я протестировал HTML5 с использованием Firefox 3.6 с помощью этого инструмента анализа веб-сайтов, и он, похоже, просто опережает IE и отстает от трех других основных браузеров. Не уверен, насколько точен этот инструмент, но результаты выглядят многообещающими для Google Chrome.
Последние версии браузеров HTML5:
Google Chrome 10.0.648 — 288 баллов
Опера 11,1 — 244 балла
Apple Safari 5.0.3 — 228 баллов
Mozilla Firefox 3,6 — 155 баллов
Microsoft Internet Explorer 9 — 130 баллов
Последние мысли: Поскольку спецификация еще не завершена, я бы посоветовал убедиться, что используемые вами теги широко поддерживаются браузерами, на которые вы нацеливаетесь, на основе их механизмов компоновки. См. Эту таблицу сравнения, чтобы проверить поддержку элементов, атрибутов, глобальных переменных, форм, API и других. Обратите особое внимание на механизмы разметки Gecko (Firefox), Trident (Internet Emplorer) и Webkit (Safari / Chrome). Больше на jQuery и HTML5 впереди !!!
