Aplikacje internetowe laboratorium HTML 5

Transkrypt

1 Aplikacje internetowe laboratorium Jednym z głównych założeń twórców jest kompatybilność wsteczna. Z grubsza oznacza to, że wprowadzenie tej wersji standardu nie może spowodować, że 99,9% stron internetowych przestanie być nagle poprawnie wyświetlanych i bardzo dobrze. I my, tworząc strony internetowe, powinniśmy pamiętać o tym samym nawet najnowsze wersje przeglądarek nie wspierają jeszcze w pełni wszystkich cech wprowadzanych przez (o starszych nie wspominając). Dlatego też, gdy chcemy skorzystać z dobrodziejstw tworząc swoją witrynę, powinniśmy upewnić się, że przeglądarka ją wyświetlająca da sobie z nią radę. Aby to zrobić nie sprawdzamy czy przeglądarka obsługuje całego HTML a 5, ponieważ po pierwsze: nie ma czegoś takiego jak cały niemal każdego dnia dodawane są nowe cechy omawianego standardu. Po drugie wystarczyłoby, aby przeglądarka nie obsługiwała jednej funkcji i korzystanie z jakiejkolwiek innej byłoby niemożliwe. Dlatego też sprawdza się czy przeglądarka obsługuje jedną, konkretną funkcję, którą chcemy wykorzystać. Istnieją cztery główne sposoby wykrywania obsługi tych funkcji. Wszystkie wykorzystują język JavaStript, który zostanie dokładniej omówiony na trzecich zajęciach. 1. Sprawdzenie, czy istnieje specyficzny dla cechy globalny atrybut. Pierwszy sposób przetestujemy na przykładzie geolokacji. Jest to funkcja umożliwiająca uzyskanie przybliżonych współrzędnych klienta. Wyznaczenie położenia może odbywać się na przykład przy pomocy adresu IP, wykorzystywanej sieci bezprzewodowej lub pozycji ustalonej przez satelity (GPS) w zależności od urządzenia. Jeśli przeglądarka obsługuje geolokację, wówczas globalny obiekt nawigator będzie posiadał atrybut geolocation. Funkcja sprawdzająca obsługę geolokacji będzie więc miała następującą postać: function isgeolocationsupported() return!!navigator.geolocation; 2. Stworzenie elementu i sprawdzenie, czy specyficzny dla cechy atrybut istnieje w ramach tego elementu. Drugi sposób wykorzystamy na przykładzie elementu <canvas>. Jak sama nazwa wskazuje, jest to pole, na którym można wyświetlać grafikę. Przy użyciu języka JavaScript można na nim rysować różne kształty oraz dokonywać na nich transformacji. Jeśli przeglądarka obsługuje element <canvas>, po jego stworzeniu możliwe będzie utworzenie jego kontekstu przy pomocy getcontext. function iscanvassupported() return!!document.createelement('canvas').getcontext;

