czwartek, 15 lutego 2024

Wzorce architektoniczne a projektowe

Wzorce architektoniczne i projektowe to dwa różne pojęcia, ale są ze sobą powiązane. Oto podstawowe różnice między nimi:

  1. Zakres:

    • Wzorzec architektoniczny
      Dotyczy ogólnego układu strukturalnego i organizacyjnego całego systemu oprogramowania. Koncentruje się na najwyższym poziomie abstrakcji, obejmując całą architekturę systemu.

    • Wzorzec projektowy
      Skupia się na konkretnych problemach w projektowaniu klas, obiektów czy komponentów w ramach systemu. Obejmuje mniejszy zakres niż wzorzec architektoniczny.
  2. Poziom abstrakcji:

    • Wzorzec architektoniczny
      Działa na wysokim poziomie abstrakcji, definiując strukturę i organizację całego systemu.

    • Wzorzec projektowy
      Operuje na niższym poziomie abstrakcji, dostarczając rozwiązania dla konkretnych problemów związanych z projektowaniem obiektów czy komponentów.
  3. Zastosowanie:

    • Wzorzec architektoniczny
      Jest stosowany do organizacji całej aplikacji lub systemu, pomagając zdefiniować relacje między głównymi składnikami.

    • Wzorzec projektowy
      Jest stosowany do rozwiązania konkretnych problemów projektowych w ramach jednostkowych komponentów, klas czy obiektów.
  4. Skalowalność:

    • Wzorzec architektoniczny
      Dotyczy organizacji systemu na dużą skalę, pomagając zrozumieć strukturę systemu i relacje między jego głównymi komponentami.

    • Wzorzec projektowy
      Ma zastosowanie do konkretnego fragmentu kodu, pomagając w rozwiązaniu problemów projektowych w określonym kontekście.
  5. Przykłady:

    • Wzorzec architektoniczny
      Mikrousługi, Model-Widok-Kontroler (MVC), Architektura jednowarstwowa (Monolithic Architecture).

    • Wzorzec projektowy: Singleton, Obserwator, Fabryka, Strategia.

Podsumowując, wzorzec architektoniczny koncentruje się na organizacji ogólnej struktury systemu, podczas gdy wzorzec projektowy skupia się na rozwiązaniu konkretnych problemów związanych z projektowaniem komponentów w ramach tego systemu. Oba rodzaje wzorców są ważne w procesie projektowania oprogramowania i mogą być używane wspólnie w celu uzyskania spójnej i skalowalnej architektury.

wtorek, 1 lutego 2022

Python - podstawy

Python
Stworzony został w latach 90. przez Guido van Rossuma, nazwa zaś pochodzi od tytułu serialu komediowego emitowanego w BBC pt. “Latający cyrk Monty Pythona” ;)

Język programowania wysokiego poziomu ogólnego przeznaczenia, o rozbudowanym pakiecie bibliotek standardowych, którego ideą przewodnią jest czytelność i klarowność kodu źródłowego. Jego składnia cechuje się przejrzystością i zwięzłością. Jego składnia cechuje się przejrzystością i zwięzłością.

Python rozprowadzany jest na otwartej licencji umożliwiając także zastosowanie do zamkniętych komercyjnych projektów.

Python rozwijany jest jako projekt Open Source zarządzany przez Python Software Foundation, która jest organizacją non-profit. Standardową implementacja języka jest CPython (napisany w C), ale istnieją też inne, np. Jython (napisany w Javie), CLPython napisany w Common Lisp, IronPython (na platformę .NET) i PyPy (napisany w Pythonie, zob. bootstrap).

---------------------------------------------------------------------------------------------------------------------------
Kto używa Pythona?
Google, Yahoo, Nokia, IBM czy NASA wykorzystują Pythona w swoich wartych wiele milionów, czy też miliardów dolarów aplikacjach i projektach. Microsoft jak i Apple oferują pełne wsparcie dla Pythona w swoich systemach operacyjnych i platformach programistycznych. Wiele stron internetowych takich jak YouTube czy Grono napisane jest w Pythonie.

---------------------------------------------------------------------------------------------------------------------------
Gdzie działa Python?
Aplikacje napisane w Pythonie działają pod wieloma systemami takimi jak Windows, Linux/Unix, Mac OS X, OS/2, Amiga, czy smartphony Palma i Nokia. Dostępne są także implementacje Pythona w Javie (Jython) i .NET (IronPython) działające wszędzie tam, gdzie dostępne są te platformy. 

