“Because something is happening here / But you don’t know what it is / Do you, Mister Jones?” - Bob Dylan

A lot of web sites & applications make you feel a bit like Mr. Jones.

That’s why we’ve pioneered the Yellow Fade Technique (YFT) in Basecamp. It’s a nifty way to subtly spotlight a recently changed area on a page.

Interface First

Design the interface before you start programming

Too many apps start with a program-first mentality. That’s a bad idea. Programming is the heaviest component of building an app, meaning it’s the most expensive and hardest to change. Instead, start by designing first.

Three State Solution

For each screen, you need to consider three possible states:

• Regular
  (…)
• Blank
  (…)
• Error
  (…)

Cool storage designs, part 1: EasiFile for large docs, blueprints, photos

Cool storage designs, part 2: Vertical carousels for office and commercial environments

Cool storage designs, part 3: Trio of vertical carousels for super-industrial, automated storage

Cool storage designs, part 4: StorageMotion’s in-home systems for clothes, shoes, food, and more

Myślę, że może to być przydatna rzecz dla chorych na astmę dla identyfikacji i unikania czynników nasilających chorobę. Po zebraniu większej ilości danych może to być też źródło danych do naukowej analizy przyczyn ataków na szerszą skalę niż dla pojedynczej osoby.

Źródła

TED Talks
Asthmapolis

Sprawa

Jest to historia sprawy wytoczonej przez Casey’a Martina organizacji Professional Golfers’ Association, która organizuje profesjonalne turnieje golfowe. Casey cierpi na schorzenie żył, które uniemożliwia mu chodzenie (w tym chodzenie po polu golfowym między dołkami), jednak nie przeszkadza mu to w samej grze i chciał uczestniczyć w profesjonalnych turniejach, przemieszczając się między dołkami za pomocą wózka golfowego. PGA odmówiła twierdząc, że naruszyłoby to uczciwość konkurencji.

Golfista powoływał się na amerykańską ustawę pozwalającą na wprowadzenie w życiu publicznym rozsądnych modyfikacji pomagających osobom niepełnosprawnym, pod warunkiem, że modyfikacje te nie wprowadzają zmian w istocie wykonywanej czynności. PGA argumentowała, opierając się na zamówionych ekspertyzach, że istotną częścią golfa jest chodzenie między dołkami. Następnie oparła się na tym, że ustawa odnosi się jedynie do klientów, a uczestnicy turnieju nie są klientami. Ostatnim elementem obrony było twierdzenie, że chodzenie po polu golfowym wprowadza do gry element zmęczenia, a pozbawienie tego elementu Casey’a byłoby równoznaczne z daniem mu nieuczciwej przewagi nad innymi konkurentami.

Argumenty te zostały po kolei obalone najpierw poprzez uzasadnienie, że golfiści wnoszą opłaty startowe przed turniejem, a więc są klientami, następnie poprzez opinie biegłych, stwierdzające, że zmęczenie podczas spacerów po polu golfowym jest bez znaczenia dla przebiegu gry. Dodatkowym argumentem było to, że na turniejach niższego poziomu dopuszczalne jest użycie wózka, a i tak większość graczy z niego nie korzysta, co robiliby, gdyby mogło to dać im przewagę nad konkurencją.

Sprawa zakończyła się wygraną Casey’a i pozwoleniem mu na starty w profesjonalnych zawodach z użyciem wózka golfowego.

Ciekawostki

Przy okazji czytania o tej sprawie, natrafiłem na ciekawe urządzenie dla ludzi z niedowładem nóg, chcących grać w golfa (ciekawe, czy i to zostanie kiedyś dopuszczone na profesjonalnych turniejach golfowych). Paragolfer pozwala osobom niepełnosprawnym na normalną grę w golfa – http://golf.pasje.net/2010/golf-sport-dla-ludzi-niepelnosprawnych.html.

Źródła

Pierwotna inspiracja dla posta: zapomniałem ;)
http://library.findlaw.com/1998/Apr/1/129434.html
http://www.allbusiness.com/legal/litigation/1111501-1.html

Już na samym początku można wyróżnić dwa rodzaje linków: wewnętrzne i zewnętrzne. Wewnętrzne to najczęściej nagłówek, menu, stopka, czyli elementy najczęściej identyczne na wszystkich podstronach, do których użytkownik może w każdej chwili się odwołać. Linki zewnętrzne to z kolei te, prowadzące użytkownika poza stronę, na której się znajduje. Najczęściej występują one w zasadniczej treści strony.

Wygląd linków