2 3. Stworzenie elementu i sprawdzenie, czy specyficzna dla cechy funkcja istnieje w ramach tego elementu. Trzecią metodę wykorzystamy aby sprawdzić obsługiwane przez element <video> formaty video. I tu pojawia się pytanie: Po co w ogóle taki element? Przecież filmy już od dawna można oglądać na stronach internetowych. Zgadza się ALE do tej pory wyświetlanie filmów video na stronach internetowych było możliwe tylko i wyłącznie dzięki zewnętrznym wtyczkom (np. YouTube oparty jest na technologii Flash owej). Działają one na tyle transparentnie dla przeciętnego użytkownika, że właściwie można o nich zapomnieć. Do tej pory jednak oglądanie filmów było niemożliwe w przeglądarkach nieobsługujących tych technologii. Pytanie Po co taki element? można by więc równie dobrze zadać 22 lata temu, gdy postanowiono dodać element <img>, odpowiedzialny za umieszczanie obrazów na stronach. Funkcja sprawdzająca obsługę konkretnych formatów video będzie składała się z kilku kroków. Najpierw należy sprawdzić, czy strona w ogóle obsługuje video. W tym celu posłużymy się metodą drugą. Następnie stworzymy element video i wywołamy metodę sprawdzającą, czy obsługuje dany format. Cała funkcja dla przykładowego formatu audio/video wygląda następująco: function isoggsupported() if (!(!!document.createelement('video').canplaytype)) return false; var v = document.createelement("video"); return v.canplaytype('video/ogg; codecs="theora, vorbis"'); 4. Stworzenie elementu, przypisanie specyficznemu dla cechy atrybutowi wartości i sprawdzenie, czy wartość ta faktycznie została przypisana. Ostatnią metodę sprawdzania obsługi przetestujemy na przykładzie elementu input. Do istniejących typów tego elementu (np. button, checkbox, hidden, text, submit) doszły takie elementy jak search, color, tel, url, czy date. Sprawdzenie obsługi nowych typów elementów przeprowadzimy na przykładzie adresu . Najpierw stworzymy element <input>, a następnie spróbujemy ustawić mu typ . Jeśli po tej operacji atrybut type nadal będzie miał domyślną wartość (czyli text), będzie to oznaczało, że przeglądarka nie obsługuje tego typu. function is supported() var i = document.createelement("input"); i.setattribute("type", " ") return i.type!== "text"; Wszystkie te metody sprawdzania poszczególnych funkcji sprawiają wrażenie dość uniwersalnych, a co ważniejsze powinny być dość często wykorzystywane. Nasuwa to oczywiście ideę zebrania ich wszystkich w jednej bibliotece, która umożliwi sprawdzanie obsługi poszczególnych elementów w wygodny i prosty sposób. Taka praca została już oczywiście wykonana Biblioteka Modernizr ( przeznaczona jest właśnie do detekcji obsługi poszczególnych funkcji przez przeglądarkę. Przykładowe wykorzystanie biblioteki dla elementu <canvas>:

3 if (Modernizr.canvas) var mycanvas = document.createelement('canvas');... Stworzymy teraz stronę wykorzystującą, która sprawdzi obsługę niektórych funkcji korzystając z biblioteki Modernizr. Do nowego pliku html5.html wklej poniższy kod strony. <!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8" /> <title>test przeglądarek</title> <script src="modernizr-custom.js"></script> <script type="text/javascript"> window.onload = Loaded; function Loaded() Check(Modernizr.geolocation, "geo"); Check(Modernizr.canvas, "can"); Check(Modernizr.video.ogg, "ogg"); Check(Modernizr.inputtypes.date, "dat"); function Check(func, id) if (func) AddImage("ok.jpg", id); else AddImage("no.jpg", id) function AddImage(path, id) var img = document.createelement("img"); img.setattribute("src", path); img.setattribute("width", 24); img.setattribute("height", 24); document.getelementbyid(id).appendchild(img); </script> </head> <body> <table> <thead> <tr><th>funkcja</th><th>obsługa</th></tr> </thead> <tbody> <tr><td>geolokacja</td><td id="geo"></td></tr> <tr><td>canvas</td><td id="can"></td></tr> <tr><td>format ogg</td><td id="ogg"></td></tr> <tr><td>pole daty</td><td id="dat"></td></tr> </tbody> </table> </body> </html> Następnie pobierz do tego samego folderu ikony w formacie jpg, które będą sygnalizowały rezultat pozytywny oraz negatywny testu i nazwij je odpowiednio ok.jpg oraz no.jpg. Uruchom utworzoną stronę w różnych przeglądarkach aby zobaczyć które funkcje są przez nie obsługiwane.

4 Przyjrzyjmy się teraz samej definicji dokumentu. W pierwszej linijce znajduje się znacznik <!DOCTYPE html>. W poprzednim ćwiczeniu wykorzystywaliśmy następujący wpis <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN" " Tak naprawdę liczba poprawnych wpisów informujących o typie dokumentu zbliża się do liczby 100 (jeżeli już jej nie osiągnęła), ale mniejsza o to. Najważniejszy jest fakt, że ten wpis nadal jest poprawny z punktu widzenia! Chcąc jednak zerwać z namnażającymi się jak grzyby po deszczu typami dokumentów oraz, co tu dużo gadać, aby nie musieć tyle pisać ( Dobry informatyk... ), w zapis ten został jak widać znacznie skrócony. Kolejnym ważnym znacznikiem jest <meta>. Tutaj sytuacja jest podobna zamiast bardzo długiej linijki kodu, która zazwyczaj jest bezmyślnie kopiowana pomiędzy kolejnymi stronami mamy kod, który możemy napisać sami i bez większych problemów go zrozumieć;-) Bardzo ważne jednak, aby znacznik <meta> (obojętnie w której postaci) zawsze się pojawił! Jeśli chcesz dowiedzieć się dlaczego jest to takie ważne (podpowiedź: chcesz), przeczytaj Jak widać brak tego elementu nie jest tylko kwestią ewentualnego wyświetlania krzaków ale i poważną luką bezpieczeństwa! Wszechobecnym elementem HTML jest formularz. Niemal codziennie wchodząc na strony wypełniamy ich pola i wysyłamy zawartość na serwer. Czas pobawić się trochę nowymi typami pól. Wstaw pod tabelę na naszej stronie sprawdzającej następujący formularz: <form> <input name="pole" placeholder="szukaj!"> <input name="ocana" type="number" min="2" max="5" step="0.5" value="2"> <input name="poprawka" type="range" min="2" max="5" step="0.5" value="2"> <input name="termin" type="date" required> <input name="adres" type=" " autofocus> <input name="kolor" type="color"> <input type="submit" value="szukaj"> </form> Zbadaj zachowanie poszczególnych pól w różnych przeglądarkach. Jak wygląda pole, gdy przeglądarka nie obsługuje danego typu? Zwróć uwagę na atrybuty placeholder, required oraz autofocus. Dodaj do elementu <form> atrybut novalidate. Jaki ma on wpływ na zachowanie formularza? Teraz przetestujemy działanie elementu <canvas>. Wstaw pod formularzem poniższy kod: <canvas id="c" width="400" height="400"></canvas> Następnie dodaj pod funkcją AddImage poniższą funkcję: function Draw() var canvas = document.getelementbyid("c"); var c = canvas.getcontext("2d"); var g = c.createlineargradient(0, 0, 400, 400); g.addcolorstop(0, "yellow"); g.addcolorstop(1, "green"); c.fillstyle = g; c.fillrect(0, 0, 400, 400);

