Что такое Фэшбо и с чем его едят?

Все началось весной 2009 года.

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

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

Для реализации нам потребовалась команда из 3,5 матерых профи: дизайнер — 1 штука, программисты — 2 штуки, ну и прожект манагер иногда мимо пробегал (кстати, в процессе работы они не пострадали, хотя могли бы!).

Два месяца дизайнер наводил красоту, три месяца программисты разрабатывали функционал, плюс месяц был потрачен на тестирование, запуск и улучшения. Спустя 4 месяца после начала работы сайт был готов. Как нам удалось 6 месяцев утрамбовать в 4? Элементарно!

В копилку эрудита

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

2 + 3 + 1 = 4 !

Встречают по одежке...

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

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

Сайт — как книга. Хочется чтобы не только обложка была красивой, но и содержание не подкачало. Этого можно добиться за счет тщательной проработки всех элементов на всех страницах. Мы стремимся сделать каждую страницу не просто красивой, но и удобной и интересной!

И напоследок еще одна прописная истина:

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

Главная страница

Работу мы начали с главной страницы... простите, с обложки сайта.

Заказчик предложил создать Cover page в стиле обложки глянцевого журнала с изображением победителей сайта по результатам голосования пользователей за день или за неделю.

Однако впоследствии мы отказались от этой идеи: несчастные посетители, впервые попавшие на Fashbo.com, терялись и не могли понять, куда же они зашли.

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

Этот вариант устраивал заказчика, но точно не устраивал нас — потому что главная страница в этом случае являлась просто списком фэшб, слегка разбавленным словами.

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

Регистрация на сайте

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

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

Чтобы было удобно и компактно, мы решили разбить форму регистрации на 2 шага: обязательная информация и личные данные, который ленивому пользователю разрешалось пропустить:

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

Наш труд оправдан: процент регистрирующихся посетителей сайта порой достигает 50%, что, поверьте на слово, очень много.

Загрузка фото

Спросите у любого фэшбообывателя, какой сервис на сайте самый-самый необходимый, и тот без задумки ответит: «Фэшбо-загружалка!»

Процесс загрузки (впрочем, не только он) должен быть удобным — популярному сайту никак не обойтись без массы загруженного контента. Фотографии на Fashbo.com загружаются с помощью специального флэш-загрузчика, позволяющего пользователю наблюдать за процессом во время загрузки фото большого размера.

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

Весь процесс загрузки мы тоже разбили на 3 шага, чтобы не пугать пользователя большими формами.

И вновь наш труд оправдан: доля загрузок фото на количество посетителей (конверсия) растет как на дрожжах.

Страница фэшбы

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

Когда пользователю надоест рассматривать саму фэшбу, он может:

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

Под описанием расположены комментарии и похожие фэшбы, подбираемые автоматически всемогущим искусственным интеллектом.

Поиск

В нескончаемом стремлении сделать поиск удобным многие поля были сделаны слайдерами: пользователю не нужно открывать выпадающие списки с множеством цифр. Вот что у нас получилось:

Байндер

У каждого фэшбообитателя имеется свой персональный байндер.

Байндеры очень популярны у американских подростков. Вот и мы решили сделать нечто подобное.

Как это делается? Заходим на страницу понравившейся фэшбы, добавляем ее в байндер, крутим-вертим на странице, ну и в довесок пишем что-нибудь на память

Технические особенности

Закончим размусоливать красивости и посмотрим, какие высокотехнические штучки прячутся в арсенале суровых сибирских программистов.

CakePHP: программный каркас

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

jQuery: JavaScript библиотека

Чтобы добавить страницам динамики, а также избежать лишних переходов по страницам в ходе выполнения различных действий, мы использовали JavaScript фреймворк jQuery.

jQuery Star Rating Plugin

Удобный и легконастраиваемый плагин для голосования. Чтобы оставить свой голос достаточно просто кликнуть мышкой по звездочкам (в нашем случае по сумочкам).

qTip: всплываюшие подсказки

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

