Wiecie kto odkrył taby? Opera? Nie. Mozilla? Nie. Microsoft!

A przeczytać możemy o tym w kolejnym, patetycznym jak zawsze, odcinku telenoweli pod tytułem IE7.

Tylko bali się, że taby będą przeszkadzać użytkownikowi…

Miałem pisać o ostatnim skandalu związanym z meczem Kujawiak Włocławek - ŁKS Łódź, przerwanym w 64 minucie przy stanie 1:0 dla Kujawiaka, po odesłaniu czerwonymi kartkami 4 piłkarzy ŁKS na ławkę, ale pomyślałem, że najlepszy komentarz to tekst z Nowego Pompona:

Sceptycznie o całej sprawie wypowiedział się senator Grzegorz Lato, który niedawno pomagał w znalezieniu wróżki mającej zdjąć urok z siedziby Polskiego Związku Piłki Nożnej. „Zamówiliśmy w końcu taką jedną”, opowiada były piłkarz reprezentacji Polski. „Odczyniła uroki, wzięła trzy stówki, do wieczora był spokój, a rano znowu przyszedł Listkiewicz”, powiedział Lato.

Piszę właśnie konspekt promocji nowego produktu. Jednym z kanałów promocji są gry komputerowe.

Ktoś może powiedzieć - tylko nie gry! w nich nigdy nie było reklam!

Jak by to powiedzieć po angielsku (wybaczcie, nadmiar słow w stylu “branding”, “publicity” itp) - quite right. Dawno temu była gra chociażby Colgate. A pamiętacie co piła Super Żaba? (Super Frog). Tak! Lucozade!

Patrząc obiektywnie, nawet chodnik może być nośnikiem reklamy. RSS’y są już skażone. Gry komputerowe to kolejny etap. Serio.

Jeden wstęp

Dawno chciałem o tym napisać. Teraz, dzięki Cameronowi Moll, postanowiłem zrealizować tę chęć.

Pablo Picasso, twórca, którego dzieła były wystawiane w Luwrze za jego życia, ma unikalny wpływ na świat sztuki. Jest idolem i wzorem - inspiracją dla wielu twórców na całym świecie. Zatem dlaczego jest uważany za autora słów “Dobrzy artyści kopiują, wielcy - kradną”?

To prawda. Faktycznie Picasso wypowiedział tę kwestię, lub raczej - od jego śmierci wszyscy wierzą, że to on jest jej autorem.

Jeśli ktoś poszuka tego cytatu (w oryginale - “Good artists copy, great artists steal”) na google, znajdzie całą masę interpretacji i opinii z zakresu “co autor miał faktycznie na myśli”.

Spróbujmy sprawdzić jedną z nich.

Dwa pytania

Zanim przejdziesz do czytania dalszej części tego artykułu, zdecyduj się na jedną z dróg.

Czy tworzenie stron internetowych to dla Ciebie:

• pasja, uczucie spełnienia, wieczne eksperymentowanie (typ: artysta)
• pasja, ale również praca, sposób na życie (typ: artysta, ale częściej wyrobnik)

Jeśli wybrałeś pierwszą odpowiedź - możesz darować sobie czytanie dalszej części artykułu. Zapewne jest tu dla Ciebie coś wartościowego. Równie dobrze nie ma tu nic.

Jeśli wybrałeś drugą opcję - miłej lektury.

Trzy poziomy tworzenia

Dla lepszego zrozumienia do czego zmierzamy, posłużymy się prostymi przykładami i opisami.

Poziom pierwszy: Nie twórz, kopiuj

Odkrywanie koła na własną rękę na pewno jest fascynujące, ale czasochłonne i w wielu przypadkach - całkowicie zbędne.

Oczywiście, jestem jak najbardziej “za” tworzeniem oryginalnych koncepcji, jednak dla młodych, początkujących, lepszym wyborem może być kopiowanie gotowych rozwiązań i próba dodania do nich czegoś nowego. Poprawienia ich.

W końcu jednym z najlepszych sposobów nauczenia się czegoś jest… pisanie ściąg.

Z prywatnych obserwacji siebie i swojego postępowania zauważyłem, że kiedy nie wiem, nie mam pomysłu, jak coś wykonać - preferuję poszukać czegoś gotowego na sieci. Końcowy efekt to bardzo często własna interpretacja kilku/kilkunastu istniejących rozwiązań.

Po prostu, jeśli zaczynasz karierę w tej branży (ale też w każdej innej), z reguły nie masz warunków jak Michał Anioł, który 4 lata malował freski w kaplicy Sykstyńskiej. Czasem są to 4 miesiące, z reguły są to 4 tygodnie i mniej.

