Mais conteúdo relacionado Semelhante a HTML5 어디까지 왔나? (20) HTML5 어디까지 왔나?2. 1
ASP.NET
Blog : http://using.tistory.com
Twiiter : @y2kpooh
Email : y2kpooh@snaps.co.kr
3. HTML5?
HTML5 HTML .
2004 6 Web Hypertext Application Technology Working Group(WHATWG)
1.0 . 2010 3
WHATWG (Draft Standard state) , W3C
(Working Draft state) .
HTML5 HTML 4.01, XHTML 1.0, DOM Level 2 HTML .
, FX
.
: http://ko.wikipedia.org/wiki/HTML5
4. HTML5 HISTORY
•
• W3C HTML4.01 -> XHTML 1.0 -> XHTML 1.1
• WHATWG Web Application 1.0
8. HTML5 -1
W3C HTML WG
iOS Flash , HTML5
HTML5 Demo&Guide
“ .”
9. HTML5 -2
, HTML5
W3C
HTML5
“ HTML5 .”
“ .”
10. HTML5 -3
IE9 HTML5
Mix11 HTML5 IE10 1 HTML5
Windows SkyDrive Silverlight HTML5
Window8 HTML5
14. HTML5
http://gs.statcounter.com
15. HTML5
http://gs.statcounter.com
16. HTML5
http://gs.statcounter.com
17. HTML5
http://gs.statcounter.com
18. HTML5
http://gs.statcounter.com
20. HTML5
293 12
11
288 4/5
240 11.01
HTML5
234 IE 10 PP2
5.0.4
231 IE9
228 8
130
32
0 75 150 225 300
http://html5test.com
21. - Section :
- Nav :
- article : , ,
- aside :
- hgroup :
- header : ,
- footer :
- time :
22. HTML4 HTML5
<div class=”header”> <header></header>
23. DEMO
HTML4 -> HTML5 Live Coding
http://freehtml5templates.com
http://initializr.com/
24. CANVAS
, , ,
2
3D API openGL
WebGL .
25. CANVAS
•
• https://mozillademos.org/demos/runfield/demo.html
• http://worldsbiggestpacman.com/
26. CANVAS
•
• http://mugtug.com/sketchpad/
• http://muro.deviantart.com/
27. CANVAS
• SNS
• http://foursquareplayground.com/
28. CANVAS
: http://caniuse.com/
29. CANVAS
• Line • Text
• Curves • Composites
• Paths • Transformations
• Shapes • Images Manipulation
• Fill Styles • Animation
• Images • Interactivity
http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/
30. CANVAS
var canvas2=document.getElementById("circle");
var context2=canvas2.getContext("2d");
context2.beginPath();
context2.arc(70,70,50,0,2*Math.PI,true);
context2.fillStyle = "#000";
context2.fill();
context2.lineWidth = 5;
context2.strokeStyle = "#ff0000";
context2.stroke();
31. CANVAS
var canvas=document.getElementById("rectangle");
var context=canvas.getContext("2d");
context.beginPath();
context.rect(10,10,100,100);
context.fillStyle = "#000";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#ff0000";
context.stroke();
32. CANVAS
var canvas3=document.getElementById("triangle");
var context3=canvas3.getContext("2d");
context3.beginPath();
context3.moveTo(50,10);
context3.lineTo(20,100);
context3.lineTo(80,100);
context3.closePath();
context3.fillStyle = "#000";
context3.fill();
33. CANVAS
var c_canvas4 = document.getElementById("mycanvas4");
var context4 = c_canvas4.getContext("2d");
var gradient = context4.createLinearGradient(0,0,100,0);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "yellow");
context4.fillStyle = gradient;
context4.fillRect(10,10,100,100);
34. CANVAS
var c_canvas7 = document.getElementById("mycanvas7");
var context7 = c_canvas7.getContext("2d");
context7.shadowColor = "gray";
context7.shadowOffsetX = 5;
context7.shadowOffsetY = 5;
context7.shadowBlur = 2;
context7.fillStyle = "#444442";
context7.fillRect(15,15,133,56);
var c_canvas8 = document.getElementById("mycanvas8");
var context8 = c_canvas8.getContext("2d");
context8.shadowColor = "gray";
context8.shadowOffsetX = 5;
context8.shadowOffsetY = 5;
context8.shadowBlur = 2;
context8.strokeStyle = "#444442";
context8.strokeRect(15,15,133,56);
35. CANVAS
function roundRect(x, y, w, h, radius)
{
var canvas = document.getElementById("canvas6");
var context = canvas.getContext("2d");
context.fillStyle = "#444442";
var r = x + w;
var b = y + h;
context.beginPath();
context.strokeStyle="#000";
context.lineWidth="3";
context.moveTo(x+radius, y);
context.lineTo(r-radius, y);
context.quadraticCurveTo(r, y, r, y+radius);
context.lineTo(r, y+h-radius);
context.quadraticCurveTo(r, b, r-radius, b);
context.lineTo(x+radius, b);
context.quadraticCurveTo(x, b, x, b-radius);
context.lineTo(x, y+radius);
context.quadraticCurveTo(x, y, x+radius, y);
context.stroke();
context.fill();
context.fillStyle = "#ffffff";
context.font = "bold 20px Arial";
context.fillText("HOONS", 55, 40);
context.fillStyle = "#ffffff";
context.font = "9px Arial";
context.fillText(".NET Community", 55, 55);
var images = new Image();
images.onload = function(){
context.drawImage(images, 27,22);
}
images.src = "hoons.png";
}
roundRect(10, 10, 133, 56, 5);
36. CANVAS
• ExplorerCanvas
• - http://code.google.com/p/explorercanvas/
• IE6-8 Canvas JS
• VML TAG
37. CANVAS
DEMO
http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html
http://www.effectgames.com/demos/canvascycle
http://mrdoob.com/projects/chromeexperiments/ball_pool/
http://www.openrise.com/lab/FlowerPower/
FireFox4 Runfield : http://j.mp/gW6Pad
A Look At HTML5 and its Canvas Tag : http://bit.ly/doTmeA
: http://muqtuq.com/darkroom
http://www.beautyoftheweb.com
http://j.mp/gTiBBS
html5demos.com
http://dev.xguru.net/html5/#canvas-2d-example
http://www.kesiev.com/akihabara/
http://mugtug.com/sketchpad/
http://muro.deviantart.com/
http://worldsbiggestpacman.com
http://foursquareplayground.com
38. WEBGL
DEMO
http://ro.me
http://alteredqualia.com/canvasmol
43. SVG
• Raphael
• - http://raphaeljs.com
• IE6-8 SVG JS
• VML TAG
• Raphael : http://j.mp/gBqUvC
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
44. DEMO
http://svg-wow.org/
http://dev.xguru.net/html5/#svg-example-slide
http://jsdo.it/event/svggirl
45. VIDEO
HTML5 VIDEO .
(Flash Player), (SilverLight)
Plug In .
HTML5 Video Plug In
.
46. VIDEO
Vimeo’s HTML5 beta: http://vimeo.com/blog:268
YouTube’s HTML5 beta: http://www.youtube.com/html5
49. VIDEO TAG
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
.
OR
<object><embed></embed></object>
</video>
• source .
• video .
50. VIDEO JS
function playBtn() {
video.play();
}
function pauseBtn() {
video.pause();
}
function stopBtn() {
video.pause();
video.currentTime = 0;
}
function skipBackBtn() {
video.currentTime -=2;
}
51. VIDEO
audio muted ,
autoplay autoplay
controls controls
height pixels
loop loop
poster url url
preload preload
src url
width pixels
: www.w3schools.com
52. VIDEO
canPlayType
//
function supports_video()
{
return !!document.createElement("video").canPlayType;
}
//video/mp4
function supports_h264_baseline_video()
{
if(!supports_video()){ return false;}
var v = document.createElement("video");
return v.canPlayType('video/mp4; codec="avc1.42EO1E, mp4a.40.2"'');
}
53. VIDEO
Modernizr
- http://www.modernizr.com
- HTML5Shiv CSS3
- Modernizr HTML5, CSS3
if(Modernizr.video)
{
if(Modernizr.video.ogg){
//ogg
}else if(Modernizr.video.h264){
//h.264
}
}
54. VIDEO
• 20 HTML5 Video Player - http://j.mp/dfxNMQ
- Video.JS, JW Player, Mediaelement.JS, Projekktor...
- Flash FallBack IE
- VideoJS
- http://videojs.com - Free & OpenSource, Skin, Full Screen
55. VIDEO
DEMO
http://craftymind.com/factory/html5video/CanvasVideo.html
http://www.html5video.org/demos
56. AUDIO
HTML5 Audio .
(Flash Player), (SilverLight)
Plug In .
HTML5 Audio Plug In
.
59. AUDIO
autoplay autoplay
controls controls
loop loop
preload preload
src url
60. AUDIO TAG
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
.
OR
<object><embed></embed></object>
</audio>
• source .
• audio .
61. AUDIO
• Audio.js
- http://kolber.github.com/audiojs - OpenSource(MIT)
62. AUDIO
DEMO
http://lab.simurai.com/ui/zen-player
http://daftpunk.themaninblue.com
63. CSS3
• Cascading Style Sheet
• ( )
• W3C
64. CSS3
• CSS2.1 Recommendation
• CSS3
• CSS3
• - http://www.w3.org/TR/css3-roadmap
• - http://www.w3.org/style/css/current-work
67. CSS3
• Animation
• CSS3
• - CSS3.Font
• - CSS3.Gradient
• - CSS3.Border-Radius
• Media Query Response Web UI
68. CSS3
• Selectivizr : http://selectivizr.com
- IE6-8 CSS3
Respond.js : http://github.com/scottjehl/Respond
- CSS3 Media Query IE6-8 JS
69. CSS3
DEMO
http://mediaqueri.es/
http://webdesignledger.com/inspiration/30-creative-examples-of-responsive-web-design
70. WEB STORAGE
•
•
• (5mb)
•
•
• Local Storage
• Session Storage
72. WEB STORAGE
• SET
localStorage.MyName = 'hoons';
localStorage.setItem('Myname', 'hoons');
localStorage['Myname'] = 'hoons';
• GET
var name = localStorage.MyName;
var name = localStorage.getItem('Myname');
var name = localStorage['Myname'];
• DELETE
delete localStorage.MyName;
localStorage.removeItem('Myname');
74. WEB SQL DATABASE
• SQLLite DB
• Insert, Update, Select, Delete, Transaction
• HTML5
• SQL
•
•
•
77. WEB SQL DATABASE
var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024);
db.transacton(function(tx){
tx.executeSql("Select * from Tables", [], successCallback, errorCallback);
});
db.transacton(function(tx){
tx.executeSql("Update Tables set c1=? where c2=?;", ["a","b"],
successCallback, errorCallback);
});
80. INDEXED DB
var idbRequest = window.indexedDB.open('Database Name');
idbRequest.onsuccess = function(event) {
var db = event.srcElement.result;
var transaction = db.transaction([], IDBTransaction.READ_ONLY);
var curRequest = transaction.objectStore('ObjectStore
Name').openCursor();
curRequest.onsuccess = ...;
};
82. APPLICATION CACHE
•
• Mime text/cache-manifest .
• HTML, CSS, JAVASCRIPT, IMAGE URL .
• XXX.manifest .
84. APPLICATION CACHE
CACHE MANIFEST
# Version 1.0.0.0
CACHE:
/favicon.ico
<!DOCTYPE html>
index.html
<html manifest="cache.manifest">
stylesheet.css
images/logo.png
scripts/main.js
85. APPLICATION CACHE
• CACHE : .(DEFAULT)
• FALLBACK : URL ,
• NETWORK :
• ... http://www.html5rocks.com/tutorials/appcache/beginner/
88. WEB SOCKET
•
• Web Socket XHR 50
.
• TCP
HTML5 .
• .
- phpwebsocket, jWebSocket, node.js
90. WEB SOCKET
• Web Socket
80 PORT
1
Web Server
Client
Browser
3 Server
WebSocket
2 Server
WS PORT
91. WEB SOCKET
- WebSocket
- ws, was
var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
-
socket.onopen = function(event) {};
-
socket.close = function(event) {};
-
socket.send('Hello, WebSocket');
-
socket.onmessage = function(event) {}
92. WEB SOCKET
• EasyWebSocket : http://EasyWebSocket.org
- HTML5 WebSocket
. .
97. WEB WORKER
postMessage(data)
onmessage
HTML5 Worker
(worker.js)
onmessage postMessage(data)
•
• window, document
• javascript ,
• message, postMessage
98. WEB WORKER
HTML5
var myWorker = new Worker("myWorker.js");
myWorker.onmessage = function(event){
//Worker CallBack
result = event.data;
}
myWorker.postMessage("call work");
//Worker
myWorker.terminate();
Worker
self.addEventListener("message", function(event) {
self.postMessage(event.data);
});
100. GEOLOCATION
• .
• .
• window.navigator geolocation getCurrentPosition
.
103. GEOLOCATION
•
getCurrentPosition
(successCallback, .
errorCallback,
option)
watchCurrentPosition
(successCallback, .
errorCallback, successCallback
option)
watchPosition() .
clearWatch(watchID)
watchCurrentPosition()
105. GEOLOCATION
• position
latitude
longitude
altitude
coords accuracy , (m)
altitudeAccuracy (m)
heading
speed
timestamp
106. GEOLOCATION
if (!!navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
}
else
{
alert(" Geolocation ");
}
function successCallback(position)
{
var lat = position.coords.latitude;
var lng = position.coords.longitude;
document.getElementById("msg").innerHTML = " " + lat + ", :"+lng
}
function errorCallback(error)
{
alert(error.message);
}
110. FILE API
• File
name
type MIME
urn
size
slice(start, length) BLOB
111. FILE API
• FileReader
.
error
onload
onprogress
onerror
readAsBinaryString(fileBlob)
readAsText(fileBlob, encoding)
readAsDataURL(file) DataURL
112. FILE API
<input type="file" id="files" accept="image/*" multiple>
document.querySelector('#files').onchange = function(e) {
var files = e.target.files; // FileList of File objects.
for (var i = 0, f; f = files[i]; ++i) {
console.log(f.name, f.type, f.size,
f.lastModifiedDate.toLocaleDateString());
}
};
113. FILE API
<input type="file" id="dir-select" webkitdirectory />
document.querySelector('#dir-select').onchange = function(e) {
var out = [];
for (var i = 0, f; f = e.target.files[i]; ++i) {
out.push(f.webkitRelativePath);
}
document.querySelector('#output').value = out.join('/n');
};
117. DRAG & DROP API
•
draggable true / false / auto
/
dropzone copy / move / link
•
ondrag script
ondragend script
ondragenter script
ondragleave script
ondragover script
ondragstart script
ondrop script
120. FORM
• input type
tel
search
url URL
email
datetime /
date
month
week
time
datetime-local /
number
range
color # FF8800 16
122. FORM
• WebForms2 : http://code.google.com/p/webforms2/
- IE6-8 Form JS
- How to Build Cross-Browser HTML5 Forms : http://net.tutsplus.com/tutorials/html-css-techniques/
how-to-build-cross-browser-html5-forms/
124. HTML5
HTML5 HTML5
- - PC 4G
- -
- -
- - HTML5
- W3C -
125. • http://www.htmlfivewow.com
• http://www.html5rocks.com/en/
• http://caniuse.com/
• http://w3schools.com/html5/
• http://html5demos.com/
• http://www.clearboth.org/html5/spec.html
• http://www.html5canvastutorials.com/
• http://dev.xguru.net/html5
• http://diveintohtml5.org
• http://webdevmobile.com
• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills