Earticle

In this paper, we extend CSS specifications which are needed to reconstruct standard-based 2D web contents in 3D space using CSS stylesheet, and we implement an emulator to confirm the result of representing written sample contents 3D-stereoscopically on a stereo device. First, a new profile which is needed to set the view volume and layout web contents out in 3D space is proposed by extending CSS3 specifications. Then, the user freely reconstructs the web contents from the browser in 3D space using the nwly extended CSS3 specifications and writes sample contents of various kinds. In sequence, the sample contents which were written through preprocessing process using the extended specifications are converted to original CSS code, so that it is executable in webkit-based browsers. Lastly, in system rendering engine emulator, stereo view volume is automatically created, and the user can verify the result of 3D-stereoscopic representation by emulating the final stereo image files, which can be obtained from virtual left and right cameras, on stereo device.

최근 교육현장에서는 교과 및 비교과 프로그램에서 진로탐색과 관련된 다양한 과정들을 개설하여 진로적성 관 련 교육을 실시하고 있다. 그러나, 강의 중심으로 진행되는 직업 교육은 학생들의 관심을 끌지 못했고 결과 또한 만 족스럽지 못한 경우가 있다. 학생들의 관심을 유도할 수 있는 직업 교육 프로그램을 설계하기 위해 다양한 도구를 개 발하고자 하는 노력들이 진행되고 있으며 진로탐색을 위한 직업 적성 검사 도구로 직업 카드를 사용하는 방법이 도 입되고 있다. 오늘날 초등학교부터 중고등학교에 이르기까지 직업적성검사를 진행하는데 카드를 사용하는 경우가 많 지만 스마트폰의 보급으로 웹 기반의 학습과 검사 도구 개발로의 변경이 요구되고 있다. 본 연구는 초중고 학생들을 대상으로 모바일과 인터넷환경에서 플랫폼에 구애받지 않고 적성검사를 진행하여 분석 및 결과를 제시하는 웹 기반 흥미유형검사 시스템을 설계하는 것이 목표이다.

In the recent field of education, they open career-related curriculums either as formal curricular programs or extracurricular programs as highlighting value of career education. However, this lecture-based career education has failed to attract students’ interest, and results are not satisfactory either. Since then, in order to design entertaining career education, the field has developed diverse tools and as a vocational aptitude testing tool for career development, methods that would use vocational cards were introduced. Today, schools from elementary school to middle and high schools frequently make use of the cards to conduct the vocational aptitude test and yet, as this web-based learning and smartphones are distributed, changes in the testing tool are being intensely demanded. This study aims to create and implement an application to help the vocational cards-using vocational aptitude test targeting students in elementary, middle and high schools to be actually conducted in a mobile platform

Most web documents are written in Cartesian coordinates, so the study of vertical arrangement of text has been well organized, while the study of circular arrangement is very early. With the recent development of circular display devices, the demand for circular arrangement of texts is increasing. Thus, we proposed a CSS3 extended specification of polar coordinate layout for the circular placement of text. First, we defined the concept of fan model for the text arrangement in polar coordinate which is corresponding to box model in Cartesian coordinate. And, we described new definition on the directions of sentence, paragraph and text orientation in polar coordinate. Based on this new definitions, we developed the extended specification consisting of three parts. A part for setting the fan model, a part for setting directions, and a part for setting typesetting properties. To verify the feasibility of the proposed specification in current web browsers, a preprocessor was developed and sample contents were examined. We compared the code length of the sample contents implemented using other JavaScript library CssWarp.js so as to verify the efficiency of the proposed specification.

본 논문에서는 브라우저 기반의 선언적 콘텐츠 CSS3 스타일시트를 이용하여 HTML5로 작성된 웹 페이지를 3차원 공간에서 3D 스테레오로 표현하기 위해 기존의 CSS 사양을 확장하여 새로운 CSS Stereo 3DTV 프로파일을 제안한다. 먼저, 웹브라우저상의 웹 콘텐츠를 3차원 공간에 효과적으로 재구성할 수 있도록 다양한 웹 페이지 분리 방법을 제시하였다. 디음, 확장한 CSS3 모듈을 이용하여 3D 뷰 볼륨 설정과 분리한 콘텐츠를 뷰 볼륨 내에 배치하는 방법을 제안하였다. 이후, 전처리기에서는 확장 CSS 사양으로 작성된 샘플 콘텐츠를 웹킷 기반 브라우저에서 출력 가능하도록 기존 CSS 코드로 변환한다. 마지막으로 스테레오 이미지 생성을 위한 시스템 렌더링 엔진 에뮬레이터는 웹브라우저상에서 간단히 실행 가능하도록 자바스크립트로 구현되었으며, 자동으로 스테레오 뷰 볼륨을 생성하여 가상의 좌안, 우안 카메라로부터 각각의 영상을 획득한다. 이를 통해 각 샘플 콘텐츠들이 3D 스테레오로 표현된 결과를 확인하였다.

In this paper, we represented the HTML5 webpage in 3D space for the 3D stereoscopic display by using CSS3 stylesheet; browser-based declarative contents, and proposed CSS Stereo 3DTV Profile. First, we suggested various webpage separation methods for reconstructing webpages in the 3D space effectively. Next, we suggested 3D view volume setting method by using extended CSS3 modules. And then, pre-processor converts sample contents which is written extended CSS stylesheet into the present CSS stylesheet for displaying in the webkit based browser. For the resulting stereoscopic images, we developed a rendering engine emulator which is implemented in JavaScript for simple display in the web browser, which produced dual images from virtual left and right-eyed cameras. And we have checked the sample contents displayed on the 3DTV.

본 논문에서는 CSS3 스타일시트를 이용하여 HTML5로 작성된 웹 페이지를 3차원 공간에서 3D 스테레오스코픽으로 표현하였다. 먼저, 웹브라우저상의 웹 콘텐츠를 3차원 공간에 효과적으로 재구성할 수 있도록 다양한 웹 페이지 분리 방법을 제시하였다. 다음, CSS3 모듈을 이용한 3D 뷰 볼륨 설정 방법을 제안하였다. 스테레오 이미지 생성을 위해 시스템 렌더링 엔진 에뮬레이터에서는 자동으로 생성한 스테레오 뷰 볼륨의 가상 좌안, 우안 카메라로부터 각각의 영상을 획득하였다. 그리고 각 샘플 콘텐츠들이 3D 스테레오스코픽으로 표현된 결과를 확인하였다.

In this paper, we represented the HTML5 webpage in 3D space for the 3D stereoscopic display by using CSS3 stylesheet. At first, we suggested various webpage separation methods in order to reconstruct webpages in the 3D space effectively. Next, we suggested 3D view volume setting method using CSS3 modules. For the resulting stereoscopic images, we developed a rendering engine emulator which produce dual images from virtual left and right-eyed cameras. And we have checked the sample contents displayed on the 3D stereoscopic monitor.