* HTML5 i CSS3 w nowoczesnych serwisach internetowych 96-07-16 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ś
Wprowadzenie: Strony przyszłości
Wprowadzenie: Strony przyszłości
Wprowadzenie: Strony przyszłości
Wprowadzenie: Strony przyszłości
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
HTML 4 ? HTML 5 ? 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 ? 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
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> <!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: nowe znaczniki
Semantyka: formularze <input type=„email” placeholder=„imie@adres.pl” > <input type=„text” autofocus> <input type=„url”> <input type=„tel”> <input type=„search”>
Semantyka: formularze <input type=„range”> <input type=„number”> <input type=„date”> <input type=„color”> <p contenteditable>lorem ipsum</p>
Semantyka: formularze
Semantyka: <progress> i <meter>
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 Local storage CSS sprites Web fonts CSS3 tranzycje i animacje
Multimedia: Audio i Wideo
Multimedia: Kodeki
3d, grafika, efekty:
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”> Lorem ipsum </p> </body> p:first-child { tont-size:1.2em; }
CSS 3: Nowe selektory
CSS 3: demo
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
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!
Przechowywanie offline
Przechowywanie offline
Dostęp do urządzeń
Łączność Aplikacje typu czat Szybsze gry Lepsza komunikacja Web Sockets Server-Sent Events
Łą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ę http://mariuszklec.pjwstk.edu.pl/ Prezentacja jest dostępna pod adresem: http://mariuszklec.pjwstk.edu.pl/