HTML *

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

Предисловие

Всем привет. Не так давно я написал статью о создании загрузчика изображений на флеше. Там я упомянул, что загрузчик можно реализовать и с помощью html5 File API. Несколько вечеров и — ура — я это сделал. Настало время рассказать, какие приемы я использовал, в каких браузерах это работает, и стоит ли этим вообще пользоваться.
Напомню вкратце требования: необходимо реализовать загрузчик изображений, поддерживающий пакетную загрузку, создание миниатюр(и загрузку их на сервер), и приемлемый интерфейс.

Все прочнее в среду разработчиков входит HTML5. Важным его достоинством является наличие такой технологии, как web workers, которая позволяет в некоторой степени обеспечить, если не мультипоточность, то ее подобие при выполнении скриптов.

Суть технологии проста — в отдельные файлы выносятся функции, обеспечивающие функционирование AJAX, либо функции обрабатывающие большие массивы информации, которые во время работы уменьшают скорость построения страницы. Таких файлов может быть столько сколько нужно. При выполнении скрипта на стороне браузера создается специальный объект Worker, который и отвечает за вызов необходимых функций. Многие современные браузеры поддерживают данную технологию.

Друзья, мы обубликовали программу нашей конференции HTML5 Camp, посвященной современному состоянию и будущему веб-разработки.



Среди докладчиков конференции будут эксперты из Microsoft, Opera, Adobe, Яндекса, 1С-Битрикс и Keiss Media.

HTML5-консоль, который вы могли видеть в одном из выступлений на майской конференции Google I/O, работает в онлайне (судя по всему, только в браузере Chrome).



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

www.layzilla.com

Проект родился просто из личных нужд. Если это удобно нам, надеюсь будет полезно кому-то еще. Все просто и без наворотов. Но не смотря на это, следуем стандартам и качеству кода.

Можно создавать основу страницы проекта любой сложности.

В будущем сделаем поддержку HTML5.

Мануал для любителей почитать.

Не нашёл на habrahabr.ru упоминания о конкурсе, возможно кому-то эта информация будет полезной. Время ещё есть.

С 22 сентября по 15 ноября 2011 года проводится конкурс «The Pokki Challenge» на создание HTML5 приложения для Pokki. Тройка победителей получит $30000, $13000 и $7000 соответственно. Подробности — на сайте pokki.com.

Статья о Pokki на habrahabr: Pokki: веб-приложения внутри ОС

P.S. 1 декабря. Определены победители:
1 место ($30,000) Mohamed Tedjani Meftah — Mixtape (интернет-радио)
2 место ($13,000) Jeet Singh — Chess (шахматы)
3 место ($7,000) Denis Denisyuk — Instagrille (клиент для фотосервиса Instagram)

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

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

Традиционным средством такого экранирования является задание тексту соответствующего CSS-свойства (кодом <span style="unicode-bidi: isolate">…</span>). Однако это и долго записывать, и тег span (как известно) не семантический, да и браузерам всё ещё разрешено игнорировать CSS, если такова их настройка. Было бы лучше, кабы был специальный тег HTML для такого экранирования.

И такой тег действительно оказался введён WhatWG в подразделе 4.6.23 черновика стандарта HTML5.

