Здравствуйте ценители (и не только) Flash, Flex и AIR.

Сегодня я расскажу как работать с локальной базой данных (SQLite) в AIR приложениях.

Для работы нам понадобится Flex Builder, какой-нибудь, редактор SQLite (я использую приложение для FireFox SQLite Manager) и немного терпения.

Буквально недавно меня спросил мой коллега (да по сути конкурент), знаю ли я простую и лёгкую систему управления задачами, ну и вообще, что я могу ему посоветовать. Я предложил ему систему, на которой работаю в моей компании (если будет любопытно — позже расскажу), и которую, собственно мы и разрабатывали. Но для его нужд она несколько чрезмерна.

О визуализация графов в вебе говорили здесь, навеяно этой статьей.

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

Продолжаем тему визуализации данных в интернете.

Предыдущие топики:

• Изумительные диаграммы с новым Chart контролом
• Визуализация направленных графов в вебе
• Список Javascript библиотек для рисования графиков и диаграмм — habrahabr.ru/blogs/javascript/79960 (публикация в блоге — msug.vn.ua/blogs/akrakovetsky/archive/2010/01/04/javascript-charting-libraries.aspx)

Возникла мысль: а нельзя ли использовать CSS-спрайты для того, чтобы выводить заголовки необычными шрифтами?

Кажется, что сделать это не так и сложно.

1. Нужно подготовить CSS-спрайт — вывести все буквы в картинку и сделать CSS, в котором для каждой буквы есть свой класс, позиционирующий фон на нужное место в картинке.
2. Помечаем строку, которую нужно преобразовать, специальным классом.
3. В момент загрузки выбираем все помеченные строки и для каждой их буквы создаем span с классом, соответствующим букве из спрайта.
4. Оригинальный текст скрываем. Возможно, прозрачностью.

Наконец, можно сделать серверный код, который бы из шрифта (TrueType, например), автоматом бы делал спрайтовую заготовку.

При таком методе точно будет проблема с кернингом. Так что хорошо он будет работать не для всех шрифтов. Но, наверное, кернинговые пары можно было бы задать марджинами.

Кто-нибудь видел такое решение?

Update:
Благодаря хабраюзеру nuxdie нашлась готовая реализация этой идеи: fontjazz.com. Не позволяет только текст из заголовка копировать.

Update 2:
Хабраюзер Magarich предлагает свою реализацию — 5socks.net. Здесь можно и копировать. Жалко, что из-за прозрачности текста выделение тоже совсем не видно.

Сегодня мне наконец таки надоело запускать Firefox каждый раз, когда надо быстро выдернуть из сайта XPath для какого-то элемента (там для этого приятное расширение XPather), и я решил таки глянуть, как делать инъекции своего кода в Cocoa-приложения.

Хотя Firefox 3.0 улучшил отображение шрифтов, привнеся поддержку кернинга, лигатур, различных толщин, а также поддержку отображения сложных начертаний, всё же авторов ограничивало использование в своих дизайнах только общедоступных шрифтов. Firefox 3.5 снимает это ограничение, вводя поддержку CSS-правила @font-face — это способ прицеплять шрифты TrueType и OpenType точно так же, как нынче прицепляют код и иллюстрации. Браузер Safari поддерживал этот вид гиперсвязи со шрифтом, начиная от версии 3.1, а в Opera объявили, что планируют поддержать его в Opera 10.

Использовать @font-face для гиперсвязи со шрифтом — сравнительно несложно. Внутри стилевого файла каждое свойство @font-face задаёт используемое имя шрифтового семейства, и подгружаемый шрифтовой ресурс, и стилевые характеристики заданного начертания — скажем, полужирное ли оно, курсивное ли. Firefox 3.5 скачивает шрифты только по мере нужды, так что стилевой файл может задать полный набор шрифтов, из которых лишь выборочно несколькие станут использоваться в действительности.

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

Браузеры, поддерживающие @font-face, отобразят текст при помощи Graublau Sans Web, тогда как более старые браузеры отобразят его при помощи либо Lucida Grande, либо начертания по умолчанию для sans-serif. Вот пример:

Последнее время на Хабре появляется не так много хороших статей о веб-разработке. Но сейчас не об этом.
Иногда хабралюди делятся интересными идеями, но не раскрывают их сути. И может зря. Потому как в ходе написания статьи (описания) замечаешь то, чего не видел раньше, другие ходы и решения, а читающим проще понять идею и дать дельный совет.
Так несколько дней назад на хабре появилась статья «Электронное табло», в которой автор поделился ссылкой на свою поделку, но из-за недостаточного описания статья получилась из разряда — «посмотри, что я сделал».
Насколько инетересней могла быть статья, если бы автор добавил побольше описания. Потому захотелось показать на примере этой статьи, как можно было бы сделать немного лучше, а заодно и поделиться своей реализацией его задачи.

Есть много способов делать в верстке скругленные углы. И пока все браузеры поголовно не начнут поддерживать свойство border-radius, надо будет каждый раз думать о том, какой метод использовать в том или ином проекте.

Есть множество разнообразных методов — от использования подложек блоков фиксированных размеров и до создания уголков с помощью vml или svg. В этом топике я не буду рассматривать известные методы, так как информации по данному поводу предостаточно. Я попробовал создать yet another метод.

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

