HTML *

Если вам интересно изучить разработку игр на 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 является простейшим симулятором настольного тенниса. Небольшой квадратик, заменяющий пинг-понговый мячик, двигается по экрану по линейной траектории. Если он ударяется о периметр игрового поля или об одну из нарисованных ракеток, то его траектория изменяется в соответствии с углом столкновения.
Геймплей состоит в том, что игроки передвигают свои ракетки вертикально, чтобы защищать свои ворота. Игрок получает одно очко, если ему удаётся отправить мячик за ракетку оппонента…

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

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

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

— появилась возможность собрать «HTML5 Boilerplate» под себя.
— уменьшен общий размер.
— на сайте появилась документация.
— …

Подробнее в блоге Пола Айриша или на сайте проекта HTML5 Boilerplate.

Собственно, вот screencast: в браузере можно порулить даже Evince. Это, немного, кажется, даже не побоюсь этих слов, весьма круто.

Спешу поделиться хорошей новостью. Очень рад, что и украинский веб наконец-то выходит в свет, при чем довольно активно и с новыми темами. 28 марта 2011 г. в Киеве пройдет мероприятие HTML5 Camp.

С поддержкой HTML5, ECMAScript 5 и других веб-стандартов в браузерах, разработчики получают хорошую платформу для нового класса веб-приложений, которые являются более мощными и интерактивными.
HTML5 Camp проводится для того, чтобы задать новые вопросы и помочь веб-разработчикам, дизайнерам и usability специалистам вывести пользовательский опыт на новый уровень. Мы приглашаем лучших профессионалов отрасли, чтобы сделать украинский интернет лучше.

Зарегистрироваться на кемп можно здесь.

Стандарт HTML5 уже почти готов к использованию. Где-то все еще идут жаркие споры по конкретным секциям DOM, видеокодекам, анимации и прочим 3D, но основа HTML5 — его синтаксис, атрибуты и теги — уже устаканились. Эти разделы стандарта не меняются уже многие месяцы; окончательно и по факту их зафиксируют релизы IE9 и FF4, после чего какие-либо их изменения в рамках пятой версии станут невозможны.
Так как костыли для старых версий IE уже созданы и обкатаны, то уже совсем-совсем скоро, начиная новый проект, можно будет открыть свой любимый редактор и, не скрывая наслаждения, написать

<!doctype html>

Сначала, конечно, html5 появится скорее в бложиках энтузиастов, чем на серьезных сайтах, но — вот увидите — через несколько лет в каждой региональной газете появятся объявления типа «ремонт и настройка ПК, заправка принтеров, 1С, сайты на HTML5».

В IT, как и в других областях техники, спецификации бывают хорошие, как у Страуструпа, а бывают плохие и даже отвратительные, как спецификация ECMAScript. По моему скромному мнению, спецификация HTML5 обещает стать воистину великой, просто-таки образцовой вершиной этого бюрократического жанра.
Пролистывая на выходных свежую версию черновика стандарта (от 5-ого марта), я в очередной раз не мог не восхититься изящностью принятых решений и филигранной точностью формулировок родившейся в тяжелых муках спецификации.

Эта статья о том, почему стандарт html5 получился именно такой, и что на самом деле скрывается за его внешне обтекаемыми формулировками.

Вы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

Клиенту неважно насколько красив ваш код, но ему важен результат. Качественный код нужен фирме, т.к. он надёжней и в будущем его будет легче поддерживать.

Требования должны были быть такие, что соблюсти их легче, создавая качественную вёрстку, а не говнокод. Я составлял такой чек-лист в течении полутора лет. За последние полгода в него не добавилось ничего. Значит самое главное учтено.

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:

• 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
• 2015/08/10: актуализирован список исключений для CSSLint
• 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
• 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
• 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
• 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
• 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
• 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
• 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
• 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.

Привет, Хабр!
Всё больше статей появляется про Canvas, и это не может не радовать. Основы, будем надеяться, уже изучены, а мне хотелось бы поделиться примером возможного практического использования canvas, а именно создать анимированный индикатор прогресса.

Для нетерпеливых результаты эксперимента можно посмотреть здесь: http://pastehtml.com/view/1d7z824.html, а также скриншот конечного результата:


Прогресс-бар получился довольно простой, но в то же время в стиле веб 2.0 — закругленный (конечно же!), с элементами глубины и объема: то есть тенями и градиентами.

За подробностями прошу под кат.