Ważne jest, aby linki różniły się od otaczającego je tekstu. Użytkownik powinien wiedzieć, że w tym miejscu znajduje się link i może w niego kliknąć. Powszechnie przyjętą metodą oznaczania linków jest używanie podkreślonego tekstu. W rzadkich przypadkach używa się linków pisanych pogrubioną czcionką.

Często stosowane są pseudoklasy CSS, aby oznaczyć linki znajdujące się w trakcie interakcji z użytkownikiem. Odpowiednio można oznaczyć linki po najechaniu na nie kursorem (:hover), kliknięciu (:active) i odwiedzione już wcześniej (:visited). Najczęściej przyjmowanymi zmianami wyglądu linka w odpowiedzi na którąś z akcji jest zmiana koloru czcionki i ewentualnie usunięcie podkreślenia (w pseudoklasach :hover lub :active).

Co się stanie?

Ważną rzeczą jest poinformowanie użytkownika o tym, co stanie się po kliknięciu przez niego w dany link. Oczywiście, nie chodzi o dodanie do każdego linka opisu “jeśli tu klikniesz, zostaniesz przeniesiony na stronę…”, ale o odpowiednie opisanie treści, do której dany link prowadzi. Często stosowaną praktyką jest umieszczenie na stronie odnośnika w taki sposób:

Kliknij tutaj, aby przejść na stronę z kotkami.

Przez co użytkownik chcący szybko znaleźć informację, gdzie prowadzi dany link, musi przeczytać całe zdanie. Dużo lepszym sposobem jest zrobienie tego w ten sposób:

Strona z kotkami

Użytkownik od razu wie, co go czeka :)

Tytuły

W wielu dokumentach dotyczących użyteczności w sieci, jest mowa o używaniu atrybutu title do opisywania linków na stronie. Moim zdaniem jest to przydatne, jeżeli treść linku, z powodu kontekstu w jakim jest umieszczona, nie może powiedzieć użytkownikowi zbyt wiele o samej stronie za odnośnikiem. Na przykład, kiedy powołujemy się w tekście na jakieś źródło:

Źródła mówią, że udział zwierząt parzystokopytnych w tej sprawie jest marginalny.

Ważną rzeczą jest to, że podany w atrybucie title tekst pojawia się użytkownikowi po najechaniu kursorem na link, a także jest odczytywany przez przeglądarki głosowe, używane przez użytkowników niewidomych.

Jednak użycie tego atrybutu nie zawsze jest korzystne. Kiedy na przykład treść odnośnika mówi nam wszystko i nie mamy pomysłu dodania żadnego nowego opisu, nie ma sensu powielać treści tylko po to, aby mieć atrybut title.

Ikony

Kolejną rzeczą ułatwiającą użytkownikowi zrozumienie linku są ikony. Na przykład widoczne na screenie po lewej stronie, informują w systemie DokuWiki o linku zewnętrznym. Można ich również użyć do oznaczenia linków prowadzących do określonych typów plików np. zip, odt, doc, pdf. Stworzenie takich linków jest bardzo proste przy użyciu CSS3 – na przykład dla dokumentów pdf:

Nawiasy kwadratowe [] oznaczają, że wewnątrz nich znajduje się warunek odnoszący się do atrybutów danego tagu, $= oznacza, że wartość danego atrybutu ma się kończyć podanym po nim ciągiem znaków.

Z kolei linki zewnętrzne możemy oznaczyć w taki sposób:

Tutaj ^= działa podobnie, jak $= w poprzednim przykładzie i oznacza, że wartość atrybutu ma się zaczynać podanym ciągiem znaków.

Otwieranie linków zewnętrznych

Istnieją tutaj dwie szkoły. Pierwsza z nich, nakierowana na użytkowników mniej biegłych w obsłudze komputera, mówi że linki zewnętrzne powinny być otwierane w nowym oknie (atrybut target=”blank”), tak aby użytkownik nie był zaskoczony trafiając nagle na zupełnie inną stronę niż był przed chwilą. Druga szkoła opowiada się za otwieraniem wszystkich linków w ten sam sposób, ponieważ otwieranie ich domyślnie w nowym oknie blokuje możliwość otwarcia ich w tym samym oknie, co zawęża użytkownikowi możliwość wyboru.

Wybór pomiędzy jedną z dwóch szkół zależy tutaj od tego, czego oczekują nasi użytkownicy. Powinniśmy przeanalizować ich sposób korzystania z komputera (chociażby przewidywany) i dostosować do niego zachowanie strony.

Linki wewnętrzne

