Pull to refresh
  • by relevance
  • by date
  • by rating

Статистика по книге «HTML5: Up & Running»

Creative Commons *
Марк Пилгрим выложил статистику по книге «HTML5: Up & Running», которая опубликована издательством O'Reilly в августе 2010-го. Хотя этот справочник по HTML5 доступен бесплатно на сайте Dive Into HTML5 (под лицензией Creative Commons Attribution), в первые шесть недель было продано более 14 000 копий (из них 25% в цифровой форме). Таким образом, издательство O'Reilly быстро окупило все расходы. Сейчас Пилгрим получил первый чек сверх того, что издательство платило ему авансом в течение года работы над книгой.

Из четырёх написанных справочников Пилгрима это лишь второй после Питона, который окупился до такой стадии. Автор считает, что открытая модель публикации привлекла внимание к книге, благодаря чему было получено 1500 предварительных заказов ещё до появления её в магазинах.
Читать дальше →
Total votes 51: ↑46 and ↓5 +41
Views 3.7K
Comments 30

Знакомство с WebGL

Website development *WebGL *
Sandbox

Введение


Статья создана с целью показать основные действия, необходимые для отображения 3d в современном браузере, используя технологию WebGL. Для достижения цели рассмотрим задачу построения нескольких линий в трехмерном пространстве.

Схема работы:
  1. Получаем WebGL контекст из canvas'а.
  2. Загружаем программу шейдеров. А именно:
    • создаем программу шейдоров;
    • получаем исходный код отдельно для вершинного и фрагментного шейдеров;
    • компилируем коды шейдеров;
    • присоединяем к программе;
    • активируем программу.

  3. Устанавливаем две матрицы: model-view и projection.
  4. Размещаем, заполняем, активируем буферы данных вершин.
  5. Рисуем.

Читать дальше →
Total votes 68: ↑67 and ↓1 +66
Views 42K
Comments 15

Индикатор прогресса с помощью HTML5 Canvas

HTML *
Привет, Хабр!
Всё больше статей появляется про Canvas, и это не может не радовать. Основы, будем надеяться, уже изучены, а мне хотелось бы поделиться примером возможного практического использования canvas, а именно создать анимированный индикатор прогресса.

Для нетерпеливых результаты эксперимента можно посмотреть здесь: http://pastehtml.com/view/1d7z824.html, а также скриншот конечного результата:


Прогресс-бар получился довольно простой, но в то же время в стиле веб 2.0 — закругленный (конечно же!), с элементами глубины и объема: то есть тенями и градиентами.

За подробностями прошу под кат.
Приступить к созданию
Total votes 93: ↑88 and ↓5 +83
Views 6.5K
Comments 58

Kothic JS: рендерер OpenStreetMap, поддерживающий MapCSS/0.2, портировали на джаваскрипт, рисующий по холсту

OpenStreetMap *
Многим поклонникам OpenStreetMap хорошо известен рендерер (отрисовщик) под названием Kothic, отличающийся неплохою поддержкою перспективного черновика стандарта картографических стилей MapCSS/0.2 и способный рисовать зрелищные векторные карты (даже и псевдо-3D — в косоугольной проекции, судя по скриншотам).

Несколько дней назад без особого шума (если не считать отдельной страницы в вики OSM да ещё одной записи в твиттере у автора другой небезынтересной библиотеки — Leaflet, о которой упоминалось ужé на Хабрахабре и которая успела с тех пор заметно подразвиться) на свет Божий вышла версия Kothic, портированная на JavaScript и называющаяся по такому случаю Kothic JS. Взаимодействуя с Leaflet, скрипт Kothic JS отрисовывает векторную карту на холстах (HTML5 canvas) и формирует из этих холстов квадратные плитки («тайлы») для картографического движка Leaflet. Всё это происходит прямо во браузере.

Читать дальше →
Total votes 30: ↑22 and ↓8 +14
Views 3.5K
Comments 37

Бесконечный Mario на HTML5

