2011 Mobile & Web technologies

웹모바일
기술전망

2011 ( @xguru )

•권정혁
➡ 기술전략팀장
- SW Architect
- Developer Evangelist
➡ http://xguru.net
➡ @xguru
➡ guru@xguru.net

2010 was
year of

HTML5
ReadWriteWeb - “Top Trends of 2010 : HTML5”

HTML5 ?
HTML5 ~= HTML + CSS + JS API

Web Desktop App

➠ Web App

Web App ?

➠

➠모바일

왜HTML5가모바일에중요한가?

각모바일플랫폼용
네이티브앱
iOS, Android, WP7, BlackBerry, Symbian, Bada ..

7개의플랫폼을작업
HTML5가미래의플랫폼이다. FacebookCTOBretTaylor

모든플랫폼을네이티브로지원 예산이모자르다
GoogleVPVicGundotra

기관 App 제작비용 다운로드

특허청 특허정보검색 2억6600만원 833건

전라남도 U남도여행길잡이 3억원 6600건
: http://j.mp/korgovapp

Devices 2011

BB PlayBook HP WebOS

CR-48 MS WP7
with
iOS Android Nokia

HTML5,CSS3

Javascript!!!

ResponsiveWebDesign

WebAppStores

DeviceAPI

HybridAppCrossPlatform

HTML(5)

Ofﬂine Device 3D , 2D Performance
Semantics Multi Media Connectivity CSS3
Storage Access Graphics Effects Integration

HTML5어떻게공부하나요?

✓한글HTML5스펙➠http://j.mp/html5ko by ClearBoth.org

✓웹개발자를위한최소스펙➠http://j.mp/html5devel

✓Google의선물➠http://www.html5rocks.com/

✓실전HTML5가이드(한글PDF) ➠http://j.mp/html5guide_ko

✓DiveIntoHTML5➠http://diveintohtml5.org/

HTML5

Android RIM webOS
iOS 3+ 2011 3Q
2.0+ OS6+ 1.4+

6 7 8 9 3+ 6+ 4+ 10+

HTML5 !
• HTML5shiv : HTML5 IE Enabling Script - by Remy Sharp

!--[ifltIE9]
scriptsrc=http://html5shiv.googlecode.com/svn/trunk/html5.js/script
![endif]--

✓ John Resig : http://ejohn.org/blog/html5-shiv/ , IE 6

• Mordernizr - http://www.modernizr.com/
✓ HTML5Shiv CSS3 ( )
✓ Modernizr HTML5, CSS3
if(Modernizr.canvas){
varc=document.createElement('canvas');
varcontext=c.getContext('2d');
//캔버스사용
document.getElementById('canvasContainer').appendChild(c);
}

• HTML5 Boilerplate - http://html5boilerplate.com/
✓ HTML5
✓ Boilerplate Snippet 20 - http://j.mp/hDExIw

HTML5 Initializer

• http://initializr.com/
• HTML5 Boilerplate
• jQuery
• Modernizer / HTML5shiv
•

HTML5 Video Audio
• 20 HTML5 Video Player - http://j.mp/dfxNMQ
✓ Video JS , JW Player , Mediaelement.js , Projekktor ..
✓ Flash Fallback IE

• VideoJS
✓ http://videojs.com/ - Free OpenSource , Skin , Full Screen

• Audio.js
✓ http://kolber.github.com/audiojs/ , OpenSource(MIT)

Javascript !!!
•
• Javascript Library for Mobile
• UI Frameworks
• Application Frameworks
• Server-side JavaScript
• Languages that Compiles to JS

Javascript for Mobile
• - http://zeptojs.com
✓ Mobile ( Mobile WebKit )
✓ jQuery but jQuery ( 26.7 K ) , Zepto.js ( 2.3K )
✓ ( MIT License )
✓ $('p').html('test').css('color:red');
✓ get,each,index,ﬁrst,ﬁnd,closest,next,prev,remove,html,show,hide,offset,heig
ht,width,attr,css,addClass..
✓ AJAX : $.post , $.getJSON
✓ Touch Event
-‐ $('some selector').tap(function(){ ... });
-‐ $('some selector').doubleTap(function(){ ... });
-‐ $('some selector').swipe(function(){ ... });

UI Library for Touch Devices
Web UI Touch
• jQTouch - http://jqtouch.com

• jQueryMobile - http://jquerymobile.com

• Sencha Touch - http://sencha.com

• DHTMLX Touch - http://dhtmlx.com/touch/

• jo - http://joapp.com

• wink - http://winktoolkit.org

• CrossPlatform지원프레임웍들증가
• GUIDesigner:DHTMLX(Alpha),Sencha(2011Q2)

Javascript Application Frameworks

•데스크탑수준의WebApplication작성
✓
✓
✓

•Javascript기반WebFramework
✓
✓
✓ JJ-JavascriptAppFramework

