Drodzy czytelnicy, poniższe pytania zostały przygotowane w taki sposób, aby każdy z Was mógł się zaznajomić rodzajem pytań na które możecie natrafić w trakcie rozmowy kwalifikacyjnej związanej z językiem HTML5. W praktyce często okazuję się, że rozmowa zaczyna się od postawowych zagadanień a następnie na podstawie Twoich odpowiedzi dyskusja jest kontynuowana - zagłębiamy się w szczegóły.

Czym jest HTML5?
HTML5 jest kolejną ważną wersją standardu HTML zastępującym HTML 4.01, XHTML 1.0 oraz XHTML 1.1. HTML5 jest standardem struktury i prezentowania treści on stronach internetowych.

Wymień niektóre z nowych funkcji HTML5.
HTML5 przedstawia szereg nowych elementów i atrybutów, które pomagają w budowaniu nowoczesnych stron internetowych. Poniżej nowe funkcje HTML5:
  • nowe elementy składni, tj. header, footer oraz section;
  • Forms 2.0 – ulepszenie formularzy internetowych, został przedstawiony nowy atrybut - input;
  • Persistent Local Storage – przy użyciu tej funkcjonalności aplikacje webowe mogą przechowywać dane lokalnie bez użycia przeglądarki użytkownika. Wcześniej dane te musiały być przechowywane w ciasteczkach, włączając w to każde pojedyncze żądanie. Lokalne przechowywanie pamięci jest bezpieczniejsze, pozwala na przechowywanie większej ilości danych bez negatywnego wpływu na wydajność strony internetowej;
  • WebSocket – następna generacja dwukierunkowej komunikacji dla aplikacji internetowych;
  • Server-Sent Event – HTML5 wprowadza zdarzenia, które przechodzą z serwera WWW do przeglądarki internetowej;
  • Canvas – obsługuje dwuwymiarową powierzchnię rysunkową, które może zostać oprogramowana przy użyciu JavaScript;
  • Audio & Video – od teraz można umieszczać nagrania audio oraz filmy video na stronach internetowych bez uciekania się do wtyczek firm trzecich;
  • Geolocation – od teraz użytkownicy mogą zdecydować czy chcą podzielić się fizyczną lokalizacją z aplikacją internetową;
  • Microdata – pozwala na tworzenie swoich własnych słowników poza językiem HTML5, które pozwalają na rozszerzenie strony internetowej przy użyciu niestandardowej semantyki;
  • Drag & drop – od teraz można przeciągać i opuszczać elementy z jednego miejsca do drugiego w obrębie tej samej strony internetowej.

Które przeglądarki wspierają HTML5?
Ostatnie wersje Safari, Google Chrome, Mozilla Firefox oraz Opera – wszystkie wspierają wiele funkcjonalności HTML5. Internet Explorer od wersji 9.0 również wspiera niektóre z funkcjonalności.

Mobilne przeglądarki internetowe, które zostały zainstalowane na urządzeniach jak iPhone, iPad oraz Android doskonale wpierają HTML5.

Czy HTML jest wstecznie kompatybilny ze starszymi przeglądarkami?
Tak! HTML5 został zaprojektowany tak, aby w miarę możliwości, być kompatybilny ze starszymi przeglądarkami. Nowe funkcjonalności opierają się na tych istniejących i pozwalają na wyświetlenie awaryjnej zawartości dla starszych przeglądarek.

Sugerowanym jest, aby przy użyciu kilku linijek JavaScript sprawdzić czy przeglądarka wspiera język HTML5.

Czy dla znaczników HTML liczy się wielkość liter?
Nie!

Jaki jest cel używania sekcji ‘section’ w HTML5?
Znacznik ten reprezentuje rozdział dokumentu lub sekcję aplikacji. Może być użyty razem ze znacznikami h1-h6, które wskazują na strukturę dokumentu.

Jaki jest cel używania sekcji ‘article w HTML5?
Znacznik ten reprezentuje niezależny kawałek dokumentu tak jaki wpis na bloku czy artykuł w gazecie.

Jaki jest cel używania sekcji ‘aside’ w HTML5?
Znacznik ten reprezentuje fragment zawartości, która jest tylko nieznacznie związana z resztą strony.

Jaki jest cel używania sekcji ‘header’ w HTML5?
Znacznik reprezentuje nagłówek sekcji.

Jaki jest cel używania sekcji ‘footer’ w HTML5?
Znacznik ten reprezentuje stopkę dla sekcji i może zawierać informacje o autorze, prawach autorskich, itd.

Jaki jest cel używania sekcji ‘nav’ w HTML5?
Znacznik ten reprezentuje część dokumentu, która jest odpowiedzialna za nawigację.

Jaki jest cel używania sekcji ‘dialog’ w HTML5?
Znacznik ten może być użyty do oznaczenia rozmowy.

Jaki jest cel używania sekcji ‘figure’ w HTML5?
Znacznik ten może być używany razem ze znacznikiem ‘caption’ do prezentacji zawartości, np. obrazek lub video z podpisem.

Czym są atrybuty niestandardowe w HTML5?
Atrybuty niestandardowe rozpoczynają się od ‘data-‘ i będą nazywane na podstawie twoich preferencji. Poniżej krótki przykład:
<‍div class="example" data-subject="physics" data-level="complex">
...
<‍ />div>
Powyższy przykład jest całkowicie poprawny w HTML5. Składa się z dwóch atrybutów, data-subject oraz data-level . Użytkownik będzie mógł pobrać wartości tych atrybutów używając JavaScript lub CSS w podobny sposób jak w przypadku korzystania ze standardowych atrybutów.

Czym jest Web Forms 2.0?
Jest to rozszerzenie funkcji formularzy z HTML4. Elementy formularza oraz atrybuty w HTML5 wprowadzają większy zakres semantyki niż miało to miejsce w HTML4 oraz usuwają potrzebę pisania długich skryptów oraz stylowania elementów, które było wymagane w HTML4.

Jaki jest cel używania kontrolki ‘datetime’ w Web Form 2.0?
Kontrolka ta reprezentuje datę i czas (rok, miesiąc, dzień, godzinę, minutę, sekundę oraz ułamki sekund) zgodnie z normą ISO 8601 wraz ze strefą czasową ustawioną na UTC (uniwersalny czas koordynowany – uwzględnia nieregularność ruchu obrotowego ziemi i koordynowany względem czasu słonecznego).

Jaki jest cel używania kontrolki ‘datetime-local’ w Web Form 2.0?
Kontrolka ta reprezentuje datę i czas (rok, miesiąc, dzień, godzinę, minutę, sekundę oraz ułamki sekund) zgodnie z normą ISO 8601 bez uwzględnienia strefy czasowej.

Jaki jest cel używania kontrolki ‘date’ w Web Form 2.0?
Kontrolka te reprezentuje datę (rok, miesiąc, dzień) zgodnie z normą ISO 8601.

Jaki jest cel używania kontrolki ‘month’ w Web Form 2.0?
Kontrolka ta reprezentuje datę składającą się z roku obraz miesiąca zgodnie z normą ISO 8601.

Jaki jest cel używania kontrolki ‘week’ w Web Form 2.0?
Kontrolka ta reprezentuje datę składającą się z roku obraz numeru tygodnia zgodnie z normą ISO 8601.

Jaki jest cel używania kontrolki ‘time’ w Web Form 2.0?
Kontrolka te reprezentuje czas (godziny, minuty, sekundy, ułamki sekund) zgodnie z normą ISO 8601.

Jaki jest cel używania kontrolki ‘number’ w Web Form 2.0?
Kontrolka akceptuje jedynie wartości numeryczne. Atrybut określający precyzję ustawiony jest domyślnie na 1.

Jaki jest cel typu ‘range’ w Web Form 2.0?
Określa jaki zakres wartości liczbowych może być używany w polach wejściowych.

Jaki jest cel używania kontrolki ‘email’ w Web Form 2.0?
Kontrolka ta akceptuje tylko adresy email. Typ jest używany do polach wejściowych, które powinny zawierać jedynie adres email. Jeżeli użytkownik spróbuje przesłać zwykły tekst wyświetli się informacja, że wymagany jest adres email w formacie email@example.com

Jaki jest cel używania kontrolki ‘url’ w Web Form 2.0?
Kontrolka ta akceptuje tylko adresy URL. Typ jest używanych na polach wejściowych, które powinny zawierać jedynie adres URL. Jeżeli użytkownik spróbuje przesłać zwykły tekst wyświetli się informacja, że wymagany jest adres URL w formacie http://www.example.com lub http://example.com.

