VkOMG. Розробка чергового нікому не потрібного сервісу





Рейтинг: +4
1 652 переглядів

Vk OMG

Мене завжди цікавили різноманітні «плюшки» для соціальних мереж з маркетингу точки зору. А саме те, як швидко увійде цей черговий бред в масове користування і те, скільки сил буде витрачено на досягнення цього ефекту. Нижче я розповім результат того, що я дізнався на прикладі нашої останньої роботи vkomg.com

Вже кілька років працюю фрілансом в американській компанії, що орієнтується на веб-розробках. Робота цілком стандартна для середньостатистичної фріланс конторки: коду доопрацювання кривого, що дістався у спадок від минулих розробників проекту, тістечка і плагіни для CMS, іноді непогані масштабні стартапи. Все це, звичайно, добре. Але давно відомо, що дрібні, на перший погляд нікому не потрібні речі приносять віддачі набагато більше.Тому, в один прекрасний день, побачивши на фейсбуці нові профілі, ми розробили сервіс зі створення чергового нікому не потрібного забавного аватарного ефекту. прикольні авки

Пару днів тому, побачивши, що на рідному ВКонтакте з’явився точно такий же блок з фотографіями біля головного фото, ми загорілися ідеєю переробити наявний фейсбуковскій проект під вконтакте в перший же день.
Домігшись досить цікавих результатів в США, не виклавши на просування ніяких коштів з своєї кишені, почавши все з одного посилання у власному профілі, стало дуже цікаво які результати покаже Росія.
Конкретні цифри, історія, результати та шматки коду в поста продовженні.

  • UPD: Хабраеффект в дії. Лаємося з техпідтримкою за невідповідність за середньоринковий максимального навантаження дійсності.
  • UPD2: Хостер виправився. Сервер в повному здоров’ї.

З чого почати?

В якості мови для розробки першого варіанту для Фейсбук був обраний PHP.Вже був багаж готових шматків коду, а запуск раніше інших аналогів був одним з головних вимог. Саме це стало головною причиною вибору цієї мови.
Головними можливостями і вимогами були:

  • Ajax завантаження файлу фотографії з індикатором прогресу;
  • Предзагрузка елементів інтерфейсу для більшої зручності користувачів;
  • Легка можливість позиціонувати маску на фотографії;
  • Передпроглядання;
  • Можливість скачати готові фотографії одним архівом;
  • Можливість відображення фотографії по горизонталі без перезавантаження сторінки;
  • Відсутність будь-яких матеріальних вкладень на рекламу.
Маска і формат файлу

Серцем, звичайно ж, є далеко не скрипт кропа фотографій, а JS маска, що дозволяє користувачеві наочно вибрати саме той шматок картинки, який буде використовуватися в якості майбутнього юзерпік.

маска фотографій
Зрозуміло, як і будь-які інші ледачі розробники, ми кинулися шукати готові скрипти, які можна було б доопрацювати саме до того функціоналу, який нам потрібен. Після перегляду кількох десятків сторінок, виданих різними пошуковиками, стало ясно, що доведеться писати з нуля свою власну маску.Всі готові рішення були або дуже кривими, або вимагали не менше часу на їх доопрацювання, ніж написання власного скрипта з нуля. Все робилося у божевільній поспіху, тому про оформлення маски у вигляді нормального, адекватного плагіна для JQuery не могло йти й мови. Після того як основний функціонал буде дороблений, я планую переписати скрипт з нуля у вигляді нормального плагіна під JQuery з можливістю легкого використання у наступних продуктах.

Наступною цікавою, але досить простий у вирішенні завданням було відображення фотографії по горизонталі. Треба було виконати це без перезавантаження сторінки і, без будь-якої додаткової попередньої обробки фото на сервері і з підтримкою всіх браузерів. Рішення прийшло досить швидко. Відображення робиться простим додаванням цього CSS класу до контейнера фотографії.

.flip-x {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1); /* Поддержка Opera */
transform: scaleX(-1);
filter: fliph; /* Поддержка IE */
}

На практиці я легко переконався, що даний метод працює відмінно у всіх браузерах, включаючи IE і Opera. Тим не менш, цей метод має один головний, але дуже несуттєвий недолік. Якщо застосувати цей клас до тегу IMG, то при спробі зберегти браузером картинку, збережеться невідображених оригінал.
Усі серверні перетворення зображення виконані за допомогою ImageMagick.Відображення по горизонталі, наприклад, виконується таким чином:

system(«convert -flop /path/to/file/original.jpg /path/to/file/tmp.jpg»);

Також, завдяки ImageMagick, легко домогтися підтримки величезного числа форматів. Не тільки стандартних форматах JPG, GIF і PNG. Так як у якості результату користувач отримує JPG, має сенс скористатися конвертером ще на етапі завантаження фото.

system(«convert /path/to/file/original.ext /path/to/file/out.jpg»,$result);
if ($result===0) {
// Конвертация завершена успешно.
}

Завантажувач

