Webware - from Document to Operating System

윤 석 찬

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> 사이트를 참조하시면 됩니다. </p> </body> </html>

http://webware.kr/

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="#">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>

요소간 분리

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

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

Glo

ba

l U

nit

Sh

ipm

en

ts (

00

0)

Quarters After Launch

iPad iPhone iPod

•Source: Gartner, Morgan Stanley Research, as of Q2:11.

0

20

40

60

80

100

120

140

160

180

0 1 2 3 4 5 6 7 8 9 10 11

Glo

ba

l C

um

ula

tive

Un

it S

hip

me

nts

(M

M)

Quarters After Launch

Android iPhone

•Source: Gartner, Morgan Stanley Research, as of Q2:11.

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 BlackBerry,

Windows Mobile, Android and the many variations of the Nokia

platform

- Vic Gundotra, Google Engineering VP

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.

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 DB WebGL

DOM Storage

Web Sockets

CSS3

Device API

WebRTC

WebM Codec

Drag & Drop API

Micro Data

SPDY

ECMA 5th

Audio Data API

WebFont(WOFF)

SVG

•http://caniuse.com/

http://caniuse.com/

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>

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

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.getCurrentPosition(loc);

WebRTC – 아예 서버 의존성 탈피

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)

Plug-in

Internet

NoSQL

Cloud Computing

{"Name": "Cheeso", "Rank": 7}

Structure

Presentation

Behavior

Ajax RESTful

Local Storage

disk

HTML 5 기반 (Web application)

웹 개발 환경의 진화

그러나 아직 웹이 못하는 것

디바이스 제어…

Hand of Greed http://brainiumstudios.com/webapp/

http://arewemobileyet.com/

http://arewemobileyet.com/

Open Mobile Web OS

– 웹 기반 앱의 실행에 최적화

– 폐쇄형 상용 모바일 OS의 대안

주요 구성

– Gaia – 유저인터페이스

– Gecko – 웹 런타임

– Linux – Gonk 기반 임베디드 OS

https://wiki.mozilla.org/B2G

https://wiki.mozilla.org/B2G

Chrome OS

Chrome Web Store

https://chrome.google.com/webstore

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

http://try.jquery.com

http://try.jquery.com/

http://try.jquery.com/

HTML – Open Living Standard

•http://www.whatwg.org/specs/web-apps/current-work/multipage/

http://www.whatwg.org/specs/web-apps/current-work/multipage/





웹 기술의 진화 방향

미래의 웹 기술 서버가 필요 없는 웹 – 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 마켓플레이스 – 구글 앱스토어

누구나 접근 가능한

모바일 웹의 미래!

Q&A

@channyun http://channy.creation.net