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

27 августа приглашаем на онлайн-митап Hot Frontend

Information Security *Website development *VK API *Conferences Game design *
Всем привет! В июле мы провели в Краснодаре первый митап по Backend-технологиям – а теперь самое время обсудить Frontend. Приглашаем на онлайн-митап с разработчиками SimbirSoft. Как всегда, участие бесплатное, а за самые интересные вопросы спикеры подарят полезные подарки.

Читать дальше →
Total votes 3: ↑3 and ↓0 +3
Views 917
Comments 0

Студия Лебедева рассказала, как сделала «Бизнес-линч»

Lumber room
С недавних пор на сайте Студии Артемия Лебедева существует «урок», рассказывающий о некоторых технических аспектах создания проекта «Бизнес-линч». Повествуется, в частности о поисках инструмента для конвертации формата векторной графики SVG в формат PNG. Поскольку программа ImageMagick по ряду причин не сгодилась, установили SVG-растеризатор из комплекта «Батик». Если идти по технологической цепи сначала, были пройдены такие этапы: Flash, XML, XSL, PNG, Java.

Напомним, с 1 сентября Студия Артемия Лебедева, как обещано, ежедневно выставляет на своем сайте дизайнерские работы, предварительно подвергнутые процедуре «Бизнес-линча». Этот проект пришел на смену почти забытой «Порке», и в первые дни его существования казалось, что «бизнес-линчевать» — значит сопровождать тот или иной труд комментарием из нескольких слов, одно из которых непременно «говно». Но дальнейшее развитие проекта показало, что арт-директоры и дизайнеры студии могут быть и более многословными.
Rating 0
Views 1.1K
Comments 0

Фотобанк Fotolia 2 — теперь с API и векторными файлами

Lumber room
Цифровой фотобанк Fotolia запустил Fotolia V2, новую версию с увеличенной производительностью и двумя новыми возможностями: открытым API и способностью хранить векторные файлы.

В новой версии Fotolia полностью изменился дизайн, призванный увеличить производительность, стабильность и качество обслуживания пользователей, предоставляя улучшенную поддержку международных стандартов и языков, отличных от английского.
Читать дальше →
Total votes 6: ↑5 and ↓1 +4
Views 523
Comments 6

Opera 9.24 / Opera 9.50

Software
Норвежские разработчики выпустили новую версию шустрого и любимого многими браузера. В Opera 9.24 практически нет никаких изменений по сравнению с предыдущей версией, только исправления двух ошибок: одна могла позволить злоумышленникам запускать вредоносный код на пользовательских компьютерах при помощи сторонних клиентов электронной почты, а другая делала возможным подмену одним сайтом javascript функций с другого.

Скачать: Opera_9.24_International_Setup.exe, 6.25Mb

Если кому-то хочется более существенных обновлений, то сейчас в активной разработке находится версия Оперы под кодовым названием Kestrel (англ. «пустельга»). Она уже анонсировалась на Хабрахабре. В двух словах — это будет ещё более быстрая Opera 9.5 со значительно усовершенствованным встроенным почтовым клиентом M2, расширенной поддержкой SVG и CSS3 селекторов. На данный момент для опробования доступна версия Opera 9.50 build 9613 alpha (o950s_9613m.exe, 5Mb). Самые свежие тестовые версии Оперы со списком улучшений и исправленных ошибок всегда можно найти в официальном блоге разработчиков Desktop Team.
Total votes 37: ↑33 and ↓4 +29
Views 852
Comments 36

Будет ли Apple использовать SVG как замену Flash на iPhone?

Vector graphics *
Недавние комментарии Стива Джобса о iPhone и Flash запестрили в заголовках новостей. В iPhone не будет добавлена поддержка Flash, как было сказано 'он не достаточно хорош для Apple iPhone.'

Бурно обсуждаются альтернативы для iPhone. И после всех доводов- большинство игр и видео в сети требуют Adobe Flash. Apple просто не может это проигнорировать(или может?)

Robert Scoble написал о слухах, согласно которым Apple работает над поддержкой SVG в iPhone. Это определённо должно стать позитивной и интересной вещью для веба.

SVG, который расшифровывается как Scalable Vector Graphics (Масштабируемая векторная графика)- это открытый стандарт W3C ( в отличии от проприетарного Adobe Flash).

SVG сейчас популярен в программах для мобильных устройств. Вероятно, Apple получит ещё больше возможностей от шикого распространения SVG в сети. SVG уже поддерживают Opera, Firefox и Safari.

iPhone уже дал мобильному вебу много хороших осознанных вещей, может быть тоже будет и с SVG. Будем надеятся.