Server-side Javascript
• Netscape Livewire http://j.mp/eNt2Ay

• Node.JS : Evented Server-Side Javascript http://nodejs.org/
✓ Google Chrome Javascript Engine V8
✓ Network I/O NonBlocking , File I/O Asynchronous
✓ Thread , (S3,MySQL.. )
✓ HTTPd , FTPd , IMAP, WebDAV

• CommonJS : Ecosystem for Javascript Outside the Browser , http://commonjs.org/
✓ /
✓ Server-Side , Command Line , Desktop GUI , Hybrid ( Titanium .. )
✓ , , , , Promise ..

• List of Languages that compile to JS : http://j.mp/hp2pnR

• CoffeeScript Kaffeine : Javascript

• Optimizer : Google Closure , UglifyJS

• Ruby , Python , Lisp Scheme

• j2js : Java ByteCode to JS / Script# : C# to JS

CoffeeScript http://coffeescript.com

• Javascript : coffee -c hello.coffee ➠ hello.js

• ; { , , Inspired by Python Ruby

number = 42 number = 42 ;
opposite = true opposite = true ;
number = -42 if opposite if (opposite) { number = -42 ; }
ignore = yes unless name is ‘xguru’ if ( name !== ‘xguru’ ) { ignore = true ; }
square = (x) - x * x square = function(x) { return x * x; };
math = math = {
root: Math.sqrt root: Math.sqrt,
square: square square: square,
cube: (x) - x * square x cube: function(x) { return x * square(x); }
};
cubes = (Math.cube num for num in list ) cubes = (function() {
var _i, _len, _results; results = [];
for (_i = 0,_len = list.length,_i_len,_i++) {
num=list[_i];
_results.push(Math.cube(num));
}
return _results;
})();

Responsive Web Design
• http://www.alistapart.com/articles/responsive-web-design/

• Screen Size / Platform / Orientation

• CSS3 Media Query , Flexible Grid Layout

• Guideline for R-W-D : http://j.mp/eWEYIJ

Phone Tablet Netbook / Tablet Desktop

http://MediaQueri.es
a collection of responsive web designs

Device APIs
Camera
Filesystem Acclerometer

Web
Browser Contacts
Device
Messaging
Orientation

Device
Web App API Calendar
Developer Tasks Geolocation
Javascript

Hybrid Gallery
Device Device
Status Interaction

• WAC (Wholesale Application Community)
• 40 / : BONDI + JIL ~= Waikiki Beta

• W3C DAP ( Device API )

WAC Schedule 2011
2010 2011

07 11 02 05 09
WAC WAC API Beta WAC Demo WAC 2.0 WAC 3.0
@MWC Enabled Device Network APIs

12 05
K-WAC K-WAC
Enabled Device

• WAC Enabled Device
✓ Galaxy S 2 , Bada 2 ..

• Device Web App

Native
Vs.

Web
Vs.

Hybrid

Hybrid App
• Native + Web
Device OS
Native App /
Hybrid framework
Web Browser
Web Server
• Multi Device
•
Web Application Web
css/js/html Application

• Device
•

• Web
• ?

Hybrid App
Native Hybrid Web

Native WebView Hybrid Frameworks

Appspresso / Phonegap

Titanium

Hybrid
• Native + WebView : Native WebView

★ iPhone
✓ Javascript Objective-C : Custom URL Scheme ( gap:// )
✓ WebView Javascript Injectin : stringByEvaluatingJavascriptFromString()
✓ Click Hooking : shouldStartLoadWithRequest()

★ Android
✓ WebView : addJavascriptInterface

•★
Appspresso / Phonegap
Web App Native App
★ Device Framework Javascript

•★
Titanium ( Appcelerator )
Web Native App
★ Device ( Javascript )

Hybrid Web App
Device OS
• Native App + Web App Hybrid framework

Web Browser

Web Application
Web Device css/js/html

• Hybrid Frameworks
Phonegap

Appspresso

Titanium Mobile

Appspresso
• Mobile App Builder by
Hybrid Web App : iOS , Android ..

Device API : WAC API ( Waikiki )
Powered By
iOS Android

Native Plugin : Plugin Development Kit

• HTML5 Web App
Touch UI : Sencha , jQueryMobile , JoApp

JJ - Javascript MVC Framework ( Ruby On Rails )

Write Once
Appspresso Sell Anywhere

Win/Mac
Touch UI Framework

Android / iOS App Build

Web Tech 2011
• HTML5
• Device ➠ Web App

• Javascript Hot !

• Responsive Web Design
• Web App Store

• Device API
• Hybrid
• Hybrid Web App

2011 Mobile & Web technologies

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (9)

Similaire à 2011 Mobile & Web technologies

Similaire à 2011 Mobile & Web technologies (20)

Plus de JungHyuk Kwon

Plus de JungHyuk Kwon (8)

Dernier

Dernier (20)

2011 Mobile & Web technologies