<p>
<데브멘토>이준하 소장(열이아빠)</p>
<p>
RIA의 역사 및 개념 정리</p>
<p>
최근RIA트렌드</p>
<p>
RIA와 모바일/웹 기반의RIA와 모바일 기반의RIA의 차이점 등</p>
<p>
기업 환경에 최적화된RIA 솔루션을 고민하는RIASoft 기업부설연구소 소장으로 근무하다가 최근 투비소프트로 자리를 옮김. 열이아빠의RIA이야기라는 블로그에서 다양성을 나누고 새로운 경험을 중심으로 나타나는 여러 현상을 탐구하고 있다.</p>
Citrine is native mobile framework.
▶ About Citrine
- It’s a component based structure and mobile app development platform with Web
technologies (XML(MOML), Java Script)
▶ Feature of Citrine
- Object Oriented Approach
This approach solves inefficiency for mobile app development through object oriented
approaches using MOML (Mobile Object Markup Language)
- Simple functional definition
This defines complicated functions by abstracting them matched with actual usage.
- Independent development
This independently separates library developers from application developments and
implements a base to integrate them easily.
- Component based structure
It provides a base by which services developed by service providers are integrated
with other applications.
This document discusses various options for developing mobile applications including native apps, web apps, and hybrid apps. It focuses on hybrid frameworks like PhoneGap, Titanium, and Appspresso which allow developing apps using web technologies that are then wrapped into native containers. These hybrid frameworks provide access to device features while developing using HTML, CSS, and JavaScript instead of native languages. Demo code examples are provided for building hybrid mobile apps with jQuery Mobile and Sencha Touch using the Appspresso framework.
Requirement analysis for the production of educational hybrid web applicationsKwangChul Kim
"교육용 하이브리드 웹앱 제작을 위한 요구 사항 분석"
현재의 이러닝 콘텐츠는 다양한 스마트 기기에서 볼 수 있도록 멀티스크린 환경을 지원해야 한다. 즉 원 소스 멀티 유즈(One Source Multi-Use, OSMU) 기능을 구현할 수 있는 스마트 교육 콘텐츠로 구성해야 한다. 이러한 스마트 교육 콘텐츠를 만들기 위해서는 하이브리드 웹앱 형태의 프레임워크가 필수적이다. 따라서 본 논문에서는 다양한 스마트기기에 이러닝 콘텐츠를 활용할 수 있도록 교육용 하이브리드 웹앱을 제작하기 위한 요구사항을 분석하였다.
<p>
<데브멘토>이준하 소장(열이아빠)</p>
<p>
RIA의 역사 및 개념 정리</p>
<p>
최근RIA트렌드</p>
<p>
RIA와 모바일/웹 기반의RIA와 모바일 기반의RIA의 차이점 등</p>
<p>
기업 환경에 최적화된RIA 솔루션을 고민하는RIASoft 기업부설연구소 소장으로 근무하다가 최근 투비소프트로 자리를 옮김. 열이아빠의RIA이야기라는 블로그에서 다양성을 나누고 새로운 경험을 중심으로 나타나는 여러 현상을 탐구하고 있다.</p>
Citrine is native mobile framework.
▶ About Citrine
- It’s a component based structure and mobile app development platform with Web
technologies (XML(MOML), Java Script)
▶ Feature of Citrine
- Object Oriented Approach
This approach solves inefficiency for mobile app development through object oriented
approaches using MOML (Mobile Object Markup Language)
- Simple functional definition
This defines complicated functions by abstracting them matched with actual usage.
- Independent development
This independently separates library developers from application developments and
implements a base to integrate them easily.
- Component based structure
It provides a base by which services developed by service providers are integrated
with other applications.
This document discusses various options for developing mobile applications including native apps, web apps, and hybrid apps. It focuses on hybrid frameworks like PhoneGap, Titanium, and Appspresso which allow developing apps using web technologies that are then wrapped into native containers. These hybrid frameworks provide access to device features while developing using HTML, CSS, and JavaScript instead of native languages. Demo code examples are provided for building hybrid mobile apps with jQuery Mobile and Sencha Touch using the Appspresso framework.
Requirement analysis for the production of educational hybrid web applicationsKwangChul Kim
"교육용 하이브리드 웹앱 제작을 위한 요구 사항 분석"
현재의 이러닝 콘텐츠는 다양한 스마트 기기에서 볼 수 있도록 멀티스크린 환경을 지원해야 한다. 즉 원 소스 멀티 유즈(One Source Multi-Use, OSMU) 기능을 구현할 수 있는 스마트 교육 콘텐츠로 구성해야 한다. 이러한 스마트 교육 콘텐츠를 만들기 위해서는 하이브리드 웹앱 형태의 프레임워크가 필수적이다. 따라서 본 논문에서는 다양한 스마트기기에 이러닝 콘텐츠를 활용할 수 있도록 교육용 하이브리드 웹앱을 제작하기 위한 요구사항을 분석하였다.
Hybrid mobile applications combine native and web technologies. They use a native shell application containing a web view to display web-based UIs, allowing development with web standards like HTML, CSS, and JavaScript. This provides better performance than pure web apps while reducing costs compared to purely native apps. Popular hybrid frameworks include Titanium, PhoneGap, Rhodes, jQTouch, and iUI. They support building cross-platform mobile apps for devices like iPhone, Android, BlackBerry and more.
This document summarizes the latest trends in HTML5 and hybrid apps from early 2015 to late 2015. It provides over 50 sources from news articles and blogs discussing new developments and features in browsers like Chrome, Firefox, Edge and platforms like WebVR, WebAssembly, Service Workers and more. Major topics covered include the shift from Flash to HTML5, HTTPS encryption, Web Audio, Pointer Events and the rise of the Physical Web.
[Angularjs 도입 선택 가이드]
본 문서는 네이버 개발자 블로그 hello world 를 통해서 공개되었습니다.
[문서개요]
이 문서는 AngularJS를 사용한 애플리케이션 개발을 계획하고 있거나 AngularJS 도입을 고려 중일 때 참고 할 만한 내용을 기술한다. AngularJS를 사용하는 방법을 다루지는 않는다.
이 문서의 모든 내용은 AngularJS 버전 1.3.x를 기준으로 작성되었다.
Smart Market Strategy for Mobile Web DeveloperJonathan Jeon
"모바일 웹 개발자의 스마트 시장 진입 전략"이란 제목으로 2011년 10월26일에 충남대에서 열렸던 KWISA 회원사 워크샵에서 발표했던 자료입니다.
모바일 웹 개발자, 특히 학생들을 대상으로 한 자료들을 담아 보았습니다.
혹 살펴보시다, 코멘트하실 내용이 있으면 언제든 남겨주시기 바랍니다.
[ITOnAir]데브멘토 동영상, 옥상훈 okgosu.net 운영자(1/2부)_Dev & Tech Festival
<!--StartFragment-->원소스 멀티 플랫폼 개발 개요플렉스 4.5와 플래시 빌더의 특징플렉스에서의 모바일 사용자 경험(UX)플렉스를 이용한 안드로이드 앱 개발 <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />본 영상은 데브멘토 ITOnAir (tv.devmento.co.kr) 또는 다음tv팟(tvpot.daum.net/pot/Itonair)을 통해 웹과 모바일로 시청하실 수 있습니다.
모바일 환경이 다가와서 우리의 개발 환경도 우리가 생활 하는 일상을 변화 하고 있습니다.
앞으로 스마트 단말들이 성장하면서 웹앱의 진화도 빠르게 될 것으로 예측 됩니다.
2년내 Pad 기반의 컴퓨팅 환경이 우리의 대중을 사로 잡지 않을까 하는 예측을 해보며
앞으로 필요한 모바일 서비스의 중요한 부분은 Widget이 되지 않을까 합니다.
..
감사합니다.
2016년 12월에 진행되었던 W3C HTML5 Conference 2016의 오후 트렉 (웹프레임워크)의 발표 자료입니다.
캔고루 개발팀장이신 김응주님께서 ‘IONIC으로 하이브리드 앱 개발하기, 사례와 시사점’이라는 주제로 발표를 진행하였습니다. . IONIC에 대한 전반적인 소개뿐 아니라 실제 개발하면서 경험한 다양한 시사점도 공유하였습니다.
Social BPM is a methodology that uses social networking principles to improve business process management projects by facilitating bidirectional communication across organizational boundaries. It combines web 2.0 tools with BPM to engage customers, partners, frontline workers and other stakeholders in process improvement activities. Key patterns of social BPM include collaborative process discovery, runtime process guidance using social media monitoring, allowing process users to provide feedback, and extending process development to more roles.
[uengine.org]Process codi – a smartwork platform based on social patternsHannah Kim
The document discusses social patterns and how they can be utilized in business processes. Social patterns refer to how value flows from the use of social networks by companies. They are categorized based on their target usage, such as using human networks to promote products or opening information. The document presents examples of social patterns like issue tracking through collective intelligence. It describes how a social BPM tool called ProcessCODI can integrate social networks, email, and business processes to implement social patterns and enable smart work. ProcessCODI aims to provide workers the right resources at the right time for focus on value-added tasks.
[uengine.org] Process Codi: a social BPM or moreHannah Kim
1) Traditional BPM is less effective for modern, knowledge-based companies that value flexibility over strict processes and boundaries.
2) Social BPM integrates social media and networks into business processes to encourage collaboration beyond organizational boundaries.
3) ProcessCodi is a new social BPM platform that will allow knowledge workers to start and engage with processes using social tools and input from networks, helping to design smart working cultures.
[uengine.org] (kor) uEngine BPM Product IntroHannah Kim
The document introduces uEngine BPM and its solutions. It discusses why users choose uEngine BPM, including its flexibility, customizability, strong developer community, and ability to handle complex processes. It also provides an overview of uEngine's key features and components like the process engine, monitoring, and designer tools.
[uengine.org] (Eng) uEngine BPM Product Intro(uEngine3.5 Suite)Hannah Kim
1. The document provides an introduction to uEngine and uEngine Solutions, including a table of contents and sections on the history, sub-projects, clients, and why users choose uEngine BPM.
2. It describes uEngine's internationally recognized process-oriented architecture consulting services and open source BPM, ALM, SOA, and CBD communities.
3. The document highlights uEngine's dynamic BPM engine, SOA architecture, and support for compound processes across various applications like learning education.
10. Mobile web standard
Adobe-flash support for iPhone
Adobe Flash CS 5에 포함된 iPhone 용 앱 패키지를 통하여 포팅된 아이폰 앱
그러나 애플은 이렇게 개발된 앱을 앱스토어에서 승읶하지 않도록 정책을 바꾸었다.
지난 4월 20일, Adobe on Tuesday evening said it is ceasing investment in a software tool that enables Flash develop
ers to port software into native iPhone and iPad apps, according to Mike Chambers, Adobe’s principal product manag
er for Flash developer relations. --wired.com
애플의 변 - “Someone has it backwards-- it is HTML5, CSS, JavaScript and H.264 (all supported by the iPhone and iPa
d) that are open and standard, while Adobe’s Flash is closed and proprietary, an Apple representative said in a statem
ent provided to CNET.
14. Mobile web standard
W3C의 HTML5와 모바일
모바일 네트워크 특성
- 네트워크에 항시 연결되어있지 않은 WIFI 젂용기기( iPod Touch , iPad ) 들도 있다.
- 네트워크 트래픽을 최소화 하는 것이 아주 중요하다.
오프라읶 기능과 로컬 DB의 지원은 웹서버
와 독립 된 web app이 가능해짐.
<일반 웹 아키텍처>
<모바일 웹 아키텍처>
※출처 : 실젂 HTML5 가이드
15. Mobile web standard
W3C의 HTML5와 모바일
1. 모바일을 위해서 HTML5에서 특화 된 기능
- Offline 지원 : LocalStorage , Web Database , App Cache
- 미디어 처리 : Video , Audio , Canvas
- 입력 지원 : Advanced Forms
- 위치 정보 : GeoLocation ( 연계표준 )
2. HTML5 의 스펙 중 아직 주요 브라우저에서 지원되지 않는 기능.
- WebSocket
- FileReader
- IndexedDB
- Web Workers
16. Mobile web standard
W3C의 Device APIs(DAP)
W3C DAP은 HTML5와 함께 모바일 단말에서 단일한 방식으로 모바일 앱의 다양한 표현과
기기 접근을 가능하게 할 가장 중요한 두 가지 표준
(표준화가 아주 기초 단계)
17. Mobile web standard
OMPT의 BONDI
BONDI initiative 는 2008년 OMTP 멤버쉽에 의하여 탄생했으며 웹앱과 플랫폼 갂 인터페
이스를 정의하며 W3C의 DAP와 통합 될 계획.
(별도로 웹 플랫폼을 설치해야 웹 어플리케이션이 구동이 가능)
18. Mobile web standard
모바일 웹 표준의 고찰
1. 웹 표준과 모바일 지원기능 사용을 위해서는 HTML5을 적용해야 함.
2. 디바이스 표준에 의한 단말기 통합 접근(Top-down 방식)은 시기상조.
19. Contents
1 How to develop a mobile app?
2 Mobile web standard
3 Hybrid development toolkit
4 Conclusion
5 Process Touch
22. Hybrid development toolkit
Phonegap의 웹페이지 실행
‘WWW’ 폴더 내에 웹 소스를 모두 넣고 어플리케이션을 만들기 때문에 실행 시에 웹이
단말기 로컬에서 웹페이지가 실행된다.
Android(eclipse) iPhone(Xcode)
23. Hybrid development toolkit
Phonegap의 구조
• Phonegap android
PhoneGap Native app ver.
• Phonegap iphone ver.
• Phonegap winMo ver.
Device
Contact
Profile
phonegap
Native
File LBS
WebKit System (???)
① URL change event방식
Browser (iPhone & WinMo)
gap://beep(5)
Accelerator
② Javascript & JAVA obj mapping
Application URL (Android)
written in change
event • iPhone
PhoneGap ③ • Android
Device • WinMo
JS API
•
•
①
• Performance with AJAX - UI & Data Separation JSON,XML
MobileWebApp. • Vector Graphic with SVG – raphael + mobile ok Guidelines
(JS) • UX – native like ②
24. Hybrid development toolkit
Phonegap의 동작
PhoneGap <iphone>
<Command>
Web page Phonegap
UIWebkit Sound Device …..
(html) Delegate
beep 버튺클릭
beep(2);
Load
WithRequest
execute()
25. Hybrid development toolkit
Rhomobile의 소개
웹 앱을 기반으로 Webkit 브라우저에 내장시켜 보여주는 방식이 아닌 실제 각 플랫폼
별 Native App을 생성시켜주는 부분에서 Phonegap과 큰 차이가 있다.
(루비와 루비젬스에 익숙해야 사용가능)
26. Hybrid development toolkit
모바일 앱 개발 방법 비교
장점 단점
Native - 각 플랫폼에서 제공하는 모든 기능을 -다른 플랫폼에서 사용 할 수 없다.
홗용할 수 있다. -개발언어에 제약을 받는다.
- 화면 랜더링 속도가 빠르다.
Web - 개발이 용이하다. - 모든 정보를 웹 서버에서 다운로드
- 모든 플랫폼에서 사용 가능. 를 받아야 한다.(속도, 네트워크)
-디바이스 제어가 힘들다.
Hybrid - 웹 개발방식으로 개발하고 모바일 디바 - 초기 개발홖경 구축 비용.
(native +web) 이스 제어 가능.
- 모든 플랫폼에서 사용 가능.
27. Hybrid development toolkit
웹 앱의 디바이스 제어와 로딩 속도
웹 앱에서 다양한 모바일 디바이스들의 제어 방법?
1. Webkit 기반의 PhoneGap으로 단말기 통합 접근(Bottom-up)이 해결법.
웹 페이지 로딩 속도 개선 방안?
1. PhoneGap은 웹페이지를 로컬에서 실행하기 때문에 화면 로딩 시 일반 웹처럼 HTML 소
스를 네트워크를 통하여 가져올 필요가 없다.
2. Ajax를 통하여 UI와 Data를 분리한다.
3. 가볍고 사용하기 편한 Json을 사용한다.
모바일 서버
네트워크
Ajax Json type의 data
PhoneGap
28. Contents
1 How to develop a mobile app?
2 Mobile web standard
3 Hybrid development toolkit
4 Conclusion
5 Process Touch
29. Conclusion
모바일 웹 앱 개발을 위한 기술정리
1. Webkit : 대부분의 단말기 웹브라우저에서 지원하는 플랫폼.
2. HTML5 : 웹 표준, 모바일 지원 기능과 리치 웹 미디어 .
3. PhoneGap : Webkit 기반에 다양한 단말기 디바이스 제어 가능하며 웹페
이지 로컬 실행.
4. Ajax : 웹 페이지 로딩 속도를 위한 UI와 data 갂 분리.
5. Json : Ajax의 data의 경량화
31. Contents
1 How to develop a mobile app?
2 Mobile web standard
3 Hybrid development toolkit
4 Conclusion
5 Process Touch
32. Process Touch
Introduce
워크리스트 확인 프로세스 모니터
및 업무 노티 기능 링 기능
Process 모바읷 기반 회의관리 및
Touch BPMS의 프로세스와 연계
• 프로세스 시작 시점의 연결
회의 시 가장 홗용성이 높은 모바일 단말(아이폰,안드
로이드폰 등)을 홗용하여 LBS와 카메라, 녹음기를 이용
하여 참석자 및 회의내용을 기록하여 프로세스의 시작
을 암시하는 회의 내용을 젂자화함
회의시갂 회의 녹취 및 사짂 이슈 발행(프로세 • 프로세스의 Traceability를 강화
(타임아웃)설정 첨부, 노트 기능 스 개시) 기능 회의 후 회의내용 정리 및 배포를 짂행하고, 회의 내용
에 따른 후속 업무와의 연계를 BPM 시스템으로 지원
하여 Notification 과 업무확인 및 모니터링의 즉시성
을 제공하여 후속업무의 Traceability를 높임
• 오프라읶 업무와의 연계성 강화
모바일 홖경 단독으로 처리하기 보다는 기존 시스템과
의 연계를 통하여 다양한 시너지를 발행할 수 있으며
연계방안은 프로세스 기반의 시스템 홖경이 효율적으
로 적용 가능함
Page 32
33. Process Touch
Scenario
online
프로세스의 시작 현장직
(이슈의 발생) (상황읶지)
Off-line
팀장/의사결정자 현장 담당자
(회의실) Edited from Oracle Source
34. Process Touch
Platform and Framework
Nice mobile web apps
웹 언어를 통한 네트워크 성능
렌더링 속도 리치한 표현
디바이스접근 최적화
JQtouch-like
PhoneGap Json Ajax
framework
Webkit JQuery HTML5
35. Process Touch
Functions
Nice mobile web app
Process Touch
회의 관리 BPM Client
참석자 회의자료 회의시갂 설정 및 프로세스 인스턴스 워크아이템
음성 녹취 네비게이터
자동인식 첨부 완료시갂 알람 시작 리스트 핸들러
PhoneGap JQuery Ajax