Webware - from Document to Operating System
•
10 likes•2,259 views
This document discusses the past, present and future of web technologies. It covers early web documents from the 1990s that used technologies like blink and marquee. It also discusses the browser wars of that time and the standards movement. The document then covers modern web technologies like HTML5, CSS3, Canvas, WebGL and APIs for multimedia, geolocation, offline apps and more. It discusses the evolution of the web to a runtime for applications rather than just documents. Finally, it discusses potential futures for the web like browser-based operating systems and the web as a business platform.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Webware - from Document to Operating System
Similar to Webware - from Document to Operating System (20)
More from Channy Yun
More from Channy Yun (20)
Recently uploaded
Recently uploaded (20)
Webware - from Document to Operating System
- 3. Think about Web •Universal Access •Semantic •Interoperability •Trust Evolvability Decentralization Cooler Multimedia!
- 5. <html> <head> <title>웹웨어 강의</title> </head> <body> <h1>강의 소개</h1> <p> 본 콘텐츠는 <a href=http://webware.kr>Webware</a> 사이트를 참조하시면 됩니다. </p> </body> </html>
- 7. Browser War
- 8. 한국은 특히…
- 10. Who are in trouble?
- 11. 웹 표준 운동
- 12. 웹의 세가지 요소 •© Doug Bowman
- 13. <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> 요소간 분리
- 16. 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
- 18. HTML5
- 19. Web Hypertext Application Technology Working Group %
- 23. 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.
- 24. 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.
- 26. Apple TV Google TV Smart TV
- 28. 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
- 29. 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.
- 33. 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/
- 34. 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>
- 35. 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
- 36. Web Form
- 39. Audio/Video
- 41. 2D - Canvas
- 42. CSS3 Effects
- 43. CSS3 3D
- 45. 웹의 네 가지 문제점 소프트웨어 설치 문제 로컬 저장 공간 문제 인터랙티브한 유저인터페이스 문제 서버 의존성의 문제
- 47. •지메일 모바일 버전 •오프라인에서 사용 가능~
- 49. • Web Storage • Indexed DB
- 52. <input type="file" multiple /> <div id=“box" draggable></div>
- 53. •File API & Drag/Drop API •플러그인 없이 파일 첨부 기능 이용 가능~
- 54. function loc(position) { alert(position.coords.latitude + position.coords.longitude); } navigator.geolocation.getCurrentPosition(loc);
- 56. WebRTC – 아예 서버 의존성 탈피
- 57. 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)
- 58. Plug-in Internet NoSQL Cloud Computing {"Name": "Cheeso", "Rank": 7} Structure Presentation Behavior Ajax RESTful Local Storage disk HTML 5 기반 (Web application)
- 59. 웹 개발 환경의 진화
- 60. 그러나 아직 웹이 못하는 것 디바이스 제어…
- 65. Open Mobile Web OS – 웹 기반 앱의 실행에 최적화 – 폐쇄형 상용 모바일 OS의 대안 주요 구성 – Gaia – 유저인터페이스 – Gecko – 웹 런타임 – Linux – Gonk 기반 임베디드 OS https://wiki.mozilla.org/B2G
- 66. Chrome OS
- 69. 모바일/PC 앱 배포 채널 제공
- 72. html5rocks.com
- 84. HTML – Open Living Standard •http://www.whatwg.org/specs/web-apps/current- work/multipage/
- 85. 웹 기술의 진화 방향
- 86. 미래의 웹 기술 서버가 필요 없는 웹 – 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 마켓플레이스 – 구글 앱스토어
- 87. 누구나 접근 가능한 모바일 웹의 미래!