HTML 5

Report
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
Wprowadzenie





Szybki
Bezpieczny
Godny zaufania
Interaktywny
Piękny
Wprowadzenie:
Historia:





1997
2001
2005
2011
2012
–
–
–
–
–
HTML4
XHTML1.1
Web Application 1.0 Working Draft
HTML5 Working Draft
Czy HTML5 jest gotowy ? Sprawdź!
Wprowadzenie:
Co to jest HTML5 ?
CSS3
Piąta
odsłona
HTML
API
JavaScript
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:
nowe znaczniki
Semantyka:
formularze





<input
<input
<input
<input
<input
type=„email” [email protected] >
type=„text” autofocus>
type=„url”>
type=„tel”>
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
CSS 3:
Nowe selektory

Pseudoklasy:




:first-size
:last-child
:nth-child
:target
<body>
<p id=„pierwszy”>
Lorem ipsum
</p>
</body>
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ę 
Prezentacja jest dostępna pod adresem:
http://mariuszklec.pjwstk.edu.pl/

similar documents