Niedawno miałem okazję wdrożyć kilka layoutów. Jednak im więcej ich robię, tym bardziej zdaję sobie sprawę, że zupełnie się na tym nie znam. Dość często zdarza się tak, że layout jaki zaproponuję nie odpowiada zapotrzebowaniom klienta. Wtedy muszę brać skalpel i przerabiać wszystko tak, że na wynik końcowy nie chce mi się patrzeć :-/ Przykłady? Ostatnio trafiła mi się do zrobienia strona przedszkola.

Co zaprojektowałem ja:

Co zamówił klient:

Od kilku lat współpracuje z telewizjami internetowymi lesznotv.pl, ostrowtv.pl, sremtv.pl, tvkalisz.pl i jeszcze kilkoma innymi. Już kiedyś zastanawiałem się czy na pewno nie mam jakiegoś skrzywionego gustu. Wyszło że nie, ale klient postawił na swoim i musiałem usunąć trawę. W poniedziałek dostałem szkic nowego designu, który musiałem wprowadzić.

Stary design (zależny od pory dnia):

Nowy design:

Trochę mi się to kojarzy z rysunkiem o powstawaniu projektu:

Więc jeżeli kiedyś będziecie przeglądali czyjeś portfolio, to pamiętajcie, że jest tam raczej coś innego niż to How the Programmer wrote it ;-)

W związku z ostatnimi zmianami loga Archa postanowiłem dopracować mój laptopowy system i dogonić Ubuntu w estetyce startu systemu. W tym celu zainstalowałem wynalazek o nazwie Splashy który ładnie maskuje kilobajty tekstu generowanego przy starcie przykrywając je ładnym obrazkiem. W tym miejscu opisałbym instalację, ale dobrzy ludzi już to zrobili więc tylko zlinkuję

Uwaga! Przy instalacji podmienianych jest kilka plików konfiguracyjnych w /etc/ np. rc.conf zostaje zastąpiony nowym a stary zapisywany jest jako rc.conf.pacsave więc nie zapomnijcie przywrócić starych plików przed ponownym uruchomieniem.

Po instalacji możemy zabrać się za zmianę motywu. Ja używam takiego

# splashy_config -i archer-black-splashy.tar.gz

Ponieważ zmiana motywu jest zmianą w konfiguracji musimy przebudować jądro

# mkinitcpio -p kernel26

Teraz wystarczy jeszcze zadbać o menadżer logowania. W moim przypadku jest to taki motyw dla Slima. Kopiujemy zawartość archiwum do /usr/share/slim/themes/, edytujemy plik /etc/slim.conf i zmieniamy current_theme

current_theme archer-black

I tapetka

Całość prezentuje się tak:
(wiem trochę słabo widać, ale lepiej się nie udało)

Na koniec żeby nie było za słodko, mały błąd. Po instalacji Splashy w górnym menu pojawiły mi się dziwnie skupiska małych kreseczek

Temat jest znany i prawdopodobnie jest to bug. Jednak w moim przypadku nie jest on zbyt uciążliwy.

Kontynuacja zabaw w Inkscape

Wersja SVG

UPDATE: dodałem XFCE balou splash theme

Zgłupiałem albo straciłem gust. HELP!

Trawa

czy niebo ?

trawa [5] vs niebo [1]

Linux poza tym, że jest bardzo sprawny i funkcjonalny, jest również bardzo ładny. Jednym z elementów jakie możemy sobie w nim dopasować są skórki ekranu logowania, w moim przypadku ekranu logowania środowiska Gnome

Jako że w moim czytniku RSS siedzi sobie kanał z serwisu Gnome-look to od czasu do czasu rzucam okiem na przelatujące szybko obrazki. Zazwyczaj są to jakieś marne tapety z wklejonym znaczkiem Ubuntu, ale zdarzają się również takie, które przykuwają moją uwagę i sprawiają że nie mogę obok nich kliknąć obojętnie ;-)

Wybrałem 10 moim zdaniem najładniejszych:

db1024

