docHTML 5 — forms - Instytutu Informatyki UJ
download 
Reklamacja Transkrypt
HTML 5 — forms - Instytutu Informatyki UJ
Programowanie w Sieci Internet
— o HTML 5 i CSS 3.0 słów kilka
Kraków, 12 października 2012
mgr Piotr Rytko
Wydział Matematyki i Informatyki UJ
Plan zajęć
HTML5:
• struktura HTML5,
• nowe elementy HTML5,
• HTML forms,
• A/V (Audio i Video),
• Różne formaty plików A/V,
• Inne ciekawostki w HTML5.
CSS 3.0
• wzorce dopasowania elementów,
• selektory,
• reguły,
• deklaracje,
HTML 5 — Struktura
<!DOCTYPE html>
<!-- tyle wystarczy aby zacząć -->
<meta charset=utf-8> <!-- wreszcie całkowicie poprawne -->
<p>I możemy już zacząć pisać a po zamknięciu akapitu mamy całkowicie walidowalny
kod HTML5</p>
Powyższy kod wystarczy aby przeglądarka zgodna z HTML5 zbudowała naszą stronę.
<!DOCTYPE html>
<html lang=pl>
<!-- to zapewnia rozpoznanie języka strony -->
<head>
<meta charset=utf-8>
</head>
<body>
<p>A ten kod jest już pełny i zapewnia czytelność dla innych developerów</p>
</body>
</html>
HTML 5 — najważniejsze nowe tagi
W HTML5 mamy 30 nowych elementów semantycznych, które możemy użyć do
budowania statycznych stron. Kilka najważniejszych z nich:
• <header> do tworzenia nagłówków,
• <hgroup> do grupowania tytułów z podtytułami np.:
<hgroup><h1>...</h1><h2>...<h2></hgroup>
• <nav> menu / nawigacja po stronie,
• <article> treść (razem z nagłówkami i stopkami) pojedynczego wpisu / artykułu,
• <footer> dla umieszczania notek autorskich itp. stopek,
• <aside> można w nim pogrupować różne elementy i połączyć je tym samym w jeden
blok. Np. można wrzucić w jeden blok umieszczony z boku strony, nawigację i kanały
rss, tak aby je oddzielić od głównej sekcji strony,
• <time datetime=”2012-10-12 08:30:00.003+01:00”>początek tych ćwiczeń</time>
— element ten przekazuje czas/date w formacie zrozumiałym dla komputera.
Elementy te dają nam dużo nowych możliwości odpowiedniego stylowania strony
według naszych zachcianek.
HTML 5 — inne ciekawostki związane z tagami
• <wbr> mówi przeglądarce, że może łamać linię w tym miejscu jeśli ma ją gdzieś
łamać;
• <ruby> nie służy wcale do wstawiania kodu ruby na stronę ;], jest on jednak
używanay tak ja <rt> i <rp> do oznaczania odpowiednio sposobu czytania niektórych
języków;
• <figure> i <figcaption> używane do obudowania obrazów lub filmów wraz z
podpisem;
• <details> krok w kierunku zmniejszenia ilości kodu JS. wraz z <summary> element
ten tworzy rozwijalne okienko z dodatkowymi informacjami. Po kliknięciu na element
umieszczony w <summary> rozwija on resztę zawartości okienka;
• contenteditable daje możliwość edycji tego co znajduje się w danym elemencie.
Można także włączyć możliwość edycji całego dokumentu a nie poszczególnych
elementów poprzez atrybut designMode (ten nie jest boolem ‘true’/‘false’, a ‘on’/‘off’);
• w HTML 5 możemy nadać elementom atrybut draggable dla akcji drag-and-drop;
• <style scoped> mówi przeglądarce, że do ostylowania zawartych tu elementów ma
szukać definicji stylów w środku kodu HTML a nie tylko w dołączonych stylach w
sekcji <head>. Pozwala to na mocną lokalną stylizację.
HTML 5 — forms
Największą i najważniejszą zmianą w formularzach HTML 5 jest walidacja zawartości.
Ostrzeżenia generowane automatycznie przez przeglądarkę mogą być lokalizowane i
wyświetlane np. po chińsku używając odpowiedniego alfabetu.
• input type email — sprawdza czy wprowadzony adres jest w formacie adresu
mailowego. Ponadto atrybut multiple pozwala na wpisywanie wielu adresów
separowanych przecinkami. Niektóre przeglądarki mogą nawet wyświetlić listę
adresów z książki adresowej lub pamięci telefonu;
• input type date — wyświetla dla nas kalendarz do wyboru daty, nie trzeba już kodu js;
• input type number — niby tylko liczba, ale dzięki atrybutom min, max i step mamy
większą kontrolę nad wprowadzanymi danymi, a ponadto mamy kontrolki;
• input type range — podobnie jak wyżej, ale wyświetla slider kontrolujący wejście;
• search — niby pole tekstowe, ale można zdefiniować długość historii wyszukiwania;
• input type tel — przyjmuje różnego rodzaju formaty numerów tel., ale dodatkowo
może wywołać klawiaturę numeryczną lub kontakty na urządzeniu mobilnym;
• input type color — pozwala na wybranie koloru przy pomocy colorpicker’a.
HTML 5 — forms c.d.
Formularze w HTML 5 przyjmują kilka przydatnych atrybutów:
• placeholder — pozwala na umieszczenie informacji w polu tekstowym, która znika po
umieszczeniu w nim kursora;
• require — wymusza wypełnienie pola nim formularz będzie mógł być wysłany;
• multiple — pozwala na wybranie wielu adresów mailowych, lub wielu plików bez
użycia skryptów JS;
• pattern — pozwala specyfikować własne wzorce walidacji (przyjmuje wyrażenia
regularne);
• autocomplete — jak nazwa wskazuje;
• form — tak! atrybut ‘form’. Pozwala nam on rozrzucić elementy formularza w różnych
miejscach strony, nawet mieszając kolejnością z innymi formularzami. Wystarczy, że
podasz nazwę formularza do którego odnosi się dany element.
HTML 5 — A/V (Audio i Video)
<video src=movie.webm></video> tag pozwala na umieszczenie wideo wprost w
kodzie html. Rozszerzenie webm użyłem aby podkreślić format WebM-encoded plików.
<audio> działa podobnie jak <video>
Jednakże tak umieszczone wideo nie jest chronione przed pobraniem w żaden sposób,
więc jeśli przejmujecie się prawami DRM, to macie problem. Plik audio/wideo
umieszczony w ten sposób, można pobrać tak łatwo jak obrazek w tagu <img>.
autoplay — nie najlepszy pomysł na odtwarzanie tuż po załadowaniu strony, ale można,
controls — prosi przeglądarkę o wyświetlenie własnego panelu kontrolnego dla wideo
(w audio kontrolki są umieszczane automatycznie),
poster — obrazek który będzie wyświetlany przed startem odtwarzania (brak w audio),
muted — wycisza video automatycznie,
height, width — rozmiary, jeśli nie podane, to wyświetlany jest natywny rozmiar video,
rozmiar jest skalowany z zachowaniem aspect ratio (brak w audio),
loop — jak można się domyślić, zapętla odtwarzanie,
preload — zaczyna pobieranie pliku po otwarciu strony. Preload ma kilka metod
działania preload=none; preload=metadata; preload=auto;
HTML 5 — Różne formaty plików A/V
Niestety niema formatu który byłby obsługiwany przez wszystkie przeglądarki.
W <source> można umieścić różne formaty, do wyboru dla przeglądarki.
<video controls>
<source src=movie.mp4 type=‘video/mp4; codecs=”av1.42E01E, mp4a.40.2”’>
<source src=movie.webm type=‘video/webm; codecs=”vp8, vorbis”’>
<p>Sorry, twoja przeglądarka nie obsługuje html video</p>
</video>
FFmpeg library daje nam możliwość szybkiej konwersji plików video do formatu webm,
możemy to zrobić prostym poleceniem:
$ ffmpeg -i video.avi video.webm
<source src=hiResVideo.webm ... media=”(min-divace-width: 800px)”>
<source src=loResVideo.webm>
Dwie powyższe linie określają czy ma być załadowany plik w dużej rozdzielczości, jeśli
urządzenie obsługuje co najmniej 800px szerokości, lub małej rozdzielczości wpp.
HTML 5 — inne ciekawostki warte eksploracji
HTML 5 oferuje nam wiele więcej. Oto kilka ciekawostek, które warte są eksploracji we
własnym zakresie:
• canvas,
• data storage,
• offline,
• drag and drop,
• geolocaion,
• messages i workers,
• real time (WebSockets, Server-Sent Events),
• i wiele więcej.
CSS 3.0 — wzorce dopasowania elementów
#E — element o id E,
.E — element z klasą E,
E — element typu E,
E F — element F zagnieżdżony w elemencie E,
E > F — element F będący dzieckiem E,
E + F — element F występuje jako następny po elemencie E,
E ~ F — element F po elemencie E,
.E.F — element posiadający obie klasy E i F,
E[foo] — element E z atrybutem foo,
E[foo=bar] — element E z atrybutem foo o wartości bar,
E[foo~=bar] — wartości atrybutu foo oddzielone spacjami, jedna z nich ma wartość bar,
E[foo^=bar] — wartość atrybutu foo zaczyna się od ciągu bar,
E[foo$=bar] — wartość atrybutu foo kończący się ciągiem bar,
E[foo*=bar] — wartość atrybutu foo zawiera podciąg bar.
CSS 3.0 — selektory
E:root — element przypięty bezpośrednio do roota dokumentu,
E:nth-child(n) — n-te dziecko elementu E,
E:nth-last-child(n) — n-te, licząc od końca, dziecko elementu E,
E:nth-of-type(n) — n-ty element typu E,
E:empty — pusty element nie zawierający nawet tekstu,
E:lang(pl) — element E wyświetlany na stronie w języku polskim (<html lang=pl>),
E:enabled — element E aktywny na stronie,
E:disabled — element E nieaktywny na stronie,
E:checked — element E zaznaczony,
E:first-line — pierwsza linia w elemencie E,
E:first-letter — pierwsza litera w elemencie E,
E::before — generowany element przed elementem E,
E::after — element generowany po elemencie E,
E:not(s) — element niepasujący do selektora s,
CSS 3.0 — reguły
@charset utf-8 — na samym początku pliku stylów, mówi przeglądarce, że ma ona
czytać plik jako plik o kodowaniu znaków utf-8,
@media screen, print { ... } — określa jakiego typu urządzenia lub aplikacje będą
stylowane przy użyciu reguł wymienionych w tym bloku (np. screen - monitor
komputera, handheld - urządzenia mobilne itp.),
@import url(‘...’); — określa z jakiego pliku mają być czytane dalsze deklaracje css,
@font-face { ... } — pozwala na podanie przeglądarce dostępu do czcionek, których
klient nie ma zainstalowanych w swoim systemie.
CSS 3.0 — deklaracje
float: left; — element przyklejony do lewej strony i pozwalający innym elementom
opływać się z prawej,
clear: both; — element jest przenoszony pod wszelkie elementy z atrybutem float, z
obu stron,
counter-increment: CounterName; — zwieksza wartość countera o 1 (domyślnie),
counter-reset: CounterName; — resetuje wartość counera o nazwie CounterName,
direction: left; — nadaje kierunek pisania tekstu,
list-style-image: url(‘...’); —
quotes: "«" "»" "'" "'"; — określa rodzaje cudzysłowów zagnieżdżonych,
border-image: url(border.png) 30 30 round; — ramka z obrazka o grubości 30px,
powtarzająca grafikę co 30 px.
Niektóre przeglądarki wymagają przedrostków dla atrybutów jak:
-moz- — dla mozilli,
-webkit- — dla przeglądarek korzystających z webkitu,
-o- — dla opery.
CSS 3.0 — transformacje
Transformacje w CSS 3.0 pozwalają na manipulacje obiektami na kilka różnych
sposobów. Dodatkowo do transformacji 2D dostajemy także transformacje w 3D.
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
To obroty obiektu dla różnych przeglądarek.
translate() — pozwala na przesunięcie elementu o pewne współrzędne,
scale() — skaluje element,
skew() — przekształcenie nożycowe elementu,
matrix() — pozwala na mieszanie wszystkich tych transformacji w jednej macierzy,
transform: rotateY(30deg) rotateX(30deg); — obroty w przestrzeni 3D,
Dziękuję za uwagę!
