Nie można kwestionować faktu, że jQuery.animate() jest jednym z najbardziej potężnych narzędzi jQuery. Służy on do animowania atrybutów CSS (czyli zmiany ich wartości w czasie od obecnego stanu A do definiowanego stanu B). Najprostszą implementacją jQuery Animate jest podanie zbioru atrybutów CSS, które mają ulec zmianie oraz czasu, w jakim ta zmiana ma nastąpić. Nie będę się zagłębiał w najprostsze przykłady użycia, są one dostępne w oficjalnej dokumentacji jQuery.

Należy pamiętać, że dzięki jQuery jesteśmy w stanie nie tylko płynnie zmieniać kolory, wielkość czcionki, obramowanie, ale także pozycje elementów, nadając stronie dynamicznego kształtu. Domyślnym sposobem animowania (easing) jest płynne przechodzenie. Istnieje natomiast sposób na zmianę adaptera animowania. Robert Penner – autor pluginu jQuery Easing dostarczył nam niewiarygodnie efektowne i proste w implementacji narzędzie. Na oficjalnej stronie pluginu można znaleźć wiele przykładów animacji, które dostarcza nam dodatek. Efekty widoczne są zwłaszcza przy animowaniu pozycji i wymiarów obiektu, ale następują także w przypadku zmiany koloru – czyli są aplikowane do zmiany stanu każdego z atrybutów CSS.

Dziś postaram się pokazać efekty, jakie można uzyskać za pomocą jQuery Animate rozszerzonego o jQuery Interface oraz Easing.

• Przykład różnego rodzaju easingu.

Pierwszym krokiem jest wygenerowanie własnej biblioteki jQuery Interface. Dzięki generatorowi, jesteśmy w stanie ściągnąć tylko te części Interface, które są nam de facto potrzebne, zmniejszając jednocześnie ilość kodu. Klikamy ‘deselect all components’, a w sekcji Effects wybieramy efekty, których będziemy używać. Mnie w tej chwili interesuje Bounce i Slide. W paczce otrzymamy wersję deweloperską (z wcięciami) oraz minified, gotową do publikacji na serwerze.

Do wykorzystania efektu slideowania a’la iPhone (elastyczne odbicie od krawędzi ściany ekranu) sprowadza się drobny kawałek kodu, w którym istotnym jest parametr easing:

$('#example').animate({ left: 500 }, { duration: 1000, easing: 'easeOutElastic' })

Na pewno komuś się przyda.

Ostatnio byłem zobligowany napisać nową klasę tagów do mojego projektu Sypacz.pl, która de facto zachowała stare API, lecz rozszerzyła swoje funkcjonalności, więc w kodzie projektu nie było wielu zmian. Wena spowodowała to, że zacząłem pisać kod od zera.

Cały problem polega na tym, aby napisać na tyle elastyczną klasę tagów, która przyjmie nam zestaw danych, a następnie zaprezentować ją w formie chmury, czym zaopiekuje się arkusz stylów CSS:

Nazwa tagu => Ilość występowań

Parę osób mnie pytało, jak wyciągnąć takie informacje z bazy danych:

SELECT tag_name, COUNT(tag_name) AS tag_times FROM tags GROUP BY tag_name ORDER BY tag_times LIMIT 1, 50

Wykorzystałem obiekt Vframe_Attribute, aby ustandaryzować komponent względem pozostałych w moim frameworku. Jeżeli ktoś nie chce używać obiektu Attribute, może w prosty sposób przekształcić klasę tagów, otrzymując ten sam efekt, deklarując tylko atrybut chroniony protected $_aAttributes = array();. Temat chmury tagów wydaje mi się na tyle trywialny, że nie ma się co nad nim zbyt wiele rozwodzić, zamieszczę tylko klasę i opiszę krótko w przykładach jej możliwości.

• Vframe_Tagcloud – klasa tagów,
• Vframe_Attribute – pomocnicza klasa atrybutów dla stosu $_aAttributes, dziedziczenie można usunąć i zadeklarować atrybut samemu.

Aby stworzyć nowy obiekt tagów, po prostu wywołujemy konstruktor:

$oCloud = new Vframe_Tagcloud();

Konstruktor nie przyjmuje żadnych argumentów, wiec możemy od razu przejść do podawania obiektowi tagów. W tym miejscu warto nadmienić, że każdy znak jest rozróżniany (ze względów elastycznych), więc jeżeli chcesz, aby Nazwatagu oraz nazwatagu były rozpoznawane jako jeden klucz, wypadałoby użyć funkcji strtolower lub mb_strtolower (dla Multibyte Strings):