HTML *
Если вам интересно изучить разработку игр на HTML5/JavaScript, можете посмотреть на Бесконечного Mario на HTML5 (временно не работает: привышен лимит у хостера; зеркало).

Игра является клоном этого проекта Minecraft: уровни генерируются до бесконечности, только там игра была на Java (тоже с исходниками), а здесь переписана на HTML5.

Гладкая игра без тормозов и хорошо читаемый код. Правда, есть некоторые глюки, например, фоновая музыка играет вроде только в Firefox 4.

Если жизней не хватает, можете добавить через JS-консоль браузера:

Mario.MarioCharacter.Lives += 1024

Исходники на github: github.com/robertkleffner/mariohtml5
Total votes 71: ↑66 and ↓5 +61
Views 8.5K
Comments 44

Adobe Edge: редактор анимации HTML5/JavaScript

HTML *
Adobe сегодня выпустила новый инструмент Adobe Edge (public preview), который предназначен для создания простого анимированного контента на открытых стандартах: HTML5, JavaScript и CSS3. Предполагается, что для растущего числа мобильных устройств HTML5 более приемлем, чем Flash. В первую очередь для мобильного рынка и создан новый редактор. Впрочем, никто не мешает делать с его помощью любую веб-анимацию HTML5, а в будущем — HTML5-игры и другие приложения.

Adobe Edge призван удачно дополнить Flash и сохранить позиции Adobe как лидера на рынке ПО для веб-дизайна. Эта компания заявляет, что давно продвигает технологии HTML, в качестве примеров можно привести такие продукты как Dreamweaver, Illustrator, Digital Publishing Suite и недавно вышедший Flash-to-HTML5 конвертер Wallaby.

Редактор Adobe Edge распространяется бесплатно, скачать можно здесь. Версия 1.0 выйдет в следующем году.
Функционал и интерфейс редактора Adobe Edge
Total votes 49: ↑41 and ↓8 +33
Views 41K
Comments 35

diveintohtml5 перевозим на app engine

HTML *
Т.к. с недавних пор сервис документации по html5 diveintohtml5.org Марка Пилгрима лежит — я решил поднять свой с преферансом и дамами на платформе гугла. Все доки оказались доступны на гитхабе и там лишь статические файлы, потому никаких проблем не возникло. Единственно из-за ограничений гугле на максимальный размер файла 10МБ не влезли два видео, но влезла их копия в формате webm.
Наслаждаемся.
UPD: заменил видео на более мелкие тех же форматов, и поправил пару недочетов с API геолокации гугла.
Total votes 24: ↑22 and ↓2 +20
Views 556
Comments 8

Chainvas: изящный и миниатюрный «костыль», добавляющий средства цепного вызова (method chaining) к любому API

JavaScript *
Tutorial
Благодаря библиотеке jQuery примерно с 2006 года (то есть лет пять как) никому не надо объяснять, что такое method chaining: это та самая техника программирования, в которой методы объекта могут быть вызваны друг за другом по цепочке, как в jQuery.

Главнейшим достоинством этой техники является заметная экономия усилий программиста. С нею программисту не приходится заново, неоднократно записывать имя объекта вот в такой манере:
obj.шмяк();
obj.тыдыжжь();
obj.ынц();

Вместо этого программист может вызвать все методы цепóчкою — в одну строку:
obj.шмяк().тыдыжжь().ынц();

Если же ему покажется, что такой вид записи хуже читается человеком, чем предыдущий (особенно когда у методов появляются параметры, иногда довольно обширные), то тогда программист может записывать имена методов с новой строки (JavaScript это позволяет), но всё равно экономить на имени объекта:
obj
   .шмяк(параметр1, параметр2, …)
   .тыдыжжь(параметр1, параметр2, …)
   .ынц(параметр1, параметр2, …);

На практике возможность такой техники обеспечивается тем, что ни один метод объекта не возвращает значение undefined. Вместо этого, если метод является командою, а не запросом (то есть выполняет некоторое действие, а не возвращает некоторое значение), то в конце его автор библиотеки пишет «return this» — этим-то и обеспечивается возможность записи вызова нескольких команд подряд в форме цепочки.

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

