Html5 i css3

HTML5 i CSS3
w nowoczesnych w serwisach
internetowych

Plan prezentacji
Wprowadzenie
Przechowywanie danych
Semantyka HTML 5
Dostęp do systemu plików urządzeń
Łączność
Wydajność i integracja
3d, grafika, efekty
Multimedia
CSS 3

Wprowadzenie:
Strony WWW kiedyś

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
HTML 4 ?


 Bezpieczny
 Godny zaufania Hmm… nie bardzo…
 Interaktywny
 Piękny
HTML 5 ?
Jak najbardziej tak !

Wprowadzenie:
Historia:

c ja
 1997 – HTML4
o lu
 2001 – XHTML1.1 r ew
n ie 1.0 Working Draft
2005 – Web Application
a


ja
uc
2011 – HTML5 Working Draft


ol HTML5 jest gotowy ? Sprawdź!
2012w Czy
–
E


Wprowadzenie:
Co to jest HTML5 ?
Piąta
odsłona
HTML

CSS3

API
JavaScrip
t

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

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!

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
 <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:
<progress> i <meter>

Łączność
 Aplikacje typu czat
 Szybsze gry
 Lepsza komunikacja
 Web Sockets
 Server-Sent Events

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:
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”> p:first-child {
Lorem ipsum tont-size:1.2em;
</p> }
</body>

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/

Html5 i css3

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Html5 i css3

Semelhante a Html5 i css3 (20)

Mais de Squiz Poland

Mais de Squiz Poland (20)

Html5 i css3