[Из песочницы] Анимация спрайтов при помощи CSS, JS и Canvas

Всем привет. Пару дней назад совершенно случайно наткнулся в залежах дисков на «Космические рейнджеры 2: Доминаторы». Устанавливать не стал, так как сейчас не хватает времени, чтобы как следует в неё погрузиться. А решил посмотреть, что на диске находится. Посмотрел «Фан-Арт» и там увидел программку для ковыряния ресурсов рейнджеров. Вот и решил посмотреть, из чего же сделаны наши доминаторы. Покликав немного, нашел файлики с анимацией в формате GAI. Начал любоваться той анимацией. Захотел их сохранить в «гифки», но не как не давала та программка сохранить анимацию? Можно либо сохранить текущий кадр, либо все файлы в PNG. Я решил сохранить все кадры, а их было — 150. Картинки все есть, а почему бы не сделать с ними ту же анимацию.

«Динамические» шаблоны в Блоггере

Движок для блогов от Гугл обзавелся новыми шаблонами которые используют силу современных веб технологий.

Динамические шаблоны поддерживают подгрузку записей на лету, при прокрутке вниз, быстрый поиск без перезагрузки страниц а так же красивые эффекты при переходе в разные режимы просмотра блога или архивов.

Впрочем, лучше об этом расскажет видео



или примеры за ссылками:

• Классический (classic) (Gmail) — добавлена подгрузка постов и картинок при прокрутке


• Карточки (flipcard) (M loves M) — фотографии в виде иконок, переворачиваются при наведении курсора


• Журнал (magazine) (Advanced Style) — элегантный и простой стиль


• Мозаика (mosaic) (Crosby’s Kitchen) — россыпь картинок разных размеров


• Панель (sidebar) (Blogger Buzz Blog) — в боковой панели «бесконечный» список постов


• Снимок (snapshot) (Canelle et Vanille) — список записей будет показан как интерактивная панель со снимками


• По времени (timeslide) (The Bleary-Eyed Father) — «горизонтальный» список постов по времени

Что бы проверить как оно смотрится на блоге, достаточно дописать к ссылке /view/<английское_название_стиля>

Например http://radio-t.com/view/classic

Источник: Хабрахабр - Google
Оригинальная страница: «Динамические» шаблоны в Блоггере

Веб-разработка на iPad

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

Инвентарь

Нам понадобится текстовый редактор (я выбрал Gusto, хотя можно было использовать, например, Textastic), графический редактор (установил на всякий случай сразу два: Adobe Photoshop Express и PhotoPad, оба бесплатные), приложение Яндекс.Фотки для загрузки картинок в интернет, и CSS3Machine — про нее расскажу прямо сейчас.

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

[Перевод] Валидация формы в Firefox 4, используя возможности HTML5

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

К сожалению еще не все браузеры поддерживают эти возможности и поэтому мы попытались сосредоточиться на использовании этих возможностей в Firefox 4.

Почему валидация формы со стороны браузера?

Идея валидации формы в HTML5 состоит в том, чтобы отказаться от использования JavaScript при проверке содержания полей: действительно ли этот адрес электронной почты допустим? заполнено ли это поле? соответствуют ли пароли? Раньше в большинстве случаев для этих целей использовался JavaScript. Вы можете написать свой собственный javascript-код или воспользоваться javascript-библиотекой, но это всегда будет повторной, скучной и подверженной ошибкам задачей. С формами, проверенными браузером, Вы больше не должны заботиться о этих задачах, достаточно записать простой HTML.

LimeJS: Пишем кроссплатформенную игру на HTML5 с поддержкой прикосновений

Введение

LimeJS — 2D Open Source HTML5 движок для написания игр с поддержкой прикосновений и работающий (по описанию) на большинстве мобильных платформ. Я нашёл его не сам, мне прислали письмо с просьбой рассказать о нём сообществу и я решил, раз так — что уж мелочиться, надо попробовать его в деле. А вы, в свою очередь, если движок вам понравится или вы хотя бы поддерживаете его идею и начинание, обеспечьте пожалуйста авторов инвайтом, потому что с песочницей у них как-то не сложилось (не знаю почему). Кроме того, я заранее договорился с авторами движка, что буду честен — буду рассказывать и о достоинствах и о недостатках, так что надеюсь убрать из статьи ореол рекламы (хотя какая реклама может быть связана с open source)..?