foreach($aDataTags as $iKey => $aRow)
  $oCloud->add(strtolower($aRow['tag_name']), $aRow['tag_times']);

Najistotniejszą częścią klasy jest sposób renderowania chmury, które może działać w dwóch trybach:

• Tryb prosty zwraca nam nazwę tagu oraz jego wagę po przeliczeniu w formie liczby.
• Tryb zaawansowany zwraca nam nazwę tagu oraz tablicę z danymi:
  • level – waga tagu po przeliczeniu,
  • count – ilość występowań, taka jaką podaliśmy,
  • count_percentage – informacja, w jakiej procentowej części ilości występowań znajduje się tag, przyjmując za 100% tag, który występuje najczęściej.

Aby w prosty sposób wyrenderować chmurę tagów, używamy poniższego przykładu:

$aDataTagsRender = $oCloud->render();

Najczęściej używa się trybu prostego. Oba tryby są dalej rozbudowane, bowiem mamy możliwość zdefiniowania zakresu i dokładności wag tagów. Domyślnie wagi tagów zawierają się pomiędzy 1, a 10. Możemy na przykład przyjąć, że najmniejszą wagą jest liczba 3, największą 5, a precyzja wag tagów to 2 miejsca po przecinku:

$aDataTagsRender = $oCloud->render(3, 5, 2);

W celu uniknięcia precyzji po przecinku (chcemy otrzymać liczby całkowite), ustawimy precyzję na 0.

Aby wywołać tryb zaawansowany, musimy podać 4 argument dla metody render() i ustawić go na true.

$aDataTagsRender = $oCloud->render(1, 5, 0, true);

Warto w tym miejscu nadmienić, że tagi mogą nie być posortowane alfabetycznie (co ma miejsce podczas tworzenia chmury tagów). Wystarczy wywołać funkcję ksort (key sort).

Finalny przykład używania klasy tagów, celem wywołania klas CSS level_X, gdzie X to liczba całkowita z zakresu od 1 do 10, resztę robi CSS (kolorowanie, nakładanie rozmiaru):

if(count($aDataTags)) {
 
$oCloud = new Vframe_Tagcloud();
 
foreach($aDataTags as $iKey => $aRow)
  $oCloud->add(strtolower($aRow['tag_name']), $aRow['tag_times']);
 
$aDataTags = $oCloud->render(1, 10, 0);
ksort($aDataTags);
 
foreach($aDataTags as $sTag => $iTag)
  echo '<a href="' . $this->route('tag', $sTag) . '" class="level_' . $iTag . '">' . $sTag . '</a>';
 
}

Po trzech miesiącach użytkowania, jestem w stanie napisać konstruktywną recenzję iPhone 3G.

Na samym w stępie chciałbym zaznaczyć, że urządzenie jest warte swojej ceny. Moja opinia nie jest w żaden sposób zdeterminowana ślepą miłością do marki Apple. Nie będę się tu rozwodził nad wyglądem, jest to indywidualna sprawa każdego użytkownika telefonu – dla mnie iPhone ma po prostu elegancki wygląd. Urządzenie wyposażone jest w 4 przyciski: blokowanie telefonu, home button (powrót), wyciszenie i sterowanie poziomem głośności – klawiaturę zastępuje ekran dotykowy. Warto nadmienić, że pojawia się ona tylko wtedy, gdy jest potrzebna. Telefon ma bardzo czuły ekran z obsługą multi-touch. Wbudowana funkcja auto-jasności pozwala oszczędzać baterię w miejscach ciemnych – polega to na redukcji oświetlenia ekranu w mroku, gdyż ludzkie oko doskonale widzi, co dzieje się wokół, a rozświetlony (jak za dnia) ekran telefonu powodował by irytację (jak w urządzeniach starszej generacji).

Zwykłe użytkowanie urządzenia jako telefon