Jaki jest cel używania znacznika ‘output’ w HTML5?
W HTML5 został przedstawiony nowy element <output>, który jest używany do wyświetlania rezultatu różnych operacji, np. rezultat zwrócony przez skrypt.

Jaki jest cel używania atrybutu ‘placeholder’ w HTML5?
W HTML5 został przedstawiony nowy atrybut ‘placeholder’. Atrybut ten wraz z kontrolkami input oraz textarea pozwala na wyświetlenie wskazówki użytkownikowi co może być wprowadzone w określone pole. Tekst zastępczy nie może zawierać znaków ucieczki.

Jaki jest cel używania atrybutu ‘autofocus’ w HTML5?
Atrybut ten pozwala ustawić ‘focus’ jednego konkretnego elementu po załadowaniu dokumentu.

Jaki jest cel używania atrybutu ‘required’ w HTML5?
W HTML5 został przedstawiony nowy atrybut ‘required’, który wymaga aby dana kontrolka miała wprowadzoną wartość, np. przed wysłaniem formularza.

Czy w HTML5 można używać znacznika ‘svg’ bez dodatkowych pluginów?
Tak! HTML5 pozwala na bezpośrednie użycie znacznika ‘svg’.

Czy w HTML5 można używać znacznika ‘MathML’ bez dodatkowych pluginów?
Tak! HTML5 pozwala na bezpośrednie użycie elementu MathMl, tj. <math>…</math>

Jakie są wady ciasteczek?
Ciasteczka mają następujące wady:
  • ciasteczka są dołączone do każdego żądania HTTP a tym samym prowadzą do spowolnienia aplikacji internetowej przez przekazywanie tych samych danych;
  • ciasteczka są dołączone do każdego żądania HTTP a tym samym wysyłamy nieszyfrowane dane przez internet;
  • ciasteczka są ograniczone do około 4KB. Liczba ta nie wystarczy do przechowywania wszystkich niezbędnych danych.

Co masz na myśli mówiąc o przechowywaniu sesji w HTML5?
HTML5 przedstawił nowy atrybut sessionStorage , który może być wykorzystywany przez strony aby dodawać dane do sesji i będzie dostępny dla każdej strony otwartej w tym oknie, tj. jak tylko zamkniesz okno sesja będzie pusta.

Co masz na myśli mówiąc o lokalnym przechowywaniu danych w HTML5?
HTML5 wprowadził nowy atrybut localStorage , który może być wykorzystywany do dostępu do lokalnej pamięci przez strony internetowe bez żadnych ograniczeń czasowych oraz będzie dostępna zawsze, kiedy będziesz chciał skorzystać z tej strony.

Kiedy dane sesji zostaną usunięte?
Session Storage Data (dane przechowywane w sesji) będą usuwane przez przeglądarkę po tym jak sesja zostanie zakończona.

Kiedy dane przechowywane lokalnie zostaną skasowane?
Lokalne przechowywanie danych nie ma ograniczeń czasowych. Aby usunąć dane przechowywane lokalnie należy wywołać localStorage.remove(‘klucz’), gdzie ‘klucz’ jest kluczem wartości, którą chcesz usunąć. Jeżeli chcesz wyczyścić sesję należy wywołać localStorage.clear().

Czym są zdarzenia serwera WWW w HTML5?
Wraz z HTML5, WHATWG Web Applications 1.0 wprowadziło zdarzenia, które przepływają pomiędzy serwerem WWW a przeglądarką internetową.

Zastosowanie zdarzeń pozwala na otwarcie stałego połączenia z serwerem, wysłania danych do klienta, kiedy nowe dane są dostępne, eliminując przy tym potrzebę ciągłego odpytywania.

SSE (Server-Sent Events) standaryzuje jak przesyłamy strumień danych z serwera do klienta.

Jak korzystać ze zdarzeń serwera WWW w HTML5?
Aby korzystać z tych zdarzeń w aplikacji internetowej należy dodać element <eventsource> do dokumentu, tj. strony internetowej.

Atrybut src elementu powinien wskazywać na adres URL, który powinien zapewnić stałe połączenie HTTP wysyłające strumień danych zawierający zdarzenie.

Adres URL wskazywałby na skrypt, który powinien dbać o stałe wysyłanie danych o zdarzeniach.

