Zo zákulisia výroby vesmírneho webu


  • Zdieľať na Google+

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ť

Komentáre

  • Kajo
    Odpovedať
    Autor
    Kajo

    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

    • Matúš Slovák
      Odpovedať
      Autor
      Matúš Slovák

      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

      • Aidam
        Odpovedať
        Autor
        Aidam

        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!

    • Tomas
      Odpovedať
      Autor
      Tomas

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

  • Juraj
    Odpovedať
    Autor
    Juraj

    Na ipade to nejde..

    • Matúš Slovák
      Odpovedať
      Autor
      Matúš Slovák

      Dik za info, skusime zistit v com je problem.

  • Jozef
    Odpovedať
    Autor
    Jozef

    skvela praca … 🙂

  • Albert
    Odpovedať
    Autor
    Albert

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

    • WebSupport
      Odpovedať
      Autor
      WebSupport WebSupport

      Zrejme to bude tým škriatkom, lebo nám to funguje v pohode 🙂