Produkty Apple charakteryzują się dużą intuicyjnością interfejsu. Telefon podzielony jest na dwie zasadnicze części: Text messages (SMS) i telefon. Obie “aplikacje” zintegrowane są z komponentem kontaktów, który jest de facto ogólnodostępny dla innych aplikacji (twórcy telefonu podeszli do tej kwestii bardzo ideologicznie). Zasadniczym brakiem w oprogramowaniu jest brak raportów doręczenia SMS, ale można to obejść crackując telefon, o czym później. Dodatkowym minusem jest długie ładowanie się listy SMS przy jej większej ilości, co również można obejść crackując telefon, o czym również później : -). Kolejnym minusem jest to, że wszystkie kontakty przechowywane są w pamięci telefonu, a nie na karcie SIM, co gorsza – nie ma możliwości eksportu kontaktów na kartę SIM, a jedynie istnieje możliwość importu. Nie ma się czego obawiać – przy każdej synchronizacji iPhone z iTunes, kontakty zapisywane są w backupie.

Telefon z niezniszczalnym software

Zdarzyło mi się “popsuć” oprogramowanie iPhone instalując nieautoryzowane przez Apple oprogramowanie na własną odpowiedzialność. Przywrócenie telefonu do stanu używalności? Nic prostszego – instalujemy nowy software na iPhone via iTunes i klikamy przycisk Restore – wybieramy nasz backup i gotowe. Wszystkie kontakty, SMS’y, save’y z gier, aplikacje, muzyka widnieją z powrotem na ekranie naszego telefonu.

Urządzenie przyjazne użytkownikowi

Wyobraź sobie, że słuchasz muzyki, masz telefon w kieszeni, jest zimno. Musisz ściągnąć rękawiczki, wyciągnąć telefon, włączyć odtwarzacz muzyki, wejść playlistę, kliknąć next, schować telefon, założyć rękawiczki. Nie ma się czym zachwycać, bo rozwiązania te zostały już zaimplementowane z poprzednich telefonach, ale Apple nie zapomniało o przycisku kontrolnym w zestawie słuchawkowym. Pomijając to, że wygląda elegancko, pozwala nam na odebranie/odrzucenie rozmowy i kontrolę iPod’a (play/pause – single click, next – double click, previous – tripple click).

Wcześniej wspomniałem o ekranie dostosowującym się do warunków oświetlenia. Gdy jest ciemno – ekran ciemnieje, bo nasze oko akomoduje się do otoczenia, oszczędzamy tym samym baterię. Gdy przykładamy telefon do ucha, ekran wygasza się, aby uniknąć przypadkowych kliknięć w ekran dotykając go uchem – tutaj również oszczędzamy baterię.

Szybka edycja danych – na liście wystarczy wykonać gest przeciągnięcia palca w prawą stronę i pojawi nam się przycisk usunięcia go ze stosu – genialne. Pomyliłeś się pisząc SMS? Potrząśnij telefonem, a iPhone zaproponuje Ci wprowadzenie korekty. Niewygodnie pisze Ci się SMS’a? Przechyl iPhone na bok, a dostaniesz do dyspozycji większa klawiaturę i większy obszar pola tekstowego. Trzymasz iPhone w ręku i słuchasz muzyki? Potrząśnij telefonem, a zmieni się track. Chcesz przeglądnąć swoje albumy z iPodzie? przechyl telefon, a wyświetlą Ci się okładki, które dodałeś w iTunes.

Szukanie w całym telefonie – kolejna opcja, która pomaga mi szybko dostać się do interesujących mnie rzeczy. Jedno pole wyszukiwania odpowiada za wyniki z: aplikacji, kontaktów, maili, sms’ów, tracków, artystów i albumów z iPod’a.

Nie ukrywajmy – Apple dostarcza nam masę aplikacji, z czego wiele jest darmowych. Co więcej, nasz telefon stara się utrzymać całe oprogramowanie w najnowszej wersji. Z telefonu możemy zrobić nawet zwykłą latarkę (której nie ma w urządzeniu) – aplikacja rozjaśnia ekran i pokrywa go białym kolorem. Nie wspominam już o masie gier serwowanych przez AppStore za darmo!

Przeglądanie Internetu nie było dla mnie prostsze – wbudowana przeglądarka Safari z obsługą kart i schowka jest idealnym narzędziem do surfowania po Sieci. Player YouTube również spełnia moje oczekiwania. Jeżeli jesteś społecznikiem – zintegruj swój telefon z Blip’em, Twitter’em, Flaker’em, Facebook’iem, importuj swoje ulubione kanały RSS, dodaj konta pocztowe i zainstaluj Parlingo – komunikator z obsługą sieci Gadu-Gadu, Jabbera, ICQ, AOL, Google Talk, MSN i innych.

Nieautoryzowane oprogramowanie na iPhone – Jailbreak