Jeśli znajdują się one wewnątrz treści strony, tak jak większość linków zewnętrznych, to stosują się do nich te same zasady. Szczególnym rodzajem linków wewnętrznych, który wyłamuje się większości reguł, są linki znajdujące się w nagłówku, menu i stopce strony. Ich wygląd jest ściśle uzależniony od grafiki strony. Bardzo często same w sobie są one specjalnie zaprojektowanymi elementami graficznymi strony. Z tego powodu nie jest przy nich konieczne podkreślenie, ani inne elementy wyróżniające je spośród tekstu strony. Regułą, od której nie ma wyjątków, jest aby użytkownik wiedział, że są to linki i że może z nich skorzystać (inaczej stają się tylko tłem, bez wpływu na interakcję użytkownika ze stroną).

Często spotykaną w menu wersją pośrednią pomiędzy w pełni rysowanymi linkami, a linkami tekstowymi, są linki tekstowe z ikonami opisującymi w sposób symboliczny, gdzie one prowadzą. Może być to na przykład dom przy linku do strony głównej lub ikona telefonu przy linku do strony z informacjami kontaktowymi.

Przykłady takich rozwiązań:

O czym warto pamiętać

Przede wszystkim linki na stronie, nieważne czy mówimy o linkach wewnętrznych czy zewnętrznych, powinny być dla użytkowników pomocą w nawigacji. Użytkownik nie powinien zastanawiać się, co robi dany link, powinien wiedzieć to już po pierwszym rzucie oka.

Nie dotykaj usera

Nie wiem, jak ma się sprawa z automatycznym włączeniem aktualizacji ze starej wersji, ponieważ prawdopodobnie moja niecierpliwość nie pozwoliła jej wykryć zmian :)

Instalacja

Po wybraniu w menu Pomoc opcji „Sprawdź dostępność aktualizacji…” program szybko ściągnął sobie 12MB najnowszej wersji w języku polskim i przystąpił do instalacji. Obawiałem się trochę przygód, jakie do niedawna miałem z aktualizacjami Firefoxa — w trakcie ponownego uruchomienia pokazywał się pasek postępu instalacji, który następnie znikał i otrzymywałem komunikat, że wystąpił błąd instalacji. Całość kończyła się koniecznością użycia innej przeglądarki do ściągnięcia instalatora najnowszej wersji FF i ręcznej instalacji (na szczęście zakładkom i innym danym nie działa się krzywda). W Thunderbirdzie nic takiego nie miało miejsca. Program w kilka minut zainstalował się i uruchomił. Kolejnych kilka minut zabrała indeksacja wszystkich moich wiadomości (jeśli dobrze zrozumiałem, na potrzeby wyszukiwania).

Wygląd

Czyli to, co pierwsze rzuciło mi się w oczy. Podkolorowano trochę ikonki, a nowe okna zamieniono na zakładki. Nowy pasek z ikonami jest węższy i zawiera tylko cztery przyciski: Pobierz, Napisz, Adresy, Etykieta (więcej o tym napiszę dalej). Generalnie całość wygląda dużo przyjemniej. Jedyne, co do mnie nie przemawia, to przyciski przy otwartej wiadomości i wybór rodzaju adresata przy tworzeniu nowej wiadomości (wydają mi się trochę toporne w porównaniu z resztą interfejsu).

Nowości

Z nowych funkcji warto zauważyć to, co wita nas przy instalacji, czyli asystent migracji. Wymienia on cztery najważniejsze zmiany: synchronizacja kont IMAP, nowy pasek narzędzi, pogrupowane foldery i nagłówki wiadomości. Dwie z nich (pasek narzędzi i grupowanie folderów) możemy od razu zostawić w nowej wersji, lub jednym kliknięciem wrócić do ustawień znanych nam z Thunderbirda 2. Uważam, że to bardzo miły gest ze strony twórców, szczególnie że w obu przypadkach z tej możliwości skorzystałem.

Inne poprawki

Przeklikując się przez program znalazłem kilka innych smaczków, które moim zdaniem są zmianami jak najbardziej na plus. Między innymi w wyszukiwaniu postów zmieniono domyślne zaznaczenie z „spełniony dowolny z warunków” na „wszystkie warunki spełnione” — często musiałem przez to powtarzać wyszukiwanie, a chyba nigdy nie skorzystałem z ówczesnego domyślnego wyboru.

Dodatki

Jak przy każdym upgradzie programu pozwalającego na instalowanie dodatków, także tu wystąpiły problemy z kompatybilnością nie których z nich. Spośród czterech, z których korzystam dwa przestały działać i czekają na aktualizację do zgodnej z nową wersją programu.

Na koniec

Mnie osobiście nowa wersja Thunderbirda przypadła do gustu. Mimo kilku rzeczy, które nie do końca mi się podobają i jednej, która mi się podoba, ale do której będę się musiał przyzwyczaić (zakładki — już kilka razy próbowałem zamknąć całego Thunderbirda chcąc zamknąć e-mail), uważam że została dobrze przygotowana i można tylko z niecierpliwością czekać na v4.0 ;)

