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 – Tworzenie struktury dokumentu

70-480

Tworzenie struktury interfejsu użytkownika przy użyciu znaczników semantycznych, w tym dla aparatów wyszukiwania i czytników ekranu (elementy Section, Article, Nav, Header, Footer i Aside); tworzenie kontenera układu w języku HTML.



Jest to krótki opis pierwszego podrozdziału sekcji “Wdrażanie i edycja struktur i obiektów dokumentu“, która stanowi około 24% materiału do opanowania. Możemy z tego wyciągnąć przed nawias w zasadzie dwa elementy: tagi wprowadzone w HTML5 oraz tworzenie szablonów HTML.

Tagi wprowadzone HTML5 (HTML5 Tag Reference)

  • <section> – definiuje po prostu sekcję w strukturze HTML, która obejmuje pewną logiczną całość (np. rozdział, treść, nagłówek, stopka)
    <section>
      <h1>70-480</h1>
      <p>Tworzenie struktury dokumentu</p>
    </section>
  • <article> – definiuje niezależną sekcję i różni się od tagu <section> w zasadzie tym, że stworzoną w ten sposób strukturę powinniśmy móc łatwo przenosić w inne miejsca
    <article>
      <h1>70-480</h1>
      <p>Tworzenie struktury dokumentu</p>
    </article>
  • <aside> – stanowi w pewien sposób dopełnienie do treści, której dotyczy
    <p>Tworzenie struktury dokumentu</p>
    
    <aside>
      <h4>HTML5</h4>
      <p>Wprowadził szereg nowych znaczników, które opisują strukturę dokumentu.</p>
    </aside>
  • <footer> – stanowi stopkę dla danej struktury dokumentu, może to być stopka całej strony i / lub jej części
    <footer>
      <p>Copyright © mrzepinski.pl</p>
    </footer>
  • <header> – podobnie jak tag <footer>, ale w tym przypadku tworzymy nagłówek danej sekcji i / lub całej strony
    <article>
      <header>
        <h1>70-480 - Tworzenie struktury dokumentu</h1>
        <p><time pubdate datetime="2014-10-20"></time></p>
      </header>
      <p>...</p>
    </article>
  • <nav> – zbiór linków nawigacyjnych, które stanowić mogą menu danej strony lub sekcji
    <nav>
      <a href="/html/">HTML</a> |
      <a href="/css/">CSS</a> |
      <a href="/js/">JavaScript</a>
    </nav>

Tagów wprowadzonych w specyfikacji HTML5 jest oczywiście więcej, ale powyższe stanowią solidny trzon większości dokumentów HTML. Dzięki nim jesteśmy w stanie tworzyć, tak zwany semantyczny HTML, który poprzez użycie odpowiednich tagów “opisuje się sam”. Odpowiednia struktura, to także łatwa nawigacja i prostsze wyszukiwanie informacji, a także poprawne działanie na wielu urządzeniach.

Pełna lista tagów wprowadzonych w HMLT5.

Tworzenie szablonów HTML (HTML Layouts)

[caption id="attachment_5540" align="aligncenter" width="219"]http://www.w3schools.com/ http://www.w3schools.com[/caption]

Jak widać na powyższym obrazku, dzięki nowym tagom HTML5 możemy tworzyć różne części naszej strony w sposób bardzo opisowy. Z pewnością również każdy, kto kiedykolwiek spotkał się ze strukturą dokumentu HTML, mógł w niej dostrzec tagi <div>, które służą do grupowania innych elementów strony. Posłużę się w tym momencie przykładem ze strony: w3schools.com

<body>
  <div id="header">
    <h1>City Gallery</h1>
  </div>

  <div id="nav">
    London<br>
    Paris<br>
    Tokyo<br>
  </div>

  <div id="section">
    <h1>London</h1>
    <p>
      London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
      Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
    </p>
  </div>

  <div id="footer">
    Copyright © W3Schools.com
  </div>
</body>

Zdefiniowana została w ten sposób struktura dokumentu, w oparciu o tag <div>. Poza definicją samej struktury możemy ją także ostylować, wykorzystując do tego arkusz CSS.

#header {
  background-color:black;
  color:white;
  text-align:center;
  padding:5px;
}

#nav {
  line-height:30px;
  background-color:#eeeeee;
  height:300px;
  width:100px;
  float:left;
  padding:5px; 
}

#section {
  width:350px;
  float:left;
  padding:10px; 
}

#footer {
  background-color:black;
  color:white;
  clear:both;
  text-align:center;
  padding:5px; 
}

w3school przedstawia także jeszcze trzeci sposób definiowania układu dokumentu, wykorzystując w tym celu element <table>. Układy tego typu nie są już jednak stosowane, a uważane są wręcz za antywzorzec.

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.