1 / 48

HTML5 i CSS3 w nowoczesnych serwisach internetowych

HTML5 i CSS3 w nowoczesnych serwisach internetowych. 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. Wprowadzenie: Strony WWW kiedyś.

brett-mccarthy
Télécharger la présentation

HTML5 i CSS3 w nowoczesnych serwisach internetowych

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. 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. 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 ? 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. Semantyka:Redukcja znaczników • <applet> • <big> • <center> • <font> • <frame> • <frameset> • <strike> • …

  14. Semantyka:doctype <!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>

  15. Semantyka:nowe znaczniki • <header> • <footer> • <nav> • <article> • <section> • <aside>

  16. Semantyka:nowe znaczniki

  17. Semantyka:formularze • <inputtype=„email” placeholder=„imie@adres.pl” > • <inputtype=„text” autofocus> • <inputtype=„url”> • <inputtype=„tel”> • <inputtype=„search”>

  18. Semantyka:formularze • <inputtype=„range”> • <inputtype=„number”> • <inputtype=„date”> • <inputtype=„color”> • <p contenteditable>loremipsum</p>

  19. Semantyka:formularze

  20. Semantyka:<progress> i <meter>

  21. 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%

  22. Wydajność i integracja:Technologie • „Wielowątkowy” JavaSctipt • Web sockets • Localstorage • CSS sprites • Web fonts • CSS3 tranzycje i animacje

  23. Multimedia:Audio i Wideo

  24. Multimedia:Kodeki

  25. 3d, grafika, efekty:

  26. 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

  27. 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; }

  28. CSS 3:Nowe selektory • Pseudoklasy: • :first-size • :last-child • :nth-child • :target • <body> • <p id=„pierwszy”> • Loremipsum • </p> • </body> p:first-child { tont-size:1.2em; }

  29. CSS 3:Nowe selektory

  30. CSS 3:demo

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

  32. Przechowywanie offline • Użycie aplikacji offline • Wydajność • Prosty model programowania

  33. Przechowywanieoffline • „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!

  34. Przechowywanie offline

  35. Przechowywanieoffline

  36. Dostęp do urządzeń

  37. Łączność • Aplikacje typu czat • Szybsze gry • Lepsza komunikacja • Web Sockets • Server-SentEvents

  38. Łączność: Geolokalizacja

  39. 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”

  40. Dziękuję za uwagę  ? • Prezentacja jest dostępna pod adresem: • http://mariuszklec.pjwstk.edu.pl/

More Related