livedev.org

Сегодня подборка интересных ссылок по теме клиентских веб-технологий аля код для браузера.

• Visual Event почетно занимает в этом списке первое место! Отличный JavaScript инструмент, выполненный в виде букмарклета. Позволяет просматривать привязку событий JavaScript к элементам страницы визуально. Поддерживает jQuery, YUI и MooTools. Отличный инструмент для дебага JavaScript. Посмотреть демо.

• JS Bin — следующий инструмент для дебага JavaScript/HTML/CSS, позволяет интерактивно совместно нескольким разработчикам тестировать код. Поддерживает все мажорные JavaScript библиотеки (кроме ExtJS). Описать функционал трудно, попробуйте, в нем легко разобраться или посмотрите видео.

• Twitterjs — небольшая JavaScript библиотека для интеграции твиттера в ваш сайт. Позволяет в несколько строчек подключить и настроить на свой влад ленту сообщений. На много удобнее чем стандартный способ, предлагаемый на страницах сервиса.

• JazzRecord JavaScript ORM — новый проект, один из немногих решивших попробовать реализовать ORM на JavaScript. Проект вполне актуален, т.к. уже есть ряд технологий, где он может быть использован (Adobe AIR, Google Chrome и другие, используещие браузерные базы данных). Синтаксис ORM подобен ActiveRecord из Ruby on Rails.

Я давно планировал начать серию статей про фронтенд разработку, т.е. про JavaScript, CSS и HTML. Про верстку писать — уже «баян», тем более это не очень мне интересно. Так что буду стараться разбирать наиболее редкие и уникаьные примеры.

Adobe AIR — тема этой статьи. Тема не обзорная, а вполне кокретная. Итак, как сделаь загрузку файлов на сервер с помощью AIR и JavaScript. Оказалось есть нюансы, которые в документации не освещены.

Пример.

// что и куда будем заливать
var url = "http://img31.picoodle.com/upload.php";
var pictureFile = new air.File('/path/to/local.file');

// устанавливаем переменные и их значения для http запроса, как в html форме
var variables = new air.URLVariables();
variables.op = 'upload';

// настраиваем парметры http-запроса
var tmpRequest = new air.URLRequest(url);
tmpRequest.method = air.URLRequestMethod.POST;
mpRequest.contentType = 'multipart/form-data'; // это тип для загрузки файлов
tmpRequest.data = variables;
air.sendToURL(tmpRequest);

// аттач ивентов для прогресс бара и завершения загрузки
pictureFile.addEventListener(air.ProgressEvent.PROGRESS, callback_for_upload_progress);
pictureFile.addEventListener(air.DataEvent.UPLOAD_COMPLETE_DATA, callback_for_upload_finish); 

// выполняем загрузку файла на сервер (отличается от простых http-запросов).
pictureFile.upload(tmpRequest, 'pic', false);

Вот про ивент air.DataEvent.UPLOAD_COMPLETE_DATA в доке нигде не написано, я выцепил его из примера, написанного для Flex на AcionScript. Пример рабочий, опробывал. Его нужно дополнить хендлерами ивентов. Для примера:

function callback_for_upload_progress(event) { 
    var loaded = event.bytesLoaded; 
    var total = event.bytesTotal; 
    var pct = Math.ceil( ( loaded / total ) * 100 ); 
    air.trace('Uploaded ' + pct.toString() + '%');
}

function callback_for_upload_finish(event) {
    Console.log('File upload complete');
    air.trace(event.data); // вывод ответа сервера на консоль air (режим отладки)
}

Эта заметка для тех, кто уже хоть немного знаком с AIR. В следующем обзоре я пожалуй напишу пример для работы с файлами. Если нужно сделать пример «с нуля» для начинающих, напишите, попробую. Хотя я считаю, что в официальной доке как раз неплохо написано с чего начать.

Я почти уверен, что у вас есть не мало вопросов по этой новой теме. Пишите в комментах, мне будет более понятно на что больше стоит обратить внимание.

Как я вчера обещал, начинаю активнее добавлять контент :-)

Третий выпуск «Линкотеки» посвящен картографии и Google maps в частности. К слову, тема вообще очень интересная и популярная. Я, честно говоря, недооценивал ее увлекательность и предлагаемые возможности, пока не столкнулся с ней в одном их своих новых проектов. В блогах все чаще можно услышать новомодную фразу гео-тегирование, а на разных социальных сервисах все чаще предлагают привязать какую-то виртуальную информацию к географическим координатам. Так что будте готовы наваять свой код, когда столкнетесь с необходимостью работать с гео-данными.

• Mapstraction — JavaScript библиотека для работы с многими картографическими сервисами через единый API.

• Modest Maps — Библиотека для работы с картографическими сервисами на ActionScript (v2 / v3) и Python.

• cfis — Блог Charlie Savage, разработчика GIS систем. Много информации общего характера для понимания тонкостей картографического софта, плюс примеры кода.

• Google maps. Snap to Polyline (example) — Пример JavaScript кода для привязки курсора к полигонам и полилиниям в Google maps.

• Google maps. Resizable Polygons (example) — Пример JavaScript кода для создания полигонов с возможностью ресайзинга в Google maps.

• Take Control of Your Maps — Отличный обзор картографического (GIS) софта для построения веб-приложений от «A List Apart».

• jMaps jQuery plugin — Плагин к jQuery для базовой работы с Google maps.

• GeoDjango — Отдельная ветка django, отлично заточенная на работу с гео-данными (GIS). Фич очень много, советую хотя бы ради интереса ознакомится. Главным я считаю полную интеграция с PostgreSQL PostGIS на уровне ORM.

• django-geo — В отличии от GeoDjango, облегченный вариант для интеграции гео-данных в ваш django-проект.