Удобство цепного вызова вызывает привыкание. Ну правда же: достаточно пару-тройку-другую недель попрограммировать на jQuery — и обыкновенные API начинают раздражать, даже бесить, своею допотопною невозможностью цепного вызова. Также недостаёт возможности задания их свойств в виде объекта, передаваемого методу, подобному .css({color: 'red', 'line-height': 1}) в jQuery.

Вообразите себе, например, как необыкновенно было бы удобно, кабы по холсту (<canvas>) можно было рисовать цепными вызовами в такой манере:
ctx.beginPath()
   .prop({
      lineWidth: 2,
      strokeStyle: '#333'
   }).moveTo(0,0)
   .bezierCurveTo(50,50, 80,80, 100,100)
   .stroke().closePath();

И средство для именно таких цепных вызовов появилось — благодаря Lea Verou. Вот оно:

[Chainvas]

Читать дальше →
Total votes 58: ↑42 and ↓16 +26
Views 2.4K
Comments 10

APNG (анимированный PNG) в Google Chrome, Safari и IE

Website development *
Tutorial
В последние дни при веб-сёрфинге мне попадаются разнообразные полезные «костыли», и я тотчас же пишу о них на Хабрахабре. Вот ещё один.

Как известно, анимированные PNG в формате APNG не включены в стандарт PNG, из-за чего ряд браузеров (IE, Safari, Google Chrome) анимацию в этих изображениях не поддерживают (а вместо неё показывают статический кадр). Чтобы преодолеть эту проблему, предприимчивый Lord_D даже пробовал засовывать кадры по одному в сжатый SVG. Надеюсь, его смелость даёт полное представление о том, до каких крайностей способен в отчаянии дойти веборазработчик.

К счастью, можно обойтись и без крайностей. Евгений Степанищев упомянул о том, что Давид Мзареулян сочинил и выложил на Github библиотеку apng-canvas, обеспечивающую кроссбраузерное отображение APNG во всех тех браузерах (включая стандартный браузер Android), которые сами по себе APNG не понимают. Отображение достигается отрисовкою на холсте (<canvas>).

Объём этой библиотеки — чуть больше 4 Kb.

Читать дальше →
Total votes 108: ↑89 and ↓19 +70
Views 13K
Comments 52

TradingView – онлайн платформа технического анализа на HTML5 и социальная сеть для трейдеров. Стартуем

TradingView corporate blog Website development *
Sandbox
Совсем коротко

TradingView.com – это социальная сеть для трейдеров, в основе которой лежит онлайн платформа технического анализа. Клиентская часть (чартинг или графики) реализована на HTML5 и это первый в мире инструмент для трейдеров такого уровня функциональности.

image

Читать дальше →
Total votes 86: ↑75 and ↓11 +64
Views 56K
Comments 80

Создание при помощи HTML5 canvas значка ожидания события

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

В общем вот что у меня получилось: http://receipt.of.by/html5_canvas/html5_canvas.html. Всем смотрящим просьба смотреть не менее 5 секунд — будет сюрприз.
Читать дальше →
Total votes 31: ↑10 and ↓21 -11
Views 1.2K
Comments 27

flotr2 — графики и диаграммы на HTML5

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


Читать дальше →
Total votes 85: ↑81 and ↓4 +77
Views 34K
Comments 26

Интерактивная визуализация данных Envision.js

Website development *JavaScript *
Envision.js библиотека для создания быстрых динамических и интерактивных визуализаций данных на HTML5.


Возможности:

1) Визуализация в реальном времени.
2) Временная шкала
3) Визуализация валют ( как на яндексе прям )
4) Поддержка Ajax в интерактиве.
5) Можно побаловаться фракталами.

Читать дальше →
Total votes 88: ↑84 and ↓4 +80
Views 4.8K
Comments 17

