Embed Size (px)
DESCRIPTION
[30회 정기세미나] HTML5 실무적용 전략 HTML5 어디까지 왔나? / 발표자 황정현
Citation preview
어디까지 왔나?
발표자 : 황정현
2011년 7월 7일 목요일
소 개황정현
웹개발1팀장
ASP.NET 시삽Blog : http://using.tistory.com
Twiiter : @y2kpooh
Email : [email protected]
2011년 7월 7일 목요일
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
2011년 7월 7일 목요일
HTML5 HISTORY
• 웹 문서에서 웹 어플리케이션으로의 진화
• W3C HTML4.01 -> XHTML 1.0 -> XHTML 1.1
• WHATWG Web Application 1.0
2011년 7월 7일 목요일
HTML5 HISTORY
현재 HTML
2011년 7월 7일 목요일
WHY HTML5?
• W3C 제정 웹표준 기술
• 새롭게 추가된 API기능을 통한 어플리케이션 제작 가능
• 플래시, 엑티브X의 역활을 대체가능
• 현재의 모바일 플랫폼에서 활용범위 많음
• 웹브라우저 벤더들이 빠르게 제품에 반영
2011년 7월 7일 목요일
WHY HTML5?
• 다양한 디바이스와 플랫폼에 대응하기 위해서는 비용이 많이 소모된다.
• 웹으로 제작하면 브라우저가 내장된 모든 디바이스와 플랫폼에는 동일한 컨텐츠를 보여줄 수 있다.
2011년 7월 7일 목요일
HTML5 현황-1
W3C HTML WG의 공동의장iOS Flash미지원, HTML5 적극 지원사파리 개발자센터 HTML5 Demo&Guide 제공“표준이 아닌 것에 종속되면 그 말로가 어찌되는지 우리는 잘 알고 있다.” 스티브 잡스
2011년 7월 7일 목요일
HTML5 현황-2
구글 기어스 포기, HTML5 집중 선언크롬 브라우저 W3C 엄청난 리소스 제공유투브 HTML5 서비스 시작“구글은 HTML5에 사활을 걸었다.” “모든 플랫폼에 앱을 만들어 지원하기에는 돈이 없다.”
2011년 7월 7일 목요일
HTML5 현황-3
IE9 HTML5 지원Mix11 HTML5 기술 다수 선보여 IE10 플랫폼 프리뷰 1 공개 HTML5지원Windows SkyDrive Silverlight포기 HTML5선언Window8 HTML5 앱개발 사용 가능
2011년 7월 7일 목요일
HTML5 현황-4
2011년 7월 7일 목요일
HTML5 현황-5
2011년 7월 7일 목요일
HTML5 현황-6
2011년 7월 7일 목요일
HTML5 브라우저 점유율
전세계 http://gs.statcounter.com
2011년 7월 7일 목요일
HTML5 브라우저 점유율
한국 http://gs.statcounter.com
2011년 7월 7일 목요일
HTML5 브라우저 점유율
http://gs.statcounter.com북한2011년 7월 7일 목요일
HTML5 모바일 브라우저 점유율
전세계 http://gs.statcounter.com
2011년 7월 7일 목요일
HTML5 모바일 브라우저 점유율
한국 http://gs.statcounter.com
2011년 7월 7일 목요일
HTML5 브라우저 점유율
2011년 7월 7일 목요일
HTML5 브라우저 호환성
HTML5
0 75 150 225 300
크롬12크롬11파이어폭스4/5오페라11.01IE 10 PP2사파리5.0.4IE9익스플로러8
293288240234
228130
32
231
http://html5test.com
2011년 7월 7일 목요일
시멘틱 엘리먼트 - Section : 문서나 애플리케이션의 섹션
- Nav : 네비게이션
- article : 문서, 페이지, 사이트 등에서 하나의 독립된 요소
- aside : 문서의 주요 컨텐츠와는 별개의 영역을 정의
- hgroup : 문서의 제목 혹은 주제이 주요 구절 등이 여러 항목
- header : 문서 소개, 상단
- footer : 문서 하단
- time : 시간을 나타냄
2011년 7월 7일 목요일
시멘틱 엘리먼트
<div class=”header”> <header></header>
HTML4 HTML5
2011년 7월 7일 목요일
시멘틱 엘리먼트
DEMOHTML4 -> HTML5 Live Coding
http://freehtml5templates.com
http://initializr.com/
2011년 7월 7일 목요일
CANVAS
자바스크립트를 사용해서 웹 페이지나 웹 어플리케이션안에서 선, 도형, 곡선, 기타 그림 객체를 랜더링할 수
있는 2차원 드로잉 콘텍스트
3D를 위한 API도 존재하며 openGL을 기반으로작성된 WebGL이 있다.
브라우저의 특정 사각영역내에 그림을 그리게 되며픽셀 단위로 조작이 가능
2011년 7월 7일 목요일
CANVAS• 게임
• https://mozillademos.org/demos/runfield/demo.html
• http://worldsbiggestpacman.com/
2011년 7월 7일 목요일
CANVAS• 웹 그림판
• http://mugtug.com/sketchpad/
• http://muro.deviantart.com/
2011년 7월 7일 목요일
CANVAS
• SNS
• http://foursquareplayground.com/
2011년 7월 7일 목요일
CANVAS
• Line
• Curves
• Paths
• Shapes
• Fill Styles
• Images
• Text
• Composites
• Transformations
• Images Manipulation
• Animation
• Interactivity
http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/
2011년 7월 7일 목요일
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();
2011년 7월 7일 목요일
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();
2011년 7월 7일 목요일
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();
2011년 7월 7일 목요일
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);
2011년 7월 7일 목요일
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);
2011년 7월 7일 목요일
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);
2011년 7월 7일 목요일
CANVAS 미 지원 브라우저 처리
• ExplorerCanvas
• - http://code.google.com/p/explorercanvas/
• IE6-8 Canvas 지원 오픈소스 JS라이브러리
• 내부적으로 VML TAG로 변환해서 사용
2011년 7월 7일 목요일
CANVAS
http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.htmlhttp://www.effectgames.com/demos/canvascyclehttp://mrdoob.com/projects/chromeexperiments/ball_pool/http://www.openrise.com/lab/FlowerPower/FireFox4 Runfield 게임 : http://j.mp/gW6PadA Look At HTML5 and its Canvas Tag : http://bit.ly/doTmeA이미지 편집기 데모 : http://muqtuq.com/darkroomhttp://www.beautyoftheweb.comhttp://j.mp/gTiBBShtml5demos.comhttp://dev.xguru.net/html5/#canvas-2d-examplehttp://www.kesiev.com/akihabara/http://mugtug.com/sketchpad/http://muro.deviantart.com/http://worldsbiggestpacman.comhttp://foursquareplayground.com
DEMO
2011년 7월 7일 목요일
WEBGL
DEMOhttp://ro.me
http://alteredqualia.com/canvasmol
2011년 7월 7일 목요일
SVG(SCALABLE VECTOR GRAPHICS)
2차원 벡터 그래픽을 표현하기 위한
XML기반의 파일 형식으로 W3C표준이다.
화려한 그래픽이 웹에서 구현 가능.
Flash, SilverLight 등의 RIA기술의 대체기술에 알맞음.
2011년 7월 7일 목요일
SVG(SCALABLE VECTOR GRAPHICS)
2011년 7월 7일 목요일
SVG(SCALABLE VECTOR GRAPHICS)
pixel vector
2011년 7월 7일 목요일
SVG(SCALABLE VECTOR GRAPHICS)
출처 : http://caniuse.com/
2011년 7월 7일 목요일
SVG 미 지원 브라우저 처리• Raphael
• - http://raphaeljs.com
• IE6-8 SVG 지원 오픈소스 JS라이브러리• 내부적으로 VML TAG로 변환해서 사용• Raphael 활용가이드 : http://j.mp/gBqUvC
// Creates canvas 320 × 200 at 10, 50var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10var 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 whitecircle.attr("stroke", "#fff");
2011년 7월 7일 목요일
SVG(SCALABLE VECTOR GRAPHICS)
DEMOhttp://svg-wow.org/
http://dev.xguru.net/html5/#svg-example-slidehttp://jsdo.it/event/svggirl
2011년 7월 7일 목요일
VIDEOHTML5의 등장 전까지 웹에서 VIDEO를 지원하지 않았다.
어도비의 플래시 플레이어(Flash Player), 마이크로소프트의 실버라이트(SilverLight)와 같은 별도의 Plug In이 필요했다.
이제 HTML5의 Video 마크업 태그만으로 별도의 Plug In 없이 브라우저 내에서
멀티미디어를 보여줄 수 있다.
2011년 7월 7일 목요일
VIDEO
Vimeo’s HTML5 beta: http://vimeo.com/blog:268YouTube’s HTML5 beta: http://www.youtube.com/html5
2011년 7월 7일 목요일
VIDEO
2011년 7월 7일 목요일
VIDEO CODEC ISSUE• 코덱이란? 비디오 압축 및 재생 기술이다. 상당수 관련 기술에 특허가 걸려있다.
• 구글은 WebM이라는 오픈소스 코덱을 인수 후 공개
• MPEGLA는 WebM 코덱이 MPEG의 특허권을 침해했는지 조사중
• 현재 브라우저별로 지원되는 코덱이 다르다.
2011년 7월 7일 목요일
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가 지원되지 않는 브라우저의 경우 대체 텍스트 또는 플러그인으로 대체 가능하다.
2011년 7월 7일 목요일
VIDEO JS 제어하기function playBtn() { video.play();} function pauseBtn() { video.pause();} function stopBtn() { video.pause(); video.currentTime = 0;} function skipBackBtn() { video.currentTime -=2;}
2011년 7월 7일 목요일
VIDEO 속성
속성 값 설명audio muted 오디오 소리유무, 음소거
autoplay autoplay 태그 로딩시 비디오 자동 재생 설정controls controls 재생 컨트롤 표시height pixels 높이값loop loop 동영상 자동 재시작
poster url 동영상을 나타내는 이미지 url
preload preload 페이지로딩과 동시 브라우저는 비디오 다운로드src url 동영상 경로
width pixels 가로값
출처 : www.w3schools.com
2011년 7월 7일 목요일
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"''); }
2011년 7월 7일 목요일
VIDEO 지원여부 확인
if(Modernizr.video) { if(Modernizr.video.ogg){ //ogg지원 }else if(Modernizr.video.h264){ //h.264지 } }
Modernizr를 사용한 방법
- http://www.modernizr.com
- HTML5Shiv 기능을 포함하여 CSS3까지 더 폭넓은 지원
- Modernizr 객체를 생성하여 HTML5, CSS3 기능이 되는지 검사
2011년 7월 7일 목요일
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 지원
2011년 7월 7일 목요일
VIDEO
DEMOhttp://craftymind.com/factory/html5video/CanvasVideo.html
http://www.html5video.org/demos
2011년 7월 7일 목요일
AUDIO
HTML5의 등장 전까지 웹에서 Audio를 지원하지 않았다.
어도비의 플래시 플레이어(Flash Player), 마이크로소프트의 실버라이트(SilverLight)와 같은 별도의 Plug In이 필요했다.
이제 HTML5의 Audio 마크업 태그만으로 별도의 Plug In 없이 브라우저 내에서
멀티미디어를 보여줄 수 있다.
2011년 7월 7일 목요일
AUDIO
2011년 7월 7일 목요일
AUDIO CODEC ISSUE
• VIDEO태그와 마찬가지로 코덱 이슈가 있다.
• 현재 브라우저별로 지원되는 코덱이 다르다.
2011년 7월 7일 목요일
AUDIO속성
속성 값 설명autoplay autoplay 태그 로딩시 비디오 자동 재생 설정controls controls 재생 컨트롤 표시
loop loop 동영상 자동 재시작preload preload 페이지로딩과 동시 브라우저는 비디오 다운
로드src url 동영상 경로
2011년 7월 7일 목요일
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가 지원되지 않는 브라우저의 경우 대체 텍스트 또는 플러그인으로 대체 가능하다.
2011년 7월 7일 목요일
AUDIO 미 지원 브라우저 처리
• Audio.js
- http://kolber.github.com/audiojs - OpenSource(MIT)
2011년 7월 7일 목요일
AUDIO
DEMOhttp://lab.simurai.com/ui/zen-playerhttp://daftpunk.themaninblue.com
2011년 7월 7일 목요일
CSS3
• Cascading Style Sheet
• 마크업 언어가 실제 표시(디자인) 되는 방법을 기술하는 언어
• W3C표준
2011년 7월 7일 목요일
CSS3 표준화 일정• 현재 사용중인 CSS2.1 얼마전 Recommendation
• CSS3는 현재 진행중
• CSS3 속성별 표준화 시기
• - http://www.w3.org/TR/css3-roadmap
• - http://www.w3.org/style/css/current-work
2011년 7월 7일 목요일
CSS3 브라우저 호환성
.......2011년 7월 7일 목요일
CSS3 브라우저 호환성
.......2011년 7월 7일 목요일
CSS3 장점
• Animation효과를 통하여 다이나믹 한 화면 구성 가능
• CSS3를 이용하여 이미지 대체 가능
• - CSS3.Font
• - CSS3.Gradient
• - CSS3.Border-Radius
• Media Query를 이용하여 Response Web UI 가능
2011년 7월 7일 목요일
CSS3 미지원 브라우저 처리
• Selectivizr : http://selectivizr.com
- IE6-8에서 CSS3를 에뮬레이터 해주는 자바스크립트 유틸
Respond.js : http://github.com/scottjehl/Respond
- CSS3 Media Query를 지원하지 않는 IE6-8을 위한 JS라이브러리
2011년 7월 7일 목요일
CSS3
DEMOhttp://mediaqueri.es/
http://webdesignledger.com/inspiration/30-creative-examples-of-responsive-web-design
2011년 7월 7일 목요일
WEB STORAGE
• 클라이언트에 데이터 저장 가능
• 도메인별로 관리
• 기존 쿠키보다 비교적 큰 용량을 제공(5mb)
• 서버로 데이터를 전송하지 않음
• 유효기간이 없음
• Local Storage
• Session Storage
2011년 7월 7일 목요일
WEB STORAGE 호환성
2011년 7월 7일 목요일
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');
2011년 7월 7일 목요일
WEB STORAGE
DEMO
2011년 7월 7일 목요일
WEB SQL DATABASE
• SQLLite을 기반으로 하는 브라우저에 내장된 DB
• Insert, Update, Select, Delete, Transaction 지원
• HTML5 표준 스펙에서 제외된 상태
• SQL문을 이용하여 자유롭게 쿼리 가능
• 오프라인에서 사용가능
• 속도가 빠르다
• 도메인 단위로 관리
2011년 7월 7일 목요일
WEB SQL DATABASE
• SQL표준 책정의 어려움
• SQLite업그레이드시 브라우저 재 배포 문제
• 모바일 환경 iOS와 Android에서 지원
http://dev.w3.org/html5/webdatabase/
2011년 7월 7일 목요일
WEB SQL DATABASE 호환성
2011년 7월 7일 목요일
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); });
2011년 7월 7일 목요일
WEB SQL DATABASE
DEMO
2011년 7월 7일 목요일
INDEXED DB
•Web SQL Database와 달리 JS를 통해서 컨트롤 한다.
•빠른 검색을 위한 인덱스(Index)생성 가능
•트랜잭션 관리
•비동기 접근 가능
2011년 7월 7일 목요일
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 = ...;};
2011년 7월 7일 목요일
INDEXED DB 호환성
2011년 7월 7일 목요일
APPLICATION CACHE
• 인터넷 오프라인으로 웹 사이트를 이용 가능
• 인터넷 임시파일과 유사하며 Mime 타입으로 text/cache-manifest 설정해야한다.
• HTML, CSS, JAVASCRIPT, IMAGE 등 URL을 통해 접근하는 파일이 대상이다.
• XXX.manifest파일을 통해서 설정한다.
2011년 7월 7일 목요일
APPLICATION CACHE
2011년 7월 7일 목요일
APPLICATION CACHE
CACHE MANIFEST # Version 1.0.0.0 CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js
<!DOCTYPE html> <html manifest="cache.manifest">
2011년 7월 7일 목요일
APPLICATION CACHE
• CACHE : 캐시할 대상을 기술한다.(DEFAULT)
• FALLBACK : 해당 URL의 리소스가 없을 때, 대체 리소스 처리
• NETWORK : 캐쉬하지 않을 목록
• 더 자세히 알고 싶다면... http://www.html5rocks.com/tutorials/appcache/beginner/
2011년 7월 7일 목요일
APPLICATION CACHE
2011년 7월 7일 목요일
APPLICATION CACHE
DEMO
2011년 7월 7일 목요일
WEB SOCKET
• 웹 기술의 단점 중 하나이던 통신 기술의 부재
• Web Socket의 등장으로 실시간으로 통신이 가능하게 되었으며 테스트 결과 XHR보다 50배나 빠른 것으로 나타났다.
• 서버와 브라우저가 지속적으로 연결된 TCP라인을 통해 실시간으로 데이터를 주고 받을 수 있도록 하는 HTML5사양이다.
• 서버측 따로 구현필요함.
- phpwebsocket, jWebSocket, node.js
2011년 7월 7일 목요일
WEB SOCKET
출처 : http://mobilepp.tistory.com/
• 기존의 통신 방식
2011년 7월 7일 목요일
WEB SOCKET• Web Socket 구조
ClientBrowser Server
Web Server
WebSocketServer
1
2
3
80 PORT
WS PORT
2011년 7월 7일 목요일
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) {}
2011년 7월 7일 목요일
WEB SOCKET 미 지원 브라우저 처리
• EasyWebSocket : http://EasyWebSocket.org
- 모든 브라우저에서 사용할 수 있는 HTML5 WebSocket
라이브러리. 함수구조가 표준 웹소캣과 동일.
미지원 브라우저에서는 플래시를 사용
2011년 7월 7일 목요일
WEB SOCKET
DEMOhttp://pusher.com/examples
2011년 7월 7일 목요일
WEB WORKER• 브라우저가 자바스크립트를 백그라운드에서 실행할 수 있다.
• 웹에서 멀티 스레드 구현 가능.
• 스크립트를 이용하여 복잡한 수학계산을 하거나 무거운 연산을 실행하면
브라우저는 먹통(응답 없음) 상태가 된다. 이러한 상황을 Web Worker를 이용하여
우회할 수 있다.
- 긴 문서의 문자 서식 지정
- 문법 강조 기능
- 이미지 프로세싱
- 이미지 합성
- 덩치큰 배열 처리2011년 7월 7일 목요일
WEB WORKER
2011년 7월 7일 목요일
WEB WORKER
2011년 7월 7일 목요일
WEB WORKER
HTML5
onmessage
Worker(worker.js)
onmessagepostMessage(data)
postMessage(data)
• 별도의 스레드로 돌아가는 워커와 변수 공유 불가
• window, document 객체 접근 불가
• javascript 변수, 메소드 접근 불가
• message, postMessage를 통해서만 통신 가능
2011년 7월 7일 목요일
WEB WORKER
var myWorker = new Worker("myWorker.js");myWorker.onmessage = function(event){ //Worker에 의해 실행된 CallBack result = event.data;}myWorker.postMessage("call work");//Worker종료myWorker.terminate();
self.addEventListener("message", function(event) { self.postMessage(event.data);});
HTML5
Worker
2011년 7월 7일 목요일
WEB WORKER
DEMO
2011년 7월 7일 목요일
GEOLOCATION
• 웹 페이지가 실행되는 데스크탑 또는 단말기의 위치 정보를 얻어 올 수 있다.
• 사용자의 정식 허가 없이는 위치정보를 확인 할 수 없다.
• window.navigator에 정의된 geolocation개체의 getCurrentPosition메서드를 이용하며 위치정보 확인 작업은 비동기로 이루어진다.
2011년 7월 7일 목요일
GEOLOCATION
• DEVICE의 GEOLOCATION정보에 접근할 때에는 사용자의 승인을 받는다.
2011년 7월 7일 목요일
GEOLOCATION
2011년 7월 7일 목요일
GEOLOCATION
메소드 설명
getCurrentPosition(successCallback,
errorCallback,option)
현재 위치를 얻는다.
watchCurrentPosition(successCallback,
errorCallback,option)
현재 위치를 계속해서 얻는다.디바이스 위치가 변경될떄마다 successCallback을 실행
clearWatch(watchID)watchPosition()을 중지시킨다.파라메터는 watchCurrentPosition() 변수 설정
• 메소드
2011년 7월 7일 목요일
GEOLOCATION
옵션 설명
enableHightAccurary 정확도가 높은 위치 정보 요청
timeout 위치정보 구하는 제한 시간 설정
maximumAge 위치정보의 유효기간을 설정
• 옵션
2011년 7월 7일 목요일
GEOLOCATION
• position객체 속성
속성 속성들 설명
coords
latitude 위도
coords
longitude 경도
coords
altitude 표고coords accuracy 위도,경도의 오차(m)coords
altitudeAccuracy 표고의 오차(m)
coords
heading 디바이스의 진행방향
coords
speed 디바이스의 진행 속도timestamptimestamp 위치 정보를 얻은 시각
2011년 7월 7일 목요일
GEOLOCATIONif (!!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); }
2011년 7월 7일 목요일
GEOLOCATION
DEMO
2011년 7월 7일 목요일
FILE API• 웹 어플리케이션에서 로컬 파일 접근 가능
• Drag & Drop API와 조합하면 ActiveX만으로 구현해야 했던 파일 업로드 컨트롤 구현이 가능하다.
2011년 7월 7일 목요일
FILE API
2011년 7월 7일 목요일
FILE API
속성 설명
name 파일이름
type 파일의 MIME타입
urn 파일 식별자
size 파일크기
slice(start, length) 시작위치와 끝위치를 지정하여 파일을 BLOB형태로 리턴
• File
파일 메타 정보 조회
2011년 7월 7일 목요일
FILE API• FileReader
속성 설명error 에러 발생 했을때 에러정보
onload 파일을 모두 읽어 들였을때 호출되는 이벤트 핸들러
onprogress 읽어들이기의 진행 상태를 알 수 있는 이벤트 핸들러
onerror 읽어들이기 도중 에러 발생 시 호출되는 이벤트 핸들러
readAsBinaryString(fileBlob) 파일 내용을 읽어들여 바이너리 문자열로 리턴
readAsText(fileBlob, encoding) 파일 내용을 읽어들여 문자열로 리턴
readAsDataURL(file) 파일 내용을 읽어들여 DataURL형식의 문자열로 저장
파일 내용을 읽어 들일 수 있다.
2011년 7월 7일 목요일
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()); }};
2011년 7월 7일 목요일
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');};
2011년 7월 7일 목요일
FILE API
DEMO
2011년 7월 7일 목요일
DRAG & DROP API• 웹에서 객체를 Drag&Drop지원
• File API와 조합하면 ActiveX만으로 구현해야 했던 파일 업로드 컨트롤 구현이 가능하다.
2011년 7월 7일 목요일
DRAG & DROP API
2011년 7월 7일 목요일
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 끌 요소가 감소되었을 때 실행되도록 스크립트
• 속성
• 이벤트
2011년 7월 7일 목요일
DRAG & DROP API
DEMO
2011년 7월 7일 목요일
FORM
• 새로운 폼 태그가 추가되었다.
• 달력, 이메일 등의 폼 태그를 자바스크립트의 도움없이 쉽고 빠르게 개발 가능하다.
2011년 7월 7일 목요일
FORM속성 설명tel 입력 값 형식의 전화 번호입니다
search 입력 필드가 검색 분야입니다url 입력 값은 URL입니다
email 입력값은 하나 이상의 이메일 주소입니다datetime 입력 값은 날짜 및 / 또는 시간입니다
date 입력 값은 날짜입니다month 입력값은 한 달입니다week 입력 값은 일주일입니다time 입력 값 유형의 시간이다
datetime-local 입력 값은 / 시간 현지 날짜입니다number 입력 값은 숫자입니다range 입력 값은 주어진 범위의 숫자입니다color 입력 값 #처럼 FF8800 16 진수 색상입니다
• input type
2011년 7월 7일 목요일
FORM
2011년 7월 7일 목요일
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/
2011년 7월 7일 목요일
FORM
DEMO
2011년 7월 7일 목요일
HTML5 이슈 및 전망
HTML5이슈
- 브라우저 호환성
- 브라우저 처리속도
- 보안
- 개발도구
- W3C 표준화 개발 일정
HTML5전망
- 테블릿PC 활성화 및 4G환경의 웹앱 활성화 기대
- 모바일 중심으로 하이브리드 앱 영향력 확대
- 다양한 앱스토어 출현 예상
- 모바일을 중심으로 HTML5웹앱 활성화
- 다양한 웹어플리케이션 개발시도
2011년 7월 7일 목요일
참고자료• 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
2011년 7월 7일 목요일
Q&A
2011년 7월 7일 목요일
![[2014 CodeEngn Conference 10] 김학수 - 하이퍼바이저 루트킷, 어디까지 가봤니](https://img.pdfslide.tips/doc/110x75/546b276daf795919088b5441/2014-codeengn-conference-10--5584ac5ff1aa6.jpg)
![[이슈분석]웨어러블 컴퓨터, 어디까지 왔나 1](https://img.pdfslide.tips/doc/110x75/55a876c51a28ab39548b48b0/-155a876c51a28ab39548b48b0.jpg)
