HTML *

Ранее в этом году WHATWG выпустили издание для веб-разработчиков из спецификации HTML5. Теперь, чтобы не отстать, HTML Working Group W3C опубликовали проект с более читабельной спецификацией HTML5: Edition for Web Authors
W3C версия написана более технически, чем версия WHATWG, но по крайней мере вы можете прочитать HTML5 спецификацию без заметок о соответствии критериям браузеров.

Наше практическое погружение описывает необычный сценарий — мы будем говорить не о том, что может HTML5, а о тех возможностях, которые на сегодня он еще не предоставляет и как эту неувязку можно обходить на практике.



HTML5 сегодня — это сериал, концовку которого не знают даже сценаристы, история, в которой есть как практически готовые главы и главы в черновых набросках, так и просто заметки для будущих сюжетов.

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

Уже хорошо известно, что HTML5 станет составной частью Windows 8. Причем среди разработчиков .NET некоторое время назад возникло беспокойство относительно их дальнейшей судьбы, поскольку Microsoft уделяла слишком большое внимание HTML5, а традиционный стек .NET-технологий оставался в тени; правда, позднее софтверный гигант успокоил взволнованных программистов, уверив, что .NET-платформа никуда не исчезнет.

На днях стало известно о новых планах Microsoft по интеграции HTML5 в новый офисный пакет Office 15. Источником сведений послужила вакансия, опубликованная редмондской корпорацией 19 июля, из которой следует, что, подобно тому как в 1993 году разработчики получили возможность создавать программы на Visual Basic для Office, теперь новая версия оффисного пакета также получит возможность расширения своих возможностей за счет усилий сторонних разработчиков на HTML5 и JavaScript. В частности в тексте вакансии отмечается, что благодаря использованию новой web-ориентированной технологии станет возможным разрабатывать клиент-серверные приложения, интегрировать их с облачным Office 365 и (или) SharePoint — другими словами, привносить в обычное десктопное приложение все преимущества облачных технологий. Любопытно, что опыт соискателя для этой вакансии в области JQuery, Dojo и других JavaScript-библиотек признается положительным моментом.

Visual Basic останется составной частью Office 15, так как вопрос интеграции с VBA тоже будет засчитан кандидату в плюс.
[Источник]

Благодаря нововведениям HTML5 создавать Drag and Drop интерфейсы стало гораздо проще. К сожалению, эти нововведения еще не обладают обширной поддержкой браузеров, но надеюсь в скором времени это изменится (на данный момент работает в Firefox 4+, Chrome и Opera 11.10).

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 выйдет в следующем году.

Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

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

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

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

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

Mario.MarioCharacter.Lives += 1024

Исходники на github: github.com/robertkleffner/mariohtml5

В июне Андреас Гал (Andreas Gal) с коллегами из Mozilla представили движок pdf.js для отображения PDF средствами HTML5/JavaScript. В первоначальной версии он работал неидеально, но разработчики всерьёз взялись за дело и буквально каждый день добавляли функционал: рендеринг графики, GUI и др. Но самое главное, что реализована динамическая загрузка шрифтов TrueType и кардинально улучшена загрузка шрифтов PostScript Type 1.

В итоге, сейчас Андреас Гал решил, что первый тест пройден и pdf.js попиксельно точно* отображает тестовый документ (демо).

Теперь pdf.js присвоен номер версии 0.2 и поставлена новая задача: отрендерить официальные спецификации PDF 1.7 (документ содержит 1310 страниц, файл 31 МБ).

^{*На самом деле «идеальный» рендеринг достигается только в сборке Firefox Nightly под Windows 7 (c рендерингом шрифтов через Direct2D и DirectWrite), в остальных — близкий к идеалу или не очень близкий, в зависимости от браузера и ОС.}

Андреас Гал (Andreas Gal) с коллегами из Mozilla разработали первый нормальный движок pdf.js для отображения PDF средствами HTML5/JavaScript (демо).

По мнению разработчиков, рендеринг PDF непосредственно в браузере гораздо удобнее для пользователя, потому что ему не придётся думать об установке внешних программ для просмотра PDF, многие из которых к тому же не полностью поддерживают важные спецификации PDF и заставляют осваивать непривычный интерфейс (не такой, как в браузере).

Внедрение в браузер нативных или open-source плагинов тоже нельзя назвать идеальным решением, потому что это потенциальная брешь в безопасности.

Microsoft наконец-то огласила результаты конкурса HTML5 приложений dev:unplugged с задержкой на 2 с половиной недели от первоначальных сроков. А ведь я чуть ли не каждый час обновлял браузер начиная с 23-его мая в надежде узнать результаты =) но статья не об этом…

Наш проект браузерной стратегии The Fate of Nation получил место среди «Honorable Mentions». Топовых победителей можно посмотреть на сайте конкурса.

По поводу окончания конкурса хочу немного рассказать про нашу игру, историю ее создания, особенности браузерных игр, ботов, «мультоводство» и о наших планах на будущее.

У элемента input в HTML 5 появился атрибут multiple, с помощью которого мы можем выбрать для загрузки несколько файлов. Этот атрибут принимает только одно значение «multiple», в живую будет выглядеть так:

<input type="file" multiple="multiple" name="files[]" />

Обратите внимание на name, мы явно в нем указали, что это массив.

