Your SlideShare is downloading. ×
0
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Html5 i css3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 i css3

1,061

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,061
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 i CSS3w nowoczesnych w serwisach internetowych
  • 2. Plan prezentacjiWprowadzeniePrzechowywanie danychSemantyka HTML 5Dostęp do systemu plików urządzeńŁącznośćWydajność i integracja3d, grafika, efektyMultimediaCSS 3
  • 3. Wprowadzenie:Strony WWW kiedyś
  • 4. Wprowadzenie:Strony przyszłości
  • 5. Wprowadzenie:Strony przyszłości
  • 6. Wprowadzenie:Strony przyszłości
  • 7. Wprowadzenie:Strony przyszłości
  • 8. 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
  • 9. Wprowadzenie Szybki HTML 4 ? Bezpieczny Godny zaufania Hmm… nie bardzo… Interaktywny Piękny HTML 5 ? Jak najbardziej tak !
  • 10. 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
  • 11. Wprowadzenie: Co to jest HTML5 ? Piąta odsłona HTML CSS3 API JavaScrip ttworzenie serwisów i aplikacji które do tej pory były zarezerwowane tylko dla aplikacji desktopowych
  • 12. Wprowadzenie: DostępnośćiPhone, iPady i telefony z Google Androidjuż używają HTML 5
  • 13. Multimedia:Audio i Wideo
  • 14. Multimedia:Kodeki
  • 15. Przechowywanie offline Użycie aplikacji offline Wydajność Prosty model programowania
  • 16. 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!
  • 17. Przechowywanie offline
  • 18. Semantyka:Redukcja znaczników <applet> <big> <center> <font> <frame> <frameset> <strike> …
  • 19. 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>
  • 20. Semantyka:nowe znaczniki <header> <footer> <nav> <article> <section> <aside>
  • 21. Semantyka:nowe znaczniki
  • 22. Semantyka:formularze <input type=„email” placeholder=„imie@adres.pl” > <input type=„text” autofocus> <input type=„url”> <input type=„tel”> <input type=„search”>
  • 23. Semantyka:formularze <input type=„range”> <input type=„number”> <input type=„date”> <input type=„color”> <p contenteditable>lorem ipsum</p>
  • 24. Semantyka:<progress> i <meter>
  • 25. Dostęp do urządzeń
  • 26. Łączność Aplikacje typu czat Szybsze gry Lepsza komunikacja  Web Sockets  Server-Sent Events
  • 27. Łączność:geolokalizacja
  • 28. 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%
  • 29. Wydajność i integracja:Technologie „Wielowątkowy” JavaSctipt Web sockets Local storage CSS sprites Web fonts CSS3 tranzycje i animacje Trwałe połączenie HTTP
  • 30. 3d, grafika, efekty:
  • 31. 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
  • 32. 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; }
  • 33. 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>
  • 34. CSS 3:demo
  • 35. CSS 3:nowe pseudoklasy Zapytania o:  Rozdzielczość  Orientację (poziomą lub pionową)  Szerokość i wysokość urządzenia  Szerokość i wysokość okna przeglądarki  @media
  • 36. 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”
  • 37. Dziękuję za uwagę  ?Prezentacja jest dostępna pod adresem:http://mariuszklec.pjwstk.edu.pl/

×