InfoVis Toolkit — предоставляет инструменты для создания интерактивных представлений данных в Веб с помощью JavaScript. Распространяется с открытым исходным кодом под лицензией BSD. Поддерживаются основные браузеры: IE6+, Firefox2+, Safari3+, Opera9.5+

Помните мою выпадающую панель для входа/регистрации, реализованную с помощью Mootools 1.2? Я подумал, что её можно было бы улучшить как с точки зрения дизайна, так и с точки зрения функциональности, и я это сделал! Но с этого времени уже на jQuery.

Эта статья является коллекцией некоторых мощных каруселей изображений и текстовых материалов, готовых к использованию в ваших Web-проектах. Она включает в себя Agile Carousel, YUI Carousel, JCarousel, iCarousel (jQuery + MooTools) и учебное пособие о том, как реализовать простую карусель наподобие карусели во Flickr, используя Prototype-UI.

Развитие компьютерной графики подталкивает нас к изобретению всё новых способов графического представления данных. Разрабатывались различные прикладные программы для визуализации данных на локальных компьютерах. Однако всё изменилось с развитием интернета: в нём содержатся колоссальные объёмы информации, которые нам постоянно хочется представить как-то удобнее, дружелюбнее, понятнее. Что же мы имеем на сегодняшний день?

Существует немалое число серверных библиотек и утилит, способных генерировать сложные графики. Однако я считаю, что такой подход не всегда оптимален. Если мы можем производить визуализацию на стороне клиента с помощью JavaScript, то почему бы нам не воспользоваться такой возможностью? Логика работы подобной связки проста: сервер генерирует данные, а клиент их визуализирует.

Разумеется, вы можете воспользоваться Flash, Silverlight или Java-апплетами, однако в этом обзоре я хотел бы вам показать библиотеки визуализации, написанные на чистом JavaScript.

0. Присказка

В некотором царстве, в некотором государстве жил-был программист. Звали его, как полагается, Иван. Был он настоящим спецом, обладал всеми Тремя Великими Добродетелями Программиста, то есть был ленив, спесив и нетерпелив. Случилась в том царстве печаль великая: кризис. И выгнали Ваню с работы без выходного пособия. Горевал Ваня долго, а потом собрался с духом и разослал резюме по всему белу свету. Долго ли, коротко ли, вызвали Ваню на собеседование. Требований к соискателю было много, но главное — требовалось хорошо владеть регулярными выражениями. До собеседования — почти месяц, готовься — не хочу. Будучи человеком серьёзным, готовиться Иван решил обстоятельно. 3 недели и 3 дня он лежал на печи, почитывал Хабр и думал, как же неслыханно обстоятельно он будет готовиться. До собеседования остался 1 день. Ванюша мысленно обругал работодателей, которые назначают собеседование так скоро, что совсем подготовиться не успеваешь, слез с печи, сдал пивные бутылки и на вырученные деньги купил книжку по регексам. Читал он её до полного изнеможения, пока не отключился. Утром мы найдём сонную физиономию Ванюши лежащей, как на подушке, на этой самой книжке под Хабракатом.

Многим JavaScript-разработчикам приходилось сталкиваться с объектами, перечисленными в заголовке, например, при решении следующих задач:
— создание визуальных редакторов (wysiwyg),
— поиск в окне браузера,
— выставление BB-кода,
и т.д.

В этой статье автором предпринята попытка собрать перевод документации об этих объектах в одном месте + написать небольшие сопроводительные примеры. Перевод вольный, не дословный, так что если встретите неточность или корявую формулировку — пишите в комментариях.

В целом пост носит справочный характер, и, надеюсь, кому-то упростит разработку.

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

Простой цифровой термометр с подключением через COM-порт.

JS Charts является бесплатным JavaScript-генератором графиков и схем, который требует минимум знаний программирования. С JS Charts рисование диаграмм становится простой и легкой задачей. Он не требует никаких дополнительных плагинов и серверных модулей. Просто подключите скрипты, подготовьте данные для схемы в XML или массиве JavaScript и ваша таблица готова.

Вы наверное уже слышали о технологии масштабирования Liquid Resize, которая учитывает содержимое изображения. Если вам интересно как оно все работает и как можно реализовать все это самому, то читайте далее (осторожно, много рисунков).


(НЛО прилетело и растянуло этот рисунок здесь)

Читал про недавно вышедшею библиотеку для работы с SVG — Raphaël (хабратопики habrahabr.ru/blogs/webdev/41647 и habrahabr.ru/blogs/svg/42949). Где было указано, цитирую: «Так что связка Raphaël + jQuery будет давать огромные возможности для разработки».

Однако в библиотеке плагинов на Jquery я недавно нашел готовую разработку для работы с SVG (страница плагина).

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

Автор плагина Keith Wood. На его сайте, есть еще много чего интересного.

У каждого пользователя Автокадабры есть виртуальный гараж, где хранятся его машины. Разработчики проекта (Тематические Медиа) обратились к нам (Турбомилк) с непростой задачей — нарисовать иконки для всех легковых автомобилей на свете. Но не простые иконки, а «перекрашиваемые», чтобы пользователи могли выбирать любой цвет для своего авто.