Сразу появляется вопрос, какой браузер это новшество не понимает, ответ легко предсказуем, это семейство Internet Explorer. Начиная с 9 версии и ниже, они не поддерживают этот функционал и просто проигнорируют атрибут, искренне надеюсь что в финальной 10 версии они это поправят.
Кроме того что, мы дали пользователям загрузить сразу много файлов, мы должны позаботиться о них, и дать им возможность загрузит именно те файлы которые нам необходимы. И тут на помощь приходит еще один новый атрибут accept. Который принимает "MIME Media Types".

<input type="file" multiple="multiple" name="files[]" accept="image" />

Когда на конференции Google I/O показали Angry Birds на HTML5, в потоке радости мало кто обратил внимание, что игра на самом деле требует наличия Flash. Спрашивается, почему? Ведь игра написана на Google Web Toolkit (GWT) и для обработки звука использует библиотеку GWT-voices.

Появились размышления, что таким образом разработчик постарался блокировать игру для пользователей iOS (они покупают её за деньги в App Store). Из лагеря Microsoft высказались в том смысле, что Google умышленно оптимизировал игру под свой «глючный» и «нестандартный» Chrome, тогда как IE гораздо лучше поддерживает <Audio> и не экспериментирует с функциями, которые ещё не утверждены.

На самом деле причины немного другие, и главная из них в том, что HTML5 <Audio> пока что не подходит для использования в играх или профессиональных аудиоприложениях.

Доброго времени суток, уважаемые хабравчане!

Да, сегодня речь снова пойдет о шарике из фильма «Трасса 60». Кто-то слышал о нем, кто-то видел, кто-то даже купил себе экземпляр и пользуется в своей профессиональной деятельности (куда уж без этого в IT-сфере?).
Но даже тех, кому данная тема успела набить оскомину, я прошу не отбрасывать с ходу эту публикацию. Мой шарик хранит в себе небольшую тайну…

(Это вторая статья из серии статей, посвященных обзору различных тестов браузеров. Ранее в серии: Погружение в ACID3.)

Если судить по большинству упоминаний HTML5Test (далее h5t), то большинство пользователей данного теста более заинтересованы в конечном результате (сумме баллов), как некотором показателе, на который можно ссылаться и по которому можно сравнивать, нежели во внутренней сути получаемого результата.



В простонародье это зовется пузомерками, а как метко подметили примерно год назад в Lenta.ru (см. ниже) — «у кого HTML5 длинее».

Где-то полгода назад я выкладывал несколько топиков про LibCanvas. Потом было затишье на Хабре, но не в репозитории. Работа активно продвигалась и библиотека обрела новые силы, возможности и базовую документацию.

CANVAS шаг за шагом:

1. Основы
2. Изображения
3. Понг
4. Пятнашки

В детстве у меня были пятнашки, я думаю все знают эту головоломку. Двигать пятнашки в пластиковой коробочке до получения заветного порядка цифр было очень интересным занятием. Вот и совсем недавно, в порядке спортивного интереса, я написал для себя пятнашки в которые бы можно было играть не только из окна браузера, но и с смартфона под управлением ОС Андроид или iOS.

(Это первая статья из серии статей, посвященных обзору различных тестов браузеров.)

Что такое Acid3? Кто его придумал? Как он устроен и как он работает? Что он измеряет на самом деле? Этими и другими вопросами мы зададимся в данной статье и попробуем найти ответы.

Что такое Acid3?

Acid3 — это третий из серии специальных тестов (до этого были Acid1 и Acid2), написанных «в помощь производителям браузеров, чтобы те могли проверить поддержку стандартов в своих продуктах». Конкретно ACID3 нацелен на тестирование спецификаций, связаных с разработкой динамичных «Web 2.0»-приложений.



Acid3 включает 100 специальных тестов, проверяющих 19 различных спецификаций.

Среди специалистов отношение к этому тесту весьма неоднозначное: с одной стороны, все знающие веб-разработчики понимаю, что этот тест мало что показывает и наврядли может выступать в роли абсолютного критерия поддержки веб-стандартов, с другой, наврядли, кто-то возьмется утверждать, что этот тест не имел никакого влияния.

Тег HTML5 video, уже поддерживается всеми основными браузерами.

Как видно из таблицы, текущие версии Firefox, Chrome и Opera поддерживают продвигаемый Google открытый WebM, а Safari (включая IOS версию) и IE проприетарный H.264, для остальных же браузеров можно использовать flash плеер, который умеет проигрывать тот же H.264, и таким образом для кроссбраузерности будет достаточно перекодировать видео в эти 2 формата.

В этой небольшой заметке я расскажу как перекодировать видео в эти самые форматы (этот вопрос освещён в интернете на удивление плохо) в VLC плеере и как использовать jPlayer для его кроссбраузерного воспроизведения.

Сегодня попробуем написать небольшую игру Понг используя html5 тег canvas. Те кто не хочет читать пост тот может сразу ИГРАТЬ.
Если верить Википедии, то можно узнать что Pong является простейшим симулятором настольного тенниса. Небольшой квадратик, заменяющий пинг-понговый мячик, двигается по экрану по линейной траектории. Если он ударяется о периметр игрового поля или об одну из нарисованных ракеток, то его траектория изменяется в соответствии с углом столкновения.
Геймплей состоит в том, что игроки передвигают свои ракетки вертикально, чтобы защищать свои ворота. Игрок получает одно очко, если ему удаётся отправить мячик за ракетку оппонента…

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

Как и обещали на прошлой неделе, оперой представлена сборка под андроид с поддержкой получения видеопотока с камер посредством яваскрипта и также с поддержкой ориентационных событий.
Сам билд
Демо примеры и анонс