SlideShare a Scribd company logo
1 of 42
웹모바일
                기술전망

               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
Web Tech
            2011
HTML5,CSS3

               Javascript!!!

               ResponsiveWebDesign

               WebAppStores

               DeviceAPI

               HybridAppCrossPlatform
HTML(5)




                           Offline    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,first,find,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
ChromeWebStore
MozillaWebAppStore
GetJar
iPadificationoftheWeb
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
Native App
Web App
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
!
                       
                        

                  권정혁/구루

More Related Content

What's hot

Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Jonas Bandi
 
Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...
Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...
Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...Taras Filatov
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGapMihai Corlan
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5Christian Heindel
 
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIBACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIbacmove
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
 
Develop mobile applications with Flex
Develop mobile applications with FlexDevelop mobile applications with Flex
Develop mobile applications with FlexConFoo
 
Federico Lox Lucignano, War of the worlds web or native both
Federico Lox Lucignano, War of the worlds web or native bothFederico Lox Lucignano, War of the worlds web or native both
Federico Lox Lucignano, War of the worlds web or native bothIxDA_Poznan
 
Nomad für Webbrowser und MarvelClient: Die ideale Kombination
Nomad für Webbrowser und MarvelClient: Die ideale KombinationNomad für Webbrowser und MarvelClient: Die ideale Kombination
Nomad für Webbrowser und MarvelClient: Die ideale Kombinationpanagenda
 
PhoneGap Day - IBM, PhoneGap and the Enterprise
PhoneGap Day - IBM, PhoneGap and the EnterprisePhoneGap Day - IBM, PhoneGap and the Enterprise
PhoneGap Day - IBM, PhoneGap and the EnterpriseBryce Curtis
 
HTML5, the Evolution of Smart Media
HTML5, the Evolution of Smart MediaHTML5, the Evolution of Smart Media
HTML5, the Evolution of Smart MediaSeungyun Lee
 
Hybrid mobile and Ionic
Hybrid mobile and IonicHybrid mobile and Ionic
Hybrid mobile and IonicLiju Pillai
 
Developing cross platform mobile applications with phone gap for windows phone
Developing cross platform mobile applications with phone gap for windows phoneDeveloping cross platform mobile applications with phone gap for windows phone
Developing cross platform mobile applications with phone gap for windows phoneColin Eberhardt
 
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#Building Universal Windows Apps for Smartphones and Tablets with XAML & C#
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#Nick Landry
 
ITCamp 2012 - Alessandro Pilotti - Web API, web sockets and RSignal
ITCamp 2012 - Alessandro Pilotti - Web API, web sockets and RSignalITCamp 2012 - Alessandro Pilotti - Web API, web sockets and RSignal
ITCamp 2012 - Alessandro Pilotti - Web API, web sockets and RSignalITCamp
 
