audio

eatablesurveyorInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

127 εμφανίσεις

Who  am  I?



ChangWook
 Doh  


@  
Incross
 CO.LTD.  


Cross-­‐Pla9orm  


HTML5  Solu?on  


DaVinci
 Framework  


Email  


cwdoh@incross.com
 
About  
Incross
 
History  
Domain  
Reference


다양한

무선

인터넷

플랫폼과

유무선

통합

플랫폼




경험





국내

No1.
오픈마켓

T-Store CA
로써

오픈마켓

사업



서비스에

대한

높은

이해도


Infra


다양한

모바일

기반

서비스

개발



운영을

경험한

인적
,
조직적
,
시스템적

인프라

활용




Media Player, SNS


각종

서비스

솔루션에

대한






개발

역량


One-Stop Service


단말에

최적화된

App
기획
,
발굴
,
소싱
,
제휴
,
개발


사후관리까지



과정에서

One-Stop Service
제공




커뮤니케이션

창구

일원화를

통한

안정적

사업

협력
체계

구축


Media Frontier


2001


국내

최초의

모바일

광고

시작에

따른


탄한

입지구축




모바일

광고

&
신규

디지털

매체

Frontier
Technology


WIPI, Mobile Web Platform, Enterprise Mobility
Platform
등의

기술

개발을

통한

경쟁력

확보




Limo


Android


Open OS


대한

높은

대응

능력

보유


ManPower





사업부문



전담

조직



개발
,
기획
,
소싱
,


,
영업

전문

인력

보유




다양한

제휴



지속적

소싱

경험을

통해

축적된


상력


Partners  


 Cross-­‐Pla+orm  


 Rich  Media  Environment  
Comparison  with  Na?ve  &  Web  App.

Native Application

HTML5 Application

Performance

Very Fast
-

Only Native can show its best performance
-

But, dependencies to development skills

Similar but slow
-

Native + a little overhead
-

Dependencies to browser performance
Inter-
operability

Very Complex
-

Architect, Interfaces, Dev. Processes, …
based on HTML. Really broad interoperability
-
One-Source Multi-Use

Updating

Limited partial updating
-

Platform should supports modular system.
-

or Update whole app binary
Browser treat everything as data
-

On-Fly Update
Development
Environment

Various Specs and Environments
-

Java, Objective-C, …
-

Eclipse, X-Code, …
Just HTML, JavaScript, CSS and resources
-

HTML5 + CSS + JavaScript
-

e.g.
DaVinci
Studio (Authoring Tool + IDE)
Extension/
Integration

Freely
-

Native Library
Freely but there’re some limitations
-

HTML Resource
-

JavaScript Library
UI
Design

Depends on its platform
-
Need to re-design for its platform UI.

OSMU
-
No difference with platforms

Deployment

Each packaging & deployment for Each platform

As you want
-

Web
-

Hybrid Web Application
Sergey  
Mavrody
 "Sergey's  HTML5  &  CSS3  Quick  Reference.  2nd  Edi?on".  
Belisso
 Corp.,  2012.  ISBN  978-­‐0983386728

Requirements  of  3D  game  development



The  core  func?onality  typically  provided  by  a  game  engine  includes  


Rendering  engine  for  3D  graphics  


Physics  engine  or  collision  detec?on  


Sound  


Scrip?ng  


Anima?on  


Ar?ficial  intelligence  


Networking  


Streaming  


Memory  management  


Threading  


Localiza?on  support  


Scene  graph  


Input  


Storage  


Packaging  
hap://en.wikipedia.org/wiki/Game_engine
 
HTML5  for  3D  game  development



The  core  func?onality  typically  provided  by  a  game  engine  includes    


Rendering  engine  for  2D  or  3D  graphics
 


Physics  engine  or  collision  detec?on  


Sound
 


Scrip?ng  


Anima?on
 


Ar?ficial  intelligence  


Networking
 


Streaming  


Memory  management  


Threading
 


Localiza?on  support  


Scene  graph  


Input
 


Storage
 


Packaging
 
hap://en.wikipedia.org/wiki/Game_engine
 
HTML5  for  3D  game  development



The  core  func?onality  typically  provided  by  a  game  engine  includes    


Rendering  engine  for  2D  or  3D  graphics
 
à
 Canvas
 


Physics  engine  or  collision  detec?on  


Sound
 
à
 HTML5  Audio  &  Web  Audio
 


Scrip?ng  


Anima?on
 