Czym jest Web Socket?
Web sockets to technologia następnej generacji do dwukierunkowej komunikacji dla aplikacji internetowych, która działa na jednym gnieździe i jest wystawiona za pomocą interfejsu napisanego w JavaScript dla przeglądarek zgodnych z HTML5.

Po uzyskaniu połączenia gniazda z serwerem WWW, możesz wysyłać dane z przeglądarki do serwera po wywołaniu metody send() oraz odbierać dane z serwera dzięki obsłudze zdarzenia onmessage.

Poniżej znajduje się API, które tworzy nowy obiekt gniazda internetowego (WebSocket):
var Socket=new WebSocket(url, [protocol]);
W powyższym przykładzie pierwszy argument, url, określa adres do którego się łączymy. Drugi atrybut, protocol, jest opcjonalny. Jeżeli występuje określa protokół podrzędny mówiący o tym, że serwer musi być odpowiedzialny za połączenie.

Jaki jest celu używania atrybutu Socket.readyState?
Atrybut ten jest atrybutem tylko do odczytu i określa stan połączenia. Może mieć jedną z poniższych wartości:
  • wartość 0 informuje, że połączenie nie zostało jeszcze ustanowione;
  • wartość 1 informuje, że połączenie zostało ustanowione i komunikacja jest możliwa;
  • wartość 2 informuje, że połączenie przechodzi przez stan zamykania;
  • wartość 3 informuje, że połączenie zostało zamknięte lub nie może być otwarte.

Jaki jest celu używania atrybutu Socket.bufferedAmount?
Atrybut ten jest atrybutem tylko do odczytu i określa liczbę bajtów tekstów formatowanych w zapisie UTF-8, które zostały umieszczone w kolejce po wywołaniu metody send().

Jaki jest cel używania znacznika ‘canvas’ w HTML5?
Element języka HTML5 pozwala w łatwy i skuteczny sposób na rysowanie przy użyciu JavaScript. Może być używany do rysowania wykresów, tworzenia kompozycji graficznych lub do (co nie jest takie łatwe) tworzenia animacji.

Jaki jest cel używania znacznika ‘audio’ w HTML5?
HTML5 wspiera znacznik <audio>, który może być używany do odtwarzania dźwięku w dokumentach html lub xhtml. Głównie używane formaty audio to ogg, mp3 oraz wav.

Element audio pozwala na zastosowanie wielu elementów źródłowych a przeglądarka użyje pierwszego rozpoznanego formatu – kwestia kompatybilności.

Jaki jest cel używania znacznika ‘video’ w HTML5?
HTML5 wspiera znacznik <video>, który może być używany do odtwarzania plików video w dokumentach HTML oraz XHTML. Głównie używane formaty video to ogg oraz mpeg4.

Element video pozwala na zastosowanie wielu elementów źródłowych a przeglądarka użyje pierwszego rozpoznanego formatu – kwestia kompatybilności.

Czym jest API geolokalizacji w HTML5?
Geolokalizacja pozwala na udostępnienie swojej lokalizacji. JavaScript jest zdolny do przechwycenia długości oraz szerokości geograficznej, które mogą być wysłane do serwera WWW a następnie użytkownikowi może np. zostać zwrócona lista lokalnych firm wraz z ich lokalizacją na mapie.

Obecnie większość przeglądarek oraz urządzeń mobilnych używa geolokalizacji. API geolokalizacji współpracuje z nową właściwością obiektu navigator.

Obiekt geolokalizacji może być utworzony w następujący sposób:
var geolocation = navigator.geolocation;
Obiekt geolokalizacji jest usługą, która pozwala na pobieranie informacji dotyczących lokalizacji geograficznej urządzenia.

Jaki jest cel używania metody getCurrentPosition() obiektu geolokalizacji w HTML5?
Metoda ta pobiera aktualną lokalizację geograficzną użytkownika.

Jaki jest cel używania metody watchPosition() obiektu geolokalizacji w HTML5?
Metoda ta pobiera okresowe aktualizacje zmiany lokalizacji geograficznej użytkownika.

Jaki jest cel używania metody clearPosition() obiektu geolokalizacji w HTML5?
Metoda ta odwołuje aktualizacje lokalizacji geograficznej związanej z wywołaniem metody watchPosition().