HTML5 – język znaczników wykorzystywany do tworzenia i prezentowania stron internetowych www.
Jest to konkurencyjna specyfikacja w stosunku do specyfikacji XHTML 2, której rozwój został porzucony 2 lipca 2009 roku. Główna różnica pomiędzy HTML 5 a XHTML 2 polega na tym, że HTML 5 jest pisane z myślą o kompatybilności wstecznej, podczas gdy XHTML 2 zrywało z kompatybilnością.
HTML5 poza dodaniem nowych elementów, usprawniających tworzenie serwisów i aplikacji internetowych, doprecyzowuje wiele niejasności w specyfikacji HTML 4, dotyczących przede wszystkim sposobu obsługi błędów. Dzięki HTML-owi 5 obsługa błędów ma być ta sama we wszystkich przeglądarkach, czyli zły element będzie działać w każdej przeglądarce albo żadnej.
HTML5 także stawia na semantykę. Element <div> traci na znaczeniu na rzecz <header> <main> <article> <aside> <footer> <nav>, a dodane zostają m.in. <canvas> <figure> <details> <summary>. Element <span> ma być mniej używany na rzecz <mark> <output> <var> <u> <s> (ostatnie dwa znaczniki były w HTML4 przestarzałe – deprecated).
---------------------------------------------------------------------------------------------------------------------
Co nowego
Oto zestaw niektórych z najważniejszych funkcji wprowadzonych w HTML5.
Nowe elementy semantyczne — section, article, header, footer, nav, video, audio, mark, progress
Forms 2.0 — Ulepszenia formularzy internetowych HTML, w których wprowadzono nowe atrybuty dla znacznika <input>.
Trwała pamięć lokalna — do osiągnięcia bez uciekania się do wtyczek innych firm.
WebSocket — technologia komunikacji dwukierunkowej nowej generacji dla aplikacji internetowych.
Zdarzenia wysyłane przez serwer — HTML5 wprowadza zdarzenia, które przepływają z serwera WWW do przeglądarek internetowych i są nazywane zdarzeniami wysłanymi przez serwer (SSE).
Canvas — obsługuje dwuwymiarową powierzchnię rysunkową, którą można zaprogramować za pomocą JavaScript.
Audio i wideo − Możesz osadzić dźwięk lub wideo na swoich stronach internetowych bez uciekania się do wtyczek innych firm.
Geolokalizacja — teraz odwiedzający mogą udostępniać swoją fizyczną lokalizację Twojej aplikacji internetowej.
Mikrodane — pozwala tworzyć własne słowniki wykraczające poza HTML5 i rozszerzać strony internetowe o niestandardową semantykę.
Przeciągnij i upuść − Przeciągnij i upuść elementy z jednej lokalizacji do innej na tej samej stronie internetowej.
---------------------------------------------------------------------------------------------------------------------
Przeglądarki
Najnowsze wersje Apple Safari, Google Chrome, Mozilla Firefox i Opera obsługują wiele funkcji HTML5, a Internet Explorer 9.0 będzie również obsługiwał niektóre funkcje HTML5.
Mobilne przeglądarki internetowe,
które są preinstalowane na iPhone'ach, iPadach i telefonach z
Androidem, mają doskonałą obsługę HTML5.
Funkcje obsługiwane przez przeglądarki:
---------------------------------------------------------------------------------------------------------------------
Semantyka
HTML5 poza dodaniem nowych elementów, usprawniających tworzenie serwisów i aplikacji internetowych, doprecyzowuje wiele niejasności w specyfikacji HTML 4, dotyczących przede wszystkim sposobu obsługi błędów. Dzięki HTML-owi 5 obsługa błędów ma być ta sama we wszystkich przeglądarkach, czyli zły element będzie działać w każdej przeglądarce albo żadnej.
HTML5 także stawia na semantykę. Element <div> traci na znaczeniu na rzecz <header> <main> <article> <aside> <footer> <nav>, a dodane zostają m.in. <canvas> <figure> <details> <summary>. Element <span> ma być mniej używany na rzecz <mark> <output> <var> <u> <s> (ostatnie dwa znaczniki były w HTML4 przestarzałe – deprecated).
HTML5 oferuje dużą elastyczność i obsługuje następujące funkcje:
- Nazwy znaczników pisane wielkimi literami.
- Cytaty są opcjonalne dla atrybutów.
- Wartości atrybutów są opcjonalne.
- Zamykanie pustych elementów jest opcjonalne.
<div> elementy,
które otaczają określone typy treści na stronie. Nie są one wymagane,
ale pomagają przeglądarce, urządzeniom pomocniczym i wyszukiwarkom
określić, jak faktycznie wygląda struktura strony.Tagi definiujące nowe semantyczne obszary strony mogą naturalnie zagnieżdżać się w sobie na różne sposoby.
<!DOCTYPE html>
Deklaracji dokumentu html dokonujemy na samym początku strony internetowej, na samej górze, na pierwszej linii kodu html. Deklaracja ta informuje przeglądarkę o rodzaju dokumentu, który ma przetworzyć.
W słowie kluczowym „DOCTYPE” nie jest rozróżniana wielkość liter. Tak więc <!doctype html> lub <!DOCTYPE html> , oba będą wystarczające.
Aby „przejść” na HTML5, wystarczy tylko zmienić element doctype.
---------------------------------------------------------------------------------------------------------------------
Sekcje
W ramach znaczników przydatnych przy wstawianiu sekcji, wyróżnić możemy elementy, które fizycznie te sekcje tworzą (ang. sectioning elements) - są to: ARTICLE, ASIDE, NAV, SECTION. Definiują one w dokumencie zakres dla nagłówków (H1, H2, H3, H4, H5, H6) i stopek (FOOTER).
Poniżej możesz zobaczyć przykładowy układ HTML5, aby zrozumieć, w jaki sposób różne części witryn są pogrupowane pod różnymi tagami HTML5.
<header>
Reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zwykle zawiera nagłówek sekcji (H1, H2, H3, H4, H5, H6) ale nie jest to absolutnie konieczne. Może zawierać również: spis treści, formularz wyszukiwania, logo.
Sam element HEADER nie stanowi nagłówka sekcji. Może to być nieco mylące, ponieważ z kolei element FOOTER stanowi stopkę sekcji.
<hgroup>
Element służy do grupowania zbioru h1– h6, gdy nagłówek ma wiele poziomów, np. podtytuły, alternatywne tytuły lub slogany. Jako całość tworzy jeden logiczny nagłówek, z całym zbiorem <h1> – <h6>.<hgroup> nie
powinien być używany, ponieważ nie wspiera go żadna technologia
wspomagająca, a w rezultacie ma szkodliwy wpływ na pomoc dla
umieszczonych w niej pozycji.
<footer>
Stanowi stopkę dla zawierającego ją elementu sekcji (ARTICLE, ASIDE NAV, SECTION). Stopka przechowuje zwykle informacje na temat sekcji - np.: autor, linki do powiązanych dokumentów, prawa autorskie itp. Stopka może również zawierać w sobie znaczniki sekcji. W takim przypadku stosuje się ją do oznaczania: załączników, skorowidzów (alfabetycznych indeksów haseł), kolofonów (opisów na zakończenie książki), szczegółowych praw autorskich itp.
Mimo z pozoru analogicznej znaczeniowo nazwy, element FOOTER inaczej niż HEADER stanowi stopkę sekcji, podczas gdy ten drugi nie oznacza nagłówka sekcji. Jednak znacznik FOOTER sam nie tworzy nowej, niejawnej sekcji w dokumencie.
<main>
<body>. Nie powinien zawierać niczego, co powtarza się w innych witrynach, takich jak nawigacja lub główna stopka. Powinien być tylko jeden <main>na każdej stronie (więc sekcje nie powinny go używać).
<nav>
Reprezentuje sekcję strony, która zawiera odnośniki nawigacyjne do
innych stron albo do określonych fragmentów na tej samej stronie. Nie
wszystkie linki na stronie powinny być umieszczane w tym znaczniku.
Został on przewidziany przede wszystkim do oznaczania nim podstawowej
nawigacji witryny.
Znacznik NAV może być niezwykle przydatny dla syntezatorów
mowy, używanych przez osoby niewidome. Syntezator może udostępnić
możliwość pominięcia linków nawigacyjnych, gdy użytkownik chce się
zapoznać tylko z główną treścią dokumentu.
<article>
Element HTML Article
(<article>) reprezentuje niezależną (w postaci dokumentu
internetowego, strony, witryny lub aplikacji) treść, na przykład post na
forum, artykuł w magazynie lub gazecie, wpis na blogu, komentarz
przesłany przez użytkownika, interaktywny widget lub gadżet.
Element artykułu nie ma żadnych
innych atrybutów niż atrybuty globalne (accesskey, class,
contenteditable, contextmenu, dir, draggable, dropzone, hidden, id,
lang, spellcheck, style. tabindex, title), wspólne dla wszystkich
elementów.
Jest to przydatne jeśli wstawiasz takie rzeczy jak posty na blogu lub artykuły do istniejącego szablonu ponieważ nie musisz się martwić dopasowywaniem poziomów nagłówków postów do tych z szablonu strony głównej.
Jeśli konieczne jest podanie informacji o autorze artykułu, można to zrobić za pomocą <adresu>.
<aside>
Element aside identyfikuje treść,
która jest „stycznie powiązana” z główną treścią strony. W druku, na
przykład w czasopiśmie lub w książce, może to być zwykle reprezentowane
przez boczne pole lub pasek boczny.
Element strony bocznej reprezentuje sekcję strony, która składa się z treści, która jest stycznie powiązana z treścią wokół elementu bocznego i którą można uznać za odrębną od tej treści. Takie sekcje są często przedstawiane jako paski boczne w drukowanej typografii. Element może być używany do efektów typograficznych, takich jak cytaty lub paski boczne, do reklam, do grup elementów nawigacji i do innych treści, które są uważane za odrębne od głównej zawartości strony
<section>
Element <section> stanowi samodzielną sekcję tworzącą dokument HTML, której nie można przedstawić za pomocą bardziej szczegółowej semantycznie sekcji.
Przykładami sekcji mogą być: rozdziały książki lub pracy badawczej, przełączane zakładki okna dialogowego. Strona domowa może zostać podzielona na przykładowe sekcje: wprowadzenie, lista nowości, informacje kontaktowe. Treść sekcji może być dodatkowo podzielona na podsekcje - poprzez umieszczenie w elementach głównych sekcji dodatkowych znaczników SECTION.
Nie używa się elementu <section> w celu stworzenia ogólnego kontenera; do tego służy element <div>, szczególnie nie robi się tego jesli ma to służyć tylko do nadania stylów. Praktyczną zasadą jest to, że wsytąpeinie elementu <section> powinną być logiczne w schemacie dokumentu. Jeżeli istnieje potrzeba, aby zmienić wygląd kilku następujących po
sobie elementów, należy do tego użyć znacznika DIV, który w odróżnieniu
od SECTION, nie niesie ze sobą żadnego znaczenia semantycznego.
<address>
Tag określa dane kontaktowe autora/właściciela dokumentu lub artykuł.
Dane kontaktowe mogą być adresem e-mail, adresem URL, adresem fizycznym, telefonem numer, uchwyt w mediach społecznościowych itp.
Tekst w <address> element jest zwykle renderowany kursywą, a przeglądarki będą zawsze dodawaj łamanie wiersza przed i po <address> element.
<details>
Definiuje dodatkowe szczegóły, które użytkownik może wyświetlić lub ukryć.
Tag jest często używany do tworzenia interaktywnego widżetu, który użytkownik może otwierać i zamykać.
Domyślnie widżet jest zamknięty. Po otwarciu rozwija się i wyświetla zawartość.
W tagu <details> można umieścić dowolną treść.
Wskazówka: Znacznik <summary> jest używany w połączeniu z <details> do określenia widocznego nagłówka dla szczegółów.
<summary>
Uwaga: Element <summary> powinien być pierwszym elementem podrzędnym elementu <details>.
<time>
Tag definiuje konkretną godzinę (lub data/godzina).
Atrybut
tego elementu tłumaczy czas na format do odczytu maszynowego, dzięki
czemu przeglądarki mogą oferować dodawanie przypomnień o datach za
pośrednictwem kalendarz użytkownika, a wyszukiwarki mogą generować
lepsze wyniki wyszukiwania.
Flaga „pubdate” informuje wyszukiwarki i
inne osoby, że jest to oficjalna data publikacji tej sekcji (lub całego
dokumentu, jeśli nie ma tej sekcji).
<meter>
Tag definiuje pomiar skalarny w znanym zakresie lub wartości ułamkowej. Nazywa się to również miernikiem.
Przykłady: użycie dysku, trafność wyniku zapytania itp.
Uwaga : <meter>tag nie powinien być używany do wskazywania postępu (jak w a pasek postępu). W przypadku pasków postępu użyj <progress> .
Wskazówka: zawsze dodawaj <label> tag.
<output>
Element kontenera, do którego witryna lub aplikacja może wstrzykiwać wyniki obliczeń lub wynik działania użytkownika.
W poniższym przykładzie formularz zawiera suwak, którego wartość może wynosić od 0oraz 100, i <input> element, do którego można wpisać drugą liczbę. Te dwie liczby są sumowane, a wynik jest wyświetlany w <output> element za każdym razem, gdy zmienia się wartość którejkolwiek z kontrolek.
<progress>
Tag reprezentuje postęp realizacji zadania.
Wskazówka: zawsze dodawaj <label> tag dla najlepszych praktyk dostępności!
Wskazówka: użyj <progress> w połączeniu z JavaScript, aby wyświetlić postęp zadania.
Uwaga : <progress> nie nadaje się do reprezentowania miernika (np. wykorzystanie miejsca na dysku lub trafność wyniku zapytania).
<audio>
Tag służy do osadzania dźwięku treści w dokumencie, takie jak muzyka lub inne strumienie audio.
tag zawiera jeden lub więcej <source> tagi z różnymi źródłami dźwięku. Przeglądarka wybierze pierwsze źródło tego obsługuje.
Tekst między <audio>oraz </audio> tagi będą wyświetlane tylko w przeglądarkach, które nie obsługują <audio>element.
Istnieją trzy obsługiwane formaty audio w HTML: MP3, WAV i OGG.
<video>
Tag służy do osadzania wideo zawartość dokumentu, na przykład klip filmowy lub inne strumienie wideo. Zawiera jeden lub więcej <source> tagi z różnymi źródłami wideo. Przeglądarka wybierze pierwsze źródło tego obsługuje.
Tekst między <video> oraz </video> Tagi będą wyświetlane tylko w przeglądarkach, które nie obsługują elementu <video>.
Istnieją trzy obsługiwane formaty wideo w HTML: MP4, WebM i OGG.
<figure>
Określa niezależną treść, taką jak ilustracje, diagramy, zdjęcia, wykazy kodów itp.
<figcaption>definiuje
podpis dla <figure>element. Element może być umieszczony jako
pierwszy lub jako ostatnie dziecko <figure> element.
<img>element definiuje rzeczywisty obraz/ilustrację.
<canvas>
Tag służy do rysowania grafiki w locie za pomocą skryptów (zwykle JavaScript).
Jest przezroczysty i jest tylko pojemnikiem na grafikę, musisz użyć skryptu, aby faktycznie narysować grafikę.
Dowolny tekst wewnątrz <canvas>element będzie wyświetlany w przeglądarkach z wyłączonym JavaScript i w przeglądarkach, które nie obsługują <canvas>.
<datalist>
Służy do zapewnienia funkcji „autouzupełniania” dla <input>. Podczas wprowadzania danych użytkownicy zobaczą rozwijaną listę wstępnie zdefiniowanych opcji.
Id elementu musi być równy atrybutowi listy elementu <input> (to je wiąże razem).
All tags
https://www.w3schools.com/tags/default.asp
---------------------------------------------------------------------------------------------------------------------
Przykładowe układy strony
---------------------------------------------------------------------------------------------------------------------
HTML4 vs HTML5 - sekcje
Structure of CI document and its relationship with HTML5 document:
---------------------------------------------------------------------------------------------------------------------
Inline Text Semantics
Przechodzenie do treści za pomocą odpowiednich i ustrukturyzowanych nagłówków( h1, h2,... h6) oraz ptagi
pomagają w porządkowaniu danych. Niektóre czytniki ekranu robią sobie
przerwę po złamaniu akapitu. Użytkownicy mogą mieć możliwość pomijania
według sekcji (identyfikowanych przez nagłówki).
ul, ol, dl wraz z li mają być używane do list.
Oto kilka tagów, których możesz użyć, aby dostarczyć więcej informacji o częściach tekstu (zamiast używać span)
strongwskazuje, że jego treść ma duże znaczenie (jest to semantyczne w porównaniu zb).
empodkreśla nacisk tekstu (użyj tego w przeciwieństwie do nie semantycznegoi)citeopisać odniesienie do cytowanej pracy i zawierać tytuł tej pracy.
qwskazuje, że załączony tekst jest krótkim cytatem w tekście.
blockquotewskazuje, że załączony tekst jest rozszerzonym cytatem (zwykle renderowanym wizualnie przez wcięcie)dfnużywany do wskazania terminu definiowanego w kontekście frazy definicyjnej lub zdania.
abbrreprezentuje skrót lub akronim (opcjonalny atrybut „title” może stanowić rozwinięcie lub opis skrótu)subelement indeksu dolnego.
supelement indeksu górnego.timeużywany do reprezentowania czasu lub czasu trwaniakbdreprezentuje zakres tekstu w wierszu oznaczający tekstowe dane wejściowe użytkownika z klawiatury, wprowadzania głosowego lub dowolnego innego urządzenia do wprowadzania tekstucodewskazuje, że tekst jest krótkim fragmentem kodu komputerowego.
sampreprezentuje przykładowe (lub cytowane) dane wyjściowe z programu komputerowego
varreprezentuje nazwę zmiennej w wyrażeniu matematycznym lub kontekście programowaniadelreprezentuje zakres tekstu, który został usunięty z dokumentu.
insreprezentuje zakres tekstu, który został dodany do dokumentu
Wiele informacji może być upakowanych za pomocą znaczników korelacyjnych - takich jak ddoraz dt, figure oraz figcaption, labeloraz input
To tylko podstawowe wprowadzenie. Wszystkie tagi HTML można znaleźć na tej stronie MDN .
---------------------------------------------------------------------------------------------------------------------
Atrybuty globalne
W
języku HTML5 istnieje grupa atrybutów, które można definiować dla
wszystkich elementów. Mimo że atrybuty te można stosować do wszystkich
elementów, w niektórych przypadkach ich definiowanie nie ma sensu i
wówczas nie daje to żadnego efektu.
Poniżej znajduje się lista wszystkich „zwykłych” globalnych atrybutów HTML 5:
|
accesskey |
class |
contenteditable |
|
contextmenu |
dir |
draggable |
|
dropzone |
hidden |
id |
|
inert |
itemid |
itemprop |
|
itemref |
itemscope |
itemtype |
|
lang |
spellcheck |
style |
|
tabindex |
title |
translate |
Poniżej znajduje się lista wszystkich globalnych atrybutów zdarzeniowych HTML 5:
|
onabort |
onblur |
oncancel |
|
oncanplay |
oncanplaythrough |
onchange |
|
onclick |
onclose |
oncontextmenu |
|
oncuechange |
ondblclick |
ondrag |
|
ondragend |
ondragenter |
ondragleave |
|
ondragover |
ondragstart |
ondrop |
|
ondurationchange |
onemptied |
onended |
|
onerror |
onfocus |
oninput |
|
oninvalid |
onkeydown |
onkeypress |
|
onkeyup |
onload |
onloadeddata |
|
onloadedmetadata |
onloadstart |
onmousedown |
|
onmousemove |
onmouseout |
onmouseover |
|
onmouseup |
onmousewheel |
onpause |
|
onplay |
onplaying |
onprogress |
|
onratechange |
onreset |
onscroll |
|
onseeked |
onseeking |
onselect |
|
onshow |
onstalled |
onsubmit |
|
onsuspend |
ontimeupdate |
onvolumechange |
|
onwaiting |
|
|
---------------------------------------------------------------------------------------------------------------------
Typy pól formularza (Web Forms 2.0)
W HTML5 zdefiniowano kilkanaście nowych typów pól, których można już używać do budowy formularzy.
<input type="search"> — do tworzenia pól wyszukiwania
<input type="number"> — do tworzenia pól wyboru wartości liczbowej
<input type="range"> — do tworzenia suwaków
<input type="color"> — do tworzenia elementów wyboru koloru
<input type="tel"> — do tworzenia pól na numer telefonu
<input type="url"> — do tworzenia pól na adresy internetowe
<input type="email"> — do tworzenia pól na adresy e-mail
<input type="date"> — do tworzenia elementów do wyboru daty
<input type="month"> — do tworzenia elementów, w których można wybrać miesiąc
<input type="week"> — do tworzenia elementów, w których można wybrać tydzień
<input type="time"> — na znaczniki czasowe
<input type="datetime"> — na dokładne znaczniki data + godzina
<input type="datetime-local"> — na lokalne daty i godziny
Tekst zastępczy:
Oprócz
dodania nowych typów pól wejściowych w HTML5 zaimplementowano też kilka
ulepszeń w istniejących typach. Jednym z nich jest możliwość ustawiania
tekstu zastępczego w polach wejściowych. Tekst zastępczy (ang.
placeholder text) to napis wyświetlany w polu wejściowym, gdy jest puste
i nieaktywne. Gdy użytkownik w nim kliknie (albo przejdzie do niego za
pomocą klawisza Tab), tekst zastępczy znika.
Sprawdzanie obsługi tekstu zastępczego:
Focus
W
HTML5 wprowadzono atrybut autofocus dla wszystkich elementów
formularzy. Działanie tego atrybutu jest dokładnie takie, na jakie
wskazuje jego nazwa: przenosi fokus do wybranego pola wejściowego.
---------------------------------------------------------------------------------------------------------------------
Geolokalizacja
API Geolokalizacji zapewnia dostęp do lokalizacji geograficznej związanej z urządzeniem hostingowym.
Istnieje kilka sposobów na sprawdzenie gdzie jesteś — można posłużyć się adresem IP, informacjami dotyczącymi bezprzewodowego połączenia internetowego, sprawdzić, z którą wieżą telefonii komórkowej komunikował się twój telefon komórkowy albo użyć urządzenia GPS obliczającego szerokość i długość geograficzną na podstawie informacji otrzymanych z krążącego nad ziemią satelity.
Jeśli użytkownik końcowy udzieli pozwolenia , Geolokalizacja API :
- Zapewnia dane o lokalizacji, takie jak szerokość, długość geograficzna, wysokość i prędkość, a także dokładność pozyskanych danych lokalizacyjnych, a także przybliżony czas, w którym pozycja została pozyskana za pośrednictwem GeolocationPositionberło.
- Obsługuje "jednorazowe" aktualizacje pozycji za pośrednictwem getCurrentPosition() i możliwość odbioru aktualizacji, gdy pozycja urządzenia hostingowego jest istotna za pośrednictwem watchPosition().
- Używając PositionOptions maximumAge, pozwala aplikacji zażądać pozycji w pamięci podręcznej, której wiek nie jest większy niż określona wartość (buforowana jest tylko ostatnia pozycja).
- Umożliwia aplikacji otrzymywanie aktualizacji o błędach, jak GeolocationPositionError, które miały miejsce podczas zdobywania pozycji .
- Przez enableHighAccuracy, obsługuje żądanie "wysokiej dokładności" danych o pozycji, chociaż żądanie może być ignorowane przez klienta użytkownika.
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}function get_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// Brak standardowej obsługi, więc trzeba zastosować jakieś wyjście awaryjne
}
}function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// Pokażmy mapę albo zróbmy coś innego równie fajnego!
} navigator.geolocation.getCurrentPosition(show_map, handle_error) function handle_error(err) {
if (err.code == 1) {
// Użytkownik powiedział nie!
}
}navigator.geolocation.getCurrentPosition(success_callback, error_callback, {maximumAge: 75000}); A one-shot position request
navigator.geolocation.getCurrentPosition position => {
const { latitude, longitude } = position.coords;
// Show a map centered at latitude / longitude.
});
Watching a position for repeated updates
const watchId = navigator.geolocation.watchPosition (position => {
const { latitude, longitude } = position.coords;
// Show a map centered at latitude / longitude.
});
https://www.w3.org/TR/geolocation/
http://shebang.pl/kursy/html5-rzeczowo/r7-geolokalizacja/
---------------------------------------------------------------------------------------------------------------------
Offline Web Applications
Główną nowością oferowaną przez HTML5 jest CACHE MANIFEST.
Jest to specjalny plik, w którym wskazujemy zasoby mające być przechowywane w pamięci podręcznej klienta (i kilka innych rzeczy, o czym dalej).
CACHE MANIFEST pozwala na trwały zapis wybranych plików na urządzeniu, dzięki czemu przy próbie wejścia na stronę bez dostępu do Internetu użytkownik nadal będzie mógł korzystać ze strony – zawartość zostanie po prostu pobrana z cache przeglądarki.
Przeglądarka obsługująca aplikacje offline HTML5 odczyta tę listę adresów URL
z manifestu, pobierze zasoby, zapisze je na lokalnym dysku i będzie
automatycznie aktualizować dane, gdy coś się w nich zmieni. Gdy będziesz
korzystać z aplikacji bez połączenia z internetem, przeglądarka
automatycznie będzie serwować lokalne kopie plików.
Budowa pliku CACHE MANIFEST
Zacznijmy od poinformowania przeglądarki, że korzystamy z AppCache. W tym celu musimy do elementu HTML dodać atrybut manifest, w którym wskazujemy nasz plik cache manifest:
<!DOCTYPE HTML>
<html manifest="stronka.appcache">
Nazwa pliku jest dowolna – nie musi mieć nawet rozszerzenia .appcache, choć dobrym nawykiem jest takie nazewnictwo pliku, by nietrudno się domyślić co robi dany plik w naszym katalogu z witryną.
Przy definiowaniu pliku cache manifest musimy zadbać szczególnie o dwie rzeczy: typ MIME oraz specjalna konstrukcja pliku.
Aby przeglądarka poprawnie obsłużyła nasz cache manifest koniecznie musimy ustawić odpowiedni typ MIME dla naszego pliku. Najprościej jest to zrobić w konfiguracji serwera, choć możemy także wykorzystać przy tym plik .htaccess – wystarczy dodać regułkę:
AddType text/cache-manifest .appcache
W ten sposób pliki o rozszerzeniu .appcache będą traktowane przez serwer jako pliku typu text/cache-manifest, czyli interpretowane w specjalny sposób.
Budowa pliku cache manifest
W najprostszej wersji tak będzie wyglądać nasz plik cache manifest:
CACHE MANIFEST
index.html
style.css
scripts.js
W pierwszej linijce dajemy tekst: CACHE MANIFEST, natomiast w każdej kolejnej wskazujemy plik, który ma zostać załadowany do pamięci podręcznej (każdy plik w nowej linii).
Jeśli potrzebujemy stworzyć bardziej skomplikowaną aplikację offline:
CACHE MANIFEST
# 2011-07-29:v1
CACHE:
index.html
style.css
scripts.js
NETWORK:
login.php
api.php
FALLBACK:
*.php /offline.html
images/ images/offline.jpg
Jak widać, powyższy plik posiada trzy główne sekcje:
- CACHE
Pliki domyślnie pobierane do pamięci podręcznej (możemy pominąć nazwę tej sekcji).
- NETWORK
Wskazujemy tutaj zasoby, które zawsze wymagają połączenia z siecią.
- FALLBACK
W sekcji tej możemy ustawić „treść zastępczą” dla pewnych zasobów. W powyższym przykładzie, przy próbie wywołania jakiegokolwiek pliku z rozszerzeniem php, wyświetlona zostanie zawartość pliku offline.html.
Application Cache & JavaScript
Wykrywanie trybu pracy użytkownika – czy pracuje online czy offline:
<!DOCTYPE html>
<html manifest="manifest.mf">
<head>
<title>Offline Support</title>
<script type="text/javascript">
const initialize = () => {
let status = 'Offline'
if(navigator.onLine){
status = 'Online'
}
document.getElementById("status").innerHTML = status
}
</script>
</head>
<body onload="initialize()">
<div id="status"/>
</body>
</html>
Interfejs ApplicationCache udostępnia wiele informacji i opcji możliwych do wykorzystania w naszej aplikacji:
var appCache = window.applicationCache;
Możemy sprawdzić aktualny status naszej aplikacji
var appStatus = window.applicationCache.status;
Możemy rozpoznać kilka stanów obiektu applicationCache:
- UNCACHED
Aplikacja nie została jeszcze zbuforowana w pamięci urządzenia.
- IDLE
W buforze jest najnowsza wersja plików wskazanych przez plik cache manifest i obecnie nie trwa żaden inny proces.
- CHECKING
W chwili obecnej trwa sprawdzanie czy w buforze urządzenia są najnowsze pliki.
- DOWNLOADING
Trwa pobieranie i zapisywanie plików na urządzeniu.
- UPDATEREADY
Pobrano już pliki do pamięci, ale nie wymieniono ich jeszcze z wcześniejszą wersją buforu (należy aktywować przy pomocy metody swapCache).
- OBSOLETE
Pliki w buforze są przestarzałe – w pliku cache manifest znajdują się nowe wersje plików.
W tym przypadku dynamicznie aktualizujemy pamięć podręczną – nakazujemy przeglądarce pobrać nowe pliki z serwera, a jeśli pobieranie przebiegnie prawidłowo to wymieniamy pliki w buforze na nowo pobrane:
var appCache = window.applicationCache;
appCache.update(); // wykonaj aktualizację pamięci podręcznej
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // aktywuj nowe pliki w pamięci podręcznej
}
Zdarzenia applicationCache
Jak już wcześniej zauważyłeś, możemy sterować naszą aplikacją offline. Do dyspozycji mamy następujące zdarzenia:
- checking
Zdarzenie to jest wywoływane jako pierwsze, w chwili kiedy klient (przeglądarka) sprawdza dostępność pliku cache manifest i szuka plików do aktualizacji.
- noupdate
Pliki w pamięci podręcznej są aktualne – nie wymagają aktualizacji.
- downloading
Pliki w pamięci podręcznej były nieaktualne, więc trwa proces pobierania nowych zasobów.
- progress
Zdarzenie wywoływane po pobraniu każdego kolejnego zasobu wskazanego w pliku cache manifest.
- cached
Zasoby wskazane w cache manifest zostały pobrane i znajdują się już w pamięci podręcznej, gotowe do późniejszego użycia.
- updateready
Zdarzenie wywoływane w momencie, kiedy na nowo zaktualizowano pamięć podręczną (przez użycie metody update).
- obsolete
Podczas pobierania zasobów cache manifest wystąpił błąd 404 lub 410 – proces aktualizacji pamięci podręcznej zakończony niepowodzeniem.
- error
Zdarzenie to jest wywoływane w momencie nie odnalezienia któregoś z zasobów wskazanych w pliku cache manifest lub sam plik cache manifest nie uległ żadnej zmianie od ostatniej aktualizacji.
http://blog.kamilbrenk.pl/tworzenie-aplikacji-z-html5-offline/
https://developer.ibm.com/tutorials/x-html5mobile3/
https://www.w3.org/TR/2011/WD-html5-20110525/offline.html---------------------------------------------------------------------------------------------------------------------
Nowe metody DOM
getElementsByClassName
activeElement, hasFocus
getSelection
classList (wrapper dla className) z metodami: has(), add(), remove(), toggle()
relList dla elementu a
innerHTML dla window i document
---------------------------------------------------------------------------------------------------------------------
File API
Interfejs dostarcza informacji o plikach i umożliwia JavaScriptowi na stronie internetowej dostęp do ich zawartości.
Interfejs API plików HTML5 zawiera następujące podstawowe obiekty:
- FileList
Wyświetla listę wszystkich plików wybranych przez użytkownika, każdy określony jako a File obiekt.
- File
Obiekt reprezentuje plik w lokalnym systemie plików.
- Blob
Obiekt reprezentuje duży binarny obiekt OBject (BLOB), który jest używany do przechowywania zawartości pojedynczego plik z lokalnego systemu plików.
- FileReader Interfejs, który zapewnia metody odczytywania Filelub Blob, oraz model zdarzenia do uzyskania wyników tych odczytów.
Pierwszą rzeczą do zrobienia jest sprawdzenie, czy przeglądarka w pełni obsługuje API plików:
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
https://www.w3.org/TR/FileAPI/
https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
https://www.positronx.io/understand-html5-filereader-api-to-upload-image-and-text-files/
---------------------------------------------------------------------------------------------------------------------
Web Workers
JavaScript został zaprojektowany do działania w środowisku jednowątkowym, co oznacza, że wiele skryptów nie może działać jednocześnie.
Web Workers wykonają wszystkie kosztowne obliczeniowo zadania bez przerywania interfejsu użytkownika i zwykle działają w osobnych wątkach.
Kiedy skrypt jest wykonywany wewnątrz Web Workera, nie może uzyskać dostępu do obiektu window strony internetowej (window.document), co oznacza, że Web Worker nie ma bezpośredniego dostępu do strony internetowej i DOM API. Chociaż Web Workers nie mogą blokować interfejsu przeglądarki, mogą nadal zużywać cykle procesora i zmniejszać responsywność systemu.
Web Workers działają w izolowanym wątku. W rezultacie kod, który wykonują, musi być zawarty w osobnym pliku.
Web Workery są inicjowane adresem URL pliku JavaScript, który zawiera kod, który wykona worker.
Jeśli określony plik javascript istnieje, przeglądarka stworzy nowy wątek roboczy, który jest pobierany asynchronicznie.
Przed utworzeniem web workera sprawdź, czy przeglądarka użytkownika go obsługuje:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Gdy Web Worker zostanie uruchomiony, komunikacja między web workerem a jego stroną nadrzędną odbywa się za pomocą metody postMessage().
worker.postMessage(); // Start the worker.
Dostęp do wiadomości przekazanej przez Web Worker uzyskuje się za pomocą onmessage na stronie głównej.
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('bigLoop.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations" );
};
function sayHello() {
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type = "button" onclick = "sayHello();" value = "Say Hello"/>
</body>
</html>
https://www.tutorialspoint.com/html5/html5_web_workers.htm
https://www.html5rocks.com/en/tutorials/workers/basics/
https://www.w3schools.com/html/html5_webworkers.asp
---------------------------------------------------------------------------------------------------------------------
Drag and Drop (DnD) API
Aby osiągnąć funkcjonalność „przeciągnij i upuść” w tradycyjnym HTML4, programiści musieliby albo użyć złożonego programowania JavaScript, albo innych frameworków JavaScript, takich jak jQuery itp.
Teraz HTML 5 wymyślił interfejs API Drag and Drop (DnD), który zapewnia natywną obsługę DnD w przeglądarce, co znacznie ułatwia kodowanie.
HTML 5 DnD jest obsługiwany przez wszystkie główne przeglądarki, takie jak Chrome, Firefox 3.5 i Safari 4 itp.
Istnieje wiele zdarzeń, które są uruchamiane na różnych etapach operacji przeciągania i upuszczania:
- dragstart
uruchamiany, gdy użytkownik zaczyna przeciągać obiekt.
- dragenter
uruchamiany, gdy mysz zostanie po raz pierwszy przesunięta nad element docelowy podczas przeciągania.
- dragover
uruchamiane, gdy mysz jest przesuwana nad elementem podczas przeciągania.
- dragleave
uruchamiane, gdy mysz opuszcza element podczas przeciągania.
- drag
uruchamiany za każdym razem, gdy poruszamy myszą, gdy obiekt jest przeciągany.
- drop
jest uruchamiane na elemencie, w którym nastąpiło upuszczenie pod koniec operacji przeciągania.
- dragend
uruchamiany, gdy użytkownik zwolni przycisk myszy podczas przeciągania obiektu.
Umożliwienie przeciągania obiektu
Kroki:
1. Jeśli chcesz przeciągnąć element, musisz ustawić atrybut draggable na true dla tego elementu.
<div id = "boxA" draggable = "true">
2.Ustaw detektor zdarzeń dla dragstart, który przechowuje przeciągane dane.
<div id = "boxA" draggable = "true" ondragstart = "return dragStart(ev)">
3. Ustawienie detektora dragStart
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
Pełny kod:
<!DOCTYPE HTML>
<html>
<head>
<style type = "text/css">
#boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; }
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type = "text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>
<div id = "boxA" draggable = "true" ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB">Dustbin</div>
</center>
</body>
</html>
Upuszczenie obiektu
Aby zaakceptować upuszczenie, cel upuszczenia musi wysłuchać co najmniej trzech zdarzeń.
- dragenter - do określenia, czy cel upuszczania ma zaakceptować upuszczenie
- dragover - do określenia, jakie informacje zwrotne mają być wyświetlane użytkownikowi
- drop - pozwala na wykonanie rzeczywistego upuszczenia.
<div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
https://www.tutorialspoint.com/html5/html5_drag_drop.htm
https://web.dev/drag-and-drop/
---------------------------------------------------------------------------------------------------------------------
HTML 5 API's
---------------------------------------------------------------------------------------------------------------------
Obsługa błędów
Przeglądarki obsługujące HTML5 będą dostosowane do obsługi błędów w składni. HTML5 został zaprojektowany tak, by starsze przeglądarki bez problemu mogły ignorować nowe konstrukcje. W przeciwieństwie do starszego HTML 4.01 specyfikacja tej wersji zawiera szczegółowe instrukcje jak postępować z niepoprawną składnią, przez co strony z błędami będą wyświetlane w ten sam sposób w różnych przeglądarkach.---------------------------------------------------------------------------------------------------------------------
Techniki sprawdzania obsługi HTML5
Przeglądarka
przed wyświetleniem strony tworzy jej obiektowy model (DOM —Document
Object Model), czyli strukturę obiektów reprezentujcych wszystkie
elementy HTML znajdujące się na stronie.
Wszystkie obiekty DOM
mają wspólny zestaw własności, ale niektóre mają jeszcze dodatkowe,
których brak innym. W przeglądarkach obsługujących HTML5 niektóre
obiekty mają pewne wyróżniające je własności. Dzięki temu wystarczy
zajrzeć do struktury DOM, aby dowiedzieć się, które elementy języka
HTML5 są obsługiwane.
Są cztery podstawowe techniki sprawdzania czy przeglądarka obsługuje wybrany element HTML5.
- Sprawdzenie czy globalny obiekt (np. window lub navigator) ma wybraną własność.
- Utworzenie elementu i sprawdzenie czy ma określoną własność.
- Utworzenie elementu i sprawdzenie czy ma określoną metodę, a następnie jej wywołanie i sprawdzenie, co zwróci.
- Utworzenie elementu, ustawienie wybranej własności na jakąś wartość oraz sprawdzenie czy własność ta zachowała tę wartość.
Modernizr to biblioteka do sprawdzania poziomu obsługi HTML5.
Aby z niej skorzystać, wystarczy na początku strony umieścić poniższy element script.
Biblioteka
Modernizr działa automatycznie. Aby z niej korzystać, nie trzeba
wywoływać żadnej funkcji typu modernizr_init(). Gdy zostanie
uruchomiona, tworzy globalny obiekt o nazwie Modernizr zawierający zbiór
własności logicznych, dla każdej z wykrytych obsługiwanych własności.
Jeśli
np. twoja przeglądarka obsługuje APIcanvas, to własność
Modernizr.canvas ma wartość true. Jeśli przeglądarka nie obsługuje API
canvas, to własność Modernizr.canvas ma wartość false.
---------------------------------------------------------------------------------------------------------------------
Web storage
Dotychczas jedyną formą przechowywania danych po stronie klienta były ciasteczka (ang. cookies). Jednakże zezwalają one na przechowywanie zaledwie kilku KB. Pewnym rozwiązaniem są flash cookies,
które pozwalają przechowywać do 100KB danych. W dzisiejszych czasach, w
dobie aplikacji internetowych, oba rozwiązania są niewystarczające.
Cookies są bardzo małe (do 4KB) i są wysyłane z/do serwera za pomocą HTTP podczas gdy localStorage jest stosunkowo duży (5MB +) i nie wysyła nic na serwer.
Z pomocą przychodzą deweloperzy HTML5, którzy stworzyli mechanizm web storage. Jest to API dla programistów JavaScript, które umożliwia zapis danych po stronie klienta.
Magazyn sieciowy HTML udostępnia dwa obiekty do przechowywania danych na kliencie:
- window.localStorage
- window.sessionStorage
Przed skorzystaniem z pamięci internetowej sprawdź obsługę przeglądarki localStorage i sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
Lokalny obiekt magazynowy
Obiekt localStorage przechowuje dane bez daty wygaśnięcia. Dane nie zostaną usunięte po zamknięciu przeglądarki i będą dostępne następnego dnia, tygodnia lub roku.
// Store
localStorage.setItem("lastname", "Smith");
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
document.getElementById("result").innerHTML = localStorage.lastname;
//Składnia usuwania elementu localStorage „nazwisko” jest następująca:
localStorage.removeItem("lastname");
Obiekt sessionStorage
Obiekt sessionStorage jest równy obiektowi localStorage, z wyjątkiem przechowuje dane tylko dla jednej sesji. Dane są usuwane po zamknięciu przez użytkownika konkretna karta przeglądarki.
//czyszczę wszystko co jest w magazynie
sessionStorage.clear();
// sprawdzam stan początkowy
console.log(sessionStorage.length) // 0 - nie ma nic
// dodaje właściwość property
sessionStorage.setItem('property', val1);
// dodaje właściwość animal
sessionStorage.setItem('animal', val2);
console.log(sessionStorage.length) // 2 - 2 elementy
// sprawdzam czy instnieje 1-szy element
console.log(sessionStorage.key(0)); //animal
// usuwam właściwość property
sessionStorage.removeItem('property');
// sprawdzam stan
console.log(sessionStorage.length) // 1 - tylko animal
let animal =sessionStorage.getItem('animal');
console.log(animal); // pies
---------------------------------------------------------------------------------------------------------------------
Offline Web Applications
Wymienione wyżej mechanizmy mogą zostać wykorzystane w Offline Web Applications. Nowość ta umożliwia używanie aplikacji internetowych w trybie offline (bez połączenia internetowego).
Gdy przeglądarka ma dostęp do internetu pobiera wszystkie pliki HTML,
CSS i JS. W trakcie działania w trybie offline magazynuje dane od
użytkownika. Natomiast w wypadku ponownego dostępu do internetu
synchronizuje dane z serwerem aplikacji.
---------------------------------------------------------------------------------------------------------------------
Materiały:
https://www.tutorialspoint.com/html5/html5_overview.htm
https://www.w3resource.com/html5/introduction.php
https://www.w3schools.com/tags/
http://shebang.pl/kursy/html5-rzeczowo/
https://stuyhsdesign.wordpress.com/html5/
Brak komentarzy:
Prześlij komentarz