2. 소개 개발자. TX팀 모바일개발 - 대우조선해양, 타타상용 - JUMP 모바일 플랫폼 JAVA, HTML, CSS, JAVASCRIPT Spring Framework 기술셋: 모바일웹 ,android 하이브리드, 웹서비스 통합(SOAP)
3. N스크린이란? Future of Screen Technology - http://www.youtube.com/watch?v=g7_mOdi3O5E
4. 배경 다양한 단말출현(타블렛, 스마트 TV, 다양한 스크린 사이즈, OS) 단말마다 OS에 단말 스크린 사이즈에 맞게 각각 개발? 해결책은 웹앱
5. 웹앱이란? 표준 웹 기술 기반을 이용한 어플리케이션(HTML5 & CSS3 & javascript) 멀티 플랫폼, 멀티 디바이스 지원 하는 요소 , N-스크린 시대의 대안으로 부각 받고 있음.
6. HTML5 Ian Hickson 2012년 권고안발표 예정. HTML 컨텐츠 담당하고 있음. 문법이 심플해짐, 요소들이 추가 되거나 변경, 속성들이 추가 및 변경 svg. audio, video와 같은 API들이 추가됨. 문법 예: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>
7. HTML5 문서를 구조화 하기 위한 시멘틱마크업 추가 - header ,nav, article, section, article, aside, footer 참고 : HTML5 differences from HTML4 http://www.w3.org/TR/html5-diff/
8. 시멘틱 웹이란 기본은 의미 의미적 통합으로 데이터 교환이 쉬움. 모바일 컴퓨팅하의 시멘틱을적용예는 - 동영상의 모바일 장치간의 데이터 교환시에 어떤 데이터를 보내는지 알수 있음. Communication 하는 방법에 대한 이슈는 ? - RSS도 시멘틱의 일부임. - 참조 : Intro to the Semantic Web http://www.youtube.com/watch?v=OGg8A2zfWKg
9. CSS3 Presentation영역으로 다양한 효과로 화면을 표현할 수 있음. CSS3의 주요 기능들은 background image, shadow, Multi Column Layout, @font-face, Attribute Selectors, round corner, media query
10. CSS3 media query CSS Level 3 Media Query Demohttp://www.youtube.com/watch?v=GOctqE1_uoc @media screen and (max-width: 650px){/* 모바일브라우져 일 경우*/ //styles } @media screen and (min-width: 651px){/* 태블릿 일 경우*/ //styles }
11. javascript 모든 웹브라우져를다이나믹 하게 할 수 있는 가장 유명한 스크립팅 언어. W3C의 표준은 아님 jQuery는 라이브러리로 자바스크립트를 심플하게 개발 할 수 있으며, 확장성이 있음. jQuery주요기능은 HTML 요소 선택및 조작, CSS 조작, ajax등이 있음.
12. HTML5 & CSS3 & Javascript 모바일 단말은 터치이벤트 터치 및 키이벤트시CSS와 HTML의 조합으로 화면 처리 해야함. css3 animation으로 transition을 지원 pop, flip, swap, fade, cube. Slide up Javascript마우스 이벤트는 구현해야함.
13. N스크린 웹앱적용기 Html5 프레임인 52 Framework으로 시작 - 모든 브라우져가html5 가능하도록 위함. - html5 layout 기능사용. - 모든 브라우져 동일한 디자인 기능 사용. - 기존 multi column grid를 모바일에 최적화하기 위해 960grid system의 fruid하게 변형. springframwork와 tiles 2를 이용한 레이아웃 페이지 분리함,초기에는 단말정보 서버를 이용 태블릿과모바일페이지를 분리해서 화면을 보여주려고 하려고 함.
14. N스크린 웹앱적용기2 CSS를 기본으로 하여 CSS3로 점진적으로 개선하였음. 모든 브라우져에 적용 가능하도록 하기 위해. 단일 웹페이지로적용가능하도록N스크린으로 추후 media Query를 도입합. SpringFramework이용해서 Redmine의 이슈트래커의 RSS서비스를 통합 JSON데이터 서비스를 가능하게 함. Jquery를 ajax를 이용하여 초기 로딩시에redminerssjson을 가져옴.
15. Redmine Ruby on Rails로 만들어진 프로젝트 관리 웹 어플리케이션 메인 기능은 이슈트래커, 형상서버와 연동 가능함. 이슈시이메일 기능, RSS기능