Jest wielu zwolenników crackowania oprogramowania iPhone, jest też wielu przeciwników. Moje stanowisko w tej sprawie – crackować. Co nam to daje? Wcześniej opisałem wiele nieudogodnień, które możemy poprawić w oprogramowaniu, np:

• raporty SMS są dostępne w Cydii pod nazwą iDelivery,
• możemy wyłączyć przycisk automatycznej sekretarki w telefonie, który może nam się zdarzać przypadkowo kliknąć,
• mamy możliwość pobierania filmików z YouTube’a za pomocą MXTube,
• możemy scrobblować piosenki przesłuchiwane w iPodzie do last.fm za pomocą Scrobbl,
• mamy możliwość zainstalowania kamerki, standardowo niedostępnej w iPhone – Cycorder,
• odblokowanie nowych theme jest teraz możliwe – Winterboard,
• dostosowanie telefonu, wyłączenie EDGE, wyłączanie niepotrzebnych ikonek w Springboard (typu giełda) – BossPrefs.

I na koniec cały smaczek łamania oprogramowania:

Czyli… telefon mi ‘zamula’

Długie ładowanie SMS’ów, kontaktów, kalkulatora lub alarmów? Zcrackuj swój telefon i zainstaluj Backgrounder z pakietów Cydii. Pozwala on na działanie niektórych aplikacji “w tle”. Niektóre możemy ustawić jako automatycznie pracujące w trybie niewidocznym, innym nie pozwolić na taką opcję. Ile razy zdarzyło Ci się przerwać grę, gdy chciałeś odczytać SMS? Przytrzymaj Home button, gra schowa się do paska, odpisz na SMS’a i ponownie kliknij na ikonkę gry – powrócisz do stanu pierwotnego, a nie (jak w legalnym oprogramowaniu) proces zostanie całkowicie zakończony. Analogicznie sprawa wygląda w przypadku korzystania z komunikatora (np. Parlingo). Aby wyjść z trybu background, ponownie przytrzymaj Home button. Przycisk wprowadzania aplikacji w stan niewidoczny można skonfigurować indywidualnie, może to być np. Power button (Home jest chyba najwygodniejszy).

Dyskusja na temat działania aplikacji w tle jest burzliwa – pamiętajmy jednak, że crackując software narażamy się na nieoptymalne działanie telefonu i szybkie zużycie baterii, za co Apple nie odpowiada.

Jestem zwolennikiem ułatwiania sobie życia wykorzystując Internet do robienia zakupów i zarządzania swoim kapitałem. Natomiast po ostatniej akcji na Allegro, zacząłem wątpić w moje ograne ideały, uznaję to za ostrzeżenie i poprawiam markerem cienką linię pomiędzy realnym shoppingiem, a dokonywania zakupów via Allegro na znacznie grubszą. Zamiast kupić pada do Play Station 3 kiloma kliknięciami, musiałem ruszać tyłek po kilku instytucjach.

Wszystko zaczęło się 25 czerwca, kiedy postanowiłem zakupić wcześniej wspominanego pada. Mam zwyczaj, że jeżeli jest opisana procedura płatności za przedmioty, a kontrahent jest Super Sprzedawcą, robię to od razu po dokonaniu zakupu – tak było i tym razem. System Sello wysłał mi potwierdzenie złożenia zamówienia.

Od 26.06 do 07.07 obserwowałem status wysyłki. Przelewu nie zaksięgowano po 13 dniach, stąd status wysyłki zakolorowany na czerwono. Sprawa zaczyna śmierdzieć, bowiem nie mogę się dodzwonić do kontrahenta (number busy), a gdy już mi się to udaje – nikt nie odbiera. Kilkukrotna próba kontaktu telefonicznego i mailowego pozostawiona bez odpowiedzi motywuje mnie, żeby…

09.07 wypełniłem wniosek w Centrum Sporów Allegro. Tego samego dnia wybrałem się na Policję, aby złożyć zawiadomienie o popełnieniu przestępstwa na tle wyłudzenia internetowego. Na komendzie czekałem około 40 minut zanim mnie przesłuchali, potem straciłem 30 minut na przesłuchanie i sporządzenie raportu.

Czas płynie i płynie…

27.07 – kontrahent dzwoni z wyjaśnieniami. “Okazało się”, że odwiedziła go Policja. Tłumaczenie: padła im baza klientów i zamówień, przez co nie mogli mnie zidentyfikować, pomimo szukania transakcji w historii sprzedaży na Allegro (przecież jest lista czarno na białym). Na moim koncie powinny być już zaksięgowane zwrócone pieniążki, ale niestety nie mogą wysłać mi mojego pada ze względu na to, że są zablokowani przez skarbówkę… muszą się rozliczyć. Za wszystko jeszcze raz przeprasza…

