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

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

6

7

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 Wprowadzenie Szybki Szybki Bezpieczny Bezpieczny Godny zaufania Godny zaufania Interaktywny Interaktywny Piękny Piękny

10 Wprowadzenie: Historia: 1997 – HTML – HTML – XHTML – XHTML – Web Application 1.0 Working Draft 2005 – Web Application 1.0 Working Draft 2011 – HTML5 Working Draft 2011 – HTML5 Working Draft 2012 – Czy HTML5 jest gotowy ? Sprawdź! 2012 – Czy HTML5 jest gotowy ? Sprawdź!Sprawdź!

11 Wprowadzenie: Co to jest HTML5 ? tworzenie serwisów i aplikacji które do tej pory były zarezerwowane tylko dla aplikacji desktopowych API JavaScript CSS3 Piąta odsłona HTML

12 Wprowadzenie: Dostępność iPhone, iPady i telefony z Google Android już używają HTML 5

13

14 Semantyka: Redukcja znaczników …

15 Semantyka: doctype

16 Semantyka: nowe znaczniki

17 Semantyka: nowe znaczniki

18 Semantyka: formularze

19 Semantyka: formularze lorem ipsum lorem ipsum

20 Semantyka: formularze

21 Semantyka: i Semantyka: i

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% 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% Amazon odkrył że 100ms więcej w trakcie ładowania strony to zmniejszenie sprzedaży o 1%

24 Wydajność i integracja: Technologie Wielowątkowy JavaSctipt Wielowątkowy JavaSctipt Web sockets Web sockets Local storage Local storage CSS sprites CSS sprites Web fonts Web fonts CSS3 tranzycje i animacje CSS3 tranzycje i animacje

25

26 Multimedia: Audio i Wideo

27 Multimedia 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 Element języka HTML5 pozwalający tworzyć obrazki i animacje bezpośrednio w przeglądarce przy użyciu kodu JavaScript Wykresy i biblioteka RGraph Wykresy i biblioteka RGraph

31

32 CSS 3: Rozszerzenia specyficzne dla dostawców -webkit- :Safari, Google Chrome -webkit- :Safari, Google Chrome -moz-: Mozilla -moz-: Mozilla -o- : Opera -o- : Opera

33 CSS 3: Nowe selektory Pseudoklasy: Pseudoklasy: :first-size :first-size :last-child :last-child :nth-child :nth-child :target :target Lorem ipsum

34 CSS 3: Nowe selektory

35 CSS 3: demo

36 CSS 3: nowe pseudoklasy Zapytania o: Zapytania o: Rozdzielczość Rozdzielczość Orientację (poziomą lub pionową) Orientację (poziomą lub pionową) Szerokość i wysokość urządzenia Szerokość i wysokość urządzenia Szerokość i wysokość okna przeglądarki Szerokość i wysokość

37

38 Przechowywanie offline Użycie aplikacji offline Użycie aplikacji offline Wydajność Wydajność Prosty model programowania Prosty model programowania

39 Przechowywanieoffline Przechowywanie offline Web i offline to dwie odrębne rzeczy ale nie dla HTML5! Web i offline to dwie odrębne rzeczy ale nie dla HTML5! Web Storage Web Storage Web SQL Database and IndexedDB Web SQL Database and IndexedDB File System File System Wszędzie gdzie brak jest Wi-Fi lub 3G Wszędzie gdzie brak jest Wi-Fi lub 3G Poprawa wydajności! Poprawa wydajności!

40 Przechowywanie offline

41 Przechowywanieoffline Przechowywanie offline

42

43 Dostęp do urządzeń

44

45 Łączność Aplikacje typu czat Aplikacje typu czat Szybsze gry Szybsze gry Lepsza komunikacja Lepsza komunikacja Web Sockets Web Sockets Server-Sent Events Server-Sent Events

46 Łączność:Geolokalizacja

47 Czy powinienem już korzystać z języka HTML5 ? TAK ale….. z ostrożnością TAK ale….. z ostrożnością Uwaga na Internet Explorer 7 i wcześniejsze wersje Uwaga na Internet Explorer 7 i wcześniejsze wersje HTML 5 jest wciąż rozwijany i zmieniany HTML 5 jest wciąż rozwijany i zmieniany Kierować się zasadą stopniowego usprawniania i wdzięcznej degradacji Kierować się zasadą stopniowego usprawniania i wdzięcznej degradacji

48 Dziękuję za uwagę Dziękuję za uwagę Prezentacja jest dostępna pod adresem:


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

Podobne prezentacje


Reklamy Google