HTML5 와리포팅툴구현사례

Size: px

Start display at page:

Download "HTML5 와리포팅툴구현사례"

서택 근
5 years ago
Views:

1 HTML5 와리포팅툴구현사례

2 목차 I. 환경변화와 WEB II. HTML5개요 III. HTML5기반리포팅툴 ( 수행과제소개 )

3 ICT 발전과웹환경변화 I Smart Phone Social, SNS Open Software, Framework Web 2.0, Open API, Ajax Cloud Computing Virtualization UX(User Experience) App Store (Ecosystem) HTML APP 구현촉발 웹브라우저점유율변화 3

4 사용자접근환경다양화 I Cross-Browser Non-ActiveX Multi-OS Smart Device 웹표준요구증가 4

5 웹의한계와웹확장기술 I ActiveX NSAPI 보안문제 모바일불가문제 비표준문제 Java Applet Flash/Silverlight 성능과기능문제 5

6 웹표준과웹접근성 I 근거제목내용 행안부고시 제 호 ( 개정 ) 전자정부서비스 호환성준수지침 웹표준및웹브라우저호환성관련 à 2 개구분, 4 개진단지표정의 행안부고시 제 호 ( 개정 ) 장애인고령자등의정보접근및이용편의증진을위한지침 한국형웹콘텐츠접근성지침 2.0 ( 방통위 ) à 4 개원칙, 13 개지침, 22 개검사항목 6

7 호환성과접근성의주요내용 I 음성인식 SW 연계용 근거 호환성 내용 제 4 조 ( 웹사이트호환성확보 ) 1 기술적제약이없는한 3 종이상의 웹브라우저에서동등하게서비스를제공하도록하여야한다 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나용도를 이해할수있도록대체텍스트를제공해야한다. 접근성 2.1.1( 키보드사용보장 ) 모든기능은키보드만으로사용할수있어야한다 ( 초점이동 ) 키보드에의한초점은논리적으로이동해야하며, 시각적으로구별할수있어야한다. 7

8 HTML5 ISSUE I 8

9 Google 과 MS 의 HTML5 수용 I 크롬웹스토어 윈도우 8 메트로 UI 9

10 HTML5 ISSUE I 방통위가제시한 ActiveX 대체기술은자바애플릿, 플래시등이아닌, 모두웹표준을제시하고있음 10

11 국내업계의관심 I 노플러그인가능한 HTML5 는새로운웹혁명 정보통신산업진흥원 (NIPA) 지원사업선정 11

12 Why HTML5 I Web Page 에서 Web App 으로.. ( 웹의요구사항변화 ) One Source Multi Device Standard 12

13 목차 I. 환경변화와 WEB II. HTML5 개요 III. HTML5 기반리포팅툴 ( 수행과제소개 )

14 HTML5 History II WHATWG (2004) W3C 팀버너스리에의해 HTML고안 W3C에서 HTML3.2부터버전관리 1999년 HTML4.01 발표및개발종료 2004년 WHATWG구성 2008년 W3C HTML5초안발표 2009년 XHTML 개발중단 Web Application Web Form *WHATWG (Web Hypertext Application Technology Working Group) 14

15 HTML5 W3C Statement II 단계 내용 Working Draft 작업초안스펙접수 Last Call (Work Draft) 최종작업초안 의견수렴및이슈해결 2012년 2분기 Candidate Recommendation 권고후보 두개이상브라우저검증 Proposed Recommendation 권고안 최종검토 (4-6주) Recommendation 권고스펙정식승인 15

16 HTML5 Spec II HTML W/G HTML5 Canvas 2D Microdata RDFa Offline Web Application Web Application W/G Server-Sent Event Web Worker File API WebSocket Web Storage IndexedDB Geolocation VS VS 16

17 HTML5 Study II 17

18 HTML5 Feature II ( include HTML4.01, XHTML 1) 1. Semantic Tag Section, footer, 2. Web Form , date, range, number, 3. Multimedia Canvas, Audio, Video,.. 4. Offline App Application Cache 5. Data Web Storage, Web SQL Database,.. 6. Communication Web Workers, WebSocket, 18

19 Semantic Tag II (HTML4.01) (HTML5) 19

20 Web Form II 20

21 Multimedia II 21

22 Multimedia II 22

23 Offline App II 23

24 Data II 24

25 Communication II 25

26 ETC: CSS, File, Drag & Drop, II 26

27 목차 I. 환경변화와 WEB II. HTML5 개요 III.HTML5 기반리포팅툴 ( 수행과제소개 )

28 리포팅툴이란 III Server C/S, WEB Report Viewer PC Report Server Report Form File Internet FAX Mail PDF, Excel, PPT, Image, XML, Tiff, CSV etc Smart Phone/PAD 28

29 주요샘플 III 29

