인포그래픽

데이터 시각화

인포그래픽 데이터 시각화

REVEAL.JS

REVEAL.JS

순수 웹기술인 HTML, CSS, JavaScript만으로 만들어진 프리젠테이션 도구로 간단한 HTML 코딩만으로 시각적으로 뛰어난 프리젠테이션을 만들 수 있고, 발표자 도구와 리모트 제어와 같은 고급 기능도 제공한다. 

홈페이지

메뉴얼과 다운로드 받는 주소는 아래와 같다.

https://github.com/hakimel/reveal.js

기본사용법

샘플 페이지인 index.html에서 body 하위의 내용을 제거하고 아래와 같은 구조로 코딩한다. 하나의 화면에 표시된 내용을 section에 기록한다. section 하위에는 또 다른 section이 올 수 있는데 하위 section은 수직으로 장면전환된다. 

<div class="reveal">
    <div class="slides">
        <section>
        <section>
    </div>
</div>

발표자 도구

프리젠테이션 도구들은 발표시간과 현재 발표 내용과 다음 발표 내용을 발표자만 볼 수 있는 기능을 제공한다. 단축키 s를 누르면 이 기능을 웹에서 사용할 수 있다. 

Multiplexing (원격제어)

원격으로 프리젠테이션을 제어할 수 있다. 구체적으로는 청중에게 보여줄 화면을 데스크탑에 띄어놓고 발표자는 스마트폰의 화면을 보면서 데스크탑의 프리젠테이션을 제어 할 수 있다. 다음 주소를 방문해서 secret와 socketId를 획득한 후에 이 값을 소스코드에 입력한다. Reveal.initialize의 인자로 전달되는 객체에 아래 내용을 추가한다.

multiplex: {
    id: '3d86709e1c6d671d',
    secret: '13654708940992018697',
    url: 'revealjs.jit.su:80'
}

dependencies 배열에 아래와 같이 객체를 추가한다.

{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
{ src: 'plugin/multiplex/client.js', async: true },
{ src: 'plugin/multiplex/master.js', async: true },

이해를 돕기 위해서 그림을 첨부했다. 

참고

댓글

댓글 본문
작성자
비밀번호
  1. egoing
    기대 됩니다! ^^
    대화보기
    • evidagoogoo
      생활 코딩 홈페이지가 새단장을 했군요. 더욱 보기 편해진 것 같네요. 그와 더불어 스크립트를 활용한 인포그래픽을 접하니 지적인 즐거움과 함께 눈의 즐거움이 따라오네요. 저번에 오프라인 수업이후 저 또한 오픈튜토리얼에 올릴 수 있는 법한 콘텐츠에 뭐가 있을까 자꾸 생각하게 되네요.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기