В последнее время все больше и больше игр делается под браузеры. Помимо разработки новых новых игр наблюдается тенденция «клонирования» старых игр. В качестве примера можно привести такие игры как Battle City, DX-BALL.
Смотря на разработки третьих лиц, у меня все больше и больше возникало желание сделать что-то подобное, написать свою браузерную игрушку. Но каждый раз начиная что-то делать я вставал в тупик, т.к. отсутствие фантазии и дизайнеских навыков давали о себе знать. Не так давно я увидел пост о том, как ребята из студии BorodinART сделали клон одной из любимых игр детства — DX-BALL. Этот пост вдохновил меня и я решил сделать клон стандартной игрушки из KDE — KBounce или «Неугомонные шарики».
Читать полностью »
Рубрика «html5» - 47
Клон игры JezzBall / KBounce / «Неугомонные шарики» на html5
2014-02-19 в 5:59, admin, рубрики: game development, html, html5, javascript, метки: html5Bootstrap Modal Iframe Костыль
2014-02-12 в 9:46, admin, рубрики: Bootstrap, child, html, html5, iframe, javascript, jquery, modal, resize, window.postMessage, Веб-разработка, метки: bootstrap, child, html5, iframe, javascript, jquery, modal, resize, window.postMessage 
«Не надо, я сам»
Хромой Итальянец
Постановка задачи
Предлагается следующий сценарий: заказчик хочет разместить на сайтах своих партнёров небольшой горизонтальный динамический баннер с некой бизнес логикой, несложная калькуляция, табличка, локализация. Помимо этого, требуется всплывающее окно с крупной картинкой и контентом, которые по высоте больше чем родительский баннер.
Сразу дали понять, что партнёры, хоть и партнёры, но размещать у себя что-либо сложное не будут, то есть про jQuery забыли. Стандартное решение – iframe с минимальной функцией resize на голом JavaScript.
HTML5: Drag-and-Drop. Кроссбраузерный? Более чем…
2014-02-09 в 14:03, admin, рубрики: html5, javascript, метки: drag and drop, html5, javascript 
Сегодня я запускаю первую версию js-скрипта DND v 1.0. Данный скрипт предоставляет возможность перетаскивать элементы на странице и помещать их в какую-либо область.
Перейти на сайт
Пролог
В современном web мы все привылки использовать такую прекрасную javascript-библиотеку как jQuery. Но для того, чтобы создавать у себя на странице какие-то динамические эффекты приходиться еще прибегать к jQuery UI, не все слегкостью смогут осилить, разобраться с какими-то премудростями javascript-инициализации. В тем более теперь есть современный HTML5, который, со своим API, может дать легкий подход к разработке. Но как мы все знаем, HTML5 не поддерживается старыми браузерам, однако, это легко исправляется собственными решениями. В итоге я решил написать javascript библиотеку, которая дает возможность использовать HTML5 drag-and-drop у себя на сайте с поддержкой всех браузеров, включая десктопных. При этом технологию можно не изучать, привыкнуть и применять во благо, это все, что от нас требуется.
Особенности
- Легкое использование
- Легковесный скрипт -5 кб
- Не требует сторонних js библиотек
- Сочетается HTML5 и JS совместимость
- Работает на всех компьютерах и на планшетах
- От программиста требуются только знания CSS
Использование Audio API для создания вокодера
2014-02-09 в 13:56, admin, рубрики: api, Audio API, canvas, html5, javascript, метки: Canvas, html5, javascript 
В прошлой статье мы немного познакомились с возможностями Audio API и написали простенький визуализатор сигнала. Теперь настало время копнуть поглубже и распробовать новые фишки API. Но нам нужна цель, к которой мы будем стремиться, и в данном случае нашей целью будет как следует поиздеваться над входящим сигналом и его характеристиками. Другими словами, мы напишем маленький вокодер.
Так как итоговый код получился довольно-таки большим, то в статье будет рассмотрены наиболее важные и интересные с точки зрения Audio API фрагменты. Итоговый результат вы конечно же сможете посмотреть на демке.
Tizen DevLab и Хакатон в Новосибирске!
2014-02-04 в 9:02, admin, рубрики: development, fruct, Hackathon, html5, intel, mobile development, Samsung, tizen, tizen devlab, Блог компании Intel, операционные системы, разработка, разработка приложений, тренинг, тренинги, хакатон, метки: development, fruct, Hackathon, html5, intel, mobile development, Samsung, tizen, tizen devlab, операционные системы, разработка, разработка приложений, тренинг, тренинги, Хакатон 
Наверняка кто-нибудь из участников, подписавшихся на хаб Tizen, уже заметил новое событие. В этом сообщении я расскажу немного подробнее о грядущем мероприятии в контексте уже прошедших тренингов и хакатонов по Tizen.
Читать полностью »
myStreamer
2014-01-26 в 17:45, admin, рубрики: AngularJS, html, html5, javascript, web, видео, сервис, Украина, метки: html5, web, видео, сервис, УкраинаДоброго времени суток, уважаемые читатели!
Сегодня я хотел бы поделиться с вами небольшим веб приложением — myStreamer, которое буквально собиралось на коленках за 2 ночи.
Немного предыстории:
Не секрет, что у нас тут “на” Украине творится, назовем это условно, дабы не обидеть стороны и остаться аполитичным, “массовые волнения народа, по поводу происходящих в стране событий”. И вот спустя два, с небольшим, месяца после начала этого действа ко мне в Skype постучался друг (он же в последствии и идейный вдохновитель первой стадии проекта) Avicorn (человек сугубо суровый и любящий порядок, собственно это и стало первопричиной идеи). Выразив свою обеспокоенностью отсутствием времени искать и собирать видео потоки новостных каналов, а так же постоянно их обновлять (youtube заставляет, как мы поняли запускать новые сессии вещания после каждого перерыва в трансляция), он намекнул, что не плохо бы было собрать с миру по нитке на одной страничке и куда-нибудь (это выяснилось уже позже, оказывается плеерам нужны “домены” и localhost им не нравится) выложить, чтобы он мог в свободную минуту предаться созерцанию происходящего действа. Одни каналы крутят постоянно новости, другие транслируют “стримеров” с полей, третьи аналитику толкают и открывать много страниц для обычного человека весьма затруднительно, поэтому, хоть какой то, но порядок в виде «все на одной странице» — весьма и весьма доставляет, а если еще кто-то озаботится обновлением ссылок на потоки, то будет совершенно замечательно.
FutuReView: история одного R&D проекта
2014-01-14 в 9:35, admin, рубрики: canvas, html5, svg, визуализация данных, я пиарюсь, метки: Canvas, html5, svg, визуализация данных 
В этой статье я хочу кратко поделиться своим опытом разработки проекта и привлечь дополнительную аудиторию для получения фидбэков.
Более года назад совместно с РИА Новости и компанией РВК в Медиа Лаборатории РИА Новости родился проект FutuReView — экспериментальный инструмент навигации в описанном будущем. По сути своей этот проект — визуализация библиотеки документов (форсайтов), описывающих различные аспекты жизнедеятельности нашей цивилизации в будущем, примерно на век вперед. Различные технологии, представления того как будут устроены города, отрасли жизнеобеспечения, здоровья, коммуникаций и так далее — обо всём этом от разных компаний и исследовательских институтов.Читать полностью »
Создание превью изображений на клиенте: борьба с прожорливыми браузерами
2014-01-07 в 20:52, admin, рубрики: ajax, canvas, file api, html5, image, img, javascript, memory leaks, Веб-разработка, метки: Canvas, file api, html5, image, img, memory leaksВсем привет! Сегодня задача у нас следующая: необходимо создать интерфейс для загрузки картинок, который бы генерировал перед загрузкой превьюшки небольшого формата. На данный момент HTML5 вовсю шествует по планете, и, казалось бы, как это реализовать должно быть предельно ясно. Есть несколько русскоязычных статей на эту тему (вот, например). Но тут есть одно но. В рассматриваемом там подходе не уделено никакого внимания расходу памяти браузером. А расход может доходить до гигантских размеров. Разумеется, если загружать одновременно не более 5-10 картинок небольшого формата, то все остается в пределах нормы; но наш интерфейс должен позволять загружать сразу много изображений формата не меньше, чем у современных фотоаппаратов-мыльниц. И вот тогда-то свободная память начинает таять на глазах.
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю № 90 (29 декабря — 4 января 2014)
2014-01-04 в 19:45, admin, рубрики: 2013, 2014, css, css3, html, html5, jquery, JS, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, итоги года, Новости, ресурсы, ссылки, ссылки на сми, тренды, метки: 2013, 2014, css, css3, html, html5, jquery, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, итоги года, новости, ресурсы, ссылки, ссылки на сми, трендыПредлагаем вашему вниманию последнюю в этом году подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
.jpg "Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю № 90 (29 декабря — 4 января 2014)")
Интуитивный и удобный макет пользовательского интерфейса (GUI) для коммуникаторов и планшетных ПК
2013-12-30 в 18:41, admin, рубрики: android, GUI, html5, mobile development, usability, интерфейс пользователя, интерфейсы будущего, интерфейсы и юзабилити, мобильный интерфейс, метки: gui, html5, интерфейс пользователя, интерфейсы будущего, интерфейсы и юзабилити, мобильный интерфейсВступление
-dlya-kommunikatorov-i-planshetnyh-pk.png "Интуитивный и удобный макет пользовательского интерфейса (GUI) для коммуникаторов и планшетных ПК")
Очень много существуют различных методологий и подходов к обеспечению удобства для пользователей при использовании того или иного интерфейса коммуникации человека с техническим устройством. Сейчас существует большое количество разнообразных коммуникационных интерфейсов: тактильные (кнопки/клавиатура, рычаги/джойстики/манипуляторы(«мышь» и т.п.), тач-скрины/-пады и т.д.) и не тактильные (основанные на жестах, акустические и т.д.). У всех них разное назначение и сферы применения.
В этой публикации мы поговорим о мобильных интерфейсах для навигации и работы с WEB-страницами и контентом. Также, постараемся вместе сделать что-то простое и интуитивно-понятное для большинства пользователей мобильных устройств, таких как коммуникаторы или планшеты с тач-скрин экранами (и/или аналогичными устройствами).
Читать полностью »