---------------------------------------------------------------------------------------------------------------------------
Do czego użyć?
Pythona można wykorzystać do tworzenia serwisów internetowych, aplikacji desktopowych działających na komputerach użytkowników, wliczając w to także gry. Można także wykorzystać Pythona w aplikacjach sieciowych, czy skryptach np. generujących zestawienia i raporty.

Tworzenie dynamicznych stron internetowych jest bardzo łatwe i efektywne dzięki bardzo dobrym frameworkom takim jak Django, Pylons, czy kombajnowi aplikacji Zope/Plone. Python znalazł zastosowanie przy efektywnym i szybkim tworzeniu nowoczesnych stron internetowych bogatych w funkcjonalności. Dzięki wszechstronnej kolekcji modułów i bibliotek serwisy "web 2.0" napisane w Pythonie mogą łatwiej oferować funkcjonalności znane np. z aplikacji desktopowych w porównaniu do np. PHP.

Usługi i serwisy społecznościowe to obecnie podstawa dla wielu serwisów www. Za pomocą Pythona bezproblemowo można wykorzystać API/usługi serwisów takich jak Twitter, Blip.pl, Facebook, aplikacji Google (Maps, Docs i innych przez GData), czy Google Wave. Przykładowo biblioteka PyFacebook pozwala w prosty sposób tworzyć aplikacje dla tego serwisu społecznościowego, a API Google Wave umożliwia tworzenie aplikacji dla tej platformy, czy integrowanie własnych stron i aplikacji z Wave.

Aplikacje desktopowe działające pod kluczowymi systemami operacyjnymi (MS Windows, OS X, Linux) można bez problemu pisać także w Pythonie za pomocą bibliotek takich jak PyQt4, PyGTK, wxPython, czy wbudowanej biblioteki tk. Za pomocą aplikacji py2exe można stworzyć gotowe aplikacje (exe) dla systemów MS Windows, a za pomocą py2app gotowe aplikacje dla OS X.

W zastosowaniach naukowych, czy finansowych skrypty i aplikacje Pythonowe przydają się tam gdzie potrzebne jest przetwarzanie danych i generowanie wykresów, zestawiań, plików PDF, arkuszy Excela, czy ODT/ODS. Za pomocą Reportlab wygenerujemy pliki PDF i sformatujemy wszelakie raporty w nim zawarte. Matplotlib oferuje generowanie wykresów różnego typu. Scipy oferuje implementacje różnych algorytmów do skomplikowanych obliczeń w Pythonie. PIL zapewnia obróbkę grafik (jak skalowanie, wyostrzanie, obracanie itd.), a xlwt i xlrt zapis i odczyt arkuszy Excela.

Gry i aplikacje wykorzystujące 3D też można stworzyć z wykorzystaniem Pythona. Częstym rozwiązaniem jest udostępnienie w Pythonie API silnika gry napisanego w C/C++. Takim przykładem jest np. Świątynia Pierwotnego Zła. W Pythonie mamy dostęp do kilku silników umożliwiających obsługę grafiki 3D, 2D i pozostałych komponentów potrzebnych do aplikacji tego typu - PyGame, PyCrystal (API na CrystalSpace), Python-Ogre (API na Ogre 3D), pyopengl (API na OpenGL).

---------------------------------------------------------------------------------------------------------------------------
Instalacja Pythona pod Windows
https://www.python.org/downloads/windows/

---------------------------------------------------------------------------------------------------------------------------
Narzędzie do edycji Pythona
Skrypty Pythona można zapisywać w dowolnym edytorze tekstu, ale oczywiście wygodniej jest używać programów, które potrafią przynajmniej odpowiednio podświetlać kod.

PyCharm to profesjonalne, komercyjne środowisko programistyczne dostępne za darmo do celów szkoleniowych. To IDE doskonale wspiera proces uczenia się. Udostępnia nawigację po kodzie, podpowiedzi, wykrywa błędy i ma wbudowanych wiele innych udogodnień.

Eclipse + pyDEV – chyba najlepsza opcja. Edytor Eclipse jest napisany w Javie i wymaga trochę pamięci, ale jest b. dobry. Posiada intuicyjny interfejs, mnóstwo pluginów dających spójne środowisko do pracy z javą, pythonem, ruby i php. pyDEV z zintegrowanym pakietem pyLint nie tylko podpowiada kod, ale także ma możliwość wyłapania nieużytej zmiennej, czy brak zgodności stylu programowania z zaleceniem PEP8 itp. Oczywiście jest też zintegrowany debugger.

---------------------------------------------------------------------------------------------------------------------------
Moduły
W Pythonie moduły są po prostu plikami z rozszerzeniem .py, w których zawarto pewien zestaw funkcji.


Instalacja modułu

Kiedy nie mamy zainstalowanego modułu mamy wówczas komunikat:

                ModuleNotFoundError: No module named 'numpy'

Aby zainstalować należy użyć PIP w wierszy poleceń wpisać:

                pip install numpy

Deinstalacja jest podobna.

Tworzenie modułu
Aby stworzyć moduł, wystarczy utworzyć nowy plik z rozszerzeniem .py i nazwą jaką chcesz nadać swojemu modułowi. Kiedy już skończysz edytować swój moduł, wystarczy, że go zaimportujesz za pomocą komendy 'import' (bez rozszerzenia .py).



Importowanie modułu

Moduły importujemy do swojego programu za pomocą komendy import.
Moduły mogą importować inne moduły. Zazwyczaj, wszystkie instrukcje import umieszczane są na początku modułu (lub skryptu). 


Import modułu:

# importowanie biblioteki
import urllib


Za pomocą funkcji dir możemy zobaczyć, jakie funkcje zostały umieszczone w dowolnym module:

>>> import urllib
>>> dir(urllib)
['ContentTooShortError', 'FancyURLopener', 'MAXFTPCACHE', [...] ]


Kiedy już znajdziemy funkcję, której chcemy użyć, możemy dowiedzieć się o niej więcej, używając help w interpreterze Pythona:

help(urllib.urlopen)

--------------------------------------------------------------------------------------------------------------------------- Pakiety
Pakiety są przestrzeniami nazw, które zawierają w sobie wiele modułów, a nawet innych pakietów. Są po prostu folderami, ale z pewnym znakiem szczególnym.

Każdy pakiet w Pythonie jest folderem, który musi zawierać specjalny plik nazwany '__init__.py'. 
Plik __init__.py są wymagane, aby zmusić Pythona do traktowania katalogów jako zawierające pakiety. Ten plik może być pusty i służy informowaniu, że ten folder zawiera pakiet Pythona. Dzięki temu może być importowany tak samo jak moduły. 

Jeśli utworzymy folder o nazwie foo, która jest tożsama nazwie pakietu, możemy w nim utworzyć moduł nazwany bar. Nie możemy zapomnieć także dodać pliku __init__.py wewnątrz folderu foo.

Aby używać modułu bar, możemy go zaimportować na dwa sposoby:

import foo.bar

albo:

from foo import bar

W pierwszym przypadku będziemy musieli używać przedrostka 'foo' za każdym razem, gdy będziemy chcieli posłużyć się funkcją oferowaną przez 'bar'. W drugim przypadku nie musimy, ponieważ, zaimportowaliśmy moduł do naszej przestrzeni nazw modułów.

---------------------------------------------------------------------------------------------------------------------------
Import

Istnieją trzy metody wywołania np. metody z pliku pakietu:
- Sposób 1

 import pakiet.folder_1.plik_1

a potem cały czas odnosząc się pełną ścieżką wywołać funkcje

pakiet.folder_1.plik_1.funkcja_1_pakietu()

- Sposób 2
from pakiet.folder_1.folder_2 import plik_2

a potem odnosząc się tylko to nazwy pliku wywołać funkcje

plik_2.funkcja_2_pakietu()

- Sposób 3
from pakiet.folder_1.folder_2.plik_3 import funkcja_3_pakietu 

importujemy bezpośrednio funkcje
funkcja_3_pakietu()

---------------------------------------------------------------------------------------------------------------------------
Nazywanie zmiennych

- Nazwy zmiennych w Pythonie mogą być dowolnie długie.
- Mogą zawierać zarówno małe, jak i duże litery alfabetu, tak łacińskiego, jak i polskiego.
- Takie same nazwy, ale napisane małymi bądź dużymi literami, oznaczają różne zmienne.
- Nazwy nie mogą zawierać spacji.
- Cyfry nie mogą rozpoczynać nazwy zmiennej.
- Znak podkreślenia może rozpoczynać nazwę zmiennej,
  UWAGA: w języku Python nazwy zaczynające się od "_" mają specjalne znaczenie.


Zmiennym nie można nadawać nazw zastrzeżonych dla instrukcji języka Python:

and       del       for       is        raise   
assert    elif      from      lambda    return  
break     else      global    not       try     
class     except    if        or        while   
continue  exec      import    pass      yield   
def       finally   in        print

---------------------------------------------------------------------------------------------------------------------------
Zmienne i typy
Python jest językiem obiektowym i każda zmienna w Pythonie jest obiektem.

Liczby (Numbers)
Napisy (String)
Typ logiczny (Bool)
Listy (List)
Krotki (Tuple)
Słowniki (Dictionary)

Liczby
Python obsługuje dwa typy liczbowe – liczby całkowite (ang. integers w skrócie int) i rzeczywiste (float). Obsługiwane są także liczby zespolone.

calkowita = 7
rzeczywista = 7.5
rzeczywista = float(38)

Możliwe jest "jednoczesne" przypisanie wartości kilku różnym zmiennym w tej samej linijce jak w przykładzie poniżej.

a, b = 3, 4

Napisy
Napis (string) jest inicjowany za pomocą pojedyńczego lub podwójnego cudzysłowu.

napis1 = 'witaj'
napis2 = "witaj"
napis 1 == napis2 # zwroci "True"
napis = "Nie martw sie o 'pojedyncze' cudzyslowy."

print "Nigdy nie czytalem 'Potopu'."   # Nigdy nie czytalem 'Potopu'.
# Ponizej jak umiescic " w tekscie
print "Nigdy nie czytalem \"Potopu\"." # Nigdy nie czytalem "Potopu".

Po komendzie print umieszczasz napis, który ma zostać wyświetlony.
Oprócz zwykłego tekstu będzie zawierał także specjalne symbole np. %s czy %d. Po cudzysłowie zamykającym napis umieszczasz znak %, a po nim zmienne lub wyrażenia odpowiadające użytym wcześniej symbolom. Zmienne muszą być umieszczone w nawiasach (), chyba że jest tylko jedna zmienna. Wtedy możesz je pominąć.

# To wypisze "Marek ma 23 lata."
imie = "Marek"
wiek = 23
print "%s ma %d lata." % (imie, wiek)


Poniżej znajduje się kilka podstawowych specyfikatorów, których znaczenie dobrze zapamiętać:

    %s – Napis (lub każdy inny obiekt, który ma reprezentację w formie napisu, np. liczba, tablica)
    %d – Liczby całkowite
    %f – Liczby rzeczywiste
    %.<ilość cyfr> – Liczba zmiennoprzecinkowa ze stałą liczbą cyfr po kropce.
    %x/%X – Liczby całkowite zapisane w systemie szesnastkowym (małe/duże litery)


Funkcja len() informuje nas z jak wielu znaków składa się napis.

napis = "AAA BBB ..."
print len(napis) # 11


Metoda index zwraca numer pierwszego znaku identycznego z tym podanym w nawiasie. Znaki numerowane są od lewej i od zera, tak samo jak tablicach.

napis = "abcdeabcde"
print napis.index("a") # 0
print napis.index("d") # 3


Ta metoda sprawdza ile razy w napisie pojawia się znak lub ciąg ujęty w cudzysłów.

napis = "abrakadabra"
print napis.count("a")  # 5
print napis.count("ab") # 2


Za pomocą nawiasów kwadratowych możemy uzyskać dostęp do pojedynczego znaku, jeśli znamy jego indeks.

napis = "abcdefghijk"
print napis[2] # c


W ten sposób możemy wypisać interesujący nas fragment napisu.

napis = "abcdefghijklmnop"
print napis[3:7] # defg

Jeśli przed dwukropkiem pozostawisz wolne miejsce, a po nim umieścisz jakąś liczbę, to otrzymasz fragment od początku do umieszczonego numeru. Jeśli usuniesz również drugą liczbę, to otrzymasz cały napis.

napis = "abcdefg"
print napis[0:4] # abcd
print napis[:4]  # abcd
print napis[::] # Wypisze caly napis
print napis[4:len(napis)] # efg
print napis[4:]           # efg


W nawiasach możesz umieścić nawet liczby ujemne. Dzięki temu znaki będą liczone od końca, a nie od początku. To oznacza, że -3 to trzeci znak od końca.

napis = "abcdef"
print napis[-1]    # f
print napis[-4:-2] # cd
print napis[-4:]   # cdef
print napis[:-2]   # abcd


Zamiana wszystkich małe litery w napisie na duże i odwrotnie.

napis = "Witaj"
print napis.upper() # WITAJ
print napis.lower() # witaj


Te fragmenty kodu służą do ustalenia, czy napis zaczyna się lub kończy od danego ciągu znaków.

napis = "Witaj Alu"
print napis.startswith("Witaj") # True
print napis.startswith("Czesc") # False
print napis.endswith("Alu")     # True
print napis.endswith("swiecie") # False


To rozbije napis na kilka napisów zebranych razem w tablicy.

napis = "Ala ma kota."
tablica_slow = napis.split(" ")
print tablica_slow # ['Ala', 'ma', 'kota']


