Pull to refresh

Бесконечный Mario на HTML5

HTML *
Если вам интересно изучить разработку игр на HTML5/JavaScript, можете посмотреть на Бесконечного Mario на HTML5 (временно не работает: привышен лимит у хостера; зеркало).

Игра является клоном этого проекта Minecraft: уровни генерируются до бесконечности, только там игра была на Java (тоже с исходниками), а здесь переписана на HTML5.

Гладкая игра без тормозов и хорошо читаемый код. Правда, есть некоторые глюки, например, фоновая музыка играет вроде только в Firefox 4.

Если жизней не хватает, можете добавить через JS-консоль браузера:

Mario.MarioCharacter.Lives += 1024

Исходники на github: github.com/robertkleffner/mariohtml5
Total votes 71: ↑66 and ↓5 +61
Views 8.7K
Comments 44

Adobe Edge: редактор анимации HTML5/JavaScript

HTML *
Adobe сегодня выпустила новый инструмент Adobe Edge (public preview), который предназначен для создания простого анимированного контента на открытых стандартах: HTML5, JavaScript и CSS3. Предполагается, что для растущего числа мобильных устройств HTML5 более приемлем, чем Flash. В первую очередь для мобильного рынка и создан новый редактор. Впрочем, никто не мешает делать с его помощью любую веб-анимацию HTML5, а в будущем — HTML5-игры и другие приложения.

Adobe Edge призван удачно дополнить Flash и сохранить позиции Adobe как лидера на рынке ПО для веб-дизайна. Эта компания заявляет, что давно продвигает технологии HTML, в качестве примеров можно привести такие продукты как Dreamweaver, Illustrator, Digital Publishing Suite и недавно вышедший Flash-to-HTML5 конвертер Wallaby.

Редактор Adobe Edge распространяется бесплатно, скачать можно здесь. Версия 1.0 выйдет в следующем году.
Функционал и интерфейс редактора Adobe Edge
Total votes 49: ↑41 and ↓8 +33
Views 41K
Comments 35

Создаем кассетный магнитофон при помощи HTML5 Audio

Website development *
Translation


Если вы не знаете, что такое кассета, то вы, вероятно, родились в эпоху хай-тэк, эпоху, которая, несомненно, является интересной и новаторской. Но если же вы имеете представление, что такое аудио-кассеты, то скорее всего вы принадлежите к старшему поколению, динозаврам, которые знают, что объединяет карандаш и аудио-кассету. :)
Читать дальше →
Total votes 128: ↑120 and ↓8 +112
Views 18K
Comments 99

HTML5 Audio — cостояние дел. Часть 1

JavaScript *HTML *
Translation
(Написано в мае 2012 специалистом по фронтенду и особенно, по медиаформатам, разработчиком нескольких опенсорсных проектов и happyworm.com и отражает современное состояние дел с поддержкой браузерами новых медиатегов и форматов. --прим. перев.)

Это продолжение моей (автора, Марка Боаса) статьи 2009 года "Native Audio in the browser" (англ., и дополненной в октябре 2010 --прим. перев.), которая объясняет основы работы аудио в HTML5. Возможно, стоит почитать сначала её, если вы хотите почувствовать работу тега <audio> и связанного с ним API. (Есть русский перевод, но в варианте от 2009 года.)

Теперь, через 2.5 года, пришло время посмотреть, как идут дела. При том, что многие продвинутые аудио API активно разрабатываются, улучшается воодушевляющая нас нативная браузерная поддержка звука — самое время вернуться в увлекательный мир тега <audio>.
Читать дальше →
Total votes 36: ↑34 and ↓2 +32
Views 58K
Comments 15

HTML5 Audio — состояние дел. Часть 2

JavaScript *HTML *
Translation
(Статья специалиста по фронтенду и медиатегам Марка Боаса (Mark Boas) от 8 мая 2012. Перевод заключительной части. Начало дало понять, что придётся попотеть, прежде чем освоить всю кухню, а ведь это ещё развивается… Не ждите коротких рецептов.)

Содержание первой части:
■ Типы MIME
  ● Серверная часть
  ● Клиентская часть
■ Заранее узнать тип аудио поможет .canPlayType (наверное)
■ Текущая поддержка кодеков в браузерах
■ Форматы контейнеров и расширения файлов
■ Мы имеем тег <audio> и не боимся его использовать!
■ Буферизация, поиск и интервалы воспроизведения
  ● Атрибут buffered
  ● Объект TimeRanges
    ● Атрибуты seeking и seekable
Итак, на чём мы остановились? На свойстве seekable
Total votes 30: ↑30 and ↓0 +30
Views 20K
Comments 4

Полезные сниппеты на HTML5

HTML *
Translation
Эта подборка полезных сниппетов, использующих HTML5, может помочь вам улучшить ваш сайт.

Автозаполнение в текстовых полях


Используя HTML5-элемент datalist вы можете создать текстовое поле с автозаполнением. Очень удобно!
<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Читать дальше →
Total votes 73: ↑59 and ↓14 +45
Views 83K
Comments 27

BookTitres.com — изучайте языки по иностранной литературе в оригинале, слушая и читая

Self Promo
Многие используют фильмы с субтитрами, чтобы слушать речь и одновременно читать. Хочу предложить альтернативу — слушать аудио книги и читать их текст с подстрочным переводом и доступом к каждой отдельной фразе. Они доступны онлайн на сайте BookTitres.com .

Самое интересное


Уже доступные для чтения книги вы можете найти в разделе "Слушайте и читайте" на сайте. Книга "Хоббит" закончена — это 11 часов аудио и 13800 фраз. Пройдя её полностью, вы ощутите заметное улучшение своего английского. Особенно, если будете повторять за чтецом каждую фразу. От других книг в основном сделаны несколько первых глав. Если хотите продолжения — ответьте на опрос и укажите желаемую книгу.

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

В конце статьи приводятся вопросы, на которые мне бы очень хотелось получить ответы хабра людей.
Читать дальше →
Total votes 59: ↑57 and ↓2 +55
Views 15K
Comments 49

Играй, голова

Abnormal programming *JavaScript *HTML *
Опыт декларативного программирования на JavaScript на примере аудиопроигрывателя

Автор — Ростислав Чебыкин.
Вёрстка и размещение на Хабр — den_lesnov.

I feel something so wrong
By doing the right thing…
Ryan Tedder (OneRepublic). Counting Stars


Мы с Денисом Лесновым разработали аудиопроигрыватель для моего сайта. На сайте размещаются аудиозаписи песен, и я давно мечтал сделать, чтобы они проигрывались прямо с веб-страниц.

Проигрыватель выглядит примерно так:



Как он работает — можно посмотреть на демонстрационной странице.

Первый вопрос, который нам задают,— почему мы городили собственный плеер с нуля, а не использовали какое-нибудь из сотен готовых решений? Ответ простой: потому что нам было интересно заниматься этой задачей.

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

Здесь пойдёт речь об основных технических решениях, которые мы применяли.

Читать дальше →
Total votes 30: ↑24 and ↓6 +18
Views 13K
Comments 13

Что можно узнать при разработке аудио плеера для разных браузеров

Website development *JavaScript *HTML *Node.JS *Browsers
Эта история началась примерно 1.5 года назад. Связана она с проигрыванием музыки в различных браузерах и платформах, на которых они запускаются. Путь полный “боли и страдания” осознания того, что легкая на первый взгляд задача может оказаться не такой уж и легкой, а “незначительные” детали, которым не придаешь значения в самом начале, могут повлиять на всё.
Читать дальше →
Total votes 19: ↑19 and ↓0 +19
Views 6.9K
Comments 27