«Паскалевская графика на HTML5» или «Что Opera сделала с Rainbow Dash»

Abnormal programming *JavaScript *HTML *
Увидел на тематическом сайте, посвящённом сериалу My Little Pony код на Turbo Pascal, использующий старинный модуль Graph и рисующий нескольких персонажей.

Код содержал только вызовы функций и комментарии, javascript отлично его парсил. Осталось только дописать свои графические функции.

Финальная версия
Читать дальше →
Total votes 115: ↑92 and ↓23 +69
Views 9.8K
Comments 114

Bomberman Online — HTML5 мультиплеер онлайн игра от хабраюзеров. Тестируем нагрузку!

Self Promo
Bombermine Online — результат последних двух недель тестирования и подготовки движка для большого кол-ва игроков онлайн.

Движок написан на Java + Jetty (бекэнд). Фронтэнд — HAProxy + Nginx + Node.js. Клиентсайд — GWT, который транслируется в HTML5/canvas + javascript + websockets. Хостится всё в облаке.

На данный момент рекорд — 50 игроков онлайн. Настроен весь необходимый софт для мониторинга нагрузки. После хабраэффекта обещаем выложить отчёт. Ждём гостей.

Ну а под катом: видео геймплея и немного предыстории создания движка
Total votes 208: ↑195 and ↓13 +182
Views 14K
Comments 179

Bomberman Online и хабраэффект — 450 игроков на одной карте. Отчёт и детали игрового движка

IT systems testing *Java *Game development *


Как и обещали в топике-анонсе нашей игры, выкладываем отчёт о хабраэффекте и детали игрового движка.
Читать дальше →
Total votes 180: ↑166 and ↓14 +152
Views 33K
Comments 95

Манипуляция пикселями на холсте с использованием Javascript

CSS *JavaScript *HTML *
Sandbox
В данной статье будет рассмотрено управление изображением с помощью Javascript и HTML тега canvas. Статья является переводом. Оригинал на phpied.com.
Читать дальше →
Total votes 37: ↑32 and ↓5 +27
Views 18K
Comments 8

Bart Chalkboard Generator

Website development *JavaScript *HTML *
Sandbox
Здравствуйте.
Мне бы хотелось рассказать про мой «Bart Chalkboard Generator».image
Я уверен, что большинство из вас знают сериал «The Simpsons», и вы помните что почти в каждой новой заставке Барт писал на школьной доске что-то новое, типа: «They are laughing at me, not with me». А в интернете часто всплывает картинка с текстом: «I will use google before asking dump questions». И вот однажды я подумал, почему бы не создать простой генератор подобных картинок, да ещё и на Html5, что бы попрактиковаться?
Читать дальше →
Total votes 90: ↑65 and ↓25 +40
Views 9.9K
Comments 61

Игра MMO на карте комикса Click and Drag

Game development *


Огромную площадь 13 гигапикселов комикса xkcd Click and Drag можно использовать как карту для многопользовательской игры. Такая идея пришла github-пользователю n01se, и они вместе с Рэнделом Монро воплотили её в жизнь. В игре нет какой-то «цели», это просто техническая возможность путешествовать по карте одновременно с другими игроками, и общаться с ними.
Читать дальше →
Total votes 46: ↑45 and ↓1 +44
Views 19K
Comments 18

HTML5 Canvas: rotate и translate на примере

JavaScript *
Sandbox
Здравствуйте, уважаемые Хаброюзеры! В своём дебютном посте, я хотел бы рассказать о такой замечательной и интересной штуке, как HTML5 Canvas, а точнее о функциях контекста, которые по моему мнению, освещены меньше всего — transform и rotate.
Когда я начинал свои эксперименты и копания в области новомодного канваса, в рунете была всего одна статья внятно объясняющая, как нужно вертеть рисунки на холсте. Более-менее понять смысл загадочного Java Script'a я смог только «полопатив» исходники Tululoo HTML5 Game Maker.
Читать дальше →
Total votes 13: ↑6 and ↓7 -1
Views 39K
Comments 7