HTML5 — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете.
Находится в стадии разработки по состоянию на ноябрь 2011 года. HTML5 включает в себя не только HTML 4, но и XHTML 1, а также DOM2HTML (особенно JavaScript).
На сайте 5HTML вы найдете примеры, canvas, учебник, видео по html5, обзоры создания HTML5 и переводы зарубежных статей.
15
Май
Анимация меню (CSS3)
Автор: 5html.ru | Рубрика: Примеры

В данной статье я хотел бы показать вам некоторые приёмы создания эффектов при помощи CSS3 на примере меню. Идея заключается в простой композиции элементов: иконки, основного названия и вторичного названия, которое будет анимировано при наведении курсора, используя только CSS-переходы и CSS-анимацию. Мы рассмотрим несколько различных эффектов для элементов.
Значки, используемые в демо, является шрифтом Web symbols. Шрифт создан студией Just Be Nice.
16
Мар
Decoding HTML5
Автор: 5html.ru | Рубрика: Статьи по HTML5
Несколько дней назад в свет была выпущена книга под названием «Decoding HTML5″, в которой, как вы уже могли догадаться речь идёт о нововведениях, которые появились с приходом HTML5. Не сказал бы, что книга была очень интересна мне, т.к. об этих новых рюшечках нововведениях не писал только ленивый, но всё-таки повторить и закрепить материал было полезным делом. Тем более, что книга написана небезызвестным Джефри, а это значит, что читать её будет легко и приятно. Но хватит расхваливать автора, а перейдём к краткому содержанию книги:
- The History of HTML5
- The State of HTML5
- Semantic Markup
- Easy Queries with the Selectors API
- Custom Data Attributes
- Fun Fun Forms
- The Essential of Feature Detection
- Automated Detection with Modernizr
- Finally… Native Media
- Track That Sucka with Geolocation
- The Basics of Working with Canvas
- Don’t Irritate Visitors — Use Web Storage
- The History API
- The File & Drag and Drop APIs
- Web Workers are Ants
- Tools, Folks, and Blog
12
Фев
Создание стреловидных форм элементов на CSS3
Автор: 5html.ru | Рубрика: Новости, Статьи по HTML5
Использование стреловидных форм и диагональных линий в web-дизайне.
27
Янв
FAQ по Веб Аудио
Автор: 5html.ru | Рубрика: Новости, Статьи по HTML5
За последние несколько месяцев, WebKit веб аудио API превратился в устойчивую площадку для игр и аудио приложений в Интернете. В ходе изучения, у разработчиков возникают примерно одни и те же вопросы снова и снова. В этом посте разберем наиболее наиболее часто задаваемые вопросы, чтобы сделать ваш опыт работы с API веб-Аудио более приятным и легким.
В. «Не могу извлечь звук, помогите!»
:Этот мануал (английская версия) может помочь — ссылка.
В. Сколько Аудио контекстов я должен иметь?
: Вообще, вы должны включать один AudioContext на одну страницу, и единый контекст аудио может поддерживать многие узлы, подключенные к нему. Хотя вы можете включить несколько на одной странице, то это может привести кпроизводительности.
В. У меня AudioBufferSourceNode, что я просто воспроизводятся с noteOn (), и я хочу играть в нее снова, но noteOn () ничего не делает! Помогите!
: После того как узел-источник закончил играть обратно, он не может воспроизводитьбольше. Для воспроизведения основного буфера снова, вы должны создать новыйAudioBufferSourceNode и называют noteOn ().
Хотя воссоздать исходный узел может чувствовать себя неэффективными, узлов источника в значительной степени оптимизирован для этой модели. Плюс, если вы держите ручку AudioBuffer, вам не нужно, чтобы сделать еще один запрос на актив, чтобы играть тот же звук снова. Если вам понадобится повторить эту схему,инкапсуляции воспроизведения с простой функции помощника следующим PlaySound (буфер).
В. При воспроизведении звука, зачем нужно вновь создовать узелисточника каждый раз?
: Идея этой архитектуры является разделение аудио актива от воспроизведениягосударства. Принимая аналогию проигрыватель, буферы, аналогичные документы иисточники в плей-головок. Поскольку многие приложения включают несколько версийодного и того же буфера играть одновременно, эта модель имеет важное значение.
В. Когда я могу получить звук с микрофона?
: Звуковой части ввода это будет осуществляться в рамках WebRTC использованием getUserMedia, и будет доступен в качестве специального узла источника в API АудиоИнтернет. Она будет работать совместно с createMediaElementSource.
В. Могу ли веб Audio API использоваться для обработки звуков быстрее чем в реальном времени?
: Да, решение в настоящее время работают. Пожалуйста, следите за обновлениями!
В. Могу ли я изменять тон, не изменять скорость?
: API веб-Audio могли PitchNode в звуковом контексте, но это трудно реализовать. Это потому, что не существует простой алгоритм высоты тона в аудио-сообщества.Известные методы создания артефактов, особенно в тех случаях, когда смещения высоты велика. Есть два вида подходов к решению этой проблемы: во временной области алгоритмов, которые вызывают повторяющиеся сегментаперекликается артефактов.
Частотной области техники, которые вызывают реверберации артефакты звука. Несмотря на отсутствие родных узла для этого эти методы, Вы можете сделать это с JavaScriptAudioNode.
1
Дек
Мультимедия
Автор: zvonky | Рубрика: Новости, Статьи по HTML5, Учебные
Мультимедия
Аудио и видео в Интернет станут совершенно другими с HTML5. С помощью новых API, вы можете получить доступ, управлять и изменять графиками данных и статусов. С появлением дополнений API, вы сможете читать и писать исходные данные для аудио файлов (Audio Data API) или манипулировать подписями в видео (Timed Track API). Но реальная сила этих новых элементов HTML проявляется, когда они сочетаются с другими технологиями будь-то web stack, be it Canvas, SVG, CSS или даже WebGL. Например, вы можете сделать DJ микшер, с несколькими элементами управления для плавного микширования звуковых дорожек, Canvas позволяет Вам читать пиксельные данные от видео, таким образом, Вы можете добавить видео визуализатор с особенностью выбора сцены и, вдобавок ко всему, использовать фильтры SVG а-ля Фотошоп, чтобы исказить кино, в то время как видео проигрывается
Поддержка видео элементов браузером
| Chrome | Firefox | Safari | Opera | IE | iOS Safari | Android | Opera Mini | Opera Mobile |
|---|---|---|---|---|---|---|---|---|
| 10+ | 10+ | 4+ | 10.5+ | 10+ | 3.2+ | 2.3+ | — | 11+ |
Поддержка аудио элементов браузером
| Chrome | Firefox | Safari | Opera | IE | iOS Safari | Android | Opera Mini | Opera Mobile |
|---|---|---|---|---|---|---|---|---|
| 10+ | 10+ | 4+ | 10.5+ | 10+ | 4.0-4.1+ | 2.3+ | — | 11+ |
30
Ноя
Измерение скорости загрузки страницы черз навигэйшн тайминг
Автор: 5html.ru | Рубрика: Новости, Примеры, Статьи по HTML5, Учебные
Содержание:
- Изминение скорости загрузки страниц с помощью тайминга навигации
- Как мне это использовать ?
- Хорошая альтернатива JavaScript Date
- Что это значит ?
- Собираем все это воедино
- Как я попал на эту страницу ?
- В «диких» условиях
- Будущее навигэшн тайминг
Измерение скорости загрузки страницы с помощтю тайминга навигации
Как мне это использовать ?
Этот API доступен через свойства объекта window.performance:
- навигация: как пользователь переходит к странице
- таймирг: данные для навигации и события загрузки страницы.
В Google Chrome с любого веб-странице:
- Выберите Tools > JavaScript console в верхней правой части окна Chrome (или нажмитеCtrl-Shift-J в ОС Windows и Linux, или Command-Option-J на Mac).
- Введите слово performance рядом с > в строке в нижней части окна и нажмите назад.
- Нажмите performance , чтобы увидеть свойства объекта: память, навигации и синхронизации.
- Нажмите на стрелку слева от времени, чтобы просмотреть его свойства.
Вы должны увидеть нечто вроде следующего, которое генерируется динамически с кодом на странице:
connectEnd: 0 connectStart: 0 domComplete: 1322637329290 domContentLoadedEventEnd: 1322637328426 domContentLoadedEventStart: 1322637328424 domInteractive: 1322637328195 domLoading: 1322637327289 domainLookupEnd: 0 domainLookupStart: 0 fetchStart: 1322637327236 loadEventEnd: 0 loadEventStart: 1322637329290 navigationStart: 1322637327235 redirectEnd: 0 redirectStart: 0 requestStart: 0 responseEnd: 1322637327293 responseStart: 1322637327251 unloadEventEnd: 0 unloadEventStart: 0
28
Пример: Newspaper Columns (CSS3)
Автор: 5html.ru | Рубрика: Новости, Примеры, Статьи по HTML5, Учебные
Газетоподобная верстка, реализованная на CSS3. Передвигайте ползунки, чтобы понять стиль.
- CSS3 columns
- input type=range
26
Ноя
Сделаем веб быстрее!
Автор: 5html.ru | Рубрика: Новости, Примеры, Статьи по HTML5, Учебные
Сделаем мобильный интернет быстрее
Использование мобильных в Интернет стремительно растет во всем мире. В течение 2009 года 50% всех новых подключений Интернет во всем мире - с мобильных платформ (эМаркетер, 2008 и 2009). Данные исследований компании Google показывают, что улучшая качество браузеров для мобильных платформ, мы укореним привычку воспринимать это как полноценный интернет доступ владельцев таких устройств.
Сделайте ваши страницы и приложения, доступные на мобильном
Вы действительно хотите, чтобы пользователи просматривают ваши мультимедийные 800-пикселей, плюс широкий сайт на экране мобильного телефона? Делайте отдельные версии для мобильных платформ.
Используйте обычные мобильные URL-адреса, и заявляйте о них на официальной версии веб-сайта.
тематические
5html.ru
- Анимация меню (CSS3) 15.05.2012
- Decoding HTML5 16.03.2012
- Создание стреловидных форм элементов на CSS3 11.02.2012
- FAQ по Веб Аудио 27.01.2012
- Мультимедия 01.12.2011
- Измерение скорости загрузки страницы черз навигэйшн тайминг 30.11.2011
- HTML5 Camp — 30 Ноября, Санкт-Петербург 28.11.2011
- Пример: Newspaper Columns (CSS3) 28.11.2011
- Сделаем веб быстрее! 26.11.2011
- CSS3. Работа с тенями. 24.11.2011



