S5 presentation file format : http://meyerweb.com/eric/tools/s5/xoxo-structure-ref.html

XOXO : http://en.wikipedia.org/wiki/XOXO

 

 스프링노트에서 프리젠테이션을 위해서 문서를 작성하기 위한 규칙들을 정리해봅니다.

스프링노트에 현재 적용된 microformat 은 xoxo 보다 좀더 semantic 한 버젼인 S5 presentation file format (S5) 을 적용하였습니다. S5 에서 요구하는 기본적인 주변 요구내용들은 아래의 북마크릿을 브라우저에 추가하시면 자동적으로 처리해줍니다.

 

북마클릿 추가하기: Bookmarklet  << 왼쪽 링크를 클릭!하면 나타나는 링크를 북마크 툴바에 끌어다 놓기 하시면 추가됩니다.

(주의 IE 6.x 에서는 북마클릿이 드래그 앤 드랍으로 등록이 안됩니다. 오른쪽버튼으로 즐겨찾기 추가를 하시면 됩니다. javascript 로 시작하는 링크가 드래그 되는 걸 막아놓았네요. 그리고 안타깝게도 북마클릿이 508 자로 제한도 걸려있는 것 같습니다. 참고로 위 북마클릿은 525 자입니다. 좀 줄여보면 어찌 될 수 있을 것 같습니다. IE 안습입니다. 제대로 보시려면 FireFox 를 쓰시는게 좋을 것 같습니다.) IE에서도 동작하도록 북마클릿을 살짝 줄였습니다. 507 자입니다. 아슬아슬하게 줄였습니다.

 

현재는 스프링노트에서 HTML 소스를 직접 편집할 수는 없기 때문에,  S5 에서 제공하는 여러 스타일을 사용할 수는 없지만, 기본적은 슬라이드쇼를 만들기 위한 규칙을 적용하기 위해서, 스프링노트 편집기에서 제공하는 기능만을 가지고 프리젠테이션 파일을 만들어 보도록 합시다.  기본적으로 슬라이드용 스프링노트 문서는 list (ol, ul) 로 시작합니다.  스프링노트 메뉴의 "글머리 기호" 로 시작하시면 됩니다. (아래의 슬라이드 아웃라인 매크로 기능을 활용)

 

스크린캐스트 (by AlanKang)

SpringnoteSlide.avi

 

슬라이드 노트 작성순서

1. 글머리기호 넣고 슬라이드 제목 넣기
2. 아래 슬라이드 아웃라인 매크로 기능을 이용해서 슬라이드 내용을 작성
3. 슬라이드마다 스타일 적용하기 (아래 슬라이드 내부 규칙 처럼)
4. 슬라이드노트 작성이 완료되면 노트 하단의 XHTML 링크를 누르거나 스프링노트 페이지 URL 뒷부분에 ".xhtml" 붙여넣기 (이것은 스프링노트를 xhtml 형태로 바꿔서 보여줍니다)
5. 좀전에 추가한 북마클릿 누르기
6. 슬라이드 시작 ~~

 

슬라이드 아웃라인 매크로 기능 추가됨!  (by AlanKang)

스프링노트 에디터에 슬라이드용 매크로 기능이 추가되었습니다. 이걸 사용하시면 간단하게 프리젠테이션 페이지를 생성할 수 있겠네요.

게다가 슬라이드 페이지에 기존에 적용된 텍스트 스타일이 사라지는 문제를 보완하였습니다. (좀더 이쁜 프리젠테이션 가능 !!!)

 

슬라이드 첫페이지 생성하기 ==> [[slidetitle]]
슬라이드 페이지 생성하기 ==> [[slide]]

 

작성방법 [[slidetitle]] 하면 아래와 같이 템플릿이 나타남.

1. Title

   Subtitle

   Author

   Employer

2.  

 

아래처럼 슬라이드 생성하면

1. Title

   Subtitle

   Author

   Employer

2. [[slide]]

 

이렇게 하면 아래와 같이 템플릿이 나타남.

 

1. Title

   Subtitle

   Author

   Employer

2. Slide title

   1. Content...
3.  

 

팁팁팁

고급 사용자의 경우에 S5 format 의 추가적인 기능(스타일) 들을 모두 이용하시려면, 링크 를 따라가셔서, 포멧대로 직접 HTML 을 편집해서 작성하신다음 브라우저에서 해당 페이지를 열어서 스프링노트에 붙여넣기를 하시면 됩니다. (매타태그 같은 것은 직접 작성하지 않으셔도 됩니다)

 

nicegogogo 님이 작성하신 파이어폭스 확장기능을 활용(노트보러가기) 하시면 스프링노트페이지의 HTML 소스를 직접 편집할 수도 있겠군요 !! (아직 수정기능은 불안한 상태라고 얘기하는 중이니 완성되기만을 학수고대 해봅니다 ~~)

 

스크린샷

완성된 슬라이드 모습 캡춰 (아래 셈플처럼 타이핑 한뒤 북마클릿을 눌러서 실행한 모습입니다)  --> 이제는 스타일이 약간 변경되어서 더 이쁜 모습으로 보입니다.

마우스를 중간 하단에 가져가면, 컨트롤 박스가 보입니다. (각 슬라이드 제목을 추출해서 빨리가기도 나오는군요 !!)

 

 

슬라이드 내부 규칙

첫번째 슬라이드 내부의 규칙은 다음과 같습니다.

          <li>

            <h1>[slide show title]</h1>     <!-- 스프링노트의 단락제목 1 스타일 -->

            <h2>[slide show subtitle]</h2>  <!-- 스프링노트의 단락제목 2 스타일 -->

            <h3>[author's name]</h3>        <!-- 스프링노트의 단락제목 3 스타일 -->

            <h4>[author's employer]</h4>    <!-- 스프링노트의 단락제목 4 스타일 -->

          </li>
          

 

각 슬라이드내부의 규칙은 다음과 같습니다.

          <li class="slide">

            <h1>[slide title]</h1>          <!-- 스프링노트의 단락제목 1 스타일 -->
          

            <ol>
          

              <li>[slide content]</li>      <!-- 슬라이드 내용 -->
          

              <li>[slide content1]</li>     <!-- 슬라이드 내용 -->
          

            </ol>

          </li>
          

 

HTML 문서의 완성된 셈플의 예는 아래와 같습니다.

 

위 셈플을 스프링노트 포멧으로 보면 아래와 같습니다.

 

1. 직접타이핑한 슬라이드

   스프링노트에서 직접 타이핑

   재선아빠

   Openmaru Studio

2. 첫번째

   1. 첫번째 내용 (이 섹션은 slidecontent 이다)
   2. 두번째 내용
   3. 세번째 내용

3. 두번째

   1. 두번째 슬라이드 첫번째 내용 (이 섹션은 slidecontent 이다)
   2. 두번째 슬라이드 두번째 내용