jQuery Sliders: слайдеры выбора значений

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

	
		$('select#fashbo_field').selectToUISlider();
	
	

Выбор цвета

На сайте сделан удобный выбор цвета. Делаются они просто: по событию onclick на соответствующем блоке ставится галочка и добавляется hidden поле в форму. При повторном клике галочка убирается и поле унижтожается.

	
		function isdark(color){
			var color = parseInt(color.substr(1), 16);
			return (color >>> 16) // R
				+ ((color >>> 8) & 0x00ff) // G
				+ (color & 0x0000ff) // B
				< 500;
		}
	

Cufon: нестандартные шрифты

Все заголовки на сайте выполнены нестандартным шрифтом. Это реализовано с помощью JavaScript библиотеки Cufon.

	
	Cufon.replace('h1');
	Cufon.now();
	
	

Instant Tilt: наклон фотографий

Чтобы сделать биндер поинтереснее, мы использовали библиотеку instant, которая позволяет вставлять фотографии в рамочку и наклонять их, делая их похожими на настоящую тетрадку со вклеенными фотографиями.

LiveValidation: проверка форм на лету

Для проверки форм на корректность заполнения мы использовали удобную и простую библиотеку LiveValidation. Она позволяет отслеживать ошибки валидации, не перегружая страницы, а также присваивать множество правил каждому из проверяемых полей.

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

	
	$('#reg_form').submit(function() {
		if (!LiveValidation.massValidate( [ username, password, confirm, email ] )) {
			// выводим сообщение об ошибке
		} else {
			// отправляем форму на сервер
		}
	});
	
	

Uploadify: загрузка фото с индикатором завершенности

На сайте использован флэш загрузчик на базе плагина Uploadify для более удобной и наглядной загрузки фото.

Jcrop: обрезка изображений

Очень удобный в настройке компонент Jcrop мы использовали для красивого редактирования аватара

Подсчет рейтинга

Для определения популярности каждой фэшбы подсчитывается ранг.

Технически вычисление ранга было реализовано следующим образом. В базе данных для учета ранга используется 2 таблицы: fashbos и ratings. При совершении пользователем какого-либо действия (просмотра фото, написания комментария, добавления фэшбы в байндер, отправке ссылки другу или добавлении ссылки в сервис закладок), в таблице ratings производится регистрация этого события на сегодняшний день именно для этой фэшбы.

Выполняется следующий SQL запрос:

	INSERT INTO ratings ( fashbo_id, created, param_field)
	VALUES (ID_фэшбы, 'текущая дата', 1)
	ON DUPLICATE KEY UPDATE param_field = param_field + 1;

где param_field — идентификатор действия, например, добавление комментария или сохранения в байндер.

Таким образом, происходит подсчёт количества действий над каждой фэшбой.

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

Общий рейтинг = к1 * кол-во коментариев + к2 * кол-во просмотров и .т.д. где к1, к2.... - коэффициенты, задаваемые для каждого действия в административной части сайта.

Задавая различные значения коэффициентам можно показывать, какие из действий имеют большее значение на рейтинг. Затем, на основе хранимых процедур, вычисляется сумма общих рейтингов (все записи в таблице ratings) за определённый период времени (день, неделя, месяц, год). После этой "тяжелой" процедуры в таблицу fashbos заносятся полученные значения.

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

Apache и nginx: веб серверы

На выделенном сервере от компании Joyent было установлено 2 веб-сервера для распределения нагрузки и повышения производительности системы. В качестве сервера, генерирущего динамичесий контент, был использован Apache2. Для выдачи статического контента (изображения, css и js файлы) был настроен nginx.

Fashbo. Наши дни

В тщательно созданных комфортных условиях фэшбообыватели растут и множатся на глазах — сейчас посещаемость достигает 200 особей в день.

Но и этого нам мало! Сейчас с клиентом ведутся переговоры о дальнейшем развитии сайта: планируются различные конкурсы, разработка версии для iPhone, создание социального шоппинга и много иных приятностей. Так что, как говорят наши забугорные клиенты, to be continued!