WEBMASTERING. html 5 /CSS 3

Transkrypt

1 WEBMASTERING html 5 /CSS 3

2 I.POPRAWIONY INTERFEJS UŻYTKOWNIKA Nowe znaczniki stukturalne i atrybuty Na początku pomówimy o tym jak można wykorzystać funkcje HTML5 i CSS dla poprawy interfejsów użytkowników. Zobaczymy jak możemy stworzyć lepsze formularze, łatwo wystylizować tabele i poprawić dostępność naszych stron na urządzeniach wspomagających. Zobaczymy również jak można użyć generowanej treści dla poprawy użyteczności arkuszów stylów wydruku i zabdamy edytowanie z nowym aatrybutem contenteditable. Najpierw jednak rzucimy okiem na nowe elementy HTML 5 jakie pomoga nam lepiej ustrukturyzować naszą stronę. Najpierw pomówmy o poważnym problemie dotykającym dzisiaj wielu projektantów stron. Divitis chroniczny syndrom, który powoduje,że twórcy stron zawijają elementy w dodatkowe znaczniki div z ID takimi jak baner,pasek, artykuł czy stopka. Jest to bardzo zaraźliwe. Projektanci przenoszą Divitis między sobą niezwykle szybko, a ponieważ div'y nie są widoczne gołym okiem, nawet łagodne przypadki Divitis mogą pozostać niezauważone przez lata..oto powszechny symptom Divitis: <div id="navbar_wrap". <div id="navbar" <ul> <li><a href ="/">Strona Domowa</a></li> <li><a href ="/">Strona Domowa</a></li> </ul> </div> </div> Mamy tu listę nienumerowaną, która jest już elementem blokowym, zawiniętym w dwa znaczniki div, które również są elementami blokowymi. Atrybuty id w tych elementach zawiniętych mówią nam co robią, ale możesz usunąć przynajmniej jeden z nich aby otrzymać ten sam efekt. Nadużywanie znaczników prowadzi do rozdęcia stron, które są trudne do wystylizowania i zarządzania. Ale jest nadzieja. Specyfikacja HTML 5 lekarstwa w postaci nowych znaczników semantycznych, które opisują zawartość w nich zawartą. Ponieważ tak wielu projektantó zawiera paski, nagłówki, stopki i sekcje w swoich projektach, HTML 5 wprowadza nowe znaczniki specjalnie zaprojektowane,aby podzielić stronę na logcizne obszary. Zaprzągnijmy te nowe elementy do pracy. Razem z HTML 5, możemy pozbyć się Divitis z naszego życia.oprócz tych nowych znaczników strukturalnych, omówimy element meter i omowimy jak można użyć tych nowych dostępnych funkcji w HTML 5,abyśmy mogli osadzać dane w naszych elementach, zamiast przchwytywania klas i istniejących atrybutów. Krótko mówiąc, mamy zamiar dowiedzieć się jak używać porawnie znaczników do pracy. W tej części zbadamy te nowe elementy i funkcje. <header> Definiuje region nagłówka strony lub sekcji <footer> Definiuje region stopki dla strony lub sekcji <nav> Definiuje region nawigacyjny strony lub sekcji <section> Definiuje region logiczny strony lub zgrupowana zawartość <article> Definiuje artykuł lub wypełnia część zawartości

3 <aside> Definiuje drugorzędną lub powiązaną zawartość Niestandardowe atrybuty danych Pozwala na dodawanie niestandardowych atrybutów do dowolnych elementów używając wzorca data- [Wszystkie przeglądarki obsługują odczyt tego przez metodę JavaScript getattribute()] <meter> Definiuje wartość numeryczną wewnątrz zakresu <progress> Kontrolka pokazująca postęp w czasie rzeczywistym w kierunku celu Nowa definicja bloga z wykorzystaniem znaczników semantyczynych Jednym z miejsc gdzie z pewnością znajdzie się wiele treści wymagajacych znaczników strukturyzującyh jest blog. Masz zamiar mieć nagłówki, stopki, wiele typów nawigacji (archiwum, blogtroll czy łącza wewnętrzne), i oczywiscie artykuły czy posty. Użyjmy znaczników HTML 5 dla zbudowania makiety strony głównej bloga. Aby zorientować się co będzimy tworzyć, spójrz na poniższy rysunek. Jest to dość typowa struktura bloga, z nagłówkiem głownym, poziomą nawigacją pod nagłówkiem. W głównej sekcji każdy artykuł ma swój nagłówek i stopkę. Artykuły mogą mieć cytay wyrzucone lub wtrącenia. Jest pasek boczny, który zawiera dodatkowe elementy nawigacji. W końcu, strona ma stopkę z kontaktem i informacjami o prawach autorskich. Nie ma nic nowego w tej strukturze, z wyjątkiem tego,ze zamiast kodowania jest z wieloma znacznikami div, użyjemyokreślonych znaczników do opisu tych regionów. Wszystko zaczyna się od właściwego Doctype Chcemy użyć nowych elementów HTML 5, a to znaczy,że musimy poinformować przegladarki i walidatorów aby wiedziały jakich znaczników będziemy używać. Stworzymy nową stronę nazwaną index.html, i umieszczamy szablon HTML 5 w tym pliku <!DOCTYPE html> <html lang =pl=pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> Blog </title> </head> <body> </body> </html>

4 Spójrz na typ dokumentu w linii 1 tego przykładu. To wszystko jest nam potrzebne dla typu dokumentu HTML 5. Jeśli jesteś przyzwyczajony do robienia stron internetowych, prawdopodobnie jesteś zapoznany z długimi, trudnymi do zapamiętania typami dokumentów dla XHTML takich jak : Teraz przyjrzyj się typowi dokumentu w HTML 5: To jest dużo prostsze i dużo łatwiejsze do zapamiętania Punkt dotyczący typu dokumentu jest dwojaki. Po pierwsze, aby pomóc walidatorom określić jakie zasady weryfikacji muszą być wykorzystywane podczas sprawdzania poprawności kodu. Po drugie typ dokumentu wymusza na IE 6, 7 i 8 aby przeszedł do "trybu standardowego", co jest niezwykle ważne jeśli chcesz budować strony działające we wszystkich przeglądarkach. Doctype HTML 5 spełania oba te warunki i jest rozpoznawalny nawet przez IE 6 Nagłówki Nagłówki, nie mylićz nagłówkami takimi jak h1,h2 i h3, mogą zawierać całą posortowaną

5 zawartość, od firmowego logo po wyszukiwarkę. Nagłówek nszego bloga będzie na chwilę obecną zawierał tytuł bloga <header id="naglowek_strony"> <h1> Blog </h1> </header> Nie jesteś ograniczony do posiadania tylko jednego nagłówka na stronie. Każda sekcja lub artykuł może mieć swój własny nagłówek, więc może być pomocne użycie atrybutu ID, po jednym unikalnym identyfikatorze dla elementu. Unikalne ID czyni łatwiejszym stylizowanoe z CSS lub lokalizację elementów z JavaScript. Znaczniki semantyczne Jest to cały opis zawartości. Jeśli projektujesz strony od lat, dzieliłeś swoje strony na różne regiony takie jak nagłówek, stopka i pasek, aby móc łatwiej identyfikować regiony strony kiedy stosujemy arkusze stylów i inne formatowanie. Znaczniki semantyczne ułatwiają i ludziom i maszynom zrozumienie sensu i kontekstu zawartości. Nowe znaczniki HTML 5 takie jaka section, header i nav pomagają to zrobić. Stopki Element footer definiuje stopkę informacyją dla dokumentu lub przylegającej sekcji. Widziałeś już stopki na stronach internetowych. Zazwyczaj zawierają informacje takie jak data prawm autorskich, informacje na temat właściciela strony. Specyfikacja mówi, że możemy mieć kilka stopek w dokumencie, więc możemy użyć stopki wewnątrz blogu artykółów. Na raziezdefiniujemy prostą stopkę na naszej stronie Ponieważ możemy mieć więcej niż jedną stopkę, damy jej ID jak daliśmy w nagłówku. Pomoże nam to jednoznacznie identyfikować tą określoną stopkę kiedy chcemy dodać style do tgo elementu i elementów potomnych <footer id="stopka_stony"> <p> 2011 ABC</p> </footer> Ta stopka po prostu zawiera datę praw autorskich. Jednak, podobnie jak w nagłówkach, stopki na stronach często zawierają inne elementy, w tym elementy nawigacyjne Nawigacja Nawigacja jest kluczem do sukcesu strony internetowej. Ludzie nie będą z niej korzystać jeśli będą mieli trudności ze znalezieniem tego czego szukają, co oznacza, że ma sens własny znacznik nawigacyjny. Dodamy sekcję nawigacyjną do nagłówka dokumentu. Dodamy linki do strony domowej bloga, archiwum, strona ze wspóautorami bloga i link do strony kontaktowej. <header id="naglowek_strony"> <h1> Blog </h1> <nav> <ul> <li><a href ="/"> Ostatnie Posty</a></li> <li><a href ="archiwum"> Archiwum</a></li> <li><a href ="współautorzy"> Współautorzy</a></li> <li><a href ="kontakt">kontakt</a></li> </ul>

6 </nav> </header> Podobniejak nagłówki i stopki, strona może mieć wiele elementów nawigacyjnych. Często nawigacja znajduje się w nagłówku lub stopce, więc teraz można zidentyfikować to wyraźnie. Nasza stopka blogu musi mieć łącze ze stroną domową ABC, firmową stroną "O nas" i łacze do firmowego Regulaminu i polityki prywatności. Będziemy je dodawać jako kolejno do listy nienumerowane wewnątrz elementu stopki strony. <footer id="stopka_stony"> <p> 2011 ABC</p> <nav> <ul> <li><a href =" Strona Domowa</a></li> <li><a href ="onas"> O firmie</a></li> <li><a href ="uslugi.html"> Usługi ABC</a></li> <li><a href ="prywatnosć.html">polityka prywatności</a></li> </ul> </nav> </footer> Będziemy używać CSS aby zmienić wygląd pasków nawigacyjnych, więc nie martw się teraz ich wyglądem. Te nowe elementy służą do opisania zawartości a nie opisu jak zawartość wygląda. Sekcje i artykuły Sekcje są logicznymi regionami strony, a eleement section służy zastąpieniu znacznika div,kiedy przychodzi do opisywania logicznych sekcji strony. <scetion id="posty"> </section> Artykuły Znacznik article jest doskonałym elementem do opisu aktualnej zawartości strony. Przy tak wielu elementach na stronie, w tym nagłówkach, stopkach, elementach nawigacyjnych, reklamach, widżetach i zakładkach mediów społecznych, łatwo zapomnieć,że ludzie wchodzą na stronę ponieważ są zainteresowani treścią jaką ona niesie. Znacznik article pozwala opisać tą zawartość. Każdy z artykółów będzie miał nagłówek,jakąś treść i stopkę. Możemy zdefiniować cały artykuł tak: <article class="post"> <header> <h2>mechanizm Wyszukiwania</h2> <p>wysłany przez XYX <time datetime = " T02:20">Pierwszy styczeń 2011 o 02:20</time> </p> </header> <p>aby zrozumieć jak wirus wyszukuje nowe pliki dla zainfekowania, ważne jest zrozumienie jak DOS przechowuje pliki i informacje o nich.. Wszystkie informacje o każdym pliku na dysku są przechowywane na dwóch obszarach dysku znanych jako katalog i File Allocation Table, lub w skrócie FAT. Katalog zawiera 32 bajtowy deskryptor pliku

7 zapisany dla każdego pliku. Ten deskryptor zawiera nazwę pliku i rozszerzenie, jego rozmiar, datę i czas utworzenia i atrybut pliku, który zawiera niezbędne informacje dla systemu operacyjnego o tym jak obsłużyć ten plik. FAT jest mapą całego sdysku, który po prostu informuje system operacyjny jaki obszar jest zajmowany przez jaki plik. </p> <footer> <p><a href="comments"><i>30 Komentarzy</i></a>...</p> </footer> </article> Możemy użyć elementów header i footer wewnątrz naszych artykułów, które czynią łatwiejszym opis tcyh określonych sekcji. Możemy również podzielić nasz artykuł na wiele sekcji używając elementu section. Jaka jest różnica między artykułami a sekcjami? Myśl o sekcji jako logicznej części dokumentu. Myśl o artykule jako rzeczywistej zawartości, takiej jak artykuł prasowy, blog lub neswy. Te nwe zanaczniki opisują zawartość w nich zawarte. Sekcej mogą mieć wiele artykułów a artykułu również mogą mieć wiele sekcji.sekcja jest jak część sportowa gazety. Ma ona wiele artykółów Każdy z tych artykółów może być podzielony ponownie na kilka swoich sekcji. Niektóre sekcje takie jak nagłówki czy stopki mają właściwe znacznikik. Sekcja jest bardziej uniwersalnym elementem jakiego można użyć do logicznego pogrupowania innych elementów. Znacznik semantyczny przekazuje zrozumienie sekcji. Uzupełnienia a paski boczne Czasami masz zawartość,która dodaje coś ekstra do treści głównej, takie jak cytaty, wykresy lub linki powiązane. Możesz użyć nowego znacznika aside dla zidentyfikowania tych elementów <aside> <p> &quote;jestem jaki jestem. &quote; </p> </aside> A oto nasza kompletna sekcja z aside: <section id="post"> <article class="post"> <header> <h2>mechanizm Wyszukiwania</h2> <p>wysłany przez XYX <time datetime = " T02:20">Pierwszy styczeń 2011 o 02:20</time> </p> </header> <aside> <p> &quote;jestem jaki jestem. &quote; </p> </aside> <p>aby zrozumieć jak wirus wyszukuje nowe pliki dla zainfekowania, ważne jest

8 zrozumienie jak DOS przechowuje pliki i informacje o nich.. Wszystkie informacje o każdym pliku na dysku są przechowywane na dwóch obszarach dysku znanych jako katalog i File Allocation Table, lub w skrócie FAT. Katalog zawiera 32 bajtowy deskryptor pliku zapisany dla każdego pliku. Ten deskryptor zawiera nazwę pliku i rozszerzenie, jego rozmiar, datę i czas utworzenia i atrybut pliku, który zawiera niezbędne informacje dla systemu operacyjnego o tym jak obsłużyć ten plik. FAT jest mapą całego sdysku, który po prostu informuje system operacyjny jaki obszar jest zajmowany przez jaki plik. </p> <footer> <p><a href="comments"><i>30 Komentarzy</i></a>...</p> </footer> </article> </section> Teraz musimy dodać pasek boczny sekcji Uzupełnienia to nie są paski boczne! Nasz blog ma pasek boczny po prawej stronie, który zawiera linki do archiwum bloga. Jeśli myślisz,że można użyć znacznika aside do zdefiniowana paska bocznego naszego bloga to jesteś w błędzie. Można to zrobić w ten sposób ale jest to sprzeczne z duchem specyfikacji. aside jest stworzony do pokazywania zawartości powiązanej z artykułem. Jest dobrym miejsce na pokazania linków powiązanych. Aby oznaczyć nasz paswek boczny, zawierający listę archiwów, użyjemy innego znacznika section i znacznika nav <section id="sidebar"> <nav> <h3>archiwum</h3> <ul> <li><a href="2010/10">październik 2010</a></li> <li><a href="2010/10">październik 2010</a></li> <li><a href="2010/09">wrzesień 2010</a></li> <li><a href="2010/08">sierpień 2010</a></li> <li><a href="2010/07">lipiec 2010</a></li> <li><a href="2010/06">czerwiec 2010</a></li> <li><a href="2010/05">maj 2010</a></li> <li><a href="2010/04">kwiecień 2010</a></li> <li><a href="2010/03">marzec 2010</a></li> <li><a href="2010/02">luty 2010</a></li> <li><a href="2010/01">styczeń 2010</a></li> </ul> </nav> </section> To wszystko jeśli chodzi o strukturę naszego bloga. Teraz możemy zacząć stosowanie stylów do naszych nowych elementów Stylizacja Możemy zastosować style do tych nowych elementów, tak jak stylizowaliśmy znaczniki div. Po pierwsze stworzymy nowy plik arkusza stylów nazwany style.css i dołączymy go do naszego dokumentu HTML przez umieszczenie linku arkusa stylów, w nagłówku:

9 Najpierw wyśrodkujemy zawartość strony i ustawimy podstawowe style czcionki Następnie zdefiniujemy szerokość nagłówka Zastosujemy styl do linków nawigacyjnych przez trasformację listy wypunktowanej na poziomy pasek nawigacyjny Teraz zajmiemy się sekcją post

10 Musimy również ustawić pasek boczny i jego szerokość Definiujemy stopkę: Oto mamy podstwową styulizację. Miary i pasek postępu Jeśli chcesz wprowadzić jakiś licznik lub pasek postępu uploadu w aplikacji sieciowej, musisz przetetować elementy meter i progress wprowadzone w HTML 5. Element meter pozwala nam sematycznie opisać rzeczywisty stały punkt na miarę z wartością minimalną i maksymalną. Jeśli miara ma być w harmonii ze specyfikacją, nie powinieneś używać meter dla rzeczy z dowlonymi wartościami minimum i maksimum, takimi jak wysokość i szerokość, chyba,że mówimy o czymś konkretnym,gdzie trzeba ustawić określoną granicę. Na przykład stronę internetową pozyskiwania funduszy, a chcemy pokazać jak blisko jesteśmy naszego celu PLN, możemy to łatwo opisać: <section id="pledge"> <header> <h3>zbieranie Funduszy</h3> </header> <meter title ="PLN" id="pledge_goal" value = "2500" min ="0" max = "5000"> PLN </meter> <p> Pomóż nam zebrać 5000 PLN!</p> </section> Element progress jest bardzo podobny do meter, ale jest stworzony do pokazywania aktywnego postępu takiego jak upload pliku. meter, przez porównanie jest stworzony do pokazania miary, która nie jest aktualnie przemieszczana, jak zrzut dostępnej pamięci na serwerze dla danego użytkownika. Znacznik dla paska postępu jest bardzo podobny do elementu meter Elementy meter i progress nie są stylizowane przez żadną przeglądarkę, wle można użyć JavaScript do pobrania wartości z miernika i zbudować swoją własną wizualizację za pomoc meter lub progress dla smenatycznego opisu danych Internet Explorer Mimo, że wszystko działa świetnie w Firefox, Chrome i Safari, nikt nie będzie szczęśliwy jeśli

11 zobaczy bałagan jaki sprawia Internet Explorer na naszej stronie. Zawartość wyświetla się dobrze ale ponieważ IE nie rozumie tych elementów, nie może do nich zastosować styli, a całą strona przypomina połowę lat 90'tych.Jedyny sposób aby IE wystylizował te elementy to użycie JavaScript do zdefiniowania elementów jako części dokumentu. To jest naprawdę łatwe. Dodamy ten kod do naszej sekcji head aby wykonywał się zanim przeglądarka zrenderuje elementy. Umieścimy go wewnątrz komentarza warunkowego, specjalnego typu komentarza, który potrafi odczytać tylko Internet Explorer. Ten szczególny komentarz dotyczy wersji programu Internet Explorer starszych niż wersja 9.0. Jeśli przeładujemy naszą stronę, to wygląda poprawnie. Tworzenie okienek pop-up z niestandardowymi atrybutami danej Jeśli tworzyłeś aplikacje internetowe, które wykorzystują JavaScript dla pobierania informacji z dokumentu, wiesz,że czasami wiązało się to z problemami. Kończyło się wstawianiem dodatkowej informacji do obsługi zdarzenia lub nadużywania atrybutów rel i class dla wprowadzenia zachowania. Te dni minęły dzięki wprowadzeniu niestandardowych atrybutów danych/ Niestandardowe atrybuty danych, wszystkie zaczynają się od prefiksu data- i są ignorowane przez walidator dokumentów HTML5. Możesz dołączyć niestadandardoww atrybuty danych do dowolnego elementu jakiego chcesz, czy to metadana o fotografii, długości i szerokości geograficznej, lub wymiaru okna pop-up. Najlepsze w tym jest to,że można używać niesdtandardowych atrybutów danych w prawie każdej przeglądarce, ponieważ mogą być łatwo przechwycone przez JavaScript. Oddzielenie zachowania od zawartości, lub dlaczego onclick jest zły Przez lata, okienka pop-up zyskały złą sławę, często słusznie. Są one często używane dla reklam, przekonujące do czegoś użytkownika, lub aby zainstalować programowanie szpiegujące lub wirusy, lub co grosza do pobierania danych osobowych, które są następnie odsprzedawane. Nic dziwnego,że większość przeglądarek blokuje dostęp do wyskakujących pop-up. Pop-upy nie są wcale takie złe. Projektanci webowi często opierają się na oknach wyskakujących dla wyświetlania pomocy online, dodatkowych opcji lub innych ważnych cech interfeksu użytkownika. Aby pop=upy były mniej irytujące, należy je stosować w sposób dyskretny Poprawa dostępności Link docelowy nie jest ustawiony! Jeśli JavaScript jest wyłączona, link nie będzie przenosił użytkownika na tą stronę. To ogromny problem, jaki musimy natychmiast rozwiązać. Nigdy nie pomijajmy atrybutu href ani podawania wartości pod żadnymi warunkami. Podaj adres zasobu, który zwykle jest pop-up

12 Kod JavaScript potem odczytuje dołączony atrybut href dla zlokalizowania linku. Pierwszym krokiem w kierunku zbudowania dostępniejszej strony jest zapewnieni,że wszystko będzie działało bez JavaScript. Zniesienie onclick Utrzymujmy zachowanie oddzielnie od zawartości, pdodobnie jak utrzymujemy prezentację informacji niezależnie od połączonych arukszów stylów. Użycie onclick jest łatwe na początku,ale wyobraź sobie stronę z pięćdziesięcioma linkami, a zobaczysz jak metoda onclick wymyka się z rąk. Trzeba będzie powtarzać JavaScriopt w kółko. A jeśli generujesz ten kod po stronie kodu serwera, zwiększy się liczba zdarzeń JavaScript i uczyni wynikowy HTML dużo większym niż to konieczne. Zamiast tego daj na stronę klasę,która je identyfikuje Używamy selektora jquery, aby pobrać elementy z klasy pop-up, a następnie dodajemy do każdego elementu obserwatora zdarzenia click. Kod przekazywany do metody click będzie wykonany kiedy ktoś kliknie ten link. Metoda preventdefault zapobiega domyślnemu zachoawaniu zdarzenia click. W tym przypadku, chroni przeglądarkę przed odnośnikiem i wyświetleniem nowej strony. Jedno o czym zapomnieliśmy, to informacja na temat rozmiaru i pozycji okna, które jest czymśco mieliśmy w oryginalnym przykładzie. Chcemy aby projektant stron, który nie jest obeznany z JavaScript nadal był w stanie ustawiać wymiary okna na poszczególnych linkach Niestandardowe atrybuty danych na ratunek! Sytuacje takie jak ta zdarzają się kiedy budujemy apliakcje obsługujące JavaScript. Jak widziałeś, przechowywanie żądanej wysokości i szerokości okna w kodzie jest pożądane ale podejście onclick ma wiele wad. To co możemy zrobić zamiast, to osadzenie tych atrybutów jako atrybutów elementu.wszystko co trzeba zrobić, to skonstruować odnośnik taki jak ten: Teraza podyfikujemy zdarzenie click jakie napisaliśmy dla pobierania opcji z niestandardowego atrybutu danych odnośnika i przekazanie ich do metody window.open