30 과제의목표및정의 III 이번과제는 HTML5 기반리포팅툴 개발로아래와같이 4 개의영역으로구분됩니다. ( 리포팅툴은 DB 에연계하여장표및통계자료를미리보기및출력하는도구를말합니다.) 3 HTML5 기반사용자뷰어 2 리포트폼파일을해석하는서버 1 리포트폼파일 사용자 4 리포트폼파일작성을도와주는디자이너 개발자 30

31 과제의필요성 : HTML5 와리포팅툴 III v 리포팅툴입장에서현존리포트뷰어기술단점 구분기술단점 Plugin No Plugin ActiveX NSAPI Java Applet Flash/Silverlight Ajax Windows 의 IE 에서만동작 보안문제심각, 모바일불가 OS 별로개발해야함, IE 는동작안함 보안문제있음, 모바일불가 JDK 설치필요하고성능떨어짐 보안문제있음, 모바일불가 (ios) CPU 부하크고, 출력품질떨어짐 보안문제있음, 모바일불가 (ios) 웹브라우저간결과모양다소틀림 용지맞춤출력어려움 v 해결책으로의 HTML5 Web Page 구현기술에서, Web App 구현기술로확대 보안문제없고, 모바일을포함하여호환성뛰어남 31

32 공개 SW 리포팅툴해외동향 III Jaspersoft의 JasperReports 와액추에이트의이클립스프로젝트 BIRT 가대표적 양사모두상용제품을보유하고있으며, HTML5는아직지원하지않음 한국적장표양식에취약하여상용을포함하여국내점유율미약함 기술지원서비스부족하고, 한국만의환경 ( 위변조방지, 보안등 ) 연계불가 32

33 리포트폼파일 (1/2) III 리포트폼파일은 Page 개념에맞게 DB 값의삽입위치와전체리포트모양을처리하 는문서포맷으로글로벌섹션과바디섹션으로구분한다. 주요기능지원섹션지원컨트롤지원필드기타 모듈구성 보고서머리글 / 바닥글섹션 페이지바닥글 / 바닥글섹션 그룹머리글 / 바닥글섹션 본문섹션 라인 도형 글상자 ( 이미지포함 ) 테이블 데이터베이스 매개변수 공식필드 시스템필드 요약기능 페이지넘김 33

34 리포트폼파일 (2/2) III 리포트폼파일은호환성과확장성, 그리고공개의용이성을위해 XML 형식을사용하 였다. 공개된포멧을이용해다른개발자는다른확장기능을부여할수있다. 페이지관련리포트폼파일속성 작성된리포트폼파일결과물 34

35 리포트서버 (1/2) III 리포트서버는리포트폼파일을해석하여최종결과물을만드는핵심모듈을말한다. 리포스서버는다양한환경을고려하여자바로개발되었으며, 클라이언트로전달하 는최종결과물도역시 XML 포멧으로전달한다. ( 서버모듈의클래스다이어그램 ) 35

36 리포트서버 (2/2) III 리포트서버는 WAS 의가상디렉토리로서동작된다. 배포는압축된하나의파일 (hero.1.0.jar) 로배포되며, 내부구성은서버모듈다이어그램과동일하다. 36

37 리포트뷰어 (1/2) III 리포트뷰어는서버에요청하여결과물로내려온 XML 포멧을 HTML5 로표현하는부 분으로미리보기, 출력을포함하여이전, 다음, 처음, 마지막, 확대, 축소등의기능을 갖는다. 출력미리보기화면 뷰어의주요기능 37

38 리포트뷰어 (2/2) III 페이지그리기 캔버스의 todataurl() 함수를이용 Image export Canvas 의 drawimage() 함수를사용하여이미지를 X, Y 위치에찍어준다. 38

39 리포트디자이너 III 리포트디자이너는리포트폼파일을좀더손쉽게작성하게도와주는 GUI 툴입니다. 리포트디자이너를통해개발자는리포트폼파일구조이해없이도간단히작성할 수있습니다. 리포트디자이너는닷넷 C# 으로개발되었습니다. 생성하기 읽기 리포트폼파일 당사제품에특화된 XML 에디터 39

40 KB 국민카드사례 III 결제예정금액조회, 청구 / 결제내용조회, 승인내역조회, 카드매출전표, 매입내용조회, 보유카드조회, 과거결제내용조회, 연체내역조회등 200 여종 Mac OS - Safari iphone Ubuntu Linux - Firefox 40

41 감사합니다.

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을 동 향 제 23 권 5호 통권 504호 HTML5가 웹 환경에 미치는 영향 이 은 민 * 16) 1. 개 요 구글(Google)은 2010년 5월 구글 I/O 개발자 컨퍼런스에서 HTML5를 통해 플러 그인의 사용이 줄어들고 프로그램 다운로드 및 설치가 필요 없는 브라우저 기반 웹 플랫폼 환경이 점차 구현되고 있다고 강조했다. 그리고 애플(Apple)은 2010년