à
 
RequestAnima?onFrame
 


Ar?ficial  intelligence  


Networking
 
à
 Web  Socket
 


Streaming  


Memory  management  


Threading
 
à
 Web  Workers
 


Localiza?on  support  


Scene  graph  


Input
 
à
 Pointer  Lock  


Storage
 
à
 
LocalStorage
 &  
SessionStorage
 


Packaging
 
à
 App  Cache
 
hap://en.wikipedia.org/wiki/Game_engine
 
<
canvas
>Your  Browser  should  support  HTML5  canvas.</
canvas
>  
Graphics

hap://kalacheva.livejournal.com/191914.html#cu?d1

Canvas



Drawing  object  of
 
HTML5  Element  


HTML  
페이지

내에

렌더링

영역

설정
 


자바스크립트를

통해

동적으로

그래픽스

표현
 


2D  -­‐  Canvas  2D  APIs  


3D  -­‐  
WebGL
 


canvas2d  =  
canvas.getContext
("2d");  


Canvas  2D  Graphics  Context  


Path,  Curve,  Circle,  Rectangle  


Color  &  Styles  :  Color,  Fill-­‐Paaern  


Transform  


Text  


Image,  Pixel  
Manupula?on
 
<
canvas
 id=“
myCanvas
"  style="border:  none;"  width="500"  height="500"></
canvas
>

Canvas



webgl
 =  