via operawatch
Total votes 10: ↑6 and ↓4 +2
Views 1.7K
Comments 19

Рисуем векторной графикой в браузере (SVG/VML с помощью Google Web Toolkit + Dojo GFX)

Website development *
svg/vml demo on gwt + dojo
Мы разрабатывали несколько тестовых проектов с использованием векторной графики в интерфейсе и после просьб поделиться опытом разработки написали пример для изучения. На самом деле, это очень просто, и в качестве примера предлагаем небольшое демо из документированным кодом, разработанное на GWT, с использованием библиотеки Dojo для работы с SVG (VML) графикой. Работает в большинстве браузеров, разработка практически только на Java.

Для начала ознакомьтесь с самим демо: gwt.org.ua/demos/gwt-dojo-drawdemo/DojoSimpleDemo.html
Читать дальше →
Total votes 17: ↑17 and ↓0 +17
Views 4.8K
Comments 29

Введение в SVG и пример — pie chart

Lumber room
SVG (scalable vector graphics) это векторный формат графики подобно EPS, анимации и интерактива с пользователем, разрабатываемый в W3C. Внутри файл не бинарный а обычный XML, описывающий объекты, их эффекты и поведение. Векторная графика в общем нужна при изменении размера изображения без потери качества, например в полиграфии. В web я это вижу в резиновых сайтах, где размеры блоков установлены в %, размер шрифтов в em, а лого — в SVG. Пересели на более хороший монитор — всё изменилось пропорционально. Практические примеры — иконки, графики, карты, логотипы, интерфейсы. Ниже я привожу пример такого Pie-chart'а.


Интеграция

HTML — Inline
Поскольку SVG по сути XML, то его можно сразу inline-стилем описывать в XHTML-структуре. Однако как я уже убедился, XHTML1.1 doctype подразумевает что MIME документа уже не text-plain. А «ослик» IE6 не понимает XHTML в принципе, с другой стороны Firefox использует два парсера, и если MIME не application/xhtml+xml, то inline SVG не будет распознан. Это палка с двумя концами — IE и FF.
/>
Второй способ и наиболее практичный — ссылаться на существующий файл через object-тэг. Для
уменьшения траффика, файл можно сжать и получить SVGZ архив.
CSS и Javascipt
Как вы увидите ниже — поскольку SVG очень тесно связан с HTML/XML, то естественно что на графические объекты можно не только описывать при помощи CSS, но и писать Javascript-функции на всевозможные onclick и тп. event'ы (отсюда и интерактивность). />
Конвертирование и редакторы
Конвертировать SVG можно и в png/jpeg, но для этого фактически надо проделать работу обработчика. В PHP этим занимается PEAR XML_svg2image библиотека. Ещё есть сервис по конвертированию растрового изображения в векторный (правда там EPS). Из редакторов — есть Inkscape и Adobe Illustrator, Corel Draw.

Графика

Примитивы

Всякое рисование начинается с определения пространства (двумерного), разделения на координаты (в единицах с плавающей точкой или процентах) и введения примитивных конструкций:
  • line — прямая линия. x1, y1, x2, y2 — координаты
  • polyline — ломанная линия. points — перечисление координат точек
  • rect — прямоугольник. x,y, width, height, rx, ry — верхний левый угол, размеры, радиусы углов
  • polygone — многоугольник. Похож на polyline. points — координаты точек
  • circle — круг. cx, cy, r — координаты центра и радиус
  • ellipse. cx, cy, rx, ry — координаты центра и радиусы
  • text — текстовая надпись. Очень неудобная, потому что без переноса строк и с абсолютным позиционированием. x,y, font-family, font-size
  • tspan — может описывать слова внутри text-элемента. Например сдвигать или раскрашивать
  • tref — повторное использование text-элемента с указанным id
    Простой текст
    <tref xlink:href="#myText" x="50" y="50">
textPath — текст на path-кривой, связанный по id/>
<textPath xlink:href="#myPath" startOffset="50%">Водка Vinogradoff
image — растровое изображение
<image image-rendering="optimizeSpeed" xlink:href"background.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" filter="url(#blurpane)"/>
Параметры и стили
Как и в html, одни линии мало кому нужны — их надо закрашивать, указывать цвета, и всё это делается параметрами
  • fill, fill-rule — заливка. Например «none»,blue, indigo.
  • stroke, stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset, stroke-width — граница, аналог border. Вместе stroke-width.
  • font-family, font-size, font-style, font-weight — шрифты для text-элементов
  • text-anchor
Для заливки используются тэги:
  • pattern
  • linearGradient
  • radialGradient
