HTML *

Достался мне проект по адаптации флеш-курса электронного обучения под iPad.
Хотел поделиться некоторыми моментами.

Медиа
Проект должен был позволять играть видео/аудио файлы, причем без лишний движений со стороны пользователя.
Видео на iPad можно проиграть только путем нажатия пользователем на что-нибудь, т.е. автоматически проиграть медиа файл, например, при загрузке страницы не получится, или получится, но далеко не во всех версиях iOS.
Так что первый раз проиграть видео/аудио приходится по клику пользователя. Дальше, если тому же тегу менять атрибут src, отлавливая событие onended, проигрывание можно делать автоматически.

Доброго времени суток!

Введение

Я являюсь фрилансером. Раньше я не особо задумывался над тем, как и что делают верстальщики. Я делал серверную часть, а мой друг верстал и набивал контент. Совсем недавно мне захотелось попробовать «что и как». Пару дней назад мне на глаза попался материал, который мне очень понравился. Он наглядно обЪяснял, что и как нужно писать. К сожалению, сылку дать не могу, так как я не запаомнил, где располагался сей мануал, но… Казалось бы, можно это и запомнить, но я пошёл ещё одним путём — законспектировал это дело. Собственно, добро пожаловать в мою записку.

Доброго времени суток!

Введение

К своему стыду, я совсем недавно познакомился с элементом details, который по сути является виджетом для представления информации о чём-либо. По информации, которая есть у меня, его поддержка достаточна скудна, так как поддерживается он на данный момент лишь в Google Chrome, начиная с 12.0, а также в Android Browser, начиная с версии 4.0. Что же, давайте посмотрим, что это за зверь такой.

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

Как многие хабражители наверняка помнят, не так давно мы проводили в Санкт-Петербурге второй HTML5 Camp.

И, как вы уже могли догадаться из заголовка, записи с мероприятия выложены и доступны для просмотра на сайте конференции и techdays.ru (тут же вы найдете записи первого HTML5 Camp).

«Если вы разрабатываете приложения для смартфонов или планшетов, то Opera TV Store станет для вас большим шагом вперёд», — такими словами компания Opera анонсирует свой новый проект: каталог HTML5-приложений Opera TV Store. Его презентация состоялась вчера на конференции CES в Лас-Вегасе.

На сайте для разработчиков уже выложены полнофункциональный эмулятор Opera TV для тестирования приложений и документация. Эмулятор поддерживает все функции Opera Devices SDK:

• HTML/CSS/JavaScript/DOM
• SVG, Canvas
• W3C виджеты
• HTML5 <video> and <audio>
• Симуляция ограниченного объёма RAM
• Дебаггинг в Opera Dragonfly

Команда разработчиков Nokia Research Center выкатила по-настоящему удивительное демо картографического сервиса на WebGL. Кроме красоты самой 3D-модели, вызывает восхищение минимальное потребление CPU при рендеринге, плавный скроллинг и больше всего — возможность произвольно менять угол зрения и вращать модель.



Возможно, в будущем этот проект придёт на смену нынешнему сервису Nokia Maps. Жаль, что основного разработчика движка данного сервиса — компанию C3 Technologies — недавно поглотила Apple, так что на продление соглашения с Nokia можно не рассчитывать.

Привет %username%!
Хочу поделится замечательным сервисом для создания анимации на платформе HTML5 под названием Mugeda. Сразу оговорюсь, сервис не мой, но пройти мимо и тем более не рассказать о нем я не мог.

Два месяца назад на Хабре состоялся анонс конкурса HTML5-приложений Pokki Challenge с призовым фондом $50 тыс. Приятно признать, что информация не прошла мимо наших людей: третье место и приз $7000 получил хабраюзер ddenisyuk за клиент Instagrille к фотосервису Instagram.

Что ж наступило время для повторного пополнения бюджетов! Организаторы объявили о втором конкурсе Pokki 1UP с аналогичным призовым фондом, на этот раз исключительно по разработке игр. Призы получат три лучшие игры на HTML5, в том числе с использованием WebGL и Web Audio APIs.

За первое место причитается $30k плюс билет на конференцию Game Developers Conference 2012 в Сан-Франциско. Заявки принимаются с 20 декабря по 20 февраля.

В преддверии нового года и продолжительных праздников публикую вторую подборку игр, не вошедших в первый пост. С наступающим! )

TankWorld

3D шутер на танках. На некоторых уровнях можно найти вертолет и нести смерть супостатам с воздуха.

Небольшая демонстрация возможностей CSS3 на примере. Данный пример затрагивает свойства border-radius, box-shadow и linear-gradient.

head

Прошу расценивать предлагаемый код не в качестве готового решения, которое требуется использовать в своем проекте, а лишь как демонстрация. Хотя, при должной доработке, вполне возможно подойдет для какой-нибудь задачи.
Для тех, кому лень читать весь текст статьи я сразу прилагаю ссылку на рабочий пример. Солнце можно двигать по экрану, при его приближении к горизонту создается имитация заката. После полного ухода солнца за линию горизонта на небе выплывают звезды.
Пример тестировался в последних версиях современных браузеров — IE9, Chrome 16, Opera 11.60 и Firefox 8. Как ни странно, но шустрее всего на моей машине пример работал в браузере IE9, чуть похуже обстояли дела в браузере Firefox. В Chrome и Opera заметны некоторые фризы при движении.

 

Несмотря на то, что спецификацию HTML5 планируется полностью утвердить и добиться максимально широкой функциональной совместимости лишь в 2014 году, уже сейчас начинают выкристаллизовываться идеи о том как должна выглядеть данная спецификация следующего поколения — HTML.next, как его в рабочем порядке называют в W3C-консорциуме.

Новые элементы семантики

<dеcompress>

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

Пример использования:

<decompress href="http://thisisanexample.com/mobile/familyreunion.zip">
<a href="familyreunion.zip/html/activities.html">Activities from our family reunion</a>
<img src="familyreunion.zip/img/familyreunion1.jpg">

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

Vortal Combat

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

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



Итак, 30 ноября в Санкт-Петербурге состоялся второй HTML5 Camp. Мероприятие вызвало огромный интерес среди веб-дизайнеров и веб-разработчиков и им сочувствующих :)

 

В рамках большого интерактивного веб-ориентированного проекта (подробнее о котором возможно в другом посте) я занимаюсь разработкой картографического движка, реализованного на HTML5 CANVAS. Его разработка дошла до стадии беты и, с одобрения моего руководства, появилось желание продемонстрировать данные карты широкой публике.

На одном из проектов было необходимо сделать кропалку для загружаемых юзерами аватаров. Стандартные решения, такие как Jcrop, после выделения области отправляют на сервер координаты, и сам кроп изображения необходимо осуществлять уже на сервере. Тем временем, современные браузеры уже дошли до того состояния, когда подобные действия можно осуществлять сразу на клиенте. Это и подтолкнуло меня к написанию своей кропалки с использованием canvas, которая производила бы все действия на клиенте и отправляла готовое изображение в виде base64-строки на сервер. Помимо ускорения работы и разгрузки сервера, это так же позволит нам сразу сменить аватар пользователя на странице, без подгрузки его с сервера.