Abecadło smoczątka, dziennik niecodzienny

Cały czas w Internecie trafiasz na miejsca, gdzie treści jest tak wiele, że podzielona została na podstrony. Artykuły, archiwa newsów, fora, wszędzie. Jako użytkownik wymagasz wygody w poruszaniu się pomiędzy poszczególnymi stronami. Nic tak nie zniechęca, jak niemożność przejścia na następną stronę, kiedy znajdujesz się w środku ciekawego tekstu. Nie muszę wspominać, że już więcej tam nie wrócisz.

A jak to wygląda z drugiej strony? Tworzysz właśnie jakiś serwis i okazuje się, że koniecznością staje się zapewnienie dobrego poruszania się po podstronach. Konwencji jest kilka, niektóre są lepsze, niektóre gorsze, a część z nich niekoniecznie nadaje się do czegokolwiek.

Zasada numer jeden. Upraszczaj!

Chyba już nie raz widziałeś listy linków podobne do tego wzoru (jesteśmy na 8 stronie, nie jest ona linkiem):

Poprzednia 4 5 6 7 8 9 10 11 12 Następna

Zaczynamy od środka. Zastanów się, kto mógłby używać listy poprzednich i następnych czterech stron. Jeśli użytkownik jest zainteresowany, będzie czytał stronę po stronie. Jeśli nie jest, zamknie kartę od razu. Pomijając przeskakiwanie stron w celu przeszukiwania (bo od tego są inne narzędzia), najprawdopodobniej nie pozostaje żaden racjonalny powód do posługiwania się tymi linkami.

Doszliśmy do takiego modelu:

Poprzednia 8 Następna

Prostota. Wydaje mi się, że najlepszym układem przestrzennym dla tego modelu będzie Poprzednia po lewej stronie, Następna po prawej i 8 pośrodku. Duże marginesy pomiędzy poszczególnymi polami i wielkie, łatwo trafialne linki, najlepiej obramowane i z odpowiednim klikalnym paddingiem. Aby dopełnić dzieła i dać użytkownikowi świadomość objętości tekstu, dałbym jeszcze małą adnotację pośrodku, o, taką:

[ Poprzednia ]    Strona 8 z 13.    [ Następna ]

Ten model nadaje się do prawie wszystkich archiw, w których na jednej stronie jest dużo treści i nie potrzeba skakać gdzieś do określonych punktów.

Nie zmieniaj miejsca, w którym mają pojawić się linki

Zanim przejdę do analizy dalszych modeli, chcę uświadomić Ci jedną dość oczywistą prawdę, którą mało kto wykorzystuje.

Projektując swój model ustaw stałe szerokości dla poszczególnych linków. Dzięki czemu na każdej podstronie będą znajdować się w tej samej odległosci od brzegu ekranu, przez co użytkownik nie będzie musiał za każdym razem wyszukiwać od nowa miejsca, w które powinien kliknąć by przejść do określonej strony.

Jeśli dana strona nie istnieje, to pokaż pole z tekstem i oznacz je tak, aby użytkownik wiedział, że jest nieaktywne. Według mnie to najczytelniejsze i najestetyczniejsze rozwiązanie. Alternatywnie możesz skorzystać z visible: none.

Model drugi, artykuły

Ten model jest bardzo przydatny dla przydługich artykułów, które zazwyczaj mieszczą się na trzech, czterech stronach. W tym wypadku sprawa jest jeszcze prostsza, niż w poprzednim:

[ 1 ]   2   [ 3 ] [ 4 ]

Żadnych przycisków `następna' i `poprzednia'. Nie ma sensu ich stosować przy tak małej ilości podstron.

Model trzeci, fora

Forum bardzo akcentuje pierwszą i ostatnią stronę wątku. Dlatego to one będą podstawą w naszym modelu:

[  <<  ] [ Poprzednia ]   Strona 8 z 14   [ Następna ] [  >>  ]

Dlaczego nie posłużyłem się słownymi określeniami `pierwsza' i `ostatnia'? W ten sposób linki pierwszej i ostatniej strony nie kolidują z linkami poprzedniej i następnej, dzięki czemu nie trzeba wprowadzać kolejnych oznaczeń.

Oczywiście linkom pierwszej i ostatniej strony należy zapewnić odpowiednie rozmiary. Być może nawet nieco większe niż te stosowane do stron poprzedniej i następnej.

Model czwarty, linki do poprzednich i kolejnych stron

Owszem, na początku mocno skrytykowałem pomysł umieszczania linków do kolejnych i poprzednich stron, gdyż nie znalazłem dla nich rozsądnego użycia. Może jednak się okazać, że coś przeoczyłem, dlatego też podzielę się moimi przemyśleniami i na ten temat.

