Preskočiť na obsah
Kategórie
Technológie Zákulisie

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ť

9 odpovedí na “Zo zákulisia výroby vesmírneho webu”

Zaoberali ste sa aj otazkou, ze ako to bude s podporou v starsich prehliadacoch? Zaujima ma to, lebo urcite to musi riesit kazdy dizajner. Ci sa na starsie prehliadace uplne vykaslat, zvolit nejaku strednu cestu alebo zvolit aj ich podporu. vdaka

Odpovedať

Pri starsich browseroch by urcite nemala byt obmedzena zakladna funkcionalita alebo rozbity layout. Vo ws sa snazime aby bola ochudobnena maximalne grafika (oble rohy, css gradienty..)
Momentalne by som uz neoptimalizoval na ie6 ani 7

Odpovedať

Suhlasim. IE6 je vonku z hry, pokial teda nejde o front-end pre banky, IE7+ sa vsak da osetrit napr. http://css3pie.com/. Kazdopadne skvela praca!

Odpovedať

IE6 sme uspesne vysktli zo zoznamu nedavno tiez. stacilo. aj ked ani nie kvoli layoutom, ale konecne kvoli PNG-ckam 🙂 IE7 zatial v pohode…

Odpovedať

Dik za info, skusime zistit v com je problem.

Odpovedať

Ono to nejde ani na PC. Asi nejaký dočasný škriatok 🙂

Odpovedať

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *