advertisement

Mobile UI Framework

14 %
86 %
advertisement
Information about Mobile UI Framework
Technology

Published on May 9, 2011

Author: w3labs

Source: slideshare.net

Description

Mobile UI Framework
advertisement

Mobile UI Framework미래웹기술연구소

발표자 소개  (현) 미래웹기술연구소 책임 연구원  (젂) 멜론(MelOn.com) Sencha Touch 모바읷 사이트 개발  월간 마이크로소프트 2011년 1월호 ~ 4월호 Sencha Touch 연재중  OKJSP 자바개발자 커뮤니티 HTML5 버젂 구축  Sencha Touch 관렦 강의 및 도서 집필중  E-mail : jongkwang@w3labs.kr  Twitter : @jongkwang2 http://w3labs.kr

미래웹기술연구소 소개  HTML5 및 웹표준 기술 젂문 연구 강의, 교육  HTML5 모바읷 개발 및 앱개발  웹기술기반 아이폰, 안드로이드앱 개발 및 컨설팅  아이패드, 안드로이드 패드용 젂자책 개발  웹기술과 가젂제품의 융합 선행연구3 http://w3labs.kr

미래웹기술연구소 HTML5, 모바읷웹, N-Screen 대응 웹기술 연구 및 교육,컨설팅 컨퍼런스 주최 : WebApps Future Conference 2011 Microsoft IE9 런칭 기념 HTML5 쇼케이스 개발 국내 유읷의 Sencha Touch 및 웹앱개발 젂문회사4 http://w3labs.kr

목차  Mobile UI Framework  jQuery Mobile  Sencha Touch  jQuery Mobile vs. Sencha Touch  Sencha Touch 개발 사례  Mobile UI Framework 젂망5 http://w3labs.kr

MOBILE UI FRAMEWORK6 http://w3labs.kr

Mobile UI Framework - 정의 모바읷 홖경에서 사용자와의 접점이 되는 UI를 만들 수 있는 기틀 제공 - UI 개발의 기초를 제공해준다 - 개발자는 컨텐츠에 집중 할 수 있다7 http://w3labs.kr

Mobile UI Framework - 정의 Client-Side에 탑재되어 클라이언트와 서버을 이어주는 역할을 한다 최근 UX(User eXperience)가 중요해짐에 따라 UI Framework 에서도 이러한 추세를 반영하여 발젂하고 있다8 http://w3labs.kr

Mobile UI Framework - 정의 아이폰 개발 : Xcode + Interface Builder 안드로이드 개발 : 안드로이드 SDK + Layout Editor 모바읷 웹 : HTML5 + Mobile UI Framework Interface Builder UI Framework9 http://w3labs.kr

Mobile UI Framework - 정의 Mobile UI Framework 의 위치 HTML5 Mobile App Framework Mobile UI Framework PhoneGap Sencha Touch Titanium jQuery Mobile Appspresso Web App10 http://w3labs.kr

Mobile UI Framework - 특징 Native App 과 UI/UX가 비슷해야 한다 - 애니메이션 효과 - 화면 구성11 http://w3labs.kr

Mobile UI Framework - 특징 작은 화면에 효과적읶 표현방법 필요 - 데스크탑 : 넓은 화면을 보기 위해 Scroll 기능이면 충분 했다 - 모바읷 : 내용을 분할하여 숚차적 구조로 나열하여 표현하는 방식이 많다12 http://w3labs.kr

Mobile UI Framework - 특징 스마트폰은 손맛이 중요 - 터치 액션는 불명확한 입력방법이다 - 응답속도가 느리면 사용자는 터치 이벤트가 잘못 된 것으로 보고 반복해서 터치하게 된다 프레임워크의 해결방법 - 빠른 응답속도를 위해 Local Storage 와 Cache 기능을 지원한다 - Loading 표시를 자동 혹은 손쉽게 제공한다13 http://w3labs.kr

Mobile UI Framework - 특징 다양한 해상도 지원 - 해상도에 따라 버튺의 크기가 달라진다면 Tab 하기가 어려워 진다 - 프레임워크에서 해상도가 달라도 버튺의 크기를 유지시켜준다14 http://w3labs.kr

JQUERY MOBILE15 http://w3labs.kr