5 Na końcu wywołaj ją w funkcji Loaded i przetestuj działanie. function Loaded()... Draw(); Równolegle z rozwija się również kolejna wersja arkuszy stylów CSS 3 jest ona jednak zdecydowanie w tyle, przynajmniej jeśli chodzi o obsługę przez przeglądarki. Przyjrzymy się teraz kilku efektownym stylom. Dodaj kolejny element do strony niech to będzie element <span>. Przypisz mu klasę, napisz wewnątrz elementu swoje imię, a następnie stwórz plik style2.css i umieść w nim styl dla tej klasy:.klasa font-size: 50px; position: absolute; top: 10px; right: 10px; padding: 50px; border: 1px solid #666; Załącz plik ze stylami do strony i obejrzyj wynik. Teraz dodamy dwa style pochodzące z CSS 3. Pierwszy styl będzie to cień dla naszego elementu kontenera, a drugi dla tekstu. Dodaj poniższe wpisy do definicji utworzonej wcześniej klasy i przetestuj działanie w różnych przeglądarkach. text-shadow: 5px 2px 5px #666; box-shadow: 10px 10px 5px #888; Drugim rodzajem stylu który użyjemy będzie zaokrąglenie krawędzi. Zróbmy z naszego gradientu niedojrzałą cytrynę! Dodaj do pliku ze stylami poniższy wpis: #c border-radius: 20px 250px; Wymienione style to oczywiście jedynie wierzchołek góry lodowej, bowiem CSS 3 niesie ze sobą wiele użytecznych efektów. Na koniec, aby narobić jeszcze większego apetytu i zachęcić do głębszego poznania, wejdź na stronę Możesz zbadać kod strony jest tam canvas żadnego Flash a!