Процес завантаження фотографії — це також важливий момент, якому варто приділити достатньо уваги. Так як все створювалося в жахливій поспіху, перша версія завантажувача представляла собою елементарну ENCTYPE = «з декількох частин / форм-дані» форму, що містить два елементи: поле вибору файлу і відправки кнопку. Вже в перший день почали надходити повідомлення від користувачів зі скаргами на неможливість завантажити файл. Після аналізу повідомлень з’ясувалося, що їх можна розділити на 2 категорії:

  • «Я натискаю завантажити файл, а воно мені пише, що спочатку треба вибрати файл, але як я його виберу, якщо я навіть не можу нічого завантажити?» (Так-так … щонайповніше марення, але не варто недооцінювати дурість користувачів, ці люди натискали кнопку відправки, не вибравши файл у першому полі. Вони вважали, що спочатку треба натиснути кнопку «Завантажити фотографію», що призводило до неминучої помилку, яку вони не були в силах осмислити)
  • «Я вибираю файл, натискаю» Завантажити фотографію «і все зависає. Чому? ». (Користувач намагається завантажити занадто великий за розміром файл, або швидкість його підключення досить невисока)
Рішення даної проблеми очевидне. Те, що відсутність нормального завантажувача підірве юзабіліті, також було очевидно з самого початку, але поспіх, як завжди, все псує. Незначні, на перший погляд, моменти викличуть безліч проблем у майбутньому.
Для виправлення ситуації був використаний плагін для Jquery під назвою Uploadify.

завантаження фото

Плагін дозволяє легко реалізувати завантаження файлу з індикатором процесу завантаження. Метод досить стандартний: використання елемента на Flash для асинхронної передачі даних. Головним плюсом цього плагіна є легкість в налаштуванні (величезне число параметрів і коллбеков) і можливість налаштування зовнішнього вигляду за допомогою CSS

фато додане

Слід також передбачити варіант використання для ненависників флеша.(Використання все тієї ж стандартної форми для користувачів без Flash).Перший же запит до пошукача видає цікаві результат: бібліотеку для визначення версії Flash зі всілякими немислимими методами.

HTML містить відразу дві форми: звичайну з декількох частин і форму з флеш елементами. Флеш форма за замовчуванням прихована від очей користувача.

if(FlashDetect.installed) {
$(‘#plainform’).hide();
$(‘#ajaxform’).show();
}
Таким чином, звичайна форма легко підміняється Uploadify формою за умови наявності у кінцевого користувача Flash.

Передпроглядання

передпроглядання

Попередній перегляд — чергова річ, яка полегшує життя простому користувачеві. Ідея проста: згенерувати картинки, позиціонувати картинки за допомогою CSS на універсальній заготівлі для фону. Заглиблюватися в деталі не буду. Єдине про що тут варто розповісти — це спливаюче скрипт. Зовсім недавно я зіткнувся з продуктом під назвою Topup, який показав себе досить переконливо і за довгу історію використання не викликав жодної проблеми.

Предзагрузка

Щоб поліпшити користувальницький досвід на сторінці з формою, було прийнято рішення здійснити предзагрузку всіх картинок, які використовуються на сторінці з маскою (наприклад, всі медіа ресурси Topup, щоб спливаюче вікно з’являлося миттєво, без завантаження на очах у користувача). Причому підвантаження цих елементів не повинна впливати на швидкість рендера сторінки з завантажувача. Перше, що спало на думку — підвантаження картинок за допомогою JS:

function preload(sources)
{
var images = [];
for (i = 0, length = sources.length; i < length; ++i) {
images[i] = new Image();
images[i].src = sources[i];
}
}
$(window).load(function() {
$(«#preload»).attr(‘src’,’preload-step2.php’);
preload([
«res/images/preview.png»,
«res/images/top_up/dashboard/sprite.png»,
«res/images/top_up/dashboard/close_link.png»,
«res/images/top_up/dashboard/bottom_left.png»,
«res/images/top_up/dashboard/top_right.png»,
«res/images/top_up/dashboard/bottom_right.png»,
……………………..
……………………..
«res/images/btn-flip.gif»] )
});

Водяний знак

Далі постало питання про створення напівпрозорого водяного знака.Згадавши, скільки маніпуляцій потрібно для реалізації водяного знака за допомогою GD, я вирішив залучити для цієї мети все той же ImageMagick.

system(«composite -gravity south -alpha on /path/to/file/watermark.png /path/to/file/profile.jpg /path/to/file/profile.jpg’);
водяний знак на фото

Видалення застарілих файлів

Так як користувач буде забирати архів з результатом не відразу, а через якийсь час, необхідно передбачити сценарій видалення застарілих тимчасових файлів. Для кожного користувача створюється тимчасова директорія, яка містить всі файли даної сесії. Завдання: щодня видаляти всі директорії, створені понад 24 годин тому.

#!/bin/bash
for i in `find /path/to/dirs/ -maxdepth 1 -type d -mtime +1 -print`; do rm -rf $i; done

Цифри

А тепер, найцікавіше — результат.
На розкручування фейсбуковского оригіналу не було витрачено жодних зусиль і коштів. Все, що ми зробили — це змінили свої власні юзерпік і опублікували URL у стрічці новин на огляд друзям своїм. Тим не менш, фейсбуковскій оригінал вчора досяг відвідуваності в 4000 унікальних відвідувачів на день (дуже нескромне результат, для проекту віком місяці менше).

стата, відвідуваності

VkOMG починався аналогічно. Зміна власного аватара і публікація статусу з URL + одна Таргет реклама з бюджетом 25 рублів, яка принесла всього 50 рефералів на офіційну сторінку ВКонтакте (саме на сторінку ВК, а не на зовнішній URL).
Тим не менш, ось наші скромні результати за 4 дні роботи:

  • 1й день — 24 унікальних відвідувача, 56 аватар створено.
  • 2й день — 246 користувачів, 542 аватари створено.
  • Третій день — 440 унікальних користувачів, 1408 аватар створено
  • 4й день — 890 користувачів — 2486 аватар створено.

джерело