html5 - now or later
DESCRIPTION
Presentation from Krakspot Tech #4March 2011in PolishTRANSCRIPT
![Page 1: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/1.jpg)
TERAZ CZY ZA CHWILĘ?
![Page 2: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/2.jpg)
<HTML>
+ Java.Script();
HTML5
![Page 3: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/3.jpg)
<HTML>
+ Java.Script();
~= HTML5CSS3
![Page 4: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/4.jpg)
<HTML> NEW DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
.
![Page 5: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/5.jpg)
<HTML> NEW DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!doctype html>
![Page 6: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/6.jpg)
<html> NEW DOCUMENT STRUCTURE
<!DOCTYPE html>
<meta charset="utf-8">
<title> Hello </title>
<p> sunshine </p>
Valid!
![Page 7: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/7.jpg)
<HTML> NEW SEMANTIC TAGS
<ARTICLE> <ASIDE> <SECTION> <hgroup> <NAV>
<FOOTER> <HEADER>
<figure> <figcaption>
<datalist> <menu> <command> <details> <summary>
<meter> <progress>
+ więcej
![Page 8: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/8.jpg)
<HTML> NEW WEB FORMS
<input type="text" required autofocus /> *
<input type="email" PLACEHOLDER="[email protected]" /> *
<input type="date" min="2010-08-14" max="2011-08-14"
value="2010-08-14"/>
<input type="range" min="0" max="50" value="10" />
* Input:invalid {...}
![Page 9: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/9.jpg)
<HTML> NEW WEB FORMS
<input type="search" results="10" placeholder="Search..." />
<input type="tel" placeholder="(555) 555-5555”pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-5" max="10" value="0" />
<input type= "URL" value="http://ohmy.com" />
![Page 10: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/10.jpg)
<HTML> NEW WEB FORMS
![Page 11: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/11.jpg)
<HTML> NEW WEB FORMS
email tel
number url
![Page 12: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/12.jpg)
<html> /jAVAsCRIPT(); NATIVE MEDIA
<video controls>
</video>
![Page 13: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/13.jpg)
<html> /jAVAsCRIPT(); NATIVE MEDIA
var video // video element
function playPause() {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
}
http://Video object API
![Page 14: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/14.jpg)
<html> /jAVAsCRIPT(); NATIVE MEDIA
<video controls>
<source src="vid.mp4">
<source src="vid.ogG">
<object data="vid.SWF">
<param name="movie" value="vid.SWF" />
</object>
</video>
![Page 15: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/15.jpg)
<html> /jAVAsCRIPT(); NATIVE MEDIA
<audio controls src="file.mp3">
<object data="file.mp3" >
<embed src="file.swf">
</object>
</audio>
![Page 16: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/16.jpg)
<html> /jAVAsCRIPT(); drawing
if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( }
Nessie 150
Wendigo 150
Sasquatch 300
Chupacabra 100
Yeti 50
<CANVAS>
• Rysowanie w JS
• Wykresy
• Gry etc.
![Page 17: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/17.jpg)
jAVAsCRIPT(); New Events
WINDOW onerror
onhashchange
ononline / onoffline
onpagehide / onpageshow
(...)
HTML ELEMENTS ondrag / ondragstart / ondragend
ondrop
oninvalid
(...)
![Page 18: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/18.jpg)
jAVAsCRIPT(); Offline web
Web Storage (cookie na sterydach)
• 5 mb na DANE
• Trwałe
• Nie przesyłane na serwer (!)
Application cache
• <html manifest="/cache.manifest">
• CACHE / NETWORK / FALLBACK
![Page 19: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/19.jpg)
jAVAsCRIPT(); Communication
WebSocket
• Ws:// lub wss://
• Dupleks
• Bez nagłówków
• Bezpieczna?
![Page 20: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/20.jpg)
jAVAsCRIPT(); Communication
Web WorkerS (wielowątkowY JS)
Źródło: http://html5rocks.com
![Page 21: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/21.jpg)
No i jeszcze...
• history api
• Drag & drop
• Drag in
• Geolocation
• Microdata
• ARIA attributes
• Web SQL Database / IndexedDB
• (...)
![Page 22: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/22.jpg)
HTML5 TERAZ!Ale...
• Zadbaj o Wsteczną zgodność...
• ...I o Dobre Wersje alternatywne
• Nie uzależniaj kluczowych funkcjonalności...
• ...chyba, że piszesz dla konkretnej przeglądarki
![Page 23: HTML5 - now or later](https://reader034.vdocument.in/reader034/viewer/2022042700/55515045b4c905bd1c8b568f/html5/thumbnails/23.jpg)
Modernizr.com
Detekcja funkcjonalności nie przeglądarki!
function supports_canvas() {
var d = document;
return !!d.createElement('canvas').getContext;
}
if (supports_canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}