jQuery Animate i Easing

May 08

jQuery Animate i Easing

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.

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.

Read More
Athlan 2 comments CSS, Internet, JS/Ajax, Planeta, Publikacje, Solutions, XHTML, jQuery

JS Gamble game

May 16

JS Gamble game

Wspólne wieczory z przyjaciółmi na wycieczce – to jest to – chyba każdy doświadczył gry w karty po nocach. Ale co jak na wycieczkę jedzie delegacja “komputerowców”, którzy nie biorą ze sobą nic oprócz ubrań, kawy i notebooków? Programista ma jedną przewagę nad innymi ludźmi – może stworzyć sobie własny wirtualny entertejment, kiedy pod ręką brak np… grę w kości kości.

Do szczęścia potrzebny był mi paint, notatnik i znajomość JavaScript. Stworzenie mini-gry kości zajęło niecałe 10 minut i fun na całą noc :-P

Zasady gry:

Chyba każdemu znane, ale przypomnijmy:

Kości to gra dla 2-4 osób, w której gracze turlają kostkami, by uzyskać określone układy oczek, za które otrzymuje się punkty. Wbrew pozorom nie jest to gra zależna tylko od szczęścia — liczy się w niej raczej umiejętność kalkulacji.

W każdej z 13 kolejek każdy z graczy ma do dyspozycji trzy rzuty kostkami. Pierwszy z nich odbywa się zawsze wszystkimi pięcioma kostkami, a w drugim i trzecim, które nie są obowiązkowe, wybrane kostki mogą zostać zatrzymane; rzut odbywa się wtedy tylko niezatrzymanymi.

  • Więcej zasad: http://www.kurnik.pl/kosci/zasady.phtml
  • Zaznaczamy te kości, którymy chcemy losować, mamy 3 rzuty dowolnymi kościami, potem przekazujemy myszkę koledze.
  • Gdy nie jest zaznaczona żadna kość do losowania, oznacza to, że chcemy losować wszystkimi kośćmi.

Have fun ;p

Read More
Athlan 3 comments JS/Ajax, Private

jQuery form post ajax request

Feb 22

jQuery form post ajax request

Już kiedyś interesowałem się jQuery, ale w związku z podjęciem się nowego, dużego projektu postanowiłem pogłębić swoją wiedzę i pobawić się tą biblioteką.

Jako, że klient ma bzika na punkcie przeładowań ajax postanowiłem zaimplementować automatyczne przesyłanie formularzy w tle i wklejanie w <body> response żądania. Od strony PHP sprawa wygląda bardzo prosto – jeżeli request został wysłany przez jQuery, wyświetlamy tylko to, co jest pomiędzy <body> i </body>. Po wysłaniu requesta, jQuery powinno wkleić wynik do body na naszej stronie.

Przykładu nie będę tłumaczył, bo wydaje mi się trywialny.

Dodatkowe ficzery:

  • disable submita do momentu, aż ajax nie otrzyma odpowiedzi (aby użytkownik nie mógł kliknąć drugi raz),
  • automatyczne wykrywanie adresu URL, do którego odnosi się formularz (jeżeli nie sprecyzowano atrybutu action, wówczas wysyłamy żądanie do window.location).

Aby nasz formularz zaczął przesyłać dane w tle wystarczy dołączyć plik jquery.autoload, a w kodzie napisać:

$(document).ready(function() {  InitAjaxPost(' ... SUBMIT_ID ... '); });

Ten sposób nie rozwiązuje przesyłania pól typu file.

Read More
Athlan 7 comments JS/Ajax, Publikacje, jQuery

Szkoła hackerów

Aug 21

Tak się składa, że czasem szperam w kodach źródłowych witryn. Szkoła hackerów – kurs “hackingu”, który się reklamuje po całym Internecie (padła propozycja również dla mojego serwisu lookme.pl) nie dba o swoją aplikację webową.

Jeżeli stawiamy walidator do formularza, który ma obsłużyć dane wprowadzone przez użytkownika, musimy:

  1. Sprawdzić je po stronie serwera, jeżeli przejdą proces walidacji, dopiero potem podjąć akcję, w przypadku wystąienia błędów – wyświetlić je użytkownikowi.
  2. (Ewentualnie) Poinformować o błędzie już po stronie użytkownika bez przeładowania strony ani bez użycia jakiegokolwiek requestu ajax (sprawa kosmetyczna, niekonieczna).

