DOU Проектор: Колибезвіз.укр - сайт про прогрес входження України в Шенген

В рубриці DOU Проектор всі бажаючі можуть презентувати свій продукт (як стартап, так і ламповий pet-проект). Якщо вам є про що розповісти — запрошуємо прийняти участь. Якщо ні — можливо, серія надихне на створення власного made in Ukraine продукту. Питання і заявки на участь надсилайте на  Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. .

Ідея

Привіт, мене звати Михайло. В ІТ я вже 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» відлякує обивателів.

Чи хочу я монетизувати свій проектик? Я би з радістю розмістив посилання на паспортний сервіс за скромну винагороду. Якщо хтось має там знайомих — покажіть їм мій сайт, деталі можемо обговорити в приватній розмові (пошту на сайті вказано).

Результати

Як я бачу розвиток ресурсу після того, як нам дадуть безвіз із країнами Шенгенської угоди? Залишається ще дуже багато країн, куди українцям потрібно робити візи. Деякі з них поступово лібералізують своє візове законодавство: скажімо, рік тому ми з дружиною робили візу в Індонезію, щоб злітати на Балі, а вже з березня цього року ця прекрасна країна стала для нас безвізовою. Очікую, що після запровадження Шенгенського безвізу аналогічні кроки зробить все більше країн. Процес скасування віз між ними і Україною планується візуалізувати на моєму сайті. Щоправда, буде важко знайти інформацію про безвізові переговори з іншими країнами: не всі уряди такі прозорі, як ЄС. Було б непогано, якби хтось в МЗС допоміг у цій справі.

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