rzegląd technologii 1/34 Przegląd technologii Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 29 marca 2015
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 http://daneden.github.io/animate.css/ 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)
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,...
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
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 http://caniuse.com/ 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ć.
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:
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 35-39 (wspierany w 79%) Chrome 31-44 (wspierany w 91%) Safari 7.1, 8 (wspierany w 79%) Opera 27-29 (wspierany w 93%) IE 10-11 (wspierany w 50%) Android Browser 4.4-4.4.4 (wspierany w 86%) Dane z http://caniuse.com/#search=html5
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
Projekt strony w XHTML 1.0/HTML 4.01 Przegląd technologii 9/34
Projekt strony w HTML 5 Przegląd technologii 10/34
Czy article może być złożone? Przegląd technologii 11/34
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.
Przegląd technologii 13/34 Jak definiować dokument HTML 5 XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en»... </html> HTML 5: <!DOCTYPE html> <html>... </html>
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? <!--[if lte IE 8]> <script src="html5.js"type="text/javascript"> </script> <![endif]-->
Przegląd technologii 15/34 Przykładowe elementy HTML5 canvas command details dialog embed figure mark output progress source video
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
Przegląd technologii 17/34 Wybrane elementy CSS3 word-break (Chrome, Opera wspiera częściowo) @font-face.ttf 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
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} - http://lesscss.org/ sass - http://sass-lang.com/ stylus - http://learnboost.github.io/stylus/
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).
rzegląd technologii 20/34 Niektóre cechy preprocesora Less Używanie zmiennych Less @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } CSS #header { color: #6c94be; }
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; }
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
Przegląd technologii 23/34 Niektóre cechy preprocesora Less Operacje @base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; Less pozwala na operacje na liczbach, kolorach, zmiennych. Rozpoznaje różnice między kolorami i jednostkami. @var: 1px + 5; Powyższy przykład zawiera wynik 6px;
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 liczbowe. @base: #f04615; @width: 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.
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 globalne. @var: red; #page { @var: white; #header { color: @var; // white } } Impotrowanie działa, tak jakby można tego oczekiwać. Można zaimportować plik *.less razem ze zmiennymi, które będą dostępne. @import "library"; // library.less @import "typo.css";
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