http://www.gamedecverse.com

Z powstaniem tej strony wiąże się długa i złożona historia. Wszystko zaczęło się od kapitalnej grafiki Marcina Jakubowskiego, inspirowanej twórczością Marcina Przy- byłka. Chociaż nie, właściwie to wszystko zaczęło się od samego Marcina, a konkretniej od jego opowiadań o Ga- medecu. Opowiadań, które zafascynowały mnie na tyle, że bliżej zainteresowałem się twórczością i osobą autora. Marcin okazał się być facetem po czubki uszu naładowa- nym niesamowicie pozytywną energią, człowiekiem który zawsze ma coś fascynującego do powiedzenia. Ma też wyraźną wizję tego, co chce osiągnąć, i konsekwentnie dąży do jej zrealizowania, pociągając za sobą masę faj- nych ludzi. Ja też dałem się porwać.

Wracając do obrazu: kiedy zobaczyłem go po raz pierwszy, pomyślałem że idealnie nadawałby się jako podstawa multimedialnej strony promocyjnej Gamedeca. Coś po prostu "zaskoczyło" i mniej więcej wiedziałem co mógłbym zrobić, mając do dyspozycji tę grafikę. Na jed- nym ze spotkań z Marcinem przedstawiłem mu zarys swojego pomysłu – wyraził zainteresowanie, więc przygo- towałem kilka projektów-wizualizacji, prezentujących moją wizję całości. Te również spotkały się z aprobatą – wtedy ruszyły prace nad stroną.

Mniej więcej w tym samym czasie powstawał spotem reklamowym, który miał nieoficjalnie towarzyszyć promocji najnowszego tomu sagi. Wydawnictwo postano- wiło włączyć ten spot do oficjalnej promocji, ale wpierw musiał oczywiście zostać ukończony. Data premiery za- częła się z różnych przyczyn przesuwać i prace nad stro- ną stały się na tyle zaawansowane, że Marcin zdecydo- wał o włączeniu jej do akcji promocyjnej związanej z pre- mierą nowego tomu. Całość znowu zaczęła się opóźniać i w rezultacie strona trochę się rozrosła ponad to, co było pierwotnie planowane. Dodany został spot i podkład dźwiękowy, nieco rozbudowane i zmienione niektóre infor- macje, wprowadzane poprawki i korekty...

Zapraszam do zapoznania się z efektem mojej pracy na http://www.gamedecverse.com.

http://www.magdalenamalek.pl

Minimalistyczna strona utrzymana w stonowanej kolorystyce. Jednokolumnowy układ treści, dużo światła oraz delikatne roślinne motywy składają się na czysty i elegancki wygląd. Pozazawodowa część strony została oparta na tym samym projekcie graficznym, jednak posia- da własny, odrębny layout ze zmienioną kolorystyką i nagłówkiem. Karuzela z galerii zdjęć napędzana jest przez biblioteki jQuery.

http://www.e-learn.waw.pl

[...]

3.1. Cel badania

Celem badania, będącego częścią tej pracy, jest po- równanie wpływu różnych metod przedstawiania informacji na efektywność szkolenia. Analiza różnic między szkole- niem zawierającym wyłącznie treść w postaci tekstowej, a szkoleniami zawierającymi elementy multimedialne w po- staci ilustracji i animacji, ma wskazać najbardziej efektywną metodę wizualizacji informacji w szkoleniach e-learning- owych. Wynikiem przeprowadzonej analizy ma być także przedstawienie zalet i wad stosowania wybranych metod wizualizacji informacji.

[...]

3.5.2. Konstrukcja aplikacji

Program składa się z trzech głównych komponentów: szkolenia wybieranego losowo spośród trzech wersji, testu sprawdzającego stopień przyswojenia wiedzy oraz kończą- cej badanie ankiety (Ryc. 3.5.). Pierwotnie każdy kompo- nent miał być stworzony oddzielnie i dynamicznie importo- wany do głównego programu, między innymi ze względu na różnice w rozmiarach poszczególnych wersji szkolenia. W trakcie pracy nad aplikacją pojawiły się jednak pewne trudności natury technicznej. Chodziło między innymi o za- pewnienie losowości wyboru wersji szkolenia, poprawne zbieranie wyników (i możliwość jednoznacznej ich identy- fikacji), a także o poprawne działanie interfejsu. Wcześniej opracowane przeze mnie rozwiązania okazały się nieade- kwatne i ostatecznie konieczne stało się ładowanie całej aplikacji jeszcze przed rozpoczęciem badania.

Dzięki włączeniu wszystkich komponentów do jedne- go programu, łatwa stała się jednoznaczna identyfikacja każdego rozpoczęcia badania: jedynym sposobem pono- wnego podejścia do badania jest załadowanie całej aplikacji z serwera, a ID badania oraz adres IP uczestnika badania zapisywane są do bazy dopiero po uruchomieniu aplikacji. Konieczność ponownego załadowania całej aplikacji ma też za zadanie zniechęcić do wylosowania metodą prób i błędów szkolenia w wersji bardziej odpowiadającej badanemu.

