9 장 기본 링킹

기본 링킹 1

9 장 기본 링킹

9.1 링킹 개념의 개요

9.2 SMIL 기본 링킹 요소

9.3 SMIL 에서 링크의 다른 사용

9.4 요약 및 결론

기본 링킹 2


링크는 가장 단순한 형식으로 문서의 주소와 임의로 그 문서내의 오프셋을 정의하는 포인터이다 .

SMIL 은 링크를 소스 앵커가 제한된 시간 주기 동안만 활성화될 수 있거나 , 또는 링크의 목표가 미디어 객체의 렌더링 동안에 변경될 수도 있는 시간이 정해진 링크 (timed links) 로 확장되었다 .

HTML 에서 링크항해를 위한 링크 : 어떤 링크를 따라서 , 하나의 콘텐츠 초점 (focus

)’ 으로부터 다른 콘텐츠 초점을 선택한다 . 이 링크는 일반적으로 단향성이다 . 그러나 양방향 링크도 정의될 수 있다 . 소스 초점은 보통 링크로 교체되나 , 그 목적지는 그 소스를 확대시킬 수도 있다 .

기본 링킹 3

활성화를 위한 링크 : 어떤 링크를 따라서 , 프리젠테이션의 후속 부분이 시작된다 . 길고 복잡한 정보의 프리젠테이션을 구조화할 때 사용될 수 있다 . 활성화 링크는 하나의 로컬 프리젠테이션 흐름에 대체 콘텐츠를 표현하는 수단을 제공한다 .

메시지 전달을 위한 링크 : 어떤 링크를 따를 때 , 목적지 문서에 대한 상태 정보를 표현하는 것이 가끔 유용하다 . 항해 링크와 활성화 링크 둘 다 사용자에 의해 제공된 매개변수로 보충될 수 있다 .


기본 링킹 4

1 <HTML> 2 <Body> 3 Here is an <A href="#nearTheEnd"> anchor</A>. It points to a location within this document. 4 This is another <A href="http://www.w3.org/Audiovideo"> anchor</A> It points to an external document located at www.w3.org. 5 Here is a link containing a reference to a destination anchor <A href="http://www.w3.org/TR/smil20/extended-linking.html #SMILLinking-Introduction">fragment</A> 6 <A name="nearTheEnd">This</A> is the definition of a destination anchor. 7 <A name="theEnd"/> 8 </Body> 9 </HTML>

HTML 에서 내장형 앵커와 링크

• 링크 개념을 보여주는 HTML 문서

기본 링킹 5

HTML 의 외부 앵커와 링크• <map> 과 <area> 를 통한 외부 링크1 <img src="nicePicture.gif" usemap='#mapNP" alt="Nice Picture"> 2 3 <map name="mapNP"> 4 <area heref="overview.html#start" 5 alt="General Overview" 6 shape="rect" 7 coord="0,0,123,45"> 8 <area heref="overview.html#quiz" 9 alt="Did yor get it?" 10 shape="rect" 11 coord="111,0,675,45"> 12 <area heref="review.html" 13 alt="A Reneral Review" 15 shape="circle" 16 coord="111,150,401,45"> 17 <area heref="summary.html" 18 alt="Final Words" 19 shape="rect" 20 coord="111,150,401,45"> 21 </map>

기본 링킹 6

SMIL: 링크에 시간 추가 SMIL 에서 타임 , 링킹 , 구조

•프리젠테이션에서 특별한 시간 모멘트로 간편히 이동하는 것으로 시간이 정해진 환경에서 링킹은 매력적이다 .

•하나의 미디어 객체 내에서 링크


기본 링킹 7

요소 : <a> <a> 요소의 구조

기본 링킹 8

SMIL 에서 <a> 요소의 사용

기본 링킹 9

요소 : <area><area> 요소의 구조

기본 링킹 10

SMIL 에서 <area> 요소의 사용

1 <?xml version="1.0" encoding="utf-8"?> 2 ... 3 <video src="soccer.mpg" region="A1"> 4 <area id="V2" href="#V1" shape="rect" coords="100,50,150,100"/> 5 <area id="V4" href="#V3" shape="circle" coords="160,177,20" 6 begin="10s" dur="5s"/> 7 </video> 8 <video id="V1" src="memory.mpg" region="A1" /> 9 <video id="V3" src="hill.mpg" region="A1" /> 10 ... 11 </smil>

기본 링킹 11


기본 링킹 12


