http://wiadomosci-archeologiczne.pl

W pełni responsywna strona najstarszego polskiego pisma archeologicznego.

Strona zaprojektowana została z uwzględnieniem użytkowników odwiedzających ją przy użyciu urządzeń mobilnych takich jak tablety i telefony. Układ jest "płynny" i dopasowuje się do rozmiaru ekranu urządzenia lub okna przeglądarki. Strona wyświetlana jest zawsze z tego samego kodu HTML. Wygląd modyfikowany jest jedynie przy użyciu media queries w arkuszu stylów.

http://vetragames.com

Kolejna strona stworzona z wykorzystaniem CMS Wordpress 3.1. Znalazło się na niej wiele elementów przy- gotowanych specjalnie dla tego klienta.

Na zawierającej newsy, głównej stronie, istnieje możliwość "przypięcia" wybranych wpisów, tak że zawsze znajdą się na samej górze, niezależnie od paginacji i do- dawania nowych wpisów.

Strona z listą gier w postaci kafelków generowana jest automatycznie na podstawie wartości we "własnych polach", dołączonych do stron poświęconych poszczegól- nym grom. Tak samo, wyświetlane w pasku bocznym dodatkowe informacje o grze pochodzą z "własnych pól" poszczególnych stron. Tym sposobem wszystkie informa- cje i elementy strony związane z daną grą konfiguro- walne są z pojedynczego wpisu. Ponadto każda gra ma swój własny slideshow, odrębny od wyświetlanego dla pozostałych podstron.

Istnieje również możliwość ustawienia tła strony odrębnego dla każdej podstrony i każdego wpisu. W pasku bocznym wyświetlane są ostatnie wiadomości z dwóch kont na Twitterze. Menu główne i menu kontakowe umie- szczone na pasku bocznym są w pełni konfigurowalne z poziomu panelu administracyjnego. Archiwum strony zo- stało nieco ukryte i jest dostępne za pośrednictwem stron wyświetlających wyniki wyszukiwania dla wpisanych fraz i wybranych tagów lub kategorii.

http://moacube.com

Strona zbudowana dla Wielkiego Moa w oparciu o CMS Wordpress 3.1. Cała witryna przygotowana została od podstaw, zgodnie z wcześniej określonymi wymaga- niami i składa się z czterech części: strony głównej, zawierającej newsy; bloga; strony z wpisami poświę- conymi grom spod szyldu MoaCube oraz strony statycznej z informacjami o zespole. Wpisy do każdej części strony obsługiwane są przez CMS, z poziomu panelu admini- stracyjnego konfigurowalne są także menu główne i menu umieszczone w pasku bocznym strony. Całość zorga- nizowana jest tak, żeby praktycznie dowolne zmiany w treści strony dało się wprowadzić bez ingerowania w kod szablonu Wordpressa.

http://www.gamedecverse.com

Z powstaniem tej strony wiąże się nieco dłuższa 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. Zafascynowały mnie na tyle, że bliżej zaintere- sowałem się twórczością i osobą ich autora. Marcin okazał się być facetem po czubki uszu naładowanym nie- samowicie 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ę fajnych 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 pod- stawa 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 jednym ze spotkań z Marcinem przedstawiłem mu zarys swojego pomysłu – wyraził zainteresowanie, więc przygotowałem kilka projektów, prezentujących jak mogłaby wyglądać ta strona. Te również spotkały się z aprobatą i wtedy ruszyły właściwe prace.

Strona miała towarzyszyć promocji najnowszej części sagi o Gamedecu i w związku z przesuwaniem ter- minu premiery, została uzupełniona o elementy pierwotnie nie planowane. Dodany został odgrywany z zewnętrznego pliku spot reklamowy, który dopiero powstawał kiedy za- czynałem prace nad stroną. Robert Letkiewicz skompono- wał podkład muzyczny, dodałem także encyklopedię, ze stylizacją nawiązującą do filmu reklamowego.

Przez cały czas pracy nad stroną wstawiałem do niej różne usprawnienia, takie jak poprawki w interfejsie, przeniesienie adresów internetowych zawartych we flashu do zewnętrznych plików konfiguracyjnych czy optymaliza- cje kodowania filmu i muzyki. Uruchmiliśmy także angielską wersję strony.

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.

Strona pokazowa Magic Match

