livedev.org

Я давно планировал начать серию статей про фронтенд разработку, т.е. про 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. В следующем обзоре я пожалуй напишу пример для работы с файлами. Если нужно сделать пример «с нуля» для начинающих, напишите, попробую. Хотя я считаю, что в официальной доке как раз неплохо написано с чего начать.

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

Последний год я стал замечать что слово «юзабилити» стало проскакивать все чаще во всякого рода компьютерных публикациях рунета. Сейчас особо часто это слово замечается рядом с более нашумевшим «Веб 2.0». Все чаще слышатся оптимистичные заявления о переходе на приложения с веб-интерфейсом и в большинстве случаев имеются ввиду приложения Гугл.

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

Веб живет своей жизнью и жизнь эту можно отметить достаточно бурной эволюцией и развитием. Особенно последнии годы в период раздувания «Веб 2.0 пузыря». И самое интересное в этом развитии, то, что «атовизмы» отсыхают и отпадают не так быстро, как хотелось бы. А новые способности и возможности адаптируются и применяются наоборот достаточно медленно. Именно с этого я хочу начать свое рассуждение, т.к. считаю вопрос совместимости основным для успешного развития веб-интерфейсов. Я не буду приводить множество примеров о глючном IE или отличным рендерингом css-свойств в разных браузерах. Или взять тот-же флеш от Адоби, который, несмотря на долгую историю развития и мажорную версию 9, все еще преподносит немало сюрпризов.

Цель этой заметки — небольшая аналитка, собранная из личного опыта. Как построить удобный пользовтельский интерфейс для веба. Итак, мои советы.

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

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

3. Меньше используйте мешанины flash-html. Если вы хотите использовать флеш, сделайте на нем отдельную часть сайта, чтобы пользователь варился в ней как в отдельном приложении. Все дело в том, что флеш не учитывает особенностей исполнения интерфейса платформы на которой работает конечный пользователь. Поэтому контролы будут сильно отличаться внешне и по принципу работы, что будет раздражать пользователя. Пользователю легче привыкнуть к одному месту на сайте где все по другому, чем постоянно переключать внимание.

4. При использовании Ajax старайтесь всегда делать версию сайта, работающую в стиле old-school. Формы, поля, ссылки. В случае глюков или тормозов JS опытные пользователи всегда смогут перейти к обыкновенному режиму работы.

5. Используйте готовые JS/Ajax библиотеки. В них учтены уже кросс-браузерность и неровности работы JS. Писать «с нуля» свое слишком дорого и не оправдано.

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

7. Пробуйте самые последнии и современные технологии веб, в которых уже учтены многие недостатки прошлых лет. На данный момент я имею ввиду декстопно ориентированные фреймвоки MS Silverlight и Adobe Air. Не обязательно вы их будете использовать в своих решениях, но быть «на коне» очень важно.