TermiT's Blog » JavaScript

Мобилизация? Сделайте ее правильно

TermiT — Sun, 13 Feb 2011 10:38:23 +0000

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

«Мобилизация» — хорошо, на западе давно это поняли: практическая каждая компания имеет мобильную версию сайта и не какую-нибудь убогую вроде тех что раньше делались для wap-браузеров или для мобильного ie (коих сейчас в рунете большинство), а модную, то что сейчас принято называть HTML5-версию(при этом из нового стандарта разве что таг video и используется). А некоторые пошли дальше и выпустили брендинговое приложение. Проблема в том что многие еще не поняли, что приложение в AppStore/Android Market не просто повод выпендрится, это действительно гигантский PR. Я не говорю о приложениях сделаных тяпляп, я таких видел тысячи: когда возьмут PhoneGap закинут в него мобильную версию сайта и готово. Если решились на брендинговое мобильное приложение сделайте его правильно:

Придумайте оригинальную идею
Позаботьтесь о дизайне
И самое главное используйте возможности мобильного по полной: используйте GPS, акселерометр, гироскоп, камерой и т.д.
Не забывайте про тренды: социальные сети, QR-коды и т.д.
Не распыляйтесь на все платформы сразу, ограничтесь iOS и Android
Посмотрите как это делают другие, например Bud Light
Если вы все сделаете правильно то ваше приложение станет вирусом

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

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

Если вы не знаете какой инструмент выбрать для разработки нативных приложений, то посмотрите в сторону Titanium Mobile. Любой JavaScript программист разберется в нем без особого труда, компании не нужно будет нанимать iPhone/Android-разработчика, а пользователь получит быстрое приложение с нативными UI-компонентами и широкими мультимедийными возможностями.

QR-код для приложений из AppStore

TermiT — Thu, 14 Oct 2010 04:05:57 +0000

Вообще я любитель техники от Apple, но интерес взял вверх и недавно я купил поиграться HTC Desire. Не буду устраивать холиваров сравнивая iPhone и девайс от HTC, скажу что мне понравилось больше всего:
повсеместное использование сканеров штрихкодов и qr code ссылок на приложения из AndroidMarket. Почему-то для приложений из AppStore qr-код делать не принято, а ведь использовать эти штрихкоды так удобно…

Подумал, что было бы неплохо сделать плагины для популярных браузеров, которые генерят qr-коды для itunes-ссылок. Предлагаю вам посмотреть на бетки плагинов для Chrome, Firefox, Safari

Не обращайте внимание на код плагинов, это первые версии, сейчас мне интересно получить отзывы о идеи и запросы на функционал следующих версий плагинов.

Для сканирования штрихкодов в iPhone можно использовать бесплатные программы ZBar Barcode Reader или QR Reader for iPhone. По хорошему лучше написать отдельную программку без лишнего функционала, но это потом.

Что делает плагин:

Находит на странице itunes-ссылки
Преобразовывает их к такому виду, чтобы при вызове на девайсе [[UIApplication sharedApplication] openURL:[]] открывался App Store, а не iTunes
При наведении на itunes-ссылку показывается слой с qr-кодом, который формируется сервисом Google Chart API

Возможно я изобрел велосипед, но что-то я не находил ничего подобного…

Вышла новая версия SVG-Edit

TermiT — Tue, 02 Feb 2010 16:25:13 +0000

SVG-Edit — это отличное опенсорс веб-приложение использующие SVG и работающее на клиентской стороне.

Кодовое название версии 2.4 — Arbelos. Новые фичи:

Поддержка растровых изображений
Группировка
Масштабирование
Слои
Кривые
Локализация интерфейса
Смена фона
Преобразование фигур в кривые

Можно попробовать демо тут:
http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html

Страница проекта:
http://svg-edit.googlecode.com/

Полный список изменений:
http://code.google.com/p/svg-edit/wiki/VersionHistory

Источник

JavaScript использующий ресурсы GPU

TermiT — Thu, 28 Jan 2010 07:00:29 +0000

Я уважаю таких программистов как Алексей Митцев (Россия, Москва). Он победил на контесте Mozilla Jetpack 0.5, его проектом был прототип позволяющий JavaScript использовать ресурсы GPU.
Работа Алексея — это альфа-прототип, демонстрирующий потенциал проекта. Для работы нужна специальная сборка Firefox, потому показать работу проекта в действии тяжело. Однако, можно продемонстрировать принцип работы. Вот пример транспонирования матрицы со скоростью света:

PLAIN TEXT