Przygotowana w niecałe trzy dni strona pokazowa dla Codeminion. Celem strony jest krótka prezentacja i przedstawienie w dwóch językach podstawowych cech gry Magic Match. Żeby ograniczyć przeklikiwanie się do małych podstron, przygotowałem na bazie materiałów graficznych z gry jedną stronę, urozmaiconą nieco efektami, za które odpowiada 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.php

Lekka strona informacyjna czasowej wystawy Do- lina Liwca u schyłku starożytności z Państwowego Mu- zeum Archeologicznego w Warszawie. Proste kształty, kolorystyka nawiązująca do oprawy plastycznej wystawy, czysto, elegancko i przejrzyście. Do wyświetlania galerii wykorzystałem ShadowBox.

Projekt estetyczny, nawiązujący do ekologii...

...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 tym samym nawigację. Strona w tej wersji funkcjonowała w latach 2006–2007.

Szef...

...pomimo początkowych obiekcji, dał się przeko- nać do pozaokrąglanego layoutu. Dzięki temu strona wy- różniała się wśród konkurencji, często korzystającej wtedy ze stylu nieodmiennie kojarzącego się z szablonami ofero- wanymi przez kilka popularnych serwisów. Nie byłem za- dowolony 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ło nieco kłopotliwe. 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.

Dostałem od niego pakiet zdjęć, w tym zakapturzo- nego 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 i strona ruszyła. Oczywiście nie obeszło się bez zgrzytania zębami z po- wodu IE6, ale po dokonaniu pewnych kompromisów, udało nam się sprawić, że użytkownicy tej przeglądarki mogli się cieszyć stroną prawie tak samo ładną i funkcjonalną.

Po około półtora roku owocnego korzystania z tego layoutu Łukasz zdecydował o kolejnej aktualizacji, lepiej oddającej klimat jego bieżącej twórczości.

Projekt graficzny...

...przygotowany w kilka dni do oferty dla SOS PZMOT. Wymagania obejmowały m.in. wykorzystanie ze- stawu czterech kolorów: czarnego, białego, żółtego i czer- wonego oraz elegancki i mocno biznesowy styl z dwiema częściami – dla klientów indywidualnych i dla klientów biz- nesowych.

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 wyglądem górnego menu i „okienek” zawierających elementy strony. Obie wersje uzupełnione zostały między innymi o zaproje- ktowane specjalnie dla tej strony ikonki.

Pozostało trochę miejsca na poprawki i ulepszenia, na przykład lepsze wykorzystanie kolorów do zwrócenia uwagi na wybrane elementy strony (w tym nawigacji), czy poprawienie czytelności ikonek. Projekt pozostał jednak we wstępnej postaci, ponieważ na tym etapie wybrana została oferta innej firmy.

Tak miała wyglądać...

...strona zrobiona dla znajomej kolegi – chodziło o szybkie wykonanie prostego portfolio dla wizażystki, zgo- dnie z dostarczonym projektem graficznym. Dostałem wszystkie niezbędne materiały i całość powstała w kilka wieczorów. Jedyne co nie podobało mi się w samym pro- jekcie, to wielkość elementów nawigacyjnych, ale był to drobiazg, dający się w każdej chwili poprawić kilkoma zmianami w arkuszu CSS.

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

Ten projekt był ciekawym i pouczającym doświad- czeniem (takim z kategorii „obyś żył w ciekawych cza- sach”) - nie miałem zielonego pojęcia jaka jest konfi- guracja serwera, jakie działają na nim usługi ani nawet czy działa na nim baza danych (to długa historia). Jedyne czego udało się dowiedzieć na pewno, to że jest na nim PHP. W efekcie strona, która powinna być oparta o bazę danych, zbudowana została z wykorzystaniem złożonego systemu include'ów w PHP i dziesiątek statycznych plików z treścią, tak żeby uratować możliwość wprowadzania zmian do elementów określających wygląd strony nieza- leżnie od właściwej zawartości. Nie jest to rozwiązanie idealne, wymaga nieco gimnastyki przy dodawaniu no- wych kategorii i podstron, ale działa.

Wygląd całości jest natomiast pochodną braku projektu graficznego, walki z Internet Explorerem w wersji 6 oraz umieszczenia wszystkich elementów strony w pli- kach. Ponieważ nie miałem projektu graficznego, do któ- rego dostarczenia zobowiązał się zleceniodawca, musia- łem poczynić pewne odgórne założenia co do układu strony. Z powodu rozjeżdżania się w Internet Explorerze tekstu (na stronie zrobione zostały ręczne przenoszenia) i gubiącymi się w nim divami, zdecydowałem się na wyko- rzystanie tabel do budowy layoutu. Większość treści strony i tak przedstawiona jest w postaci tabelarycznej, więc nie była to wielka cena za ujednolicenie wyglądu we wszystkich przeglądarkach.

