Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
* HTML5 i CSS3 w nowoczesnych serwisach internetowych
HTML5 i CSS3 w nowoczesnych serwisach internetowych *
2
Plan prezentacji Wprowadzenie Semantyka HTML 5 Wydajność i integracja
Multimedia 3d, grafika, efekty CSS 3 Przechowywanie offline Dostęp do systemu plików urządzeń Łączność Podsumowanie
3
Wprowadzenie: Strony WWW kiedyś
4
Wprowadzenie: Strony przyszłości
5
Wprowadzenie: Strony przyszłości
6
Wprowadzenie: Strony przyszłości
7
Wprowadzenie: Strony przyszłości
8
Wprowadzenie: Strony WWW obecnie
HTML (the Hypertext Markup Language) CSS (Cascading Style Sheets ) Skrypty Po stronie serwera: np. PHP lub ASP Po stronie przeglądarki: np. Javascript Multimedia Zdjęcia, animacje, video i dźwięki
9
HTML 4 ? HTML 5 ? Wprowadzenie Szybki Bezpieczny Godny zaufania
Interaktywny Piękny HTML 4 ? Hmm… nie bardzo… HTML 5 ? Jak najbardziej tak !
10
Wprowadzenie: Historia:
1997 – HTML4 2001 – XHTML1.1 2005 – Web Application 1.0 Working Draft 2011 – HTML5 Working Draft 2012 – Czy HTML5 jest gotowy ? Sprawdź! Ewolucja a nie rewolucja
11
Wprowadzenie: Co to jest HTML5 ?
API JavaScript CSS3 Piąta odsłona HTML tworzenie serwisów i aplikacji które do tej pory były zarezerwowane tylko dla aplikacji desktopowych
12
Wprowadzenie: Dostępność
iPhone, iPady i telefony z Google Android już używają HTML 5
14
Semantyka: Redukcja znaczników
<applet> <big> <center> <font> <frame> <frameset> <strike> …
15
Semantyka: doctype <!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN„ " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN„ " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN„ " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN„ " <!DOCTYPE html>
16
Semantyka: nowe znaczniki
<header> <footer> <nav> <article> <section> <aside>
17
Semantyka: nowe znaczniki
18
Semantyka: formularze
<input type=„ ” > <input type=„text” autofocus> <input type=„url”> <input type=„tel”> <input type=„search”>
19
Semantyka: formularze
<input type=„range”> <input type=„number”> <input type=„date”> <input type=„color”> <p contenteditable>lorem ipsum</p>
20
Semantyka: formularze
21
Semantyka: <progress> i <meter>
23
Wydajność i integracja: Dlaczego tak ważne?
Microsoft twierdzi że spowolnienie ładowania strony o 2 sekundy zmniejsza liczbę kliknięć na tej stronie o 4% Amazon odkrył że 100ms więcej w trakcie ładowania strony to zmniejszenie sprzedaży o 1%
24
Wydajność i integracja: Technologie
„Wielowątkowy” JavaSctipt Web sockets Local storage CSS sprites Web fonts CSS3 tranzycje i animacje
26
Multimedia: Audio i Wideo
27
Multimedia: Kodeki
29
3d, grafika, efekty:
30
3d, grafika, efekty: canvas
Element języka HTML5 pozwalający tworzyć obrazki i animacje bezpośrednio w przeglądarce przy użyciu kodu JavaScript Wykresy i biblioteka RGraph
32
CSS 3: Rozszerzenia specyficzne dla dostawców
-webkit- :Safari, Google Chrome -moz-: Mozilla -o- : Opera p { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; }
33
CSS 3: Nowe selektory Pseudoklasy: :first-size :last-child :nth-child
:target <body> <p id=„pierwszy”> Lorem ipsum </p> </body> p:first-child { tont-size:1.2em; }
34
CSS 3: Nowe selektory
35
CSS 3: demo
36
CSS 3: nowe pseudoklasy Zapytania o: Rozdzielczość
Orientację (poziomą lub pionową) Szerokość i wysokość urządzenia Szerokość i wysokość okna przeglądarki @media
38
Przechowywanie offline
Użycie aplikacji offline Wydajność Prosty model programowania
39
Przechowywanie offline
„Web” i „offline” to dwie odrębne rzeczy ale nie dla HTML5! Web Storage Web SQL Database and IndexedDB File System Wszędzie gdzie brak jest Wi-Fi lub 3G Poprawa wydajności!
40
Przechowywanie offline
41
Przechowywanie offline
43
Dostęp do urządzeń
45
Łączność Aplikacje typu czat Szybsze gry Lepsza komunikacja
Web Sockets Server-Sent Events
46
Łączność: Geolokalizacja
47
Czy powinienem już korzystać z języka HTML5 ?
TAK ale….. z ostrożnością Uwaga na Internet Explorer 7 i wcześniejsze wersje HTML 5 jest wciąż rozwijany i zmieniany Kierować się zasadą „stopniowego usprawniania” i „wdzięcznej degradacji”
48
? Dziękuję za uwagę http://mariuszklec.pjwstk.edu.pl/
Prezentacja jest dostępna pod adresem:
Podobne prezentacje