Эти параметры можно все объединить в один аналог CSS и записать в inline-стиле:
style="stroke-width:1; stroke:blue; fill:none"
Группы и кривые Безье
Элементы можно и нужно группировать друг в друга. Кроме того что tspan устанавливаетсявнутрь text-элемента, группирование происходи благодаря элементу.Кривые Безье это плавные переходные линии, задающиеся по точкам. В SVG для этого существует элемент path, у которого подобно ломанной линии указываются координаты. Рядом с координатами могут стоять буквы, обозначающие свойства линии. Большие буквы говорят об абсолютном позиционировании, маленькие об относительном
  • M — начало кривой (x,y)
  • Z — конец кривой (без координат)
  • L -прямая линия (x,y)
  • H — горизонтальная линия
  • V — вертикальная линия
  • Q — квадратичная кривая по одной точке
  • T — продолжение кривой с отражением предыдущей точки — упрощает рисование повторяющихся ритмов
  • С — собственно кривая Безье третьего порядка по двум точкам
  • S — упрощённая версия C
  • A — эллиптическая кривая (радиусы, поворот)

Трансформации и возможности

Объекты в SVG пожно искажать, крутить и перемещать при помощи фильтров, которые указываются в качестве параметров:
  • translate — перенос объекта
  • rotate -вращение
  • scale — масштабирование
  • scewX, scewY — искажение
  • matrix — смешанная трансформация
SVG поддерживает фильтры с эффектами освещения. А кроме статичных изображени есть возможность, анимации и интерактивности с пользователем. Например тетрис или нашумевший Microsoft Table и Silverlight реализован программно в SVG, причём при большом желании — заработало и видео (формата Ogg Theora=SVGT). Конечно последние возможности ещё не реализованы во всех браузерах, но первооткрыватели типа Opera имеются.


Тортовый график на SVG и PHP/DB

Несомненно Google API — очень удобная штука. Но не стоит забывать что всё-таки это внешний сервис, пусть и надёжный. Коммерческие разработки не любят рисковать, поэтому генерация графиков всё-таки должно быть локальным (если они не статические).Генерировать изображение я буду с помощью php, на основе полученных из
БД данных для отображения результатов опроса (poll). Поскольку GD-библиотека хоть и понимает размер SWF,
генерирует только бинарные файлы. Поэтому генерировать прийдётся XML:header("Content-Type: image/svg+xml"); Посмотрим к чему надо стремится (пока без крутой анимации)… Начнём с резинового расположения двух эллипсов? Сектора видимо идут в порядке убывания по часовой стрелке, что-бы уменьшить количество градиента на мелких участках. Цвет сектора видимо расчитывается пропорционально числу кусочков — тут то и возникает проблема. Как оказывается, сектор нельзя просто-так залить с двумя линиями и существующим эллипсом — фигура должна быть точно очерчена, поэтому надо рисовать всё по отдельности при помощи path, а ellipse нам не понадобится.
Тригонометрия цвета
Для вычисления в цикле координат path-элемента необходимо вспомнить немного математики. Поскольку окружность — частный случай эллипса то в формулах есть много схожего, что нам очень пригодится: x=cos(angle)*radius; y=sin(angle)*radius; //circle
x=cos(angle)*rx; y=sin(angle)*ry; //ellipse

Для эллипса же радиус просто заменяется на большую и малую полуось соответсвенно. Дальше создаём цикл, где вычисляем процентное распределение данных, градус длясектора с path. Вчисляем координаты для арки, для этого используем «сдвиг градуса» что-бы отрисовка всех секторов шла вплотную.RGB куб, можно по разному резать, делать проекции и вводить свои системы
координат типа CMYK и HSL. Разные оттенки выбранной оранжевой заливки получаются при разбиении отрезка между выбранной точкой-цветом и вершиной белого цвета (255,255,255). if ($intTotalValue) // если сумма значений голосования больше нуля то можно делить и рисовать
foreach((array) $Data as $key=>$recEntry){
$Data[$key]->percent=$recEntry->value/$intTotalValue;
$Data[$key]->color[0]=round($graph->fill[0]+($key/count($Data)*(255-$graph->fill[0])));
$Data[$key]->color[1]=round($graph->fill[1]+($key/count($Data)*(255-$graph->fill[1])));
$Data[$key]->color[2]=round($graph->fill[2]+($key/count($Data)*(255-$graph->fill[2])));

$Data[$key]->degree=360*$Data[$key]->percent;
$Data[$key]->start['x']=$graph->cx+round(cos(deg2rad($intDegreeShift)) * $graph->rx,3);
$Data[$key]->start['y']=$graph->cy+round(sin(deg2rad($intDegreeShift)) * $graph->ry,3);
$Data[$key]->end['x']=$graph->cx+round(cos(deg2rad($intDegreeShift+$Data[$key]->degree)) * $graph->rx,3);
$Data[$key]->end['y']=$graph->cy+round(sin(deg2rad($intDegreeShift+$Data[$key]->degree)) * $graph->ry,3);
$intDegreeShift+=$Data[$key]->degree; //increase degree shift

$boolIsLargeArc=$Data[$key]->degrees>180? 1 : 0;
echo "\n".'/>';
}
Если посмотреть на график внимательно, то видно что объёмность делается
при помощи градиента, который в SVG мы сначала зальём в качестве фона,
а поверх будем накладывать уже конкретные цвета сектора с прозрачностью:

