윤 석 찬
facebook.com/channyblog
Think about Web
•Universal Access •Semantic •Interoperability
•Trust Evolvability Decentralization Cooler Multimedia!
<html>
<head>
<title>웹웨어 강의</title>
</head>
<body>
<h1>강의 소개</h1>
<p>
본 콘텐츠는 <a href=http://webware.kr>Webware</a>
사이트를 참조...
90년대 웹 문서
<blink>
<marquee>
<font>
Browser War
한국은 특히…
Who are in trouble?
웹 표준 운동
웹의 세가지 요소
•© Doug Bowman
<html>
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Pro...
JVM Platform Web site
Java API Interface Open API
Java
Application
Software Data
Developer Participators User, Small Biz.
...
HTML5
Web Hypertext Application Technology Working Group
%
0
5,000
10,000
15,000
20,000
25,000
30,000
35,000
40,000
45,000
0 1 2 3 4 5 6
GlobalUnitShipments(000)
Quarters After Laun...
0
20
40
60
80
100
120
140
160
180
0 1 2 3 4 5 6 7 8 9 10 11
GlobalCumulativeUnitShipments(MM)
Quarters After Launch
Androi...
Apple TV Google TV Smart TV
Even Google was not rich enough to support all of the different
mobile platforms from Apple’s AppStore to those of the Bla...
The biggest mistake we made, as a
company, was betting too much on
HTML5 rather than native…
It's not that HTML5 is bad. I...
HTML5: 현재의 Web Runtime
2D Canvas Offline
Web Form Markup
Video & Audio
HTML5 Buzz World?
HTML5
File API
Geolocation
Web
Wo...
STRONG
EM#text: a
#text: b
#text: c
p
EM STRONG
EM#text: a
#text: b #text: c
p
STRONG
EM#text: a
#text: b #text: c
p
<p><s...
HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Stri...
Web Form
Audio/Video
2D - Canvas
CSS3 Effects
CSS3 3D
웹의 네 가지 문제점
소프트웨어 설치 문제
로컬 저장 공간 문제
인터랙티브한 유저인터페이스 문제
서버 의존성의 문제
•지메일 모바일 버전
•오프라인에서 사용 가능~
• Web Storage
• Indexed DB
<input type="file" multiple />
<div id=“box" draggable></div>
•File API & Drag/Drop API
•플러그인 없이 파일 첨부 기능 이용 가능~
function loc(position) {
alert(position.coords.latitude +
position.coords.longitude);
}
navigator.geolocation.getCurrentPo...
WebRTC – 아예 서버 의존성 탈피
Plug-in
DB
Model
Internet
View
Controller
<! DOCTYPE XHTML…>
<title>$title</title>
<body>
<h1>Hello, Wolrd</h1>
</body>
</...
Plug-in
Internet
NoSQL
Cloud
Computing
{"Name": "Cheeso",
"Rank": 7}
Structure
Presentation
Behavior
Ajax RESTful
Local
St...
웹 개발 환경의 진화
그러나 아직 웹이 못하는 것
디바이스 제어…
Hand of Greed
http://brainiumstudios.com/webapp/
http://arewemobileyet.com/
Open Mobile Web OS
– 웹 기반 앱의 실행에 최적화
– 폐쇄형 상용 모바일 OS의 대안
주요 구성
– Gaia – 유저인터페이스
– Gecko – 웹 런타임
– Linux – Gonk 기반 임베디드 OS
...
Chrome OS
Chrome Web Store
https://chrome.google.com/webstore
Firefox Marketplace
모바일/PC 앱 배포 채널 제공
developer.mozilla.org
html5rocks.com
•HTML5/CSS3
•https://developer.mozilla.org/ko/demos/detail/the-planetarium/launch
•https://developer.mozilla.org/ko/demos/...
http://try.jquery.com
HTML – Open Living Standard
•http://www.whatwg.org/specs/web-apps/current-
work/multipage/
웹 기술의 진화 방향
미래의 웹 기술
서버가 필요 없는 웹
– DOM Storage, Indexed DB
– WebSocket, WebRTC, Offline App Cache
멀티미디어 기반 웹
– Audio/Video, 2D(Canvas/...
누구나 접근 가능한
모바일 웹의 미래!
Q&A
@channyun
http://channy.creation.net
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Webware - from Document to Operating System
Upcoming SlideShare
Loading in...5
×

Webware - from Document to Operating System

1,020

Published on

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,020
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
17
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Webware - from Document to Operating System "

  1. 1. 윤 석 찬 facebook.com/channyblog
  2. 2. Think about Web •Universal Access •Semantic •Interoperability •Trust Evolvability Decentralization Cooler Multimedia!
  3. 3. <html> <head> <title>웹웨어 강의</title> </head> <body> <h1>강의 소개</h1> <p> 본 콘텐츠는 <a href=http://webware.kr>Webware</a> 사이트를 참조하시면 됩니다. </p> </body> </html>
  4. 4. 90년대 웹 문서 <blink> <marquee> <font>
  5. 5. Browser War
  6. 6. 한국은 특히…
  7. 7. Who are in trouble?
  8. 8. 웹 표준 운동
  9. 9. 웹의 세가지 요소 •© Doug Bowman
  10. 10. <html> <div id="header"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </html> <style type=“text/css”> #header li { float:left; background:url("left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; } </style> <script language=“text/javascript”> var document.getElementbyID(“header”); </script> 요소간 분리
  11. 11. JVM Platform Web site Java API Interface Open API Java Application Software Data Developer Participators User, Small Biz. API Lock-in Key Factor Data Lock-in
  12. 12. HTML5
  13. 13. Web Hypertext Application Technology Working Group %
  14. 14. 0 5,000 10,000 15,000 20,000 25,000 30,000 35,000 40,000 45,000 0 1 2 3 4 5 6 GlobalUnitShipments(000) Quarters After Launch iPad iPhone iPod •Source: Gartner, Morgan Stanley Research, as of Q2:11.
  15. 15. 0 20 40 60 80 100 120 140 160 180 0 1 2 3 4 5 6 7 8 9 10 11 GlobalCumulativeUnitShipments(MM) Quarters After Launch Android iPhone •Source: Gartner, Morgan Stanley Research, as of Q2:11.
  16. 16. Apple TV Google TV Smart TV
  17. 17. Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform - Vic Gundotra, Google Engineering VP
  18. 18. The biggest mistake we made, as a company, was betting too much on HTML5 rather than native… It's not that HTML5 is bad. I'm actually, on long-term, really excited about it. One of the things that's interesting is we actually have more people on a daily basis using mobile web Facebook than we have using our iOS or Android apps combined. So mobile web is a big thing for us.
  19. 19. HTML5: 현재의 Web Runtime 2D Canvas Offline Web Form Markup Video & Audio HTML5 Buzz World? HTML5 File API Geolocation Web Workers XMLHttpRequest 2 Server-Sent Events Indexed DBWebGL DOM Storage Web Sockets CSS3 Device API WebRTC WebM Codec Drag & Drop API Micro Data SPDY ECMA 5th Audio Data API WebFont(WO FF) SVG •http://caniuse.com/
  20. 20. STRONG EM#text: a #text: b #text: c p EM STRONG EM#text: a #text: b #text: c p STRONG EM#text: a #text: b #text: c p <p><strong>a<em>b</strong>c</em>
  21. 21. HTML 4.01 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html> DOCTYPE
  22. 22. Web Form
  23. 23. Audio/Video
  24. 24. 2D - Canvas
  25. 25. CSS3 Effects
  26. 26. CSS3 3D
  27. 27. 웹의 네 가지 문제점 소프트웨어 설치 문제 로컬 저장 공간 문제 인터랙티브한 유저인터페이스 문제 서버 의존성의 문제
  28. 28. •지메일 모바일 버전 •오프라인에서 사용 가능~
  29. 29. • Web Storage • Indexed DB
  30. 30. <input type="file" multiple /> <div id=“box" draggable></div>
  31. 31. •File API & Drag/Drop API •플러그인 없이 파일 첨부 기능 이용 가능~
  32. 32. function loc(position) { alert(position.coords.latitude + position.coords.longitude); } navigator.geolocation.getCurrentPosition(loc);
  33. 33. WebRTC – 아예 서버 의존성 탈피
  34. 34. Plug-in DB Model Internet View Controller <! DOCTYPE XHTML…> <title>$title</title> <body> <h1>Hello, Wolrd</h1> </body> </html> body { font-size: 9pt;} h1 {color:blue;} Function popup(url) { window.open(url); } Structure Presentation Behavior c.f. 과거 웹 개발 (Web Document)
  35. 35. Plug-in Internet NoSQL Cloud Computing {"Name": "Cheeso", "Rank": 7} Structure Presentation Behavior Ajax RESTful Local Storage disk HTML 5 기반 (Web application)
  36. 36. 웹 개발 환경의 진화
  37. 37. 그러나 아직 웹이 못하는 것 디바이스 제어…
  38. 38. Hand of Greed http://brainiumstudios.com/webapp/
  39. 39. http://arewemobileyet.com/
  40. 40. Open Mobile Web OS – 웹 기반 앱의 실행에 최적화 – 폐쇄형 상용 모바일 OS의 대안 주요 구성 – Gaia – 유저인터페이스 – Gecko – 웹 런타임 – Linux – Gonk 기반 임베디드 OS https://wiki.mozilla.org/B2G
  41. 41. Chrome OS
  42. 42. Chrome Web Store https://chrome.google.com/webstore
  43. 43. Firefox Marketplace
  44. 44. 모바일/PC 앱 배포 채널 제공
  45. 45. developer.mozilla.org
  46. 46. html5rocks.com
  47. 47. •HTML5/CSS3 •https://developer.mozilla.org/ko/demos/detail/the-planetarium/launch •https://developer.mozilla.org/ko/demos/detail/3d-image-transitions/launch •https://developer.mozilla.org/ko/demos/detail/minipaint/launch •https://developer.mozilla.org/ko/demos/detail/ghostwriter-art-studio/launch •WebFont •http://tympanus.net/Tutorials/InteractiveTypographyEffects/index4.html •http://fff.cmiscm.com/#!/main •Canvas •http://9elements.com/io/projects/html5/canvas/ •http://spielzeugz.de/html5/liquid-particles.html •http://ie.microsoft.com/testdrive/Performance/AsteroidBelt/# •https://developer.mozilla.org/en-US/demos/detail/3d-grapher/launch •http://fff.cmiscm.com/#!/main •Video •https://developer.mozilla.org/ko/demos/detail/remixing-reality/launch •https://people.mozilla.org/~prouget/demos/tracker/tracker.xhtml •WegGL •http://helloracer.com/webgl/ •http://www.eveoline.com/universe/spaceships •http://thinkercad.com •http://ro.me
  48. 48. http://try.jquery.com
  49. 49. HTML – Open Living Standard •http://www.whatwg.org/specs/web-apps/current- work/multipage/
  50. 50. 웹 기술의 진화 방향
  51. 51. 미래의 웹 기술 서버가 필요 없는 웹 – DOM Storage, Indexed DB – WebSocket, WebRTC, Offline App Cache 멀티미디어 기반 웹 – Audio/Video, 2D(Canvas/SVG), 3D(WebGL) – CSS3(Transform, Animation, 3D) 웹 운영체제 – Firefox OS – Chrome OS 비즈니스 플랫폼으로서 웹 – Firefox 마켓플레이스 – 구글 앱스토어
  52. 52. 누구나 접근 가능한 모바일 웹의 미래!
  53. 53. Q&A @channyun http://channy.creation.net

×