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.

XHTML 1.1 jest już standardem, jednak wielu młodych internautów korzysta z amatorskich poradników. Wiele książek narzuca stara, niemodną składnię tworzenia stron www, która może być w przyszłości źle interpretowana przez różnego rodzaju przeglądarki. Ok, zanim przejdziemy do omówienia najczęstszych błędów, warto zapoznać się z podstawowymi wiadomościami na temat XHTML.

Aby nasza strona na bieżąco spełniała standardy XHTML, musimy ją sprawdzać w walidatorze. Zamieszczony jest on pod adresem http://validator.w3.org. Narzędzie jest bardzo proste w obsłudze, nasz kod XHTML możemy sprawdzać na kilka sposobów:

• Podając URL do strony
• Wklejając kod źródłowy do pola tekstowego
• Uploadując plik z kodem XHTML

1. DOCTYPE

Aby w ogóle zacząć pracę z XHTML, przed jakimikolwiek znacznikami należy podać przeglądarce informację o tym, iż ma doczynienia z dokumentem XHTML. Informujemy ją o tym podając na samym początku dokumentu kod:

[html]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/html]

2. Zakaz krzyżowania znaczników

Zasada znana już od wieków. Prawidłowymi przykładami są linie:

[html]some text
some text[/html]

ale nie linia, w której znaczniki krzyżują się:

[html]some text[/html]

NOTE: (powyzsze listingi sa tylko przykladami, zamiast b uzywa sie strong, a tagowi i odpowiada em)

3. Wszystkie znaczniki muszą być prawidlowo zamknięte.

Każdy otwarty znacznik który reprezentuje w sobie jakąś treść (contents) musi być odpowiednio zamknięty, dajmy dla przykładu [html]

…

,

…

[/html]. Są jednak wyjątki, znaczniki nie mające w sobie żadnej treści, na przykład obrazek, linia pozioma, znacznik załamania linii. Takie znaczniki zamykane są bezpośrednio przed kończącym znakiem tagu >, dla przykładu: [html],
[/html]

4. Nazwy znaczników piszemy małymi literami.

Wszystkie nazwy tagów, jego parametry piszemy zawsze małą literą, jeżeli tego nie zrobimy, validator uzna to jako błąd. Dodatkowo wszystkie parametry muszą znajdować się pomiędzy znakiem cudzysłowia “.

5. Nie używaj auto generatorów FrontPage

Linki FrontPage, generowany przez niego DHTML, formularze, liczniki wejść, foto galerie i wiele innych skryptów tworzonych automatycznie poprzez FrontPage często nie są zgodne z XHTML.Kod najlepiej pisac własnoręcznie.

6. Wszystkie obrazy i linki mają opis!

Każdy obraz ma wymagany atrybut alt=”" (dla linków jest to title=”"), który zawiera opis obrazka. Po co? Wykorzystywany jest przeglądarki w momencie, gdy obraz nie zostanie prawidłowo załadowany, lub jako alternatywa w przypadku przeglądarek tekstowym. Minimalny prawidłowy kod dla umieszczenia obrazka:

[html][/html]

7. Elementy liniowe w elementach blokowych.

Jest kilka elementów, które stanowią ciało dla treści strony (dla contentu): h1 (nagłówki), p (paragrafy, akapity), blockquote oraz hr. Te elementy mogą występować bezpośrednio w body, resztę tagów (z wyjątkami) należy umieścić w owych znacznikach. Prawidłowym zagnieżdżeniem tekstu jest:

[html]

Text in a page

[/html]

ale niedopuszczalny jest taki sposób:

[html]Text in a page[/html]

8. Poprawny amperstand w tekście

Niewątpliwie częstym błędem programistów jest błędne stosowanie amperstandów w treści strony. Zamiast & należy użyć znaku specialnego &. Poniżej znajduje się błęda interpraetacja:

[html]Next[/html]

czas na przeróbkę:

[html]Next[/html]

9. Blokowe skryptowanie kodu.

Nauczeni jestesmy uzywac komentarzy w JavaScript oraz CSS w taki sposób: . Jest to sposób przestarzały, najlepiej wykorzystać ponyższy przykład:

[html]

[/html]

10. Pozbywamy się starych sposobów

Jest kilka przestarzałych elementów pochodzących jeszcze za czasów HTML, poniżej wypunktuję które elementy zastąpić prawidłowymi:

• <script language="javascript"> zamienić na <script type="text/javascript">
• <body topmargin="0" marginwidth="0" marginheight="0" leftmargin="0"> zamienić na styl CSS: body { margin: 0px; padding: 0px; }
• <img src="picture.jpg" border="0" width="10" height="10" alt="Picture" /> (brak elementu border) zmienic na <img src="picture.jpg" width="10" height="10" alt="Picture" /> i w stylu dodać img { border: 0px; }
• <img src="picture.jpg" hspace="5" width="10" height="10" alt="Picture" />, brak elementu HSPACE i WSPACE, zastąpić w css: img { margin-left: 5px; margin-right: 5px; }
• Wyrównywanie danych: <p align="right"> lub <img align="left" … /> jest błędne, należy w CSS napisac linie (przykładowo): .textright { text-align: right; } .floatleft { float: left; }
• <form name="loginform"> formularz nie ma atrybutu name, należy zastąpić na unikatową nazwę elementu id=”".
• Brak atrybutów width, height, border, cellpadding, bordercolor, celpadding. Należy zastąpić atrybutami w stylu: width, height, border, padding, corder-color.
• Brak elementu <font> i atrybutu color=”", należy zastąpić <span style=”color: red”> … </span>

Częściowe tłumaczenie artykułu