HTML *

Когда на конференции 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 — закругленный (конечно же!), с элементами глубины и объема: то есть тенями и градиентами.

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

В последних спецификациях html есть много интересных плюшек и одна из них, о которой, пока, никто не говорит — это элемент device. Он предоставляет доступ к таким устройствам, как камера или микрофон. И, хотя этот элемент ещё не поддерживается ни одним из браузером — это будущее веб-разработки.

interface HTMLDeviceElement : HTMLElement {
           attribute DOMString type;
  readonly attribute any data;
};

Philip Bräunlich провёл сравнение возможностей двух десятков свободных видеоплееров, использующих тег video в HTML5 и обобщил результаты в таблице. Там же можно посмотреть их в действии, в том числе и на собственном видео (принимаются mp4 и ogg).

Пожелания и предложения отправляйте в твиттер автору.

HTML5 video player comparison.

Предисловие

Это инструкция по созданию игры, которую я накодил за пару вечеров. Целью было не столько создание достойного представителя жанра, сколько проверка возможностей Canvas и ООП в JavaScript. Чтобы было интереснее, я поставил условие — никаких внешних файлов со спрайтами, вся графика рисуется встроенными методами. Также, не используется никаких фреймворков и библиотек. Просто потому, что в такой небольшой игре их использование ИМХО не оправдано.

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

Задача

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

Исполнение

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

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

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

Продолжение статьи про рисование на холсте, в которой мы научимся использовать изображения. Естественно рисовать на холсте примитивами очень не удобно и требует определённых трудозатрат, и результат иногода явно хромает качеством. Поэтому естественно в canvas api предусмотрено взаимодействие с изображениями. Добавление изображения условно можно разделить на два шага: создание JavaScript объекта Image, а второй и заключительный шаг это отрисовка изображения на холсте при помощи функции drawImage. Рассмотрим оба шага подробнее.

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

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

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.