480 likes | 623 Views
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ś.
E N D
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 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
Wprowadzenie • Szybki • Bezpieczny • Godny zaufania • Interaktywny • Piękny HTML 4 ? Hmm… nie bardzo… HTML 5 ? Jak najbardziej tak !
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
Wprowadzenie:Co to jest HTML5 ? tworzenie serwisów i aplikacji które do tej pory były zarezerwowane tylko dla aplikacji desktopowych
Wprowadzenie:Dostępność iPhone, iPady i telefony z Google Android już używają HTML 5
Semantyka:Redukcja znaczników • <applet> • <big> • <center> • <font> • <frame> • <frameset> • <strike> • …
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>
Semantyka:nowe znaczniki • <header> • <footer> • <nav> • <article> • <section> • <aside>
Semantyka:formularze • <inputtype=„email” placeholder=„imie@adres.pl” > • <inputtype=„text” autofocus> • <inputtype=„url”> • <inputtype=„tel”> • <inputtype=„search”>
Semantyka:formularze • <inputtype=„range”> • <inputtype=„number”> • <inputtype=„date”> • <inputtype=„color”> • <p contenteditable>loremipsum</p>
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%
Wydajność i integracja:Technologie • „Wielowątkowy” JavaSctipt • Web sockets • Localstorage • CSS sprites • Web fonts • CSS3 tranzycje i animacje
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
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; }
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; }
CSS 3:nowe pseudoklasy • Zapytania o: • Rozdzielczość • Orientację (poziomą lub pionową) • Szerokość i wysokość urządzenia • Szerokość i wysokość okna przeglądarki • @media
Przechowywanie offline • Użycie aplikacji offline • Wydajność • Prosty model programowania
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!
Łączność • Aplikacje typu czat • Szybsze gry • Lepsza komunikacja • Web Sockets • Server-SentEvents
Łączność: Geolokalizacja
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”
Dziękuję za uwagę ? • Prezentacja jest dostępna pod adresem: • http://mariuszklec.pjwstk.edu.pl/