Weźmy model, który sktrytykowałem na początku i nieco go przetwórzmy zgodnie z powyższymi zasadami:

[ << ] [ Poprzednia ]   [ 4 ] [ 5 ] [ 6 ] [ 7 ] 8 [ 9 ] [ 10] [ 11] [ 12]   [ Następna ] [ >> ]

W wypadku, gdzie stron może być naprawdę dużo, a chcemy, aby użytkownik mógł się poruszać, zapewnijmy mu nieliniową skalę:

[ << ] [ Poprzednia ]   [   ] [ 1 ] [ 3 ] [ 5 ] [ 7 ] 8 [ 9 ] [ 11] [ 13] [ 18] [ 28]   [ Następna ] [ >> ]

W ten sposób użytkownik będzie mógł nieco szybciej przeskakiwać większe ilości stron. Można także pozbyć się duplikowania linków do poprzedniej i następnej strony.

Duplikaty linków

Jeśli musisz przedstawić linki prowadzące do poprzedniej i następnej strony w dwóch egzeplarzach to pokaż, że obie nawigacje są odrębnymi grupami funkcjonalnymi, bo w innym przypadku może to wprawić użytkownika w lekką konsternację, jak i każda inna redundancja.

I to by chyba były wszystkie moje luźne przemyślenia. Mam nadzieję, że skłonią Cię do chwili refleksji. ;)

Miniaturkę możemy spotkać prawie wszędzie, gdyż dość dobrze nadaje się do prezentowania materiałów graficznych w sieci. Jej podstawową zaletą jest szybkość ładowania, to nie ulega wątpliwości. Dodatkowo, dzięki swym niewielkim rozmiarom użytkownik jest w stanie objąć wzrokiem dość pokaźną grupę miniaturek.

Jestem pewien także tego, że nieraz udało Ci się zaobserwować największy mankament miniaturek - czasami w żaden sposób nie można odcyfrować, co się dzieje na obrazku. Nadal nie wiesz, czy warto go obejrzeć... W takim razie po co miniaturka - równie dobrze mógłby ją zastąpić tekstowy odnośnik, prawda?

Skoro już uświadomiliśmy sobie problem, wyznaczmy teraz cel, do którego będziemy dążyć.

Potrzebujemy obiektu zastępującego miniaturkę, który będzie wyróżniał daną grafikę i starał się zachęcić do obejrzenia oryginału, przy jednoczesnym zachowaniu czytelności. Jeśli wziąć pod uwagę całość obrazka - jest to niemożliwe, ale kto powiedział, że trzeba nam całości? Nie lepiej wyciąć interesujący fragment?

Kadrowanie wyjściem ultymatywnym?

W przeciwieństwie do tworzenia miniaturek, kadrowanie daje zazwyczaj niezmiernie lepsze efekty wizualne. Z drugiej strony, póki nie nauczymy naszych komputerów rozpoznawania piękna, to będziemy sami musieli włożyć odrobinę naszej pracy (oraz inwencji) w wycinanki.

Pamiętaj, że ukazanie części grafiki wzbudza w oglądających ciekawość, dzięki czemu nie będą się nudzić na Twojej stronie i wysoce prawdopodobne, że jeszcze kiedyś wrócą. Istnieje pewna szansa, że dobrze uchwycony fragment będzie nie tylko intrygujący dla innych, ale stanie się nawet źródłem inspiracji dla innych.

Z powyższego akapitu płynie dość ważne pytanie - co wybrać? Z poczynionych przeze mnie doświadczeń wynikły dwa sposoby. Możemy wybrać łatwo zapadający w pamięć szczegół. Ważne przy tym, aby był reprezentatywny tylko dla jednego obrazka. Jeśli naprawdę utkwi w czyjejś pamięci, to właśnie odnieśliśmy sukces.

Inną metodą jest wybieranie najbardziej reprezentatywnej części obrazka. Problem w tym, że owszem, siła przebicia samego kadru będzie większa niż w poprzednim wypadku, jednak z drugiej strony, zabraknie nam niespodzianek w oryginale. Po pewnym czasie oglądający będzie mógł się przyzwyczaić do tego i przestanie zaglądać do oryginałów.

Może się okazać, że pewne fragmenty są zbyt duże, aby je skadrować. Wtedy należy się zastanowić, czy można bezpieczenie uciąć część tego fragmentu, czy też da się go zeskalować do pożądanych rozmiarów.

Narzędzia i wykonanie