/>
/>
/>

Основные проблемы

Но проблема остаётся и с закрашиванием пограничных секторов — закрашивать переднюю область поверх градиента надо только у тех областей, которые до половины торта идут. К этому этапу картинка выглядит так:graph_limit_problem_416
Абсолютный текст
Кроме того вопрос возникает как располагать текстовые описания секторов? Google попросту ведёт линии с середин секторов, даже если текст не умещается в одну строчку. В SVG позиционировать текст надо от верхнего левого угла — что уже проблема, поскольку ширины мы не знаем. Выхода два — отказаться от относительного позиционирования текста и сделать выноски цветом, либо использовать текст с фиксированной шириной (monospace, Courier) и на этой основе расчитывать длину в пикселях и положение на лету. Благо я наткнулся на параметр text-anchor:end, который странным образом развернул текст как надо.

Интерактивность и будущее

Благодаря интеграции с javascript'ом, можно соответсвенно в реальном времени при помощи AJAX'а обновлять изображение. В моём случае это необходимо когда пользователь голосует и надо обновить распределение голосов на графике.

Читайте также:

Оригинал статьи с иллюстрациями и пример использования
Total votes 20: ↑18 and ↓2 +16
Views 3.2K
Comments 2

Доступен RENESIS® Player 1.0

Vector graphics *
Презентации, Диаграммы, Графики- всё это+ динамичность в SVG

Три продукта:


  • Microsoft Internet Explorer  Plugin


    Позволяет просматривать веб-сайты сделаные на SVG. (ну кто-то же должен был это сделать, Могилевский то занят был)
  • Windows Thumbnail Plugin


    Добавляет возможность предпросмотра svg в качестве thumbnail в Проводник.

    Standalone Player


    Позволяет запускать svg приложения вне постороннего окружения
Total votes 14: ↑12 and ↓2 +10
Views 729
Comments 10

Revecter- новый ECMAScript фреймворк для SVG

Vector graphics *
Сегодня дебютировал ECMAScript фреймворк, созданный для работы с SVG документами в интернете.
Из их блога:
SVG мощный формат, нуждающийся в представление публике. Уже было доказано, что svg имеет потенциал (хабр), и мы нацелены представить его с помощью фрэймворка revecter

Между тем этот релиз всего-лишь демонстрация функциональности ядра фреймворка, нежели прямого исполнения, он показывает свой потенциал.
Фрэймворк обеспечивает наследование с помощью прототипов (prototype-esque), упрощает перемещение объектов и выполнение других основных задач. Кроме этого он имеет мощный класс анимации, используемый для кроссбраузерной анимации, или формально несуществующих вещей.
Досадно, что не поддерживается IE на данный момент, но поддержка планируется.
http://revecter.googlecode.com/
Total votes 19: ↑17 and ↓2 +15
Views 936
Comments 4

Интервью с разработчиками Inkscape

Vector graphics *
Совершенно нереально поговорить с каждым из почти полусотни человек (из 111 зарегистрированных на SourceForge), поучаствовавших в разработке новой версии Inkscape, и это даже не считая тех, кто просто прислал патч. Мы предлагаем вашему вниманию интервью с несколькими студентами, поучаствовавшими в программе Google Summer of Code 2007, а также несколькими ключевыми разработчиками Inkscape.
Читать дальше →
Total votes 34: ↑32 and ↓2 +30
Views 1.5K
Comments 8

Еще один способ генерации PDF

Website development *
Где это может пригодиться? При необходимости генерации готовых к печати файлов в web-приложении по уже имеющемуся произвольному жесткому шаблону: сертификаты, бейджи, пропуски и прочее.

Почему PDF? Формат PDF позволяет создавать документы с целым рядом неоспоримых преимуществ: открытость, кроссплатформеность, распространенность и, что очень важно, точностью и неизменностью передачи данных по цепочке создание, просмотр и печать.