Open Source, кроссплатформенность и HTML5 — это то, что я люблю — инновации и свобода :). И ещё, сам движок написан на Closure и поддерживает chaining, это вносит дополнительные яркие цвета в свойства движка и программирование с его использованием. Конечно, необходимо ещё и удобство разработки игр само по себе, на что мы и испытаем LimeJS вместе с вами в этой статье. Движок преподносится как кроссплатформенный, на iPad'е представленные на сайте игры вполне себе работают, немного медленно, но вполне играбельно, ну а на моём Hero/Android2.1 (HTML5, наверное, неполный) они естественно подтормаживают и глючат — то есть буквально, играть в эти игры нельзя. Впрочем, практически все объекты в играх даже на смартфоне отображаются и действуют корректно, так что будем надеяться что с последующуей оптимизацией всё будет отлично даже на хилых смартфонах типа моего.

Движок, кстати, позиционируется как замена Flash-технологий в играх. Это болезненная тема для многих среди нас в связи с общим гноблением флэша, но при этом существующими и даже создающимися на нём отличными играми. (И, как я лично считаю, удобство самого механизма создания анимации в Flash пока ещё не повторено ни для HTML5/SVG ни для альтернатив). Так вот, может быть у этого движка действительно есть шанс завоевать любовь разработчиков на Flash и привить им любовь к HTML5. Решать им и вам. Главное отличие LimeJS от, допустим, ProcessingJS — ориентировка не на машину состояний, не на обновление в каждом кадре, а на «таймлайн» — событийность в сценарии игры.

Кстати, вот пример кода: javascript и html — чтобы вы могли сразу сделать какой-то вывод, а то я изначально относился к движку довольно скептически, а вот сейчас думаю, что наверняка зря.

Что получится

В течении прочтения статьи мы напишем очень упрощённую версию пинг-понга на LimeJS. Вот так будет выглядеть результат:



В конце статьи видео с демонстрацией написанной игры на iPad, iPhone и Android.

[Перевод] HTML5 будет закончен к 2014, что будет дальше?

В понедельник разработчикам был дан зеленый свет на начало использования HTML5.

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

W3C расширила устав рабочей группы по HTML (HTMLWG), которой поручено создание HTML5, и анонсировала, что HTML5 достигнет статус Last Call (прим. пер.: это вариант Working Draft перед приданием нового статуса, например, Proposed Recomendation, как это сейчас происходит с CSS 2.1) позже в этом году. Через несколько лет тщательного тестирования спецификация должна быть окончательно готова ко второму кварталу 2014 г.

“Разработчики могут использовать HTML5 уже сегодня и мы призываем из делать это,” — говорит Ian Jacobs, глава маркетинга W3C.

FM с созданием превью при добавлении изображений и возможностью загрузки файлов на HTML5