Do tej pracy doskonale nadaje się zarówno GIMP, jak i Photoshop. Okazuje się, że moje sugestie to kombinowanie jak koń pod górę. Czujni czytelnicy (dzięki!) wskazali programy IrfanView, Picasę i JPEGCrops jako znacznie szybsze rozwiązanie przy większej ilości zdjęć. Nie testowałem żadnego z tych trzech programów, ale, jak widać, wybór jest znacznie większy.

Nie staraj się jakoś niezwykle precyzyjnie podchodzić do samego wyboru kadru - ja zazwyczaj przez chwilę zastanawiam się, jaki obiekt na obrazku rzuca się w oczy, następnie kilkakrotnie zaznaczam obszar 100x100px dookoła niego i wybieram opcję przycięcia obrazu, który zapisuję następnie jako JPEG z jakością 85 (domyślną). Dzięki temu moje wycinanki mają średnie rozmiary rzędu 3KB. Nawet przyjmując połączenie telefoniczne, dziesięć miniaturek ładuje się w jakieś 5-7s, co nie jest złym wynikiem.

Dość ważnym elementem jest wybranie stałego rozmiaru naszego kadru - dzięki temu wszystkie obrazki będą ładnie poukładane w rzędach i kolumnach na naszej stronie, niezależnie od tego, w jaki sposób zapiszemy je w kodzie HTML.

W razie, gdy obiekt, który chcesz zaznaczyć nie mieści się w domyślnych rozmiarach, można zeskalować obraz do 50% (co nadal daje w miarę dobre efekty wizualne), a następnie wykadrować i obciąć niepotrzebne części.

HTML

Gdy już zrobisz swoje miniatury i udostępnisz sieci, możesz wstawić je do swojego dokumentu. Jak? Rozwiązań jest naprawdę wiele. Można skorzystać z najprostszego kontenera <div />, lub bardziej skomplikowanej listy nieuporządkowanej.

Na tym blogu używam jeszcze innego rozwiązania. Korzystam z listy definicji <dl />, gdzie każdy <dt /> odpowiada danemu obrazkowi, a pod taką grupą wstawiam wspólny <dd />, czyli opis powyższych obiektów. Wygląda to tak:

<dl>
	<dt><img ... /></dt>
	<dt><img ... /></dt>
	[...]
	<dd>Obrazki przedstawiają x, y oraz z.</dd>
</dl>

W połączeniu z lekką stylizacją w CSS, może to wyglądać tak, jak na moim blogu.

Czy w takim razie odrobinka pracy popłaca? Odpowiedź pozostawiam Tobie.

Informatycy
Śpią w łożach; krople rosy
Mienią się w słońcu

... czyli jak mała literówka może stać się źródłem poważnego problemu.

Na sam początek - mam procesor na architekturze x86 i gcc 4.1.2, nie ręczę za to, że na innych program przedstawiony poniżej będzie tak samo działać. U mnie i u mojego przyjaciela jednak właśnie tak było.

Przyjaciel mój odezwał się do mnie z problemami ze swoim programem sortującym. Po małym połataniu kodu, natrafiliśmy na nieskończoną pętlę, która w tym kodzie wystąpić nie miała prawa, a jednak w jakiś sposób wystąpiła. W feralnej pętli przy każdej iteracji zmienna iteratora miała stałą wartość, pomimo dekrementacji wykonywanej na niej za każdym razem. Co więc nadpisywało zmienną? Wyobraźmy sobie taki przykład:

#include <stdio.h>
int main() {

        int arr[2];
        int a, b, c, d, i;

        for(i = 0; i < 6; i++)
                arr[i] = i;

        printf("%d %d %d %d\n", a, b, c, d);

        return 0;
}

Po skompilowaniu i uruchomieniu:

dragonee@hikari ~/dev 12:50:13 $ ./a.out
2 3 4 5
dragonee@hikari ~/dev 12:50:16 $

Wyjście poza tablicę nadpisuje następne zmienne. Nieprzyjemna sprawa, bo w ten sposób możemy przepisać te zmienne, które będą niezbędne do działania kodu. Albo trafimy dokłanie w taki punkt, który skończy się nieskończoną pętlą. Segmentation fault w tym przypadku wydaie się najprzyjemniejszym zakończeniem tego programu, bo od razu będziemy wiedzieć, że coś niedobrego z pamięcią się dzieje.

Niestety, my natrafiliśmy na nieskończoną pętlę. Zmienna iteracyjna była pierwszą po tablicy, a wartość, którą wpisywaliśmy do iteratora w tablicy wskazywała dokładnie na iterator. Dzięki temu mimo dekrementacji nic się nie zmieniało, a program działał i działał i działał...

