Демистифицируем HTML5 и CSS3

Развитие Интернета всегда порождает появление новых технологий, а HTML5 и CSS3 — горячие темы, которые обсуждаются в последнее время для каждого интернет-разработчика, особенно для разработчиков интерфейса, они полны любопытства и желания. Так что же такого в HTML5 и CSS3, что заставляет нас сиять? Я поделился с вами «Раскрытием секретов HTML5 и CSS3 » на конференции WebRebuild в Пекине и командой Pearl Milk Tea Gang. PPT находится здесь:
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

Предшественник проекта HTML 5 назывался Web Applications 1.0. Он был предложен WHATWG в 2004 году и принят W3C в 2007 году, после чего была создана новая рабочая группа по HTML. 22 января 2008 г. был выпущен первый официальный проект. HTML 5 — это самый большой шаг вперед в стандартах веб-разработки за последнее десятилетие. В отличие от предыдущих версий, HTML 5 используется не только для представления веб-контента. Его новая задача — превратить Интернет в зрелую платформу приложений. На платформе HTML 5 стандартизированы видео, аудио, изображения, анимация и компьютерные взаимодействия. . Итак, давайте взглянем на технический обзор HTML5:

Новые и удаленные элементы HTML5

HTML5 добавляет множество новых мультимедийных и интерактивных элементов, таких как видео и аудио. В HTML4, если вы хотите встроить видео или аудио, вам нужно ввести большой раздел кода, и он совместим только с различными браузерами. вводим тег Всё, так же удобно, как и тег img. Что касается макета страницы и реализации контента, в HTML5 добавлено множество новых структурированных элементов тегов, а также блочных и семантических элементов. Если вы хотите использовать HTML для представления индикатора выполнения загрузки файла, в HTML5 вы можете использовать прогресс. Элемент для его представления. Он имеет атрибут value, описывающий количество выполненных задач, а атрибут max, показывающий, сколько всего задач требуется. Вы также можете получить атрибут позиции (только для чтения) этого индикатора выполнения через DOM. интерфейс, который представляет собой процент выполнения задачи. Youtube уже пробовал использовать технологию HTML5 http://www.youtube.com/html5 (необходимо обойти брандмауэр ) — это ДЕМО, созданная с использованием HTML5. Судя по всему исходному коду страницы, она очень проста. Конечно, HTML5 также добавляет некоторые новые атрибуты к некоторым элементам, такие как атрибут-заполнитель ввода и текстовая область, который эквивалентен приглашению ввода в поле ввода. Скрипт имеет атрибут async, который влияет на загрузку и выполнение. сценарий. Все атрибуты, общие для HTML, мы обычно называем «глобальными атрибутами», такими как class, id, tabindex, title. HTML5 также добавляет некоторые новые глобальные атрибуты, такие как contenteditable, contextmenu, скрытые и другие атрибуты. HTML5 также добавляет поддержку микроданных, таких как новые атрибуты HTML5, такие как item, itempro и subject.

Конечно, HTML5 также удаляет некоторые элементы, представляющие представление страницы, такие как шрифт, центр, зачеркивание и т. д. Предполагается, что они выполняются с помощью CSS, поэтому их по-прежнему легко понять. Он также удаляет некоторые элементы, влияющие на доступность веб-сайта. такие как Frame, Frameset, NoFrame и некоторые необычные элементы, такие как акроним, используют abbr для обозначения аббревиатуры. HTML5 также удаляет некоторые знакомые HTML-коды, влияющие на совместимость с клиентом, такие как атрибут rev ссылки и атрибут области действия td. HTML5 также удаляет некоторые атрибуты, указывающие представление страницы, такие как атрибуты align и bgcolor некоторых элементов.

Поддержка HTML5 для форм

HTML5 предоставляет мощные типы элементов управления, такие как URL-адрес, электронная почта, дата, телефон и т. д., мощные атрибуты ограничений, такие как «обязательные для указания требуемых», принимают атрибуты для загрузки файлов, а также поддержку некоторых моделей повторяющихся элементов формы. HTML5 также обеспечивает поддержку при отправке. Форма. Вы можете установить метод отправки на отправку XML, чтобы данные, полученные сервером, были в формате XML. Формы HTML5 определяются как «Веб-формы 2.0». В настоящее время Opera9.5+ имеет идеальную поддержку веб-форм. 2.0.

Нажмите здесь, чтобы просмотреть ДЕМО-версию Web Forms 2.0 , требуется Opera9.5+.