Tux versus Ms butterfly

GDM-Lamp

Edge Greeter

yeah

Little Wizard

AGlanceIsEnough

Brasillinux Eye

Gentoo 2005-1

Tattoo

Still alive sunshine

Miłego logowania.

Madman rozpoczął, więc i ja się dokładam.

Ble..

Ubuntu (by Madman), SVG

Gentoo (by me), SVG

Arch (by jINKs), SVG

Debian (by me), SVG

Jest, już jest. Nareszcie. Tajemniczy projekt, przy pracy nad którym spędziłem ostatnie 8 miesięcy. Wiele nieprzespanych nocy, setki godzin gapienia się w kolorowe literki i nie mniej commitów do repozytorium kodu. Wszystko to doprowadziło do powstania największego w tej części Europy portalu kompleksowo traktującego o piwie i wszystkim co z piwem związane. Co tu dużo mówić, trzeba samemu pozwiedzać.

Korzystając z okazji chciałem oficjalnie podziękować mojemu zespołowi że jakoś udało Wam się ze mną wytrzymać. Mi pracowało się bardzo dobrze, wygodnie i w miłej atmosferze. Przy okazji nauczyłem się kilku ważnych rzeczy:

• advAJAX to nie to samo co jQuery Zawsze lepiej jest polegać na większym projekcie niż czasie wolnym pojedynczego programisty
• Budowanie architektury z przewidywaniem n liczby języków komplikuje nawet z pozoru proste rzeczy
• Dobra architektura bazy to 60% projektu
• MySQL dobry jest do stawiania blogów
• Abstynenci też mogą zrobić serwis o piwie
• Ajax to przyszłość
• IE to zawsze będzie IE

Nie pozostaje mi nic innego jak zaprosić Was do zwiedzenia serwisu i założenia własnego, unikalnego, piwnego bloga. Serwis nadal będzie się rozrastał więc życzcie nam powodzenia a ja życzę Wam miłego klikania.

piweczko.org

I've made this today, so come and get it :). Powered by Inkscape and Gimp.

Powyższy produkt jest rezultatem dzisiejszego testowania nowego Inkscape'a i Gimpa. Wypuszczam na licencji BIJZTW.

1. Swiftfox - czyli Firefox skompilowany na konkretny procesor. Faktycznie, różnicę widać.

2. Xubuntu - czyli Ubuntu podane w sosie Xfce. Posadziłem na Pentium 466 i śmiga szybciutko.

3. Odkryłem że IE obsługuje jednak margin: 0 auto;, trzeba tylko wsadzić odpowiedni docktype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

No i przeportowałem joga. Napisałem szablon od początku, poprawiłem wszystkie notki i podzieliłem je na kategorie. Blahh, moje siły stwórcze wyczerpały się na dzień dzisiejszy. Nie wiem jeszcze tylko jak wrzucać notki do kategorii z poziomu komunikatora. Na wiki nic takiego nie znalazłem. Ze wszystkich zmian na joggerze czekałem na dwie: kategorię wpisów (jest) i śledzenie kategorii (brak). Fajnie, że ktoś może przygotować mi papkę wiadomości, które mnie interesują, no ale co z tego skoro nie mogę tej papki śledzić. Mam nadzieję, że niedługo pojawi się taka możliwość.

Cała sprawa obraca się wokół joggerowego meetengu, który Viedźma i Hexe postanowiły zorganizować (i chwała im za to). Problem wynikł przy wyborze miejsca -- Wrocław vs. Poznań. I tu do akcji włączyła się nasza główna bohaterka - ankieta :] Ankieta działa nieco inaczej niż ta z gazety, która zajmowaliśmy się jakiś czas temu, no ale też nie jest doskonała. Pobiera ona głos metodą GET, czyli na podstawie adresu strony a następnie zachowuje u siebie nasze IP tak abyśmy nie mogli zagłosować jeszcze raz.

Jak więc widać doskonale wszystko co potrzebujemy to inny numerek IP, który wywoła nam odpowiednią stronę. Wymienię teraz kilka sposobów jak to zrobić:

Najmniej skuteczne

• Zalogować się na zdalny serwer, np na jakiegoś shella i tam użyć wget'a do odpalenia odpowiedniej strony.
• Porozsyłać łańcuszek na gg z prośbą i kliknięcie na dołączony link
• Wejść na jakiś chat np czateria kanał sex, i wstawić odpowiedni link poprzedzony słowami "Patrzcie na te cycki"
• Podpiąć link do wyników głosowania pod oddawanie głosów na Poznań (tak jak to było do tej pory :)
• Użyć strony z ramkami i w ramce o rozmiarze 0 otwierać odpowiednią stroną a w ramce o rozmiarze 100% otwierać wyniki ważnego kolokwium :)

Najbardziej skuteczne

Jak widać swoista wojna kto będzie miał bliżej na meeting nadal trwa i jakimś cudem skubańcy z Wrocławia i okolic wygrywają!

Mam już dosyć czytania bez przerwy o wszelkiego rodzaju użyteczności, dostępności, to źle, to dobrze, tego nie przeczyta niewidomy a to przeczyta każdy ale mu się bardzo nie spodoba bo znacznik <a> nie posiada własności name... Ta strona jest beee, bo alt+0 nie prowadzi do oświadczenia o dostępności a tak właśnie życzy sobie tego ktośtam. A jak przychodzi co do czego o okazuje się, że to wszystko i tak można o kant du** rozbić.

Tym bardziej irytuje mnie pisanie o tym wszystkim po raz setny, kiedy wokół jest tyle świetnych rzeczy, ale niestety tak ten świat jest skonstruowany, że jeżeli czegoś nie podłapią masy to pójdzie do szuflady choćby nie wiem jak dobre było to rozwiązanie.

Zwłaszcza chodzi mi tu o język VRML i jego następcę X3D, którym jakoś nie mogę nikogo zainteresować. Moja poprzednia notka prześlizgnęła się nie zauważona, a temat poruszony na spince Web Standards też nie wykazał się entuzjazmem. Ale nie poddam się tak łatwo, bo tak użyteczna ;) rzecz nie może zostać zapomniana. Dlatego zamierzam pogrzebać coś w tym kierunku. No więc do zobaczenia w 3D.

Dzisiaj dowiemy się jak można łatwo manipulować źle skonstruowaną ankietę internetową. Na początek znajdźmy sobie cel. Żeby nie było za łatwo to wybierzemy sobie jakiś "szanowany" serwis, w którym teoretycznie takie błędy nie powinny mieć miejsca. Wchodzę sobie więc na gazeta.pl i przeglądam bieżące wiadomości. Ks. Jankowski zakłada instytut swojego imienia, jak miło, mamy ankietę.

W opcjach naszej jedynej słusznej przeglądarki ;) wyłączamy zapisywanie ciasteczek, ponieważ to właśnie dzięki nim skrypty gazety rozpoznają czy już oddaliśmy głos w ankiecie. Kiedy już wyłączymy ciasteczka odpalamy naszego szpiega nagłówków, którego używaliśmy w poprzedniej notce. A następnie na pytanie Inicjatywa prałata to przejaw udzielamy odpowiedzi patriotyzmu. Dlaczego tak? Bo wiadomo, że większość odpowiedziała pychy ale my ich przekonamy, że się mylą. W końcu mamy demokrację i większość (czyli my) ma zawsze rację ;).

No proszę! Kto by się spodziewał :D No to zaczynamy przekonywanie innych. Wracamy do okienka naszego szpiega nagłówków i począwszy od góry szukamy pierwszego nagłówka wysłanego metodą POST. Po znalezieniu takowego przyduszamy przycisk Powtórz żądanie... i oto objawia nam się okienko z wszystkimi potrzebnymi nam informacjami.

Możemy teraz wcisnąć Replay w ten sposób oddając kolejne głosy. Ale marny tego skutek bo do nadgonienia mamy 3000 głosów. Musimy więc uruchomić produkcję taśmową :)

