70-480 – Sprawdzanie poprawności danych wejściowych użytkownika przy użyciu elementów HTML5

70-480

Wybór odpowiednich środków kontroli na podstawie wymagań; wdrażanie elementów wejściowych typu HTML i atrybutów zawartości (np. wymaganych) do zbierania danych wejściowych użytkownika.



Dzisiejszym wpisem rozpoczynam kolejny rozdział materiału, który pozwala przygotować się do egzaminu 70-480. Będą to cztery artykuły na temat walidacji danych za pomocą kontrolek HTML5 i kodu JavaScript oraz przesyłaniu danych w różnych formatach do części backendowej, a także pobieranie danych z serwera, ich serializacja, deserializacja oraz enkodowanie.

Zaczniemy od sprawdzania poprawności danych wejściowych użytkownika przy użyciu elementów HTML5. Specyfikacja kolejnej wersji HTML przewidziała sporo komponentów, które pozwalają na walidację danych w prosty i przyjemny sposób, przy użyciu kontrolek formularzy z odpowiednimi atrybutami i parametrami.

Posłużę się tutaj rozbudowanym przykładem, który pozwoli mi od razu zaprezentować możliwości tych kontrolek. Każdy z typów pola input pozwala na zdefiniowanie formatu danych, który wybrać / podać może użytkownik.

UWAGA: Nie wszystkie przeglądarki poprawnie obsługują nowe kontrolki. W przypadku braku obsługi, kontrolka będzie wyglądać jak zwykłe pole typu text. Obsługę danego typu w przeglądarce możemy sprawdzić na stronie: caniuse.com

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/59zL3nxn/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Poza samymi formatami pola input możemy korzystać także z dodatkowych atrybutów, które zapewnią nam walidację wprowadzanych danych bez dodatkowego kodu JavaScript:

  • autofocus [boolean] – automatyczny focus na danej kontrolce – tylko jedna powinna mieć taką wartość
  • required [boolean] – atrybut określający, że dane pole jest wymagane i nie może być puste
  • pattern [string] – atrybut, który pozwala podać jako swoją wartość wyrażenie regularne, które będzie musiała spełniać wartość wprowadzona w daną kontrolkę
  • placeholder [string] – wartość podana w tym atrybucie będzie się wyświetlać w danej kontrolce, gdy będzie ona pusta – znika po wpisaniu wartości
  • autocomplete [string|”on”\”off”] – przyjmuje wartość “on” | “off” i określa, czy przeglądarka ma pamiętać wartość wprowadzoną dla danej kontrolki
  • min [integer] – minimalna wartość dla pól typu number oraz range
  • max [integer] – maksymalna wartość dla pól typu number oraz range
  • step [integer] – wielkość skoku dla pola typu range

Spójrzmy na przykład pokazujący użycie owych atrybutów:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/8ptwfd8a/8/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Te oraz wiele innych atrybutów opisanych w oficjalnej specyfikacji pozwalają na łatwą, ale co ważne podstawową walidację wprowadzanych danych przez użytkowników.

70-480 – Wdrażanie interfejsów API HTML5

70-480

Wdrażanie interfejsów API magazynu, interfejsów API AppCache i interfejsów API geolokalizacji.



Krótko i zwięźle, będzie o API HTML5:

  • HTML5 Geolocation
  • HTML5 Web Storage
  • HTML5 App Cache

HTML5 Geolocation

Geolokacja, to nic innego jak lokalizowanie danego urządzenia (użytkownika) na mapie. Dzięki nowemu API HTML5 jesteśmy w stanie pobrać współrzędne geograficzne, korzystając ze zwykłej przeglądarki zainstalowanej na desktopie lub laptopie, a tym bardziej z urządzenia mobilnego, wyposażonego w moduł GPS.

Dane o lokalizacji należą do danych wrażliwych, czyli takich, które mogłyby naruszyć naszą prywatność i dlatego przeglądarki “zapytają nas” za pierwszym razem, gdy spróbują odczytać nasze współrzędne geograficzne.

Przejdźmy jednak do kodu i zobaczmy w jaki sposób możemy pobrać nasze aktualne współrzędne (przykład z w3schools).

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/8qu456g9/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]
  1. Sprawdzamy, czy API geolokalizacji jest dostępne.
  2. W przypadku obsługi przez przeglądarki navigator.geolocation wywołujemy metodę getCurrentPosition(), która jako swój pierwszy argument przyjmuje funkcję (callback), który wywołany zostanie w momencie odczytania przez przeglądarkę aktualnej lokalizacji.
  3. W przypadku braku obsługi geolokalizacji wyświetlony zostaje stosowny komunikat.
  4. Metoda showPosition() zostaje wywołana jako callback metody getCurrentPosition. Przekazany zostaje do niej obiekt position, z którego pobrana zostaje szerokość i długość geograficzna.