SMIL 에서 링킹 정책 : 객체 내에서 링킹1 <?xml version="1.0" encoding="utf-8"?> 2 <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/WD/SMIL20.dtd"> 3 <smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language" xmlns:rn="http://features.real.com/2001/SMIL20/Extensions"> 4 <head> 5 <layout> 6 <root-layout height="210" width="270"/> 7 <region id="golf" height="200px" width="260px" backgroundColor="white" left="5px" top="5px" showBackground="always"/> 8 </layout> 9 </head> 10 <body> 11 <par> 12 <video src="practice1.mpg" region="golf" fit="fill"> 13 <area id="S1" href="#S2" shape="rect" coords="0%, 0%, 100%, 100%" begin="0s" dur="20s" /> 14 <area id="S2" shape="rect" coords="0%, 0%, 100%, 100%" begin="04:40" /> 15 </video> 16 </par> 17 </body> 18 </smil>

기본 링킹 13


기본 링킹 14


SMIL 에서 링킹 정책 : 객체들을 횡단하는 링킹

1 <?xml version="1.0" encoding="utf-8"?> 2 <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/WD/SMIL20.dtd"> 3 <smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language" xmlns:rn="http://features.real.com/2001/SMIL20/Extensions"> 4 <head> 5 <layout> 6 <root-layout height="210" width="270"/> 7 <region id="golf" height="200px" width="260px" backgroundColor="white" left="5px" top="5px" showBackground="always"/> 8 </layout> 9 </head>

기본 링킹 15

1 <body> 2 <seq> 3 <par id="S3"> 4 <video src="practice1.mpg" region="golf" fit="fill"> 5 <area href="#S4" shape="rect" coords="0%, 0%, 100%, 100%"/> 6 </video> 7 <audio src="dream.mp3"/> 8 </par> 9 <par id="S4"> 10 <video src="m_3.mpg" region="golf" fit="fill"> 11 <area href="#S3" shape="rect" coords="0%, 0%, 100%, 100%"/> 12 </video> 13 <audio src="station.mp3"/> 14 </par> 15 </seq> 16 </body> 17 </smil>

기본 링킹 16


기본 링킹 17


SMIL 기본 링킹 속성 구조 링킹 속성 개요

기본 링킹 18


소스 앵커의 활성화 기간 지정 SMIL 타이밍은 링크 구조에 대한 활동 기간을 제한하기 위하여

사용될 수 있다 . SMIL 은 <a> 와 <area> 요소에 대한 링크 활성화 기간의 정의를

허용한다 . 목적지 앵커 시간적 모멘트

목적지의 시간적 모멘트를 결정하는 규칙 • 목적지가 이미 활성화되었을 때 : 만일 링크의 목적지가 이미

활성화되었다면 , 요소는 효과적으로 다시 시작된다 . 그것의 모든 동료와 조상 요소들의 시간적 모멘트는 링크 목적지의 시작 시점에 기초하여 효율적으로 재설정된다 .

• 목적지가 활성화되지 않았고 , 시작 시간이 결정되었을 때 : 목적지의 시간이 해결되면 , 프리젠테이션은 시간적 모멘트를 찾는다 . 동료와 조상의 시간적 상태는 링크 목적지의 시간적인 모멘트와 일치하도록 다시 할당된다 .

기본 링킹 19


• 목적지가 활성화되지 않을 때 , 시작 시간이 결정되지 않았을 때 : 가장 복합적인 경우로 스케줄러는 첫 번째 결정된 부모를 찾기 위하여 문서 트리를 검색해야 한다 . 이 시간은 링크 목적지가 도착될 때까지 각 자식에 적용된다 . 결정된 시작 시간은 그 링크 목적지에 적용되고 , 그것은 미래에 이 링크를 결정하는데 잠재적 재사용을 위하여 스케줄러에 의해 저장된다 .

링크 앵커 형상을 위한 속성 속성 : shape

• <area> 요소는 앵커의 모양을 지정하기 위하여 shape 속성을 가지고 있다 . 허용되는 값은 rect, circle 그리고 poly 이다 .

속성 : coords• shape 속성에 의해 정의된 앵커의 크기와 위치는 coords 속성에 의해

결정된다 . • 300*200 미디어 객체가 꼭대기로부터 10 픽셀과 왼쪽으로부터 20 픽셀오프셋에 놓이면 , 앵커의 좌표 (150*100) 의 중심점은 지역 공간의 170, 110 의 지역 오프셋에 실제로 위치된다 .