Teraz potrzebny nam będzie serwer z obsługą php, może być nawet własny localhost. Z pomocą przybędzie nam zaimplementowany w php CURL czyli Client URL. Jeżeli wasz serwer odmówi wykonywania poleceń CURL'a to znaczy, że nie posiada pakietu php4-curl czy php5-curl i należy go doinstalować. Dzięki niemu zbudujemy sobie nadajnik i nim będziemy seryjnie nadawać odpowiednie dane do odbiornika, czyli skryptu ankietowego gazety, który z utęsknieniem czeka na nasze głosy.

Do dalszego działania potrzebny nam będzie ten skrypt php. A z okienka naszego szpiega nagłówków musimy wyciągnąć adres skryptu oczekującego na dane z formularza [1], oraz treść zapytania które chcemy powtarzać [2].

Nie przejmujmy się że skrypt do którego się odwołujemy ma rozszerzenie html. To tylko dla bezpieczeństwa zamaskowane rozszerzenie php. Teraz wystarczy, że wyedytujemy nasz skrypt i pod nagłówek CURLOPT_URL podstawimy nasz adres [1] a do nagłówka CURLOPT_POSTFIELDS nasze żądanie [2]. Teraz wystarczy umieścić skrypt na serwerze i wywołać go w przeglądarce. Skrypt powtórzy nasze zapytanie 100 razy i najlepiej odpalić go w przeglądarce tekstowej lub przy wyłączonym pobieraniu grafiki tak aby wczytywał się tylko tekst i wszystko szybko śmigało. A wyniki możecie podziwiać sami.

To co? Przekonujemy, że to jednak patriotyzm ? ;) Ja się jeszcze trochę pobawię. Aha, to teraz już wiecie dlaczego Korwin był najpopularniejszy w internetowych ankietach ;)

Wreszcie święta i mam czas, żeby coś tu naskrobać. Wielu z was zauważyło pewnie, że od jakiegoś czasu na niektórych jogach zapanowała moda na blokowanie możliwości komentowanie wpisów. Nie będę wnikał czym to jest spowodowane bo to nas nie interesuje. Chciałem tylko pokazać jak w łatwy sposób można obejść tą niedogodność, ale nie zachęcam nikogo do łamania zasad obowiązujących na omawianych jogach. Informacje te potraktujcie jako materiał szkoleniowy.

Na początek musimy się dowiedzieć jak działa mechanizm, który pozwala nam owe komentarze dodawać. Otóż mechanizm ten składa się z dwóch modułów:

1. Formularz komentarza
2. Skrypt wykonujący

Formularz komentarza, który umieszczamy na swoich jogach należy potraktować jako nadajnik, natomiast skrypt wykonujący jako odbiornik. Schemat jest taki, iż każdy posiada na jogu nadajnik a ojciec dyrektor zamontował w systemie jeden zbiorczy odbiornik. Kiedy komentujemy jakiś wpis, wówczas formularz (nadajnik) wysyła odpowiednio sformatowany sygnał do skryptu wykonującego (odbiornika) odpowiedzialnego za dodanie naszego komentarza do bazy danych.

Kiedy ktoś usuwa ze swojego joga formularza (nadajnik) wcale nie oznacza to, iż nie możemy skomentować jego notki. Wszystko co musimy zrobić to podłączyć się do Matrix'a i za pomocą własnej anteny nadać piracki sygnał ;)

A teraz trochę jaśniej:

1. Należy zbadać jak sformatowany jest sygnał, który formularz wysyła do skryptu. W tym celu posłużymy się własnym jogiem, przeglądarką Firefox i jej rozszerzeniem Live HTTP Headers. Po zainstalowaniu rozszerzania w menu Narzędzia naszego liska pojawi się opcja Podgląd nagłówków HTTP. Dzięki temu cacku dowiemy się o czym rozmawia serwer strony www z naszą przeglądarką.

