[30회 정기세미나] HTML5 실무적용 전략 HTML5 어디까지 왔나? / 발표자 황정현

1. ?
:

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

5. HTML5 HISTORY
HTML

6. WHY HTML5?
• W3C
• API
• , X
•
•

7. WHY HTML5?
• .
•
.

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

11. HTML5 -4

12. HTML5 -5

13. HTML5 -6

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

19. HTML5

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

39. SVG(SCALABLE VECTOR GRAPHICS)
2
XML W3C .
.
Flash, SilverLight RIA .

40. SVG(SCALABLE VECTOR GRAPHICS)

41. SVG(SCALABLE VECTOR GRAPHICS)
pixel vector

42. SVG(SCALABLE VECTOR GRAPHICS)
: http://caniuse.com/

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

47. VIDEO

48. VIDEO CODEC ISSUE
• ? . .
• WebM
• MPEGLA WebM MPEG
• .

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
.

57. AUDIO

58. AUDIO CODEC ISSUE
• VIDEO .
• .

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

65. CSS3
.......

66. CSS3
.......

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

71. WEB 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');

73. WEB STORAGE
DEMO

74. WEB SQL DATABASE
• SQLLite DB
• Insert, Update, Select, Delete, Transaction
• HTML5
• SQL
•
•
•

75. WEB SQL DATABASE
• SQL
• SQLite
• iOS Android
http://dev.w3.org/html5/webdatabase/

76. WEB SQL DATABASE

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);
});

78. WEB SQL DATABASE
DEMO

79. INDEXED DB
• Web SQL Database JS .
• (Index)
•
•

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 = ...;
};

81. INDEXED DB

82. APPLICATION CACHE
•
• Mime text/cache-manifest .
• HTML, CSS, JAVASCRIPT, IMAGE URL .
• XXX.manifest .

83. APPLICATION CACHE

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/

86. APPLICATION CACHE

87. APPLICATION CACHE
DEMO

88. WEB SOCKET
•
• Web Socket XHR 50
.
• TCP
HTML5 .
• .
- phpwebsocket, jWebSocket, node.js

89. WEB SOCKET
•
: http://mobilepp.tistory.com/

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
. .

93. WEB SOCKET
DEMO
http://pusher.com/examples

94. WEB WORKER
• .
• .
•
( ) . Web Worker
.
-
-
-
-
-

95. WEB WORKER

96. WEB WORKER

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);
});

99. WEB WORKER
DEMO

100. GEOLOCATION
• .
• .
• window.navigator geolocation getCurrentPosition
.

101. GEOLOCATION
• DEVICE GEOLOCATION .

102. GEOLOCATION

103. GEOLOCATION
•
getCurrentPosition
(successCallback, .
errorCallback,
option)
watchCurrentPosition
(successCallback, .
errorCallback, successCallback
option)
watchPosition() .
clearWatch(watchID)
watchCurrentPosition()

104. GEOLOCATION
•
enableHightAccurary
timeout
maximumAge

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);
}

107. GEOLOCATION
DEMO

108. FILE API
•
• Drag & Drop API ActiveX
.

109. FILE API

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');
};

114. FILE API
DEMO

115. DRAG & DROP API
• Drag&Drop
• File API ActiveX .

116. DRAG & DROP API

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

118. DRAG & DROP API
DEMO

119. FORM
• .
• , .

120. FORM
• input type
tel
search
url URL
email
datetime /
date
month
week
time
datetime-local /
number
range
color # FF8800 16

121. FORM

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/

123. FORM
DEMO

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

126. Q&A