Systemy internetowe HTML + CSS - dodatki

Transkrypt

1 Systemy internetowe HTML + CSS - dodatki West Pomeranian University of Technology, Szczecin; Faculty of Computer Science

2 HTML 5

3 <SECTION> Sekcja to tematyczna grupa treści (dane kontaktowe, materiały dydaktyczne, ogłoszenia, publikacje). Treść sekcji może być dodatkowo podzielona na podsekcje (zagnieżdżanie <SECTION>). Znacznik <SECTION> niesie znaczenie semantyczne! <ARTICLE>, <ASIDE> i <NAV> - szczegółowy opis treści.

4 <ARTICLE> Reprezentuje samodzielną część dokumentu, która potencjalnie mogłaby być opublikowana niezależnie od pozostałej treści strony. W pojedynczym dokumencie może być wiele wielopoziomowo zagnieżdżonych elementów ARTICLE. Artykuł może również zawierać wewnętrzne sekcje.

5 <ASIDE> i <NAV> <ASIDE> - reprezentuje sekcję strony, która jest tylko nieznacznie powiązana tematycznie z treścią elementu, w którym się znajduje. Typowe przeznaczenie: bannery reklamowe, grupy linków nawigacyjnych. <ASIDE> - nie do oznaczania przypisów do głównego tekstu! <NAV> reprezentuje sekcję strony, która zawiera podstawowe menu nawigacyjne. <NAV> - nie przy linkach umieszczonych w treści strony!

6 Nagłówki i stopka sekcji <SECTION>, <ARTICLE>, <ASIDE> i <NAV> fizycznie tworzą sekcje. Każda sekcja może mieć nagłówek - znaczniki <H1> <H6> oraz stopkę - znacznik <FOOTER>. 1 sekcja max 1 nagłówek Wstawienie znacznika nagłówka automatycznie tworzy nową sekcję lub podsekcję!

7 <nav id= nawigacja > </nav> <section id= obiad > <section id= zupa > <article id= pomidorowa > Podajemy przepis na najlepszą zupę pomidorową <aside id= pomidory > Najlepsze pomidory są z własnego ogródka </aside> </article> </section> <section id= drugie danie > Tu będą przepisy na drugie dania </section> </section>

8 <section id="obiad"> <h1> Obiad </h1> <section id="zupa"> <h2> Zupa </h2> <article id= pomidorowa > <h5> Pomidorowa </h5> Podajemy przepis na najlepszą zupę pomidorową <aside id= pomidory > Najlepsze pomidory </aside> </article> </section> <section id= drugie danie > <h2> Drugie danie </h2> </section> </section> Tu będą przepisy na drugie dania

9 <h1> Obiad </h1> <h2> Zupa </h2> <article id= pomidorowa > <h5> Pomidorowa </h5> Podajemy przepis na najlepszą zupę pomidorową <aside id= pomidory > Najlepsze pomidory </aside> </article> <h2> Drugie danie </h2> Tu będą przepisy na drugie dania

10 <FOOTER> Przechowuje informacje na temat sekcji - np.: autor, linki do powiązanych dokumentów, prawa autorskie itp. Może zawierać znaczniki innych sekcji. <section id= pierwsza > <h1> Pierwsza sekcja </h1> Treść sekcji <footer> Podpisy <footer> </section>

11 <HEADER> Służy do objęcia treści będących wprowadzeniem do zawartości całej strony. Znacznik-kontener (logo, wyszukiwarkę, spis treści). Może występować wielokrotnie w jednym dokumencie, Nie w: <FOOTER>, <ADDRESS>; bez zagnieżdżania Nie tworzy nowej sekcji.

12 Znaczniki grupujące - <MAIN> Służy do oznaczenia głównej treści danego dokumentu Wyszukiwarki i czytniki ekranowe! Nie należy nim obejmować stałych elementów, które powtarzają się w całym serwisie. W pojedynczym dokumencie nie można umieścić więcej niż jednego elementu <MAIN>. Nie może być umieszczony wewnątrz znaczników <ARTICLE>, <ASIDE>, <NAV>, <SECTION> oraz <HEADER>

13 <FIGURE> Definiuje kontener, w którym możemy umieścić zbiór dowolnych elementów. <ASIDE>, a <FIGURE> FIGCAPTION - tytuł kontenera. <figure> </figure> <h2> Rysunki poniżej </h2> <img src="frog1.jpg" width="150" height="200"> </img> <img src="frog2.jpg" width="150" height="200"> </img> <figcaption> 1. Dwa rysunki </figcaption>

14 <VIDEO> i <AUDIO> (1) Dodają do strony standardowe kontrolki odtwarzania plików video oraz audio. Atrybuty pozwalające na sterowanie wyglądem i zachowaniem odtwarzacza (autoplay, loop, muted, controls). Znaczniki <SOURCE> i <TRACK>

15 <VIDEO> i <AUDIO> (2) <video controls='on' width='200' height='200'> <source src='burz.mp4' type='video/mp4' > </video> <audio controls='on'> <source src='lord.mp3 type='audio/mpeg' > </audio>