W przypadku tradycyjnych przeglądarek, lokalizacja zostanie określona najprawdopodobniej na podstawie naszego adresu IP. W przypadku przeglądarek działających z na urządzeniach w łączoną obsługą GPS otrzymamy w pełni poprawną lokalizację.

Wspomniałem wyżej, że funkcja getCurrentPosition, jako swój pierwszy argument przyjmuje callback, wywoływany w momencie odczytania pozycji geograficznej. Rzeczywiście nazywa się to successCallback, a dwa pozostałe parametry to:

  • errorCallback – funkcja, która wywołana zostanie w sytuacji gdy wystąpi błąd. Argumentem będzie w tym wypadku obiekt zawierający informację o kodzie błędu. Przykładowa funkcja przekazana jako drugi argument może wyglądać następująco:
    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                x.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML = "An unknown error occurred."
                break;
        }
    }
  • options – obiekt umożliwiający ustawienie trzech wartości
    • enableHighAccuracy (true|false) – domyślnie false. Ustawienie tej wartości na true powoduje, że API stara się określić jak najdokładniejszy wynik.
    • timeout – domyślnie 0. Określenie maksymalnego czasu oczekiwania na odpowiedź.
    • maximumAge – domyślnie 0. Maksymalny czas buforowania pobranej już wartości.

Dzięki tym kilku prostym krokom możemy bardzo łatwo wyświetlić na stronie mapę z aktualnym położeniem użytkownika:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/8qu456g9/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Prawda, że proste?

W przypadku urządzeń mobilnych z GPS możemy także stworzyć taką mini nawigację, ale w tym wypadku wykorzystamy metodę: watchPosition(), która robi dokładnie to samo co getCurrentPosition(), ale nie jednorazowo, a ciągle. Do zatrzymania “obserwacji” naszej pozycji skorzystać możemy z funkcji clearWatch(), przyjmującej jako argument watchID zwracane przy wywołaniu metody watchPosition.

Poniższy przykład zadziała wyłącznie na urządzeniach z aktywnym modułem GPS:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/8qu456g9/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

HTML5 Web Storage

Kolejnym API wprowadzonym w HTML5 jest możliwość korzystania z lokalnej pamięci przeglądarki, czyli tak zwanego Web Storage. Do tej pory mieliśmy możliwość persystowania danych po stronie przeglądarki w postaci sesji oraz cookie (ciasteczka). To drugie ma jednak swoje ograniczenia (max 4KB i przesyłanie z każdym requestem) i właśnie dlatego powstał nowy mechanizm. Pozwala on na szybki dostęp do danych zapisanych po stronie przeglądarki, a samych danych może być także znacznie więcej (co najmniej 5MB). Dodatkowo mamy możliwość trwałego zapisu danych: local storage oraz na czas trwania sesji: session storage.

Gdy zechcemy użyć tego mechanizmu w naszej aplikacji, to w pierwszej kolejności należałoby sprawdzić jego wsparcie. Obecnie przeglądarki radzą sobie z tym całkiem nieźle, ale nigdy nie wiemy na co trafimy. Posłuży na do tego prosty kod w JavaScript:

if (typeof Storage !== 'undefined') {
    // Code for localStorage / sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

Zerknijmy w końcu na kod JavaScript pozwalający na dostęp do magazynu danych oraz możliwość zapisu do niego nowych wartości:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/5fbyjx1b/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Jak widać, jest to banalnie proste.

  1. Odwołujemy się do globalnego obiektu localStorage poprzez wykonanie metody setItem z parametrami keyvalue. Jak sama nazwa mówi – pierwszy z nich to klucz, pod którym trzymany jest drugi parametr, czyli wartość.
  2. Pobieramy z localStorage wartość pod wskazanym kluczem poprzez wywołanie metody getItem.
  3. Usuwamy wartość na podstawie klucza i metody removeItem.
  4. Czyścimy cały localStorage.

Całość działa identycznie dla obiektu sessionStorage.

Należy pamiętać, że wartości w Web Storage, zarówno dla localStorage oraz sessionStorage przechowywane są i muszą być jako ciąg znaków. Wymusza to na nas odpowiednie konwersje typów.

HTML5 App Cache

Dzięki Application Cache API jesteśmy w stanie przetrzymywać zasoby (elementy strony WWW: pliki JavaScript, CSS, obrazki itd.) po stronie przeglądarki i tym samym sprawić, że:

  • aplikacja będzie działała offline i nie będzie pobierała ciągle tych samych zasobów z serwera;
  • szybkość działania zostanie znacznie poprawiona, bo.. nie będzie konieczności ładowania dodatkowych zasobów z serwera, a jak wiemy jest to znaczny koszt;
  • ilość pobieranych danych z serwera będzie po prostu mniejsza.

By zacząć wykorzystywać App Cache należy:

  1. Zadeklarować plik manifestu jako atrybut elementu html:
    <html manifest="manifest.appcache">
  2. Stworzyć wspomniany plik manifest.appcache i utworzyć w nim reguły zapisywania i odświeżania zasobów. Nazwa i rozszerzenie pliku są dowolne. Najważniejsze jednak, by serwer udostępniał ten plik z nagłówkiem MIME: text/cache-manifest.

Tak więc należałoby stworzyć reguły zapisywania zasobów, wykorzystując w tym celu odpowiednie sekcje:

  • CACHE MANIFEST – pliki zdefiniowane w tej sekcji zapisywane są po stronie przeglądarki, gdy pierwszy raz odwiedzamy stronę
  • NETWORK – pliki nigdy nie są zapisywane po stronie przeglądarki, wymagają każdorazowego pobrania z serwera
  • FALLBACK – pliki wyświetlą się w momencie gdy strona przestanie być dostępna

Przykładowy manifest.appcache może wyglądać następująco:

CACHE MANIFEST
/style.css
/main.js
/header.png

NETWORK:
login.jsp

FALLBACK:
/ /offline.html

Zdefiniowane zasoby w sekcji CACHE MANIFEST zostaną zapisane po stronie przeglądarki przy pierwszej wizycie, login.jsp będzie pobierany za każdym razem, a offline.html pokaże się wtedy gdy strona przestanie być dostępna.

Gdy pliki zostały już zapisane w pamięci przeglądarki, to mamy trzy możliwości na ich odświeżenie:

  • Użytkownik wyczyści dane zapisane w przeglądarce.
  • Plik manifestu zostanie zmodyfikowany.
  • Application Cache został zaktualizowany poprzez kod JavaScript.

Praktyką jest dodawanie komentarza do pliku manifestu i aktualizowanie go za każdym razem, gdy zmienia się zawartość plików zdefiniowanych w sekcji CACHE MANIFEST.

Na koniec odsyłam jeszcze do tutoriala Application Cache na html5rocks.com i wykorzystania języka JavaScript do manipulacji cache przeglądarki.

70-480 – Programowe stosowanie stylów do elementów HTML

70-480

Zmiana lokalizacji elementu; stosowanie przekształcenia; pokazywanie i ukrywanie elementów.



Po raz kolejny, pod krótkim opisem ze strony Microsoft kryje się kilka tematów do omówienia. Tym razem będą to:

  • pozycjonowanie elementów w CSS3
  • pokazywanie i ukrywanie elementów za pomocą CSS i JavaScript
  • transformacje 2D z wykorzystaniem CSS3

Pozycjonowanie elementów w CSS3 (CSS Positioning & HTML DOM Style Object)

Pozycjonowanie elementów w strukturze HTML może wydawać się skomplikowane, ale tylko na początku. Z pomocą przychodzą nam style CSS(3), które udostępniają kilka opcji sterowania warstwami, ułożeniem elementów oraz ich nachodzeniem na siebie.

Najważniejsze, to zrozumienie czterech wartości atrybutu position:

  • static – domyślna wartość każdego elementu. Jest to normalny przepływ w strukturze dokumentu HTML (od góry do dołu). Atrybuty: left, top, right, bottom nie wpływają w tym wypadku na elementy, nawet jeśli zostały zdefiniowane.
  • fixed – jak mówi sama nazwa – jest to pozycjonowanie stałe, a więc związane z oknem przeglądarki. Atrybuty left, top, right, bottom pozwalają nam ustalić pozycję elementu względem okna przeglądarki. Często możemy się spotkać z efektem przyklejonego górnego menu podczas scrollowania. To własnie efekt pozycjonowania stałego. Pozostałe elementy zachowują się tak, jakby elementów typu fixed w ogóle nie było w strukturze HTML.
  • relative – w zasadzie różni się od pozycjonowania statycznego tym, że tym razem atrybuty left, top, right, bottom mają realne odzwierciedlenie i ustawione dla danego elementu pozwalają przesuwać go względem jego oryginalnej pozycji. Pozostałe elementy traktują taki element jakby był on pozycjonowany statycznie i nieprzesunięty względem swojego oryginalnego położenia. Elementy mogą na siebie zachodzić, a warstwy definiować możemy za pomocą atrybutu: z-index.
  • absolute – pozycjonowanie bezwzględne, które w zasadzie posiada dwa stany:
    • jeżeli dla elementów (w górę) nie ustawiono pozycjonowania innego niż statyczne, to w zasadzie można to przyrównać to pozycjonowania stałego
    • jeżeli któryś element (pierwszy w górę) ma ustawione pozycjonowanie inne niż statyczne, to elementy ustawione jako absolute będą pozycjonowane względem tego elementu

    Co warto dodać, to informacja, że elementy pozycjonowane bezwzględnie nie zabierają miejsca i są traktowane przez pozostałe elementy jakby nie istniały w strukturze dokumentu HTML.

Pokazywanie i ukrywanie elementów za pomocą CSS i JavaScript (CSS Display and Visibility)

Widocznością elementów możemy sterować z poziomu CSS za pomocą dwóch atrybutów:

  • display
  • visibility

Różnicę pomiędzy nimi pokażę Wam na dwóch prostych przykładach. Pierwszy z nich prezentować będzie użycie display, a drugi visibility. Oba przykłady zawierać będą zdefiniowane trzy boxy z różnymi kolorami, gdzie dla środkowego boxa ustawiony zostanie odpowiedni atrybut widoczności.

display

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

visibility

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Różnicę bardzo łatwo jest zauważyć. W przypadku użycia display: none ukrywamy całkowicie środkowy box i znika on ze struktury HTML. Gdy używamy visibility: hidden, to wprawdzie element również znika, ale nie znika ze struktury HTML i zajmuje w pełni swoje miejsce.

Widocznością sterować możemy także z poziomu JavaScript:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Pobieramy referencje do środkowego boxa oraz przycisku, a następnie tworzymy funkcję, która sprawdza, czy środkowy box jest widoczny lub nie i przypisuje odwrotną wartość do atrybutu display. Na końcu deklarujemy obsługę zdarzenia click dla przycisku i możemy się cieszyć możliwością ukrywania / pokazywania zielonego boxa.

Po więcej zapraszam oczywiście do materiałów na stronie w3schools. Zachęcam również do zapoznania się z biblioteką jQuery, która pozwala na dużo prostsze manipulowanie elementami HTML.

Transformacje 2D z wykorzystaniem CSS3 (CSS3 2D Transforms)

Ostatnim tematem wpisu są transformacje 2D, które możemy wykonać przy użyciu CSS3. Transformacje 2D wykonywane są w dwóch wymiarach i pozwalają zmieniać położenie, rozmiar oraz kształt elementów. Transformacje działają we wszystkich nowych wersjach przeglądarek, ale wymagają odpowiednich przedrostków dla atrybutu: transform:

  • Chrome, Safari, nowa Opera (15+) -webkit-
  • Firefox -moz-
  • Internet Explorer (9) -ms-
  • starsza Opera (< 15) -o-

Do dyspozycji mamy w zasadzie pięć funkcji, które przyjmowane są jako parametr dla transform (przykłady ze strony w3schools):

  • translate – przesunięcie względem osi X i Y
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Przesunięcie o 50px w prawo i 100px w dół.
  • rotate – obracanie elementu wokół własnej osi o zadaną liczbę stopni
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Obrót o 30 stopni względem wskazówek zegara. Podanie ujemnych wartości powoduje obrót przeciwny do wskazówek zegara.
  • scale – zmiana wielkości elementu względem wielokrotności wartości X i Y
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Powiększenie 2 razy w poziomie i 4 razy w pionie.
  • scew – odchylenie od osi X i Y wyrażane w stopniach
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Odchylenie o 30 stopni od osi X i o 20 stopni od osi Y.
  • matrix – kombinacja pozostałych czterech metod w jedną, gdzie ozostałe funkcje są w zasadzie jakąś wersją funkcji matrix i zarazem aliasem do niej
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Zapraszam do własnych eksperymentów!

70-480 – Pisanie kodu współdziałającego z formantami interfejsu użytkownika

70-480

Programowe dodawanie i modyfikowanie elementów HTML; wdrażanie sterowania mediami; wdrażanie elementu HTML5 canvas i grafiki SVG.



Po raz kolejny, w krótkim opisie mamy ukrytych kilka tematów. Postaram się je opisać w poniższym wpisie, a tym samym będzie on obejmować zarówno język JavaScript i natywne funkcje pozwalające manipulować strukturą DOM, a także kontrolki multimedialne <video><audio>. Opiszę także pokrótce – służący do tworzenia grafiki w locie – znacznik <canvas> i – służący definiowaniu grafiki wektorowej – znacznik <svg>, które wprowadzone zostały wraz z HTML5.

Manipulowanie strukturą dokumentu HTML (drzewa DOM) za pomocą kodu JavaScript (DOM Document Object & XML DOM – The Element Object)

Poniższe sekcje skupiają się na języku JavaScript i obiekcie Element, dzięki któremu możemy manipulować strukturą HTML. Elementy zawierać mogą w sobie atrybuty, inne elementy lub elementy tekstowe oznaczane jako text-node. Dzięki natywnym metodom JavaScript (Vanilla), możemy sterować zawartością poszczególnych elementów i postaram się to pokrótce pokazać. Pełny wykaz dostępnych metod znajdziecie na stronie w3schools.

Dodawanie nowego elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Powyższy przykład pokazuje, w jaki sposób możemy utworzyć, a następnie dodać nowy element do już istniejącego. W strukturze HTML mamy zdefiniowany kontener #container, do którego dodany zostaje nowy paragraf. Zanim jednak paragraf zostaje dodany do kontenera, to stworzony zostaje text-node, który umieszczony zostaje wewnątrz paragrafu. Tym samym w kontenerze mamy znacznik <p>, który zawiera w sobie tekst “Hello World!“.

Wykorzystane metody:

  • document.getElementById – pobranie elementu po ID (#)
  • document.createElement – stworzenie nowego elementu
  • document.createTextNode – stworzenie nowego elementu typu text-node
  • appendChild – dodanie dziecka do elementu
[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Powyższy przykład ilustruje dodanie nowego elementu przed innym. Posłużyłem się metodą insertBefore, przyjmującą w pierwszej kolejności element, który dodany zostanie przed obiektem podanym jako drugi argument.

Usuwanie elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Powyższy przykład zawiera ponownie #container, który posiada dwa elementy typu p. Użycie metody removeChild powoduje, że pierwszy paragraf zostaje usunięty ze struktury HTML i tym samym wynikiem jest tylko zawartość pochodząca z drugiego paragrafu.

Zmiana zawartości elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Tym razem mamy tylko paragraf (#paragraph), którego referencja zostaje pobrana i przypisana do zmiennej paragraph. Pamiętamy, że wartość tekstowa jest typu text-node, co przekłada się na kolejną linijkę w kodzie JavaScript: paragraph.firstChild. Odwołujemy się tutaj do pierwszego dziecka elementu paragraph, a tym samym do obiektu, który odpowiada za wartość tekstową “Hello World!”. Dalej odwołujemy się do pola nodeValue i przypisujemy mu nową wartość.

Podmiana elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Podobnie jak metoda insertBefore, metoda replaceChild wywołana na kontenerze powoduje, że paragraf (#paragraph) zostaje zamieniony na nowo utworzony paragraf o innej wartości text-node.

Przemieszczenie elementu

W zasadzie wszystkie podstawowe metody do manipulowania elementami HTML zostały przedstawione wyżej. Tym samym bardzo łatwo jesteśmy w stanie przemieszczać wszystkie elementy, które zdefiniowane zostały w HTML, odwołując się do ich referencji w języku JavaScript.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Mamy listę pięciu elementów div z różnymi wartościami. Pobieramy dwie referencje: #container oraz #id3. Poprzez wywołanie metody, appendChild na kontenerze i podaniu jako atrybutu referencji do kontenera #id3, dodajemy go na sam koniec naszej listy. Nic prostszego.

Powyższy przykład możemy także zrealizować bez konieczności pobierania referencji do głównego kontenera. Wykorzystana w tym wypadku zostanie referencja (parentNode) do rodzica elementu #id3.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dodanie, usunięcie oraz zmiana zawartości atrybutu

Kolejnym przystankiem w manipulacji strukturą HTML są atrybuty elementów. Pokażę Wam jak można dodawać nowe oraz usuwać już istniejące atrybuty.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/9/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wykorzystane metody:

  • document.createAttribute – stworzenie nowego atrybutu
  • getAttributeNode – pobranie referencji do atrybutu
  • setAttributeNode – ustawienie atrybutu dla elementu
  • removeAttributeNode – usunięcie atrybutu z elementu
  • value – nadpisanie wartości atrybutu

W powyższym przykładzie zdefiniowany został kontener #container oraz link #link, gdzie w przypadku kontenera nie posiadał on atrybutu class, a link posiadał nałożoną klasę, która zmieniała kolor linka na czarny. Poprzez użycie opisanych wyżej metod w JavaScript, dodany został atrybut class do kontenera, a zarazem klasa zmieniająca wygląd kontenera. Natomiast z linka usunięta została klasa nakładająca czarny kolor na tekst i tym samym powrócił on do swojego natywnego stanu.

Znacznik <video> – osadzanie filmów w strukturze HTML

Czas na elementy multimedialne. Na pierwszy ogień idzie znacznik <video>, pozwalający dodawać do HTML elementy wideo. Zapominamy o tym, że kiedyś by zrobić podobną rzecz musieliśmy korzystać z wielu różnych technik, gdzie z pewnością pamiętacie znacznik <object> oraz zabawy z Flash Playerem. HTML5 przyniósł nam nowy standard, który jest już w zasadzie w pełni wspierany przez wszystkie nowe wersje przeglądarek. Dzięki temu nie musimy już korzystać z dodatkowych rozwiązań, a w pełni możemy wykorzystać natywny odtwarzacz wideo.

<video src="movie.mp4" height="400" width="600" controls></video>

Tym prostym sposobem możemy umieścić film na naszej stronie.

Dostępne atrybuty:

  • src – ścieżka / adres do pliku wideo
  • height – wysokość (w px) obszaru, który zajmie odtwarzacz
  • width – szerokość (w px) obszaru, który zajmie odtwarzacz
  • controls – flaga decydująca o tym, czy pokazywać panel kontrolny odtwarzacza
  • autoplay – flaga pozwalająca włączyć autoodtwarzanie filmu
  • muted – flaga ustawiająca początkową wartość głośności na wartość: 0
  • preload – flaga ustawiająca ładowanie części materiału wcześniej
  • loop – flaga ustawiająca zapętlenie odtwarzania materiału wideo
  • poster – pozwala zdefiniować obrazek (okładkę) dla materiału wideo, zanim ten zostanie odtworzony

Istnieje także możliwość dodania wielu źródeł w ramach jednego tagu <video>. W ten sposób możemy zapewnić pełną kompatybilność dla różnych przeglądarek.

<video height="400" width="600" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

Dodatkowe atrybuty dostępne w ramach rozszerzonej definicji:

  • type – rodzaj ładowanego wideo (MP4, WebM, Ogg)
  • media – oczekiwany rodzaj urządzenia, na którym materiał wideo powinien zostać wyświetlony

Obsługiwane formaty oraz wsparcie poszczególnych przeglądarek prezentują się następująco:

  • MP4 (video/mp4) – IE, Chrome, Firefox, Safari
  • WebM (video/webm) – Chrome, Firefox, Opera
  • Ogg (video/ogg) – Chrome, Firefox, Opera

Sterowanie elementami <video>

Dzięki językowi JavaScript jesteśmy w stanie przejąć kontrolę nad odtwarzaczem i sterować jego zachowaniem z poziomu kodu. Poniżej przykład, dzięki któremu odwołuję się do elementu <video>, ukrywam standardowy panel kontrolny, zmieniam rozmiar załadowanego filmu oraz zaczynam odtwarzanie.

<video id="video" src="movie.mp4" height="200" width="300" controls></video>
<button id="play" onclick="play();">Play</button>

<script>
  var video = document.getElementById('video'); 
  
  video.controls = false;
  
  function play() {
    if (video.paused || video.ended) {
      video.width = 600;
      video.play();
    }
  };
</script>

Pełna lista dostępnych metod i ustawień dla tagów <video> oraz <audio>

Znacznik <audio> – osadzanie plików dźwiękowych w strukturze HTML

Znacznik <audio> ma w zasadzie identyczne API jak znacznik <video>. Sposób tworzenia, metody oraz atrybuty są w zasadzie jednakowe. Tym samym dodanie odtwarzacza plików audio na naszej stronie sprowadza się do kawałka HTML:

<audio src="music.mp3" controls></audio>

Obsługiwane formaty oraz wsparcie poszczególnych przeglądarek:

  • MP3 (audio/mpeg) – IE, Chrome, Firefox, Safari
  • Ogg (audio/ogg) – Chrome, Firefox, Safari, Opera
  • Wav (audio/wav) – Chrome, Firefox, Opera

Sterowanie elementami <audio>

Podobnie jak dla znacznika <video>, możemy sterować dotwarzaniem muzyki z poziomu kodu JavaScript. Posłużę się kawałkiem kodu, gdzie dodany zostanie przycisk, który po kliknięciu ustawi głośność odtwarzanego elementu na 50%, a następnie zacznie odtwarzanie. Drugi z przycisków zatrzyma odtwarzanie.

<audio id="audio" src="music.mp3" controls></audio>
<button id="play" onclick="play();">Play</button>
<button id="mute" onclick="mute();">Mute</button>

<script type="text/javascript">
  var audio = document.getElementById('audio'); 
  
  function play() {
    if (audio.paused) {
      audio.volume = 0.5;
      audio.play();
    }
  };

  function mute() {
    audio.mute = !audio.mute;
  };
</script>

Znacznik <canvas> – osadzanie grafiki w strukturze HTML

Ostatnie dwa tematy stanowią wstęp do tworzenia i przetwarzania grafiki po stronie przeglądarki. Pierwszy z nich opisuje element <canvas> pozwalający tworzyć dynamicznie grafikę z poziomu kodu JavaScript. Sam element canvas stanowi w zasadzie obszar roboczy (wyobraź sobie białe płótno Paint), który posiada API pozwalające rysować wszelkiego rodzaju prostokąty, koła, linie, gradienty itd. Przewagą canvas jest przetwarzanie wszystkich zdefiniowanych elementów bezpośrednio przez kartę graficzną, co znacząco wpływa na wydajność.

Czas na przykład wykorzystania (poszerzona wersja ze strony w3schools):

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/11/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Widzimy tutaj trzy kwadraty narysowane przez naszą kartę graficzną. Nakładanie się ich na siebie reprezentuje kolejność z jaką były rysowane. W części HTML mamy zdefiniowany obiekt canvas z atrybutami id, width i height. Część JavaScript odpowiedzialna jest bezpośrednio za pobranie referencji do obiektu canvas poprzez #ID, a następnie pobranie kontekstu 2d i zdefiniowanie trzech instrukcji, pozwalających karcie graficznej narysować trzy kwadraty w obszarze roboczym. Metoda fillStyle pozwala zdefiniować kolor jakim zostanie wypełniona rysowana figura, a metoda fillRect określa współrzędne lewego – górnego rogu (dwa pierwsze parametry) oraz wielkość rysowanej figury (w px – kolejne dwa parametry).

Przejdźmy zatem do rysowania linii:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/12/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Jest to tak samo proste jak narysowanie figur i początek nie różni się w zasadzie niczym. Dalej definiujemy punkt startowy (moveTo), a następnie punkt końcowy rysowanej linii (lineTo). Na końcu wywołujemy metodę stroke, która dokonuje dzieła i tym samym na ekranie widzimy narysowaną linię.

Element <canvas> posiada szereg możliwości i pewnie musiałbym mu poświęcić kilka wpisów, by dokładnie wszystko opisać i pokazać. Zachęcam jednak do własnych eksperymentów i odsyłam do listy wszystkich dostępnych metod.

Pełna lista dostępnych metod dla elementu <canvas>

Znacznik <svg> – osadzanie grafiki wektorowej w strukturze HTML

Ostatnim już elementem wpisu jest osadzanie grafiki wektorowej za pomocą znacznika <svg>. SVG (Scalable Vector Graphics) pozwala na opis grafiki 2D w formacie XML. Dzięki temu możemy tworzyć grafikę wektorową, a więc w pełni skalowalną.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/13/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Przykład pokazuje nam, że podobnie jak dla elementu <canvas> możemy w bardzo prosty sposób korzystać z dostępnych metod i atrybutów znacznika SVG. Narysowanie koła z obramowaniem nie zajęło więcej niż trzy linijki HTML! Wyjaśnijmy sobie, co oznaczają poszczególne atrybuty:

  • svg – width / height – odpowiednio: szerokość i wysokość okna roboczego
  • circle – cx, cy, r – współrzędne środka koła oraz długość promienia
  • circle – stroke – kolor obramowania
  • circle – stroke-width – grubość obramowania
  • circle – fill – kolor wypełnienia koła

SVG to również dużo więcej: linii, figur, gradientów, a nawet animacji! Zapraszam również do zapoznania się z pełną listą dostępnych metod oraz możliwościami osadzania grafiki wektorowej i eksperymentowania we własnym zakresie.

Pełna lista dostępnych metod dla elementu <svg>

Sekcja opisująca podstawową manipulację interfejsem użytkownika dobiegła tym samym końca. Kolejny wpis dotyczyć będzie arkuszy stylów oraz ich stosowaniem do elementów HTML.

70-480 – Wstęp do HTML5, JavaScript i CSS3

70-480

Jako, że zaczynam przygotowania do egzaminu 70-480, to potraktuję to miejsce jako zbiór swoich notatek oraz postaram się w ten sposób stworzyć materiał, który wykorzystać będzie mógł każdy, kto spróbuje swych sił z HTML5, JavaScript oraz CSS3.

Egzamin 70-480 ujęty jest w ścieżce certyfikacyjnej Microsoft i ma na celu zbadanie umiejętności zdającego w obszarach wykorzystania HTML5, CSS3 oraz języka JavaScript. Jest także częścią ścieżek:  MCSD: Web ApplicationsMicrosoft Specialist Certification. Zakres egzaminu określiłbym raczej jako podstawowy dla doświadczonej osoby, ale z racji darmowej możliwości wykorzystania vouchera, chętnie poświęcę trochę czasu i przygotuję się do niego, tworząc przy okazji gotowe kompendium.

Pełen zakres egzaminu oraz poszczególne artykuły można znaleźć na stronie: Egzamin 70-480 – Programming in HTML5 with JavaScript and CSS3

Postaram się poza tym, by wpisy były zwięzłe i opisywały tylko konkretne informacje. Tym samym zapraszam Was do całej ich serii.

Roundup #13 – VintageJS, Bonsai, Bourbon, ImageMapster, Base, responsive-carousel, Jarallax

Roundup #13 - VintageJS, Bonsai, Bourbon, ImageMapster, Base, responsive-carousel, Jarallax

VintageJS

vintageJS is a tool where you can upload your images and apply a custom retro, vintage look to them for free. Just try it out: upload your photo, apply the vintage effect and share the retro image it with your friends via Facebook or Twitter.

Vintage Effect for Photos with VintageJS jQuery Plugin


Bonsai

Bonsai is a JavaScript graphics library.
Bonsai’s main features include:

  • Architecturally separated runner and renderer
  • iFrame, Worker and Node running contexts
  • Paths
  • Assets (Videos, Images, Fonts, SubMovies)
  • Keyframe and time based animations (easing functions too)
  • Path morphing
  • and much more…
Bonsai – A Powerful JavaScript Graphics Library

Bourbon

Bourbon is a comprehensive library of sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.
The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.

Bourbon – A comprehensive library of sass mixins


ImageMapster

ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids.

ImageMapster – A jQuery plugin that activates HTML imagemaps


Base

A super simple, responsive framework built to work on mobile devices, tablets, netbooks and desktop computers.

A Simple, Responsive CSS Framework – Base


responsive-carousel

A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard.

responsive-carousel – A jQuery-based script for responsive carousels


Jarallax

Jarallax is an open-source JavaScript library which makes adjusting css based on interaction easy. With Jarallax it’s easy to create a parallax scrolling website.

Parallax Scrolling Made Easy – Jarallax


[1], [2], [3]

Roundup #12 – Mobiscroll, TideSDK, Terrific Composer, iView Slider, Tooltipster, Yeoman, Neat, Prefix free, This Is Responsive

Roundup #12 - Mobiscroll, TideSDK, Terrific Composer, iView Slider, Tooltipster, Yeoman, Neat, Prefix free, This Is Responsive

Mobiscroll

Mobiscroll is a powerful, easy to set-up HTML5 control, that makes selecting values for your smartphone & tablet users a breeze. It is an Open Source control built on solid ground with jQuery. It is your one-stop solution for everything scrollable list. Its customizable and modular nature provides a great foundation you can build on.

Mobiscroll – The customizable HTML5 spinner control for touch devices


TideSDK

Create multi-platform desktop apps with HTML5, CSS3 and JavaScript TideSDK formerly known as Titanium Desktop is the best way to create beautiful, unique desktop apps using your web development skills.

Create Desktop Apps With HTML5, CSS3 And JavaScript With TideSDK


Terrific Composer

Terrific Composer is a Frontend Development Framework specifically designed for building deluxe frontends based on the Terrific concept

Terrific Composer – A framework designed for building deluxe frontends


iView Slider

iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

iView Slider – A responsive slider with animated captions


Tooltipster

Tooltipster is a lightweight (4,813 bytes minified) jQuery plugin that enables you to easily create clean, HTML5 validated tooltips.

  • Supports HTML tags inside the tooltip
  • Lightweight and degradable
  • Extremely flexible & fast to set up
  • Easily styled with 100% CSS – no images needed
  • Plays nicely with IE
Good-Looking & Lightweight Tooltips: Tooltipster

Yeoman

Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.


Neat

Neat is a simple grid framework built on top of Sass and Bourbon using em units and golden ratios. Using Sass 3.2 block mixins, this framework makes it extremely easy to build responsive layouts. Using the breakpoint() mixin, you can change the number of columns in the grid for each media query and store these values in project-wide variables to DRY up your code.

Bourbon Neat – A simple responsive grid framework built on top of Sass and Bourbon


Prefix free

-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

Break Free From CSS Prefix with -Prefix-free JS Plugin


This Is Responsive

This Is Responsive. Patterns, resources and news for creating responsive web experiences.

A Place To Find Any Information On Responsive Layouts: This Is Responsive


[1], [2], [3]

Roundup #11 – Mobify, Freetile, TiltShift, Enquire, jsPDF

Roundup #11 - Mobify, Freetile, TiltShift, Enquire, jsPDF

Mobify

Mobify.js is an open source client-side web framework that helps you adapt any website to support any device. Powering millions of daily mobile visits to your favourite websites.


Freetile

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement. Freetile has been the layout engine behind Assemblage and Assemblage Plus for almost two years, and now it becomes available as an independent Open Source project.

Pinterest-like Layout Plugin without Fixed Column Width


TiltShift

A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.

CSS3 Tilt-Shift Effect jQuery Plugin


Enquire

A lightweight JavaScript library for handling CSS media queries.

  • Deal with your media queries being matched (and even unmatched!)
  • Respond to browser events with aplomb
  • And if you want to get really fancy, run one-time setup routines
Handle CSS Media Queries With JS – Enquire.js

jsPDF

PDF files that are created online usually make use of the server-side languages (and their extensions/libraries for PDF).

jsPDF, a free JavaScript library, doesn’t need any server-side script and can create PDF files on the client-side.

Create PDF Files With JavaScript – jsPDF


[1], [2], [3]