Listy
Tablice w Pythonie również nazywane są listami.

tablica = []
tablica.append(1)
tablica.append(2)
tablica.append(3)
print tablica[0] # wypisze 1
print tablica[1] # wypisze 2
print tablica[2] # wypisze 3

# wypisze kolejno 1, 2, 3
for x in tablica:
    print x


Listy składane
Listy składane (ang. list comprehension) są potężnym narzędzie, które tworzy nową tablicę na podstawie innej tablicy.

Przykładowo powiedzmy, że potrzebujemy stworzyć nową tablicę liczb całkowitych, które określają długość każdego słowa

napis = 'Odwazny rudy lis przeskoczyl nad spiacym wilczurem'
slowa = napis.split()

dlugosc_slow = [len(slowo) for slowo in slowa]

print dlugosc_slow

 

Zbiory (tablica)
Zbiór (ang. set) to tablica, w których nie ma dwóch lub więcej identycznych elementów.

Instrukcja set() tworzy zbiór:

zbior = set("Jakiś tam przykładowy tekst")
{'p', 'ś', 'y', 'a', 'm', 'ł', ' ', 't', 'w', 'r', 'i', 'J', 'd', 'o', 'k', 'z', 'e', 's'}


Tworzenie zbioru z listy:

lista = ["dziesięć", "dziesięć", 9, 9, "jedenaście", (0, 0)]
zbior = set(lista)
{'dziesięć', 9, (0, 0), 'jedenaście'}



Łączenie dwóch zbiorów:

zbior1 = set("tekst")
zbior2 = set("tekst jakiś tam")
print(zbior1.union(zbior2))
lub
print(zbior1 | zbior2)
{'j', 's', 'm', 'ś', 'e', 'a', ' ', 'k', 't', 'i'}



Część wspólna dwóch zbiorów

zbior1 = set("tekst")
zbior2 = set("tekst jakiś tam")
print(zbior1.intersection(zbior2))
lub
print(zbior1 & zbior2)
{'k', 'e', 't', 's'}



Różnica dwóch zbiorów

zbior1 = set("tekst")
zbior2 = set("tekst jakiś tam")
print(zbior1.difference(zbior2))
print(zbior2.difference(zbior1))
lub
print(zbior1 - zbior2)
print(zbior2 - zbior1)
{'j', 'ś', 'a', ' ', 'm', 'i'}



Liczba elementów zbioru

zbior = set("jakiś tam tekst")
print(len(zbior))
lub
print(zbior.__len__())
{'ś', 'e', 'i', 's', 'a', 'j', 'k', 'm', 't', ' '}
10



Kopiowanie zbioru

zbior = set("jakiś tam tekst")
print(zbior)
zbior2 = zbior.copy()
print(zbior2)
{'ś', 'e', 'i', 's', 'a', 'j', 'k', 'm', 't', ' '}
{'ś', 'e', 'i', 's', 'a', 'j', 'k', 'm', 't', ' '}



Opróżnianie zbioru

zbior = set("jakiś tam tekst")
print(zbior)
zbior.clear()
print(zbior)
{'ś', 'e', 'i', 's', 'a', 'j', 'k', 'm', 't', ' '}
set()



Usuwanie pojedynczego elementu zbioru

zbior = set("jakiś tam tekst")
print(zbior)
zbior.remove("ś")
print(zbior)
{'ś', 'e', 'i', 's', 'a', 'j', 'k', 'm', 't', ' '}
{'e', 'i', 's', 'a', 'j', 'k', 'm', 't', ' '}


Metoda remove ma pewną wadę, a mianowicie taką, że gdy dany element nie istnieje w zbiorze generowany jest paskudny kod błędu. Dlatego też, gdy nie ma pewności, czy dany element istnieje w zbiorze lepiej użyć metody discard, która usuwa dany element, jeśli istnieje on w zbiorze

zbior = set("jakiś tam tekst")
print(zbior)
zbior.discard("ś")
zbior.discard("ś")
print(zbior)



Kolejną metodą, która zwraca i usuwa pierwszy element zbioru jest pop:

zbior = set("jakiś tam tekst")
print(zbior)
print(zbior.pop())
print(zbior)
{'ś', 'e', 'i', 's', 'a', 'j', 'k', 'm', 't', ' '}
ś
{'e', 'i', 's', 'a', 'j', 'k', 'm', 't', ' '}

Metoda pop zwraca błąd, jeżeli zbiór jest pusty.



Dodawanie pojedynczego elementu do zbioru

