Charytatywna strona dla Filipa w HTML 5

Właśnie oddaliśmy do użytku stronę WWW mającą pomóc choremu chłopcu. Ktoś mógłby zapytać, co w niej jest takiego wyjątkowego? I miałby rację – nie jest to pierwsza ani jedyna strona, która pomaga dzieciom. Jednak dla nas jest ona wyjątkowa z dwóch, a może nawet z trzech powodów.

Po pierwsze, jest to strona zrobiona zupełnie charytatywnie, a piszę o tym nie po to by się tym pochwalić, tylko by podziękować wszystkim, którzy brali w tym projekcie udział, a jest komu i za co :). Szczególne podziękowania należą się Piotrowi oraz Bartkowi, którzy zgodzili się na realizację projektu poza swoim normalnym czasem pracy i tak jak cała reszta zespołu nie wzięli za to ani grosza.

Po drugie, zaproponowałem, aby spróbować zorganizować akcję pozwalającą nam na realizowanie podobnych stron cyklicznie, co zostało zaakceptowane i od tego roku będziemy się starali przynajmniej raz w roku zrealizować projekt o podobnym charakterze.

Po trzecie, brak ściśle określonego terminu realizacji tego projektu pozwolił Bartkowi na eksperymentalne wykorzystanie w projekcie kilku nowości, jeśli chodzi o kod. Oto kilka z nich:

HTML 5

Wszystkie podstrony są poprawnymi dokumentami HTML 5. HTML 5 jest w tej chwili w wersji testowej i ma zastąpić aktualną wersję HTML-a (4.01) i XHTML-a (1.0, 1.1, a nawet 2.0, która być może nigdy nie powstanie). Szacuje się, że prace nad HTML 5 zostaną całkowicie zakończone w... 2022 roku (tj. wtedy będą istniały przynajmniej dwie implementacje tego standardu), jednak specyfikacja ma osiągnąć całkiem dojrzały status już w 2012. Zostały jeszcze dwa lata, ale HTML 5 został tak zaprojektowany, by można było łatwo dostosować stopień jego wykorzystania do aktualnych możliwości przeglądarek.
W przypadku kodu strony Filipa nacisk został położony na maksymalną kompatybilność. Nie są tam używane żadne nowe elementy (tagi), ponieważ ich ostylowanie w starszych wersjach Internet Explorera wymaga włączonego JavaScriptu. Nie chcieliśmy takiego ograniczenia w tym projekcie, więc HTML 5 zastosowaliśmy bardzo defensywnie. Głównie miało to skutek ideowy (znamy i wspieramy HTML 5!), ale pozwoliło także na zmniejszenie bałaganu w kodzie. Oto co dał nam HTML 5 użyty w zakresie powodującym brak jakichkolwiek niepożądanych skutków ubocznych:

• krótszy, możliwy do napisania „z palca” DOCTYPE (po prostu: ),
• brak potrzeby podawania typu MIME dla skryptów (brak obowiązkowego type=”text/javascript”)
• i arkuszy stylów (brak type=”text/css”),
• zwięźlejsza deklaracja kodowania znaków w dokumencie (skrócony meta-tag: zamiast bardziej rozwlekłego z http-equiv),
• potencjalnie nieco większa semantyka dzięki zastosowaniu klas w miejsce nowych, semantycznych tagów HTML5 (choć w kodzie nie ma np. nav, to jest div class=”nav”).

@font-face

Jest to najnowszy i najszybszy sposób na zagnieżdżanie fontów. Postanowiliśmy sprawdzić czy ta nieprzetestowana przez nas dotąd metoda będzie możliwa do wykorzystania, a jeśli tak, to w jakim zakresie. Możliwe okazało się całkiem sprawne kodowanie i wyświetlanie całkowicie dynamicznych bloków tekstu z niestandardowymi czcionkami. To prawdziwy, żywy tekst! @font-face użyty został w nagłówkach oraz nazwach boksów. Jeśli jakaś przeglądarka nie obsługuje tej deklaracji, to wyświetli nagłówki zwykłym, dostępnym  w systemie tekstem. Nie należy się jednak tego spodziewać zbyt często, bo wsparcie dla @font-face jest już stosunkowo dobre i solidne (choć oczywiście trzeba przygotować dwie deklaracje: jedna dla przeglądarek, które format TTF obsługują, a drugą dla tych, co nIE ;-)).
 