Dodatek po jednodniowych testach

Po całym dniu korzystania z nowej wersji znalazłem w niej pewną niekonsekwencję — nie wszystko zostało przeniesione do zakładek. Tworzenie nowej wiadomości, książka adresowa, a także tradycyjne wyszukiwanie po kliknięciu prawym przyciskiem myszy na folder i wybraniu opcji wyszukaj, dalej pojawiają się w nowym oknie. Sprawdziłem, że sprawa została zgłoszona developerom jeszcze na etapie wersji beta, ale nie było czasu na zaimplementowanie tego i przetestowanie. Można mieć tylko nadzieję, że sprawa zostanie załatwiona przed wydaniem wersji 4.0 (lub że ta wersja będzie wcześniej niż 2.5 roku, które mijały dotychczas między kolejnymi wersjami ;)). Może będzie 4.1?

Jeśli chcecie zwiększyć presję na twórcach, zapraszam do poparcia:

• Compose reply in a new tab
• New Message and address book in new tab

Dzisiaj przedstawiam sposób na ukrycie kursora na naszej stronie za pomocą CSS.

Specyfikacja CSS2 podaje dla własności cursor następujące możliwe wartości (po najechaniu na wartość, pojawi się przypisany jej w Twojej przeglądarce kursor):

• URL — oddzielona przecinkami lista URL-i do plików z kursorami, najlepiej zakończona którąś z poniższych wartości
• auto — domyślna wartość — przeglądarka sama ustawia kursor
• crosshair
• default
• e-resize
• help
• move
• n-resize
• ne-resize
• nw-resize
• pointer
• progress
• s-resize
• se-resize
• sw-resize
• text
• w-resize
• wait
• inherit — wygląd dziedziczony po elemencie nadrzędnym

Niestety, nie ma tu interesującego nas parametru braku kursora.

W propozycjach do specyfikacji CSS3 dodano kolejnych kilka kursorów:

• alias
• all-scroll
• cell
• copy
• context-menu
• no-drop
• none
• not-allowed
• nwse-resize
• col-resize
• row-resize
• vertical-text

Jak widać, tu już występuje interesujący nas parametr none. Problem w tym, że z przeglądarek, na których przeprowadziłem testy (Internet Explorer 6, 7 i 8, Chrome, Safari 4, Opera 9.64, Firefox 3.0.11), tylko FF obsługuje tę opcję. Obejściem tego problemu jest wykorzystanie specjalnie stworzonego pliku kursora blank.cur będącego jednopikselowym, przeźroczystym plikiem. Aby uzyskać niewidoczny kursor w jak największej liczbie przeglądarek, używamy w CSS stylu:

Pierwsza wartość pozwoli nam na ustawienie przeźroczystego kursora w przeglądarkach nie obsługujących wartości none, a none schowa kursor w Firefoxie. Rozwiązanie to nie działa, niestety, w Operze (która nie obsługuje żadnej z tych wartości), a tylko częściowo działa w Chromie (zamiast przeźroczystości wyświetlana jest czerń — z tego względu stworzyłem 1×1px obraz kursora, aby jego widoczność w Chromie była jak najmniejsza).

Kiedy (jeżeli) CSS3 wejdzie w życie, wszystkie przeglądarki powinny obsługiwać już atrybut none i będzie on wystarczający do działania.

Jedną z niewielu wad NetBeansa, jaką na razie odkryłem jest to, że przy budowaniu projektów z zewnętrznymi bibliotekami, wrzuca je do katalogu /lib, który potem trzeba przenosić razem z plikiem .jar programu. Jest to lekko kłopotliwe.

Istnieje możliwość wygenerowania pliku .jar zawierającego w sobie wszystkie biblioteki, ale z poziomu NetBeansa bezpośrednio nie da się tego zrobić. Poniżej przedstawiam rozwiązanie znalezione na NetBeans Wiki.

W katalogu projektu otwieramy plik build.xml i wewnątrz znaczników <project></project> wprowadzamy następujący fragment:

Zamieniając ciąg [sciezka_do_pliku_biblioteki] ścieżką do pliku biblioteki ;-)

Jeśli potrzebujemy dołączyć większą ilość plików .jar, powielamy linię

tyle razy, ile plików nam potrzeba.

Na koniec zapisujemy zmieniony plik i możemy już budować projekt tak, jak zwykle.
Folder /lib z naszymi bibliotekami dalej jest tworzony, ale są już nam one niepotrzebne, więc nie musimy ich ruszać, kiedy chcemy wysłać komuś nasz program.

Przykład projektu stworzonego w ten sposób