8. 차세대 웹 표준기술
html > xhtml > html5
Html5 : W3C 2014년에 정식 표준기술 권고예정.
현재 초안으로 표준화작업이 진행중.
HTML5로는 안되는게 없다!
9. HTML5 기반의 모바일 WEBAPP
facebook(HTML5의 기술로 밀어붙인 마크주커버그)
안드로이드 : HTML5기반 Hybrid APP (속도가 최악)
iOS : native APP (올 8월 HTML5 > 네이티브APP으로 변경)
센차로만든 HTML5 패스트북 :
http://vimeo.com/55486684
clear ( 일정관리 APP)
심플함을 대명사로 이슈가 되었던 APP
소개동영상
http://www.youtube.com/watch?v=S00H-rz7fGo
Html5 webapp : http://www.youtube.com/watch?v=RZ-
R0AsnWxY
10. Sencha
Touch
센차터치의 개발방식은 마크업기반인 jQuery Mobile과는 달리 JavaScript 기반
이다.
다른 프레임웍에 비해
ExtJS라는 기존웹앱 개발프레임웍 기반으로 제작되어 개발난이도가 높음.
방대하고 체계적인 API를 제공하여 다양한 기능과 높은성능의 APP 개발이 가능.
터치UI
화면전환 애니메이션(슬라이드/팝업)
12. 센차터치는 index페이지 최초 호출시 index및 하위페이지에 선언된
모든 페이지를 로드한다.
서버와의 연결을 통해 데이터를 가져올때는 AJAX로 처리.
<script id="microloader" type="text/javascript"
src="touch/microloader/development.js"></script>
마크업 기반이 아니어서 body태
그엔 내용이 없다.(그냥 로딩이미
지나 간단한 태그만 들어감)
13. 초기로딩시의 느린속도
터닝 WEB APP 소스에 들어간 JS 로딩
<script type="text/javascript" src="/smartlearning/mobile/app/view/dataStore.js"></script>
<script type="text/javascript" src="/smartlearning/mobile/app/view/content_list_Tablet.js"></script
<script type="text/javascript" src="/smartlearning/mobile/app/view/content_search_tablet.js"></script
<script type="text/javascript" src="/smartlearning/mobile/login.js"></script>
<link rel="stylesheet" href="/smartlearning/mobile/css/android.css" type="text/css">
<script type="text/javascript" src="/smartlearning/mobile/js/video_ios.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="/smartlearning/mobile/js/sencha-touch.js"></script>
<script type="text/javascript" src="/smartlearning/mobile/js/cookies.js"></script>
초기 전체 로딩용량 : 680KB
보통 3G속도는 1Mbps ~ 2Mbps입니다. (1Mbit/sec = 128KByte)
이는 5.3초 ~ 2.7초 걸린다는 말. 실제 체감속도는 이보다 더 느림!
14. Sencha touch 2.1
1) Layout 퍼포먼스 향상
- 네이티브APP에 근접한 레이아웃UI(화면슬라이딩, 부드러운 움직임 등 개선)
- 아래는 실제 디바이스로 비교한결과(orientation change event)
http://vimeo.com/30296006/ http://www.youtube.com/watch?v=M3mbu6cA_lE
2) List Component 성능향상
- 리스트의 수가 많을경우 상/하단 리스트항목의 dom elements를 추가/삭제 하여
부드러운 스크롤링 가능해짐.(무제한 리스트 구현의 성능 해결)
3) 기타 개선항목
- 기본MVC 모델제공(유지보수 및 확장성 용이)
- 동적 클래스(js파일) 로딩기능(초기 로딩용량을 줄일 수 있음)
- Native API Support 확대
16. 센차터치의 기본문법 - JSON(제이슨)
- XML과 같이 인터넷을 통해 자료를 주고받을때 그 자료를 표현하는 방법
- 자바스크립트 기반의 프로그램언어 및 플랫폼 독립적으로 센차터치 뿐 아니라
많은 언어에서 이용.
- Xml보다 속도가 빠르고 데이터 표현방식도 쉬워 많이 사용되고 있음.
<book> XML
<type>textbook</type>
<pages>256</pages>
<title>Programming Pearls 2nd Edition</title>
<description>The first edition of Programming Pearls was one of the most...</description>
<rating>4.5</rating>
<coverType>paperback</coverType>
<genre>Computer Science</genre>
</book>
{
"book": { JSON
"type": "textbook",
"pages": "256",
"title": "Programming Pearls 2nd Edition",
"description": "The first edition of Programming Pearls was one of the most...",
"rating": "4.5",
"coverType": "paperback",
"genre": "Computer Science",
}
}
17. TED 처럼 디자인 해주세요.
이미지 좀 예쁘게 색상도 예쁘
게 버튼모양하고 UI에 신경 써
주세요.
프로답지 않게 왜 디자인이 이
모양이래요~?
그거밖에 못해요?
단조로운 디자인
고객의 요구는 멋진 디자인에 멋진 UI를 원하지만
센차터치 만으론 이를 충족할 수 없다.
18. Sencha touch문법 + 익숙한 기존HTML 개발방식 적용
contentEL 속성
contentEL 속성을 이용하면 HTML 형태로 화면을 구성할 수 있다.
<script>
var mainPanel = new Ext.Panel({
width: 260,
scroll: 'vertical',
contentEl: 'menuList' <!-- menuList를 불러 온다 -->
});
</script>
<div id="menuList"> <!-- menuList라고 ID 값을 준다. -->
<ul>
<li><a href="bbs1.html">게시판1</a></li>
<li><a href="bbs2.html">게시판2</a></li>
<li><a href="bbs3.html">게시판3</a></li>
</ul>
</div>
동영상 : http://www.youtube.com/watch?v=63WA_idl5Io
19. 터닝 적용사례
나 플래시… 앨범형 이미지 리스트 복잡한 화면구성
Html DOM Element 를
붙이는형식
21. 네이티브APP과의 경쟁에서
모바일 WEBAPP의 전망이 밝은 이유
1.HTML5의 발전.
2.Sencha Touch와 모바일프레임웍은 현재 계속 버전업이 되면서
성능이 향상되고 있음.
3.국내 개발자와 레퍼런스도 늘어나고 있음.
4.더불어 디바이스의 성능 또한 좋아지고 있음.
22. 지속적인 관심과 STUDY만이 살길!
WEB/모바일기술의 트랜드에 대한 관심과 study.
- html5, 모바일개발 프레임웍, WEB관련기술
교육솔루션 상품개발에 대한 연구/준비
-개발기술의 전문성과 고객만족.