Dodatkowo, by wierniej odtworzyć projekt graficzny, zastosowane zostały prawdziwe dynamiczne cienie CSS pod tekstem. Oczywiście IE nie obsługuje odpowiedzialnej za to własności text-shadow, ale z pomocą przyszły tu tzw. filtry, specyficzne dla przeglądarki z Redmond. Taki efekt jak cień pod tekstem to idealny kandydat do zastosowania progresywnego wzbogacenia – jeśli jakaś przeglądarka to obsługuje, to super, ale jeśli nie, to po prostu cienia nie ma i tekst jest odrobinę brzydszy (choć wciąż czytelny i użyteczny). Okazuje się jednak, że kombinacja własności text-shadow i filtrów sprawia, że cienie działają zarówno w nowszych wersjach Firefoxa (od 3.1), Opery, Chrome (od 2.0) i Safari, ale również w Internet Explorerze i to już od wersji 6!

Walidacja formularza: jQuery.validation

W dziale Kontakt została zastosowana walidacja formularza z wykorzystaniem wtyczki do jQuery o nazwie Validation. Skrypt ten oferuje bogate możliwości konfiguracji, więc postanowiliśmy z nich korzystać i rozszerzyliśmy jego domyślne zachowanie.
Sam kod HTML formularza został napisany bardzo prosto (i nie chodzi tu o nakład pracy :)) - nie zawiera komunikatów ani specjalnych klas czy elementów. Wszystko to jest dodawane dynamicznie, przy pomocy JavaScriptu, co zapewnia sama wtyczka. A nasze rozszerzenia sprawdzają przykładowo obecność gwiazdki w etykiecie przy danym polu. Jeśli skrypt odnajdzie gwiazdkę, to pole jest oznaczane jako obowiązkowe. Tego typu modyfikacje są typowo wewnętrzne, ale pomagają zachować bardzo ważną zasadę programistyczną DRY. Fakt, że pole jest obowiązkowe zdefiniowany jest jednoznacznie przez obecność gwiazdki i nie potrzeba dublować tej informacji np. poprzez wprowadzenie do kodu klasy required.

Ale nasze modyfikacje Validation nie są jedynie ciekawostkami technicznymi. W pełni widoczne dla użytkowników są następujące, dołożone przez nas, zachowania skryptu:

• wyświetlanie zielonego znaczka "odhaczone" po opuszczeniu poprawnie wypełnionego pola,
• krótkie miganie niepoprawnie wypełnionych pól,
• wyłączanie przycisku Wyślij zaraz po kliknięciu (żeby nie wysyłało formularza dwa razy; przycisk robi się szary, a jego etykieta zmienia się na "Wysyłam..."),
• wyświetlenie (w razie potrzeby) nad przyciskiem wyślij ogólnego komunikatu o niemożności wysłania formularza.

Możecie wypróbować formularz wysyłając zapytanie do Filipa lub zaoferować mu pomoc.  Serdecznie do tego namawiam.

Skrypt nawigacji

Napisany został od podstaw w jQuery. Do layoutu menu została dodana ikonka plusa, która pojawia się tylko po najechaniu myszą. Pojawia się i znika w małej, płynnej animacji. I jak Wam się to podoba?

Kompresja obrazków

Zmniejszyło to wagę strony

Sprite'y CSS

Kilka grafik złączonych jest w jeden obrazek PNG. Nie zawsze zmniejsza to ilość kilobajtów potrzebnych do transferu, ale zmniejsza liczbę żądań do serwera, a to wybitnie potrafi przyspieszyć szybkość ładowania strony.

Zachęcam do odwiedzania strony Filipa i przeklikania wszystkich zastosowanych tam nowinek i jeśli to możliwe to oczywiście do pomocy, chociażby przekazania 1% przy rozliczaniu rocznego PIT-u.

A jeśli masz jakieś pytania odnośnie wykorzystanych w tym projekcie rozwiązań, skomentuj ten wpis. Chętnie odpowiem na pytania.