JavaScript:

jetpack.statusBar.append({
html: «Transpose!»,
onReady: function(widget){
$(widget).click(function(){
var myStorage = jetpack.cuda-storage;
var matrix = new Array();
var size = 32;
for(var i=0; i
array[i] = i;
var transposedMatrix = myStorage.transpose(size, matrix);
transposedMatrix.forEach(function (v) { console.log( v ); })
});
});

Алексей рассказывает почему это проект важен:

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

стриминг цифрового видео и аудио потоков в высоком качестве.

распознавание речи

манипуляции и обработка больших изображений природы и космоса

локальная обработка больших массивов данных

анимация DOM-элементов (через DirectX или OpenGL)

исследование 3D-миров, таких как SecondLife или OpenSim Grid

редактирование видео и аудио файлов в реалтайме

IDE работающие прямо в браузере

Это список можно перечислять до бесконечности. Разработчики пытались преодолеть ресурсные проблемы используя такие client-server технологии как ActiveX, Netscape Plugins, Java Applets, но они не получили массового распространения. Возможно этот проект изменит данную ситуацию, но не стоит забывать о кроссбраузерности, придется проделать большую работу по стандартизации. Возможно в ближайшем будущем, все те инструменты разработчиков, которые позволяли обеспечить приложения богатыми возможностями, такие как JavaScript, ActionScript, плагины и те что упоминались ранее перестанут страдать от нехватки процессорного времени.

Источник

Определение методов для базовых классов внутри песочницы в JavaScript

TermiT — Fri, 22 Jan 2010 15:29:13 +0000

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

Возможность расширения базовых классов в JavaScript дает вам возможность приспособить язык под ваши нужды. Вы можете добавить такой метод как «hello world».capitalize () или реализовать отсутствующие функции, как например [1,2,3].indexOf (2). Проблема в том что библиотеки / фреймворки / скрипты могут переписывать базовые методы javascript'а или методы друг друга, что может привести к неожиданным результатам. Fusebox — это урезанная версия компонента «песочница» из библиотеки FuseJS. Fusebox позволяет избежать проблем описанных выше, убирая работу с определением методов базовых классов в песочницу.

Например:

PLAIN TEXT

JavaScript:

var fb = Fusebox();
fb.Array.prototype.hai = function() {
return fb.String("Oh hai, we have " + this.length + « items.»);
};
fb.Array(1,2,3).hai(); // "Oh hai, we have 3 items."
typeof window.Array.prototype.hai; // undefined

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

Есть чему поучится. Обидно что приходится запоминать все эти манипуляции, эту магию... Но это JavaScript, он такой какой есть.

Источник

Возможно я немного напортачил с терминологией, поправьте если что не так...

Jaml: HTML билдр аля Haml

TermiT — Thu, 21 Jan 2010 14:38:16 +0000

Существует большое количество HTML билдеров (упрощающих написание HTML разметки). Эд Спенсер (новый лидер Ext JS) предложил еще один способ получать HTML используя JavaScript, который очень напоминает Haml знакомый разработчикам на Ruby (смотрите также Shaml, LessCss, CleverCSS)

Пример использования Jaml:

PLAIN TEXT

JavaScript:

div(
h1(«Some title»),
p(«Some exciting paragraph text»),
br(),
ul(
li(«First item»),
li(«Second item»),
li(«Third item»)
)
);

Также можно писать шаблоны следующим образом:

PLAIN TEXT

JavaScript:

Jaml.register('product', function(product) {
div({cls: 'product'},
h1(product.title),
p(product.description),
img({src: product.thumbUrl}),
a({href: product.imageUrl}, 'View larger image'),
form(
label({'for': 'quantity'}, «Quantity»),
input({type: 'text', name: 'quantity', id: 'quantity', value: 1}),
input({type: 'submit', value: 'Add to Cart'})
)
);
});

Git репозиторий Jaml

Оригинал

pQuery, где p = perl

TermiT — Thu, 28 Feb 2008 19:18:48 +0000

Наверняка вы сталкивались с библиотекой pQuery предназначенной для упрощения взаимодействия php и jquery. Сообщество перлистов представила свою версию pQuery:

pQuery это прагматичная попытка портировать фреймворк jQuery для Perl. Прагматичная в том смысле, что пытается использовать принципы JavaScript в Perl. Главную цель jQuery можно сформулировать в одном предложении: «Найти что-то, как можно проще и изменить найденный фрагмент, как можно легче.», pQuery также следует этой цели.

pQuery имеет единственную функцию — pQuery, которая работает подобно функции $ в jQuery: делая разные операции в зависимости от переданных аргументов. Кроме этого методы pQuery возвращает свой «собственный» объект — чаще всего это массив массивов состоящий из HTML::DOM элементов, но как и в случае с jQuery это зависит передаваемых параметров.

Взгляните на пример:

PLAIN TEXT

PERL:

use pQuery;
pQuery(«http://google.com/search?q=pquery»)
->find(«h2.r»)
->each(sub {
my $i = shift;
print ($i + 1), ") ", pQuery($_)->text, «\n»;
});

Всегда интересно наблюдать как преимущества одного языка/технологии перетекают в другой

via

gearsAJAXHelper: Использование Google Gears вместе с AJAX API для ускорение работы

TermiT — Wed, 27 Feb 2008 19:41:37 +0000

Как известно Google Gears предоставляет API разработчикам для добавления возможности оффлайновой работы с вебприложениями. Также Gears можно использовать для ускорения загрузки вашего сайта. Для этого Ben Lisbakken предлагает использовать его разработку gearsAJAXHelper:

Мы решили, было бы здорово написать небольшую библиотеку, облегчающую работу с Google AJAX API при создании приложений с поиском. gearsAJAXHelper имеет две главные особенности: она позволяет сохранять пару(ключ — значение) в локальной (на стороне пользователя) базе данных и дает возможность выбора типа ресурса (файлы стилей, изображения, js-скрипты, html файлы) для автоматического локального кэширования с помощью Gears.

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

Автоматическое кэшерование ресурсов (которое является опциональным) позволит ускорить загрузку вашей веб-страниц в целом. Также имеется функция обновления, чтобы избежать эффекта «протухания» кэша.

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

В примере можно найти что-то подобное следующему куску кода:

PLAIN TEXT

JavaScript:

gearsAJAXHelper.initialize(«election», «election», false);
gearsAJAXHelper.storeKeyVal(key, value);
gearsAJAXHelper.returnKeyVal(key);
gearsAJAXHelper.refresh();

Видете, как все просто :)

via

Extjs 2.0.2

TermiT — Mon, 25 Feb 2008 17:51:32 +0000

Обновился термоядерный javascript фреймворк extjs. Одно из главных обновлений более тесная интеграция с AIR runtime. В модуль Ext.air добавлен следующий функционал:

Возможность работы с нативными окнами windows
Использование нового метода доступа к базе данных представленый в AIR Beta 3
Нативный drag&drop, использование родного буфера обмена
Проигрывание звуков
Сворачивание приложений AIR в системный лоток (tray), пример

PLAIN TEXT

JavaScript:

var win = new Ext.air.NativeWindow({
id: 'mainWindow',
instance: window.nativeWindow,
// System tray config
minimizeToTray: true,
trayIcon: 'ext-air/resources/icons/extlogo16.png',
trayTip: 'Simple Tasks',
trayMenu : [{
text: 'Open Simple Tasks',
handler: function(){
win.activate();
}
}, '-', {
text: 'Exit',
handler: function(){
air.NativeApplication.nativeApplication.exit();
}
}]
});

Также были добавлены следующие виджеты:

ListTree:

Custom Grid Columns, позволяющий встроить кнопки или меню в нужную ячейку:

Switch:

via

jQuery — The best JavaScript framework

TermiT — Fri, 01 Feb 2008 20:50:18 +0000

Последнее обновление 25.02.08

Страница с информацией по CodeIgniter Framework оказалась очень популярной, я решил составить такую же для великолепного инструмента jQuery. Большую часть информации взял с вики проекта...

jQuery — JavaScript фреймворк, фокусирующийся на взаимодействии JavaScript и HTML. Был опубликован на компьютерной конференции «BarCamp» в Нью-Йорке Джоном Ресигом в 2006.

Возможности

переход по дереву DOM, включая поддержку XPath как плагина
события
визуальные эффекты
AJAX дополнения
JavaScript плагины

Ресурсы, где вы можете почерпнуть основную информацию об этом продукте:

Сайт проекта
Блог проекта
Список рассылки
Персональный блог разработчика
WIKI
Блог про jQuery (рус.)
Примеры, подсказки, документы, переводы (рус.)
Шпаргалки: вариант 1, вариант 2, вариант 3

Книги

*помните: варез это плохо

Статьи на английском

Статьи на русском:

Пока хватит, поже добавлю плагинов с описанием на русском, жду комментарии.

Последнее обновление 25.02.08