Очень важным моментом в интерфейсе сайта является сохранение его текущего положения, для того, чтобы после перезагрузки страницы, пользователю не пришлось заново повторять свои действия с настройкой интерфейса сайта под себя. Идеальным средством для хранения состояния пользовательского интерфейса является cookies. Всем известно как работать с куки с помощью серверных (backend) языков,  но зачастую проще это делать напрямую из JavaScript. Конечно можно передавать данные интерфейса серверной части, а там уже сохранять их хоть в БД. Но как правило, если вы не разрабатывайте новый интерфейс для gmail, нет необходимости делать это для 5-6 параметров.

JavaScript и Cookies.

В JavaScript есть стандартные методы для работы с document.cookie, именно так происходит обращение к куки в JavaScript. Например функция для установки куки будет выглядеть следующим образом

function setCookie(c_name,value,expiredays)
 {
        var exdate=new Date();
        exdate.setDate(exdate.getDate()+expiredays);
        document.cookie=c_name+ "=" +escape(value)+
        ((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
 }

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

Плагины cookies для JQuery.

Если в вашем сайте уже используется JQuery, то наиболее простой способ наладить работу с cookies, это использовать плагин. Плагинов довольно много я обычно использую ezCookie. В плагине содержатся стандартные методы для работы с cookies – установка, чтение, удаление. На странице проекта есть детальное описание всех методов. Плагин ezCookie отличается от многих подобных автоматическим распознаванием значения установленной cookie, и, если это JSON данные, то функция автоматически возвращает JSON объект. Такой режим работы позволяет устанавливать subcookie, то есть множества пар имя:значение для одного cookie (для одной cookie переменной).

Сохранение положения интерфейса.

Давайте напишем небольшой пример, который позволит понять схему сохранения простых позиций интерфейса. Пусть у нас будет 5 разноцветных квадратов, которые по клику на кнопку “закрыть” закрываются, и текст на кнопке меняется на “открыть”. И при нажатии на кнопку “открыть” соответственно квадрат снова становится видимым.

Для этого воспользуемся стандартной JQuery функцией toggle (переключатель), которая в качестве аргументов принимает 2 функции, одна из которых срабатывает на четном щелчке мыши, другая на нечетном. Чтобы сохранить положение квадратов, мы в первой toggle функции будем устанавливать значение cookie в 0, а на второй функции в 1, ноль означает, что квадрат скрыт, а единица соответственно, что квадрат виден.

Здесь я использую функцию ezCookie $.setSubCookie, чтобы не увеличивать количество записей cookie. Так как структурно записи для каждого квадрата у нас равны, то все проще хранить в одной cookie с именем “ui_save”. В качестве дополнительных параметров метод $.setSubCookie позволяет установить время жизни cookies, но в данном случае используется время жизни по умолчанию.

Итак позицию интерфейса в зависимости от действий пользователя мы записали, теперь нам необходимо сделать так, чтобы после загрузки страницы интерфейс возвращался в записанное состояние. Для этого мы сначала считаем нашу куку функцией $.cookie(“ui_save”), эта функция автоматически определяет какое значение установлено в куке и если это JSON, то она возвращает JSON объект, что в нашем случае и происходит. Далее для каждого квадрата мы проверяем значение и если оно равно нулю то вызываем событие click, которое установит нужное положение квадрата.

	$(document).ready(function(){
		$(".close").toggle(
			function(){
				$(this).prev().slideUp(); //скрываем квадрат
				$(this).html("Открыть");
				var class_name = $(this).prev().attr("class");
//устанавливаем значение куки для конкретного квадрата в положение закрыть
				$.setSubCookie("ui_save", class_name, 0);
			},
			function(){
				$(this).prev().slideDown(); //разворачиваем квадрат
				$(this).html("Закрыть");
				var class_name = $(this).prev().attr("class");
//устанавливаем значение куки для конкретного квадрата в положение открыт
				$.setSubCookie("ui_save", class_name, 1);
			}
		);

		//Устанавливаем необходимую позицию интерфейса
		var ck = $.cookie("ui_save");
		for(key in ck){
			if(ck[key] == 0){
//вызываем событие "закрыть"
				$("." + key).next().trigger('click');
			}
		}

	});

То что получилось можно посмотреть здесь, после обновления страницы позиция интерфейса (закрытые, открытые квадраты) сохраняется.

Предлагаю разобраться, что нового и революционного предложила компания Google касательно шрифтов и как этим воспользоваться прямо сейчас. Во первых, как и множество других проектов компании, Font API является бесплатным и нет никаких сложностей, почему бы не начать использовать этот инструмент прямо сейчас.

Введение.

В течение последних нескольких лет постоянно появлялись новые методы использования альтернативных шрифтов. Все чувствуют подъем дизайна и юзабилити в веб, развитие сервисов и облачных приложений, все это ведет за собой и увеличение требований к типографике. Ограничение стандартным набором шрифтов, мешает развитию веб-дизайна в расширяющемся в геометрической прогрессии вебе. Поэтому стали появляться такие платные сервисы как TypeKit и FontDeck. В будущем, наверное, будут пояляется и другие.

Однако если вы посмотрите на основные технологии веб HTML, CSS, Javascript, PHP, все они являются бесплатными. Исходя из этого можно предположить, что вебу нужен эффективный, а главное бесплатный инструмент. Поэтому, то что предлагает нам Google наиболее подходящее в настоящее время решение для развития типографики в веб.

Меняет правило игры ?

Очевидно, что когда Google берется за что-нибудь, он делает это хорошо и меняет представление об этой отрасли. Так и со шрифтам, компания незаметно для всех выпустила (совместно с Typekit) Font API, который в долгосрочной перспективе изменит веб. Пока другие компании придумывают бизнес модели для подобных  сервисов, Google просто выпустили качественный бесплатный продукт.

Давайте посмотрим как это все работает на небольшом примере live demo:

HTML

Добавляем шрифты в Google Fonts API.

Теперь когда мы поняли, как же все это работает, давайте добавим своих шрифтов, для этого перейдем к Font Api и посмотрим на Каталог Шрифтов. Здесь вы увидите различных 18 шрифтов. Каждый шрифт имеет несколько вариантов. Когда вы выберите тот, который вам нравится, просто нажмите на него, чтобы увидеть дополнительные параметры. Допустим выберем IM Fell.

Когда вы увидите картинку с описание шрифта, просто нажмите на кнопку Get Code и вы увидите html код который нужно вставить в head страницы, а также пример css, как использовать новый шрифт.

Есть два способа вставки шрифта на сайт. Через html и через css @import.

Через HTML

<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>

Через @import.

@import url(http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica);

Далее мы можем использовать на сайте подключенный шрифт:

<div>
<div>
<pre>#headline h1 {
	text-align: center;
	font-size: 8em;
	color: #111;
	text-shadow: 0px 2px 3px #555;
	font-family: 'IM Fell DW Pica', arial, serif;
}</pre>
</div>
</div>

Помимо этого, есть WebFont Loader инструмент, который представляет собой библиотеку Javascript, которая “дает вам больший контрль над шрифтом и позволяет использовать нескольких провайдеров для шрифтов” (в данном случае Font API – это провайдер шрифта, как и TypeKit) , это кстати их совместная разработка.

Выводы.

Наверное вы обратили внимание, насколько просто использование новых шрифтов с Google Font API. В отличие от существовавших до настоящего времени инструментов вам не нужно получать лицензию, которая прикрепляется к специально зарегистрированному доменному имени. Вы можете использовать шрифты даже в обычном примере, у вас на локальном компьютере.

Есть несколько преимуществ для выбора Google Font API, на которые стоит обратить внимание:

• Шрифт скачивается с сервера Google.
• CDN Google быстрее чем ваш сайт.
• От повсеместного использования шрифты будут кешироваться за счет того, что имеют одно расположение (сервер Google).

Единственный видимый минус Font API, это небольшое количество шрифтов, но инструмент новый, и я думаю, количество доступных шрифтов будет со временем увеличиваться.

Источник: http://designshack.co.uk/

В размышлениях об интерактивности задавался мыслью как сделать удобный с точки зрения usability загрузчик файлов.  Плюс подогревал интерес к механизму работы ajax загрузчика в ExtJS. Делая однажды чат и разобравшись в ограничениях браузеров, узнал, что нет возможности отправлять файл по средством объекта xmlhttprequest. Поэтому было непонятно, как ExtJS uploader отправляет файлы, как будто делает это через ajax. Работая над созданием чата, я также ознакомиться с другими ограничениями браузеров, например на количество одновременных запросов к одному домену (ограничены двумя запросами), а также со всевозможными способами обхода этого ограничения. Там же для удобства применялся iframe транспорт, который позволяет отправлять обычные POST запросы через невидимый (0 px на 0 px) iframe. После этого мне сразу стал понятен механизм работы загрузчика файлов в ExtJS.

Решил добавить юзабильности в один из проектов и использовать этот способ для загрузки файлов, благо есть готовый плагин, называющийся AJAX Upload, хотя как я уже писал ajax тут не причем, все реализовано следующим образом:

• Плагин создает невидимый input над элементом, к которому вы привязываете нагрузку. То есть когда вы нажимаете на кнопку, появляется окно со стандартным выбором файла.
• Затем когда вы выбираете файл плагин отправляет форму содержащую input с файлом через iframe.

“Обычно для закачки файлов мы используем file input (<input type=”file” />), его проблематично стилизовать. В современных веб приложениях этот input выглядит устаревшим. Можно конечно использовать для загрузки Flash, но Javascript прекрасно решает эту задачу. Плагин AJAX-Upload позволяет легко загружать несколько файлов без перезагрузки страницы. Он работает во всех браузерах и не требует никаких дополнительных библиотек для работы. К тому же он не затрагивает глобальных namespace‘ов и прекрасно работает вместе с jQuery и Prototype.”

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

Распространяется плагин свободно под лицензией MIT.

Есть частая проблема, точнее особенность JQuery, о которой часто забывают дизайнеры и разработчики, она заключается в том, что вся анимация на странице при вызове попадает в “стек”. Если у вас на странице есть множество элементов с анимацией, например фотографии в фотогаллерее, то когда пользователь быстро проведет по нескольким фотографиям и перестанет двигать мышью, он будет наблюдать как анимация появляется постепенно на каждом элементе. Наглядно эту проблему можно посмотреть на сайте druckbar, если вы быстро проведете мышкой по четырем панелькам, то будете долго ждать пока в шапке появится соответствующие картинки.

Вы можете решить эту проблему одним из следующих способ:

Использовать метод .stop(). Когда этот метод используется на элементе, он немедленно прекращает его анимацию, если конечно она есть.

$("ol#gallery li").hover(function () {
  $(".thumb-meta", this).stop().animate({ bottom: '0px' }, 400);
},
function () {
  $(".thumb-meta", this).stop().animate({ bottom: '-22px' }, 400);
});

Другой способ решить проблему со “стеком” анимации, это использовать плагины, например hoverIntent. Этот плагин делает анимацию доступной только, если пользователь двигает мышью достаточно медленно.

Старайтесь не злоупотреблять с анимацией контента.

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

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

FlashDevelop это бесплатный OpenSource редактор распространяемый по лицензии MIT.

Он не является полной заменой Flash Builder. Имеет умное автодополнение при написание кода в ActionScript. Для установки FlashDevelop требуется Microsoft .NET 2.0 framework и JRE, который требуется для компиляции Flex и Flex Air приложений. При помощи haxe можно скомпилировать для платформ Flash, JavaScript, NekoVM, также можно скомпилировать бинарные исполняемые приложения для Linux и Windows. Для компиляции ActionScript 2 в состав дистрибутива включен MTASC.

Основные возможности редактора:

• Подсветка кода
• Продвинутый редактор фрагментов кода, а также большой набор этих фрагментов.
• Интуитивная и понятная панель инструментов
• Архитектура основанная на плагинах

Но главное это возможности работы с Flash:

• Полноценная поддержка ActionScript2, ActionScript3 и (внимание!) MXML.
• Автоматическая расстановка переносов и завершение тегов и функций.
• Быстрая навигация по коду – переходы к объявлениям.
• Интегрированный менеджер проектов, который фиксирует все прикрепленные (assets) файлы, свойства проекта, ну и конечно же рабочие файлы проекта
• Настраиваемый интерфейс для AS2API и ASDocs (генераторов документации).

Скриншот программы.

Вывод: Если рассматривать редактор как альтернативу CS4 IDE, то преимущество очевидно, это:

1. Бесплатное OpenSource приложение
2. Менеджер проектов
3. Удобство создания preloader,
4. Для кого-то не мало важно – генерация ASDocs

Вы еще не пользуетесь ? Тогда мы идем к вам

Функции которыми я сразу начал пользоваться, хотя до этого не догадывался о существовании некоторых из них в Dreamweaver:

• Проверка CSS и HTML валидности на лету (В Dreamweaver по умолчанию отключена)
• Удобное использование code snippets (В Dreamweaver по умолчанию отключена)
• Тестирование во всех браузерах установленных в системе в одном окне, удобно сравнивать как выглядит сайт в различных браузерах (В Dreamweaver такой фукции я не видел, поправьте меня)
• Code Hyperlink удобный переход к объявлению функции из ее вызова.
• Панелька DOM структуры
  

  Dom Panel

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

Expression Web 3

Вывод: благодаря грамотному userfriendly интерфейсу я перешел в Dreamweaver на Expression Web. Плюс MS за подачу аналогичного функционала в новом свете.