Embed Size (px)
DESCRIPTION
Presentation from Krakspot Tech #4March 2011in Polish
Citation preview
TERAZ CZY ZA CHWILĘ?
<HTML>
+ Java.Script();
HTML5
<HTML>
+ Java.Script();
~= HTML5CSS3
<HTML> NEW DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
.
<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>
<html> NEW DOCUMENT STRUCTURE
<!DOCTYPE html>
<meta charset="utf-8">
<title> Hello </title>
<p> sunshine </p>
Valid!
<HTML> NEW SEMANTIC TAGS
<ARTICLE> <ASIDE> <SECTION> <hgroup> <NAV>
<FOOTER> <HEADER>
<figure> <figcaption>
<datalist> <menu> <command> <details> <summary>
<meter> <progress>
+ więcej
<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 {...}
<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" />
<HTML> NEW WEB FORMS
<HTML> NEW WEB FORMS
email tel
number url
<html> /jAVAsCRIPT(); NATIVE MEDIA
<video controls>
</video>
<html> /jAVAsCRIPT(); NATIVE MEDIA
var video // video element
function playPause() {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
}
http://Video object API
<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>
<html> /jAVAsCRIPT(); NATIVE MEDIA
<audio controls src="file.mp3">
<object data="file.mp3" >
<embed src="file.swf">
</object>
</audio>
<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.
jAVAsCRIPT(); New Events
WINDOW onerror
onhashchange
ononline / onoffline
onpagehide / onpageshow
(...)
HTML ELEMENTS ondrag / ondragstart / ondragend
ondrop
oninvalid
(...)
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
jAVAsCRIPT(); Communication
WebSocket
• Ws:// lub wss://
• Dupleks
• Bez nagłówków
• Bezpieczna?
jAVAsCRIPT(); Communication
Web WorkerS (wielowątkowY JS)
Źródło: http://html5rocks.com
No i jeszcze...
• history api
• Drag & drop
• Drag in
• Geolocation
• Microdata
• ARIA attributes
• Web SQL Database / IndexedDB
• (...)
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
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 :(
}