13 To wszystko! Teraz link otwiera się w nowym oknie. W tym przykładzie użyliśmy niestandardowych atrybutów danych dla dostarczenia dodatkowej informacji do skryptu po stronie klienta. Jest to sprytne podejście do konkretnego problemu i ilustruje sposób wykorzystania tych atrybutów. Nie ma tendencji do mieszania prezentowanej informacji z prezentacją znaczników, ale jest prostym sposobem pokazania jak łatwo jest używać JavaScript aby odczytać wartości osadzone na naszej stronie. Uwagi końcowe Te atrybuty działają w starszych przeglądarkach tak długo jak te obsługują JavaScript. Niestandardowe atrybuty danych nie potykają się w przeglądarce a twój dokument będzie poprawny ponieważ użyłeś typu dokumentu HTML 5, ponieważ atrybuty zaczynające się od data-, wszystkie będą ignorowane Przyszłość Możemy zrobić kilka ciekawych rzeczy z tymi nowymi znacznikami i atrybutami od kiedy są często spotykane. Możem zidentyfikować i wyłączyć nawigację i stopki artykułów bardzo łatwo używając arkuszów stylów. Możemy używać języków skryptowych aby szybko zidentyfikować wszystkie artykuły na stronie, lub w serwisie. Ale najważniejsze, że możemy oznaczyć zawartość właściwymi znacznikami, które opisują ją,więc możemy napisać lepszy arkusz stylów i lepszy JavaSript.Niestandardowe atrybuty danych daja programistom elastyczność w osadzaniu wielu informacji w ich znaczniku. Można użyć ich z JavaScript do określenia czy znacznik form powinien być wysyłany via Ajax, przez proste umieszczenie znacznika formularza z data-remote = true, który jest czymś co robi środowisko Ruby on Rails. Można ich również użyć do wyświetlania daty i godziny w strefie czaswoej użytkownika, a jednocześnie do buforowania strony. Po prostu wsatwa datę na stronie HTML jako UTC, i skonwertuj do czasu lokalnego użytkownika po stronie klienta. Atrybuty te pozwalają ci osadzać prawdziwie użytecznych danych na stronie, i możesz oczekiwać wiecej środowisk i bibliotek z nich korzystających.

14 Tworzenie przyjacielskich formularzy Jeśli kiedykolwiek projektowałeś skomplikowany interfejs użytkownika, wiesz jak ograniczone są podstawowe kontroli formularza HTML. Byłeś skazany na używanie pól tekstowych, menu wyboru, przycisków radiowych, pól wyboru a czasami nawet na wiele list wyborów, które stale trzeba było objaśniać użytkownikowi, jak ich używać. Robisz więc to co wszysscy dobrzy projektanci włączasz Prototype lub jquery, lub własne kontrolki i funkcje używając połączenia HTML, CSS i JavaScript. Ale kiedy patrzysz na formularz z suwakami, kontrolką kalendarza, suwakami, autouzupełenieniem pól i edytorami wizualnymi, szybko zrozumiesz,że sam sobie stworzyłeś koszmar. Musisz upewnić się,że kontrolki zostały umieszczone na stronie nie są sprzeczne z innymi kontrolkami, lub bibliotekami JavaScript. Możesz spędzić godziny implementując kalendarz, abyu odkryć później,że teraz bibliteka Prototype ma problemy ponieważ jquery przejęła funkcję $(). Więc używasz metody jquery noconflict() ale wtedy odkrywasz,że kontrolka wyboru koloru jakiej użyłeś nie działa ponieważ ten plug-in nie został do tego napisany. Jeśli się uśmiechasz, to coś o tym wiesz. Jeśli jesteś wściekły, to pewnie z tego samego powodu, Jest jednak nadzieja. W tej części zbuduejmy kilka formularzy internetowych używając kilku nowych typów pól formularzym jak również zaimplementujemy autmatyczną regulację ostrości i tekst zastępczy.na końcu omówimy jak użyć nowego atrybutu contenteditable Skupimy się zwłaszcza na poniższych cechach; pole [ <input type=" ">] : wyświetlanie opla formularza dla adresów pole URL [ <input type="url">] : wyświetlenie pola formularza dla URL'i pole telefoniczne [ <input type="tel">] : wyświetlenie pola formularza dla numerów telefonicznych pole wyszukiwania [ <input type="search">] : wyświetlanie pola formularza dla wyszukiwania słów kluczowych suwak(zakres) [ <input type="range">] : wyświetlanie kontrolki suwaka liczba [ <input type="number">] : wyświetlanie pola formularza dla liczb, często jako spinbox pole daty [ <input type="date">] : wyświetlanie pola formularza dla dat. Obsługuje date, month lub week data i czas [ <input type="datetime">] : wyświetlanie pola formularza dla daty z czasem. Obsługuje datetime, datetime-local lub time kolor [ <input type="color">] : wyświetlanie pola dla określonego koloru obsługa autofocus [ <input type="text" autofocus>] : obsługa dla skoncentrowania się na określonym elemencie formularza. obsługa tekstu zastępczego [ <input type=" " placeholder = "ja@przyklad.pl">] : obsługa wyświetlania tekstu zastępczego wewnątrz pola formularza wsparcie edycji w miejscu [<p contenteditable>blablabla</p>] : wsparcie dla edycji w miejscu zawartości przez przeglądarkę Zacznijmy naukę od niektórych bardzo przydatnych pól formularza Opisywanie danychy z nowymi polami input HTML 5 wprowadza kilka nowych typów input, których możesz użyć do lepszego opisu typów danych użytkownika. Oprócz standardowgo pola tekstowego, przycisków radiowych i elementów pól wyboru, możesz użyć elementów takich jak pola emial, kalendarzy, palet kolorów, spinboxów i

15 suwaków. Przeglądarki mogą użyć tych nowych pól do wyświetlania lepszej kontroli dla użytkownika bez konieczności JavaScript. Urządzenia mobilne i klawiatury wirtualne dla tabletów i ekranów dotykowych mogą korzystać z typów pól do wyświetlania różnych układów klawiatury. Na przykład przeglądark Safari dla iphone wyświetla alterantywne klawaitury kiedy użytkownik wpisuje dane do URL czy a, tworząc specjalne znaki takie : i / łatwiejszę w dotępie. Poprawa projektu formularza ABC pracuje nad stworzeniem nowej, internetowej apliakcji zarządzania aby uczynić łatwiejszym dla programistów i menadżerów utrzymanie postępu nad wieloma projektami. Każdy projekt ma nazwę, adres a także adres URL aby menadżerowie mieli podgląd strony w trakcie budowy. Są także pola daty rozpoczęcia, priorytetu i szacunkową liczbę godzin prac nad projektem. W koncu menadżer ds rozwoju chciałby do każdego projektu dodać kolor aby mógł szybko zidentyfikować projekt kiedy przegląda raporty. Stworzymy makietę szybkich preferencji projektu striny używając pól HTML5 Ustawienie podstawowego formularza Stworzymy podstawowy formularz HTML z żądaniem POST. Używa będziemy zaufanego pola text Zauważ,że zaznaczamy ten formularz owijając go w listę uporządkowaną. Etykiety są niezbędne przy tworzeniu dostępnych formularzy. Atrybut for etykiety odnosi się do id powiązanego elementu formularza Pomaga to czytnikom ekranowych zidentyfikować pola na stronie. Lista uporządkowana dostarcza dobrego sposobu listowania tych pól bez sortowania złożonych table lub struktur div. Daje ci to również sposób na zaznaczenie porządku w jakim ludzie wypełniają te pola Tworzenie suwaka używając zakresu Suwaki są powszechnie używane pozwalając użytkownikom zmniejszać lub zwiększać wartości numeryczne i mogą być dobrym sposobem szybkiej możliwości zarówno wizualizacji jak i modyfikacji priorytetów projektu. Zaimplementujemy suwak z typem range

16 Dodajmy to do formularzam, wewnątrz nowego elementu li podobnie jak poprzednie pole. Chrome i Opera implementują widżet Slider, który wygląda tak: Zwróć uwagę,że również ustawiamy zakres min i max dla tego suwaka. To ograniczy wartości pola formularza. Obsługa liczb w Spinbox Używamy wielu liczb, i chociaż wpisywanie liczb jest dość proste, spinboxy mogą uczynić modyfikację łatwiejszą. Spinbox jest kotrolką ze strzałkami, które zwiększają lub amnijeszają wartości w polu. Użyjmy spinbox dla oszacowania godzin. W ten sposób, godziny mogą być łatwo dostosowywane Opera obsługuje kontrolkę spinbox, która wygląda tak: Spinbox pozwala na wpisywanie domyślne, i podobnie jak zakres suwaków, możemy ustawić wartości minimalne i maksymalne.jednak te wartości minimalne i maksymale zakresy nie będa stosowane do każdej wartości wpisanej w pole. Zauważ,też,że można kontrolować wielkość kroku przez przyrost wartości parametru kroku. Domyślnie jest to 1, ale może być dowolną wartością liczbową. Daty Zapis daty rozpoczęcia projektu jest bardzo ważny, i chcemy to zrobić najprościej jak to możliwe. Typ wejściowy date doskonale tu pasuej Oto przykład implementacji (Opera):

17 Specyfikacja HTML 5 mówi,że typ wejściowy jest zaprojektowany do przechowywania albo pojedynczego adresu , albo listy adresów , więc jest doskonałym kandydatem dla naszego pola Urządzenia mobilne najwięcej na tym skorzystają ponieważ układy klawiatury wirtualnej zmienia się czyniąc wprowadzanie adresów łatwiejszym. URL Pole to stworzono również d obsługi URL'i. Jest on szczególnie miły jeśli użytkownik korzysta z iphone'a, ponieważ wyświetla wiele różnych układów klawiatury, wyświetla przyciski pomocnicze dla szybkiego wpisywania adresów sieciowych. Dodanie pola startowego URL jest tak proste jak dodanie tego kodu:

18 Kolor W końcu, musimy dostarczyć sposobu na wprowadzenie kodu koloru, i użyjemy typu color Uwagi końcowe Przeglądarki, które nie rozumieją tych nowych typów po prostu pzechodzą do typu tekstowego, więc formularze nadał będzie można wykorzystywać. W tym momencie trzeba będzie powiązać jedno z UI jquery lub widżety YUI do transformacji tych pól. Z czasem, jak więcej przeglądarek będzie obsługiwało te kontrolki, można będzie usuwać JavaScript Zastętpowanie wyboru koloru Łatwo możemy zidentyfikować i zastąpić wybór koloru używając jquery z selektorami atrybutów CSS3. Umieśćmy pole input z typem color i zastosujmy wtyczkę jquery nazwaną SimpleColor Ponieważ użyliśmy nowych typów formularza w naszym znaczniku, nie musimy dodawać dodatkowych nazw klas lub innych znaczników do idetyfikacji wyboru koloru. Selektory atrybutów i HTML5 razem działają całkiem dobrze. Nie chcemy używać tek wtyczki wyboru koloru jeśli przeglądarka ma natwyną obsługę, więc użyjemy JavaScript do wykrycia czy przeglądarka obsługuje pola wejściowe z type color Po pierwsze używamy czystego JavaScript do stwozenia elementu i ustawienie jego atyrbutu type na color. Potem odzyskujemy atrybut tyoe aby zobaczyć czy przegladarka pozwoli nam na ustawienie tego atrybutu. Jeśli wraca z wartością color, wtedy mamy obsługę tego typu. Jeśli nie, musimy zastosować nasz skrypt. Zajmiemy się teraz linią 6. Safari 5 i Chrome 5 częściowo implementują typ color. Obsługują to pole ale nie wyświetlają idżetu koloru. Mamy jeszcze do skończenia pole tekstowe na stronie. Więc w naszej metodzie wykrywania ustawimy wartość dla naszego pola i sprawdzamy czy wartość pozostaje w pobliżu. Jeśli nie,możemy założyć,że przeglądarka zaimplementowałą wybór koloru ponieważ pole input nie zachowuje się jak pole tekstowe. Cały kod zastępowania wyboru koloru wygląda tak:

19 To rozwiąanie działa, ale jest bardzo kruche. Jest skierowane do konkretnej grypu przeglądarek i tylko dla koloru. Inne kontrolki mają swoje własne dziwactwa, których trzeba się nauczyć. Modernizer Biblioteka Modernizer może wykryć wsparcie dla wielu funkcji HTML 5 i CSS3. Nie dodaje brakujących funkcji ale dostatrcza kilku mechanizmów podobnych do rozwiązań implementowanych dla wykrywania pól formularza, które są bardziej odporne. Przed rozpoczęciem używania Modernizr w projektach, należy zrozumieć jak to działa. Czy napisałeś kod czy nie, jeśli używasz go w projekcie, jesteś za niego odpowiedzialny. Moderznizr nie był gotowy do wsparcia częściowego Safari odnośnie koloru pól od razu. Będziesz implementował wyjścia awaryjne dla kontrolek, takich jak wybór daty i suwak w ten sam sposób. Suwaki i data zaliczają się do biblioteki UI jquery. Dołączając bibliotekę UI jquery na stronie, wykrywasz czy przeglądarka obsługuje kontrolki natywnie a jeśli nie, zamiast stosuje wersję JavaScript. W końcu można będzie przejść do stopniowego wycofywania kontrolek JavaScript i oprzeć się calkowicie na kontrolkach w przeglądarce. Z powodu złożoności związanej z wykrywanie tych typów, Modernizer będzie bardzo pomocny. Oprócz nwoych typów pól formularza, html wprowadza kilka innych atyrbutów pomagających zwiększyć użyteczność. Jednym z nich jest autofocus. Skok do pierwszego pola z autofocus Możesz rzeczywiście przyspieszyć wprowadzanie danych, jeśli umieścisz kursor użytkownika w pierwszym polu formularza kiedy ładuje się strona. Wiele wyszukiwarek robi to używając JavaScript,a teraz HTML 5 przewiduje taką możliwość, jako część języka. Wszystko co trzeba zrobić to dodać atrybut autofocus w dowolnym polu formularza. Możemy mieć tylko jeden atrybut autofocus na stronie dla poprawnej pracy. Jeśli mamy więcej niż jeden, przeglądarka umieści kursor użytkownika na ostatnim polu formularza z autofocus Uwagi końcowe Możemy wykryć obecność atrybutu autofocus z odrobiną JavaScript a następnie używając jquery skupić się na elemencie kiedy przeglądarka użytkownika nie obsługuje autofocus. Wystarczy dołączyć ten JavaScript na stronie a będziesz miał wsparcie autofocus, gdy jest potrzebne. Autofocus sprawai,że trochę łatwiej pracuje się użytkownikowi z formularzem keidy

20 jest ładowany.ale możesz chcieć podać więcej ionformacji o typie informacji jakiej chcesz im dostarczyć. Spójrzmy na atrybut placeholder. Podpowiedzi z tekstem zastępczym Tekst zastępczy dostarcza użytkownikom instrukcji jak powinni wypełnić pola formularza. Prosty formularz rejestracyjny ABC wymaga od użytkowników aby zarejstrowali konto a jednym z największych problemów z rejestracją jest to,że użytkownicy próbują używać niezbyt bezpiecznych haseł. Użyjemy tekstu zastępczego aby dać użytkownikom podpowiedzi o wymaganiach co do hasła. Dla spójności dodamy też tekst zastępczy do innych pól. Aby dodać tekst zastępczy, po prostu dodaj atrybut placeholder do każdego pola wejściowego : Cały formularz może wyglądać tak

21 Zapobieganie autouzupełnianiu Można zauważyć,że dodaliśmy atrybut autocomplete do pól z hasłami w tym formularzu. HTML 5 wprowadził atrybut autocomplete, który mówi przeglądarce,że nie powinna próbować uzupełniać automatycznie danych dla tego pola. Niektóre przeglądarki pamiętają dane które wpisał poprzednio użytkownik, i w niektórych przypadkach chcemy powiedzieć przeglądarkom aby tego nie robiły. Ponieważ użyliśmy kiedyś elementów listy uporządkowanej dla przechowywania naszych pól formularza, dodamy trochę podstaw CSS dla uczynienia formularza ładniejszym Uwagi końcowe Możemy użyć JavaSctript do wstawienia tekstu zastępczego w pola formularza bez większej pracy.

22 Testujemy wartości każdego pola formularza, i jeśli jest puste, ustawiamy jego wartość na wartość tesktu zastępczego. Kiedy formularz jest aktywny, można wyczyścić te wartości, jesli nie, testujemy te wartości ponownie. Jeśli są różne, zostawiamy je, jeśli są puste, zastępujemy tekstem zastępczym. Testujemy wsparcie tekstu zastępczego podbnie jak autofocus Następnie wystarczy napisać JavaScript do obsługi tych zmian. Wypełnimy wartości wszystkich pól formularza tesktem przechowywanym w artycbucie placeholder. Kiedy użytkownik wybierze pole, usuniemy tekst umieszczony w tym polu. Zawniemy to we wtyczki jquery tak aby łatwo to zastosować do zachowania naszego formularza.

23 Jest parę interesujących rzeczy w tym dodatku o jakich powinieneś wiedzieć. W linii 45 przeładowujemy tekst zastępczy do pola jeśli nie ma wartośći ale również jeśli odświeżamy stronę. Firefox i inne przeglądarki utrzymują wartości formularza. Ustawiliśmy wartość atrybutu na placeholder, i z pewnością nie chcemy aby wartość przypadkowa stała się rzeczywistą wartością użytkownika. Kiedy ładujemy stronę, przekazujemy true do tej metody, którą można zobaczyć w linii 61. Pola haseł zachowują się trochę inaczej niż pozostałe pola formularza, więc są obslugiwane nieco inaczej. Spójrz na linię 12. Wykrywamy obecność pola hasła, i musimy zmienić jego typ na regularne pole tekstowe tak aby wartość nie pokazywałasię jako zamaskowana gwiazdkami. Niektóre przeglądarki wyrzucają błąd przy próbie konwersji pola hasła, więc będziemy musieli zamienić pola hasła na pola tekstowe. Wymienimy te pola jako interakacja użytkownikaz tymi polami. Zmienia to wartości na formularzach, a prawdopodobnie chcesz zabezpieczyć tekst zastępczy przed powrotem na serwer. Możemy użyć JavaScript do kontroli przesyłania formularzy i usuwania wszelkich wartości, które pasują do tekstu zastępczego. W linii 66, przechwytujemy wysłanie formularza i czyścimy wartości każego pola równe wartości tekstu zastępczego. Teraz to

24 wszystko jesy zapisane jako plug-in, możemy go wywołać na stronie przez dołączenie go do formularza tak: Teraz mamy całkiem przyzwoite rozwiązanie, które sprawia,że tekst zastępczy jest opłacalnym rozwiązanie dla aplikacji internetowych, bez względu na to jakiej przeglądarki używasz Pluginy jquery Możesz rozszerzyć jquery przez napisanie wlasnego pluginu. Dodasz swoją metodę do funkcji jquery a twoje pluginy staną się dostępne każdemu programiście któyu użyje twojej biblioteki. Oto trywialny przykład, któy wyświetla pole alertu JavaScript: Jeślio chcesz zobaczyć pole pop-up pojawiające się dla kadego paragrafu na stronie, wywołaj to tak : Pluginy jquery zostały zaprojektowane do iteracji po zbiorze obiektów jquery. Na przykład, ponieważ nasz plugin debug również zwraca zbiór jquery, możemy użyć metody css jquery do zmiany koloru tesktu tych paragarfów, wszystko w jednej linii Edycja bezpośrednia z contenteditable Zawsze szukamy sposobów na ułatwienie interakcji z naszymi aplikacjami. Czasami chcemy aby użytkownicy naszej strony edytowali jakieś informacje o sobie bez konieczności przechodzenia do różnych fomularzy. Zaimplementujemy edycję bezpośrednią przyglądając się regionom tekstu kliknięć i zastępując te regiony tekstem z pól. Pola te wysyłają zmieniony tekst z powrotem do serwera przez Ajax. Zancznik contenteditable HTML 5 zajmuje się częścią automatycznego wprowadzania danych Będziemy pisali jakiś JavaScript do wysyłania danych do serwera, dzięki czemu możemy go zapisać, ale nie możemy dłużej tworzyć i włączać ukryt formularze. Jeden z projektów ABC pozwala użytkownikom przeglądanie swojego profilu konta. Pokazuje ich nazwiska, miasta, województwa, kod pocztowy i adres e-amil. Dodamy edycję bezpośrednią do tej

25 strony profilowej aby mieć coś takiego: Informacja o użytkowniku Nazwisko Miasto Województwo Kod pocztowy Jan Kowalski Warszawa mazowieckie badboy@wp.pl Formularz profilowy HTML 5 wprowadził atrybut contenteditable, który jest dostępny w prawie każdym elemencie. Po prostu dodajemy ten atrybut do edytowalnego pola <h1> Informacja o użytkowniku </h1> <div id="status"></div> <ul> <li> <b>nazwisko</b> <span id="name" contenteditable="true"> Jan Kowalski</span> </li> <li> <b>miasto</b> <span id="city" contenteditable="true">warszawa</span> </li> <li> <b>województwo</b> <span id="wojewo" contenteditable="true">mazowieckie</span> </li> <li> <b>kod pocztowy</b> <span id="postal_code" contenteditable="true"> </span> </li> <li> <b> </b> <span id=" " contenteditable="true"> badboy@wp.pl</span> </li> </ul> Możemy to również wystylizować z CSS. Użyyjemy selektorów CSS3 dla identyfikacji pól edytowalnych aby zmienić kolor kiedy użytkownik nań najedzie lub go zaznaczy:

26 Utrzymanie danych Chociaż użytkownik może zmienić dane, ich zmiana będzie utracona jeśli odświeży stronę lub ponawiguje dalej. Potrzebujemy sposobu aby wysłać te dane do nas z powrotem, i możemy to zrobić łatwo z jquery. Dodamy nasłuchiwanie zdarzenia do każdego span na stronie, który ma atrybut contenteditable ustawiony na true. Potem, wszystko co musimy zrobić to wysłać dane do naszego skryptu po stronie serwera Stworznie storny edycji Zamiast martwić się różnymi sytuacjami, które moga uniemożliwić użytkownikowi korzystanie z naszych technik, dajmy mu po prostu możliwość przejścia na osobną stronę z własnym formularzem. Oczywiście to więcej kodowania, ale pomyśl o takich scenariuszach:

27 użytkownik nie ma włączonego JavaScript i używa Internet Explorera 7 nie ma przeglądarki kompatybilnej z HTML 5 używa przeglądarki z obsługą HTML 5 ale wyłączył JavaScript bo go nie lubi Utworzymy nową stronę edit.html i kod formularza standardowej edycji Potem dodajemy link do tej strony na show.html