(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향Wonsuk Lee
 
HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기정현 황
 

What's hot (20)

Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!
 
Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...
Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...
Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGap
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
 
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIBACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
 
Develop mobile applications with Flex
Develop mobile applications with FlexDevelop mobile applications with Flex
Develop mobile applications with Flex
 
Sharepoint mobile
Sharepoint mobileSharepoint mobile
Sharepoint mobile
 
Federico Lox Lucignano, War of the worlds web or native both
Federico Lox Lucignano, War of the worlds web or native bothFederico Lox Lucignano, War of the worlds web or native both
Federico Lox Lucignano, War of the worlds web or native both
 
Nomad für Webbrowser und MarvelClient: Die ideale Kombination
Nomad für Webbrowser und MarvelClient: Die ideale KombinationNomad für Webbrowser und MarvelClient: Die ideale Kombination
Nomad für Webbrowser und MarvelClient: Die ideale Kombination
 
PhoneGap Day - IBM, PhoneGap and the Enterprise
PhoneGap Day - IBM, PhoneGap and the EnterprisePhoneGap Day - IBM, PhoneGap and the Enterprise
PhoneGap Day - IBM, PhoneGap and the Enterprise
 
HTML5, the Evolution of Smart Media
HTML5, the Evolution of Smart MediaHTML5, the Evolution of Smart Media
HTML5, the Evolution of Smart Media
 
Hybrid mobile and Ionic
Hybrid mobile and IonicHybrid mobile and Ionic
Hybrid mobile and Ionic
 
The Powerful VR WEB Is Here
The Powerful VR WEB Is HereThe Powerful VR WEB Is Here
The Powerful VR WEB Is Here
 
Developing cross platform mobile applications with phone gap for windows phone
Developing cross platform mobile applications with phone gap for windows phoneDeveloping cross platform mobile applications with phone gap for windows phone
Developing cross platform mobile applications with phone gap for windows phone
 
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#Building Universal Windows Apps for Smartphones and Tablets with XAML & C#
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#
 
ITCamp 2012 - Alessandro Pilotti - Web API, web sockets and RSignal
ITCamp 2012 - Alessandro Pilotti - Web API, web sockets and RSignalITCamp 2012 - Alessandro Pilotti - Web API, web sockets and RSignal
ITCamp 2012 - Alessandro Pilotti - Web API, web sockets and RSignal
 
(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향
 
HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
 

Viewers also liked

Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Andreas Bovens
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media QueriesRuss Weakley
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuBryan Rieger
 
Mobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance OptimizationMobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance OptimizationMaximiliano Firtman
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptSencha
 
HTML5 API - The Screen Orientation API and Fullscreen
HTML5 API - The Screen Orientation API and FullscreenHTML5 API - The Screen Orientation API and Fullscreen
HTML5 API - The Screen Orientation API and FullscreenJeongHwan Jang
 
크롬 확장 프로그램 만들기 - Qr code generator
크롬 확장 프로그램 만들기 - Qr code generator크롬 확장 프로그램 만들기 - Qr code generator
크롬 확장 프로그램 만들기 - Qr code generatorJeongHwan Jang
 

Viewers also liked (9)

Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by Yiibu
 
Mobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance OptimizationMobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance Optimization
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
 
Performance and rail
Performance and railPerformance and rail
Performance and rail
 
Web Socket API
Web Socket APIWeb Socket API
Web Socket API
 
HTML5 API - The Screen Orientation API and Fullscreen
HTML5 API - The Screen Orientation API and FullscreenHTML5 API - The Screen Orientation API and Fullscreen
HTML5 API - The Screen Orientation API and Fullscreen
 
크롬 확장 프로그램 만들기 - Qr code generator
크롬 확장 프로그램 만들기 - Qr code generator크롬 확장 프로그램 만들기 - Qr code generator
크롬 확장 프로그램 만들기 - Qr code generator
 

Similar to 2011 Mobile & Web technologies

모바일(Mobile)에서의 웹(Web) 전망 2부(총3부)
모바일(Mobile)에서의 웹(Web) 전망 2부(총3부)모바일(Mobile)에서의 웹(Web) 전망 2부(총3부)
모바일(Mobile)에서의 웹(Web) 전망 2부(총3부)mosaicnet
 
Smau milano 2012 arena social media emanuele-bolognesi
Smau milano 2012   arena social media emanuele-bolognesiSmau milano 2012   arena social media emanuele-bolognesi
Smau milano 2012 arena social media emanuele-bolognesiSMAU
 
Seattle bestpractices2010
Seattle bestpractices2010Seattle bestpractices2010
Seattle bestpractices2010Olaseni Odebiyi
 
Future of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreFuture of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreJonathan Jeon
 
Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5Christian Heindel
 
UX Analytics for Data-driven Product Development
UX Analytics for Data-driven Product DevelopmentUX Analytics for Data-driven Product Development
UX Analytics for Data-driven Product DevelopmentTrieu Nguyen
 
Native is easy. Web is essential.
Native is easy. Web is essential.Native is easy. Web is essential.
Native is easy. Web is essential.Jason Grigsby
 
CCW_deck(11) - external
CCW_deck(11) - externalCCW_deck(11) - external
CCW_deck(11) - externalOhad Levy
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
 
Ting Song Hui Resume
Ting Song Hui ResumeTing Song Hui Resume
Ting Song Hui ResumeTing SongHui
 
MediaMosa Player v2_0 - OPEN SOURCE HTML5 WEBLECTURES PLAYER
MediaMosa Player v2_0 - OPEN SOURCE HTML5 WEBLECTURES PLAYERMediaMosa Player v2_0 - OPEN SOURCE HTML5 WEBLECTURES PLAYER
MediaMosa Player v2_0 - OPEN SOURCE HTML5 WEBLECTURES PLAYERMediaMosa
 
Going Mobile with WordPress - #psuweb12
Going Mobile with WordPress - #psuweb12Going Mobile with WordPress - #psuweb12
Going Mobile with WordPress - #psuweb12Shelley Keith, MSIQ
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoChristian Heilmann
 
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseBuilding & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseApperian
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 

Similar to 2011 Mobile & Web technologies (20)

모바일(Mobile)에서의 웹(Web) 전망 2부(총3부)
모바일(Mobile)에서의 웹(Web) 전망 2부(총3부)모바일(Mobile)에서의 웹(Web) 전망 2부(총3부)
모바일(Mobile)에서의 웹(Web) 전망 2부(총3부)
 
Smau milano 2012 arena social media emanuele-bolognesi
Smau milano 2012   arena social media emanuele-bolognesiSmau milano 2012   arena social media emanuele-bolognesi
Smau milano 2012 arena social media emanuele-bolognesi
 
Gwt, die bessere spinne
Gwt, die bessere spinneGwt, die bessere spinne
Gwt, die bessere spinne
 
Seattle bestpractices2010
Seattle bestpractices2010Seattle bestpractices2010
Seattle bestpractices2010
 
Xapstr
XapstrXapstr
Xapstr
 
Future of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreFuture of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App Store
 
Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5
 
UX Analytics for Data-driven Product Development
UX Analytics for Data-driven Product DevelopmentUX Analytics for Data-driven Product Development
UX Analytics for Data-driven Product Development
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
 
Native is easy. Web is essential.
Native is easy. Web is essential.Native is easy. Web is essential.
Native is easy. Web is essential.
 
GraphQL for Native Apps
GraphQL for Native AppsGraphQL for Native Apps
GraphQL for Native Apps
 
CCW_deck(11) - external
CCW_deck(11) - externalCCW_deck(11) - external
CCW_deck(11) - external
 
Hybrid Apps / iPhoneDevCon 2010
Hybrid Apps / iPhoneDevCon 2010Hybrid Apps / iPhoneDevCon 2010
Hybrid Apps / iPhoneDevCon 2010
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
Ting Song Hui Resume
Ting Song Hui ResumeTing Song Hui Resume
Ting Song Hui Resume
 
MediaMosa Player v2_0 - OPEN SOURCE HTML5 WEBLECTURES PLAYER
MediaMosa Player v2_0 - OPEN SOURCE HTML5 WEBLECTURES PLAYERMediaMosa Player v2_0 - OPEN SOURCE HTML5 WEBLECTURES PLAYER
MediaMosa Player v2_0 - OPEN SOURCE HTML5 WEBLECTURES PLAYER
 
Going Mobile with WordPress - #psuweb12
Going Mobile with WordPress - #psuweb12Going Mobile with WordPress - #psuweb12
Going Mobile with WordPress - #psuweb12
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
 
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseBuilding & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 

More from JungHyuk Kwon

웹을 지탱하는 기술
웹을 지탱하는 기술웹을 지탱하는 기술
웹을 지탱하는 기술JungHyuk Kwon
 
Mobile 시대의 SEO ( Search Engine Optimization )
Mobile 시대의 SEO ( Search Engine Optimization )Mobile 시대의 SEO ( Search Engine Optimization )
Mobile 시대의 SEO ( Search Engine Optimization )JungHyuk Kwon
 
2011 The Year of Web apps
2011 The Year of Web apps2011 The Year of Web apps
2011 The Year of Web appsJungHyuk Kwon
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기JungHyuk Kwon
 
User Stories Applied
User Stories AppliedUser Stories Applied
User Stories AppliedJungHyuk Kwon
 

More from JungHyuk Kwon (8)

웹을 지탱하는 기술
웹을 지탱하는 기술웹을 지탱하는 기술
웹을 지탱하는 기술
 
Mobile 시대의 SEO ( Search Engine Optimization )
Mobile 시대의 SEO ( Search Engine Optimization )Mobile 시대의 SEO ( Search Engine Optimization )
Mobile 시대의 SEO ( Search Engine Optimization )
 
2011 The Year of Web apps
2011 The Year of Web apps2011 The Year of Web apps
2011 The Year of Web apps
 
HTML5 on mobile
HTML5 on mobileHTML5 on mobile
HTML5 on mobile
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
 
User Stories Applied
User Stories AppliedUser Stories Applied
User Stories Applied
 
Twitter Api Mashup
Twitter Api MashupTwitter Api Mashup
Twitter Api Mashup
 
Crawling The Web
Crawling The WebCrawling The Web
Crawling The Web
 

Recently uploaded

Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dashnarutouzumaki53779
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 

Recently uploaded (20)

Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dash
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 

2011 Mobile & Web technologies

  • 1. 웹모바일 기술전망 2011 ( @xguru )
  • 2. •권정혁 ➡ 기술전략팀장 - SW Architect - Developer Evangelist ➡ http://xguru.net ➡ @xguru ➡ guru@xguru.net
  • 3. 2010 was year of HTML5 ReadWriteWeb - “Top Trends of 2010 : HTML5”
  • 4. HTML5 ? HTML5 ~= HTML + CSS + JS API Web Desktop App ➠ Web App
  • 5. Web App ? ➠ ➠모바일
  • 6. 왜HTML5가모바일에중요한가? 각모바일플랫폼용 네이티브앱 iOS, Android, WP7, BlackBerry, Symbian, Bada .. 7개의플랫폼을작업 HTML5가미래의플랫폼이다. FacebookCTOBretTaylor 모든플랫폼을네이티브로지원 예산이모자르다 GoogleVPVicGundotra
  • 7. 기관 App 제작비용 다운로드 특허청 특허정보검색 2억6600만원 833건 전라남도 U남도여행길잡이 3억원 6600건 : http://j.mp/korgovapp
  • 8. Devices 2011 BB PlayBook HP WebOS CR-48 MS WP7 with iOS Android Nokia
  • 9. Web Tech 2011
  • 10. HTML5,CSS3 Javascript!!! ResponsiveWebDesign WebAppStores DeviceAPI HybridAppCrossPlatform
  • 11. HTML(5) Offline Device 3D , 2D Performance Semantics Multi Media Connectivity CSS3 Storage Access Graphics Effects Integration
  • 12. 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/
  • 13. HTML5 Android RIM webOS iOS 3+ 2011 3Q 2.0+ OS6+ 1.4+ 6 7 8 9 3+ 6+ 4+ 10+
  • 14. 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
  • 15. HTML5 Initializer • http://initializr.com/ • HTML5 Boilerplate • jQuery • Modernizer / HTML5shiv •
  • 16. 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)
  • 17. Javascript !!! • • Javascript Library for Mobile • UI Frameworks • Application Frameworks • Server-side JavaScript • Languages that Compiles to JS
  • 18. 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,first,find,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(){ ... });
  • 19. 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)
  • 20. Javascript Application Frameworks •데스크탑수준의WebApplication작성 ✓ ✓ ✓ •Javascript기반WebFramework ✓ ✓ ✓ JJ-JavascriptAppFramework
  • 21. 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 ..
  • 22. 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
  • 23. 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; })();
  • 24. 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
  • 25. http://MediaQueri.es a collection of responsive web designs
  • 30. 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 )
  • 31. 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
  • 32. Native Vs. Web Vs. Hybrid
  • 35. 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 • ?
  • 36. Hybrid App Native Hybrid Web Native WebView Hybrid Frameworks Appspresso / Phonegap Titanium
  • 37. 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 )
  • 38. 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
  • 39. 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 )
  • 40. Write Once Appspresso Sell Anywhere Win/Mac Touch UI Framework Android / iOS App Build
  • 41. Web Tech 2011 • HTML5 • Device ➠ Web App • Javascript Hot ! • Responsive Web Design • Web App Store • Device API • Hybrid • Hybrid Web App
  • 42. ! 권정혁/구루