16 <VIDEO> i <AUDIO> (1) Nie wszystkie przeglądarki są w stanie obsłużyć wszystkie formaty plików muzycznych i filmowych! <audio> <source src="plik.mp3" type='audio/mpeg > <source src="plik.ogg" type='audio/ogg'> </audio> <video controls='on' width='200' height='200 > <source src="plik.mp4" type='video/mp4; codecs="avc1.42e01e, mp4a.40.2" > <source src="plik.ogv" type='video/ogg; codecs="theora, vorbis" '> </video>

17 <EMBED> i <CANVAS> <EMBED> - definiuje kontener dla zewnętrznych aplikacji <embed src= animacja.swf > <CANVAS> - jest używany do renderowania dynamicznej grafiki rastrowej w czasie wyświetlania strony (kontener na grafikę). <canvas id= obrazek" width="200 height="100"></canvas>

18 <CANVAS> <canvas id="kwadraty" width="210" height="100" style="border:1px solid #d3d3d3;"> </canvas> <script> var example = document.getelementbyid('kwadraty ); var context = example.getcontext('2d ); context.fillstyle = "rgb(255,0,0)"; context.fillrect(30, 30, 50, 50); context.fillstyle = "rgb(0,255,0)"; context.fillrect(80, 30, 50, 50); context.fillstyle = "rgb(0,0,255)"; context.fillrect(130, 30, 50, 50); </script>

19 <INPUT> - nowe typy kontrolek color search tel url date datetime datetime-local week month time numer range Nie wszystkie typy są obsługiwane przez wszystkie przeglądarki!!!

20 Responsive Web Design

21 Responsive Web design Strony responsywne to strony, które same dostosowują się do urządzenia, na którym są przeglądane. Dlaczego należy budować strony responsywne? brak konieczności aktualizacji treści w kilku różnych miejscach, brak konieczności samodzielnego wykrywania parametrów urządzenia, na którym ma zostać wyświetlona strona.

22 Meta-znacznik viewport <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Zadanie: dostosowanie szerokości strony bez jednoczesnego skalowania: width domyślna szerokość strony, device-width - dostosowanie do szerokości wyświetlacza, initial-scale=1 bez skalowania.

23 Szablon strony W zależności od wykrytych rozdzielczości, wczytywane są różne arkusze stylów, albo jedynie różne reguły. Elementy są: przesuwane względem siebie, eliminowane bądź wstawiane do treści strony. Strona responsywna = kilka szablonów. Szablon dla rozdzielczości wysokich i średnich wielo(jedno)kolumnowy najniższych jednokolumnowy

24 Media querries (1) Media querries mogą być używane do zróżnicowania stylu w zależności od: wysokości i szerokości dostępnego okna przeglądarki, wysokości i szerokości urządzenia, orientacji urządzenia (poziomej lub pionowej), rozdzielczości.

25 Media querries not only media_type and (media_feature and or not media_feature) { reguły CSS; } Typy mediów: all, print, screen, speech. Cechy mediów, np.: max-width, min-width, max-resolution (w dpi lub dpcm), min-resolution, orientation,..

26 Przykład 5 bloków wewnętrznych (1) <div id="zew"> <div id='naglowek'> Naglowek </div> <div id='menu'> Menu</div> <div id='tresc'> Tresc </div> <div id='dodatki'> Dodatki </div> <div id='stopka'> Stopka </div> </div> Dwie reguły: > 400px wszystkie bloki w układzie: 1:3:1 <400px 4 bloki (bez dodatki ) w jednej kolumnie

27 div {display:block; text-align:center; width:100%} body {margin:0 0; padding:0 only screen and (min-width: 400px) { div#naglowek {width:100%; background-color:lightblue} div#menu {width:25%; float:left; background-color: lightgrey} div#tresc {width:50%;float:left; background-color: lightyellow} div#dodatki {width:25%; float:left; background-color: lightgrey} div#stopka {width:100%; clear:both; background-color:lightblue} only screen and (max-width: 400px) { div#naglowek {background-color:lightblue} div#menu {background-color: lightgrey} div#tresc {background-color: lightblue} div#dodatki {display:none;} div#stopka {background-color:lightgrey} }

28 Przykład 5 bloków wewnętrznych only screen and (min-width: only screen and (max-width: 400px)

29 Atrybut media znacznika link Pozwala zdefiniować odrębne arkusze stylów dla różnych typów i cech mediów. <link rel="stylesheet" href= wspólny.css > <link rel="stylesheet" href="szeroki_ekran.css media= screen and (min-width: 900px)" > <link rel="stylesheet" href="waski_ekran.css" media="screen and (max-width: 600px)" >

30 Preprocesory i frameworki SASS/LESS: dają możliwość programowania w arkuszach stylów (zmienne, pętle, operatory matematyczne, pseudofunkcje: mixiny). przeglądarki nie rozumieją kodu SASS/LESS kod musi zostać przekonwertowany do czystego CSS (konsola lub aplikacja np. Koala, Ghostlab) edytory np. Atom, Brackets BOOTSTRAP gotowe elementy HTML, CSS (LESS), JavaScript

31 Dziękuję za uwagę West Pomeranian University of Technology, Szczecin; Faculty of Computer Science