Nie ma też możliwości swobodnego przemieszczania się między poszczególnymi etapami badania. Zakończenie każdego etapu powoduje zapisane zebranych w nim danych i przejście do następnego, bez możliwości powrotu. Jedy- nym sposobem dotarcia do wcześniejszych etapów jest po- nowne załadowanie i uruchomienie całej aplikacji.

[...]

3.6.1. Interfejs

Interfejs aplikacji jest jednolity i wspólny dla wszyst- kich wersji szkolenia i wszystkich etapów badania. Między innymi ze względu na specyfikę samego badania, interfejs utrzymany jest w stonowanej, jasnoszarej kolorystyce z wyraźnymi, ale nie odwracającymi uwagi elementami nawigacyjnymi – interfejs ma spełniać jedynie funkcje użytkowe, tak żeby nie wpływać bezpośrednio na odbiór elementów graficznych, zawartych w treści szkolenia.

Więcej o tym projekcie przeczytać można w mojej pracy magisterskiej.

http://www.pmawystawy.pl/liwiec/index.html

Prosta strona informacyjna czasowej wystawy "Do- lina Liwca u schyłku starożytności" z Państwowego Muze- um Archeologicznego w Warszawie. Proste kształty, kolo- rystyka oparta o kolorystykę oprawy plastycznej wystawy. Czysto i elegancko.

Estetycznie, ekologicznie...

...i w kolorystyce logo firmy Scandinavian Bio Hea- ting Systems. Żywe kolory, detale takie jak wstęga menu rozciągająca się na całą szerokość strony, delikatny wzór w tle i grafiki określające układ treści – wszystko to składa się na ciepły i przyjazny wizerunek, idealny dla firmy zaj- mującej się ekologicznymi systemami grzewczymi. Menu wzbogacone zostało dodatkowo o ilustracje towarzyszące każdej z kategorii i podkategorii, ułatwiając nawigację oraz poprawiając i tak już dobre wrażenia estetyczne. Niestety z bliżej nieznanych przyczyn firma wróciła do starej, przestarzałej wersji strony.

Szef marudził...

...że wszędzie wciskam krągłości i potem nie ma tego jak poskładać, ale dał się przekonać do krągłego layoutu. Dzięki temu strona wyróżniała się wśród konku- rencji często korzystającej wtedy ze stylu nieodmiennie kojarzącego się z szablonami oferowanymi przez kilka popularnych serwisów. Nie byłem zadowolony z psujących symetrię menu i kolumny sklepu internetowego, ale tego już nie udało mi się przewalczyć.

Strona Orbita...

...powstawała powoli, momentami komunikacja z Łukaszem i wydobycie konkretów były nieco utrudnione. Strona powstała kiedy bezpowrotnie i nieodwołalnie padł serwer zawierający poprzednią. Łukasz Orbitowski tworzył wtedy w miejskich klimatach - mniej więcej w tym czasie powstawał „Święty Wrocław” i osadzone w blokowisko- wych realiach opowiadania (tak Łukasz napisał o zmianie kończącej funkcjonowanie mojego projektu).

Dostałem od niego pakiet zdjęć, w tym z wizerun- kiem zakapturzonego autora we własnej osobie, które sta- ły się podstawą projektu graficznego. Do tego dołożyłem jeszcze logo, narysowane według wskazówek Łukasza, strona ruszyła i funkcjonowała w tej postaci przez jakieś półtora roku. Oczywiście nie obeszło się bez zgrzytania zębami z powodu IE6, ale po dokonaniu pewnych kompro- misów, udało nam się sprawić, że użytkownicy tej przeg- lądarki mogli się cieszyć stroną prawie tak samo ładną i funkcjonalną.

Projekt graficzny...

...przygotowany został w kilka dni do oferty dla SOS PZMOT. Wymagania obejmowały wykorzystanie zestawu czterech kolorów: czarnego, białego, żółtego i czerwone- go. Styl strony miał być elegancki i mocno biznesowy z dwiema częściami – dla klientów indywidualnych i dla kli- entów biznesowych.

W oparciu o te wytyczne opracowałem dwie wersje layoutu – ciemna dla klientów indywidualnych i jasna dla klientów biznesowych, połączone wspólnym stylem górne- go menu i „okienek” zawierających elementy strony. Obie wersje uzupełnione zostały między innymi o zaprojekto- wane specjalnie dla tej strony ikonki.

Oczywiście jest jeszcze miejsce na poprawki i ule- pszenia, choćby lepsze wykorzystanie kolorów (na przy- kład w elementach nawigacyjnych), ale propozucja innej firmy przeszła do daleszego etapu i nasz projekt pozostał we wstępnej postaci.

Tak miała wyglądać...

...strona dla koleżanki znajomego fotografa – chodziło o szybkie wykonanie prostego portfolio, zgodnie z dostarczonym projektem graficznym. Całość powstała w kilka wieczorów – jedyne, co mi się nie podobało w sa- mym projekcie, to wielkość elementów nawigacyjnych, ale był to drobiazg, dający się w każdej chwili poprawić. Nies- tety w międzyczasie właścicielka portfolio zwróciła się do innego znajomego i koniec końców ten projekt nigdy nie trafił na serwer.