zbior = set("jakiś tam tekst")
print(zbior)
zbior.add("5")
print(zbior)
{'ś', 'e', 'i', 's', '5', 'a', 'j', 'k', 'm', 't', ' '}
{'ś', 'e', 'i', 's', 'a', 'j', 'k', 'm', 't', ' '}

---------------------------------------------------------------------------------------------------------------------------

Podstawowe operatory

Operatory logiczne
and – oznaczającego, że oba warunki muszą być prawdziwe
or – oznaczającego, że jednen z dwóch warunków musi być spełniony

imie = "Jan"
wiek = 23
if imie == "Jan" and wiek == 23:
    print "Nazywasz sie Jan i masz 23 lata."

if imie == "Jan" or imie == "Robert":
    print "Nazywasz sie Jan lub Robert"


Operator "in"

Za pomocą operatora "in" możesz sprawdzić, czy konkretny obiekt znajduje sie w tablicy lub innym obiekcie gromadzącym inne obiekty:

imie = "Robert"
if imie in ["Jan", "Robert"]:
    print "Nazywasz sie Jan lub Robert"

 
Operator "is"
W przeciwieństwie do ==, operator is nie sprawdza, czy zmienne mają taką samą wartość, ale czy wskazują na ten sam obszar w pamięci komputera.

x = [1,2,3]
y = [1,2,3]
print x == y # Wypisze True
print x is y # Wypisze False


Ponieważ tablica i tablica2 odnoszą się do tego samego obiektu, zmiana jednej oznacza zmianę drugiej:

tablica = [1, 2, 3]
tablica2 = ['a', 'b', tablica]
print tablica == tablica2[2] # True
print tablica is tablica2[2] # True


Operator "not"
Używając not przed wyrażeniem logicznym zmieniamy jego wartość na przeciwną:

print not False              # Wypisze True
print (not False) == (False) # Wypisze False

 ---------------------------------------------------------------------------------------------------------------------------

Instrukcje

Instrukcja warunkowa IF
if [...]: [...] elif: [...] else: [...]

if saldo < 0:
    print("Saldo poniżej 0, doladuj konto.")
elif saldo == 0:
    print("Saldo rowne 0, dodaj srodki.")
else:
    print("Saldo wynosi 0 lub wiecej.")


Pętla FOR

for [...] in [...]:

pierwsze = [2,3,5,7]
for pierwsza in pierwsze:
    print pierwsza

Pętla WHILE
while [...]:

licznik = 0
while licznik < 5:
    print licznik,
    licznik += 1 

---------------------------------------------------------------------------------------------------------------------------

Funkcje

Funkcje są definiowane z użyciem słowa kluczowego def, po którym umieszcza się nazwę funkcji, a potem nawiasy. Jeżeli funkcja nie wymaga informacji z zewnątrz nawiasy pozostawiamy puste.

def przywitanie():
    print "Pozdrowienia z mojej funckji!"

def przywitanie_imienne(imie, zyczenia):
    print "Witaj" + imie + ". Zycze Tobie " + zyczenia

Aby przerwać działanie funkcji i zwrócić wartość, musisz użyć słowa return, a za nim umieścić zwracaną wartość. Jeżeli pominiesz wartość, to funkcja tylko zakończy swoje działanie i nic nie zwróci.

def dzielenie(dzielna, dzielnik):
    if(dzielnik == 0):
        return # zakoncz funkcje nic nie zwracajac
    else:
        return dzielna / dzielnik

# brak argumentow i zwracanej wartosci
przywitanie()

# brak zwracanej wartosci, ale sa juz argumenty
przywitanie_imienne("Jacek", "zdrowia")

# jak przypisac zmiennej wartosc zwrocona przez funkcje
x = dzielenie(9, 3)


Funkcje o zmiennej liczbie argumentów
Możliwe jest również zdefiniowanie funkcji, która otrzymuje zmienną liczbę argumentów: 

def foo(pierwszy, drugi, trzeci, *reszta):
    print "Pierwszy: %s" % pierwszy
    print "Drugi: %s" % drugi
    print "Trzeci: %s" % trzeci
    print "I cala reszta... %s" % list(reszta)

Tak więc wywołanie foo(1,2,3,4,5) wypisze:

Pierwszy: 1
Drugi: 2
Trzeci: 3
I cala reszta... [4, 5]


Argumenty do funkcji można przesyłać także za pomocą słów-kluczy, dzięki czemu kolejność w jakiej zostały podane argumenty nie ma znaczenia:

def funkcja(pierwszy, drugi, trzeci, **opcje):
    if opcje.get("akcja") == "dodaj":
        print "Suma to: %d" % (pierwszy + drugi + trzeci)

    if opcje.get("zwroc") == "pierwszy":
        return pierwszy