W końcu przyszedł czas wstawiania strony na serwer, a nadal nie dostałem projektu graficznego. Usta- wiony na sztywno w tabelach layout nie dał dużego pola manewru, a jego zupełna zmiana pociągnęłaby za sobą konieczność edytowania od nowa kilkuset plików – między innymi ze względu na ręcznie wstawiane przenoszenia wyrazów – więc efekt końcowy jest kompromisem łączą- cym chęci z możliwościami.

Zbudowanie całej strony kosztowało wiele pracy. Musiałem zająć się nie tylko kodem, ale także obejść brak bazy danych, wstawić w tabele ponad setkę spisów treści i przygotować wszystkie elementy graficzne, łącznie ze skanowaniem okładek i ilustracji, jeśli nie były dostępne ich elektroniczne wersje.

Mimo trudności projekt mogę zaliczyć do udanych – strona dobrze spełnia swoje zadanie.

Tak wygląda moje poprzednie portfolio.

Podczas prac nad wyglądem strony firmowej dla Xortec przygotowałem kilka projektów z użyciem przezro- czystości. W zrealizowanym projekcie nie zostały wyko- rzystane, jednak pomysł spodobał mi się na tyle, że przy- gotowałem w oparciu o niego własne portfolio.

Do rozwiązania było niestety kilka problemów po- wodowanych przez przeglądarkę Internet Explorer 6. IE6 nie potrafi wyświetlać poprawnie 24-bitowych plików .png z kanałem przezroczystości (w których zapisane były wszy- stkie przezroczyste elementy graficzne strony) - tu z po- mocą przyszedł JavaScript i skrypt 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 poprawna z punktu widzenia standardów strona wyglądała w IE6 i w Operze. Po pewnych zmaganiach z CSS'em (poskładanie zaokrąglonych rogów bez użycia tabelek wymagało trochę gimnastyki) przygotowałem 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.

To była mała strona domowa, stworzona na po- trzeby mojej bieżącej działalności w różnych miejscach. Szukałem dla niej 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. Bezcelowe było stawianie skomplikowanego systemu, tylko po to, żeby wyrzucić z niego większość zbędnych komponentów, zniechęcała mnie także perspektywa grzebania się w kodzie w celu zbudowania własnej skórki. Ostatecznie mój wybór padł na b2evolution.net - CMS po- dobny do WordPress'a, oferujący jednak w podstawowej wersji kilka interesujących rozwiązań, między innymi możliwość zbudowania kilku wersji językowych strony. Dodatkowym atutem była możliwość łatwego dostoso- wania do moich potrzeb jednej ze skórek dostępnych na stronie b2evolution. Niestety b2evo z czasem zaczęło co- raz bardziej odstawać od WordPress'a, kolejne aktuali- zacje nie miały już dobrych polskich tłumaczeń, a przygo- towanie własnego przekraczało moje ówczesne możli- wości (ponad 13.000 stringów do zidentyfikowania i prze- tłumaczenia). Po niecałych dwóch latach strona w tej po- staci przestała funkcjonować.

Photoshop, Illustrator, InDesign

Grafiki przygotowane na Prima Aprilis dla forum lite- rackiego Mirriel.net
Skórka forum, nazwana przez ekipę "Sheep vision" powstała w oparciu o skórkę "Green Vision".

Kłódkę, widoczną na drugim obrazku, narysowałem w całości w Photoshopie, w oparciu o zdjęcie.

Forume sygnaturki przygotowane dla ekipy i uży- tkowników zaprzyjaźnionego serwisu. Część z nich to pre- tekst do przećwiczenia GIMPa. Niby działa, ale jakoś nadal go nie lubię.

Żart dla Rafała Dębskiego - nowego redaktora na- czelnego czasopisma Science Fiction Fantasy i Horror. Początkowo miała to być krótka hisotryjka, na 2 godziny pracy, ale w trakcie jakoś się całość rozrosła, tak że za- miast jednego, produkcja tego cuda zajęła kilka wieczo- rów. Ubaw był na koniec, więc było warto ;).