Teraz wybieramy sobie z naszego joga notkę, której nikt nie skomentował, tak abyśmy nie rozesłali innym powiadomienia o nowym komentarzu. Kiedy już znajdziemy osamotnioną notkę, odpalmy nasz podglądacz nagłówków i sprawdzamy czy opcja Przechwyć jest zaznaczona.

Jeżeli tak możemy przystąpić do skomentowania naszej notki. Treść niech będzie krótka np TEST. Po skomentowaniu wracamy do okienka naszego szpiega nagłówków i począwszy od góry szukamy pierwszego nagłówka wysłanego metodą POST.

Kiedy już go odnajdziemy, a szukania nie powinno być za wiele, wciskamy przycisk Powtórz żądanie... I oto otwiera nam się okienka, z danymi gotowymi do powtórnego wysłania.

2. Teraz czas na utworzenia własnego pirackiego sygnału. Będziemy do tego potrzebowali specyficznych danych tj zmienna eid która mówi systemowi jaki wpis będziemy komentować. No więc wystarczy, że wejdziemy na jog osoby która nie pozwala nam komentować jej notek i klikniemy na tytuł danej notki, czy też na link komentuj. W adresie strony powinniśmy zobaczyć zmienną eid którą potrzebujemy. Jeżeli nasza "ofiara" jest aż tak podstępna iż nie udostępniła nam takich danych to zawsze możemy odszukać jej wpis na stronie głównej i tam już naszą zmienną znajdziemy w linku prowadzącym do tej notki.

No więc mamy już nasze informacje wywiadowcze i teraz wystarczy podmienić odpowiednie dane w naszym okienku powtórzonego żądania. Jadąc od góry zmieniamy własną nazwę joga na nazwę joga który jest w centrum naszych zainteresowań ;) To samo czynimy w nagłówku Host: oraz w nagłówku Referer:. W nagłówku Referer: podmieniamy również zmienną eid, na tą którą zdobyliśmy na zwiadzie.

Teraz zajmijmy się dolną częścią naszego okienka. Tu też podmieniamy wartość zmiennej eid. Na końcu podmieniamy zmienną commbody która w naszym przypadku wynosi TEST. To oczywiście jest treść naszego komentarza. Jeżeli będziemy chcieli napisać więcej niż jedno słowo, wówczas należy zamiast spacji stosować znak "+" np:

commbody=Ala+ma+kota.

No i nie stosujcie polskich krzaków, bo znaki wpisane przez nas mogą być nie zgodne z kodowaniem użytym na "atakowanym" jogu.

Kiedy jednak powiększamy nasz tekst, wówczas wydłuża się również wielkość naszego żądania. Określa ją zmienna Content-Length - ostatnia w polu powyżej. Musimy więc zbadać długość naszego ciągu np poprzez wklejenie do jakiegoś edytora tekstu i sprawdzenia statystyki tekstu. Wówczas dowiemy się ile znaków ma nasze żądanie i tą liczbą uaktualniamy wartość zmiennej Content-Length. Można też na oko wstawić jakąś większą liczbę. Jeżeli jednak tego nie zrobimy nasze żądania zostanie obcięte, co będzie wiązało się ze skróceniem tekstu naszego komentarza.

3. Piracki sygnał mamy gotowy. Teraz tylko przydusimy przycisk Replay i nadajemy go do Matrix'a :)

Przypominam, że wpis ten nie jest żadnym odwetem na osobach blokujących komentarze i zachęcam do uszanowania ich decyzji. Materiały te mają służyć jedynie powiększeniu Waszej wiedzy o formularzach.

A w następnym odcinku będziemy masowo wypełniali ankiety ;P

Ostatnio zostałem trochę okrzyczany przez Riddla za to, że zrezygnowałam ze starego stylu mojego joga.

Citizen, coś Ty zrobił ze swoim szablonem, jajebę™!

No więc jak tylko znalazłem chwilę czasu odkopałem stary design. Łatwo nie było bo ze starego ostał się tylko screen na moim portfolio. No ale jakoś poszło.