Nie ma tu tak naprawdę miejsca na oryginalność. To bajka niespełnionych marzycieli, którzy giną jak muchy w zetknięciu z brutalną rzeczywistością.

Biorąc pod uwagę ograniczone budżety i napięte terminy - nie ma tu miejsca na czasochłonną innowację - kopiowanie jest na porządku dziennym.

Zaskakująco, kopiowanie rozwiązań ma swoje zalety. Jest nimi spójność a co z tym się wiąże - łatwość obsługi przez użytkownika. To nie przypadek, że wielkie portale i strony o podobnej tematyce, mają także podobne systemy nawigacji.

Poziom drugi: Okradnij siebie

Tak tak, zanim zaczniesz grzebać po sieci, sprawdź swój dysk twardy. Sprawdź ostatnio wykonane szablony. Z reguły na naszych dyskach zalegają setki układów i pomysłów, które zostały odrzucone na jakimś etapie, bądź po prostu nie wyszły poza naszą wyobraźnię i zeszyt ze szkicami.

Warto rzucić na nie okiem, gdyż o ile mogły nie pasować do “nowoczesnego portalu dla młodzieży”, to mogą, po kilku przeróbkach, zostać wykorzystane w obecnie realizowanym projekcie.

Poziom trzeci: Kradnij z tajnych źródeł

Albert Einstein powiedział, że “Tajemnica kreatywności tkwi w tym, aby wiedzieć, jak dobrze ukryć swoje źródła”. Najlepszą metodą ukrywania swoich źródeł jest korzystanie z takich, które już są ukryte (nieznane/mało znane).

Chciałbym w tym miejscu wyjaśnić, że nie chodzi tu o dosłowne kopiowanie piksel w piksel, literka w literkę nieznanych układów. Chodzi raczej o przeglądanie “kreatywnego złomu” jaki nas otacza - pism, gazet, stron internetowych, gier komputerowych i odnajdywania w nich pomysłów, inspiracji, nie zrealizowanych projektów, które mogą nam posłużyć za bazę w naszych projektach.

Cztery zdania wyjaśnienia

Artykuł taki jak ten nie powinien być opublikowany bez podsumowującego i wyjaśnienia.

Google na tę chwilę indeksuje ponad 8mld stron - w moim przekonaniu niemożliwością jest, by wśród nich dowolny design nie powtórzył się przynajmniej raz. Ktoś dobry z matematyki może sobie nawet wyliczyć jakie jest prawdopodobieństwo takiego zdarzenia, oraz na ile sposobów można powtórzyć dowolny układ.

Nie oznacza to jednak, że można bezmyślnie okradać innych twórców z ich pracy i czasu. Podoba się coś - spróbuj to powtórzyć swoimi metodami.

Kiedy Apple, po wprowdzeniu iMaców, zaprezentowało swój nowy wystrój, znalazło się wielu naśladowców. Jedni pomyśleli, doskonale dostosowując ten styl do swoich potrzeb - Mail Frontier. Inni… no cóż - uSight.com.

Po piąte - drobna rada

Podglądaj, myśl, kombinuj i rób najprościej jak potrafisz. Nie sil się na techniki i technologie o których nie masz pojęcia. Z czasem dojdziesz do wszystkiego.

Szóste, zakończenie

Jak wspomniałem na początku, do skończenia tego artykułu, bądź raczej - do poruszenia tej tematyki, zainspirował mnie Cameron Moll artykułem pod tym samym tytułem - Good Designers Copy, Great Designers Steal.

Polecam ten artykuł, zwłaszcza, że wiedza zawarta w tym co napisałem i przetłumaczyłem, jest podparta przykładami z życia i twórczości Camerona oraz jego firmy.

Nie widziałeś nigdy IE5/Mac? Zobacz więc!(Flash)

.. a Audioscrobbler to wypiął się tylko na mnie, czy on tak teraz ogólnie ma?