Każdy programista powinien powiedzieć, że walidacja po stronie serwera jest najważniejsza, już pomijając tą po stronie użytkownika, bo przecież kod JS można modyfikować, więc może go teoretycznie nie być.

Już raz Szkoła Hackerów dała popis – dziura SQL Injection. Specjaliści? Nawet na forum przedszkole (forum.php.pl) rzadko zdarzają się aż tak amatorskie kody.

Narzędziem firebug sprawdziłem formularz kontaktowy szkoły hackerów. Okazało się, że formularz posiada atrybut onsubmit, który wykonuje funkcję javascript valid(). Za pomocą narzędzia Firebug pozwoliłem sobie ją pominąć, tak, aby formularz zawsze otrzymywał true przy onsubmit (czyli się wykonywał). Okazało się, że dane po stronie serwera nie są sprawdzane. Nie jestem w stanie zdiagnozować, czy mail się wysłał, ale w takim przypadku użytkownik otrzymuje komunikat:

Twoja wiadomość została wysłana. Odpowiemy tak szybko, jak tylko będzie to możliwe, z reguły w ciągu 24 godzin. Odpowiedź zostanie przesłana na podany przez Ciebie adres e-mail ().

Amatorka?

Read More
Athlan 2 comments Internet, JS/Ajax, PHP, Security, Wykop

Ocenpizze.pl

Jul 24

22 lipca oficjalnie wystartował mój nowy projekt: ocenpizze.pl. Każdy użytkownik może m.in.:

  • oceniać pizzerie wg 3 kategorii: wystrój, obsługa oraz jakość podawanego jedzenia wraz z dodaniem osobistego komentarza,
  • wyszukiwać pizzerie w swoim mieście/województwie,
  • uzyskiwać informacje o aktualnie otwartych lokalach w danej lokalizacji w danym czasie (innowacyjny pomysł na polskiej scenie gastronomicznej),
  • proponować nowe lokale.

Właściciele lokali mogą:

  • uzyskać dostęp do panelu administracyjnego,
  • uzupełniać godziny otwarcia swojego lokalu,
  • dodawać fotografie i logo lokalu,
  • tworzyć prezentację swojej firmy na zasadzie tworzenia zakładek.

Serwis po dwudniowej pracy zyskał sympatię wielu użytkowników. Tych, którym podoba się serwis, zapraszam na wykop.

Read More
Athlan 2 comments Internet, JS/Ajax, Projects, Solutions, Wykop

Weryfikacja spamu?

Aug 12

Dzisiaj chciałbym się zająć ukrywaniem zewnętrznych obrazów. Dlaczego wart się chronić. Wiele spambotów wykorzystuje metodę weryfikacji dostarczenia wiadomości poprzez wyświetlenie obrazu. Jeżeli program kliencki to aplikacja internetowa (chociażby gmail, onet poczta, poczta interii itp) nie będzie najmniejszego problemu weryfikacji obrazu. Jak to działa? Spambot buduje linki:

http://spam.com/logo.jpg?m=jakis@email

Co mu to daje. Do każdego listu dołączone są obrazy, może być to logo, znaczek firmowy bądź też ukryty gif 1×1 pikseli. Wszystko po to, aby użytkownik nie zorientował się, że otwarcie niepożądanej wiadomości jest weryfikowane. Po co weryfikacja? Jeżeli list zostanie otwarty, spambot będzie kontynuował wysyłanie maili, jeżeli nie, zaprzestanie działań, bądź sprawdzi jeszcze kilka maili.

Lekarstwo na ten problem zastosował gmail, ukrywając wyświetlanie grafiki w mailach dla bezpieczeństwa użytkowników. Sprawa przedstawia się bardzo prosto, ale daje oczekiwane rezultaty. Z pomocą przychodzi nam kawałek kodu:

http://phpfi.com/255830

Jeszcze się z takim przypadkiem nie spotkałem, ale spamboty mogą zacząć weryfikować otwierając dokumenty .js, .css, .js zawarte w nagłówkach.

Kolejną rzeczą, której należy unikać to rezygnacja z subskrycji w podejrzanych mailach. Tak naprawdę może ona zasubskrybować nasz adres poczty elektronicznej, weryfikując rezygnację.

Read More
Athlan 0 comments Internet, JS/Ajax, Solutions