Html5 i css3
45
HTML5 i CSS3 w nowoczesnych w serwisach internetowych
-
Upload
squizpoland -
Category
Documents
-
view
1.469 -
download
1
description
Transcript of Html5 i css3
HTML5 i CSS3 w nowoczesnych w serwisach
internetowych
Plan prezentacjiWprowadzeniePrzechowywanie danychSemantyka HTML 5Dostęp do systemu plików urządzeńŁącznośćWydajność i integracja3d, grafika, efektyMultimediaCSS 3
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
Piąta odsłona HTML
CSS3
API JavaScrip
t
Wprowadzenie:Dostępność
iPhone, iPady i telefony z Google Android już używają HTML 5
Multimedia:Kodeki
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
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=„[email protected]” > <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:<progress> i <meter>
Łączność Aplikacje typu czat Szybsze gry Lepsza komunikacja
Web Sockets Server-Sent Events
Łączność:geolokalizacja
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 Trwałe połączenie HTTP
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
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/