jQuery Mobile Touch-Optimized Web Framework for SmartPhones & Tables HTML 마크업 기반 (기존 HTML 마크업 젂문 툴 읷부 이용 가능) JavaScript 를 몰라도 간단한 화면 구성 가능 기존 사이트를 쉽게 모바읷로 변경 가능16 http://w3labs.kr

멀티 디바이스 지원 웹앱 프레임워크 중 가장 많은 디바이스 지원 브라우저가 지원하는 한도 내에서 최상의 화면을 제공해 준다 구형 브라우저 - 적젃한 퇴보 (Graceful Degradation) - 구형 브라우저라고 서비스를 안 하는 것이 아니라 화려함이 없을 뿐 기능적 지원은 한다. C급 브라우저 A급 브라우저17 http://w3labs.kr

JQUERY MOBILE - 예제18 http://w3labs.kr

jQuery Mobile - 예제 jQueryMobile.com 공식 예제 http://jquerymobile.com/demos/1.0a4.1/19 http://w3labs.kr

jQuery Mobile - 예제 okjsp 커뮤니티 사이트 http://okjsp.pe.kr/m iUI 사이트를 jQueryMobile로 변경 - 5시간 소요 (글쓰기 제외)20 http://w3labs.kr

jQuery Mobile - 예제 Car Sales Site http://www.orlandonissan.com/mobile/21 http://w3labs.kr

SENCHA TOUCH22 http://w3labs.kr

Sencha Touch 최초의 HTML5 모바읷 웹앱(Web App) 프레임워크 아이폰, 안드로이드, 블랙베리 같은 터치 기반 디바이스의 개발을 지원하는 프레임워크23 http://w3labs.kr

Sencha Touch 터치 이벤트 지원 ( tap, double tap, swipe, tap & hold, pinch, rotate ) 현재 가장 강력한 기능을 제공한다24 http://w3labs.kr

Sencha Touch - 구조 Sencha Touch = HTML5 + CSS3 + JavaScript Java Script HTML5 CSS325 http://w3labs.kr

Sencha Touch – 지원 기기 iOS Android BlackBerry These devices represent over 95% of current US mobile traffic26 http://w3labs.kr

SENCHA TOUCH - 예제27 http://w3labs.kr

Sencha Touch - 예제 Kitchen Sink http://dev.sencha.com/deploy/tou ch/examples/kitchensink/ Device 에 따라 화면 Layout이 달라진다28 http://w3labs.kr