В чем соль? В использовании SVG файлов как шаблонов с возможностью подстановки необходимых полей с последующим преобразованием в PDF.

Какие преимущества? Возможность создания и быстрого редактирования очень сложных шаблонов в привычных векторных редакторах, таких как Adobe Illustrator, Corel Draw или Inkscape. Простота программирования и использование только бесплатных программных средств. Еще одним важным преимуществом является возможность прозрачно использовать UTF-8 для вставляемых текстов.

Что для этого надо? Для использования данного метода нужен выделенный сервер с возможностью установки своих приложений (Inkscape и GhostScript) и выполнением system-команд. При этом всё будет работать как на Windows платформе, так и на Linux.
Как это сделать
Total votes 32: ↑30 and ↓2 +28
Views 18K
Comments 25

Just another guitar files viewer

Lumber room

Пролог


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

Подробнее
Total votes 6: ↑5 and ↓1 +4
Views 358
Comments 12

Браузер Opera: XXI век

Opera
После всех мероприятий, проводимых компанией Opera Software в России в последнее время, где разработчики рассказывали о новых технологиях и возможностях, планируемых к включению в браузер в ближайшем будущем, многие пользователи Opera, которые по тем или иным причинам не смогли присутствовать на встречах, просили выложить где-нибудь презентацию, чтобы посмотреть на новшества. Сделать это было довольно затруднительно, т.к. каждое выступление норвежских разработчиков было своего рода импровизацией, а не скучным перелистыванием слайдов. Но вопросы оставались, поэтому я решил попробовать сделать статью, основанную на тех выступлениях разработчиков Opera, которую вам сейчас и представляю.
Читать дальше →
Total votes 53: ↑44 and ↓9 +35
Views 1.1K
Comments 44

SVG анимация в новой сборке WebKit'а

Vector graphics *
В новой сборке WebKit'а, включающаего SquirrelFish Extreme, есть поддержка SVG анимации.
Демо:

при отрытии пузырьки должны перемещаться

SVG — формат векторной графики на основе семейства xml, позволяющий создавать масшабируемые изображения ( с градиентами, прозрачностью и эффектами вроде теней и размытия) и анимировать их.

Поддерживается в той или иной степени Оперой, Лисой и Сафари.

Что там насчёт замены флэша на Ифоне?
Total votes 37: ↑33 and ↓4 +29
Views 1.5K
Comments 60

Используй SVG при создании интерактивных карт для iPhon'а

Vector graphics *
Ну чтож, вы не можете сделать интерактивную карту для iPhon'а на технологиях Silverlight, Java или Flash и всё что вам «остаётся» — использовать JavaScript. А может быть и нет. Быть может SVG луч в конце тоннеля для создания картографических сервисов для iPhon'а? Похоже iPhone 2G поддерживает SVG не так уж плохо, жаль только, что многие SVG сайты не оптимизированы под iPhone. Возьмём к примеру заброшенный (!?) просмотрщик SVG компании ESRI:

image
Читать дальше →
Total votes 5: ↑2 and ↓3 -1
Views 904
Comments 2

Построение графики на javascript

Website development *
dg
Raphaël — небольшая библиотека(20 килобайт) для построения векторной графики на веб-сайтах.

Она использует SVG и VML в качестве базы для создания графики. Учитывая то, что каждый созданный объект — DOM объект, то при помощи JavaScript обработчиков можно легко изменять их свойства и действия.
Читать дальше
Total votes 107: ↑103 and ↓4 +99
Views 12K
Comments 58

JavaScript библиотека «Raphaël» — SVG расцветает, SVG и iPhone

Vector graphics *
Raphaël — это небольшая JavaScript библиотека с простым синтаксисом для работы с векторными форматами: SVG и VML (для IE). Впрочем, как я успел заметить у разработчика возникают проблемы с VML (когда многие вещи в SVG делаются очень просто в VML не всегда есть простая альтернатива)

часы
Читать дальше →
Total votes 49: ↑42 and ↓7 +35
Views 2.9K
Comments 50

Пользовательский интерфейс мобильного приложения

Vector graphics *

JSR 226: SVG + mobile AJAX


Сейчас вы можете увидеть как традиционное MIDP приложение, построенное на lcdui.*, может быть переработано с использованием SVG и JSR 226. Исходный код обоих приложений доступен под BSD лицензией.

Используя SVG и JSR 226 можно улучшить процесс разработки, сделать ваши приложения значительно привлекательней и усовершенствовать их юзабилити.

Смотрите скринкаст



или
читайте
Total votes 20: ↑16 and ↓4 +12
Views 1.1K
Comments 16