C3 웹기술로만드는모바일앱

cyworld.com/newnatehs6449@skcomms.co.kr / twitter@hs6449 / facebook@hs6449SK communications / UXD Center / UIUI Developer

http://ninetyhoya.tistory.com

# Mobile App Type

Mobile App Type Feature Web App Native App CSS (SDK)

3DTD ?

3 DTD ?

3 DTD ? <!DOCTYPE html>

3 DTD ? ✓ Ofﬂine support - Local Storage, Web Database, App cache ✓ Media support - Video, Audio, Canvas ✓ Input support - Advanced Web Forms ✓ location support - Geolocation ✓ WebSocket ✓ Web Workers ✓ File Reader ✓ Indexed DB HTML5 Key Elements for Mobile http://xguru.net/593

4 UI(User Interface) ? HTML5 Key Elements for Mobile http://xguru.net/593

4 UI(User Interface) ? HEADER NAVIGATION CONTENTS FOOTER HTML5 Key Elements for Mobile http://xguru.net/593

4 UI(User Interface) ? <!DOCTYPE html> <!DOCTYPE html> <html> <html> <head></head> <head> <body> <script> <div data-role="header"> Ext.setup({ <h1>Example</h1> onReady:function(){ </div> var toolbar = new Ext.Toolbar({ <div data-role="content"> dock:top, Hello World title:Example </div> }); </body> var panel = new Ext.Panel({ </html> fullscreen:true, dockedItems:[toolbar], html:Hello World }); } }); </script> </head> <body></body> </html> Markup based Code based images - http://ssun.pe.kr/510

4 UI(User Interface) ?

5 UI(User Interface) ? Functional + Interactional

5 UI(User Interface) ? &

5 UI(User Interface) ?

6 ?(phone, pad etc.)

6 ? Titanium

6 ? APPCELERATOR VS. PHONEGAP VS. ADOBE AIR http://savagelook.com/blog/portfolio/appcelerator-vs-phonegap-vs-adobe-air

7Multi Platform ?

7 Multi Platform ? HTML5 Hybrid App Overview - Toby@OBIGO

7 Multi Platform ? Responsive Web Design Fluid Layout + Flexible Image + Media Queries

7 Multi Platform ?

7 Multi Platform ? http://mediaqueri.es/ http://mydeute.com/txp/article/631

7 Multi Platform ? http://www.w3.org/TR/css3-mediaqueries/

8Native App ?

8 Native App ? Titanium

8 Native App ? HTML + CSS + JS

SUMMARY

Summary ✦ ✦ Layout, Function, Interaction Framework, Library ✦ Custom UI JS ✦ Device API ✦ Hybrid Web App Mobile Framework ✦ Multi-platform Responsive Web Design

Thank you : )

C3 웹기술로만드는모바일앱

by deview on Oct 17, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

C3 웹기술로만드는모바일앱 — Presentation Transcript