Przegląd technologii

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "Przegląd technologii"

Włodzimierz Wojciech Mikołajczyk
10 lat temu
Przeglądów:

1 rzegląd technologii 1/34 Przegląd technologii Tworzenie serwisów Web 2.0 dr inż. Robert Perliński Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 29 marca 2015

2 Przegląd technologii 2/34 Pregląd technologii Web 2.0 HTML, dzisiaj HTML5 i jego serializacja do XML a (XHTML5) CSS3 z wieloma możliwościami, np. udostępnianie animacji Preprocesory CSS (LESS, SASS/SCSS, STYLUS,...) Responsieve Design JavaScript i AJAX jquery - chodź już dzisiaj odchodzi się od tej biblioteki SPA - Single Page Application (większość logiki jest w JavaScript, modele danych w JSON) JavaScript Frameworks (niektóre to: AngularJS, Ember, React (Facebook), NODE.JS) JavaScript na serwerach - NODE.JS (protokół http ale dane przesyłane przez JSON)

..) Responsieve Design JavaScript i AJAX jquery - chodź już dzisiaj odchodzi się od tej biblioteki SPA - Single Page Application (większość logiki

3 Przegląd technologii 3/34 HTML5 alternatywa dla XHTML 2 kompatybilność wsteczna dodanie nowych elementów nowe typy wejściowe nowe atrybuty elementów formularzy brak elementów prezentacyjnych rozbudowane API: video, audio, drag and drop,...

wejściowe nowe atrybuty elementów formularzy brak elementów

Przegląd technologii 4/34 CSS3 na chwilę obecną wspierany w większości przez większość przeglądarek (CanIUse CSS3) czasem wymaga stosowania specjalnych

4 Przegląd technologii 4/34 CSS3 na chwilę obecną wspierany w większości przez większość przeglądarek (CanIUse CSS3) czasem wymaga stosowania specjalnych prefiksów firefox moz Chrome webkit Safari webkit Opera o IE ms zapewniona wsteczna kompatybilność pierwszy ze standardów CSS podzielony na moduły już powstaje css4

prefiksów firefox moz Chrome webkit Safari webkit Opera o IE ms zapewniona

5 Przegląd technologii 5/34 Dostępność HTML5 i CSS3 - Can I Use Dostępność najnowszych technologii dotyczących wyglądu stron interetowych i funkcjonowania front-end u (HTML5, CSS3, SVG, JS API) ale nie tylko, można sprawdzić na stronie Can I use dostarcza aktualne informacje o wspieraniu najnowszych technologii webowych dotyczących front-endu na komputerach stacjonarnych czy przeglądarkach urządzeń mobilnych. Dane są dostępne w postaci tabel. Jest możliwość wyboru kraju, kontynentu, określonej przeglądarki, dla której wspieranie wybranych technologii chcemy sprawdzić.

com/ Can I use dostarcza aktualne informacje o wspieraniu najnowszych technologii webowych dotyczących front-endu na komputerach stacjonarnych czy

6 Przegląd technologii 6/34 Dostępność HTML5 i CSS3 - Can I Use Przykład sprawdzenia dostępności znacznika nav w Can I Use:

7 Przegląd technologii 7/34 Dostępność HTML5 W chwili obecnej HTML 5 jest wspierany (częściowo, choć w różnym stopniu) przez większość dostępnych na rynku przeglądarek internetowych: Firefox (wspierany w 79%) Chrome (wspierany w 91%) Safari 7.1, 8 (wspierany w 79%) Opera (wspierany w 93%) IE (wspierany w 50%) Android Browser (wspierany w 86%) Dane z

(wspierany w 79%) Chrome 31-44 (wspierany w 91%) Safari 7.

8 HTML 5 Nowości W HTML5 wprowadzono nowe elementy semantyczne pozwalające na definiowanie różnych części strony internetowej: article aside details figcaption figure footer header main mark nav section summary time Przegląd technologii 8/34

strony internetowej: article aside details figcaption

9 Projekt strony w XHTML 1.0/HTML 4.01 Przegląd technologii 9/34

10 Projekt strony w HTML 5 Przegląd technologii 10/34

11 Czy article może być złożone? Przegląd technologii 11/34

12 Przegląd technologii 12/34 Czym jest section? Element section określa ogólną sekcję strony, nie jest natomiast kontenerem. Jeżeli jest wymagany kontener należy wykorzystać div. Element ten zgodnie z tworzonym standardem ma określać ogólny zarys strony. Zalecane jest tworzenie sekcji w sytuacjach, kiedy naturalne wydaje się użycie nagłówka najwyższego stopnia. Nowe roboty internetowe kładą znaczący nacisk na sekcje.

Jeżeli jest wymagany kontener należy wykorzystać div.

13 Przegląd technologii 13/34 Jak definiować dokument HTML 5 XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" lang="en»... </html> HTML 5: <!DOCTYPE html> <html>... </html>

org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.

14 Przegląd technologii 14/34 Jak uruchomić HTML5 w IE 8, 7, 6? IE 8 ma na dzień dzisiejszy blisko 3% udziału w rynku. IE 7 i IE 6 mnej niż 0.25%. Korzystamy z dziury... W przypadku przeglądarek IE istnieje możliwość utworzenia własnych elementów składni HTML z zastosowaniem javascript. document.createelement( header ); Jak włączyć tylko w IE?

.. W przypadku przeglądarek IE istnieje możliwość utworzenia własnych elementów składni HTML z

15 Przegląd technologii 15/34 Przykładowe elementy HTML5 canvas command details dialog embed figure mark output progress source video

16 Wybrane elementy CSS3 W CSS 3 możliwe jest przypisanie kilku obrazów dla elementu. Wybrane elementy CSS3: border-radius box-shadow border-image (w IE wspierany dopiero w wersji 11) background-size (CSS2 nie ma możliwości zmiany rozmiaru) background-origin content-box padding-box border-box background-clip (określa obszar wypełnienia) text-shadow (w IE wspierany od wersji 10) word-wrap text-justify text-overflow Przegląd technologii 16/34

background-size (CSS2 nie ma możliwości zmiany rozmiaru) background-origin content-box padding-box border-box

17 Przegląd technologii 17/34 Wybrane elementy CSS3 word-break (Chrome, Opera wspiera i.otf, IE w wersji 8 tylko.eot transform (w IE dopiero od wersji 9) rotate translate scale skew matrix transition (IE wspiera od wersji 10) obsługa animimacji obsługa kolumn możliwość rozszerzania elementów

eot transform (w IE dopiero od wersji 9) rotate translate scale skew matrix

18 Przegląd technologii 18/34 Preprocesory CSS Preprocesory CSS to narzędzia, które pozwalają pisać kod CSS z wykorzystaniem dodatkowych możliwości. Każda poprawna składnia CSS jest interpretowana przez preprocesory. Oprócz tego można posłużyć się wieloma dodatkowymi poleceniami, które w czystym CSS nie będą już poprawne. Bardziej znane preprocesory: {less} - sass - stylus -

Oprócz tego można posłużyć się wieloma dodatkowymi poleceniami, które w czystym CSS nie będą już poprawne.

19 Przegląd technologii 19/34 Preprocesory CSS - zasada działania Jak działają preprocesory CSS Tworzy się plik dla preprocesora z odpowiednim rozszerzeniem, np. *.less czy *.scss. W takim pliku tworzy się kod CSS korzystając z dodatkowych możliwości preprocesora którego używamy. Aby uzyskać wynikowy plik *.css należ skompilować plik w którym prcujemy (*less, *.scss,...). Wynikowy plik *.css dodajemy do strony aby był interpretowany przez przeglądarkę. Istnieje możliwość prostej automatyzacji procesu kompilacji do plików *.css i ich podmiany w odpowiednim miejscu. Automatyczna kompilacja i podmiana pliku jest wykonywana po każdorazowym zapisie pliku źródłowego (*.less, *.scss).

css należ skompilować plik w którym prcujemy (*less, *.scss,...). Wynikowy plik *.css dodajemy do strony aby był interpretowany przez przeglądarkę.

20 rzegląd technologii 20/34 Niektóre cechy preprocesora Less Używanie zmiennych #5B83AD; + #111; #header { } CSS #header { color: #6c94be; }

@nice-blue: #5B83AD; @light-blue: @nice-blue +

21 Przegląd technologii 21/34 Niektóre cechy preprocesora Less Zagnieżdżanie struktur Zagnieżdżanie struktur pozwala na czytelniejsze i bardzej odpowiadające układowi znaczników HTML określanie wyglądu niż kaskadowy opis w samym pliku CSS. Less #header { color: black;.navigation { font-size: 12px; }.logo { width: 300px; } } CSS #header { color: black; } #header.navigation { font-size: 12px; } #header.logo { width: 300px; }

22 Przegląd technologii 22/34 Inne preprocesory - SASS Zagnieżdżanie, pomijanie niektórych elementów CSS W niektórych preprocesocha, np. SASS czy STYLUS można pomijać klamry, średniki czy nawet dwukropki. nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none

23 Przegląd technologii 23/34 Niektóre cechy preprocesora Less 5%; color: #888 / 4; + #111; height: 100% / 2 Less pozwala na operacje na liczbach, kolorach, zmiennych. Rozpoznaje różnice między kolorami i 1px + 5; Powyższy przykład zawiera wynik 6px;

24 rzegląd technologii 24/34 Niektóre cechy preprocesora Less Wykorzystanie funkcji Less pozwala na wykorzystanie różnorodnych funkcji, które zmieniają kolory, manipulują napisami, przeliczają dane 0.5;.class { width: percentage(@width); // returns 50% color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); } Powyżej mamy konwersję wartości 0.5 do 50%, zwiększają nasycenie koloru bazowego o 5%, a także rozjaśniają kolor tła o 25% względem bazowego i przesuwają odcień o 8 stopni.

25 Przegląd technologii 25/34 Niektóre cechy preprocesora Less Zasięg zmiennych i importowanie Zasięg zmiennych działa bardzo podobnie jak ma to miejsce w językach programowania - najpierw są poszukiwane zmienne lokalne, a jak takie nie zostaną znalezione, to są poszukiwane zmienne red; #page white; #header { // white } } Impotrowanie działa, tak jakby można tego oczekiwać. Można zaimportować plik *.less razem ze zmiennymi, które będą "library"; // "typo.css";

26 Przegląd technologii 26/34 Źródła W wykładzie wykorzystano informacje dostępne w internecie: Wprowadzenie do preprocesorów CSS Strona preprocesora stylus Strona preprocesora Less Wikipedia: Framework Angular, Backbone czy Ember? Czyli jak wybrać framework JavaScript

Podobne dokumenty

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 4 HTML 5 i CSS 3.0 Agenda Co nowego w HTML 5? Nowe elementy HTML 5 Nowe elementy w formularzach HTML