Aby wszystko zadziałało, wystarczyło zwiększyć tylko rozmiar tablicy o 1 element. Na co trafiliśmy po godzinie wpatrywania się w 50 linii kodu.

Ha! Mogę o sobie powiedzieć, jako o zacofanym użytkowniku Web 2.0. Bo gdy chodzą po sieci pogłoski o końcu tej epoki, to ja dopiero dobieram się do Twittera i Flickra. To drugie dzięki zasłudze mojego aparatu, o którym już niedługo.

Niejako autoryzując swój oficjalny wkład w generowanie treści tu i tam, a jednocześnie podążając z ideą sieci 3.0 i łącząc poszczególne kawałki układanki ze sobą, ogłaszam wszem i wobec wieść o moich alternatywnych osobowościach sieciowych:

• dragonee na Twitterze.
• Smoczątko na Flickrze

Bierzcie i cieszcie się z tego wszyscy. ;)

Chętni mogą jeszcze poczytać nieco treści zawartej na wiki poświęconej hikari, mojemu serwerowi - a co, maszyna też człowiek, miejsce w sieci mieć musi. Oczywiście, tylko gdy nagromadzi się moja mana, wyczaruję więcej tekstu. Póki co, trzeba czekać.

TODO na wakacje? Portfolio, małe, ale własne.

Pytanie dla wspaniałych, którzy dotarli aż tutaj. Pojawiło się ostatnio coś dużego w sieci?

Dawno już nie pisałem niczego o sprzęcie przeze mnie posiadanym, a ostatnimi czasy ilość tegoż nieco się zwiększyła. Czas więc uzupełnić braki i pobawić się w recenzenta. Zacznijmy od kolejnego routera w mojej rodzinie: Linksys WRT54GL.

Zaczęło się od kupna laptopa - Thinkpad 560X. Pomyślałem wtedy, że chodzenie z kabelkiem UTP, aby mieć dostęp do sieci nie jest takie fajne. Później sprawy się skomplikowały. W momencie, kiedy laptop upadł na kartę sieciową, gnotąc delikatną, zupełnie nietypową wtyczkę dostarczoną przez producenta i nie miałem już żadnego podłączenia do Internetu, myśli te wróciły ze zwielokrotnioną siłą. Minęło kilka miesięcy i wreszcie załatwiłem sobie WRT54GL wraz z tanią kartą PCMCIA 802.11b.

Router ten to kolejna maszyna pracująca pod Linuksem w moim domu. Jądro 2.4, procesor 200MHz, 16MB ramu i 4MB pamięci flash wystarczają na całkiem sprawny system. Domyślnie zainstalowany firmware jednak nie był wystarczający - co to za Linux, na którym nie ma sshd? ;)

Host otrzymał nazwę routina, z którą zgłasza się do nadrzędnego routera poprzez dhcp.

Z początku nawet ta konfiguracja mi wystarczała - bo router to router i miał routować. Potem jednak uznałem, że dostęp poprzez stronę www zaczyna mnie nieco denerwować. I to, że router nie odpowiada na pingi z zewnętrnej sieci (w tym przypadku należącej również do mojego lanu).

Dziś przełamałem się i zainstalowałem OpenWrt. Teraz już mam dostęp do całego systemu, firewalla, dnsmasq i wielu dodatkowych opcji, których jeszcze nie odkryłem. Jest nawet vi! :D

OpenWrt dostarcza nawet package manager, żeby dodawać i usuwać poszczególne nieużywane paczki.

Wracając do samej maszyny, małe jest piękne. Router zawiera access point 802.11b/g, oraz czteroportowy Ethernet switch. W zależności od oprogramowania, urządzenie może spełniać różne dodatkowe funkcje, które ograniczone są praktycznie wielkością pamięci i ramu.

Dla urządzenia znalazłem jeszcze jedno praktyczne zastosowanie poza byciem częścią szkieletu mojej sieci - gry sieciowe. Ostatnio umówiliśmy się ze znajomymi na sesję StarCrafta. Okazało się, że router stworzył nam wspaniałe warunki gry dla trzech osób podłączonych poprzez Ethernet i mojego laptopa poprzez WLAN. Zero konfiguracji - tylko wpinać, czekać na odpowiedź DHCP i grać. ;)

Dodatkowym atutem może być także to, że ani razu nie zauważyłem problemów z działaniem routiny, a mam ją już trzy miesiące.

Polecam, naprawdę warto wydać te dwieście złotych na Allegro na taki sprzęt.