Downloaded 16 times
Html5 i css3
- 1.HTML5 i CSS3wnowoczesnych w serwisach internetowych
- 2.Plan prezentacjiWprowadzeniePrzechowywanie danychSemantykaHTML 5Dostęp do systemu plików urządzeńŁącznośćWydajność i integracja3d, grafika, efektyMultimediaCSS 3
- 3.
- 4.
- 5.
- 6.
- 7.
- 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
- 14.
- 15.
- 17.Przechowywanie offline Użycie aplikacji offline Wydajność Prosty model programowania
- 18.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!
- 19.
- 21.Semantyka:Redukcja znaczników <applet> <big> <center> <font> <frame> <frameset> <strike> …
- 22.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>
- 23.Semantyka:nowe znaczniki <header> <footer> <nav> <article> <section> <aside>
- 24.
- 25.Semantyka:formularze<input type=„email” placeholder=„imie@adres.pl” > <input type=„text” autofocus> <input type=„url”> <input type=„tel”> <input type=„search”>
- 26.Semantyka:formularze<input type=„range”> <input type=„number”> <input type=„date”> <input type=„color”> <p contenteditable>lorem ipsum</p>
- 27.
- 29.
- 31.ŁącznośćAplikacje typu czat Szybsze gry Lepsza komunikacja Web Sockets Server-Sent Events
- 32.
- 34.Wydajność i integracja:Dlaczegotak 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%
- 35.Wydajność i integracja:Technologie „Wielowątkowy” JavaSctipt Web sockets Local storage CSS sprites Web fonts CSS3 tranzycje i animacje Trwałe połączenie HTTP
- 37.
- 38.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
- 40.CSS 3:Rozszerzenia specyficznedla dostawców -webkit- :Safari, Google Chrome -moz-: Mozilla -o- : Opera p{ -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; }
- 41.CSS 3: Noweselektory Pseudoklasy: :first-size :last-child :nth-child :target<body> <p id=„pierwszy”> p:first-child { Lorem ipsum tont-size:1.2em; </p> }</body>
- 42.
- 43.CSS 3:nowe pseudoklasy Zapytania o: Rozdzielczość Orientację (poziomą lub pionową) Szerokość i wysokość urządzenia Szerokość i wysokość okna przeglądarki @media
- 44.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”
- 45.Dziękuję za uwagę ?Prezentacja jest dostępna pod adresem:http://mariuszklec.pjwstk.edu.pl/