기본 링킹 20


<?xml version="1.0" encoding="utf-8"?> 2 ... 3 <root-layout height="220" width="320"/> 4 <region id="A1" height="200px" width="300px" fit="hidden"/> 5 ... 6 <video src="soccer.mpg" region="A1" top="10" left="20"> 7 <area id="V2" href="#V1" shape="rect" coords="100,50,150,100"/> 8 </video> 9 <video id="V1" src="memory.mpg" region="A1" /> 10 ... 11 </smil>

기본 링킹 21


기본 링킹 22


• SMIL 은 <area> 에서 사용되는 픽셀 값은 미디어 객체의 차원 보다 디스플레이 장치 ( 스크린 ) 의 해상도에 대응한다 .

1 <?xml version="1.0" encoding="utf-8"?> 2 <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/WD/SMIL20.dtd"> 3 <smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language" xmlns:rn="http://features.real.com/2001/SMIL20/Extensions"> 4 <head> 5 <layout> 6 <root-layout height="220" width="320" backgroundColor="red"/> 7 <region id="r1" height="200px" width="300px" backgroundColor="#87ffed" left="10px" top="10px" showBackground="always" fit="meet"/> 8 </layout> 9 </head> 10 <body> 11 <seq> 12 <video src="m_3.mpg" region="r1"> 13 <area id="a1" href="#I1" shape="rect" coords="92,8,180,83" /> 14 </video> 15 <img id="I1" src="yh6-1.jpg" region="r1" /> 16 </seq> 17 </body> 18 </smil>

기본 링킹 23


기본 링킹 24


• 만일 이미지의 어떤 부분이 보이지 않으면 , 그것은 그 지역 밖에 있는 픽셀의 범위를 지정할 수도 있다 . 만일 어떤 앵커가 부분적으로 지역 내에 있고 , 일부는 지역 밖에 있다면 , 그 지역 내에 있는 영역만 선택 가능하다 .

기본 링킹 25


활성화 후 Playstate 제어 속성 SMIL 2.0 은 어떤 링크를 따를 때 소스와 목적 프리젠테이션의

상태를 제어하기 위한 3 가지 속성 : destinationPlaystate, show 그리고 sourcePlaystate 를 사용한다 .

속성 : destinationPlaystate • 목적 앵커를 포함한 프리젠테이션의 상태를 지정한다 . 그것은 play

또는 pause 를 설정할 수 있고 , 디폴트는 play 이다 . 속성 : show

소스와 목적 프리젠테이션이 어떻게 처리되는지를 명시한다 . show 속성은 2 가지 값 : new, replace 가 지원된다 . 만일 show 값이 new이면 , 소스와 목적 프리젠테이션 둘 다 그 링크를 따른 후 활성화될 것이다 . 만일 show 값이 replace 이면 , 소스 프리젠테이션은 중지되고 나중에 일어날 수 있는 재활성화를 위해 그것의 현재 상태는 저장된다 . 목적 프리젠테이션은 원래 플레이어 인스턴스에서 소스를 교체한다 .

기본 링킹 26


속성 : sourcePlaystate • 이 속성은 링크 활성화된 후 소스 프리젠테이션의 행위를 제어한다 .

다음 값들 : play, pause 그리고 stop 을 허용한다 . 만일 play 가 지정되면 , 그 소스 프리젠테이션은 재생을 계속한다 . 만일 pause 가 지정되면 , 그 소스 프리젠테이션은 그 링크가 활성화되는 시점에서 소스 프리젠테이션은 중지된다 . 목적 프리젠테이션이 완료되었을 때 , 소스 프리젠테이션은 재개되어야 한다 . 만일 stop 이 지정되면 , 그 소스 프리젠테이션은 종료된다 .

다른 링킹 제어 속성 속성 : actuate

• SMIL 은 링크가 사용자와의 상호작용에 의해 활성화되는 것을 허용한다 . 또한 링크가 자동적으로 활성화되는 것을 허용한다 . 링크 활성화는 actuate 속성에 의해 제어된다 . actuate 에 대한 onRequest 값은 링크가 플레이어의 인간 상호작용 인터페이스 사용에 의해 일어난다는 것을 명시한다 . onLoad 값은 링크가 그 링크 시작을 포함하는 객체의 활동 기간 모멘트에 활성화 된다는 것을 명시한다 .

기본 링킹 27