28 Z tym dodanym linkiem, musimy trochę zmodyfikować nasz skrypt. Chcemy ukryć link do strony edycji i włączyć obsługę Ajax tylko jeśli mamy obsługiwać edytowalną zawartość Z wykrywaniem miejsc, nasz skrytp wygląda tak: Mając to na miejscu, nasi użytkownicy mają możliwość wykrzystania standardowego interfejsu lub szybszego trybu "w miejscu". Teraz wiesz jak implementować ten interfesj, pamiętaj aby w pierwszej kolejności wdrożyć rozwiązanie awaryjne. Tworzenie lepszego interfejsu użytkownika z CSS3 CSS3 ma nieamowite selektory, które uczynią niektóre z tych prac trywialnymi Jeśli zapomniałeś, selektor jest wzorek, który służy pomoc w znajdowaniu elementów w dokumencie HTML, dzieki czemu możesz zastosowć style do tych elementów.będziemy używaźć tych nowych selektoróe do stylizowania tablicy. Potem spojrzymy jak możemy użyć innych funkcji CSS3 dp oprawy naszej strony i podzielimy treść na wiele komlumn. Funkcje jakimi się będziemy tu zajmoć to : Znajdowanie wszystkich n elementów pewnego typu Zajdowanie pierwszego elementu potomnego Znajdowanie określonego elementu potomnego licząc w przód Znajdowanie ostatniego elementu potomnego Znajdowanie określonego elementu potomnego zliczając w tył

29 Znajdowane pierwsdzego elementu danego typu Zajadowanie ostatniego elementu danego typu Obsługa kolumn Dzielenie zawartości na wiele kolmn Używane z contenet do wstawiania zawartości po okreslonym elemencie Media Queries Stosowanie styli w oparciu o ustawienia urządzenia Stylizacaj tabel pseudoklasami Pseudoklasa w CSS jest sposobem na wybranie elementu w oparciu o informację któa leży poza dokumentem lub informację która nie może być wyrażona przy użyciu normalnych selektorów Używałeś już pseudoklas takich jak :hover. CSS3 ma kilka nowych pseudoklas, które czynią lokalizowanie elementów dużo łatwiejszym.stworzymy standardową tabelę, jak na poniższym rysunku Byłoby łatwiej gdyby co drugi wiersz był pokolorowany inaczej. Byłoby również pomocne jeśli suma była innego koloru aby się wyróżniała. Kod tabeli wygląda tak:

30 Najpierw pozbędziemy się ohydengo domyślnego obramowania tabeli: Wystylizujemy również nagłówek aby nadać mu czarne tło z białym tekstem

31 Możemy rozpocząć korzystanie z pseudoklas do zindywidualizowania stylu wierszy i kolumn. Zaczniemy od pomalowania tabeli Malowanie wierszy z :nth-of-type Dodanie "pasków zebry" jest czy co widzieliśmy. Jest to przydatne, ponieważ daje użytkownikom linie poziome. Ten rodzaj stylizacji jest dobrze zrobić w CSS, w warstwie prezentacji. To tradycyjnie oznacza dodanie doatkowej nazwy klasy do naszego wiersza tabelu tak jak "odd" lub "even" Nie chcemy zanieczyszczać naszsej tabeli znacznikami, ponieważ specyfikacja HTML 5 zachęca nas do unikania nazw klas, które definiują prezentację. Korzystają z pewnych nowych selektorów, możemy uzyskać dostęp do tego co chcemy, bez mziany wszystkiego, dobrze oddzielając prezentację od zawartości. Selektor nth-of type znajduje kązdy n-ty element określonego typu używając albo wzoru albo słów kluczowych. Najpierw skupimy się na słowach kluczowych, poniweważ są łatwiejsze do ogarnięcia. Chemy aby co drugi pasek wiersza tabeli miał inny kolor. Najprostszym sposobem na to jest znalezienie każdego parzystego wiersza tablicy i nadanie im koloru tła. Następnie zróbmy to z nieparzystymi wierszami. CSS3 ma nawet słowa klczuowe even i odd do obsługi takich styuacji. Selektor ten mówi "Znajdź mi każdy parzysty wiersz tabeli i pokoloruj go. Ptem znajdź każdy nieparzysty wiersz i również go pokoloruj". Zrobiliśmy nasze paski zebry, bez uciekania się do żadnych dodatkowych skrytpów lub nazw klas w wierszach Teraz popracujemy nad wyrównaniem kolumn w tabeli

32 Wyrównanie kolumn tekstu z :nth-child Domyślnie, wszystkie kolmny w naszej tabeli faktury są wyrównane w lewo. Wyrównajmy je do prawej z wyjątkiem pierwszej kolumny.w ten sposób kolumna z ceną i jednostkami będą wyrównane w prawo i łatwiejsze do odczytu. Aby to zrobić, możemy użyć nth-child, ale najpierw nauczmy się jak działa. Selektor nth-child wygląda jak element potomny elementu, podobnie jak bth-of-type, może używać słów kluczowych lub wzoru. Wzór to an+b gdzie b jest offsetem a a jest wielokrotnością. Ten opis nie jest szczególnie pomocny bez jakiegoś kontekstu, więc spójrzmy na ten kontekst w naszej tabeli. Jeśli chcemy zaznaczyć wszystkie wiersze w tabeli, możemy użyć selektora: Nie możemy użyćani wielokrotności ania offsetu. Jednak,jeśli chcesz zaznaczyć wszystkie wiersze z wyjątkiem pierwszego wiersza, któy kest wierszem zawierającym kolumnę nagłówkową, możemy użyć tego selektora, który używa offsetu: Jeśli chciałbyś trzeci wiersz, użyj 3n. Możesz również użyć offsetu tak aby można zacząć dalej w dół tabeli. Ten selektor będzie znajdował każdy wiersz, poczynająć od czwartego wiersza: Więc możemy wyrównać każdą kolumną z wyjątkiem pierwszej W tej sytacji, nasza tabela wygląda tak: Teraz wystylizujemy ostatni wiersz tabeli. Pogrubienie ostatniego wiersz :last-child Tabela wygląda ładnie,ale zrobimy bardziej wyrazisty ostatni wiersz. Możemy użyć last-chidl do tego do tego, który przechwytuje ostatniego potomka.zastosoujemy dolny margines do paragrafu aby był równomiernie rozłożony na stronie, co jest powszechnie używane przez wielu projektantów Czasami może to prowadzić do dodatkowego dolnego marginesu na końcu grupy, a to może nie być pożądane. Na przykład, jeśli paragrafy są usadowione na bocznym pasku lub polu objaśnienia, możemy chcieć usunąć dolny margines z ostatniego paragarfu, aby nie marnować miejsca między dołem ostatniego akapitu a obramowaniem pola. Selektor last-child jest prefrowanym narzędziem do tego cel. Możemy użyć go do usnięcia marginesu z ostatniego akapitu

33 Użyjemy tej samej techniki do poggrubienia zwartości ostatneigo wiersza Zróbmy tą samą rzecz z ostatnią kolumną tabeli. W końcu tworzymy całkowity rozmiar czcionki większym prze użycie last-child z selektorem potomny,. Znajdujemy ostatnia kolumnę ostatniego wiersza i stylizujemy : Liczenie wsteczne z :nth-last-child Chcielibyśmy zwrócić uwagę na wiersz opłaty tabeli kiedy nie ma zniżki na wysyłkę. Użyjemy nthlast-child aby szybko zlokalizować ten wiersz. Widziałeś jak można użyć nth-child a formuła an+b wybiera określony element potomny. Selektor nth-last-child działa dokładnie tak samo z wyjątkiem tego,że zlicza wstecz poprzez potomka, poczynając od ostatniego do pierwszego potomka. Dzięki temu łatwo przechwycić drugi do ostatniego elementu w grupie. Okazuje się,że musimy tylko to zrobić z naszą tablicą. Więc aby znaleźć nasz wiersz opłaty, użyjemy kodu: Tu określalmy konkretnego potomka, od drugiego do ostatniego. Jest to jedna rzecz jaką powinniśmy zrobić z tą tabelą. Wcześniej wyrównaliśmy w prawo wszystkie kolumny z wyjątkiej pierwszej i chociaż wygląda to dobrze dla wierszy tabeli z opisami i cenami, sprawia to,że trzy ostatnie wiersze tabeli wyglądaja śmiesznie. Wyrónajmy w prawo również te trzy doalne wiersze. Możemy to zrobić za pomocą nth-last-child z wartością ujemną dla n i dodatnią wartości dla a we wzorze Można o tym myśleć jako selektorze zakresu...używając offsetu 3 a ponieważ używamy nth-last-

34 child, przechwytując każdy element przed offsetem. Jeśli używamy nth-child, ten wzór przechwyci każdy wiersz aż do offsetu. Uwagi końcowe Bieżące wersje Opery, Firefox, Safari i Chrome rozumieją te selektory,ale IE 8 i starsze ignorują je całkowicie. Musimy mieć jakieś wyjście awaryjne. Zmiana kodu HTML Najbardziej oczywistym rozwiązaniem które zadziała wszędzie jest modyfikacja kodu. Możesz dołączyć kalsy do wszystkich komórek w tabeli i zastosowć podstawowyw CSS do każdej klasy. To jest najgorsze wyjście, ponieważ miesza prezenatcję z zawartością i jest dokładnie tym czego unikamy w CSS3. Użycie JavaScript Biblioteka jquery już rozumie większość selektorów CSS3 jakich używamy, więc możemy szybko napisać metodę do stylizacji tabeli, ale jest łatwiejszy sposób.keith Clark napisał dobrą biblioteką nazwaną IE-css3, która dodaje obslugę selektorów CSS3 dla Internet Explorera.Wszystko co musimy zrobić do dodać parę skrytptów do naszej strony. Biblioteka IE-CSS3 może użyć jquery. Dołącz ją do swojego dokumentu. Ponieważ jest to dla IE tylko, możesz je w komentarzu warunkowym, więc będzie używana tylko przez użytkowników IE Umieszczenie tych skrytpów na stronie czyni sprawy dużo łatwiejszymi w IE. Chociaż wymaga to od użytkownika włączonego JavaScript, stylizowanie tabeli głównie czyni zawartość łatwiejszą do zobaczenia. Stylizowanie elementów jest dużo łatwiejsze w CSS3, zwłaszcza jeśli nie ma możliwości modyfikacji HTML. Kiedy stylizujemy interfejsy, użyjemy hierarchiccznej semantykii tych nowych selektorów przed dodaniem dodatkowych znaczników. Znaleziony kod jest o wiele łatwiejszy do utrzymania Tworzenie linków drukowanych z :after i content CSS może wystylować istniejące elementy, ale może również wstrzyknąć treść do dokumentu. Jest kilka przypadków gdzie generowanie treści z CSS ma sens, a najbardziej oczywiste jest dodanie URL hiperłącza obok tekstu linku kiedy użytkownik drukuje stronę. Kiedy patrzysz na dokumnet na

35 ekranie, możesz najechać nad link a zobaczysz dokąd prowadzi na pasku stanu. Jednak, kiedy patrzysz na wydrukowaną, nie masz absolutnie żadnego pojęcia dokąd prowadzą. Jeśli chcesz wiedzieć po wydrukowaniu gdzie prowadzą linki wystarczy trochę CSS,możemy dodać taką fnkcjonalność a będzie działać w IE8, Firefox, Safari i Chrome. Możemy korzystać z własności JavaScript aby działało w IE6 i 7. Sama strona zawiera tylko listę linków. Ewentualnie możesz dać to jako szablon. Po wydrukowaniu jednak, nie będziesz miał pojęcia gdzie te linki prowadzą. Naprawimy to CSS Kiedy dodamy styl na stronę, możemy określić typ nośnika, do którego ma zastosowanie styl. Większość czasu używamy typu screen. Jednak możemy użyć typu print dla zdefiniowana arkusza stylu, który ładuje się tylko jeśli strona jest drukowana (lub kiedy użytkownik używa funkcji podglądu wydruku) Możemy potem stworzyć plik print.css, a w nim umieścić prostą regułę: Pobiera każdy linka na stronie id dodaje te wartości do wartości href wewnątrz nawiasó po tekście linku. Kiedy drukujesz go z nowoczesnej przeglądarki, wygląda tak: Jeśli chcesz to zobaczy w działaniu bez korzystania z papieru, możesz użyć funkcji Podglądu Wydruku, który również wyzwala ten styl. Uwagi końcowe Internet Explorer ma parę zdarzeń JavaScript, które przyjmuje każda przeglądarka: onbeforeprint i onafterprint. Korzystając z tych zdarzeń możemy zmienić tekst hiperłącza kiedy wyzwolone jest

36 drukowanie a potem powrócic do linku kiedy drukowanie jest zakończone. Użytkownicy nie zauważą różnicy. Potrzeba stworzyć plik nazwany print.js a potem dodać ten kod: Potem wystarczy dodać go do naszej strony. Potrzebujemy tego do IE 6 i 7, więc użyjemy warunkowych komentarzy. Kod ten opiera się na jquerym więc musimy się upewnić,co do linku biblioteki jquery. Tworzenie wielokolumnowych układów Branża poligraficzna miała kolumny od lat, a projektanci ston patrzyli na te publikacje z zazdrością. Wąskie kolumny ułatwiają czytelnikom odcyzt zawartości a projektanci szukają sposobów aby

37 zachować komfortowe szerokości kolumn. Przecież nikt nie chce wielu linii tekstu przez cały monitor, jak nikt nie chce tekstu przez całą szerokość gazety. Istnieją bardzo sprytne rozwiązania,ale nic nie jest tak proste i łatwe jak rozwiązania w specyfikacji CSS3. Podział kolumn Jeśli kiedyś próbowałeś podzielić tekst na kilka kolumn za pomoca div i float, wiesz jaka to trudna sprawa. Pierwszą wielka przeszkodą w uruchomieniu,że musismy ręcznie zadecydować jak podzielić tekst. W oprogramowaniu edytorskim, można "łączyć" pola tekstowe razem tak, że kiedy wypełni się tekstem, przechodzi do połączonego obszaru. Nie ma czegoś takiego w internecie, ale mamy coś co działa dobrze i jest łatwe w użyciu. Możemy wziąść element i podzielić jego zawartość na wiele kolumn, każdą o tej samej szerokości. Zaczniemy od znacznika newlsetter.jest to dość podstawowy trub HTML. Ponieważ jego treść będzie się zmieniać kiedy zostanie nadpisana, użyjemy tekstu zastępczego dla zawartości Jeśli zastanawiasz się czemu nie używamy nowych elementów znaczników HTML 5 takich jak section, to dlatego że nie są one kopatybilne z tymi elementami w Internet Explorerze.

38 Aby podzielić na dwie kolumny, musimy dodać to do naszego stylu

39 Teraz mamy coś ładniejszego. Możemy dodać więcej zawartości,a przeglądarka będzie automatycznie określać jak podzielić zawartość. Zauważ również,że pływające elementy płyną do kolumny, która je zawiera Uwagi końcowe Kolumny CSS3 nie działają dobrze w Internet Explorerze 8 i starszych, więc użyjemy wtyczkio jquery Columnizer jako wyjścia awaryjnego. Columnizer pozwoli nam podzielić naszą zawartość równomiernie przez prost użycie kodu takiego jak ten Ludzie bez JavaScript skazani będą na jedną kolumnę tekstu, ale nadal będą mogli odczytać zawartość, ponieważoznakowaliśmy ją w sposób liniowy. Jednak możemy użyć JavaScript fo wykrycia wsparcia przeglądarek dla pewnych elementów. Jeśli pobieramy właściwości CSS które istnieją, otrzymamy pusty łańcuch. Jeśli otrzymamy wartość null z powrotem, nie mamy dostępnej tej właściwości

40 Sprawdzamy czy obsługuje kolumny, a jeśli nie istniej, stosujemy nasz plugin. Odśwież IE a zobaczysz sój dwukolumnowy układ. Być może nie wygląda to jeszcze najlepiej, ale można użyć trochę CSS lub JavaScript do poprawienia tych elementów. Budowa mobilnego interfejsu z Mobile Query Byliśmy w stanie definiować typ nośnika arkuszy stylów od dłuższego czasu, ale byliśmy ograniczeni do typu wyjściowego, jak widzieliśmu w sekcji o drukowalnych linkach, kiedy definiowaliśmy nasz arkusz stylu drukowania. Medioa Queries 6 CSS3 pozwala nam zmienić prezentację strony na podstawie rozmiaru ekran naszych odwiedzających. Projektanic od lat używali do określenia rozmiaru ekranu JavaScript. Ale my zaczniemy od arkusza stylów. Możemy użyć Media Queries do określenia: Rozdzielczości Orientacji Szerokości i wysokości urządzenia Szerokości i wysokości okna przeglądarki Z tego powodu, media queries tworzą to bardzo łatwo dla nas do stworzenia alternatywnego arkusza stylów dla mobilnego użytkownika. Nasz blog jest dwukolumnowy, z główną zawartości i paskiem bocznym. Najłatwiejszym sposobem uczynienia go bardziej czytelnym na iphone jest usunięcie elementów pływających tak aby pasek boczny spadł poniżej głównej zawartości. W ten sposób, czytlenik nie musi przewijać paska bocznego na urządzeniu. Aby zrobić tą ptawcę, dodamy ten kod do dolnego arkusza styli bloga: Możesz myśleć o kodzie jaki wstawiliśmy wewnątrz nawiasów media query jako własnym arkuszu stylów, wywoływanym kiedy warunek zapytania zostanie napotkany. W tym przypadku, zmieniamy rozmiar ciała strony i zmieniamy dwukolumnowych układ w układ jednokolumnowy. Możemy również używać media queries kiedy włączymy arkusz stylów, więc możemy trzymać nasz mobilny arkusz stylów w oddzielnym pliku, jak ten Z tym, nasz blog natychmiast staje się bardziej czytelny na iphone. Możen użyć tego podejścia do zbudowania arkusza stylów dla innych wyświetlaczy, tak jak kioski, tablety i wyświetlania różnych rozmiarów tak aby zawartość była bardziej czytelna w wielu miejscach Poprawa dostępności Wiele nowych elementów HTML 5 pomaga dokładnie opisywać zawartość. Staje się to ważniejsze keidy inne programy zazynają interpretować kod. Na przykład, niektórzy ludzie używają

