HTML *

Доброго всем времени суток! Буквально сегодня при использовании Web Workers столкнулся с проблемой в функции importScripts(), которая заключается в том, что Opera(использую версию 11.61) по каким-то своим внутренним причинам при повторном создании объекта Worker отказывается исполнять внутри него функцию importScripts()(проблема возникает только в опере, остальные браузеры ведут себя адекватно).

Добрый вторник, хабр.

По нужде написал fallback скрипт для поддержки атрибута form в старых браузерах.

Атрибут form связывает элементы или группу элементов <fieldset> с формой по её идентификатору. Такая связь необходима в случае, когда элемент не располагается внутри формы. Таким образом, можно отправлять данные на сервер и работать с формой, как если бы элементы находились внутри формы.

Просто подключите jquery и этот скрипт:
github.com/Ti-webdev/js-attr-form/blob/master/html5-attr-form-fallback.js

flotr2 — это библиотека с открытым кодом для построения HTML5 графиков и диаграмм. Flotr2 — так как стала ответвлением от Flotr, но уже без привязки к Prototype JS и с множеством усовершенствований.

Доброго времени суток! Давно хотел побаловаться с html5 canvas. Когда стал вопрос, что же сделать этакое не слишком трудоемкое и не слишком убогое, решил сделать заменитель иконки ожидания (gif рисунка).

В общем вот что у меня получилось: http://receipt.of.by/html5_canvas/html5_canvas.html. Всем смотрящим просьба смотреть не менее 5 секунд — будет сюрприз.

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

О том, что вы читаете

Вот оно и свершилось — перед вами продолжение советов начинающим верстальщикам. Если вы не читали первую часть, то можете сделать это прямо сейчас.
В данной части вы ознакомитесь ещё с 11 советами (именно столько в моей второй заметке их находится).
Сперва мы пройдём нововведения в визуализации, а затем пофилосовствуем на тему семантики.

Ещё немного лирики

После выхода первой части я получил огромное количество feedback'a. Если честно, я не ожидал такого желания изучить что-то новое. Да-да, быдлокодеры там тоже есть. Но сейчас не об этом…
Также, как вы можете заметить, что количество человек, добавивших мой топик в избранное достигло миллиона, достаточно велико, что не может не свидетельствовать об огромном интересе к HTML5. Итак, поехали.

Новый справочный сайт HTML5Please может сильно помочь при разработке кросс-браузерных сайтов на HTML5.

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

HTML5Please идёт дальше. Кроме информации c caniuse.com, он ещё даёт практические рекомендации, каким образом лучше реализовать каждую фичу HTML и CSS. Просто вписываете в поисковую строку любую функцию — и сразу видите рекомендацию, можно её использовать или нет в данный момент, а если можно, то с какими условиями.

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

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

Mac OS X Lion воссоздали на HTML5 и CSS3 (если быть честным воссоздали совсем не всю ОС). Чудо доступно по ссылке: www.alessioatzeni.com/mac-osx-lion-css3

Достался мне проект по адаптации флеш-курса электронного обучения под 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 заметны некоторые фризы при движении.