Файловый менеджер на PHP + JQuery, использует Ajax Upload (http://valums.com/ajax-upload/). Для создания изображений предпросмотра необходима библиотека GD.

Что есть: — минималистичный интерфейс, встраивается в DIV — при наличии memcached относительное мало обращается к жёсткому диску — лимит на максимальный размер директории, а также на размер загружаемого файла — ограничения по типам файлов — drag&drop файлов из файлового менеджера для вставки в нужные поля — загрузка множества файлов за раз (нажатием на кнопку или HTML5 drag&drop) — при добавлении изображений создаются превьюшки — работа в ie6 (проверялось только в IEtester)

[Из песочницы] Загрузка файлов с помощью HTML5 и сколько раз мы сказали нехорошие слова

Стояла задача: найти или создать загрузчик файлов на сервер, использующий возможности HTML5 для мультизагрузки. Загрузчик должен:

• отправлять методом POST любые параметры вместе с файлом;
• отправлять куки;
• предоставлять возможность выбора сразу нескольких файлов (или нескольких тысяч – тут как пользователь захочет);
• отправлять файлы группами;
• файлы собираются в группы до определенного количества мегабайт, или до определенного количества файлов в группе; (это связано с тем, что на сервере есть ограничение на размер POST запроса и на количество файлов в одном пакете)

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

Итак, что из этого получилось

Логотип HTML5: история, детали, проблемы

Хабр уже знает о том, что W3C выпустила логотип HTML5 и ряд бейджов к нему, а многие успели смутиться анонсам о “переходе к безверсионной модели”. Но сейчас не об этом. Сейчас о том, откуда этот логотип взялся и зачем он нужен.

Зачем нужен логотип

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

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

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

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

FileSystem API&File API: разбираемся и используем

В данной статье я хочу рассмотреть FileSystem API и File API, разобраться с его методами и показать пару полезных штук. Эта статья является компиляцией материалов с html5rocks (1, 2, 3). Все представленные ниже демки можно посмотреть по первым двум ссылкам. Третья ссылка так же предлагает ряд интересных демо. Ну а теперь займемся изучением материала.

Волшебство ветра и шёлка

Нашёл восхитительное творение, выполненное с использованием HTML5. Вы «чертите» мышкой некоторый контур, и он превращается в «цветной шёлк, раздуваемый ветром».



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

Позвольте себе немного отдохнуть. Поделитесь своим шёлком.


Источник: Хабрахабр - Дизайн
Оригинальная страница: Волшебство ветра и шёлка

[Из песочницы] HTML5 CANVAS шаг за шагом: основы

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

audio.js — слушаем музыку в любом браузере

audio.js — это javascript библиотека, позволяющая использовать HTML5 тэг повсюду. Что скрывается за словом «повсюду». Если есть возможность использовать тэг , то будет использоваться он, иначе будет подключен плеер на flash. В библиотеку так же входит и UI отображение для этого плеера, которое может быть видоизменено с помощью css.

[Ссылка] Создаем простейший HTML5 3D движок на JS и HTML5 Canvas API

Вероятно, что если бы вы создавали полномасштабный 3D-движок, в комплекте с трехмерной матрицой преобразования, точечных объектов, плоских объектов, тенями и других пространственных вычислений — это было бы довольно трудно.

Но что, если мы хотим создать оптимизированный 3D JavaScript движок, который поддерживает переходы и повороты? Неужели это так трудно?

Так вот, чтобы создать такой движок нам понадобиться всего лишь 40 строчек кода!

Ссылка: http://habrahabr.ru/linker/go/110346/


Источник: Хабрахабр - Web-разработка
Оригинальная страница: [Ссылка] Создаем простейший HTML5 3D движок на JS и HTML5 Canvas API

[Ссылка] 24 веб-приложения, сделанные на html5

По ссылке сайт, который имеет вид календаря на 24 дня. Каждый день — отдельная демка. Как пишут сами ребята "stuff that Steve Jobs would love". На данный момент заполнены уже 4 дня.
Да, бильярд затягивает, так что будьте осторожны.

Ссылка: http://habrahabr.ru/linker/go/109351/


Источник: Хабрахабр - Web-разработка
Оригинальная страница: [Ссылка] 24 веб-приложения, сделанные на html5

Доброкнижка про HTML5 от Google

Пока в интернетах идут войны на тему HTML5, убьет он Flash или нет, компания Google выпустила онлайн книгу 20 Things I Learned About Browsers & The Web. И это действительно книга!

Ребята создали веб-приложение, напоминающее детскую книгу, ее можно листать, оставлять закладки, а посвящена она веб-технологиям.

Impact HTML5 Game Engine — движок на JS

Просматривая обзоры инди-игрушек наткнулся на весьма интересный проект — Biolab Disaster (да поможет ему НЛО выдержать хабраэффект) — браузерный платформер на чистых HTML5 & Javascript, навеивающий воспоминания о тех временах, когда каждую игру делали с душой.
Коротенькая и незатейливая игрушка крутится необычайно быстро и красиво, оставляя за собой приятное впечатление, активированные чекпоинты и маленькие кусочки врагов :)
Выполнена она на движке автора этой же игры, Impact HTML5 Game Engine, в качестве демонстрации его возможностей. Движок на данный момент все еще находится в состоянии разработки, но предлагает уведомить нас электронным письмом по официальному выходу в свет.
За новостями можно так же следить в блоге автора.

На закуску — видео с геймплеем, некоторыми моментами создания игры и редактором уровней — с комментариями автора.

(Благодаря видео можно узнать ссылку на официально еще не опубликованный, но вполне рабочий level editor)

Флеш становится все менее значимым, что не может не радовать.
Приятного пятничного ковыряния в коде ^_^


Источник: Хабрахабр - JavaScript
Оригинальная страница: Impact HTML5 Game Engine — движок на JS

[Перевод] HTML5 Video — от А до Я

Да, да, это очередная статья про html5 и тэг < video >. Но главным ее отличием будет то, что здесь будут рассмотрены самые базовые понятия и теории. Так что приготовились внимательно читать и записывать, let html5 rocks!

Canvas-трансформации доступным языком

Доброго времени суток, хабравчане! В этой статье я подробно расскажу вам о трансформации и вращении в javascripte. Матрица трансформаций, на первый взгляд, штука непонятная и многие ею пользуются даже не осознавая, что она делает на самом деле, используя готовые значения из интернета. На MDC об этом рассказано скудненько, а информацию в английской Википедии тяжело назвать общедоступной. Постараемся разобраться в этом вместе.

Обработка звука через Audio Data API

Группа энтузиастов из числа разработчиков Firefox завершили эксперимент по обработке средствами Javascript звуковых потоков из элементов audio и video. Пару дней назад результаты их труда опубликованы на портале Mozilla Central в разделе Audio_Data_API . Там есть несколько действительно замечательных демок. Эта разработка, скорее всего, будет включена в версию Firefox 4.

Рабочие демки

Визуализация БПФ (средствами Javascript)

Наложение аудиоэффектов в реальном времени

Фильтр JS IIR