http://www.pma.pl/wydawnictwa/

Ten projekt był ciekawym doświadczeniem (takim z kategorii „obyś żył w ciekawych czasach”) - nie miałem zielonego pojęcia jaka jest konfiguracja serwera, jakie działają na nim usługi ani nawet czy działa na nim baza danych (długa historia). Jedynego czego udało się dowie- dzieć na pewno, to że jest na nim PHP. W efekcie strona, która powinna być oparta o bazę danych, zbudowana zos- tała z wykorzystaniem złożonego systemu include'ów w PHP i tony statycznych plików z treścią, tak żeby urato- wać możliwość wprowadzania zmian do różnych elemen- tów strony niezależnie od zawartości. Nie jest to rozwią- zanie idealne, wymaga nieco gimnastyki przy dodawaniu nowych kategorii i podstron, ale działa. Natomiast wygląd całości jest pochodną braku projektu graficznego, który miał zostać dostarczony przez zleceniodawcę, walki z In- ternet Explorerem w wersji 6 oraz umieszczenia wszyst- kich elementów strony w plikach. Ponieważ nie miałem projektu graficznego, który ciągle był obiecywany, musia- łem poczynić pewne odgórne założenia, Internet Explorer przyczynił się do zbudowania strony w oparciu o tabele – nie pamiętam już w szczegółów, ale olbrzymim proble- mem było sprawienie, żeby strona wyglądała tak samo we wszystkich przeglądarkach. Najwięcej kłopotów było z roz- jeżdżającym się tekstem (na stronie zrobione zostały rę- czne przenoszenia) i gubiącymi się divami (stąd tabele zamiast divów posłużyły do budowy layoutu). W końcu przyszedł czas wstawiania strony na serwer, a projektu graficznego, jak nie było, tak nie było. Ustawiony na sztyw- no w tabelach layout nie dał dużego pola manewru, a jego zupełna zmiana pociągnęłaby za sobą konieczność edyto- wania od nowa kilkuset plików, więc efekt końcowy jest kompromisem łączącym chęci z możliwościami… Mimo trudności projekt mogę zaliczyć do udanych - strona dob- rze spełnia swoje zadanie.

Tak wygląda moje stare portfolio.

Podczas prac koncepcyjnych nad wyglądem strony firmowej dla Xortec przygotowałem kilka projektów z wyko- rzystaniem przezroczystości. W zrealizowanym projekcie nie zostały użyte, jednak pomysł spodobał mi się na tyle, że przygotowałem w oparciu o niego własne portfolio. Do rozwiązania było kilka problemów - pierwszy i podstawowy to Internet Explorer 6. Właściwie to był jedyny problem jako taki. IE6 nie potrafi wyświetlać poprawnie 24-bitowych pli- ków .png z kanałem przezroczystości (w których zapisane były wszystkie przezroczyste elementy graficzne strony) - tu z pomocą przyszedł javascript i pngfix. Ponadto IE6 ma dość luźny stosunek do standardów: inaczej interpretuje marginesy, inaczej wyświetla czcionki, nie radzi sobie z „pływającymi” elementami… Tutaj można zobaczyć jak IE6 powoduje płacz i zgrzytanie zębów. Po pewnych zma- ganiach z CSS'em udało mi się przygotować dwukolum- nowy szablon strony z elementami nawigacyjnymi, zawie- rającymi przezroczystą grafikę. Do wykorzystania na nor- malnej stronie całość wymagałaby gruntownej przebu- dowy, ale w moim portfolio rozwiązanie to sprawdziło się całkiem nieźle.

Tak kiedyś wyglądała moja strona.

Szukałem prostego CMS'a, pozwalającego wsta- wiać i obsługiwać wielojęzyczną treść. Strona miała być prosta, więc z góry odrzuciłem rozwiązania typu Joomla czy Drupal - zbyt rozbudowane jak na moje potrzeby. Zdecydowanie nie miałem ochoty uczyć się od zera rozbu- dowanego systemu, tylko po to, żeby wyrzucić z niego większość zbędnych komponentów, nieco odstraszała mnie także perspektywa grzebania się w kodzie w celu zbudowania własnej skórki. Ostatecznie wybór padł na b2evolution.net - CMS podobny do WordPress'a, oferujący jednak "z marszu" kilka interesujących rozwiązań, między innymi możliwość zbudowania kilku wersji językowych strony. Dodatkowym bonusem była możliwość łatwego przerobienia jednej ze skórek, dostępnych na stronie b2evolution, i dostosowania jej do moich potrzeb. Niestety b2evo z czasem zaczęło coraz bardziej odstawać od WordPress'a, a kolejne aktualizacje nie miały już dobrych polskich tłumaczeń. Po jakichś dwóch latach strona w tej postaci przestała funkcjonować.