Visual Studio를이용한...
Transcript of Visual Studio를이용한...
![Page 1: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/1.jpg)
Visual Studio를이용한웹클라이언트개발-한국마이크로소프트김순근
2014년 2월웹클라이언트개발환경에풍성함을더하다!
![Page 2: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/2.jpg)
전) Microsoft Office R&D
전) Microsoft ASP.NET, VC++ MVP
전) 안철수연구소개발엔지니어
프로젝트SharePoint Designer 2013
Win32/Windows/Web 개발프로젝트다수진행
주요분야Win32, SDK, Windows/Mobile Programming
저서ASP.NET Bible, WP7.5 Bible 외다수집필
김 순 근한국마이크로소프트Sr. Developer Support Engineer
![Page 3: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/3.jpg)
![Page 4: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/4.jpg)
![Page 5: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/5.jpg)
아니,
요즘다들HTML5, HTML5....
그러는데
도대체HTML5가뭐야?
![Page 6: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/6.jpg)
“HTML5는 HTML의차기주요제안버전으로월드와이드웹의핵심마크업언어지.”
“2004년 6월 Web Hypertext
Application Technology Working
Group(WHATWG) 에서
웹애플리케이션 1.0이라는이름으로세부명세작업을시작했는데….”
“2014년 12월최종권고안작성을목표로표준안작업중에있다고.”
![Page 7: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/7.jpg)
![Page 8: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/8.jpg)
모던웹브라우저 (HTML5 지원)기존웹브라우저 (HTML 지원)
플러그인(ActiveX)
![Page 9: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/9.jpg)
비디오및오디오재생기능을웹
브라우저에서지원
다양한 2,3차원그래픽기능을지원
(Canvas, SVG)
네트워크미지원환경에서도웹
이용을가능하게함
카메라및센서,
H/W 기능을웹에서제어가능하게함
![Page 10: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/10.jpg)
웹클라이언트와서버간직접양방향통신가능 (웹소켓)
단말기의지리적인위치정보에접근(Geo-Location)
글씨체, 배경, 색상등다양한스타일및효과기능제공
컨텐츠에의미를부여하여맞춤형검색기능제공
![Page 11: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/11.jpg)
2007.03 : HTML WG 구성
2009.10 : HTML 5.0 초안 (Working Draft) 채택
2012.10 : HTML 5.0 후보표준안채택2012.12 : HTML 5.1 초안 (Working Draft) 시작
2013.12 : HTML 5.0 제안표준안
2014.12 : HTML 5.0 최종표준안 (Recommendation) 예정
![Page 12: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/12.jpg)
*출처 : StatCounter.com
78.35% IE
![Page 13: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/13.jpg)
363
503
446
494
397
0 200 400 600
Internet Explorer 11
Chrome 32
Firefox 26
Opera 18
Safari 7.0
HTML5 Test Scores
Score
*출처 : html5test.com (2014.2 현재)
![Page 14: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/14.jpg)
DemoHtml5test.com
![Page 15: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/15.jpg)
![Page 16: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/16.jpg)
브라우저간호환성
Internet Explorer
Firefox
Chrome
Safari
Opera
…..
다양한장치,
다양한스크린크기
Desktop
Tablet
Smartphone
IPTV
…..
급변하는기술들
HTML5
JavaScript
CSS3
common libraries
…..
웹개발에최적화된통합 IDE - Visual Studio 2013
![Page 17: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/17.jpg)
웹개발자를위한
Visual Studio 2013
![Page 18: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/18.jpg)
JS
CSS
HTML
Web Essentials VS2013 VS2012 VS2010
![Page 19: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/19.jpg)
JS
CSS
HTML
Web Essentials VS2013 WebStorm Aptana Dreamweaver SublimeText
![Page 21: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/21.jpg)
![Page 22: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/22.jpg)
![Page 23: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/23.jpg)
![Page 24: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/24.jpg)
DemoHTML + StyleSheet + JavaScript Editor
![Page 25: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/25.jpg)
![Page 26: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/26.jpg)
DemoBrowserLink + Page Inspector
![Page 28: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/28.jpg)
DemoNuget + AngularJS
![Page 29: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/29.jpg)
http://www.visualstudio.com/
http://www.vswebessentials.com
https://www.nuget.org/
![Page 30: Visual Studio를이용한 웹클라이언트개발download.microsoft.com/download/B/8/3/B837A8DD-B470-4AF4... · 2018-10-16 · “HTML5는HTML의차기 주요제안버전으로 월드와이드웹의핵심마크업](https://reader036.fdocuments.us/reader036/viewer/2022070705/5e8f41c8da29787b991e6199/html5/thumbnails/30.jpg)