На этом, пожалуй остановлюсь. Если тема GIS и работы с гео-данными интересна, дайте знать. Если нет, то я не буду закидывать вас неинтересным контентом. Просто есть мысли в следующих постах привести некоторые куски кода по теме с объяснениями.

Готова вторая подборка интересных ссылок с моими комментариями.

• Google GData Authentication decorator — пример кода для работы с документами google на python (удобный декоратор).
• Control Suite : High Quality Controls & Widgets for Prototype — интересный набор контролов и виджетов для javascript библиотеки Prototype.
• FastInit: a faster window.onload — готвый javascript код (кроссбраузерный) для убыстренной инициализации и вызова js-скриптов. Очень удобно использовать вместо window.onload.
• Cross-Fade Anything — еще одна javascript библиотека для создания слайд-шоу эффекта в Prototype.
• Ext JS - JavaScript Library — очередной javascript тулкит для создания rich ui. Особенность в том, что он позволяет строить оконные интерфейсы aka browser OS.
• LightWindow — реинкарнация популярного Lightbox JS. Позволяет делать js popup с любым контентом, в отличии от lightbox, который позволяет делать popup только картинки.

PS: если вы использовали что-то из указанного в ссылках — поделитесь, пожалуйста. Думаю многим будет интересно узнать чужое мнение.

Решил сменить свою del.icio.us ленту в сайдбаре на более-менее регулярный постинг интересных ссылок.

А вот место в сайдбаре собираюсь заполнить блогроллом. Так что если хотите попасть в список — напишите мне на имейл или в комментарии свой сайт/блог. Добавляю на условии, что вы ставите на меня обратный линк.

Итак интересное, что я «нарыл» на просторах интернета за последние пару недель.

• StaticGenerator for Django — ссылка дня! очень полезный проект для django-разработчиков, может генерировать статический html вариант сайта из моделей, пользуясь методом get_absolute_url. Самое главное, что через сигналы он может автоматом обновлять html-страницы при изменении/добавлении объектов (т.е. буквально данных в базе).
• Evaluation of web based WYSIWYG-editors, test result 2007 — обзор онлайновых WYSIWYG редакторов (javascript и один на java), с него набрел на один интересный редактор (следующая ссылка).
• WYMeditor - web-based XHTML editor — простой интересный онлайн редактор, без возможности upload/insert images, но зато более семантичный и наглядный для тех, кто знает HTML.
• WYMstyle и css-boilerplate — css frameworks, хороши для веб проектов, когда у вас еще нет дизайна веб-сайта/веб-приложения, но вам нужно более-менее симпатично показать контент и функционал. Облегчают работу тем, кто не любит долгой возни с версткой.
• swfobject 2 — новая переработанная версия (на данный момент rc1) javascript библиотеки для включения в страницу flash/flex роликов или приложений. Кто еще не пробывал — советую, намного удобнее, чем писать кроссбраузерные теги и делать ручные проверки нужной версии flash. Еще можно почитать блог разработчиков — SWFFix Dev Blog.
• transdb — неплохая библиотека для локализации конента в django. Добавляет специальные многоязыковые текстовые поля в модель, что облегчает работу с базой и хорошо интегрируется с существующей системой i18n в django.
• PyAMF — Реализация на Python поддержки протокола обмена данными AMF (от Adobe) для клиент-серверного взаимодействия. Используется во flash и других проектах Adobe. Данные по этому протоколу передаются в бинарном виде, что более-продуктивно с точки зрения потребления траффика, автоматизирована сериализация/десериализация данных как на стороне сервера, так и клиента.

Хочется высказать свою активную позицию насчет форматов передачи сообщений между приложениями в веб-среде. Или можете считать это просто настойчивым советом, особенно относящемуся к начинающим веб-разработчикам. Итак, что использовать? XML или JSON?

Общение (обмен сообщениями, если хотите) современных веб-приложений очень актуальная тема. В связи с появлением веб-сервисов в прошлом и огромным ростом популярности сложных (rich) интерфейсов в настоящем, появляется потребность в удобном и легком способе передачи данных между приложениями. Чаще всего подразумевается общение клиента и сервера. Частные случаи: всем полюбившийся Ajax, Flash/Flex приложения с динамическим контентом, API для публичных сервисов.

Так вот исторически сложилось что для этих задач использовался изначально XML, как универсальный способ описания любых данных. Но позже появился новый (популярный сегодня) формат – JSON. Про сам формат вы можете почитать в инете, благо информации достаточно. А вот свои субъективные плюсы и минусы я напишу ниже.

Плюсы JSON по сравнению с XML:

• быстрее парситься;
• легче визуально воспринимается;
• нативно интегрирован в JavaScript (читай Ajax);

К этому списку могу добавить отрывки личного опыта. С парсингом и валидацией XML есть достаточно много проблем, зависящих от библиотеки с которой вы работаете. Сериализация данных в JSON обычно в коде занимает меньше места, чем кодирование сериализации в XML. Интересным практичным моментом есть именно разработка Ajax интерфейсов, где JSON сокращает JS код. Большим плюсом к этому является возможность использования того-же протокола не только Ajax-ом, но и например Flash/Flex приложением или сторонним сервисом как API.

Вывод. Я считаю, что XML на самом деле не так уж плох и для общения между приложениями, но он лучше подходит для хранения сложно структурированных данных. А вот большим плюсом JSONа как раз является сокращение времени на разработку базового веб-приложения и его дальнейшей быстрой интеграции с другими разнородными приложениями. Еще проще говоря, если вы собираетесь заняться изучением или сразу использованием Ajax в своих проектах, обратите внимание на JSON и сэкономьте свое время.

PS о недостатках. Посмотрите статью Tim Bray и Don Box по теме.