O! nie jestem człowiekiem: huczy noc nade mną.
Płomień mój jak anioły odchodzące w ciemność.
Ogromne, całe w blasku sine piętna czasu
jak odrzucone w wieczność pokolenia głazów.
O! nie jestem człowiekiem. Koła nieboskłonów
trzeszcząc suną przeze mnie ziemią ocaloną.
Ocaloną? Czas taki: tak dawno; już nie wiem,
już nie pomnę, kto ziemię tak odcisnął w niebie,
wiem tylko żem zgubiony, o, ten czas bez ludzi
to bez twarzy zwierciadło, które z wolna studzi
jakieś płomienie mroczne, kształty w siebie zbiera,
i ja w nim bez odbicia, i ja w nim umieram.
O,, dajcie mi spojrzenie, przywróćcie choć przyśpiew
żuków w lwiej paszczy, choć do oczu liście
mi przyłóżcie, bym poznał jeden nerw nie ciemny
i jeden kolor żywy i nie nadaremny.
Nie ma ludzi. To tylko tragiczność tak krzepnie
w pomniki fantastyczne rosnące beze mnie
i poza mną rosnące. Wzrok ich jak zasłona
i za grzech pierworodny odjęte ramiona.
O, daj mi ten grzech poznać. Nikt na mnie nie woła.
O, daj mi choć szatana poznać, lub mi daj anioła.
0, wróć mi czyn przedwieczny lub milczenie wróć mi,
abym człowiekiem chodził między tymi ludźmi,
których pamiętam jeszcze i których ujrzałem
w widzeniu ostatecznym. Niech się staną ciałem.
A ja spośród ciemności widzę tych, co niosą
swoje stopy przez ogień i przechodzą boso
po tych zgliszczach pożogi, którą sami wznieśli
i której na ramionach wątłych [nie] unieśli.
A ja spośród ciemności tych widzę, co bluźnią,
bo na zmartwychpowstanie przybyli za późno,
i tych, co ściąwszy serce czyjeś jak kwiat ciszy
płaczą z ognistej studni, gdzie ich nikt nie słyszy.
I czuję na swych oczach dłonie potępione,
co niewiarę i ciemność na dzieci włożyły
i tych, którym starczyło do pół-zbrodni siły,
a cały grzech przez wieki niosą na ramionach.
A ja spośród ciemności. 0, ja nie człowiekiem,
ja tylko głosem bożym zbawionym od piekieł,
któremu - odciętemu od ust wzdętych nieba -
czynów boskich nie stało, a ludzkich nie trzeba.

Pozdrawiając IDEall’a i dziękując za baczynski.art.pl

Niedawno wspominałem o mojej fascynacji płytką Noona - Bleak Output. Trochę później dostałem drugą płytkę tego autora - “Gry Studyjne”.

Noon o płycie: “Gry studyjne” to kolaż prawie 400 urywków muzycznych pozyskanych wyłącznie ze starych płyt analogowych, w zdecydowanej większości polskich. To również mix klasycznych, hip-hopowych technik tworzenia dźwięków z nowoczesną, swobodnie interpretowaną rytmiką. “Gry studyjne” to przede wszystkim mix emocji, z jednej strony destrukcyjnych, ponurych i biograficznych a z drugiej prostych i dobrych. Mix rozpaczy i nadziei, w ambitnych założeniach muzyka totalna.”

Sam powiem, że już miałem pisać, że ta płytka bardzo mi nie przypadła do gustu - może właśnie z powodu tej “swobodnie interpretowanej rytmiki” - ale wsłuchałem się w utwór Satori a następnie Full Level i muszę stwierdzić, że wciąż jestem pod wrażeniem. Pod względem techniki, kombinacji i kompozycji przypomina mi bardzo postać znaną z amigowej Sceny komputerowej - Lukasa Nystranda, znanego jako Mortimer Twang.

Satori jest niesamowite. Klimatem przypominające nieco 8bitowe podkłady muzyczne dla dem. Niemniej, obiektywnie patrząc, tylko te dwa kawałki z całej płyty przypadły mi do gustu. Reszta jest mocno “nie moja”. Nie znaczy to, że zła. Ot, kwestia gustu. Na pewno warto posłuchać. Zwłaszcza Satori.

Dzięki takiemu jednemu, któremu w tym miejscu dziękuję, stałem się posiadaczem płytki Bleak Output Noon’a.

Płytka, która przywodzi mi na myśl demo dysk i klimaty Jacka Dojwy z Aural Planet/Husky, jest wyśmienita. Delikatna, kontemplacyjna, wyciszona. Absolutnie, klasa sama w sobie.

Diabeł tkwi w szczegółach

Przedstawmy zatem zarys tego sposobu: za pomocą podstawowych metod DOM, wkleimy tabele tam, gdzie są potrzebne. W naszym przypadku, dla zobrazowania tej metody, skorzystamy z tego przykładu.

Najpierw, tworzymy kod strukturalny:

• <div id="Page">
• <h1 class="Title">Nazwa firmy</h1>
• <ul class="Tools">
• <li>
• <a href="#">Home</a>
• </li>
• <li>
• <a href="#">Site Map</a>
• </li>
• <li>
• <a href="#">Szukaj</a>
• </li>
• <li>
• <a href="#">Kontakt</a>
• </li>
• </ul>
• <div class="Content">
• <p>
• Lorem ipsum etc …
• </p>
• </div>
• <ul class="Links">
• <li>
• <a href="#">Link</a>
• </li>
• <li>
• <a href="#">Jakiś Link</a>
• </li>
• <li>
• <a href="#">Inny Link</a>
• </li>
• <li>
• <a href="#">Link, po prostu Link</a>
• </li>
• </ul>
• </div>

Następnie, wklejamy naszą tabelę:

• var page = document.getElementById("Page");
• var pageItems = new ClassNameBag(page);
• var pageTable = new LayoutTable(2, 2);
• pageTable.appendChild(1, 1, pageItems.Title);
• pageTable.appendChild(2, 1, pageItems.Tools);
• pageTable.appendChild(1, 2, pageItems.Content);
• pageTable.appendChild(2, 2, pageItems.Links);
• page.appendChild(pageTable.node);

A na koniec, korzystamy z CSS by uzupełnić kompozycję. Wygląda prosto?

Prześledźmy zatem, punkt po punkcie, co robimy. Linia 1 kodu jest chyba dość oczywista: wydobywamy z kodu element o id “Page”.

Linia 2 to tworzenie ClassNameBag, które tak naprawdę nie ma znaczącego wpływu na przedstawianą technikę ale jest użyteczne i ułatwia panowanie nad wszystkim. Tworzy obiekt dla każdego elementu potomnego, który następnie można łatwo wywołać. Dajmy na to, możemy dostać się do <ul class="Links"> za pomocą wskaźnika pageItems.Links.

Linia 3 to linia gdzie zaczyna się magia: inicjowany jest nowy obiekt nazwany LayoutTable. LayoutTable “zawiera” tabelę “do wstrzyknięcia”. Jego składnia wygląda następująco: LayoutTable(ilośćKolumn, ilośćWierszy [, nazwaKlasy]). ilośćKolumn i ilośćWierszy jest oczywiste - ustala, ile wierszy i kolumn będzie w naszej “tabeli”. nazwaKlasy to parametr opcjonalny, który pozwala na dodanie dodatkowej klasy dla tworzonej tabeli (domyślnie ma “Layout”).

appendChild(kolumna, wiersz, wskaźnik) jest podobne do typowej metody element.appendChild z wyjątkiem tego, że ustala dokładne położenie elementu w tabeli. Linie od 4 do 7 rozkładają elementy na swoich pozycjach w dwuwymiarowej siatce.

Na końcu, w linii 8, “doklejamy” naszą wirtualną tabelę z powrotem do elementu Page. Element LayoutTable zawiera jeden wskaźnik, który jest zarazem wkaźnikiem DOM tabeli zbudowanej z powyższego kodu. W tym miejscu wklejanie tabeli jest zakończone, staje się ona częścią DOM strony.

By ułatwić stylowanie, każdy wiersz posiada nazwę klasy “ry”, gdzie r = row a y to pozycja w wierszu (”r1″ i “r2″ w naszym przykładzie), każda kolumna posiada podobną klasę “cy” (”c1″ i “c2″ u nas). Ta prosta sztuczka ułatwia nam kontrolę nad prezentacją naszej tabeli. Na przykład, “table.Layout tr.r1″ wybierze cały wiersz “r1″, “table.Layout td.c2″ wybierze całą kolumnę 1 a “table.Layout tr.r1 td.c2″ wybierze tylko drugą kolumnę pierwszego wiersza.

Nagle CSS i tabele znów są przyjaciółmi. Nemezys strukturalnego kodu przechodzi na stronę dobra i ratuje dzień. Granic nie ma, problemy są rozwiązane, czas na happy end - łzy wzruszenia spływają po policzkach co bardziej emocjonalnych czytelników.

Podsumowanie

Tak jak każda metoda, która wydaje się być zbyt genialna by była prawdziwa, ta posiada swoje słabe strony:

• jako, że jest to metoda client-side, nie mamy pojęcia czy zadziała u każdego - część przeglądarek sobie poradzi, część zapewne nie.
• metoda ta modyfikuje drzewo DOM, zatem trzeba wziąć to pod uwagę w projektach, w których już modyfikujemy DOM strony.
• używanie tabel do tworzenia layoutu, przy zachowaniu czystości kodu jest uzależniające i może prowadzić do niepohamowanych wybuchów radości i miłości do wszystkiego i wszystkich, oraz potrzeby ucałowania i przytulenia każdego znajdujacego się w pobliżu.

No dobrze, może z wyjątkiem tego ostatniego.