41 oprogramowania nazwanego czytnikami ekranu dla tłumaczenia graficznej zawartość ekranu do tekstu, który czyta na głos. Czytniki ekranu pracuj przez interpretację tekstu na ekranie i znaczników odpowiadajacych identyfikacji linków, obrazów i innych elementów. Czytniki poczyniły wielki postęp ale zawsze pozostają w tyle za aktualnymi trendami. Żyjące regiony na stronach, gdzie żądania Ajax modyfikują zawartość na stronie są trudne do wykrycia. Bardziej złożone strony mogą być trudne w nawigacji ponieważ czytniki ekranu muszą czytać wiele treści na głos. Dostępność dla Rich Internet Applications (WIA-ARIA) jest specyfikacją która dostarcza sposobów poprawy dostępności stron internetowych, szczególnie aplikacji sieciowych. Jest szczególnie użyteczna jeśli tworzysz aplikacjae za pomoca kontrolek JavaScript i Ajax. Niektóre części specyfikacji WIA-ARIA mogą być dostępne w HTML 5, podczas gdy inne pozostają odseparowane i mogą stanowić uzupełnienie specyfikacji HTML5. Wiele czytników ekranów używa jż funkcji specyfikacji WIA_ARIA, wliczając w to JAWS,WindowsEyes a nawer App[le z wbudowaną funkcją Voice Over. WIA-ARIA wprowadza również dodatkowe znaczniki, jako wspomaganie technologiczne, można używać jako wskazówki dla odkrywania regionów, które są aktuazlizowane Techniki te obejmują : Atrybut role [<div role="document">] Identyfikuje odpowiedzialność elementu dla czytników ekranu aria-live [<div aria-live="polite">] Identyfikuje region automatycznie aktualizowany, rawdopodobnie przez Ajax aria-atomic[<div aria-live="polite" aria-atomic="true">] Identyfikuje czy cała zawartość żyjącego regionu powinna być odczytana lub tylko elementy, które się zmieniły Zapewnienie wskazówek nawigacyjnych z rolami ARIA Większość stron internetowych ma wspólną strukturę : nagłówek, sekcja nawigacyjna, zawartość główna i stopka. Wiekszość z tych stron jest kodowana tak po prostu w sposób liniowy. Niestety, oznacza to,ze czytnik ekranu musi czytać stronę w kolejności użytkownika. Ponieważ większość strona powtarza ten sam nagłówek i nawigację na każdej stronie, użytkownik będzi musiał wysłuchać tyhc samych elementów przy każdej wizycie na innej stronie Zaleconą poprawką jest zapewnienie ukrycia linku "nawigacyjnego", który czytnik ekranu będzie odczytywał na głos, który jest linkiem gdzieś w pobliżu głównej zawartości. Ale nie każdy wie jak (lub pamięta) jak to zrobić. Nowy atrybut HTML5 role pozwala nam przypisać "odpowiedzialność: dla każdego elementu na stronie. Czytnik ekranu może potem łatwo analizować stronę i klasyfikować te wszystkie odpowiedzialności aby mógł stworzyć prosty indeks na stronie. Na przykład, może znaleźć wszystkie role nawigacyjne na stronie i zaprezentować je użytkownikowi, aby mógł szybko nawigować do naszej aplikacji. Te role pochodzą ze specyfikacji WIA-ARIA i zostały włączone do specyfikacji HTML5. Istenieją dwie określone klasyfikacje ról, które można umieścić do wykorzystania : rola charakterystyczna i rola dokumentu Role charakterystyzne Identyfikują "iekawe miejsca" na stronie, takie jak banner, obszar wyszukiwania lub nawigacja, które czytniki ekranu mogą łatwo zidetyfikować Rola banner Użycie Idenyfikuje baner na stronie

42 search navigation main contentinfo complementary application Identyfikuje obszar wyszukiwania na stronie Identyfikuje elementy nawigacyjne na stronie Identyfikuje gdzie zaczyna się zawartość główna strony Identyfikuje gdzie istnieje informacja o zawartości, taka jak prawa autorskie Identyfikuje zawartość na stronie, która uzupełnia główną zawartość ale ma swoje własne znaczenie Idetyfikuje rwegion strony, która zawiera aplikację internetową jako przeciwieństwo dokumentu internetowego Możemy zastosować kilka z tych ról do naszego blogu. Zastsujemy banner do nagłówka: <header id="naglowek_strony" role = "banner> <h1> Blog </h1> </header> Wszystko co trzeba zrobić to dodać role="banner" dla istniejącego znacznika header. W ten sam spsoób identyfikujemy naszą nawigację: Specyfikacjka HTML5 mówi,że pewne elementy mają domyślne role i nie mogą być nadpisywane. Element nav musi mieć rolę navigation i technicznie nie musi być określanyy. Czytnik ekranu nie są całkiem gotowe do akceptowania tej domyślności, ale wiele z nich rozumie role ARIA. Nasz główny region i pasek boczny mogą być zidentyfikowane tak:

43 Zidentyfikujemy publikację i prawa autorskie w stopce używając roli contentinfo Jeśli mamy wyszukiwanie na naszym blogu, mozemy zidentyfikować ten region również. Teraz, keidy zidentyfikowaliśmy role charakterystyczne, zajmijmy się elementami dokumentu. Role w strukturze dokumentu Role struktury domukentu pomagają czytnikom ekranu zietyfikować części statyczne zawartości, co może być pomocne przy lepszej organizacji zawartości dla nawigacji Zasada Użycie document Identyfikacja regionu zawierającego zawartość dokumentu, jako przeciwieństwo zawartości aplikacji Identyfikuje kompozycję, której format jest niezależną częścią dokumentu article definition directory heading img list listitem math note presentation row rowheader Identyfikuje definicję terminu lub tematu Identyfikuje listę odniesień do grupy, takich jak spios treści. Używane dla zawartości statycznej Identyfikuje nagłówek dla sekcji strony Identyfikuje sekcję,która zawiera elementy obrazka. Może to być element obrazkowy jak również tekst opisowy Identyfikuje grupę nieinteraktywnych elementów listy Identyfikuje pojedynczego członak grupy z nieinteraktywnej listy pozycji Identyfikuje wyrażenia matematyczne Identyfikuje zawartość, która jest wzięta w nawiasy lub pomocnicza w stosunku do głównej treści zasobu Identyfikuje zawartość, która jest prezentacją Idedntyfikuje wiersze komórek w siatce Identyfikuje komórkę zawierającą informację nagłówkową dla wiersza w siatce Wiele z tych rół dokumentu jest jawnie zdefiniowana w znacznikach HTML, takich jak artykuły i nagłówki. Jednak, rola document nie jest, a jest bardzo pomocna, szczególnie w aplikacjach z mieszaną dynamiczno-statyczną zawartością. Na przykład, klient sieciowy może mieć rolę document dołączoną do eleemntu który zawiera ciało wiadomości eail. Jest to użyteczne ponieważ czytniki ekranu często mają różne metody dla nawigacji przy pomocy klawiatury. Kiedy czytnik ekranu skupia się na elemencie aplikacji, może musieć naciskać klawisz przez aplikację sieciową. Jednak, kiedy skupia się na elemencie statycznym, może pozwolić czytnikowi ekranu łączyć kkawisz do pracy różnie. Możemy zastosować rolę document do naszego blogu przez dodanie go do elementu body: To pozwoli zapewnić,że czytnik ekranowy potraktuje tą stronę jako zawartość statyczną Uwagi końcowe

44 Te role są używane w najnowszych przeglądarkach, z najnowszymi czytnikami ekranów, więc możesz zacząć pracować z nimi już teraz. Przeglądarki, które nie obsługują ich ignorują je, więc są one pomocne ludziom, którzy mogą ich używać Tworzenie przystępnych, aktualizowanych regionów Obecnie robimy wiele rzeczy z Ajaxem w naszych aplikacjach internetowych. Standardową praktyką śa jakieś efekty wizualne dane użytkonikowi sugerujące że coś się zmieniło na strnie. Jednak osoba korzystająca z czytnika ekranu oczywiście nie będzie mogła zobaczyć tego. Specyfikacja WIA-ARIA stanowi całkiem miła alterantywę działającą w IE, Firefox i Safari, z różymi popuarnymi czytnikami. Zbudujemy prosty interfejs wstawiając całą zawartość na stronę główną, i jeśli dostępna jest JavaScript, ukryjemy wszystko oprócz pierwszego wejścia. Stworzymy linki nawigacyjne wskazujące każdą sekcję używające kotwicy strony, użyjemy jquery do zmiany tych linków na zdarzenia wymieniające zawartość główną. Tworzenie strony Zaczniemy od stworzenia podstawowej strony HTML5, i dodamy sekcję powitalną, która będzie domyślną seckją wyświetlaną użytkownikom kiedy odwiedzają tą stronę.

45 Sekcja powitania ma ID welcome, który pasuje do anchora w pasku nawigacyjnym. Możemy zadeklarować naszą dodatkową sekcję strony w ten sam sposób

46 Nasze cztery regiony są zawinięte przez ten znacznik: Te atrybuty w tej linii mówią czytnikowi ekranu,że to region aktualizacji strony Aktualizacja polite i assertive Są dwa typy metod dla alarmowania użytkownika o zmianach na stronie kiedy używa arai-live. Metoda polite jest stworzona aby nie przerywac pracy użytkownikowi. Na przykład jeśli czytnik ekranu odczytuje zdanie, a inny rwegion strony się aktualizuje a tryb jest ustawiony na polite, wtedy czytnik ekranowy będzie kończył odczytywanie bieżącej sentencji. Jednak, jeśli metoda jest ustawiona na assertive, wtedy jest rozpatrywana jako wysoki priorytet i czytnik ekranowy zatrzyma się i zacznie odczytywanie nowej zawartości. Rzeczywiście ważne jest aby użyć właściwego typu przerwania kiedy projektujemy stronę. Nadużywanie "assertive" może zdezorientować użytkowników. Należy używać assertive tylko jeśli koniecznie musisz. W naszym przypadku jest to właściwy wybór, ponieważ będziemy ukrywać pozostałą zawartość. Aktualizacja atomic Drugi parametr, arai-atomic = true, instruuje czytnik ekranu aby odczytał całą zawartość zmienionego regionu. Jeśli ustawimy go na false, czytnik ekranu będzie odcyztywał miejsca które się zmieniły. Zastępujemy całą zawartość i powiemy czytnikowi aby odczytał ją. Jeśli zastępujemy pojedynczą pozycję listy lub dołączamy tabelę z Ajaxem, chcemy użyć zamiast tego false Ukrywanie regionów Aby ukryć regiony, musimy napisać trochę JavaScript i dołączyć go do naszej strony. Stwórzmy plik nazwany application.js a potem dołączmy ten plik jak również bibliotekę jquery na naszą stronę

47 Nasz plik application.js : W linii 11 ukryliśmy sekcje "services", "about" i "contact". Zastosowaliśmy również do tego klasę "hidden", a potem w kolejnej linii zastosowaliśmy klasę "visible" dla domyślnej sekcji "welcome" Dodatnie tych kals czyni łatwiejszym identyfikację, które sekcje muszą być wyłączone a które włączone kiedy przełączamy. Przechwytujemy kliknięcie w pasem nawigacyjny w linii 14 a potem okreslamy które elementy zostały kliknięte w 17. Jeśli użytkownik kliknął link, sprawdzamy aby zobaczyć czy odpowiednia sekcja jest ukryta. Atrybut href klikniętego linku może łatwo pomóc nam zlokalizować odpowiednią sekcję używając selektorów jquery, które można zobaczyć w linii 19. Jeśli jest ukryta, ukrywamy wszystko i pokazujey wybraną sekcję. To wszystko. Czytnik ekranu powinien wykryć zmieniony region

48 II.NOWE WIDOKI I DŹWIĘKI Rysowanie po płótnie W drugiej części będziemy mówić o przejściu od struktury i interfejsów do patrzenia na to jak możemy wykorzystać HTML5 i CSS3 do rysowania,pracy z plikami multimedialnymi i tworzenia swoich własnych elementów interfejsu. Zaczniemy od poświęcenia czasu na grafikę używając nowego elementu HTML5, canvas. Jeśli chcesz mieć obrazek w aplikacji internetowej, tradycyjnie otwierasz swoje oprogramowanie graficzne, tworzysz obrazek i osadzasz go na stronie znacznikiem img. Jeśli chcesz animacji, używasz Flasha. Element canvas HTML5 pozwala projektantom tworzyć obrazki i animacje w przeglądarce programowo za pomocą JavaScript. Możemy użyć płótna to tworzenia prostych lub złożonych kształtów lub nawet stworzyć wykres bez uciekania się do bibliotek po stronie serwera, Flasha lub innych wtyczek. Najpierw zapoznamy się jak używać JavaScript i elementu canvas razem prze rysowanie jakich prostych kształtów, do zbudowania logo. Potem użyjemy biblioteki graficznej, specjalnie stworzonej do pracy z płótnem do stworzenia paska graficznego statystyki przeglądarki. Omówimy również szczególne wyzwania, ponieważ płótno jest czymś więcej niż elemente interfejsu programowania. Rysowanie logo Element canvas jest elementem kontenerowym podobnie jak element script. Jest pusty kiedy zaczynamy rysować. Definiujemy płotno z szerokością i wysokością: Niestety nie możemy użyć CSS do kontroli lub modyfikacji szerokości i wysokości elementu canvas bez zniekształcenia zawartości, więc musimy się zdecydować na wymiary płótna kiedy go deklarujemy, Użyjemy JavaScript do wstawienia kształtów na płótno. Nawet jeśli dostarczasz zawartości podstawowej do tych przeglądarek bez elementu canvas, musisz zabezpieczyć kod JavaScript przez próbą manipulacji nim. Znajdziesz płótno przez jego ID a zobaczysz czy przeglądarka obsługuje metodę getcontext. Jeśli otrzymaliśmy odpowiedź z metody getcontext, przechwytujemy kontekst 2D dla płótna więc możemy dodać obiekty. Jeśli nie mamy kontekstu, musimy opracować sposób wyświetlenia zawartości awaryjnej. Ponieważ wiemy,że element canvas wymaga JavaScript aby działać, zbudujemy szkielet obsługujący awaryjność z początku. Kiedy mamy kontekst płótna, po prostu dodajemy elementy to tego kontekstu. Aby dodać czerwone pole, ustawiamy wypełnienie kolorem a potem tworzymy pole:

49 Kontekst 2D płótna jest siatką, z lewym, górnym rogiem jako domyślnym jako punkt wyjściowy. Kiedy tworzymy kształt, określamy współrzędne początkowe X i Y oraz szerokość i wysokość Każdy dodany kształt ma swoją własną warstwę, więc musisz stworzyć trzy pola z 10 pikselowym offsetem jak to: i są umieszczone na górze jeden drugiego: Teraz po zrozumieniu podstaw rysowania, stworzymylogo AwesomeCo. Jest dosyć proste Rysowanie logo Logo składa się z ciagu tekstowego, ścieżki pod kątem, kwadratu i trójkąta. Zacznijmy od utworzenia nowego dokumentu HTML5, dodając element canvas do strony, a potem tworzymy

50 funkcję JavaScript do narysowania logo, który wykrywa czy możemy używać płótna 2D Wywołujemy tą metodę po pierwszym sprawdzeniu istniejącego elementu canvas : Wyszukujemy element na stronie z ID logo, więc lepiej upewnij się,że dodałeś nasz element canvas do dokumentu aby móc go znaleźć a nasz detekcja zadziałała Następnie dodajemy tekst do płótna Dodawanie tekstu Dodanie tekstu do płótna polega na wybraniu czcionki, rozmiaru czcionki i wyrównania, a następnie zastosowanie do tekstu właściwych współrzędnych na siatce. Nasz tekst możemy dodać tak: Definiujemy typ tesktu i ustawienia jego punktu odniesnienia, lub wyrównanie pionowe, przed zastosowaniem go do płótna, Użyjemy metody filltext więc mamy teskt, w kolorze wypełnienia i ustawiamy go 60 pikseli na prawo, więc możemyu zrobić miejsce dla dużego trójkąta, który będziemy rysować dalej. Rysowanie linii Narysujemy liniie na płótnie przez gierkę, "połącz kropki". Określamy punkt startowy na siatcec płótna a potem określamy dodatkowe pnkty na siatce. Kiedy poruszamy się po płótnie, kropki połączą się, jak tu:

51 Użyjemy metody beginpath () dla uruchomienia rysowania linii, a potem stworzymy naszą ścieżkę: Kiedy mamy wszystko przesunięte wokół płótna, musimy wywołać metdoę stroke do rysowania linii a potem a potem wywołujemy metdodę closepath dla zatrzymania rysowania Przesunięcie punktu początkowego Musimy narysować mały kwadrat i tójkąt wewnątrz dużego trójkąta. Kiedy rysujemy kształty i ścieżki, możemy określić współrzędne X i Y od punktu początkowego w lewym górnym rog płótna, ale możemy przenieść początek do nowego położenia. Narysujmy mniejszy wewnętrzny kwadrat przez przesunięcie początku Zauważ,że przed przesunięciem początku, wywołujemy metdoę save(). Zapisuje ona poprzedni stan płótna, więc łatwo możemy doń wrócić. Jest to jak przywracanie punktu, i możesz myśleć o nim jak o stosie. Za każdym razem, kiedy wywołujesz save(), otrzymujesz nowe wejście. Kiedy wszystko jest zrobione możemy wywołać restore(), która przywraca najwyższy zapisany punkt stosu. Teraz użyjemy ścieżek do rysowania wewnętrznego trójkąta, ale zamiast obrysu użyjemy wypełnienia aby stworzyć iluzję,że trójkąt jest "pocięty na kwadraty": Tu ustawiamy obrys i wypełnienie na białe (#fff) zanim zaczniemy rysować. Potem rysujemy nasze linie, a ponieważ przesuwamy poprzedni początek, jesteśmy związani z lewym górnym rogiem kawadratu jaki narysowaliśmy. Teraz potrzebujemy trochę koloru Dodawanie kolorów Wcześniej omówiliśmy jak ustawić obrys i wypełnienie kolorem dla narzędzio do rysowania, Możemy ustawić kolor wszystkiego na czerwony przez dodanie tego kodu zanim zaczniemy cokolwiek rysować

52 Ale to trochę nudne. Możemy stworzyć gradient i przypisać mu te obrysy i wypełnienia: Właśnie stworzyliśmy pochylony obiekt i ustawiliśmy kolo. W tym przykładzie, pracowaliśmy między dwoma cieniami czerwieni, ale możemy zrobić tęczę jeśli chcemy. Zauwaź,że musimy ustawić kolor zanim zaczniemy rysować obiekty. W tym miejscu nasze logo jest kopletne, i musimy lepiej zrozumieć jak rysować proste kształty na płótnie. Jednak wersje Internet Explorer przed IE9 nie mają wsparcia dla elementu canvas. Uwagi końcowe Google udostępnił bibliotekę nazwaną ExplorerCanvas, która umożliwia dostęp do Canvas API użytkownikom IE. Wszystko co musimy zrobić do dołączyć tą bibliotekę do naszej strony: Statystyki graficzne z RGraph Teraz postaramy się uzyskać coś, podobnego do poniższego rysunku Jest wiele sposóbów narysowania wyklresu na stronie internetowej. Projektanci uzywają do tego celu Flasha, ale to ma swoje ograniczenia i nie działa zer wszystkimi urządzniami mobilnymi, takimi jak ipad i iphone. Jest kilka rozwiązań po stronie serwera, które działają dobrze, ale mogą być też zbyt intensywne dla procesora, jeśli pracujemy z danymi czasu rzeczywisego. Standardowe rozwiązania po stronie klienta jak płótno są lepszym rozwiązaniem tak długo jak okaże się, że działa na starszych przeglądarkach. Widziałeś już jak rysować kwadraty, ale rysowanie czegoś bardziej złożonego wymaga więcej JavaScript. Potrzebujemy biblioteki graficznej do pomocy. Fakt,że HTML5 nie jest dostępny jeszcze wszędzie, nie zatrzyma projektowania biblioteki RGraph. RGraph czyni zdecydowanie prostszym rysowanie wykresów przy użyciu płótna HTML5. Jest czystym rozwiązaniem JavaScript więc nie działa u tych użytkowników,którzy nie mają JavaScript. Oto przykład kodu dla prostego wykresu słupkowego:

53 Jak widać musimy stworzyć kilka tablic JavaScript, a biblioteka narysuje wykres na płótnie. Opisywanie danych z HTML Możemy wstawić na sztywno wartości dla statystyk przeglądarki w kodzie JavaScript, ale wtedy tylko użytkownicy z JavaScript będą mogli oglądać te wartości, Zamiast tego, wstawimy dane na stronie jako tekst. Możemy odczytać dane z JavaScript i uzupełnić je później w bibliotece graficznej Używamy adtrybutów danych HTML5 do przechowywania nazw przeglądarek i procentów. Chociaż mamy tą informację w tekście, dużo łatwiej jest pracować programistycznie ponieważ nie musimy parsować łańcucha. Jeśli otworzysz stronę w przeglądarce zobaczysz,że dane wykresu są ładnie wyświetlone i odczytywalne nawet bez wykresu. Jest to zawartośćawaryjna dla urządzeń

54 mobilnych i innych urządzeń gdzie albo nie ma elementu canvas albo JavaScript. Skierowanie naszego HML do wykresu słupkowego Mamy zamiar użyć wykresu słupkowego, więc musimy wymagać obecności bibliteki graficznej RGraph Bar i biblioteki RGraph. Użyjemy również jquery dla pobierania danych z dokumentu. W sekcji head strony HTML, musimy załadować potrzebne biblioteki Aby zbudować wykres musimy przechwycić tytuł wykresu, etykiety i dane z dokumentu HTML i przekazać je do bibliotek RGraph. RGraph ma w tablicach zarówno etykiety jak i dane. Możemy użyć jquery do szybkiego zbudowania tych tablic. Najpierw w linii 2 pobieramy tekst dla nagłówka. Potem w linii 4 wybieramy wszystkie elementy które maką atrybut data-name. Używamy funkcji map jquery do skierowania tych wartości z tych elementów do tablicy. Użyjemy tej samej logiki w linii 8 do pobrania tablicy procentów. Z zebranymi danymi, RGraph nie ma problemów z narysowaniem wykresu. Wyświetlanie alternatywnej zawartości W sekcji "Opisywanie danych z HTML" umieścilismy wykres między początkowym a końcowym znacznikiem canvas. To ukrywa te elementy w przeglądarkach, które obsługują płótno podczas wyświetlania ich w przeglądarce która nie obsługuje. Jednak, zawartość powinna jeszcze być ukryta jeś przeglądarka użytkownika wspeira element canvas ale użytkownik ma zablokowaną JavaScript. Po prostu opuszczamy dana z poza płotna a potem ukrywamy je z jquery kiedy sprawdzamy czy płótno istnieje

55 Z tym, nasz wykres jest gotowy, z wyjątkiem ludzi, którzy używają przeglądarek, które nie obsługują elementu canvas. Uwagi końcowe Przy budowie tego rozwiązania mamy już ujęte zabezpieczenie dostępności i brak JavaScript, ale możemy tworzyć alterantywne wyykresy dla ludzi nie mających wsparcia cnavas ale mogą używać JavaScript. Istnieje mnóstwo bibliotek graficznych, ale każda ma swój sposób pobierania danych. Wykresy słupkowe są tylko prostokątami z określonymi wysokościami, a mając wszystkie dane na stronie musimy skonstruować ten wykres ręcznie.

56 W linii 2 ukrywamy listę nieuporządkowaną tak aby ukryć wartości tekstowe. Potem pobieramy element zawierający dane wykresu i stosujemy pewne podstawowe style CSS. Ustawiamy pozycjonowany element relative na 6, co pozwoli nam spozycjonować absolutnie nasz wykres słupkowy i etykiety wewnątrz tego kontenera. Potem przechodzimy pętlą przez paragrafy w liście punktowanej (linia 11) i tworzymy słupki. Każa iteracja przez etykiety tworzy dwa elementy div, jeden dla samego słupka a drugi dla etykiety, którą pozycjonujemy poniżej paska. Tak więc dzięki matematyce i jquery możemy stworzyć ponownie wykres. Chociaż nie wygląda dokładnie tak samo, bliżej mu do naszej koncepcji. Potem musimy zaczepić go w naszym wykrywaniu płotna:v

57 Osadzanie audio i video Audio i video są ważną częścią nowoczesnego Internetu. Podcasty, odsłuch audio a nawet video są wszędzie, i do tej pory były dostępne jako wtyczki do przeglądarek. HTML5 wprowadza nowe metody osadzania plików audio i video na stronie. Zbadamu tu kilka metod jakich możemy użyć nie tylko do osadzania zawartości audio i video ale również zapewnienia,że są dostępne ludziom z starszymi przeglądarkami. Omówimy następujące dwa elementy: Odtwarzanie audio natywnie w przeglądarce Odtwarzanie natywne video Zanim to jednak zrobimy musimy pomówić o historii audio i video w sieci.aby zrozumieć gdzie idziemy, musimy zrozumieć gdzie byliśmy. Trochę historii Ludzie próbują używać audio i video na stronach internetowych od długiego czasu. Są ludzie osadzający pliki MIDI na swoich stronach używając znacznika embeded dla odniesienia do pliku Znacznik embede nigdy nie stał się standardem, więc ludzie zaczęli używać znacznika object, który został zaakceptowany przez standard W3C. Dla wsparcia starszych przeglądarek, które nie rozumieją znacznika object, często widać znagnieżdżone znaczniki embed wewnątrz znacznika objet: Nie każda przeglądarka może strumieniować zawartość w ten sposób, choć i nie każdy serwer został skonfigurowany właściwie do obsługi. Rzecz się bardziej skomplikowała kiedy video stało się bardziej popularne w sieci. Przeszliśmy od RealPlayera do Windows Media i QuikTime. Każda firma ma strategię video i wydawało się,że każda strona ma różne metody i foraty dla kodowania swojego video na stronach internetowych. Macromedia (obecnie Adobe), zrozumiała,że jego Flash Player może być doskonałym sposobem dostarczania treści audio i video na różnych platformach. Flash jest dostępny na blisko 97% przeglądarek internetowych. Kiedy producenci treści odkryli,że mogą zakodować raz a grać w dowolnym miejscu, tysiące stron zwróciłosię w kierunku strumieniowania Flash zarówno dla audio jak i video. Wtedy pojawił się Apple w 2007 roku z iphonem i ipodem, i postanowił,zę Apple nie będzie wspierało Flash na tych urządzeniach. Dostawcy treści odpowiedzieli stworzeniem strumieni video, które działają w przeglądarce mobilnej Safari. Te filmy, przy użyciu kodeka h.264 również były odtwarzane przez normalny FlashPlayer, co pozwoliło kodować raz podczas kierowania do wielu platform. Twócy specyfikacji HTML5 wierzyli,że przeglądarki powinny obsługiwać audio i video natywnie zamaist zależeć od wtyczki, która wymagała wielu wzorów HTML.

58 Kontenery i kodeki Kiedy mówimy o video w Sieci, mówimy o kontenerach i kodekach. Można myśleć o video jako pliku AVI lub MPEG, ale jest to uproszczeniem. Kontenery są jak koerta, która zawiera strumień audio, strumień video i czasami dodatkowo metadane, takie jak napisy. Te strumienie audio i video muszą być zakodowane, i tu wkraczają kodeki. Audio i video może być kodowane na setki sposobów, ale kiedy chodzi o video w HTML5, jest tylko kilka kwestii Kodeki video Kiedy oglądamy video, odtwarzacz video musi go odkodować. Niestety, odtwarzacz może nie chcieć zdekodować video jakie chcesz oglądać. Niektóre odtwarzacze używają oprogramowania do zdekodowania video,które może być wolne lub bardziej obciążać CPU. Inne odtwarzacze używają dekoderów sprzętowych i są zatem ograniczone do tego co mogą odtwarzać Są trzy formaty video, o któych musisz wiedzieć jeśli chcesz zacząć korzystać ze znacznika video w HTML5 : H.264, Theora i VP8 H.264 jest kodekiem wysokiej jakości ustandaryzowanm w 2003 roku i stworzonym pzez grupę MPEG. Wspiera urządzenia niższej klasy takie jako telefony komórkowe, podczas gdy w tym samym czasie obsługuje video dla urządzeń wysokiej rozdzielczości, specyfikacja ta jest podzielona na różne profile. Profile te współdzielą zbiór wspólnych funkcji, ale profile wyższej klasy oferują dodatkowe opcje, które poprawiają jakość. Na przykład, iphone i Flash Player mogą odtawrzać video zakodowane w H.264,ale iphone tylko obsługuje profil nizszej jakości, podczas gdy Flash Player obsługuje strumienie wysokiej jakości. Możliwe jest zakodowanie video i osadzenei wielu profili tak aby wyglądało ładnie na różnych platformach. H.264 jest de facto standardem z powodu wsparcia przez Microsoft i Apple, które są licencjodawcami. YouTube konwertuje swoje video na kodek H.264 co pozwala odtwarzać je na iphone. Jednak nie jest to otwarta technologia. Jest opatentowana, a jej stosowanie jest tematem licencji. Producenici muszą płacić za wykorzystywanie H.264. Theora jest wolnym od opłat kodekiem zaprojektowanym prze Xiph.Org Foundation. Chociaż twórcy zawartości mogą tworzyć video podobnej jakości z Theorą, jest ona słąbo adoptowany. Firefox, Chrome i Opera mogą odtwarzać video zakodowane Theorą na dowlonej platformie bez dodatkowego oprogramowania, ale IE, Safari i ios już nie. VP8 jest całkowicie otwartym, wolnym od opłat kodekiem o jakości podobnej do H.264. Jest wspeirany przez Mozillę, Google Chrome i Operę a IE 9 obieduje wsparcie VP8 tak długo jak użytkownik ma zainstalowany kodek. Jest również obsługiwany we Flash Playerze, czyniąc go ciekawą alternatywą. Nie jest wspierany przez Safari lub urządzenia ios, co oznacza,że ten kodek jest darmowy w użyciu, twócy treści dla iphone i ipod dalej będą używali H.264. Kodeki audio Jak by konkurencyjne standardy video nie komplikowały sprawy,may także konkurencję w audio Advandced Audio Codec (AAC) jest formatem audio Apple u,zywanym w jego itunes Store. Jest stworzony jako audio lepszej jakości niż MP3 o tym samym rozmiarze pliku, i również oferuje wiele profili podbnie jak H.264 i podbnie jak H.264 nie jest darmowym kodekiem. Wszystkie produkty Apple odtwarzają pliki AAC. Vorbis (OGG) jest darmowym formatem open source obsługiwanym przez Firefox, Operę i Chrome. Pliki Vorbis mają bardzo dobrą jakość audio ale nie są szeroko stosowane przez sprzętowe odtwarzacze muzyczne

59 MP3 jest formatem, chociaż szeroko stosowanym i popularnym, nie obsługiwanym przez Firefox i Operę ponieważ również jest opatentowany. Jest obsługiwany przez safari i Google Chrome. Kodeki video i audio muszą być spakowane razem dla dystrybucji i odtwarzania. Pomówimy więc od kontenerach video Kontenery i kodeki, wspólna praca Kontener jest plikiem metadanych, który identyfikuje i przeplata pliki audio i video. Kontener w rzeczywistości nie zawiera informacji o tym jak informacja jaką zawiera jest kodowana. Zasadniczo, kontener "zawija" strumienie audio i video. Kontenery mogą często przechowywać dowolne połączenia zakodowanych mediów, ale zobaczymy te połączenia kiedy przejdziemy do pracy z video w Sieci: Kontener OGG z video Theroa i audio Vorbis, który działa z Firefox, Chrome i Operą Kontener MP4 z video H.264 i audio AAC, działajaće z Safari i Chrome. Będzie również odtwarzany przez Adobe Flash Player iphone'y, ipody i ipady Kontener WebM, używający video VP8 i audio Vorbis, działające w Firefox, Chrome,Operą i Adobe Flash Playerem Biorąc pod uwagę,że Google i Mozilla posuwają się do przodu z VP8 i WebM, może wyeliminować Theorę z mieszanki, ale ze spojrzenia na sprawy, wciąż kodujemy nasze wideo dwukrotnie raz dla użytkowników Apple raz dla użytkowników Firefox i Opery ponieważ nie chcą one odtwarzać H.264 Praca z audio Kiedy skończymy pracę będziemy mieli listę pętli audio, a odwiedzający będą mogli szybko przesłuchać każdą z nich. Nie musisz się martwić o znalezienie pętli audio dla tego projektu, ponieważ inżynier dźwięku już dostarczył nam próbki zarówno w formacie MP3 jak i OGG. Budowa listy podstawowej Inżynierowie audio dostarczyli nam cztery próbki dźwięku : drums, organ, bass i guitar. Musimy opisać każdą z nich używającą znaczników HTML. Oto znaczniki dla pętli drums: Najpierw definiujemy element audio,i mówi on nam,że chcemy mieć wywietlone jakieś kontrolki. Następnie definiujemy wiele dźwięków dla tego pliku. Najpierw definiujemy wersje MP3 i OGG próbki, a potem wyświetlamy link pozwalający odwiedzajacemu ściągnąć plik MP3 bezpośrednio jeśli przeglądarka nie obsługje elementu audio. To jest bardzo podstawowy fragment kodu do pracy z Chrome, Safari i Firefox. Wstawy go do wnętrza szablonu HTML5 z trzema innymi próbkami dźwięku

60 Kiedy otworzysz stronę w przeglądarce kompatybilnej z HTML5, każde wejście na liście będzie miało swój odtwarzacz audio, jak na poniższym rysunku:

61 . Sama przeglądarka obsługuje odtwarzanie audio kiedy naciśniesz przycisk Play. Kiedy otworzysz stronę w Internet Explorer, pokażą się linkio pobierania ponieważ przeglądarka nie rozumie lementu audio. Uwagi końcowe Wyjście awaryjne dla obsługi audio jest wbudowane w samym elemencie. Zdefiniowliśmy wiele źródeł dla naszego audio używając elementu source i dostarczyliśmy linków dla ściągania plików audio. Jeśli przeglądarka nie może zrenderować elementu audio, wyświetli link umieszczony zamiast pola. Możęmy nawet iść krok dalej i użyć Flasha po zdefiniowaniu naszych źródeł. Ale może to nie być najlepsze podejście. Możemy napotkać przeglądarkę, która obsługuje element audio ale nie obsługuje formatów jakie stosujemy. Na przykład, możemy się zdecydować,że nie warto marnować czsu dostarczać audio w wielu formatach. Doadtkowo, specyfikacja HTML5 szczególnie wspomina,że wsparcie dla awaryjnego audio może być użyte do umieszczenia treści, które mogłyby być odczytywane przez czytnikie ekranu. Najprostsyzm rozwiązaniem jest przesunięcie klinku pobierania poza element audio i użyć JavaScript do ukrycia: Potem tylko musimy wykryć wsparcie dla audio i ukryć ten link. Zrobimy to przez stworzenie nowego elementu audio w JavaScript i sprawdzenie czy odpowiada na metodę canplaytype(): Oceniamy odpowiedź a potem ukrywamy anchory, które są zagnieżdżone wewnatrz nasze sekcji próbek:

62 Osadzanie video Dostarczymy dwa video z serii "Photoshop Tips", któych użyjemy do zbudowania prototypu. Na szczęście mamy dane liki video w formacie H.264, Theora i VP8 więc możemy się skupić na tworzeniu strony. Znacznik video działa dokładnie jak element audio.musimy tylko dostarczyć naszych źródeł a Chrome, Firefox, Safari, iphone, ipad i IE 9 będą wyśweitlały video bez żadnych dodatkowych wtyczek. Oznaczenie dla naszego video może wyglądać tak: Definiujemy znacznik video z kontrolkami. Wyraźnie mówi,że nie powinien odtwarzać automatycznie przez nie dostarczenie atrybutu autoplay. W tym miejscu, nasze videa odtwarzają się w szeregu przeglądarkach a nasz użytkownik zobaczy odtwarzacz jak pokazany na rysunku W IE 8 i starszych trzeba użyć Flasha aby to móc zrobić. Uwagi końcowe Dla właściwego wsparcia Flasha i użycia video HTML5 umieścimy kod obiektu Flash wewnątrz

63 znacznika video. Flowplayer jest odtwarzaczem opartym o Flash, który może odtworzyć nasze już zakodowane video H.264. Ściągamy wersję open source odtwarzacza i umieszczamy pliki flowplayer-x.x.x.swf i flowplayer-controls-x.x.x.swf w folderze swf projektu. Potem umieszczamy ten kod wewnątrz znacznika video zaraz po ostatnim elemencie source: Zwróć uwagę na tą część: Źródłowy plik video musi być relatywny do położenia Flowpleyera. Poniewą umieściliśmy Flowplayer w folderze swf, musimy użyć ścieżki../video/h264/01_blur.mp4 dla pobrania naszego video. Kiedy oglądamy stronę w IE, nasze videor jest odtwarzane i nie musimy kodować do innego formatu, dzięki Flowplayerowi : Oczywiście nadal musimy wymyślić sposób na ludzi którzy nie mają natywnej obsługi video i nie majązainstalowanego Flasha. Aby to się stało pozwolimy ludziom pobrać nasze video przez dodanie sekcji z linkami do pobrania

64 Możemy użyć JavaScript do ukrycia tych video jeśli video HTML5 nie jest obsługiwane : Tu używamy techniki wykrywania bardzo podobnej do tej jakiej użyliśmy przy pracy z audio. W naszym przypadku nabiera większego sensu pozwolenie ludziom na pobieranie tych video do używania z ich ipodami czy iphonami. Ograniczenia video HTML5 Są trzy bardzo ważne ograniczenia, które aktualnie ogranczają użyteczność video HTML5. Po pierwsze, video HTML5 nie ma możliwości strumieniowania plików video. Użytkownicy przywyczaili się do możliwości przesuwania do określonej części video. Jest to coś w czym celują odtwarzacze oparte na Flashu. W naszym przypadku trzeb ściągnąć cały plik w przeglądarkach a to może zająć czas. Po drugie, nie ma sposobu zarządzania prawami. Strony takie jak Hulu7, które chcą zapobiegać piractwu swojej zawartoścu nie mogą się powołać na video HTML65. Flash pozostaje dobrym rozwiązaniem w takich sytuacjach. Ostatnie i najważniejsze, proces kodowania

65 video jets kosztowny i czasochłonny. Trzeba kodować w różnych formatach czyniąc video HTML5 mniej atrakcyjnym. Z tego powodu widać strony obsługujące video w foramcie H.264 tak aby można było odtwarzać na ipodzie i ipadzie, używając połączenia znaczników video i Flash. Audio, video i dostępności Żadno z zastępczych rozwiązań nie działa rzeczywiście dobrze dla użytkowników z ułomnościami. Faktycznie, specyfikacja HTML5, wyraźnie to wskazuje. Niedosłyszący użytkownik nie znajdzie żadnej wartości aby mógł pobrać plik audio, a niedowidzący nie będzie miał wiele z pliku video, jeśli chcą oglądać je poza przeglądarką. Kiedy dostarczamy treści naszym użytkownikom, powinniśmy w miarę możliwości zapewnić użyteczne alternatywy. Video i audio powinny mieć transkrypcje, które ludzie mogą zobaczyć. Jeśli tworzymy własną treść, transkrypcje są łatwe do wykonania, jesli zaplanujesz je od początku ponieważ mogą pochodzić ze skryptu jaki piszesz. Jeśli transkrypcja nie jest możliwa, należy rozpatrzyć podsumowania, które wskażą najważniejsze części video Możesz ukryć transkrypcje lub link ze strony głównej video. Przyjemność dla oczu Jako projektanci, zawsze jesteśmy zaiteresowani w stworzeniu przyjemnej dlaoczustrony, a CSS3 dostarczakilku sposobów na zrobienie tego. Możemy użyć naszych własnych czcionek na stronie.możemy stworzyć elementy z zaokrąglonymii rogami i cieniami. Możemy użyć gradientu jako tła, możemy nawet obrócić elementy aby nie były jak kloce i nudne. Możemy to wszystko zrobić bez Photoshopa lub innych programów graficznych, a tu pokażemy jak. Zaczniemy od zaokrąglenia rogów elementów formularza. Potem, zbudujemy prototypowy baner gdzie nauczymy się jak dodawać cieniem, obroty, gradienty i nieprzejrzystość. W końcu, pomówimy o tym jak używać funkcji więc można będzie użyć lepszych czcionek na stronie. Szczególnie zbadamy poniższe funkcje CSS3: border-radius[border-radius : 10px] Zaokrągla rogi elementów Wpsarcie RGB [background-color:rgba(255,0,0,0,5;] Używanie kolorów RGB zamiast kodu szesnastkowego wraz z przeźroczystością pole cienia [box-shadow: 10px 10px 5px #333;] Tworzy cień na elementach

66 Obrót: [transform:rotate(7.5deg0;] Obracanie elementu Gradient : [linear-gradient(top, #fff, #efefefe);] Tworzenie gradientó do użycia z obrazkami Pozwala na używanie specyficznych czcionek przez CSS Zaokrąglanie ostrych brzegów W Sieci, wsyzstko jest domyślnie prostokątem. Pola, tabele a nawet sekcje strony www mają blokowy, z ostrymi brzegami wygląd, więc wielu projektantów przełącza się na inne techniki pozwalające na zaokrąglanie brzegów dla tych elementów. CSS3 obsługuje łatwość zaokrąglania rogów, a Fiefox i Safari obsługuje to dość dawno. Zmiękczanie formularza logowania Siatki i maiety otrzymane dla bieżącego projektu pokazują pola formularza z zaokrąglonymi rogami. Zaokrąglimy te rogi używając CSS3. Naszym celem jest stworzenie czegoś podobnego do poniższego rysunku: Tutaj mamy formularz logowania, gdzie używamy prostego HTML'a:

67 Teraz wystylujemy formularz trochę aby lepiej wyglądał

68 Te podstawowe style usuwają numerację z listy i zapewniają,że pola wejściowe są tego samego rozmiaru. Mozemy zastosować efekt zaokrąglania do naszych elementów. Specyficzne selektory przeglądarki Ponieważ specyfikacja CSS3 nie jest skońcozna, zanczniki przeglądarki dodają jakieś funkcje i zdecydiowały o dodaniu swojej własnej implementacji. Te prefiksy pozwalając znacznikom przeglądarki wprowadzać funkcje wcześniej niż stanąsię częścią końcowej specyfikacji, i ponieważ nie poprzedzają aktualnej specyfikacji, znaczniki przeglądarki mogą implementować aktualną specyfikację utrzymując również swoją własną implementację. Oznacza to,że musimy dreklarować granice promienia raz dla każdego typu przeglądarki. Firefox używa selektora: Safari i Chrome używają selektora: Aby zaokrąglić wszystkie pola wejściowe w naszym formularzu, potrzebujemy zasadę CSS taką jak ta : Dodaj teraz plik style.css, i masz zaokrąglone rogi Uwagi końcowe Masz wszystko działające w przegladarkach Firefox, Safari i Google Chrome, ale wiesz,że nie działa w IE i,że trzeba wdrożyć coś pomocnego IE. Projektanci stron internetowych zaokrąglają rogi na jakiś czas używając obrazków tła i innych technik, ale my mamy zamiar zachować prostotę tak jak to możliwe. Możemy wykryć promień rogu z JavaScript i zaokrąglić rogi używając licznych technik zaokrąglania. Dla tego przykładu, użyjemyjquery, wtyczki jquery Corner i zmodyfikowaną wtyczkę Corner, która zaokrągla pola tekstowe. Wsparcie wykrywania zaokrąglania rogów Wprowadzimy bibliotekę jquery i wtyczkę, będziemy wykrywająć czy przegląarka wspiera nasz atrybut, a jeśli nie, aktywujemy wtyczkę. W tym przypadku, musimy wykrać obecność właściwości border-radius CSS, ale również musimy sprawdzić prefiksy dla przeglądarek takie jak webkit i moz. Stwórz corner.js i dodaj tą funkcję:

69

70

71

72 Możemy teraz wykryć czy nasza przeglądarka zgubiła zaokrąglanie rogów, więc napiszemy kod do rzeczywistego zaokrąglania. jquery Corners jquery Corners jest małą wtyczką, która zaokrągla rogi przez zawinięcie dodatkowych znaczników div i wystylizowanie ich tak aby element docelowy był zaokrąglony. Nie działa dla pól formularza; jednak przy małej wyobraźni można użyć tą wtyczkę i trochę jquery dla wykonania tej pracy. Najpierw przechwytujemy jquery Corners, a połącz go ze stroną HTML. Łączymy też plik corner.js

73 Teraz mamy kod,któzt w rzeczywistości wywołujemy zaokrąglania Nasza wtyczka formcorners Mamy zamiar napisać wtyczkę jquery aby można było stosować zaokrąglanie do wszystkich pól formularza. Oto plik corners.js: Mówimy o obiekcie jquery, który może być elementem lub zbiorem elementów, i zawijamy go w dwa znaczniki div, które potem zaokrąglamy. Najpierw tworzymy wewnętrzny div tego samego koloru jak tło oryginalnego wejścia, i wyłączamy obramowanie rzeczywistego pola formularza. Potem zawijamy to pole z innym, polem z jego własnym kolorem tła, który jest oryginalnym kolorem obramowania, i nadaje trochę wypełnienia. Wywołanie zaokrąglenia Z naszą wtyczką i naszą biblioteką wykrywania, możemy teraz wywołać zaokrąglenie. A oto plik corners.js Zaokrąglamy trzy pola formularza i w końcu w lini 5, zaokrąglamy tylko górną część legendy i określamy,że wycięcie rogu będzie białe. Jeśli przeglądarka obsługuje właściwie border-radius, to wykorzystuje naszą wtyczkę. Jeśli nie, skorzystamy z CSS dodanego wcześniej. IE traktuje legendy troche inaczej. Możemy dodać małą poprawkę stylu dla IE która wypchnie trochę legendę aby wygladała tak samo jak w Firefox i Chrome

74 Praca z cieniami, gradientami i przekształceniami Zaokrąglanie rogów, to tylko początek tego co możemy zrobić z CSS3. Możemy dodać cienie do elementów aby wyróżniały się od reszty zawartości, możemy użyć gradientów aby uczynić tło bardziej zdefiniowane i możemy użyć przekształceń do obracania elementów. Wstawmy kilka tych technik razem dla makiety banera. Grafik stworzył coś takiego w PSD Sami możemy zrobić cień a nawet przejrzystość, a wszystko to w CSS. Jedyną rzecz jaką musimy zrobić z grafikiem to ludzie w tle. Podstawowa struktura Zacznijmy od zaznaczenia podstawowej struktur strony w HTML Możemy wystylizować podstawę tak:

75

76 Kiedy zastosujemy ten arkusz stylu na naszej stronie, otrzymamy coś takiego jak poniżej Dodawanie gradientu Możemy dodać definicję znaczka przez zmianę białego tła na subtelny gradient, który przechodzi z białego w jasno szary. Ten gradient będzie działał w Firefox,Safari i Chrome, ale ta implementacja jest inna w Firefox, Safari i Chrome. Chrome i Safari używają składni WebKit, zaś Firefox używa składni W3C. Ponownie użyjemy prefiksów.

77 Firefox używa metody -moz-linear-gradient, w której określa punkt początkowy gradientu, po którym występuje kolor startowy i w końcu kolor końcowy. Przeglądarki WebKit pozwalają nam ustawić kolor zatrzymania. W naszym przykładzie musimy tylko przejść z białego do szarego, ale jeśli musimy dodać kolory, tylko musimy dodać dodatkkowy kolor zatrzymania w definicji. Dodawanie cienia znaczka Możemy łatwo wykonać zanczek, który wydaje się osiadać na banerze przez dodanie cienia. Tradycyjnie, zrobilibyśmy cień w Photoshop przez dodanie go do obrazu lub poprzez umieszczenie go jako obrazka tła. Jednak właściwość box-shadow CSS3 pozwala nam szybko zdefiniować cień dla naszego elementu Właściwość box-shadow ma cztery poarametry. Pierwszym jest offset poziomy. Liczba dodatnia oznacza,że cień przesuwa się w prawo obiektu; liczba ujemna oznacza,że przesuwa się w lewo. Drugi parametr to offset pionowy. Liczba dodatnia oznacza,że cień pojawia si ponieżej pola, podczas gdy ujemna wartość oznacza,że cień pojawi się powyżej elementu.trzeci element to promień rozmycia. Wartość 0 daje bardzo ostre wartości a wyższa wartość czyni cień rozmyty. Ostatni parametr określa kolor cienia. Powinieneś poeksperymentować z tymi wartościami i dostosować je do swoich potrzeb. Kiedy pracujemy z cieniami, powinieneś prześledzić jak działa cień w fizycznym świecie. Niezgodne z reczywistością wykonanie cienia może bardzo skomplikować interfejs, zwłaszcza jeśli stosujesz cienie do wielu elementów nieprawidłowo. Najprostszym podejściem jest zastosowanie tych samych ustawień do każdego cienia jaki tworzysz Obracanie znaczka Możesz użyć przekształceń CSS3 do obracania, skalowania i zniekształcania elementów tak jak można w grafice wektrowej takiej jak Flash, Ilustrator czy Inkscape. To może pomóc tworzyć elementy trochę wyróżniające się. Obróćmy znaczek trochę aby przerywała prosty brzeg banera

78 Obracanie z CSS3 jest bardzo proste. Wszystko co musimy zrobić to dostarczyć stopień obrotu i zrenderować pracę. Wszystkie elementy zawarte wewnątrz elemntu obracanego są również obracane. Obracanie jest tak łatwe jak zaokrąglanie brzegów, ale nie nadużywaj go. Celem stworzenia interfejsu jest interfwejs używalny. Jeśli obracasz elementy zawierające wiele elementów, upewnij się,że oglądający mogą odczytać zawartość bez obracania głów. Przeźroczyste Tło Projektanci graficzni używają warstw półprzeźroczystych za tekstem od jakiegoś czasu, a ten proces zwykle obejmuje albo tworzenie całkowitego obrazu w Photosho, albo warstwa przeźroczytsego PNG na górze innego elementu z CSS. CSS3 pozwala nam definioać kolor tła z nową składnią, która wspiera przeźroczystość. Kiedy najpierw uczyliśmy projektowania stron, uczyliśmy definiowania kolorów używając kodu kolorów szesnastkowych. Definiujemy ilość czerownego, zielonego i niebieskiego używając pary liczb. 00 to "wszystko wyłączone" lub "brak", a "FF" to "wszystko włączone". Tak więc kolor czerwony to będzie FF0000 lub "wszystko dla czerwonego, wszystko wyłączone dla niebieskiego i wszystko wyłączone dla zielonego" CSS3 wprowadza funkcje rgb i rgbs. Funkcja rgb działa jak jej szesnastkowy odpowiednik, ale używa wartości od 0 do 255 dla każdego koloru. Zdefiniujemy kolor czerwony jako rgb(255,0,0). Funkcja rgba działa w ten sam sposób jak funkcja rgb, ale pobiera czwarty parametr definiujący stopień nieprzeźroczystości. Od 0 do 1. Jeśli użyjesz 0, nie zobaczysz koloru, ponieważ jest całkowicie przeźroczysty. Aby zrobić białe półprzeźeoczyste pole, dodamy taką regułę: Kiedy pracujemy z wartościami przeźroczystości, ustawienia użytkownika i kontrast mogą czasami wpływć na wygląd wyniku, więc upewnij się,że eksperymentowałeś z wartościami i sprawdzić na wielu wyświetlaczach aby upewnić się,że uzyskałeś jednolity efekt. Podczas gdy pracujemy z sekcją info naszego banera, zaokrąglmy go nieco. Teraz nasz baner wygląda dobrze w Safari, Firefox i Chrome. Teraz zaimplementujmy styl dla IE Uwagi końcowe

79 Techniki jakie użyliśmy w tej sekcji działają dobrze w IE9, ale wszystkie są możliwe z IE 6,7 i 8 również! Musimy tylko użyć filtrów DirectX Microsoft do ich wyciągnięcia. Oznacza to,ż będziemy chcieli oprzeć się na warunkowych komentarzach do załadowanai określonego stylu dla IE. Będzeimy również używać JavaScript do stworzenia elemntu sekcji, więc możemy wystylizować to z CSS ponieważ te wersje IE nie rozpoznają tego elementu natywnie. Filtry DirectX pracują w IE 6,7 i 8 ale w IE 8 te filtry są wywoływane inaczej, więc będziesz deklarował każdy z tych filtrów dwukrotnie. Zacznijmy od obracania elementów Obrót Możemy obracać elementy używając tych filtrów, ale nie jest to tak proste jak określenia stopnia obrotu. Dla uzyskania efektu jaki chcemy, musimy użyć filtra Matrix i określić cosinus i sinus kąta jaki chcemy. Szczególnie musimy przekazać cosinus, ujemną wartość sinusa, sinus i cosinus ponownie:

80 Skomplikowane, prawda? Weźmy się więc za gradienty Gradienty Filtr Gradient IE działa tak jak ten standardowy, z wyjątkiem tego, że musisz wpisać dużo więcej znaków Dostarczamy kolor startowy i końcowy i pokażmy gradient W przeciwieństwie do innych przeglądarek, stosujemy gradient bezpośrednio do elementy zamiast do właściwości background-image. Użyjemy teraz filtra do zdefiniowania przeźroczystości tła dla naszej sekcji info Przeźroczystość Filtr Gradient może pobrać rozszerzone wartości szesnastkowe dla koloru początku i końca, używając pierwszych dwóch cyfr do zdefiniowania wielkości przeźroczystości:

81 Te ośmio cyfrowe kody szesnastkowe działają bardzo podobnie do funkcji rgba, z wyjątkiem tego,że wartość przeźroczystości przychodzi pierwsza a nie ostatni. Więc najpierw mamy alfa, red, green i blue. Musimy usunąć właściwości tła w tym elemencie aby mogło to zadziałać w IE7. Wstawienie wszystkiego razem Jednym z trudniejszych problemów z tymi filtrami IE jest to,że nie można ich definiować w kawałkach. Stosujemy wiele filtrów do pojedynczego elementu, wumimy wiec zdefiniować filtry jako lista oddzielona przecinkami. Oto przykład:

82 Użycie rzeczywistych czcionek Wybramy czcionkę, kiedy chcemy przekazać konkretnemu odbiorcy jakąś treść. Oto czcionka która dobrze pasuje jakiemuś zepsołowi heavy metalowemu: ale już nie musi być dobra na przykład na potrzeby tego tekstu. Jak widać, wybór czcionki, która pasuje do przekazu jest ważny. Problem z czionkami w sieci jest taki,że projektanci ograniczają się do podręcznych czionek, powszechnie znanych jak "bezpieczne" czcionki. Są to czcionki szeroko używane przez większość systemów operacyjnych użytkowników. Aby to obejść, w przeszłości stosowano obrazków do naszych czcionej i albo bezpośrednio dodawano je do znaczników strony albo używano innych metod jak obrazek tłą CSSS, lub sifr, które renderuje czcionki używając Flasha. Moduł Font CSS3 oferuje dużo przyjemniejsze została wprowadzaona jako część specyfikacji CSS2 i była

83 zaimplementowana w IE 5. Jednak implementacja Microsoft używała czionek w formacie nazwanym Embedded Open-Type (EOT), a większość czcionek dzisiaj to format TrueType lub OpenType. Pozostałe przeglądarki obsługuja OpenType i TrueType Formaty czcionki Czcionki są dostępne w szerokich formatach, a przeglądarki jakie uznajesz za docelowe będą określały jak format będzie służył odwiedzającym Format i obsługujące przeglądarki: IE przed 9 tylko obsługiwała Embedded OpenType (EOT). Inne przeglądarki obsługują najpowszechniejsze formaty TruType i OpenType. Zmiana naszej czcionki Czcionka jakiej szukamy jest dostępna w formatach TrueType, WOFF, SVG i EOT, które pracują doskonale. Użycie czcionki obejmuje dwa kroki zdefiniowanie czcionki i dołączenie czcionki do elementów. W stylu do bloga dodamy kod: Najpierw zdefiniowaliśmy rodzinę czcionki, podając jej nazwę a potem dostarczyliśmy źródło czcionki.najpierw wstawiliśmy wersję Embedded OpenType aby IE widział to poprawnie, a potem dołączyliśmy pozostałe źródła. Przeglądarka użytkownika szuka źródła tak długo aż znajdzie działające. Teraz po zdefiniowaniu rodziny czcionki, możemy użyćtego w naszym arkuszu stylów. Zmienimy naszą oryginalną czcionkę :

84

85 Zastosowanie czcionki jest relatywnie łatwe w mowoczesnych przeglądarkach, ale musimy rozważyć przeglądarki, które tego jeszcze nie obsługują Uwagi końcowe Dostarczaliśmy rozwiązań dla różnych wersji IE i innych przeglądarek, ale musimy zapewnić czytelność naszej strony w przeglądarkach nie obsługujących Dostarczymy alternatywnej wersji czcionki Garogier, ale kiedy zastosujemy tą czcionkę, nie określimy czcionki awaryjnej. Oznacza to,że jeśli przweglądarka nie obsługuje wyświetlania czcionki Garogier, przejdzie do wyświetlania czcionką domyślną,co może nie być idealne. Stos czcionek jest listą czcionek sortowanych według priorytetu. Określamy czcionkę jaką rzeczywiście chcesz aby użytkownik zobaczył jako pierwszą a potem określamy pozostałe czcionki. Zmodyfikujmy naszą czcionkę trochę: Tu przytoczyliśmy dużą tablicę rozwiązań awaryjnych, które powinny pomóc nam zarządzać podobnymi zmianami. Nie jest to doskonałe we wszystkich przypadkach ale lepsze to niż opieranie się na domyślnej czcionce, która może być czasem bardzo ciężka do odczytania III. POZA HTML 5 Praca z danymi po stronie klienta Mówiliśmy od znacznikach HTML5 i CSS3, ale teraz skupmy naszą uwagę na pewnych funkcjach i technologiach powiązanych z HTML5. Funckje takie jak Web Storage, Web SQL Databases i Web Socket zostały wydzielone ze specyfikacji HTML5. Inne takie jak Geolocation, nigdy nie były częścią tej specyfikacji,ale twócy przeglądarek i projektanci pozwiązali Geolocation z HTML5, ponieważ specyfikacja została zimplementowana równolegle do innych funkcji. Zaczniemy od spojrzenia na Web Storage i Web SQL Storage, dwie specyfikacje, które pozwalają na przechowywanie danych po stronie klienta. Pamiętasz ciasteczka? Cookies były jedynym sposobem przechowywania informacji na komputerach klientów Aby ich użyć musimy mieć nazwę ciasteczka i ustaw jego ważność. Wymaga sporo kodu JavScript zawiniętego w funckje, dzięki czemu nie musimy myśleć o tym jak to rzeczywiście działa: Niezależnie od trudnej do zapamiętania składni, istnieją również obawy dotyczące bezpieczeństwa. Niektóre strony wykorzystują pliki cookies do śledzenia zachowań użytkownika, więc użytkownicy wyłączają cookies. HTML5 wprowadza kilka nowych opcji do przechowywania danych po stronie klienta: Web Storage (przy użyciu albo localstorage albo sessionstorage) i Web SQL Database. Są one łatwe w stosowaniu, niezwykle wydajne i stosunkowo bezpieczne. Najlepsze ze wszystkich, są

86 one implementowane dzisiaj przez kilka przeglądarek, wliczając w to Safari Mobilei Android 2.0. Jednak nie są one częścią specyfikacji HTML5 zostały wyodrębnione we własne specyfikacje. Kiedy localstorage, sessionstorage i Web SQL Databases nie mogą zastąpić cookies, które mają być dzielone między klientem a serwerem jak w przypadku aplikacji WWW, które korzystają z plików cookie do utrzymywania stanu pomiędzy stronami mogą być użyte do przechowywania danych które dbają o użytkowników, takich jak ustawienia wizualne lub właściwości. Są również przydatne dla budowania aplikacji mobilnych, które można uruchomić w przeglądarce ale nie podłączone do internetu. Wiele aplikacji sieciowych łączy sie z powrotem do serwera dla zapisania danych użytkownika, ale z tymi nowymi mechanizmami, połączenie internetowe nie jest absolutnie zależne. Dane użytkownika mogą być przechowywane lokalnie i kopiowane kiedy to konieczne. Kiedy połączymy te metody z nowymi funkcjami offline HTML5, możemy zbudować kompletną aplikację bazodanową w przeglądarce, która działa na wielu platformach, od desktopowych do ipadów i telefonów Android. Nauczymy się jak używać tych technik do przetwarzania ustawień użytkownika i tworzenia prostej bazy danych notatek localstorage Przechowuje dane w parze klucz/wartość,związane w domenie i utrzymywaną między sesjami przeglądarki sessionstorage Przechowuje dane w parze klucz/wartość,związane w domenie i jest wymazywana kiedy sesja przeglądarki jest kończona Web SQL Databases W pełni relacyjna baza danych z obsługą tworzenia tabel, wstawiania, aktualizacji, usuwania i wyboru z transakcjami Powiązana w domenie i utrzymywana między sesjami Aplikacje sieciowe offline Definiuje pliki przechwytwyane do użytku offline, pozwalając aplikacjom na uruchamianie bez połączenia internetowego Zapisywanie preferncji z localstorage Mechanizm localstorage dostarcza bardzo prostej metody projektantom do utrzymywania danych na maszynie klienta. Mechanizm localstorage jest po prostu przechowywaną nazwą/wartością wbudowaną w przeglądarką sieciową. Informacje przechowywane w localstroage utrzymywane są między sesjami przeglądarki i nie mogą być odczytane przez inne strony, ponieważ są ograniczone do domeny jaka jest aktualnie odwiedzana. Budowa formularz preferencji Zbudujemy formularz używając pewnych semantycznych znaczników HTML5 i pewnych nowych kontrolek formularza, o jakuch uczyliśmy się w przy tworzeniu przyjaznych formularzy. Chcemy aby użytownik zmienił kolor przedniej części, zmieniał kolor tła i modyfikował rozmiar czcionki

87

88 Użyliśmy kodów koloru HTML dla koloru Zapisywanie i ładowanie ustawień Dop pracy z systemem localstorage, użyjemy JavaScript z dostępem przez obiekt window.localstorage(). Ustawienie pary nazwy i wartości jest tak proste jak to : Zrzucanie wartości z powrotem jest też łatwe Stworzymy metodę do zapisywania wszystkich ustawień z formularza

89

90 Następnie zbudujemy podobną metodę, która będzie ładowała dane z systemu localstorage i umieszczała je w polach formuklarza Ta metoda będzie wywoływałą metdoę, która będzie stosowała ustawienia do samej strony, która będzie napisana. Stosowanie ustawień Teraz możemy pobrać ustawienia z localstorage, musimy zastosować je do strony, Preferencje, z którymi pracujemy są powiązane z CSS w ten sam sposób, a my możemy użyć jquery do zmodyfikowania dowolnego elementu stylu. W końcu, musimy odpalić wszystko kiedy dokument jest gotowy

91 Uwagi końcowe Metoda localstorage działa tylsko na najnowszych IE, Firefox, Safari i Chrome, więc musimy przedstawić alternatywne rozwiązania dla starszych przeglądarek. Istnieje kilka podejść. Możemy zapisać te informacje na serwer, lub utrzymywać preferencje po stronie klienta korzystając z cookies. Przechowywanie po stronie serwera Jeśli mamy konta użytkownika w systemie, rozważmy stworzenie strony preferncji utrzymujacej ustawienia rekordu użytkownika w naszej aplikacji. Kiedy się logują, można sprawdzić czy istnieją ustawienia po stronie klienta i jeśli nie, załadować je z serwera. W ten sposób, użytkownicy zachowują swoje ustawienia w różnych przeglądarkach i różnych komputerach. Aby utrzymywać na serwrze, po prostu zapewniamy wysyłanie formularza do serwera nie zapobiegając domyślnemu zachowaniu z JavaScript jeśli nie ma obsługi dla cookies. Przechowywanie po stornie klienta jest naprawdę jedyną metodą, która będzie działać jeśli użytkownik wyłączy JavaScript, ponieważ można kodować aplikacje aby pobierać ustawienia z bazy danych a nie localstorage. Poza tym, to jedyne podejście jeśli przechowywane jest więcej niż 4KB danych, ponieważ jest to maksymalna ilość danych jakie można przechować w cookies. Cookies i JavaScript Wypróbowane i prawdziwe połączenie cookies i JavaScript może działać jako godna alternatywa. Używając dobrze znanych skryptów cookie z Quirksmode, możemy zbudować alternatywne rozwiązanie własnego localstorage. Wykrywanie localstorage obsługiwanego w przeglądarce jest bardzo proste. Sprawdzay istnienie metody localstorage w obiekcie window: Następnie potrzebujemy metody do zapisania cookies, zapożyczone z artykułu Quirksmode. Dodamy tą funkcję JavaScript do naszego skryptu blokowego, wewnątrz nawiasów:

92 Na koniec chcemy stworzyć obiekt localstorage, który używa tych cookies jako swojego zaplecza. Przykład może być jak ten: Zwróć uwagę na linię 4. Tworzymy cookie z datą wygaśnięcia 3000 dni od teraz. Nie możemy stworzyć cookies, które nigdy nie wygasną, więc ustawimy to śmiesznie długi czas w przyszłości Dołozyliśmy podstawową implementację localstorage z zewnątrz. Jeśli chcesz usunąć element lub wyczyścić wszystkio, trzeba być bardziej kreatywnym. Najlepiej byłoby usunąć w przyszłości to rozwiązanie i oprzeć się tulko na metodzie localstorage() przeglądarki Przechowywanie danych w relacyjnej bazie danych po stronie klienta Metody localstorage i sessionstorage dają nam łatwy sposób dla przechowywania prostej pary nazwa/wartość na komputerze klienta, ale czasami potrzebujemy więcej niż to. Specyfikacja HTML5 wprowadziła możliwość przechowywania w relacyjnych bazach danych. Zostały one

93 wyodrębnione w osobnejh specyfikacji Web SQL Storage. CRUD w przeglądarce Termin CRUD, akronim dla "Create, Retrieve, Update and Delete", opiosuje to co możemy zrobić z naszą bazą danych po stronie klienta. Specyfikacja i implementacja pozwala nam wstawić, wybrać, aktualizować i usuwać rekordy. Tu mamy instrukcje SQL jakich będziemy potrzebować do pisania: Type Instrukcja Tworzenie notatki Odzyskiwanie wszystkich notaek INSERT INTO notes(title, note) VALUES("Test", "To jest notatka"); SELECT id, title,note FROM notes; Odzyskiwanie określonej notatki SELECT id, title, note FROM notes where id=1; Aktualizacja notatki UPDATE notes set title="bar", note ="Changed" where id=1; Usuwanie notatki DELETE FROM notes where id=1 Interfejs Notatek Interfejs dla aplikacji notatek składa się z lewego paska bocznego, który będzie miał listę notatek już pobranych i formularza po prawej stronie z polem tytułowym i dużym obszarem tekstowym dla samej notatek. Poniższy rysunek to wyjaśnia: Zacznijmy kodowanie naszego interfejsu

94

95

96 Definiujemy pasek boczny i główny region używając znacznika section, i mamy podane ID dla każdej ważnej kontrolki użytkownika, takiej jak przycisk Zapisz. Pozwoli nam to łatwiej zlokalizować elementy Potrzebujemy również arkusza stylów tak aby mogło wyglądać jak na rysunku. style.css wygląda tak: Ten arkusz stylów wyłącza wypunktowanie, rozmiary pól tekstowych i określa dwie kolumny. Teraz kiedy mamy interfejs, możemy zbudować JavaScript Połączenie z bazą danych

97 Musimy stworzyć połączenie i bazę danych Dekalrujemy zmienną db na górze naszego skryptu. Rozwiązanie to uczyni dostęp do reszty metod jakie stworzymy. Potem dekalrujemy metodę połączenia z bazą danych przez użycie metody window.opendatabase. Mamy tam nazwę bazy danych, numer wersji, opsi i rozmiar parametru Tworzenie tabeli Notatki Nasza tabela potrzebuje trzech kolumn; Pole Opis id Unikalny identyfikator notatki. Klucz podstawowy, liczba całkowita, auto zwiększanie Tytuł notatki, dla łatwego odniesienia Sama notatka title Note Stwórzmy metodę do utworzenia tej tabeli: Odpalamy instrukcję SQL wewnątrz transakcji, a transakcja ma dwie metody wywołania zwrotnego: jedna dla skuteczneje realizacji i jedną dla niepowodzenia. Jest to wzrór jakiego będziemy używać dla każdego naszego działania. Zauważ,że metoda executesql() również pobiera tablicę jako drugi parametr. Tablica ta wiąze znaczniki w SQL ze zmiennymi Pozwala to nam uniknąc konkatenacji łańucha. W takim przypadku, tablica jest putsa ponieważ nie mamy znaków zastępczych do wypełnienia w naszym zapytaniu. Teraz gdy mamy pierwszą tabelę, może stworzyć aplikację która rzeczywiście coś zrobi. Ładowanie Notatek

98 Kiedy aplikacjac jest ładowana, chcemy połączyć się z bazą danych, tworzy tabelę jeśli już nie istnieje, a potem przechwytuje istniejące notatki z bazy danych.

99 Ta metoda pobiera wyniki z bazy danych. Jeśli z powodzeniem, przechodzi pętlą przez wyniki i wywołuje metodę addnotetolist, którą definiujemy: Osadzamy ID rekordudo własnego atrybutu danej. Użyjemy tego ID do zlokalizowania rekord do załadowania kiedy użytkownik klikniej pozycję na liście. Potem dodaejmy nową pozycję listy tworząc listę nienumerowaną w naszym interfejscie z ID notatki. Teraz musimy dodać kod do załadowania tej pozycji do formularza kiedy wybieramy notatkę z tej listy Przechwytywanie określonego rekordu Możemy dodać zdarzenie click do każdej pozycji na liście,ale praktyczniejszym podejściem jest przekazanie kliknięć do listy nienumerowanej i określanie która pozycja została kliknięta. W ten sposób, keidy dodajemy nowe wejście do listy (jak kiedy dodajemy nową notatkę), nie musimy dodawać zdarzenia click do listy. Z funkcją jquery dodatmy taki kod: To odpala metdoę loadnote(), która wygląda tak:

100

101

102 Ta metoda wygląda trochę jak poprzednia metoda fetchnotes(). Tym razem instrukcja zawiera znak zastępczy pytajnika i rzeczywistą wartość w drugim parametrze jako składową tablicy. Kiedy znajdujemy rekord, wyświetlamy go w formularzu. Metoda ta również aktywuje przycisk Usu i osadza ID rekordu we wspólnym atrybucie danych, tak aby łatwo można było aktualizować. Nasz przycisk Zapisz sprawdza istnienie tegio ID, Jeśli istnieje, zaktualizujemy rekord. Jeśli gdzieś zaginął zakładamy,że jest to nowy rekord. Wstawianie, Aktualizowanie i Ususwanie rekordów Kiedy użytkownik kliknie przycisk Zapisz, wyzwala kod albo do wstawienia nowego rekordu albo aktualizacji istniejącego. Dodamy obsługę zdarzenia kliknięcia do przycisku Zapisz przez umieszczenie tego kodu wewątrz funkcji jquery: Ta metoda sprawdza atrybut data-id pola tytułowego formularza. Jeśli nie ma ID, formularz zakłada,że wstawiamy nowy rekord i wywołuje metodę insertnote, która wygląda tak:

103 Metoda insertnote() wstawia rekord do bazy danych i używa właściwości insertid wynikowej dla pobrania ID, które zostało wstawione. Potem stosujemy to do pola "title" formularza jako wspólnego atrybutu danej i wywołujemy metodę addtonotelist() dla dodanie notatki do naszej listy na stronie. Następnie, musimy obsłużyć aktualizację. Metoda updatenote() wygląda jak reszta metod jakie do tej pory dodawaliśmy Kiedy instrukcja update zakończy się powodzeniem, aktualizujemy tytuł notatki na naszej liście przez znalezienie elementu z polem data-id z wartości ID jaką zaktualizowaliśmy. Usuwanie rekordu jest prawie takie samo. Musimy obsłużyć zdarzenie usuwania : Potem potrzebujemy samej metody delete, która nie tylko usuwa rekord z bazy danych ale również usuwa go z listy notatek w pasku bocznym Teraz musimy wyczyścić formularz, dzięki czemu możemy utworzyć nowy rekord bez przypadkowego powielenia już istniejącego

104 Podsumowanie Nasza aplikacja jest prawie zakończona. Musimy aktywowąć przycisk Nowa, który czyści formularz, a użytkownik może stworzyć nową notatkę po wyedytowaniu istniejącej. Wykorzystamy ten sam wzór co wcześniej zaczniemy od obsłgui zdarenia wewnątrz funkcji jquery dla przycisku Nowa: Następnie czyścimy atrybut data-id pola "title" i usuwamy wartości z formularza Ukrywamy również przycisk Usuń z inerfejsu. Powinniśmy wywołać tą metodę newfor z wnętrza funkcji jquery kiedy strona jest ładowana tak aby formularz był gotowy do użytku. W ten sposób również jest ukrywany przycisk Usuń. Gotowe, Nasza aplikacja działa na iphone, urządzeniach z Androidem, Chrome, Safari i Operą. Jednak, jest spora szansa,że działa z Firefoxem, ale nie jest obsługiwana przez IE Uwagi końcowe W przeciwieństwie do innych rozwiązań, nie ma dobrych, dostępnych bibliotek, które umożliwiają implementację składowania SQL, więc nie mamy sposobu udzielenia wsparcia użytkownikom Internet Explorera natywnie. Jednak, jeśli ten typ aplikacji jest czymś, co możesz uważać za przydatne, można przekownać użytkowników do korzystania z Google Chrome, która działa na wszystkich platformach, dla tej konkretnej aplikacji. Nie jest to spotykane w praktyce, szczególnie jeśli używamy alternatywnych przeglądarek umożliwiających tworzenie wewnętrznych aplikacji, które mogą być stworzone również do pracy z urządzeniami mobilnymi. Inną alternatywą jest używanie wtyczki Frame Google Chrome. Dodamy to na górze strony HTML powyżej znacznika head: Ten fragment zostanie odczytany przez wtyczkę Frame Google Chrome i aktywują ją dla tej strony. Jeśli chcesz wykryć obecność tej wtyczki i poprosić użytkownika o jej zainstalowanie jeśli nie istnieje, musisz dodać ten fragment powyżej zamykające znacznika body:

105 Praca Offline Przy wsparciu Offline HTML5, możemy użyć HTML i powiązanych technologii do budowania aplikacji, które mogą jeszcze funkcjonować po odłączeniu od Internetu. Jest to szczególnie użyteczne dla projektowania aplikacji na urządzenia mobilne, któe moga przerywać połączenia. Ta technika działa w Firefox, Chrome i Safari, jak również na ios i Android 2.0, ale nie ma rozwiązania dla IE. Wykorzystamy za to plik manifestu HTML5 Definiowanie pamięci podręcznej z Manifestem Plik manifestu składa sięz listy wszystkich aplikacji sieciowych plików po stronie klienta, które muszą istnieć w pamięci podręcznej przeglądarki klienta aby móc pracować offline. Każdy plik, do którego odnosi się aplikacja musi być wylistowana tu aby wszystko działało poprawnie. Jedyny wyjątek jest taki,że plik, który dołącza manifest nie musi być listowanyl to jest buforowanie dorozumiane. Stworzymuy plik nazwany notes.manifest. Powinien wyglądać mniej więcej tak: Komnetarze w tym pliku dają nam coś co można zmienić aby przeglądarka wiedziała,że powinna przechwycić nową wersję naszych plików. Kiedy zmienimy nasz kod, musimy zmodyfikować ten manifest

106

107 Następnie musimy połączyć plik manifestu z naszym dokumentem HTML. Zrobimy to przez zmianę elementu html: To wszystko co musimy zrobić. Teraz jest tylko mały bufor- plik manifestu musi być doręczony przez serwer sieciowy, ponieważ manifest musi być dostarczony przy użyciu typu MIME text/cache-manifest. Jeśli używamy Apache, możemy ustawić typ MIME w.htaccess : Po żądaniu naszej aplikacji notatkowej za pierwszym razem, wylistowane pliki w manifeście są pobierane i buforowane. Możemy potem rozłączyć się z siecią i używać tej aplikacji offline tyle razy ile chcemy. Upewnij się,że zbadałeś specyfikację. Plik manifestu ma bardzie skomplikowane opcje jakich można użyć. Na przykład, moża określić,że pewnych rzeczy nie buforujemy i nie powinny być dostępne offline, co jest przydatne do ignorowania pewnych dynamicznych plików. Manifest i buforowanie Kiedy pracujemy z aplikacją w trybie projektowania, masz zamiar wyłączyć buforowanie na serwerze. Domyślnie, wiele serwerów sieciowych buforuje pliki przez ustawienie nagłówków, które mówią przeglądarkom aby nie przechwywtywały nowej kopii pliku w danym czasie. Jeśli używasz Apache, możesz wyłączyć buforowanie przez dodanie tego do pliku.htaccess: Wyłącza to buforowanie całego katalogu, więc nie jest to co chcesz zrobić. Ale to zapewnia,że przeglądarka zawsze zażąda nowej wersji pliku manifestu. W przypadku zmian na liście w pliku manifestu, chcesz zmodyfikować również plik manifestu, przez zmiane w komentarzu numeru wersji. Zabawa z innymi API Wiele ciekawych API, które zaczynały jako specyfikacja HTML5 rozpadło się na własne projekty. Inne stały się związane z HTML5, że czasem programiści mają trudności z ich rozpoznaniem. Tu pomówimy o tych interfejsach API. History Zarządzanie historią przeglądarki Cross-document Messaging Wysyłanie wiadomości między oknami,z zawartością ładowaną na różnych domenach Web Socket Tworzenie połączenia między przeglądarką a serwerem Geolocation Pobiera długość i szerokość geograficzną z przeglądarki klienta Zachowanie Historii

108 Specyfikacja HtML5 wprowadza API do zarządzania historią przeglądarki..możemy wykryć obsługę takiego API tak: Korzystamy z tej metody, gdy musimy pracować z obiektami Historia Przechowanie bieżącego stanu Kiedy odwiedzający wprowadza nową stronę internetową.przegląarka dodaje ją do swojej historii. Kiedy użytkownik wprowadza nową kartę, musimy dodać nową zakładkę do naszej historii : Mamy ID elementu który jest widoczny, a potem dodajemy stan historii do przeglądarki. Pierwszy parametr metody pyshstate() jest obiektem, który będzie mógł współdziałać z dalszymi. Użyjemy tego do przechowania ID zakładki jaką chcemy wyświetli kiedy nasz użytkownik nawiguje z powrotem do tego miejsca. Na przykład, kiedy użytkownik kliknie zakładkę Usługi, przechowamy #services w stanie obiektu. Drugim parametrem jest tytuł, którego możemy użyć do zidentyfikowania stanu naszej historii. Nie ma nic do roboty z elementem title strony; jest to sposób identyfikacji wejścia do historii przeglądarki. Użyjemy ponownie ID zakładki. Przywracanie porzedniego stanu Chociaż dodaje to stan historii, wciąż musimy napisać kod do obsługi zmiany stanu historii. Kiedy użytkownik kliknie przycisk Wróć, zostanie zwolnione zdarzenie window.onpopstate(). Użyjemy tego hooka do wyświetlenia zakładki przechowywanej w stanie obiektu

109 Przechwytujemy nazwę zakładki a potem użyjemy jquery do zlokalizowania elementu ukrytego przez to ID. Kod który ukrywa i pokazuje zakładki jest tu powtarzanie z kodu oryginalnego. Domyślność Kiedy pierwszy raz wchodzimy na stronę, nasz stan historii jest zerowy, więc musimy go ustawić sami. Możemy to zrobić jak powyżej gdzie zdefiniowaliśmy metodę window.onpopstate()

110

111 Teraz przy wejściu na stronę, możemy się poruszać za pomocą naszych kart historii przeglądarki Rozmowy między domenami Aplikacje sieciowe po stronie kliena zawsze były ograniczone do rozmów bezpośrednio do skryptów w innych domenach, co miało chronić użytkowników. Istnieje wiele sprytnych sposobów ominięcia tego ograniczenia, wliczając w to użycie proxy po stronie serwera i sprytne hackowanie URL'a. Ale teraz mamy lepszy sposób. Specyfikacja HTML5 wprowadza Cross-document Messaging, API któr czyni możliwym skryptom hostowanym w różnych domenach przekazywania sobie wzajemnie wiadomości. Na przykład mamy formularz na któegop zawartość musi być wysłana do innego okna lub iframe, którego zawartość jest hostowana na się,że jest to nasz projekt jaki zrobimy. Strona będzie miała formularz kontaktowy, i listę wszystkich kontaktów wsparcia i ich adresy mailowe obok formularza kontaktowego. Kontakty obsługi będą pochodzić z systemu zarządzania zawartością na innym serwerze, więc możemy osadzić listękontaktów obok formularzy używając iframe. Dobrzse by było gdyby użytkownik klikając na nazwę z listy kontaktór miał automatycznie dodany emial do naszego formularz. Można to zrobić bardzo łatwo ale musimy skorzystać z serwerów sieciowych dla właściwego przetestowania na własnej konfiguracji Lista kontaktowa Stworzymy najpierw listę kontaktową. Nasza podstawowy znacznik wygląda tak:

112 Na tej stronie, załadujemy również zarówno bibliotekę jquery i nasz własny plik application.js i prosty arkusz stylów. Umieścimy to w naszej sekcji head:

113 Arkusz stylu dla naszej listy kontaktowej wygląda tak: Wysyłka wiadomości Kiedy użytkownik klika na wejście w naszej liście kontaktowej, przechwytujemy z listy pozycji i wysyła wiadomość z powrotem do okna rodzicielskiego. Metoda postmethod() pobiera dwa parametry: samą wiadomość i oryginalne okno docelowe. Oto jak wygląda obsługa zdarzenia: Musisz zmienić oryginalny ponieważ musi pasować do URL'a okna rodzicielskiego. Teraz musimy zaimplementować stronę,która obejmie te ramy i odbierze wiadomość. Strona wsparcia Struktura storny wsparcia wygląda podbnie, ale utrzymuje rzeczy oddzielnie, powinnimy pracować na różnych folderach, szczególnie ponieważ ta strona będzie musiała być umieszczona na inny serwerze sieciowym. Musimy upewnić się,że dołączyliśmy link do arkusza stylu, jquery i nowego pliku application.js. Nasza strona wsparcia potrzebuje formularza kontaktowego i iframe, które wskazują naszą liste kontaktową. Zrobimy coś takiego:

114 Wystylizujemy go CSS, który dodajemy do style.css

115 To umieszcza formularz i iframe obok siebie. Odbieranie wiadmości Zdarzenie onmessage sprawdza czy bieżące okno odbiera wiadomość. Wiadomość wraca jako właściwość event. Zarejestrujemy to zdarzenie używając metody bind() jquery, więc działa w ten sam sposób we wszystkich przglądarkach.

116 Metoda bind () jquery zawija zdarzenie i nie naraża każej właściwości. Możemy dostać to czego potrzebujemy przez dostęp przez właściwość originalevent. Jeśli otwierasz to w Firefox, Chrome, Safari lub IE 8, widzisz,że działa to dobrze. Teraz sprawmy aby działało w IE 6 i 7 Uwagi końcowe Do obsługi w IE6 i 7, użyjemy wtyczki Postback jquery, która emuluje cross-domain messaging. Użyjemy metody getscript() jquery do wykorzystanie tej biblioteki tylko wtedy kiedy jej potrzebujemy. Aby to zrobić, wykryejmy czy metoda postmessage() istnieje. Po pierwsze modyfikujemy listę kontaktową Wtyczka Postmessage jquery dodaje metodę postmessage(), która działa prawie dokładnie tak samo jak stadnardowa metoda postmessage(). Teraz skup[imy uwagę na stronie wsparcia. Użyjemy tego samego podejścia tutaj wywołując nowo dodaną metodę receivemessage() To wszystko! Możemy teraz porozumiewać się przez okna z całą gałęzią przeglądarek. To jest tylko początek; możesz rozszerzyć tą technikę aby zrobić dwukierunkową komunikację. Dowolne okno może być wysłane lub odebrane, więc spójrz do specyfikacji i zobacz co możesz zbudować!.

117 Chatowanie z Web Socket Intrerakcje w czasie rzeczywistym to rzeczy, którze projkektanci próbują robić od wielu lat, ale większość implementacji używa JavaScript do okresowego kontaktu ze zdalnym serwerem w celu sporawdzenia zmian. HTTP jest protokołem bezstanowym, więc przeglądark tworzy połączenie z serwerem dla sprawdzenia zmian, otrzymania odpowiedzi i rozłączenia. Wykonywanie jakichkolwiek prac w czasie rzeczywistym nad protkołem bezstanowym może być całkiem niewygodne. Specyfikacja HTML5 wprowadza Web Socket, które pozwalają przeglądarce tworzyć stabilne połączenie ze zdalnym serwerm. Możemy użyć Web Socket do zbudowania wielu dobryuch aplikacji. Najlepszym sposobem aby poczuć jak działają Web Socket to napisanie klienta chatu. Interfejs Chatu Zbudujemy bardzo prosty interfejs chatu, który wygląda jak poniżej

118 z formularzem do zmiany nicku użytkownika, dużym obszarem gdzie pojawia się wiadomość i na końcu, formularz do wysyłania wiadmośc do chata. Na nowej stronie HTML5, dodamy znaczniki do interfejsu chata, który składa się z dwóch formularzy i div, który będzie zawierał wiadomości chat.

119 Musimy również dodać linki do arkusza styli i plik JavaScript, który będzie zawierał nasz kod do komunikowania z serwerem Web Socket. Nasz arkusz styli zawiera definicje tych styli W lini 14, ustawiay właściwość overflow w obszarze wiadomości chat tak aby jego wysokość jako stałą a tekst, który nie jest dopasowany był ukryty, z widocznymi paskami przewijania. Z naszym interfejsem, możemy pracować w JavaScript, który pozwala na rozmowy z serwerem chata. Rozmowa z serwerem

120 Bez względu z jakim serwerem Web Socket pracujemy, będziemy używać w kółko tego samego wzorca. Tworzymy połączenie z serwerem, a potem nasłuchujemy zdarzeń z serwera i właściwie odpowiadamy Zdarzenie Opis onopen() onmessgae() onclose() Wyzwalane kiedy połączenie z serwerem zostało ustanowione Wyzwalane kiedy połączenie z serwerem wysyła wiadomość Wyzwalane kiedy połączenie z serwerem zostało utracone lub zamknięte W naszym pliku chat.js, najpierw musimy połączyć się z naszym serwerem Web Sockets: Kiedy połączyliśmy się z serwerem, powinniśmy poinformować o tym użytkownika. Defioniujemy metodę onopen(): Kiedy przeglądarka otworzy połączenie z serwerem, wstawiamy wiadomość w oknie chatu. Następnie, musimy wyświetlić wysyłaną wiadomość do serwera chatu. Zrobimy to przez zdefiniowanie metody onmessage(): Wiadomość wraca do nas przez właściwość data obiektu event. Doadmy go do naszego okna chatu. Następnie obsługujemy rozłączanie. Metoda onclose() wyzwala zamykanie połączenia Teraz musimy pzechwycić obszar tekstowy dla formularza chata więc możemy wysłać naszą wiadomość do serwera chata

121 Mamy hooka w postaci zdarzenia wysyłania, pobieramy wartość pola formularzez i wysyłamy go do serwerwa chata używając metody send(). Implementujemy funkcję zmiany nicka w ten sam sposób, z wyjątkiem tego,że dodajemy prefiks wiadomości wysyłanej "/nick". Serer chat będzie widział to i zmieni nazwę użytkownika To wszystko co trzeba zrobić. Użytkownicy Safari 5 i Chrome 5 mogą bezpośrednio partycypować w chacie w czasie rzeczywistym używając tego klienta. Oczywiści, musimy obsłużyć przeglądarki bez natywnej obsługi Web Sockets. Użyjemy do tego Flasha Uwagi końcowe Nie wszystkie przeglądarki mają obsługę połączeń gniazd, ale Adobe Flash miał to już jakiś czas temu. Możemy użyć Flash do działania jako warstwa komunikacyjna socketów i dzięki bibliotece web-socket.js. Możemy ściągnąć kopię wtyczki i umieścić go wewnątrz naszego projektu. Potem musimy dołączyć trzy pliki JavaScript do naszej strony:

122 Jedyna zmiana jaką musimy zrobić w naszym pliku chat.js, to ustawienie zmiennej, któa określa położenie pliku WebSocketMain W tym miesjcu, nasza aplikacja będzie pracowała we wszystkich głównych przegladarkach. Co to są Flash Socket Policy? Dla celów bezpieczeństwa, Flash Player będzie komunikował się tylko przez sockety z serwerami, które pozwalają na połączenia do Flash Playera. Flash Player próbuje odzysakć plik Flash Socket Policy najpierw na porcie 843 a potem tego samego portu używa serwer. Będzie oczekiwał na odpowiedź serwera : Jest top bardzo ogólny plik zasad, który pozwala na każe połączenie do tej usługi. Będziemy chcieli określić zasadę na bardziej restrykcyjną jeśli będziemy pracować z wrażliwymi danymi. Pamiętaj tylko,że ten plik musi służyć serwerowi do obsługi swoich gniazd serwera Web Sockets, na tym samy porcie lub porcie 843. Przykład kodu dla tej sekcji zawiera prosty serwer Flash Socket Policy napisany w Ruby, którego możemy użyć do testowania. Serwery chata są na początku. Z Web Socket, teraz mamy silny i prosty sposób do odłożenia danych dla przeglądarek naszych użytkowników. Znajdź się : Geolocation Geolocation jest techniką dla odkrywania gdzie są ludzie, w oparciu o położenie komputera. Oczywiście, "komputer" może rzeczywiście oznaczać smartfon, tablet lub inne urządzenia przenośne jak również komputer stacjonarny. Geolocation określa miejsce pobytu ludzi przez wyszukiwanie ich adresów IP, adresów MAC, położenia hotspotów Wi-Fi lub nawet współrzędne GPS, jeśli są dostępne. Chociaż nie jest częścią specyfikacji HTML5, Geolocation jest częściowo powiązania z HTML5 ponieważ wszedła na scenę w tym samym czasie. Podobnie jak Wen Storage, Geolocation nigdy nie był częściią specyfikacji HTML5. Podobnie jak Web Storage, jest bardzo użyteczną technologią, która jest zaimplementowana już w Firefox, Safari i Chrome. Zobaczmy jak można tego użyć Lokalizowanie Awesomeness Mamy za zadanie pomóc ludziom zlokalizować centra obsługi technicznej AwesomeCo. Użyjemy Static Map API Google do tego, ponieważ nie wymaga klucza API i można wygenrować bardzo prostą mapę.centra obsługi technicznej Awesome znajdują sięw Portland, Oregon, Chicago, Illinois; i Providence, Rhode Island. Static Map API Gogle tworzy łatwo te punkty na mapie. Wszystko co musimy zrobić do zbudować znacznik tag i przekazać adresy URL:

123 Definiujemy rozmiar obrazka a potem mówimy API Maps,że nie używamy urządzenia dotykowego, takiego jak GPS lub geolokacji po stronie klienta z informacją przekazaną do tej mapy. Wtedy definiujemy każdy marker na mapie przez nadanie mu etykiety i adresu. Możemy użyć pary oddzielonej przecinkami współrzędnych dla tych markerów jeśli mamy je ale to jest łatwiejsze dla naszej demonstracji Jak znaleźć Musimy nanieść bieżące położenie naszego odwiedzającego na tą mapę, a zrobimy to przez dostarczenie innego markera na mapę przez użycie naszej długości i szerokości geograficznej dla nowego markera. Może poprosić przeglądarke o pobranie długości i szerokości geograficznej użytkownika tak: Ta metoda prosi użytkownika o podanie nam swoich współrzędnych. Jeśli odwiedzający pozwala nam użyć informacji o swoim położeniu, wywołujemy metodę showlocation(). Metoda ta pobiera długość i szerokość georgraficzną i rekonstruuje obraz, zastępują istniejący obrazek źródłowy nowym. Oto jak zaimplementować tą metodę: Zamiast duplikować cały kod źródłowy obrazka, dołączamy nasze położenie geograficzne do istniejącego obrazu źródłowego. Przed przypisaniem ponownym zmodyfikowanego obrazka do dokumentu, musimy zmienić parametr sensor z false na true. Robimy to w linii 5 metodą replace(). Po przejściu do przeglądarki, zobaczymy nasze położenie, oznaczone "Y" wśród innych lokalizacji.

124 Uwagi końcowe W obecnej formie, odwiedzający stronę będą nadal oglądać mapę z lokalizacjami centrów obsługi AwesomeCo, ale będzie błąd JavaScript jeśli spróbujemy załadować naszą stronę. Musimy najpierw wykryć wsparcie geolokacji zanim spróbujey pobrać położenie odwiedzającego:

125 Ajax API Google ma lokalizację wyszukiwania, więc jest świetnym rozwiązaniem awaryjnym. Musisz uzyskać klucz API aby skorzystać z witryny na żywo,ale nie wymaga aby spróbować tego loakalnie. Nasze rozwiązanie awaryjne wygląda tak: Użyjemy metody getscript() jquery do załadowania Google Ajax API. Potem użyjemy metody ClientLocation Google w lini 5 do pobrania położenia odwiedzającego i wywołania naszej metody showlocation() dla naniesienia położenia na mapę. Niestety, Google nie może namierzyć każego adresu IP, więc nie wszystkich użytkowników można nanieść na mapę; dlatego umieszczamy wiadomośc pod obrazkiem w linii 9. Nasze rozwiązanie awaryjne nie jest niezawodne, ale daje nam większe szanse na zlokalizowanie naszych gości. Gdzie iść dalej Większość tego tekstu koncentruje się na tym co można zrobić już teraz, ale istniej kilka innych rzeczy, które będzie można zacząć używać wkrótce,które stworzą standardy dla projektantów stron, jeszcze ciuekawsze, z płótnem 3D wspierającym Web GL nowe API, efekty przejści CSS i natywna obsługa drag-and-drop. Tu omówimy niektóre z tych rzeczy,więc można się będzie zorientować czego możemy się spodziewać.pomówimy o rzeczach,których można będzie używać przynajmnieje w jdnej przeglądarce, ale nie mających rozwiązań awaryjnych lub są zbyt niezdefiniowane aby zacząć pracę od zaraz Efekty przejścia CSS Animacje w interakcji Web Workers Przetwarzanie w tle dla JavaScript Płótno 3D z WebGL Tworzenie obiektów 3D na płótnie IndexedDB Zaawansowana baza danychstrony klienta klucz/wartość przechowywana podobnie do rozwiązania NoSQL Drag and Drop API dla interakcji przeciągnij i upuść

126 Walidacja formularza Walidacja danych wejściowych po stronie klienta Efekty przejścia CSS3 Zaproszenie do interakcji jest ważne dla dobrego projektowania interfejsu użytwkownika, a CSS wspiera pseudoklasy :hover jakiś czas tak,że można zrobić kilka podstawowych interakcji na naszych elementach. Oto kilka znaczników CSS które stylują link taka by wyglądał jak przycisk Kiedy umieszczamy kursor nad przyciskiem, zmienia się tło z białęgo na szare, a tekst zmienia sięz czarnego na biały. To jest błyskawiczne przejście. Przejścia CSS3 pozwalają nam na nieco więcje, w tym proste animacje,które były możliwe tylko z JavaScript. Na przykład, możemy stworzyć takie przejście przenikania przez dodanie następującego fragmentu kodu do definicji stylu: W linii 5, określamy jakie właściwowści stosujemy przy przejściu.w tym przypadku, zmieniamy kolory tła i frontu. Określamy czas trwania animacji w linii 6 i określamy funkcję czasową przejścia w linii 7. Funkcje czasowe Właściwość transition-timing-function opisuje jak przejść w czasie w odniesieniu do ustawionego czasu trwania. Określamy tą funkcję czasową używając sześciennej krzywej Beziera, która jest zdefiniowana przez cztery punkty kontrolne na wykresie. Każdy punkt ma wartość X i wartość Y od 0 do 1. Pierwszy i ostatni punkt kontrolny zawsze są ustawione na (0.0,0.0) i (1.0,1.0) a dwa punkty środkowe określają kształt krzywej. Krzywa liniowa ma swoje punkty kontrolne ustawione na dwóch końcach, które tworzą linię prostą pod kątem 45 stopni. Cztry punkty dla krzywej liniowej to ( (0.0,0.0),(0.0,0.0),(1.0,1.0),(1.0,1.0)) i wyglają tak

127 Bardziej złożona krzywa z punktami ( (0.0,0.0),(0.42,0.0),(1.0,1.0),(1.0,1.0)) wygląda tak: Tym razem, tylko jeden punkt został zmieniowny,, co powoduje zakrzywienie dolnej lewej części Inna krzywa ma punkty ((0.0,0.0),(0.42,0.0),(1.0,1.0),(1.0,1.0)). Możemy określić te punkty poprawnie we właściowości CSS, lub możemy użyć jakiejś wcześniej zdefiniowanej. Nasz wybóe to default, ease-in, ease-in-out, ease-out-in i cubic-bezier w ktrórych ustawiamy punkty naszej krzywej. Jeśli chcesz aby wskaźnik był stały użyj linear. Jeśli chcesz aby animacja zaczynała się powoli i przyspieszała, możesz użyć ease-in. Web Workers Web Workers nie jest częścią specyfikacji HTML5, ale możesz odkryć użytecznośćtego jeśli musisz wykonać przetwarzanie w tle po stronie klienta, więc jest warte zainteresowania. Używamy JavaScript do całego naszego kodowania po stronie klienta, ale JavaScript jest językiem jednowątkowym tylko jedna rzecz może dziać sięw danym czasie. Jeśli zadanie zabiera wiele czasu, użytkownik czeka aż zadanie sięzakończy, Web Workers rozwiązuje ten problem przez stworzenie prostego sposobu napisania zbieżnego porgramu. Jeśli mamy skrypt nazwany worker.js, który przetwarza jakiśobrazek, możemy wywołać go tak:

128 Dowolny plik JavaScript może być uruchomiony jako worker, jednak aby worker był niezależny, skrypt workera nie może mieć dostępu do DOM. Oznacza to,że nie można bezpośrednio manipulować elementami. Nasz skrypt główny może wysyłać wiadomość do skryptu workera używając postmessage(): Nasz skrypt workera może potem wysłać komunikat z powrotemdo strony głównej, również używając metody postmessage() Odpowiadamy na te zdarzenia nasłuchując zdarzenia onmessage w naszym skrypcie głównym. Za każdym razem kiedy posty workera wracają, wyzwalany jest kod: To API działa jak API dla cross-domain messaging. Nie ma obłsugi Web Workers dla IE, więc musimy polegać na Chrome Frame. Natywne wsparcie dla Przeciągnij i upuść Pozwolenie użytkownikom na przeciąganie i upszczanie elementów interfejsu jest czymś czego nie dało się zrobić z bibliotekami JavaScript, ale W3C przyjęła implementację przeciągni i upuść Microsoft jako część specyfikacji HTML5.Obsługiwane jest przez Firefox, Safari,IE i Chrome, ale w rzeczywistości jest to kłopot. Na początku implementacja wydaje się prosta;mamy wybrać eleement jako "przeciągalny"", potem wyznaczamy element który obserwuje upuszczany obiekt, a potem wykonujemy jakiś kod kiedy to się wydarzy. W rzeczywistości nie jest to wcale takie proste.zademonstrujemy to, tworząc prosty interfejs przeciagnij i upuść, który pozwala nam przeciągać małe obrazki do obszaru upuszczanie, kóry będzie ładował większe wersje.

129 Użyjemy tu wspólnych atrybutów danych dla przechowania źródła większej wersji naszych zdjęć. Teraz dodamy jakieś podstawowe style do podzielenia na dwie kolumny:

130 Teraz dodamy pewne zdarzenia aby można było przeciągać zdjęcia Zdarzenia Drag and Drop Musimy pracować na kilku zdarzeniach powiązanych z przeciąganiem i upuszczaniem Zdarzenie Opis ondragstart ondragend Wyzwalane kiedy użytkownik zaczyna przeciąganie obiektu Wyzwalane kiedy użytkownik zatrzymuje przeciąganie obiektu z jakiegoś powodu Wyzwalane kiedy przeciągalny element jest przeciągany do pola upuszczenia Wyzwalane kiedy użytkownik przeciągnie element nad pole upuszczenia Wyzwalane kiedy użytkownik przeciągnie element poza pole upuszczenia Wyzwalane kiedy użytkownik upuści element do pola upuszczenia z powodzeniem Wyzwalane kiedy użytkownik przeciąga elementy wszędzie; wyzwalane stale ale może podać współrzędne X i Y kursora myszki ondragenter ondragover ondragleave ondrop ondrag Te siedem zdarzeń może obsłguiwać przeciąganie i upuszczanie elementów, a niektóre ze zdarzeń mają zachowania domyślne. Jeśli ich nie nadpiszemy cała rzecz kończy się niepowodzeniem. Najpierw definiujemy całą listę pozycji do przeciągania Dodamy atrybut draggable HTML5. Można to zrobić w naszych znacznikach, ale ponieważ wymagamy JavaScript do interakcji, zastosujemy ten atrybut w naszym skrypcie. Kiedy przeciągamy obrazek, chcemy pobrać adres dużego obrazka i go przechować. Połączymy zdarzenie ondragstart i skorzystamy z metody bind() jquery.

131 Specyfikacja dostarcza mechanizmu datastorage, który pozwala nam określić typ danej i samą daną, która jest przekazywana dalej jako część zdarzenia. Metod bind() jquery zawija to zdarzenie w swój własny obiekt, więc użyjemy właściwości orginalevent w 2 dla dostępu do rzeczywistego zdarzenia. Przechowujemy URL do obrazka w zdarzeniu przez użycie metody setdata() w linii 4, używając Text jako typ danej. Teraz kiedy możemy przeciągać elelementy, pomówmy o tym ja wyzwalać zdarzenia kiedy użytkownik przeciąga elementy Przeciąganie elementów Chcemy aby nasze pole formularza "To" działało jako nasz cel upuszczenia, więc znajdujemy go i wiążemy ze zdarzeniem drop Pobieramy adres obrazka jaki przekazaliśy z zdarzeniem używając metody get-data() w linii 5 i wtedy możemy stworzyć nowy element obrazka, który odkładamy do naszegoregionu zawartości. Musimy anulować domyślne zdarzenie ondrop aby nie wyzwalało się kiedy użytkownik przeciągnie element nad cel. Aby to zreobić, musimy użyć preventdefault() ireturn false. IE potrzebuje return false a inne przeglądarki preventdefault().jeśli sprobujemy tego użyć w Chrome i Safari, nie będzie działać dobrze. Minimalnie musimy nadpisać element ondragover. Jeśli nie, nasze zdarzenie ondrag nie odpowie. Zrobimy to używając kodu: Zróbmy to samo ze zdarzeniem ondragend To będzie anulowało zdarzenia przeglądarek, które wyzwalają się, kiedy użytkownik zatrzyma przeciąganie elementu, ale nie intrferuje z naszym zdefiniowanym zdarzeniem ondrop.

132 Zmiana stylu Chcemy aby użytkownik wiedział,że przeciąga element nad obszarem docelowym, a możemy to zrobić korzystając z metod ondrgenter i ondragleave. To zastosuje naszą klasę hover w arkuszu stylów, który będzie stosowany i usuwany kiedy to zdarzenie się wyzwoli. Przeciąganie pliku Przenoszenie tekstu i elementów wokół strony jest tylko początkiem. Specyfikacja pozwala projektantom tworzyć interfejsy, które mogą podbierać pliki z komputera użytkownika. Wysyłanie zdjęć lub dołączanie plików jest tak proste jak przeciąganie pliku do określonego celu. Faktycznie, Google Gmail wpsiera to jeśli używamy Firefox 3.6 lub Chrome 5 Nie wszystko jest dobre Zachowanie w różnych przeglądarkach jest niespójne. IE8 działa, ale przerwya kiedy próbujemy ustawić typ danych setdata() dla URL'a zamiast Text. Doadtkowo, aby obsłużyć przciąganie elementów, które nie są obrazkami lub linkami w Safari 4, musimy dodać dodatkowo CSS do naszego arkusza styli Nie próbuj przeciągać tekstu na pole formularza. Nowoczesne przeglądarki pozwalają już torobić, ale nie jest to dobry sposób na zastapienie tego zachowania. Obecnie możemy osiągnąć o wiele lepsze wyniki,z mniejszą ilością kodu przy użyciu biblioteki JavaScript, która obsługuje przeciąganie i upuszczanie jak UI jqery. Nawet z tą pbiblioteką, jest jeszcze jedno zmartwienie: dostępność. Specyfikacja nie mówi niczego o tym jak obsłużyć użytowników, którzy nie używają myszki. Jeśli zaimlementujemy darg-adn-drop w naszym interfejsie,musimy stworzyć drugą metodę,która nie wymaga JavaScript lub myszki do pracy, a metoda będzie zależała od tego co próbujemy robić. Ta specyfikacja ma duży potencjał, ale również ma wiele rzeczy,która muszą być rozwiązane. Użyj tego jeśli ma sens, ale upewnij się,że nie zmuszasz użytkowników do czegoś czego nie używają WebGL Mówiliśmy o elemencie canvas w kontekście 2D, ale jest inna specyfikacja, w toku, która opisuje jak pracować z obiektami 3D. Specyfikacja WebGL nie jest częścią HTML5, ale Apple, Google, Opera i Mozilla są częścią grupy roboczej i zaimplementowali pewną częśćw swoich przeglądarkach. API Indeksowanej Bazy danych Mówiliśmy o dwóch metodach przechowywania danych u klienta: Web Storage i Web SQL Storage. Mozilla Foundation miała problem ze specyfikacją Web SQL, twiedząc,że nie jest

133 dobrym pomysłem opieranie sepcyfikacji na określonym silniku SQL. Wprowadzili nową specyfikację nazwaną API Indeksowanej bazy danych, która ma byćswoim własnym standardem. API Indeksowanej Bazy danychma jest kluczem/wartością przechowywanymi podobnie do Web Storage API jak localstorage i sessionstorage, ale dostarczającym metod do wykonywania zaawanwsowanych zapytań. Niestety, nie ma jeszcze dostępnej specyfikacji. Jest to specyfikacja dość oczekiwana ponieważ Web SQL jest w impasie a Mozilla nie ma w planach implementacji SQL. Walidacja formularza po stronie klienta Specyfikacja HTML5 listuje kilka atrybutów jakich można użyć do walidacji wejść użytkownika po stronie klienta, więc można wyłapać proste błędy dancyh wejściowych zanim użytkownik wyśle żądanie do serwera. Można tobyło robić przez lata w JavaScript,ale fomularz HTML5 może wykorzystać nowe atrybuty do określenia zachowani. Możemy zapewnić,że użytkownik ma wymagane pole formularza, dodając atrybut reqiured : Przeglądarki mogą potem zabezpieczyć formularz przed wysłaniem i podać miły komunikat błędu, i nie musimy pisać pojedynczej linii walidacji JavaScript. Dzięki temu użytkownicy wcześniej, nie czekając na odpowiedź serwera odkrywają,że popełnili błąd. Takie zachowanie może być wyłączone lub niedostępne lub niepoprawnie zaimplementowane, więc trzeba się jeszcze upewnić,że po stronie serwera mamy strategię walidacji danych. To na pewno coś, o czym warto pomyśleć, ponieważ możesz potem łatwo zlokalizować wymagane pola i wystylizowaćinterfesj z CSS, tak aby wymagane pole wyróżniało się od reszty. Możesz zrobić krok dalej z tym astrybutem pattern, który pozwala określić wyrażenie regularne aby zagwarantować,że zawartość spełania twoje kryteria Chociaż obecnie żadna z przeglądarek nie korzysta z tego przez interfejs użytkownik, użycie tego znacznika jako podsatwy dla walidacji JavaScript byłoby łatwe do implementacji PODSUMOWANIE 1.Nowe elementy <header> : definiuje nagłówek regionu strony lub sekcji <footer> : definiuje stopkę regionu strony lub sekcji <nav> : definiuje region nawigacyjny strony lub sekcji <section> : definiuje logiczny region strony lub zgrupowanej zawartości <article> : definiuje artykuł lub komplenty fragment zawartości <aside> : definiuje drugorzędną lub powiązaną zawartość <meter> : opisuje ilości wewnątrz zakresu <progress> : kontrolka pokazująca postęp w czasie rzeczywistym 2.Atrybuty Niestandardowe atrybuty danych : pozwalają dodawać niestandardowe atrybuty do elementów używających wzorca data-

134 Wsparcioe edycji w miejscu [<p contenteditable>blabla</p>]: Wpiera edycję w miwjscu zawartości przez przeglądarkę 3.Formularze pole [ <input type=" ">] : wyświetlanie opla formularza dla adresów pole URL [ <input type="url">] : wyświetlenie pola formularza dla URL'i pole telefoniczne [ <input type="tel">] : wyświetlenie pola formularza dla numerów telefonicznych pole wyszukiwania [ <input type="search">] : wyświetlanie pola formularza dla wyszukiwania słów kluczowych suwak(zakres) [ <input type="range">] : wyświetlanie kontrolki suwaka liczba [ <input type="number">] : wyświetlanie pola formularza dla liczb, często jako spinbox pole daty [ <input type="date">] : wyświetlanie pola formularza dla dat. Obsługuje date, month lub week data i czas [ <input type="datetime">] : wyświetlanie pola formularza dla daty z czasem. Obsługuje datetime, datetime-local lub time kolor [ <input type="color">] : wyświetlanie pola dla określonego koloru 4.Atrybuty pól formularza obsługa autofocus [ <input type="text" autofocus>] : obsługa dla skoncentrowania się na określonym elemencie formularza. obsługa tekstu zastępczego [ <input type=" " placeholder = "ja@przyklad.pl">] : obsługa wyświetlania tekstu zastępczego wewnątrz pola formularza required [<input type=" " required.] : tworzy wymagane pole pattern [<input type="text" pattern="^[1-9]+[0-9]*$"> : walidacja danych pól formularza pasujących do określonego wzorca wyrażenia regularnego 5.Dostępność atrybut role [<div role="document">] : identfyikuje odpowiedzialność elementu dla czytnika ekranu aria-live [<div aria-live="polite">] : identyfikuje region,któy jest aktualizaowany automatycznie, możliwie przez Ajax aria-atomic [<div aria-live="polite" aria-atomic="true">] : identyfikuje czy cała zawartość żywego regionu powinna być odczytana czy tylko zmienione elementy 6.Multimedia <canvas>: wpiera tworzenie grafiki wektorwej przez JavaScript <audio> : odtwarza natywne audio w przeglądarce <video> : odtwarza natywne video w przeglądarce 7.CSS3

135 Znajdowanie wszystkich elementów prwnego typu Znajdowanie pierwszego elementu Znajdownaie określonego elementu potomnego zliczając w przód Znajdowanie ostatniego elementu Znajdownaie określonego elementu potomnego zliczając w tył Znajdowanie pierwszego elementu danego typu Znajdowanie pierwszego ostatniego elementu danego typu Wsparcie dla kolumn Dzieli zawartość obszaru na wiele kolumn Używane z content do wstawiania zawartości po określonym elemencie Media Query Zastsosowanie styli w oparciu o ustawienia urządzenia Zaokrąglanie rogów elementów Wsparcie RGB Używanie kolorów RGB zamiast kodów szesnastkowych wraz z przeźroczystością Tworzenie cienia na elementach Obrót Obrót dowolnego elementu Gradienty Tworzy gradienty do stosowania jako obrazki

136 Pozwala na używanie określonych czcionek poprzez CSS 8.Przechowywanie po stronie klienta localstorage: Przechowuje dane pary klucz/wartość, podłaczone do domeny, i utrzymywane między sesjami przeglądarki sessionstorage : Przechowuej dane pary klucz/wartość, podłączone do domeny i usuwane kiedy przeglądarka kończy sesję Baza danych Web SQL : W pełni relacyjna baza danych z obsługą tworzenia tabel, wstawiania,aktualizowania, usuwania i zaznaczania, z transakcjami. Podłączona do demny i utrzymywana między sesjami 9.Dodatkowe API Offline Web Applications :definiuje pliki przechwytywane do zastosowania ofline, pozwalając aplikacji uruchamiać się bez połączenia internetowego Historia: Zarządzanie historią przeglądarki Cross-document Messaging : Wysyłanie wiadomości między oknami z zawartością ładowaną na różnych domenach Web Sockets : Tworzy stabilne połączenie między przeglądarką a serwerem Geolokacja : Pobieranie długości i szerokości geograficznej z przeglądarki klienta Web Workers : Przetwarzanie w tle dla JavaScript Płótno 3D z WebGL: Tworzenie obiektów 3D na płótnie Drag and Drop : API dla interakcji przeciągania i upuszczania jquery 1.Ładowanie jquery Możesz pobrać bibliotekę jquery ze strony jquery i połączyć skrypt jquery bezpośrednio,ale my ładujmey jquery z serwerów Google : Przeglądarki mogą tworzyć tylko kilka połączeń do serwera jednocześnie. Jeśli dystybuujemy nasze obrazki lub skrytpy do wielu serwerów, nasi użytkownicy mogą ściągać nasze strony szybciej. Korzystanie z sieci partnerskiej Google przynosi doatkowe korzyścu ponieważ inne strony łaczą się z biblioteką jquery w Google, nasi odwiedzający mogą już mieć tą bibliotekę przechowywaną w pamięci podręcznej swoich przeglądarek. Jak już wiecie, przeglądarki używają pełnego URL'a do

137 pliku aby zdecydować czy jest już zbuforowana kopia. Jeśli planujesz pracować z jquery na laptopie lub komputerze bez stałego dostępu do sieci, będziemy łączyć się z lokalną kopią. 2.Podstawy jquery Kiedy mamy już załadowaną bibliotekę jquery na stronie, możemyu zacząć pracę z elementami. jquery ma funkjcę nazwaną jquery(). Ta funkcja jest sercem biblioteki jquery. Użyjemy tej funkcji do przechwycenia elementów używając selektorów CSS i zawijania ich w obiekty jquery aby mozna nimi manipulować. To jest najkrótsza wersja funkcji jquery, $();. i to jest to czego używaliśmy w tym tekście. Jeśli chcieliśmy znaleźć znacznik h1 na stronie, użyjemy : Spójrzmy na to ponownie. Jedyna różnica między tymi dwoma przykładami jest selektor CSS jakiego użylismy. Funkcja jquery zwraca obiekt jquery, który jest specjalnym obiektem JavaScript zawierający tablicę elementów DOM, które pasują do selektora. Ten obiekt ma wiele użytecznych predefiniowanych metod jakich możemy użyć do manipulowania elementami jakie wybraliśmy. 3.Metody modyfikacji zawartości Użyjemy kilka metod jquery do zmodyfikowania naszej zawartości HTML. Ukrywanie i pokazywanie Metody hide() i show() czynią łatwym ukrywanie i pokazywanie użytkownikoiw elementów interfejsu. Możemy ukryć jeden lub więcej elementów na stronie, jak to: Aby je pokazać, poprostu wywołujemy metodę show(). Używamy metody hide() w tym tekście aby ukrywć sekcje strony, które tylko powinny pojawić się kiedy JavaScript jest wyłączona. html, val i attr Używamy metody html() aby pobrać i ustawić wewnętrzną zawartość określonego elementu Tu ustawiamy zawartość między otwierającym a zamykającym znacznikiem h1, "Hello World". Metoda val() ustawia i odzyskuje wartości z pola formularza. Działa dokładnie jak metoda html() Metoda attr() pozwala nam odzyskać i ustawia atrybuty na elementach. append, prepend i wrap Metoda append() dodaje nowy element potomny po istniejącym elemencie.tu mamy prosty formularz i pustą nienumerowaną listę: możemy stworzyć nowe elementy w liście przez dodanie tych nowych elementów kiedy wysyłamy formularz

138 Metoda prepend() działa w ten sam sposób co metoda append() ale wstawia nowy element przed istniejącymi. Metoda wrap() owija zaznaczony elelemt elementem przedstawionym przez obiekt jquery jaki określisz. CSS i klasy Możemy użyć metody css() dla zdefiniowania styli na elementach: Można zdefiniować to raz, lub możemy użyć JavaScript do przypisania wielu reguł CSS do tego elementu: Jednak nie jest dobrym pomysłem mieszanie styli ze skryptami. Możemy użyć metod addclass() i removeclass() dla dodania lub usunięcia klas, kiedy wystąpią pewne zdarzenia. Możemy potem powiązać style z tymi klasami. Możemy zmienić tło naszych polach formularza kiedy odbieramy i stracić focus przez połączenie zdarzeń jquery i klas. Łańcuch Metody w obiektach jquery zwracają obiekty jquery, co oznacza,że możemy łączyć metody w nieokreślony sposób: 4.Tworzenie elementów Od czasu do czsu, musimy stworzyć nowy element HTML abyu można go było wstawić do naszego dokumentu. Możemy użyć metody jquery() do tworzenia takich elementów Chociaż możemy użyć do wykonania tego document.createelement("input"), możemy wywołać dodatkowe metody łatwiej jeśli użyjemy funkcję jquery

139 To jest inny przykład gdzie łańcuch jquery pomaga nam budować i manipulować szybko strukturami. 5.Zdarzenia Często musimy wyzwolić zdarzenia kiedy użytkownik współziała z naszą stroną, a jquery czyni to w prosty sposób. W jquery, wiele współnych zdarzeń jest prostymi metodami na obiekcie jquery, które mają funkcję. Na przykład, możemy stworzyć wszystkie linki na stronie z klasą otwierania popup w nowym oknie jak to: Wewnątrz naszej obsługi zdarzenia jquery, mamy dostęp do elementów z jakim pracujemy przez użycie słowa kluczowego this. W linii 3, przekazujemy this do funkcji jquery więć możemy wywołać metodę attr() dla szybkiego odzyskania adresu przeznaczenia linku. Używamy funkcji preventdefault() dla zachowania oryginalnego zdarzenia z wyzwoleniem, więc nie koliduej z tym co robimy. Bind Niektóre zdarzenia nie są bezpośrednio obsługiwane przez jquery, a my możemy użyć metody bind() do ich obsługi. Na przykład, kiedy implementujemy część Drag and Drop specyfikacji HTML5, musimy anulować zdarzenie ondragover. Użyjemy bind() jak tu: Zauważ,że wstawiliśmy prefiks on dla zdarzenia jakie obserwujmey Oryginalne zdarzenia Kiedy używmy funkcji zdarzeń jquery, takich jak bind() lub click(), jquery zawija zdarzenie JavaScript w swoje własne obiekty i kopiuje tylko niektóze z właściwości. Czasami musimy pobrać altualne zdarzenie więc możemy mieć dostęp do tych właściwości. Zdarzenia jquery daja nam dostęp do oryginalnych zdarzeń z właściwie nazwaną właściwości originalevent. Możemy mieć dostęp do właściwości data zdarzenia onmessage : Możesz użyć tej techniki do wywołania dowolnej właściwości lub metody oryginalnego zdarzenia 6.Document Ready Wyrażenie "dyskretna JavaScript" odnosi siędo JavaScript, który jest całkowicie oddzielony od