속성 : target • target 속성은 활성화 상태에 있을 때 목적지가 표현되는 곳을

제어한다 . 속성 : external

• external 속성은 그것이 활성화되어진 후 목적지를 표현하기 위하여 사용되는 응용의 종류를 제어한다 . SMIL external 속성은 목적지가 어떻게 처리될지를 명시한다 .

속성 : sourceLevel 과 destinationLevel • soundLevel 과 destinationLevel 속성은 어떤 링크가 활성화된 후

소스와 목적 프리젠테이션의 오디오 단계를 제어한다 . 속성 : alt

• 이 속성은 앵커를 식별하기 위하여 사용자 에이전트에 의해 사용될 수 있는 텍스트 스트링을 명시한다 .

속성 : tabindex• 이 속성 값은 정수이다 . 그것은 활성화되는 앵커들의 집합의 선택

순서화를 명시한다 .

기본 링킹 28


속성 : accesskey • 이 속성 값은 링크를 활성화 시키는데 사용될 수 있는 키보드 문자

또는 로커 버튼 장치를 정의한다 . SMIL 프레젠테이션과 그 프리젠테이션 내의 미디어 객체사이에 액세스 키의 정의에 충돌이 있으면 , SMIL 프리젠테이션은 그 키를 처리할 것이고 그 링크를 작동시킨다 . 만일 내장된 콘텐츠가 SMIL 정의와 충돌이 없는 액세스 키를 지정한다면 , 그 관련된 링크는 내장된 콘텐츠 안으로 따라간다 . 만일 어떤 SMIL 문서 내에 2 개의 앵커가 같은 액세스 키를 공유하면 , 가장 높은 z-index 스택킹 순서를 가지는 SMIL 지역에 표현되는

앵커가 우선권을 가진다 .

기본 링킹 29

9.3 SMIL 링킹의 다른 사용

SMIL 링킹과 활성화 제어 활성화 제어를 위해 링킹의 사용은 프리젠테이션의 뒤 따르는

부분이 사용자 행위가 일어날 때 까지 지연되는 것을 허용한다 . SMIL 2.0 은 이것을 효율적으로 관리하기 위하여 begin 과 end

속성에 대화형 타이밍을 도입하였다 . SMIL 2.0 은 프리젠테이션 -와이드 활성화 제어를 관리하기 위하여 <excl> 요소를 역시 도입하였다 .

활성화 제어를 위한 링크 사용1 <?xml version="1.0" encoding="utf-8"?> 2 <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/WD/SMIL20.dtd"> 3 <smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language" xmlns:rn="http://features.real.com/2001/SMIL20/Extensions"> 4 <head> 5 <layout> 6 <root-layout height="340" width="320" backgroundColor="#f8d92f"/> 7 <region id="r1" height="50px" width="280px" left="20px" top="5px"/> 8 <region id="r2" height="230px" width="280px" left="20px" top="60px"> 9 </region>

기본 링킹 30

1 <region id="r3" height="40px" width="200px" left="60px" top="295px" fit="fill"/> 2 </layout> 3 </head> 4 <body> 5 <seq> 6 <par id="drop"> 7 <img src="drop.jpg" region="r1" fit="fill" fill="freeze"/> 8 <video src="drop.mpg" region="r2" fit="fill"/> 9 </par> 10 <a href="#smash"> 11 <img src="continue1.gif" region="r3" dur="30s" fit="fill"/> 12 </a> 13 </seq> 14 <par id="smash"> 15 <img src="smash.jpg" region="r1" fit="fill" fill="freeze"/> 16 <video src="smash.mpg" region="r2" fit="fill"/> 17 <a href="#player"> 18 <img src="continue2.gif" region="r3" dur="indefinite" fit="fill"/> 19 </a> 20 </par> 21 <par id="player"> 22 <img src="player.jpg" region="r1" fit="fill" fill="freeze"/> 23 <img src="jh6-1.gif" region="r2" fit="fill" fill="freeze"/> 24 <img src="baesamo.jpg" region="r3" fit="fill"/> 25 </par> 26 </body> 27 </smil>

기본 링킹 31


기본 링킹 32

9.4 요약 및 결론

SMIL 의 시간적 링크 기능의 기초를 다루었다 .

SMIL 의 링킹은 <a> 요소를 통한 전체 노드를 위한 간단한 앵커와 <area> 요소를 통한 부분 노드 앵커를 위한 광범위한 지원을 제공한다 .

9 장 기본 링킹

Documents