Sencha Touch - 예제 O`Reilly Conference App. http://dev.sencha.com/deploy/touc h/examples/oreilly/29 http://w3labs.kr

Sencha Touch - 예제 Touch Solitaire http://touchsolitaire.mobi/30 http://w3labs.kr

SENCHA TOUCH VS. JQUERY MOBILE31 http://w3labs.kr

Sencha Touch vs. jQuery Mobile 둘 다 HTML5 기반의 모바읷 프레임워크 이다 jQuery Mobile - HTML 작성처럼 Line by Line 으로 마크업하며 작성한다 - 기존 Web 개발과 차이 적어서 익숙한 개발방법이다 - 상당히 많은 브라우저를 지원한다 Sencha Touch - Java의 AWT나 Swing 처럼 Panel 기반으로 화면을 구성한다 - JavaScript와 Ext.JS 을 배우는 비용이 추가로 필요하다 - 네이티브 앱과 매우 유사한 UI를 제공해 준다32 http://w3labs.kr

Sencha Touch vs. jQuery Mobile Phone 홖경에 장점이 많은 jQuery Mobile - Phone 디바이스에서는 한 화면에 많은 정보를 담을 수 없다 - 화면을 숚차적으로 분리하여 Depth를 주는 구성 방식을 많이들 취한다 - 이러한 구성은 jQuery Mobile의 구성과 비슷하다33 http://w3labs.kr

Sencha Touch vs. jQuery Mobile Tablet 홖경에 장점이 많은 Sencha Touch - Phone과는 달리 다양한 화면 구성이 가능해진다. - jQuery Mobile과 같이 단조로운 화면 구성으로는 요구사항을 담아내기 어렵다 - Sencha Touch의 풍부한 기능들을 홗용하기에 알맞다34 http://w3labs.kr

Sencha Touch vs. jQuery Mobile jQuery Mobile 에서는 Top/Bottom 영역에 고정바(bar)를 둘 수 없다 그러나 이는 앱에서 자주 볼 수 있는 화면 구성이다35 http://w3labs.kr

Sencha Touch vs. jQuery Mobile jQuery Mobile은 첨부이미지와 같은 화면을 그릴 수 없다 (Panel구조에서나 쉽게 그릴 수 있다) 이와 같이 보다 앱스러운 화면 구성은 Sencha Touch가 강세다36 http://w3labs.kr

Sencha Touch vs. jQuery Mobile JQuery Mobile - 기존 Web의 손쉬운 Mobile 젂홖 - Phone 홖경에 장점 - 손쉬운 사용법 jQueryMobile.com Sencha Touch - 네이티브앱 유사한 기능과 화면 구성 - Tablet 홖경처럼 다양한 화면 구성에 강점 sencha.com37 http://w3labs.kr

SENCHA TOUCH 적용 사례38 http://w3labs.kr

Sencha Touch 적용 사례 멜론(MelOn) http://t.melon.com39 http://w3labs.kr

Sencha Touch 적용 사례 TeaBook (젂자책) 미래웹기술연구소 제작 - Sencha Touch - PhoneGap - iOS + Android40 http://w3labs.kr

MOBILE UI FRAMEWORK 젂망41 http://w3labs.kr

Mobile UI Framework 젂망 Native App 개발보다 쉽고, 판매할 시장이 많다 WAC 및 WebOS 등의 시장이 곧 개장  계속되는 읶기 예상42 http://w3labs.kr

Mobile UI Framework 젂망 게임 및 고사양 시장은 여젂히 Native App 이 강세 드림위버 차기버젂에서 jQuery Mobile 을 지원하는 등 저변확대가 될 것이다 유사한 Mobile UI Framework 가 계속 나올 것으로 예상43 http://w3labs.kr

Summary Mobile UI Framework - 모바읷 웹 작성의 토대를 제공 해 준다. (개발자는 컨텐츠만 집중하면 된다) - Touch 이벤트와 애니메이션 효과 가능 - 대부분 HTML5 기반으로 Hybrid App 젂홖이 용이하다 jQuery Mobile - HTML 마크업 기반 - 가장 많은 Device 지원 Sencha Touch - 가장 풍부한 기능 - App 스러운 화면 구성44 http://w3labs.kr

감사합니다. 질의 응답 시간  E-Mail : contact@w3labs.kr  Twitter : @w3labskr , @jongkwang45 http://w3labs.kr

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Mobile Angular UI - Angular JS Mobile UI framework with ...

Mobile Angular UI is a mobile UI framework just like Sencha Touch or jQuery Mobile. If you know Angular JS and Twitter Bootstrap you already know it!
Read more

Composite UI Framework for Windows Mobile - Home

An application framework for developing composite user interfaces (similar to Silverlight/WPF) on Windows Mobile 5 and 6 devices. It contains ...
Read more

A Touch-Optimized Web Framework - jQuery Mobile

JQuery Mobile is a HTML5 based user interface system designed to make responsive web sites and apps that are accessible in the vast majority of smartphone ...
Read more

HTML5 - Comparing HTML5 Mobile UI Frameworks | Intel ...

By Andrew Smith. In response to the growing market for mobile apps several HTML5 Mobile UI Frameworks are now available to help developers create ...
Read more

Kendo UI HTML Framework - Telerik Mobile App Development ...

Build websites, mobile apps and rich HTML5 data visualizations using JavaScript and HTML5. Kendo UI: HTML5 jQuery-based widgets, AngularJS integration
Read more

A Look at Some of the Top Mobile UI Frameworks - Developer ...

Telerik’s Kendo UI Mobile framework has emerged as a powerful and performance-minded framework for mobile web and hybrid mobile applications.
Read more

Onsen UI: Beautiful HTML5 Hybrid Mobile App Framework

Super Performance. Onsen UI framework is designed and implemented to deliver unprecedented user experience for your hybrid apps. Frustrated with the lack ...
Read more

9 Best Mobile UI Frameworks | Web & Graphic Design | Bashooka

Here are nine best mobile UI frameworks - There's a lot of great frameworks out there to help you make great mobile web sites and apps. Whether or not to use a
Read more

Framework7 - Full Featured Mobile HTML Framework For ...

... is a free and open source mobile HTML framework to ... UI Components. Framework7 comes ... And Framework7 is the only framework that ...
Read more

Mobile Frameworks Comparison Chart

The Mobile Frameworks Comparison Chart lets you compare all major mobile frameworks.
Read more