wynik = funkcja(1, 2, 3, akcja = "dodaj", zwroc = "pierwszy")
print "Wynik: %d" % wynik

Otrzymamy:

Suma to: 6
Wynik: 1

 

Funkcje częściowe
Czasami w swoim programie wielokrotnie wywołujemy pewną funkcję z tymi samymi argumentami. Aby skrócić zapis w takich sytuacjach, stosujemy funkcje częściowe.

from functools import partial

def mnozenie(x, y):
    return x * y

podwojenie = partial(mnozenie, 2)

print podwojenie(6)  # 12
print podwojenie(11) # 22
print podwojenie(7)  # 14

 ---------------------------------------------------------------------------------------------------------------------------

Klasy i obiekty

Obiety są połączeniem zmiennych i funkcji w jedną strukturalną całość. Obiekty biorą swoje zmienne i funkcje z klas. Klasy są podstawowym schematem, według których tworzone są obiekty.

Poniżej znajduje się bardzo prosty przykład klasy:

 class MojaKlasa:
      zmienna = "blah"
      def moja_funkcja(self):
           print "To jest wiadomość wewnątrz klasy."


Użycie klasy:

mojobiekt = MojaKlasa()


Dostęp do zmiennych obiektu:

mojobiekt.zmienna

 
Dostęp do funkcji obiektu:

nazwa_obiektu.moja_funkcja()

---------------------------------------------------------------------------------------------------------------------------

Słownik

Słownik jest strukturą danych podobną do tablicy, ale pracuje się na nim w oparciu o klucze (zwane też hasłami), a nie indeksy. Klucze mogą być obiektem dowolnego typu (napisy, liczby, tablice itp.).

kontakty = {}
kontakty["Jan"] = 938477566
kontakty["Jacek"] = 938377264
kontakty["Janusz"] = 947662781

lub

kontakty = {
    "Jan" : 938477566,
    "Jacek" : 938377264,
    "Janusz" : 947662781
}


Przeszukiwanie słowników:

for imie, numer in kontakty.iteritems():
    print "%s ma numer telefonu: %d" % (imie, numer)

lub

for imie in kontakty:
    print "%s ma numer telefonu: %d" % (imie, kontakty[imie])


Usuwanie wartości:

del kontakty["Jan"]

lub

kontakty.pop("Jan")

--------------------------------------------------------------------------------------------------------------------------- 

Obsługa wyjątków

- Blok try pozwala przetestować a blok kodu dla błędów.
- Blok except pozwala obsłużyć błąd.
- Blok else pozwala wykonaj kod, gdy nie ma błędu.
- Blok finally pozwala wykonaj kod, niezależnie od wyniku bloków try- iexcept. 



Możemy użyć raise
aby zgłosić wyjątek, jeśli wystąpi warunek.

if x < 0:
  raise Exception("Sorry, no numbers below zero")



Asercja to kontrola poprawności, którą można włączyć lub wyłączyć po zakończeniu testowania program.
Gdy napotkamy instrukcję asercji, Python ocenia towarzyszące jej wyrażenie. Jeśli wyrażenie ma wartość false, Python zgłasza wyjątek AssertionError

 def KelvinToFahrenheit(Temperature):
   assert (Temperature >= 0),"Colder than absolute zero!"
   return ((Temperature-273)*1.8)+32

AssertionError: Colder than absolute zero!


Gdy wystąpi błąd lub wyjątek, jak go nazywamy, Python zwykle zatrzymuje się i wygenerować komunikat o błędzie.

try:
  ...
except:
  print("An exception occurred")



Możesz zdefiniować dowolną liczbę bloków wyjątków:

try:
    linux_interaction()
    with open('file.log') as file:
        read_data = file.read()
except FileNotFoundError as fnf_error:
    print(fnf_error)
except AssertionError as error:
    print(error)



W Pythonie, używając instrukcji else, możesz nakazać programowi wykonanie określonego bloku kodu w przypadku braku wyjątków.

try:
  print("Hello")
except:
  print("Something went wrong")
else:
  print("Nothing went wrong")



Kiedy musisz zaimplementować jakąś akcję, aby posprzątać po wykonaniu kodu python umożliwia to za pomocą klauzuli finally. 

try:
  print(x)
except:
  print("Something went wrong")
finally:
  print("The 'try except' is finished")



Pomijanie wyjątku (pass):

try:
    linux_interaction()
except:
    pass

---------------------------------------------------------------------------------------------------------------------------