Статья по следам моего доклада на концеренции User Experience`11.

Что такое HTML5?

Сегодня про HTML5 их числа тех, кто так или иначе связан с веб-разработкой, не слышал только ленивый. Вы не сильно прогадаете, предположив, что на каждой модной конференции, где есть что-то про веб, почти наверняка, звучит и что-то про HTML5. Практически каждая крупная компания, связанная с вебом, будь то Google, Apple, Microsoft, Amazon, Adobe, Oracle, Facebook, Яндекс, Mail.ru… говорит что-нибудь про HTML5, расписывается в любви на века и приверженности продвижению и развитию HTML5. Yeah! (Opera и Mozilla, безусловно, тоже в этом списке.)

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

Огромные перспективы, новая волна развития веба, новое поколение веб-приложений! Круто.

Что такое WebGL? Это новая современная библиотека, которая расширяет язык JavaScript, которая позволяет генерировать 3D графику прямо в браузере. WebGL, поддерживается многими современными веб-браузерами, такими как Google Chrome, Mozilla Firefox начиная с v4.0), Safari. Под катом несколько интересных приложений HTML5, сделанных с WebGL.

В данном туториале я покажу как получать Color Picker из изображения на HTML5 при помощи Canvas. Главная идея — нарисовать изображение на Canvas, получить перемещения и клики мышкой.

Т.к. с недавних пор сервис документации по html5 diveintohtml5.org Марка Пилгрима лежит — я решил поднять свой с преферансом и дамами на платформе гугла. Все доки оказались доступны на гитхабе и там лишь статические файлы, потому никаких проблем не возникло. Единственно из-за ограничений гугле на максимальный размер файла 10МБ не влезли два видео, но влезла их копия в формате webm.
Наслаждаемся.
UPD: заменил видео на более мелкие тех же форматов, и поправил пару недочетов с API геолокации гугла.

Самый популярный в интернете сервис для хостинга слайдов SlideShare вчера объявил о самом значительном изменении в своей истории. Презентации и документы в форматах PowerPoint, PDF, Keynote или OpenOffice теперь рендерятся и отображаются в HTML5 вместо Flash.



Разработчики говорят, что пять лет назад и представить было невозможно создание сервиса вроде Youtube или SlideShare без использования Flash, но теперь веб наконец-то созрел для этого.

Сегодня Ян Хиксон (Google) и Håkon Wium Lie (Opera Software) объявили об обновлении теста ACID3 для совместимости с современными реалиями веб-стандартов, исключив из него те части, которые могут измениться в соответствующих спецификациях.

Теперь IE9+ (включая мобильную версию IE в Windows Phone 7.5) и последние версии Firefox набирают 100/100.

В этой статье я рассмотрю такие приемы как:

• Пересечение габаритов объектов
• Принадлежность точки полигону

И рассмотрим пример реализации механики игры «Астероиды».

Здравствуйте, Хабражители!
В этом топике я хочу рассказать о том, как я создал браузерную игру «DoodleJump» на HTML5 без использования каких либо то фреймворков. Для тех кто не знает, DoodleJump — это популярная мобильная игра где главный герой «doodler» бесконечно прыгает вверх по платформам, преодолевая различные препятствия, и собирая бонусы. Эта игра широко распространена почти на всех мобильных платформах, но приличной браузерной версии этой игры нет, поэтому я и решили написать браузерную версию этой игры, пусть даже управляемую клавишами а не гироскопом.

В этот прекрасный, ничем не отличающийся от остальных день (если не брать в расчёт тот факт, что холодная погода разбила в осколки все мечтания о хотя бы паре тёплых дней в этом году что бы поездить на велосипеде), у меня выдалось хорошее настроение. И хорошее оно даже несмотря на то, что я отчаялся ставить хакинтош на свой ноут, и пришёл к неутешительной мысли, что если я хочу хоть что-то написать под iOS, то мне надо копить на продукцию фирмы Эппл. Но собственно пост не об этом, а о небольшой жизни крохотной игрушки, которую мы с вами и попытаемся создать. Честно говоря, в добрые времена я не так уж и много играл в предка нашего творения (которого ещё и не существует), но определённые теплые воспоминания ещё остались в моём сердце. Итак… Танки! Танчики! БатлТанкс! БатлСити!
Писать будем на JavaScript с выводом на canvas.

Я хотел бы поделиться прототипом игры, созданным всего за несколько часов. Надеюсь, что он вдохновит нескольких из вас! В индустрии однопользовательских браузерных игр, кажется, очень не хватает воображения и умения рассказывать истории, хотя, возможно, я просто не заметил таких игр ;), но мне не хватает таких игр, как Grim Fandango.

Ниже приведен скриншот из демонстрации, состоящей из нескольких узлов DOM, представляющих составные части главного героя, птиц и сцену. Большинство анимаций осуществляется CSS-переходами/анимациями, некоторые из которых являются динамическими и используют библиотеку move.js.

Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.


Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.

<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />

Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).

Разработчики выпускают всё больше игр на HTML5 вполне достойного качества (достаточно упомянуть, например, Monster Dash, Angry Birds или SONAR), и это только начало. Настоящий прорыв ожидается, когда выйдет браузер Chrome 14 с Native Client, что откроет дорогу для браузерных игр совершенно нового качества, с 3D и прочими наворотами.

Некоторые уже всерьёз смотрят на HTML5 как на полноценную игровую платформу. Специально для них организована конференция New Game — судя по всему, первая в мире конференция разработчиков HTML5-игр. Она пройдёт 1-2 ноября 2011 г. в Сан-Франциско, регистрация уже открыта. Ничего удивительного, что одним из главных спонсоров конференции стала компания Google. Она также отправит туда нескольких докладчиков, которые расскажут о WebGL. Кроме Google, доклады об использовании и оптимизации WebGL, Canvas и JavaScript прочитают представители Mozilla, Opera, Bocoup, GameSalad, Moblyng и другие.

via Google Code