Programowanie w Sieci Internet o HTML 5 i CSS 3.0 słów kilka. Kraków, 17 października 2014 mgr Piotr Rytko Wydział Matematyki i Informatyki UJ

Transkrypt

1

2 Programowanie w Sieci Internet o HTML 5 i CSS 3.0 słów kilka Kraków, 17 października 2014 mgr Piotr Rytko Wydział Matematyki i Informatyki UJ

3 Plan zajęć HTML5: struktura HTML5, 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,

4 HTML 5 Struktura <!DOCTYPE html>  <meta charset=utf-8>  <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>  <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>

5 HTML 5 najważniejsze nowe tagi Kilka wybranych elementów semantycznych z HTML 5: <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= :00: :00 >Początek roku akademickiego</ 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.

6 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ę.

7 HTML 5 forms Formularze w HTML 5 umożliwiają walidację zawartości bez kodu java scriptu, a ostrzeżenia generowane automatycznie przez przeglądarkę mogą być lokalizowane i wyświetlane np. po chińsku używając odpowiedniego alfabetu. input type 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.

8 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.

9 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;

10 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.

11 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.

12 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.

13 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,

14 CSS 3.0 utf-8 na samym początku pliku stylów, mówi przeglądarce, że ma ona czytać plik jako plik o kodowaniu znaków 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 url(... ); określa z jakiego pliku mają być czytane dalsze deklaracje {... } pozwala na podanie przeglądarce dostępu do czcionek, których klient nie ma zainstalowanych w swoim systemie.

15 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) 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.

16 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,

17 Dziękuję za uwagę!