28.07 godz 11:00, telefon z Policji. Wezwanie na jutro, punkt 9 rano w pokoju numer 53. Sprawdzam konto, pieniążki są. Drukuję potwierdzenie zaksięgowania zwrotu jako załącznik do jutrzejszych zeznań.

29.07 godz 9:00 (wakacje są, daliby pospać). Zaniechujemy ściganie, dziękuję za pomoc. Kończę spór transakcyjny w panelu na Allegro i wystawiam negatywny komentarz:

Towar nie dotarł do mnie do dziś. Po interwencji Policji sprawa się wyjaśniła. Natomiast nieuczciwym wobec innych użytkowników Allegro byłoby wystawienie poz. lub neut. komentarza za transakcję, która nie doszła do skutku. Miesiąc w plecy.

Projektowałem wiele serwisów, które miały zintegrowane z forum komponenty takie jak:

• rejestracja,
• przypomnienie hasła,
• zmiana hasła, nicku lub adresu email,
• usunięcie konta.

Wówczas nie było żadnego problemu – wystarczyło wszystkie te akcje z forum przekierować na URL’e obsługiwane przez CMS, który zajmował się zmianami  tabelach forum. Dlaczego przekierować? Jeżeli ktoś rejestruje się w serwisie, jest zarejestrowany na forum, natomiast, gdy rejestruje się na forum, nie jest rejestrowany w serwisie. To CMS integrujemy z forum, a nie forum z CMS’em (chyba, że zamierzamy inaczej, wtedy na odwrót).

Ostatnio klient zażyczył sobie, żeby zintegrowane było również logowanie. Nie najlepiej widzi mi się implementacja systemu autoryzacji z forum w CMS’ie, więc poszedłem “na łatwiznę”, bowiem miałem do czynienia z phpBB. Do osiągnięcia celu postanowiłem wykonać dwa kroki:

1. wysłać żądanie POST do forum na adres logowania z wypełnionymi polami POST z formularza logowania w CMS’ie,
2. przechwycić wysłane przez forum ciasteczka i przekazać je użytkownikowi.

Do połączenia się z forum via http użyłem HttpRequest. Wyszło z tego parę linijek kodu.

Projektując serwisy zaczynam ostrożnie podchodzić do usability. Temat jest bardzo wrażliwy, każdy webmaster to inne zdanie. Dziś chciałbym przedstawić problem logowania do serwisu. Oprócz hasła, przy logowaniu używamy:

• standardowo nazwy użytkownika,
• w niektórych serwisach adresu email, rzadziej spotykane zjawisko.

W trosce o użytkowników w kilku moich serwisach zastosowałem możliwość logowania się na adres email lub nazwę użytkownika. Wszystko po to, aby ułatwić dostęp do ukrytej części witryny, aby nikt nie “zwątpił” bo nazwy użytkownika, lub adresu email, który podał przy zakładaniu profilu. Sam używam w sieci kilku adresów email oraz kilku prefixów i suffixów do nicka Athlan. Mam problem z zalogowaniem, gdy danie nie pasują, a potrzebuję dostęp tylko na chwilę.

Przygotujmy zatem tok myślenia programu, który pobierze dane, w zależności od tego, jakie dane podał użytkownik. Pomijam walidację hasła etc:

1. Wykrycie, czy nick jest adresem email.
2. Jeżeli tak, pobierz dane użytkownika po polu user_mail i zapisz je do zmiennej $aUser.
3. Jeżeli nie, pobierz dane identyfikując rekord po kluczu user_name i zapisz pobrane dane do zmiennej $aUser.

Jak możemy zauważyć, w obu przypadkach dane zapisujemy do tej samej zmiennej $aUser, więc możemy je dalej tak samo wykorzystywać. Różni się tylko pobieranie, dlateg nie trzeba w żadnym wypadku powielać kodu.

• Przykładowy kod logowania.

Jak słusznie zauważył devnull, należy wykluczyć możliwość użycia znaku małpy w loginie przy rejestracji użytkownika. Wyjaśnienie znajdziecie w komentarzach.

Dla programisty nie jest wiele pracy, a warto ułatwić dostęp użytkownikowi do serwisu. Usability na pierwszym miejscu ;-)