Анимация меню (CSS3)

Автор: 5html.ru | Рубрика: Примеры

В данной статье я хотел бы показать вам некоторые приёмы создания эффектов при помощи CSS3 на примере меню. Идея заключается в простой композиции элементов: иконки, основного названия и вторичного названия, которое будет анимировано при наведении курсора, используя только CSS-переходы и CSS-анимацию. Мы рассмотрим несколько различных эффектов для элементов.

Значки, используемые в демо, является шрифтом Web symbols. Шрифт создан студией Just Be Nice.

читать дальше >>>

Decoding HTML5

Автор: 5html.ru | Рубрика: Статьи по HTML5

Несколько дней назад в свет была выпущена книга под названием «Decoding HTML5″, в которой, как вы уже могли догадаться речь идёт о нововведениях, которые появились с приходом HTML5.  Не сказал бы, что книга была очень интересна мне, т.к. об этих новых рюшечках нововведениях не писал только ленивый, но всё-таки повторить и закрепить материал было полезным делом. Тем более, что книга написана небезызвестным Джефри, а это значит, что читать её будет легко и приятно. Но хватит расхваливать автора, а перейдём к краткому содержанию книги:

1. The History of HTML5
2. The State of HTML5
3. Semantic Markup
4. Easy Queries with the Selectors API
5. Custom Data Attributes
6. Fun Fun Forms
7. The Essential of Feature Detection
8. Automated Detection with Modernizr
9. Finally… Native Media
10. Track That Sucka with Geolocation
11. The Basics of Working with Canvas
12. Don’t Irritate Visitors — Use Web Storage
13. The History API
14. The File & Drag and Drop APIs
15. Web Workers are Ants
16. Tools, Folks, and Blog

Создание стреловидных форм элементов на CSS3

Автор: 5html.ru | Рубрика: Новости, Статьи по HTML5

Использование стреловидных форм и диагональных линий в web-дизайне.

Читать дальше >>>

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.

Мультимедия

Автор: zvonky | Рубрика: Новости, Статьи по HTML5, Учебные

Мультимедия

Аудио и видео в Интернет станут совершенно другими с HTML5. С помощью новых API, вы можете получить доступ, управлять и изменять графиками данных и статусов. С появлением дополнений API, вы сможете читать и писать исходные данные для аудио файлов (Audio Data API) или манипулировать подписями в видео (Timed Track API). Но реальная сила этих новых элементов HTML проявляется, когда они сочетаются с другими технологиями будь-то web stack, be it Canvas, SVG, CSS или даже WebGL. Например, вы можете сделать DJ микшер, с несколькими элементами управления для плавного микширования звуковых дорожек,  Canvas позволяет Вам читать пиксельные данные от видео, таким образом, Вы можете добавить видео визуализатор с особенностью выбора сцены и, вдобавок ко всему, использовать фильтры SVG а-ля Фотошоп, чтобы исказить кино, в то время как видео проигрывается

Поддержка аудио элементов браузером

Измерение скорости загрузки страницы черз навигэйшн тайминг

Автор: 5html.ru | Рубрика: Новости, Примеры, Статьи по HTML5, Учебные

Содержание:

• Изминение скорости загрузки страниц с помощью тайминга навигации
• Как мне это использовать ?
• Хорошая альтернатива JavaScript Date
• Что это значит ?
• Собираем все это воедино
• Как я попал на эту страницу ?
• В «диких» условиях
• Будущее навигэшн тайминг

Измерение скорости загрузки страницы с помощтю тайминга навигации

Как мне это использовать ?

Этот API доступен через свойства объекта window.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

Читать дальше >>>

HTML5 Camp — 30 Ноября, Санкт-Петербург

Автор: 5html.ru | Рубрика: Новости, Статьи по HTML5

Расписание докладов (скачать PDF с 5html.ru)      >>>

Пример: Newspaper Columns (CSS3)

Автор: 5html.ru | Рубрика: Новости, Примеры, Статьи по HTML5, Учебные

Газетоподобная верстка, реализованная на CSS3.  Передвигайте ползунки, чтобы понять стиль.

• CSS3 columns
• input type=range

Скачать c 5html.ru (zip) | Посмотреть пример

Сделаем веб быстрее!

Автор: 5html.ru | Рубрика: Новости, Примеры, Статьи по HTML5, Учебные

Сделаем мобильный интернет быстрее

Использование мобильных в Интернет стремительно растет во всем мире. В течение 2009 года 50% всех новых подключений Интернет во всем мире -  с мобильных платформ (эМаркетер, 2008 и 2009). Данные исследований компании Google  показывают, что улучшая качество браузеров для мобильных платформ, мы укореним привычку воспринимать это как полноценный интернет доступ владельцев таких устройств.