canvas.getContext
("
webgl
");  


OpenGL
 
ES  2.0
 
기반

API  


Not
 W3C  Specifica?on!  
But
 
Khronos
 Group  
Specifica?on.



hap://www.cuaherope.ie

Canvas  2D  Game

hap://skid.gamagio.com

WebGL
 Game

Canvas  2D  
vs
 
WebGL



Canvas  2D  is  easier  to  use!  


Path,  Shapes  


Color  &  Style  


Transform  


Image  &  Pixels  


Composi?ng  


WebGL
 is  more  powerful!  


Higher  Performance  


Customizable  Rendering  Pipeline  


Suppor?ng  3D!  


Canvas  (2D)  
Text  API  
WebGL
 (3D)  
hap://
caniuse.com
/#search=canvas  
<audio/>

hap://allposters.com/-­‐sp/Steez-­‐Headphone-­‐Monkey-­‐Posters_i7939864_.htm

HTML5  Audio



HTML5  Element  for  Audio  


Issues  :  Codec  
<audio  controls="controls">  
               <source  
src
="song.ogg"  type="audio/
ogg
"  />  
               <source  
src
="song.mp3"  type="audio/mpeg"  />  
               Your  browser  does  not  support  the  audio  element.  
</audio>

Browser

MP3

Wav

Ogg

Internet  Explorer  9

O  
X

X

Firefox  4.0

X  
O

O

Google  Chrome  6

O  
O

O

Apple  Safari  5

O  
O

X

Opera  10.6

X  
O

O

HTML5  Audio



No  plugin(e.g.  adobe  flash)  for  Audio
 
Output  


<audio>Very  useful  to  play  simple  game  sound</
audio>  


Limita?ons  


No  filters  for  audio  output  


No  methods  to  access  raw  audio  data  


Not  support  posi?onal  &  Direc?onal  Sound  
Audio  Data  API



Low  level  API  for  audio  data  


Read/Write  Func?onali?es  for  Media
 
raw  data  


Mozilla  Specifica?on  


Various  effects  and  func?onali?es  of  audio  


Audio  Visualiza?ons  


Real?me
 Audio  Effects  


Genera?ng  and  Playing  Audio  


Beat  Detec?on  


Wri?ng  Audio  from  JavaScript,  Digital  Signal  Processing  


Demo  
haps://wiki.mozilla.org/Audio_Data_API#Working_Audio_Data_Demos

Web  Audio  API



New  Audio  API  


Func?onali?es  :  Raw  data  access,  Mixing,  Filter,  ..  


High  Level  JavaScript  Audio  API  


W3C  Working  Draw  Stage  


Demo  
hap://www.html5rocks.com/en/tutorials/webaudio/games/
 
hap://chromium.googlecode.com/svn/trunk/samples/audio/index.html

Audio  Data  API
 
vs.  Web  Audio  API



Similarity  


Extension  of  HTML5  Audio  Func?onality  


Control  of  audio  output  


Loading  &  Manipula?on  of  Sound  Data  


Differences  


Audio  Data  API  


Low  level  ‘Raw  audio  data  Access’  API  


Web  Audio    


More  high-­‐level  APIs  for  Low-­‐level  Audio  Control  
Network

hap://tnea.info/book/export/html/11

Connec?vity



Problems  of  tradi?onal  web  environments  


Request  &  Response  Model  


HTTP  


No  request  before  response  for  previous  request.  


Representa?on  


Request
 
à
 HTML  Page  refresh  


Semi  Real-­‐?me  Web  


Ajax  


More  dynamic  web  service  model  
»

XML  Request  -­‐>  Response  
à
 Data  Processing  


Comet  


Background  HTTP  Connec?on  
»

Response  on  Sever-­‐side  Event  
»

Keep  Connec?on  (Client  
à
 Server  )
 
à
 Response  (Server  Event)  
à
 Data-­‐Processing  
à
 Connec?on  
à
 …
 


Limita?on  


HTTP  Overhead(
 latency  )  
Web  Socket



Standard  of  HTML5  for  bi-­‐direc?onal  Communica?on    


Web-­‐based
 
JavaScript  Socket  API  


Fundamental  solu?on
 
of  Comet,  Ajax  


Easily  programming  model  based  on  event-­‐driven  -­‐  message,  open,  close  


Requirement  :  TCP/IP  Server  supports  Web  Socket  spec.  


Opensource
 :  
pywebsocket
 ,  
phpwebsocket
,  
jWebSocket
,  …  
<script>  
   
var
 
wSocket
 =  new  
WebSocket
("
ws:myserver
/
pingpong
");  
     
   
wSocket.onmessage
 =  func?on(e){    send();    }      
 
   
wSocket.onopen
 =  func?on(e){  alert(”Connec?on  opened.");  }  


wSocket.onclose
 =  func?on(e){  alert(”Connec?on  closed.");  }    



func?on  send(){    
       
wSocket.send
(“Ping");  
   }  
</script>

Server  Sent  Event



Server  Sent  Event(SSE)  


HTTP
 
Server  Push  Protocol
 
Concept  


Similar  with  APNS,  C2DM  


Comet
,

Ajax


대안
 


단방향

통신

모델
(
서버

à
 
브라우저
)
 
var
 source  =  new  
EventSource
(’
in_game_event.php
');  
 
source.addEventListener
('message',  func?on(e)  {  
   
console.log
(
e.data
);  
},  false);  
 
source.addEventListener
(’giw',  func?on(e)  {      
   //  call  
giw
 
process
 
},  false);  
 
source.addEventListener
(’quest',  func?on(e)  {  
},  false);  
 
source.addEventListener
('error',  func?on(e)  {  
   if  (
e.eventPhase
 ==  
EventSource.CLOSED
)  {  
}  
},  false);

hap://www.w3schools.com/browsers/browsers_stats.asp
 
0.00%  
10.00%  
20.00%  
30.00%  
40.00%  
50.00%  
60.00%  
03  
02  
01  
12  
11  
10  
09  
08  
07  
06  
05  
04  
03  
02  
01  
12  
11  
10  
09  
08  
07  
06  
05  
04  
03  
02  
01  
12  
11  
10  
09  
08  
07  
06  
05  
04  
03  
02  
01  
12  
11  
10  
09  
08  
07  
06  
05  
04  
03  
02  
01  
2012  
2011  
2010  
2009  
2008  
Browser  Market-­‐share
 
Internet  Explorer  
Firefox  
Chrome  
Safari  
Opera  
hap://www.w3schools.com/browsers/browsers_chrome.asp
 
0%  
10%  
20%  
30%  
40%  
50%  
60%  
70%  
80%  
90%  
100%  
03  
02  
01  
12  
11  
10  
2012  
2011  
Market  Share  
Google  Chrome  Browser  Version  Share
 
Older  
Version  14  
Version  15  
Version  16  
Version  17  
Version  18  
Version  19  
HTML5  Browser  Fragmenta^on

Mobile  HTML5  Performance  Fragmenta^on

jQuery
 


jQuery
 is  a  new  kind  of  JavaScript  Library.  


Fast  and  concise  JavaScript  Library  simplifies…  


HTML  document  traversing  


event  handling  


anima?ng  


Ajax  interac?ons  for  rapid  web  development  


jQuery
 is  designed  to  change  the  way  that  you  
write  JavaScript.  
jQuery
 Mobile  


Touch-­‐Op?mized  Web  Framework  for  
Smartphones  &  Tablets  


A  unified,  HTML5-­‐based  user  interface  system  for  
all  popular  mobile  device  pla9orms  


built  on  the  rock-­‐solid  
jQuery
 and  
jQuery
 UI  
founda?on.    


lightweight  code  


progressive  enhancement  


Flexible,  easily  
themeable
 design.  
Node.JS
 


Node.JS
 


Web  Server  based  on  JavaScript  Engine.  


V8  JavaScript  Engine  


Event  Driven    &  Non-­‐Blocking  I/O  Model  


C/C++  Add-­‐on  Support  
Now.JS
 


Module  for  
Node.JS
 


A  magic  namespace  "now",  accessible  by  server  and  
client  


Func?ons  and  variables  added  to  now  are  
automa?cally  synced,  in  real-­‐?me    


Call  client  func?ons  from  the  server  and  server  
func?ons  from  client  


Pros.  


Directly  call  Remote  API  in  JavaScript.



“Now”  Object  


NO  design  &  development  of  protocols.

Backbone.js
 


Supports  backend  system  of  Web  Applica^on  


Model  


Collec?on  


View  


Router  


History  


Sync  


Pros.  


MVC  Model  for  Web  Applica?on  


Can  be  stacked  with  other  
opensources
 -­‐  
jQuery
,  Underscore,  …  


Various  Plug-­‐ins  


Most  popular
 
Web  Applica^on  Framewor
k  that  supports  MVC  paaerns  


Cons.  


Developer  should  know  MVC  paaern.  
§

jQuery
Mobile and
Sencha
Touch goes toward
different UX model
on for mobile web.
§

jQuery
Mobile is
“Web Document(or Site) Framework”

§

Sencha
Touch is
“Web Application Framework”

1.2. jQuery DaVinci

1. Product Development Strategy

Web Document vs. Web Application



Web Document Framework (
jQuery
Mobile)


Pros


Traditional Web Development Model


“Document is Presentation”


Easy to develop


Cons



Constraint of UI Layout


UI Components


Coordination and Positioning of UI Layout


Browser Scroll


Always scroll entire document


Web Application Framework (
Sencha
Touch)


Pros


Component Base


Flexible Layout


Partial Scroll


Cons


Performance Issues


Loading Time


Interaction(e.g. Smoothing Scroll)


No standard development model - Various ways to
develop


JavaScript-Oriented (
Sencha
Touch)


required lots of JS knowledge


limits to integration & migration with
other solution and on-stage products


Traditional Model (DOM & JavaScript, CSS)


Need Flexible Tool-chains to reduce
complex of a developments
Before  &  Ader  Scroll  from  Web  Document  
Before  &  Ader  Par^al  Scroll  from  Web  App.  
DaVinci
 :  Web  Applica?on  Development  Solu?on

§

Not
substitutional
but
complementary solution to
jQuery
Mobile
.

§

jQuery

DaVinci
is “
Full & Fast Application UI Framework for
jQuery

familes


1.2. jQuery DaVinci

1. Product Development Strategy

jQuery

DaVinci



jQuery

DaVinci
inherits
Advantages of
jQuery

Mobile


Fast Loading


Highly integration with other solution(e.g. Open-
sources)


No dependency with DOM, JavaScript, CSS


Supports Responsive Web Design


Media Query - No Reload


Easy & Familiar Web Development Model


HTML Mark-up(DOM), CSS, JavaScript


Easy migration with old & new web service


e.g. PHP, JSP,
Node.JS
and so on


jQuery

DaVinci
supports


Development of Web Application on
jQuery



Various UI Widgets over 30


Custom Widget


Absolute/Relative Layout


Fast Partial Scroll


Supports CSS3 Flexible Box Model


Transition(Android)


Custom Theme & Styling


Pre-integrated with


Knockout.JS

for data-binding
HTML  &  HTML5  Spec.  
jQuery
 
Knockout
.js
 
jQuery
 Mobile  
Turn.js
 
Rich  Media  
Publishing  
Web  Document  
Web  
Applica?on  
jQuery
 
DaVinci
 
End-­‐User  
Products  
Framework  
Other  
Open  Sources  
Base  
Spec.  
DaVinci
 
 -­‐  In  Progress  
End-­‐User  
Products  
Related  to  
Data  Model  
jQuery
 
Familes
 
Related  to  
Presenta?on  
jsRender
 
&  
jsView
 
jimpress
.js
 
DaVinci

Thank you!
?