RTE 설치및 테스트 방법

Scorm RSS Icon ATOM Icon 2009/07/17 19:12 visualp
[출처] - http://www.word.pe.kr/ 

1. 콘텐츠 추출
패키지할 콘텐츠를 정리합니다.
보통 html 파일과 swf 파일, 그리고 여러 스크립트 파일이 여기에 해당할 겁니다.

간혹 fla파일과 같은 원본 파일을 배포할 콘텐츠에 넣으시는 분들이 있는데요..
용량도 커지고.. 소스도 유출되고.. 빼는 게 좋겠죠.. ^^

2. API 파일 선정
SCORM을 사용하려면 SCORM API를 삽입해야 합니다.
그러려면 사용할 API가 필요한데요.. 일반적으로 SCORM 콘텐츠에 포함된 APIWrapper.js 파일을 사용하시면 되는데요..
이럴 경우, 다음과 같은 loadPage, unloadPage를 추가적으로 구현해 줘야 하는 문제가 있습니다.

var exitPageStatus = false;

function loadPage()
{
      var result = doInitialize();
}
 

function unloadPage()
{
     if (exitPageStatus != true)
     {
        doTerminate();
     }
}

그래서 보통은 이것까지 감싼 Wrapper를 사용하는 것이 보편적입니다.
제가 작성한 MiniAPIWrapper.js 파일을 사용하시면 될 것 같습니다.
js 파일 하나지만 zip으로 묶어서 자료모음에 올려놓도록 하겠습니다.

필요에 따라 MiniAPIWrapper.js 파일의 하단 Mini Main Function을 변경해서 사용하시면 됩니다.

3. API 삽입
이제 SCORM API를 삽입해보도록 하겠습니다.
이 API는 자바스크립트로 되어 있기 때문에 반드시 기존 콘텐츠에 스크립트 오류가 있어서는 안됩니다.

간혹, flash 파일의 action script의 오류로 인해서 SCORM API 호출이 안되는 경우도 있었습니다.
꼼꼼히 확인하시기 바랍니다.
(인터넷 익스플로러의 경우 도구>인터넷옵션>고급>모든 스크립트 오류에 관련된 알림 표시를 체크해 두세요)

콘텐츠 HTML 상단에 다음과 같이 SCORM API를 포함합니다.
<script type="text/javascript" src="util/MiniAPIWrapper.js"></script>

MiniAPIWrapper.js 파일의 위치를 정확하게 표기하셔야 합니다.
이 위치를 잘못 설정해 놓고 안된다고 하시는 분들도 많더라구요 -.-

다음으로 HTML <body>태그에서 SCORM API를 호출합니다.
<body onLoad="loadPage()" onUnload="unloadPage()">

이걸로 콘텐츠에 API 삽입이 마무리 되었습니다. ^^ (쉽죠~~ 캬!!)

참! 여기서 주의할 사항이 있습니다.
콘텐츠가 iframe 구조로 되어 있는 경우, onUnload 이벤트가 호출되지 않는 경우가 종종 있었습니다.  
이때는 onUnload 대신에 onBeforeUnload 이벤트를 사용하면 되더라구요.. 꼭 기억해 두세요~~

여기서 API가 제대로 되었는지 확인하고 싶으시다면..
Test Suite를 이용해서 SCO 테스트를 해보시면 됩니다.

MiniAPIWrapper.js를 넣고 로컬에서 테스트해보면
"API를 초기화할 수 없습니다."라는 메시지가 나올 겁니다.

SCO로 사용할 모든 HTML에 위와 같은 작업을 해 주시면 됩니다.

여기서 잠깐
SCORM에는 Asset이라는 것이 존재합니다 .
이것 또한 HTML 페이지라고 볼 수도 있는데요.. 이것은 SCO와 달리 학습결과를 추적하지 않습니다.
그러므로 위와 같은 API 추가 작업이 필요없습니다.

외국의 SCORM 예제를 보면 이런 Asset을 많이 사용하고 있는 것을 알 수 있습니다.
모든 학습 페이지의 학습여부를 판단하지 않고 중요한 것만 체크하는 방식이지요..

