Post on 16-Mar-2016
description
HTML5 i CSS3 w nowoczesnych serwisach
internetowych
Plan prezentacjiWprowadzenieSemantyka HTML 5Wydajność i integracjaMultimedia3d, grafika, efektyCSS 3Przechowywanie offlineDostę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 WWW obecnie
HTML (the Hypertext Markup Language)
CSS (Cascading Style Sheets )
Skrypty Po stronie serwera: np. PHP lub ASPPo stronie przeglądarki: np. Javascript
MultimediaZdję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
API JavaScri
pt
CSS3
Piąta odsłona HTML
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: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>
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
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
p:first-child { tont-size:1.2em;}
<body><p id=„pierwszy”>
Lorem ipsum</p></body>
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
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ę
?Prezentacja jest dostępna pod adresem:http://mariuszklec.pjwstk.edu.pl/