В рубриці DOU Проекторвсі бажаючі можуть презентувати свій продукт (як стартап, так і ламповий pet-проект). Якщо вам є про що розповісти — запрошуємо прийняти участь. Якщо ні — можливо, серія надихне на створення власного made in Ukraine продукту. Питання і заявки на участь надсилайте на valentina@dou.ua.
Ідея
Привіт, мене звати Михайло. В ІТ я вже 13 років і встиг пройти шлях від учителя інформатики в ЗОШ м. Чернівці до розробника в команді, що пише клієнтську частину Digital Analytix Enterprise. Це один з кращих продуктів для веб-аналітики, який, до речі, нещодавно був придбаний Adobe у мого поточного працедавця comScore.
Останні 6 років я мешкаю в Амстердамі, але продовжую відчувати зв’язок з Україною, слідкувати за її політичною сценою. У грудні 2013 був учасником подій на Євромайдані. Після перемоги демократичних сил і перших років «життя по-новому» я помітив одну неприємну рису нової влади — проблему з поясненням простим громадянам своїх в цілому вірних рішень. Через це «перемога» миттєво перетворюється на «зраду», а популісти, які «за все хороше, проти всього поганого», набирають очки, в той час як країні потрібно продовжувати болісні, але необхідні реформи.
На мою думку, однією з причин такої поширеності «зради» є огульна критика, яка сходить на будь-якому ґрунті, в той час як розумні аргументи можуть зрозуміти лише люди, які «володіють темою». І тут нам на допомогу приходить візуалізація даних за допомогою інфографіки, що значно спрощує розуміння складної для неспеціаліста інформації.
Один з таких складних для розуміння процесів — внесення України до списку країн, громадяни яких можуть подорожувати до країн-підписантів Шенгенської угоди без віз. Хоча цей процес відбувається в Брюсселі, далеко від Банкової і «будинку під куполом», але очільники всіх гілок влади України вже встигли «підписатися» під цим (при цьому жодним чином не пояснивши, як саме і коли саме це відбудеться), обмежившись лише обіцянками, що «незабаром, наприкінці наступного місяця, посеред літа» і т.д. Такий байдужий підхід влади, помножений на елементарну безграмотність українських журналістів, призвів до появи в масовій свідомості хибного уявлення, що «безвіз нам ніколи не дадуть», «кому ми там потрібні», «балакають про це вже десять років, а результату — жодного». Мені часто доводилось зустрічати таку думку на обивательських форумах і в приватних бесідах за келихом чаю.
Початкова ідея, що виникла в результаті таких розмов — показати, що безвізовий процес, який Україна зараз проходить паралельно з Грузією і Косово, за строками не є довшим від аналогічних процедур для країн західних Балкан і Молдови, які отримали безвіз раніше. Так і народився сайт «Коли без віз?»
Реалізація
Де взяти дані? Звісно ж, на сайті Європарламенту. Плюси європейської бюрократії в тому, що в них «всі ходи записані»Це посилання на закон ЄС, який ділить всі країни світу на два списки — візовий та безвізовий. Щоб перенести якусь з країн з одного списку в інший, потрібно прийняти зміни до закону. Всі етапи цього процесу, разом з датами і супутніми документами, доступні на europarl.europa.eu.
Все, що мені потрібно було зробити, це віднайти ці дати, записати їх в JSON і після незначного форматування згодувати бібліотечці Highcharts. Мабуть, важко знайти фронт-енд розробника, який ніколи би не чув про цю чудову бібліотеку для побудови графіків на будь-який смак. У них на сайті є багато прикладівз прямими посиланнями на JSFiddle, що значно спрощуює процес «підгонки» цих прикладів під конкретні потреби. Ми на comScore використовуємо Highcharts (а також d3) для візуалізації даних, тому це не зайняло в мене багато часу. Ще одна перевага JS перед статичною графікою — це інтерактивність та масштабованість, що дуже важливо для розуміння інформації. Корисно для тих, хто не дружить з усім, що об’єднується під словом дизайн.
Отже, порівняльний графік проходження безвізових процедур в нас є, тепер його треба кудись вставити. Я вирішив не винаходити велосипед (правда нетипово для фронт-ендщика, вам не здається?) і взяти вже готове рішення — Bootstrap. Переваги важко переоцінити — в першу чергу це кросплатформенність: на всіх європейських конференціях, куди мені вдалось потрапити, спікери підкреслювали важливість «mobile first» підходу.
Друга перевага Bootstrap — це те, що під нього вже написано дуже багато шаблонів — бери і використовуй. Для мене це було так само важливо, тому що певні дизайнерські рішення, як-от підбір кольорової гами, пропорції елементів на екрані, типографія, вже були зроблені за мене.
Та повернімося до першого аргументу: статистика користувацької активності на сторінці показує, що мобільних користувачів було найбільше — 47%, користувачів планшетів — 8%, все решта — десктопи. Панове розробники, не забувайте про ваших мобільних користувачів!
Вирішив не тягнути в проект Angular чи React, бо ідея ж простенька, навіщо город городити, зробив «по старинке» на jQuery (не кидайте в мене помідорами).
Далі треба було зробити сайту favicon-логотип і малюночок, який буде відображатися поруч із посиланням, коли ви поширюєте в соціальних мережах. Для favicon я просто взяв зображення іконки, яку використовують в усьому світі для позначення біометричного паспорту/ID. Трошки непропорційно змасштабував, проте, коли бачиш таку іконку на тулбарі браузера — одразу згадуєш, про що цей сайт. А щодо логотипу, методом спроб і помилок будо знайдено наступний сайт: logomakr.com. Спробуйте самі, там усе дуже просто. А ось і результат:
Водночас відкрив для себе щось нове — дізнавсь, де на моїй сторінці соціальні мережі шукають інформацію, яка буде відображатись під час поширення. Як писав Максим Рильський: «Троянди й виноград, красиве і корисне» — робиш щось для загалу і паралельно здобуваєш нові знання.
Наступний крок — вибір плагіну для спрощення поширення сторінки в соціальних мережах. Я зупинився на socialsharekit. Його основна перевага — це, знову ж таки, вміння трансформуватися для максимально зручного використання на мобільному пристрої.
Ставка на соціальні мережі зіграла: 93% користувачів прийшли з Фейсбуку, 2.5% з ВК і трошки менше відсотка з Твітеру.
Зареєстрував кириличний домен: сайт розрахований виключно на україномовну аудиторію, українські слова простіше писати кирилицею, чи не так? Ну і патріотично якось, а ще недорого, адже проект не комерційний.
Щодо хостингу — товариш (який проспорить мені пляшку коньяку, коли Україна нарешті отримає безвіз) порадив скористатись pages.github.com. Переваги: безкоштовність, масштабованість, простота внесення змін (однією командою push) як наслідок того, що сторінка є відображенням репозиторію. Дуже рекомендую початківцям, які хочуть щось зробити і захостити, щоб було доступно для загалу, але не хочуть адмінити це все. Недоліки: працює лише зі статикою, бази даних там не захостиш, серверну логіку теж, але в нас її і немає (поки що).
В якості аналітики використав Google Analytics. Взяв би наші рішення, але вони не безкоштовні та й до enterprise-рівня моїй сторіночці ще далеко.
Працював над сайтом сам, навіть дружині нічого не розповідав: не знав, чи вистачить мені бажання довести справу до кінця. Розповів вже коли поділився на Фейсбуці. Посилання одразу почали поширювати мої друзі, серед яких був Олександр Снідалов — активіст української діаспори в Нідерландах. Завдяки йому і його друзям посилання поширило декілька популярних єврооптимістичних спільнот, за якими слідкували журналісти. Визнання прийшло від каналу 24.
Я дуже вдячний Олександру за його допомогу та за те, що він звів мене з редактором «Європейської Правди» (не плутати з «Українською Правдою», у цих ресурсів окремі редакції), Сергієм Сидоренком. Скайпом Сергій дав мені деякі поради щодо покращення сайту, пояснив, як функціонує внутрішня дипломатична кухня в Брюсселі. Це була дуже цікава і потрібна мені інформація, але я прийняв рішення не ускладнювати вже існуючий формат подачі даних: і без того середній час, який користувачі проводять на сайті — 36 секунд. Боюсь, що «too much information» відлякує обивателів.
Чи хочу я монетизувати свій проектик? Я би з радістю розмістив посилання на паспортний сервіс за скромну винагороду. Якщо хтось має там знайомих — покажіть їм мій сайт, деталі можемо обговорити в приватній розмові (пошту на сайті вказано).
Результати
Як я бачу розвиток ресурсу після того, як нам дадуть безвіз із країнами Шенгенської угоди? Залишається ще дуже багато країн, куди українцям потрібно робити візи. Деякі з них поступово лібералізують своє візове законодавство: скажімо, рік тому ми з дружиною робили візу в Індонезію, щоб злітати на Балі, а вже з березня цього року ця прекрасна країна стала для нас безвізовою. Очікую, що після запровадження Шенгенського безвізу аналогічні кроки зробить все більше країн. Процес скасування віз між ними і Україною планується візуалізувати на моєму сайті. Щоправда, буде важко знайти інформацію про безвізові переговори з іншими країнами: не всі уряди такі прозорі, як ЄС. Було б непогано, якби хтось в МЗС допоміг у цій справі.
Сподіваюсь, моя простенька сторіночкастане вам у пригоді у боротьбі з безвізовою «зрадою» і допоможе краще зрозуміти, як працюють європейські органи влади. Я не сумніваюсь в тому, що «залізна завіса» Шенгену остаточно впаде вже в найближчі місяці.