하지만 국내 이러닝 프로젝트에서는 모든 페이지의 학습결과를 체크하기를 요청하는 것 같습니다.
실제로 이런 학습결과 데이터가 무의미하게 너무 많이 쌓여서 나중에 문제가 되는 경우도 있더라구요. -.-
(페이지 단위의 cmi data는 학습 당시에는 쓸모가 있을 것 같아도 나중에는 별 소용이 없는 것 같기도 합니다. -.-)

4. SCORM 패키징
이제는 SCORM 패키징을 할 차례입니다.
imsmanifest.xml 파일을 만드는 것이죠..

이 작업은 반드시 툴을 활용하시라고 하고 싶습니다. (물론 직접 XML을 타이핑하실 분은 없겠죠.. ^^)
국내에도 괜찮은 제품들이 많이 있으니.. 참고하시구요~
오픈소스인 Reload를 사용하셔도 될 겁니다.

어쨌든 방식들은 거의 비슷합니다.
1. 패키지 만들고
2. resource 등록하고
3. organization 하위에 item 등록하고 resource와 연결시키구..

(DUNET에 있을 때 만든 DUNET Scorm Editor에서는 Resource와 Item 등록을 한번에 처리하도록 구성했었죠..
대부분 에디터가 2, 3번 단계를 따로 작업해야 하더라구요 -.-)

5. 메타데이터 삽입
패키징까지 잘 되었다면 필요한 부분에 메타데이터를 삽입하시면 됩니다.
LOM을 이용하는 SCORM 메타데이터의 범위가 꽤 넓고 다양합니다.

그러나 제가 사용해 본 바로는 General의 title, description, keyword 정도 입력해서..
SCO 검색용 정도로 활용해 본게 전부입니다.

일단 검색 이외의 용도로 메타데이터를 활용할 일은 별로 없을 것 같기도 합니다.
뭐.. 나중에 필요하다고 하면 어쩔수 없겠지만요..

어쨋든 메타데이터는 꼭 필요한 것만 최소한으로 그리고 정확하게 넣으시구요~~

KERIS에서 KEM이라는 메타데이터를 만들었습니다.
LOM과 거의 유사한데요. 7차 교육과정을 추가한 항목입니다.

그래서 메타데이터 입력할 때, KEM을 사용하면 ADL의 Test Suite를 통과하지 못합니다.
이점도 참고하세요~~

6. 테스트
이제 테스트할 차례입니다.
SCORM 규격에 맞다면, SCORM 2004 3rd Edition Comformance Test Suite와 Sample RTE에서 잘 돌아가야 합니다.

간혹, 프로젝트하다 보면...
콘텐츠하고 솔루션하고 다투는 경우가 있습니다.
서로 안맞는 거죠.. -.-

그런데.. 같은 스펙을 보고 하는데 왜 안맞는지.. 쩝~~
콘텐츠에서는 Test Suite와 Sample RTE에서 돌아간다는 것만 보여주면 됩니다.
반대로 솔루션은 LMS Test Content Package가 잘 돌아간다는 것만 보여주면.. 되겠죠~~

그러면 둘이 서로 싸울일은 없을 겁니다. ~~

그럼.. 댓글 하나씩 부탁드릴께요..
스펨 때문에 회원만 정보를 입력할 수 있도록 했더니.. 사이트 접속 숫자는 변함이 없는데..
글을 쓰시는 분들이 너무 적네요.. -.-

어쨋든 좋은 하루 되세요~~~
2009/07/17 19:12 2009/07/17 19:12
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/9

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/9

XML선언

웹표준 RSS Icon ATOM Icon 2009/07/17 19:11 visualp
XHTML은 XML어플리케이션의 한 종류이기 때문에 문서의 처음 부분에 XML선언을 기술한다ㅏ.

<?xml version="1.0" encoding="UTF-8"?>
<html>
     <head>
           문서의 기본정보
     </head>
     <body>
           문서의 본문
     </body>
</html>

버전 속송은 필수 속성이며 XHTML 버전이 아닌 xml 버전임으로 XHTML1.0 이든 XHTML1.1이든 상관없이 1.0 으로  지정한다.

한글이 깨질 경우 UTF-8  --> EUC-KR 지정 한다.
2009/07/17 19:11 2009/07/17 19:11
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/8

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/8

문서형 선언

웹표준 RSS Icon ATOM Icon 2009/07/17 19:11 visualp
XHTML에는 여러 버전이 있음으로 이문서가 어떤 버전의 XHTML로 작성 되었다는 것을 명시 하기 위해서 xml 버전 선헌후 바로 문서형 선언을 하면 된다.

