• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 어디까지 왔나?
 

HTML5 어디까지 왔나?

on

  • 6,989 views

[30회 정기세미나] HTML5 실무적용 전략

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

Statistics

Views

Total Views
6,989
Views on SlideShare
4,576
Embed Views
2,413

Actions

Likes
4
Downloads
152
Comments
1

12 Embeds 2,413

http://using.tistory.com 1868
http://www.hoons.kr 368
http://hoons.kr 121
http://www.hoons.net 27
http://hoons.net 10
http://cafe.naver.com 7
http://www.sagomi.com 5
http://211.233.63.3 2
http://www.slideshare.net 2
http://mail.naver.com 1
http://ucclight.hoons.kr 1
url_unknown 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 최고네요
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 어디까지 왔나? HTML5 어디까지 왔나? Presentation Transcript

    • ? :
    • 1 ASP.NET Blog : http://using.tistory.com Twiiter : @y2kpooh Email : y2kpooh@snaps.co.kr
    • 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
    • HTML5 HISTORY • • W3C HTML4.01 -> XHTML 1.0 -> XHTML 1.1 • WHATWG Web Application 1.0
    • HTML5 HISTORY HTML
    • WHY HTML5?• W3C• API• , X••
    • WHY HTML5?• .• .
    • HTML5 -1 W3C HTML WG iOS Flash , HTML5 HTML5 Demo&Guide “ .”
    • HTML5 -2 , HTML5 W3C HTML5 “ HTML5 .” “ .”
    • HTML5 -3 IE9 HTML5 Mix11 HTML5 IE10 1 HTML5 Windows SkyDrive Silverlight HTML5 Window8 HTML5
    • HTML5 -4
    • HTML5 -5
    • HTML5 -6
    • HTML5 http://gs.statcounter.com
    • HTML5 http://gs.statcounter.com
    • HTML5 http://gs.statcounter.com
    • HTML5 http://gs.statcounter.com
    • HTML5 http://gs.statcounter.com
    • HTML5
    • HTML5 293 12 11 288 4/5 240 11.01HTML5 234 IE 10 PP2 5.0.4 231 IE9 228 8 130 32 0 75 150 225 300 http://html5test.com
    • - Section : - Nav : - article : , , - aside : - hgroup : - header : , - footer : - time :
    • HTML4 HTML5 <div class=”header”> <header></header>
    • DEMO HTML4 -> HTML5 Live Coding http://freehtml5templates.com http://initializr.com/
    • CANVAS , , , 2 3D API openGL WebGL .
    • CANVAS•• https://mozillademos.org/demos/runfield/demo.html• http://worldsbiggestpacman.com/
    • CANVAS•• http://mugtug.com/sketchpad/• http://muro.deviantart.com/
    • CANVAS• SNS• http://foursquareplayground.com/
    • CANVAS : http://caniuse.com/
    • CANVAS • Line • Text • Curves • Composites • Paths • Transformations • Shapes • Images Manipulation • Fill Styles • Animation • Images • Interactivity http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/
    • 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();
    • 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();
    • 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();
    • CANVASvar 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);
    • CANVASvar 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);
    • CANVASfunction 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);
    • CANVAS• ExplorerCanvas• - http://code.google.com/p/explorercanvas/• IE6-8 Canvas JS• VML TAG
    • 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
    • WEBGL DEMO http://ro.me http://alteredqualia.com/canvasmol
    • SVG(SCALABLE VECTOR GRAPHICS) 2 XML W3C . . Flash, SilverLight RIA .
    • SVG(SCALABLE VECTOR GRAPHICS)
    • SVG(SCALABLE VECTOR GRAPHICS) pixel vector
    • SVG(SCALABLE VECTOR GRAPHICS) : http://caniuse.com/
    • 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");
    • DEMO http://svg-wow.org/ http://dev.xguru.net/html5/#svg-example-slide http://jsdo.it/event/svggirl
    • VIDEO HTML5 VIDEO . (Flash Player), (SilverLight) Plug In . HTML5 Video Plug In .
    • VIDEO Vimeo’s HTML5 beta: http://vimeo.com/blog:268 YouTube’s HTML5 beta: http://www.youtube.com/html5
    • VIDEO
    • VIDEO CODEC ISSUE• ? . .• WebM• MPEGLA WebM MPEG• .
    • 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 .
    • VIDEO JS function playBtn() { video.play(); } function pauseBtn() { video.pause(); } function stopBtn() { video.pause(); video.currentTime = 0; } function skipBackBtn() { video.currentTime -=2; }
    • VIDEO audio muted , autoplay autoplay controls controls height pixels loop loop poster url url preload preload src url width pixels : www.w3schools.com
    • 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"); }
    • 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 } }
    • 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
    • VIDEO DEMO http://craftymind.com/factory/html5video/CanvasVideo.html http://www.html5video.org/demos
    • AUDIO HTML5 Audio . (Flash Player), (SilverLight) Plug In . HTML5 Audio Plug In .
    • AUDIO
    • AUDIO CODEC ISSUE• VIDEO .• .
    • AUDIO autoplay autoplay controls controls loop loop preload preload src url
    • 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 .
    • AUDIO• Audio.js - http://kolber.github.com/audiojs - OpenSource(MIT)
    • AUDIO DEMO http://lab.simurai.com/ui/zen-player http://daftpunk.themaninblue.com
    • CSS3• Cascading Style Sheet• ( )• W3C
    • CSS3• CSS2.1 Recommendation• CSS3• CSS3• - http://www.w3.org/TR/css3-roadmap• - http://www.w3.org/style/css/current-work
    • CSS3 .......
    • CSS3 .......
    • CSS3• Animation• CSS3• - CSS3.Font• - CSS3.Gradient• - CSS3.Border-Radius• Media Query Response Web UI
    • CSS3• Selectivizr : http://selectivizr.com - IE6-8 CSS3Respond.js : http://github.com/scottjehl/Respond - CSS3 Media Query IE6-8 JS
    • CSS3 DEMO http://mediaqueri.es/ http://webdesignledger.com/inspiration/30-creative-examples-of-responsive-web-design
    • WEB STORAGE • • • (5mb) • • • Local Storage • Session Storage
    • WEB STORAGE
    • 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);
    • WEB STORAGE DEMO
    • WEB SQL DATABASE• SQLLite DB• Insert, Update, Select, Delete, Transaction• HTML5• SQL•••
    • WEB SQL DATABASE• SQL• SQLite• iOS Android http://dev.w3.org/html5/webdatabase/
    • WEB SQL DATABASE
    • WEB SQL DATABASEvar 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); });
    • WEB SQL DATABASE DEMO
    • INDEXED DB• Web SQL Database JS .• (Index)••
    • INDEXED DBvar 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(ObjectStoreName).openCursor();  curRequest.onsuccess = ...;};
    • INDEXED DB
    • APPLICATION CACHE•• Mime text/cache-manifest .• HTML, CSS, JAVASCRIPT, IMAGE URL .• XXX.manifest .
    • APPLICATION CACHE
    • 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
    • APPLICATION CACHE• CACHE : .(DEFAULT)• FALLBACK : URL ,• NETWORK :• ... http://www.html5rocks.com/tutorials/appcache/beginner/
    • APPLICATION CACHE
    • APPLICATION CACHE DEMO
    • WEB SOCKET•• Web Socket XHR 50 .• TCP HTML5 .• . - phpwebsocket, jWebSocket, node.js
    • WEB SOCKET• : http://mobilepp.tistory.com/
    • WEB SOCKET• Web Socket 80 PORT 1 Web Server Client Browser 3 Server WebSocket 2 Server WS PORT
    • 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) {}
    • WEB SOCKET• EasyWebSocket : http://EasyWebSocket.org - HTML5 WebSocket . .
    • WEB SOCKET DEMO http://pusher.com/examples
    • WEB WORKER• .• .• ( ) . Web Worker . - - - - -
    • WEB WORKER
    • WEB WORKER
    • WEB WORKER postMessage(data) onmessage HTML5 Worker (worker.js) onmessage postMessage(data) • • window, document • javascript , • message, postMessage
    • 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); });
    • WEB WORKER DEMO
    • GEOLOCATION• .• .• window.navigator geolocation getCurrentPosition .
    • GEOLOCATION• DEVICE GEOLOCATION .
    • GEOLOCATION
    • GEOLOCATION• getCurrentPosition (successCallback, . errorCallback, option) watchCurrentPosition (successCallback, . errorCallback, successCallback option) watchPosition() . clearWatch(watchID) watchCurrentPosition()
    • GEOLOCATION• enableHightAccurary timeout maximumAge
    • GEOLOCATION• position latitude longitude altitude coords accuracy , (m) altitudeAccuracy (m) heading speed timestamp
    • 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); }
    • GEOLOCATION DEMO
    • FILE API•• Drag & Drop API ActiveX .
    • FILE API
    • FILE API• File name type MIME urn size slice(start, length) BLOB
    • FILE API• FileReader . error onload onprogress onerror readAsBinaryString(fileBlob) readAsText(fileBlob, encoding) readAsDataURL(file) DataURL
    • 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()); } };
    • 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); };
    • FILE API DEMO
    • DRAG & DROP API• Drag&Drop• File API ActiveX .
    • DRAG & DROP API
    • 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
    • DRAG & DROP API DEMO
    • FORM• .• , .
    • FORM• input type tel search url URL email datetime / date month week time datetime-local / number range color # FF8800 16
    • FORM
    • 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/
    • FORM DEMO
    • HTML5 HTML5 HTML5 - - PC 4G - - - - - - HTML5 - W3C -
    • • 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
    • Q&A