Zo zákulisia výroby vesmírneho webu

Doba čítania: 3 min.

Začali sme uvoľneným stretkom pri kávičke. Na meetingu marketingový tím preberal ciele a možnosti tejto akcie. Popritom nás napadlo aj pár vychytávok, ktoré sme neskôr na stránke vesmirnyprogram.sk použili.

Dohodli sme si hrubý koncept animácie vesmírnej sondy a určili pár základných funkcií, ktoré mal pripravovaný web obsahovať.

Všetko malo zatiaľ iba textovú podobu. Aby sme si veci vedeli konkrétnejšie predstaviť, začali sa kresliť skice a návrhy. Odborne sa im hovorí wireframy.

O náčrtkoch sa marketingové oddelenie porozprávalo s Websupport devel tímom. Preberali sme, aké máme technické možnosti a chalani ešte v ten deň začali programovať.

Vytvoril sa základný model webstránky. Keďže sme ešte nemali pripravenú finálnu grafiku, pre ilustráciu zatiaľ používame rôzne obrázky z internetu:

Grafiku sme kreslili ešte počas toho, ako sa web programoval. Od začiatku sme sa snažili, aby bola svieža, zábavná a tak trochu funky. Cieľom bolo vyhnúť sa technickému klišé a ukázať, že ani vesmír nemusí byť raketová veda. S animáciami fáz balóna nám pomáhalo malé talentované bratislavské štúdio.

Počas tvorby vzniklo aj pár dizajnov a 3D modelov, ktoré sa nikde nepoužili. Neskôr poslúžia ako podklady pre ďalšiu prácu. Tu je pár z nich:

 

Technické zaujímavosti

Stránka neobsahuje Flash

Z frontendových technológií sú použité iba HTML5, CSS3 a javascript

Scrollovanie „naopak“

Reverzné scrollovanie sme vytvorili efektom, pri ktorom sa obrazovka správa ako okno, cez ktoré sa pozeráte na animáciu.

Celá animácia balóna je synchronizovaná podľa pozície scrollbaru, čiže výšky v ktorej sa balón nachádza

Parallax – 3D efekt za pár minút

– Tento pseudo 3D efekt je čoraz populárnejší. V čom je jeho tajomstvo? Predstavte si, že cestujete napríklad autom. Objekty, ktoré sú pri vás blízko, sa zdanlivo pohybujú veľmi rýchlo. Ale napríklad kopce v diaľke sa “posúvajú” takmer nulovou rýchlosťou. Túto formu animácie sme použili pri prelete balóna cez oblaky

Tlak vzduchu pri lete hore sa ráta podľa vzorca

V zdrojovom kóde vzorec vyzerá takto:

$("#pressure").html(Math.round( 1013*Math.pow((1-((0.0065*height)/288.15)),
((9.80665*0.0289644)/(8.31447*0.0065)))) );

 

PHP framework

– Celý web vesmirnyprogram.sk náš devel tím postavil na obľúbenom PHP frameworku Yii. Hlavne kvôli napojeniu na WebSupport objednávku – API, cez ktorú budeme vesmírne domény registrovať