Xhtml에는 strict,Transitional, Frameset 이 있으며 각각 HTML4.01의 Strict, Transitional, Frameset을 이어 받는다. 그러나 XHTML 1.1버전에서 Transitional, Frameset 폐지 되고 Strict에 해당하는 것만 존재 함으로 Strict를 문서 형으로 선언 해야 한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
           문서의 기본정보
     </head>
     <body>
           문서의 본문
     </body>
</html>


2009/07/17 19:11 2009/07/17 19:11
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/7

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/7

네임스페이스는 xmlns 속성으로 지정 
XHTML에서는 "http://www.w3.org/1999/xhtml" 이 네임 스페이스로 부여 되어 있음

언어 코드는 xml:lang 속성으로 지정
한국어  : ko
영   어  : en
미   국  : en-us
프랑스  : fr
중   국  : zh

XHTML1.0에서는 하위 호환성을 고려하여 xml:lang 속성 같은 값을 지정 한다.
XHTML1.1에서는 lang속성을 인정하지 않기 때문에 xml:lang 속성만으로 문자코드를 지정한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko" >
     <head>
           문서의 기본정보
     </head>
     <body>
           문서의 본문
     </body>
</html>

2009/07/17 19:11 2009/07/17 19:11
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/6

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/6

title , 타이틀 지정

웹표준 RSS Icon ATOM Icon 2009/07/17 19:11 visualp
XHTML 문서에서 타이틀은 반드시 한 번만 지정 해야 한다.
중복  지정은 인정 되지 않음.
타이틀 지정시 뜻살려서 시정
예 X) 3장
예 O) 3장 DML 사용 하기 - 실습

이페이지가 어떤 페이지 인지 나타낼 수 있도록 명확히 표시 하도록 하자.
 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko" >
     <head>
           <title>장 DML 사용 하기 - 실습</title>
     </head>
     <body>
           문서의 본문
     </body>
</html>

2009/07/17 19:11 2009/07/17 19:11
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/5

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/5

link 요소

웹표준 RSS Icon ATOM Icon 2009/07/17 19:10 visualp

외부 스타일 시트 지정
<link rel="stylesheet" type="text/css" media="screen" href="./css/default.css" />
<link rel="stylesheet" type="text/css" media="print" href="./css/print.css" />


작성자 지정 - 주로 이메일 지정시 사용
<link rev="made" href=mailto:rhqudaks@nate.com" />

2009/07/17 19:10 2009/07/17 19:10
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/4

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/4

인라인요소(inline elements)

웹표준 RSS Icon ATOM Icon 2009/07/17 19:09 visualp
인라인 요소는 "행안의 일부" 라는 의미.
 - a,img,em,strong 등이 해당됨

인라인 요소와 텍스트는 반드시 블록 레벨 요소에 포함시켜 나타내어야 한다.

[옳은 표현]
<body>
    <p>XHTML 문서에는 <strong>구조와 표현의 분리</strong>가 중요하다.</p>
</body>

[잘못된 표현]
<body>
    XHTML 문서에는 <strong>구조와 표현의 분리</strong>가 중요하다.
</body>

결과는 같지만, 구조상 잘못된 표현에서는 body요소 하위에 텍스트 요소를 바로 표현 했기 때문에 잘못된 표현이라고 할 수 있으며 , 좋은 표현 처럼 p테그를 이용하여 블록 요소 안에 나타내어야 한다.
2009/07/17 19:09 2009/07/17 19:09
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/3

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/3

인용문(blockquote요소)

웹표준 RSS Icon ATOM Icon 2009/07/17 19:09 visualp
텍스트를 정리된 이용문 으로 정의할 때 사용.
블록 레벨 요소이지만 직접 인라인 요소와 텍스트를 포함하는 것은 불가능 하고, <p/>테그와 함께 사용 하나다.

ex)

<blockquote>
       <p> visualp님의 홈페이지 입니다.</p>
</blockquote>

blockqute 의 속성
  - city
      - 사이트 참조글 주소 city="http://visualp.com/edu/edu1.html"
      - 책 : ISBN  city="urn:isbn:0-000-12345-845"
2009/07/17 19:09 2009/07/17 19:09
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/2

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/2