Uruchamianie kodu

Sposób 1 - IDLE

Po zaintalowaniu pythona uruchom IDLE (Python [version] X-bit).
Otwórz plik pythona z kodem.
Wybierz z menu Run -> Run module


Sposób 2 - Wiersz poleceń (Command Prompt)

Otwórz wiersz poleceń i przejdź do foldera w którym jest plik pythona.
Wpisz :        [path]>python plik_python.py

 

---------------------------------------------------------------------------------------------------------------------------

Kursy Pythona

http://www.python.rk.edu.pl/w/p/podstawy/

https://www.learnpython.org/pl/

https://www.w3schools.com/python/default.asp

poniedziałek, 24 stycznia 2022

HTML 5

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. 
Znaczniki semantyczne
Znaczniki semantyczne są zasadniczo po prostu <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

Sekcje to odrębne tematycznie fragmenty treści na stronie. Można je porównać do rozdziałów w książce. Każda sekcja może mieć nagłówek (tytuł rozdziału) i stopkę (zawierającą informacje o autorze, prawach autorskich itp.).

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ższy schemat blokowy pomoże Ci zdecydować, jaki tak sekcji wybrać w zależności od przypadku użycia:
 

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>

Służy do definiowania nagłówków dla sekcji (ARTICLE, ASIDE NAV, SECTION), poprzez grupowanie tytułów nagłówkowych.
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>.

Ostrzeżenie: <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>

Definiuje główną treść strony. Nie powinien być zawarty w żadnym z tagów sekcji poza znacznikami strony <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>

Znacznik <summary> definiuje widoczny nagłówek elementu <details>. Nagłówek można kliknąć, aby wyświetlić/ukryć szczegóły.

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>

Tag określa listę predefiniowanych opcji dla elementu <input>.
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)

  • strong wskazuje, że jego treść ma duże znaczenie (jest to semantyczne w porównaniu z b).
    empodkreśla nacisk tekstu (użyj tego w przeciwieństwie do nie semantycznego i)

  • cite opisać odniesienie do cytowanej pracy i zawierać tytuł tej pracy.
    q wskazuje, że załączony tekst jest krótkim cytatem w tekście.
    blockquote wskazuje, że załączony tekst jest rozszerzonym cytatem (zwykle renderowanym wizualnie przez wcięcie)

  • dfn używany do wskazania terminu definiowanego w kontekście frazy definicyjnej lub zdania.
    abbr reprezentuje skrót lub akronim (opcjonalny atrybut „title” może stanowić rozwinięcie lub opis skrótu)

  • sub element indeksu dolnego.
    sup element indeksu górnego.

  • time używany do reprezentowania czasu lub czasu trwania

  • kbd reprezentuje zakres tekstu w wierszu oznaczający tekstowe dane wejściowe użytkownika z klawiatury, wprowadzania głosowego lub dowolnego innego urządzenia do wprowadzania tekstu

  • code wskazuje, że tekst jest krótkim fragmentem kodu komputerowego.
    samp reprezentuje przykładowe (lub cytowane) dane wyjściowe z programu komputerowego
    varreprezentuje nazwę zmiennej w wyrażeniu matematycznym lub kontekście programowania

  • del reprezentuje 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.
 
API geolokalizacji jest zbudowane wokół nowej własności globalnego obiektu navigator: navigator.geolocation.

Sposób wykorzystania:
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.codemag.com/article/1112051/Build-an-HTML5-Offline-Application-with-Application-Cache-Web-Storage-and-ASP.NET-MVC

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/ 

https://www.c-sharpcorner.com/UploadFile/65fc13/html5-file-api-reading-a-file-and-displaying-content/ 

---------------------------------------------------------------------------------------------------------------------   

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.

  1. Sprawdzenie czy globalny obiekt (np. window lub navigator) ma wybraną własność.
  2. Utworzenie elementu i sprawdzenie czy ma określoną własność.
  3. Utworzenie elementu i sprawdzenie czy ma określoną metodę, a następnie jej wywołanie i sprawdzenie, co zwróci.
  4. 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
- przechowuje dane bez daty ważności
- window.sessionStorage
- przechowuje dane na jedną sesję (dane są tracone po zamknięciu zakładki przeglądarki)

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

http://how2html.pl/ 

https://www.w3resource.com/html5/introduction.php

https://www.w3schools.com/tags/ 

http://shebang.pl/kursy/html5-rzeczowo/ 

https://stuyhsdesign.wordpress.com/html5/ 

http://shebang.pl/kursy/html5-rzeczowo/

http://how2html.pl/html-head-body/