Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

* HTML5 i CSS3 w nowoczesnych serwisach internetowych

Podobne prezentacje


Prezentacja na temat: "* HTML5 i CSS3 w nowoczesnych serwisach internetowych"— Zapis prezentacji:

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

13

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„ "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN„ "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN„ "http://www.w3.org/TR/html4/frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN„ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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>

22

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

25

26 Multimedia: Audio i Wideo

27 Multimedia: Kodeki

28

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

31

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

37

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

42

43 Dostęp do urządzeń

44

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:


Pobierz ppt "* HTML5 i CSS3 w nowoczesnych serwisach internetowych"

Podobne prezentacje


Reklamy Google