To co mnie zaskoczyło przy zmianach stylu to fakt, iż jeżeli w jednym pliku zdefiniuję np podkreślenie dla linków, to zostanie również po przełączeniu stylu, chyba że w drugim zdefiniuję brak owego podkreślenia. Zawsze myślałem że styl jest wczytywany od zera. No ale widocznie nie.

Wyobraźcie sobie taką sytuację:

Chat na jednym z jabber'owych pokoi:

InFormator: Dzisiejszym naszym celem jest firma "Lampki u Bożenki" produkująca lampki na biurka. Firma składa się z czterech pracowników i płacą tyle na ZUS, że nie stać ich na dobrego webmastera. Ponadto często oddają zrobione lampki do domów dziecka i innych ośrodków pomocy społecznej nie żądając za to nic. Dlatego trzeba im pomóc. Ich strona zrobione jest na ramkach i znajduję się na bezpłatnym serwerze a konto ma pojemność 10mb. Serwer nie ma nawet obsługi php, ale za to udostępnia mnóstwo reklam. Co z tym zrobimy Serwerze?

True Serwer: Założymy im konto na serwerze 60free bo dają tam 60 mb + obsługa php4/php5 + 2mb na mysql + brak limitów + brak żadnych reklam, a wielkość pliku może sięgać aż do 5 mb.

InFormator: A jak będzie wyglądała strona?

Crazy XHTML: Wywalimy te zardzewiałe ramki i pokryjemy stronkę XHTML'em od baneru aż po stopkę. Waldatorom opadną znaczniki!

InFormator: Świetnie ale jak to będzie wyglądało?

Mad CSS: Całość strony będzie utrzymana w konwecji starego garażu w którym jedynym oświetleniem będzie old-schoolowa lampa biurkowa, wszytko będzie matowym garażowych kolorach i będzie dawało czadu.

InFormator: Brzmi mocno, a co z grafiką?

BIG Graph: Na górze strony wyryjemy olbrzymie biurko, takie jak mają w warsztatach, będzie brudne i zarzucane różnymi narzędziami a na nim postawimy piękną klasyczną lampkę biurkową. W tle strony będą walały się różne narzędzia.

InFormator: A czym zaskoczy nas PHP?

Dżej.Dżej. PHP: Wpakujemy im najnowszy system newsów, odjechany sklep internetowy, powiadamianie sms'em o nowym zamówieniu, a na dokładkę zamontujemy zmianę oświetlenia garażowej grafiki według pory dnia. Będzie ogień!

InFormator: No to bierzcie się do roboty!

Po 4 dniach do firmy produkującej lampki na biurka dzwoni telefon. Proszę pobrać źródła ze strony www.pimptheweb.org/lamp Wasza strona została oficjalnie odpicowana!

Ciekawe czy ktoś jeszcze używa takiego ustawienia pasków narzędziowych.

Tak się właśnie zastanawiam, że jak wypełniamy formularz na www i wciskamy wyślij, wówczas nasza przeglądarka wysyła do serwera odpowiednie dane zawarte w tym formularzu. Czy jest jakiś sposób, żeby przechwycić te informacje tak aby można je było wysyłać cały czas do tego serwera (efekt taki jak podczas odświeżania strony). Dokładnie to chodzi mi o wypełnianie sondaży wyborczych :]

Czasami chciałbym zrobić sobie jakąś stronkę, tak dla samej przyjemności robienia wszystkiego od początku. Ale nie mam co robić :-/ Wszystko co potrzebowałem już zrobiłem. No i wtedy nachodzi mnie taka myśl, żeby zacząć podrzucać gotowe strony pewnym organizacją, projektom czy czemuś takiemu. A jak by się jeszcze działało w zespole... Myślę że fajnie by było. Taka internetowa grupa web-janosików :D

Na stronie wackowiki.com/WackoDownload/InEnglish znalazłem menu z bardzo ładnym przewijaniem do linków w dół strony. Niestety nie udało mi się odtworzyć tego efektu chociaż podczepiłem wszystkie trzy skrypty javowe :/ Ktoś ma jakiś pomysł ?