Изменения HTML5 DOM

HTML5 имеет множество интерфейсов, унаследованных от HTMLDocument в DOM УРОВНЯ 2 HTML. Конечно, HTML5 также имеет некоторые примечательные новые элементы в DOM, такие как: поддержка getElementsByClassName, которая позволяет выбирать элементы на основе имен классов. getSelection() возвращает текущие. Selection. В селекторе есть два метода querySelector и querySelectorAll, которые могут получить запрашиваемый элемент на основе селектора CSS, который эквивалентен Y.one и Y.all в YUI3.

HTML5 Javascript API

Какие новые API HTML5 добавляет в Javascript?

• Видео/аудио: HTML5 предоставляет API для видео и аудио, позволяющие разработчикам управлять собственным пользовательским интерфейсом, например воспроизведением или приостановкой мультимедийного контента.
• Canvas: Canvas — это новый элемент HTML, который можно использовать для рисования графики с использованием языка сценариев (обычно JavaScript). Например, вы можете использовать его для рисования картинок, составных изображений или создания простой (и не очень) анимации. Canvas - волшебная вещь. Первое ощущение, которое он вызывает, похоже на использование Photoshop. Каждый его метод очень похож на Photoshop. Вы можете получить API холста через Canvas.getContext('2d') , с помощью которого вы можете установить цвет заливки. fillStyle или задайте цвет обводки через StrokeStyle. Даже его операция рисования путей совпадает с операцией пера в Photoshop. Canvas использовался на многих веб-сайтах, например , для статистики статуса загрузки в реальном времени в Firefox , а Canvas можно использовать даже для написания веб-игр.
• Drag&Drop: В визуальных средствах указывающих устройств операция «Перетаскивание» — это событие опускания мыши (mousedown), сопровождаемое перемещением мыши (mousemove), а «Drop» — событие, вызываемое при отпускании мыши. Интерфейсы DataEvent и DataTransfer определены в Drag&Drop. В то же время, когда происходит операция перетаскивания, будут запускаться такие события, как перетаскивание, перетаскивание, перетаскивание, отбрасывание и перетаскивание.
• Веб-работники: сделайте Javascript многопоточным и сможете выполнять большую часть работы в фоновом режиме, не блокируя текущую работу браузера.
• Геолокация: Геолокация. Когда вы запускаете метод navigator.geolocation.getCurrentPosition(success, error), браузер спросит, хотите ли вы поделиться своим географическим местоположением. Если вы решите поделиться, будет вызвана функция успеха. Функция успеха — это объект позиции. Этот объект позиции имеет объект координат. Объект координат содержит много информации о географическом местоположении, такой как широта (размер) и долгота (долгота), так что вы можете узнать свое конкретное местоположение. уже широко используется на некоторых мобильных телефонах, таких как Iphone.
• Кэш приложения: это поддержка HTML5 для автономных приложений. Добавляя манифест атрибута в элемент html, браузер спросит вас, хотите ли вы кэшировать данные для клиента. Если пользователь решит разрешить это, он будет следовать указанному. список файлов манифеста. Кэшируйте нужные файлы, чтобы вы могли использовать приложение, когда ваша сеть недоступна. Для автономных приложений Google также разработал расширение браузера Google Gears, но в конце концов Google перешел на HTML5 и, возможно, увидел преимущества хранилища HTML5 и автономных приложений.
• Хранилище: в Webkit реализовано хранилище базы данных. Вы можете запрашивать данные и выполнять некоторые операции так же, как операции с внутренней базой данных. Другой тип хранилища — это хранилище значений ключа, такое как sessionStorage и localStorage, которые могут хранить и получать значения через setItem и getItem. По сравнению с хранилищем файлов cookie емкость хранилища намного больше.
• Обмен сообщениями X-Document: Браузеры предотвращают передачу документов между разными доменами по соображениям безопасности и конфиденциальности. Хотя это ограничение безопасности, оно создает множество проблем при передаче документов в разных доменах, которые не являются вредными, но HTML5 — это перекрестный документ. может быть достигнута связь, что позволяет нам игнорировать источник исходного домена и предотвращать атаки сценариев.

HTML5 вас волнует? Так когда же HTML5 станет стандартом? Говорят, что придется подождать до 2022 года. Есть интересный сайт http://ishtml5readyet.com/ , на котором сообщается, через сколько дней действительно появится HTML5.