Post on 13-May-2015
윤 석 찬
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>
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/
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/
Open Mobile Web OS
– 웹 기반 앱의 실행에 최적화
– 폐쇄형 상용 모바일 OS의 대안
주요 구성
– Gaia – 유저인터페이스
– Gecko – 웹 런타임
– Linux – Gonk 기반 임베디드 OS
https://wiki.mozilla.org/B2G
Chrome OS
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
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/SVG), 3D(WebGL) – CSS3(Transform, Animation, 3D)
웹 운영체제 – Firefox OS – Chrome OS
비즈니스 플랫폼으로서 웹 – Firefox 마켓플레이스 – 구글 앱스토어
누구나 접근 가능한
모바일 웹의 미래!
Q&A
@channyun http://channy.creation.net