HTML5 프리젠테이션 도구

HTML5로 프리젠테이션 하는 법을 Facebook에서 봤는데 괜찮더군요.

원본 글은 이곳인것 같군요.

http://blog.creation.net/551

웹에서 손땐지 오래인데 HTML5는 관심이 좀 가네요.

HTML과 자바스크립트에 능숙하신 분이라면 파워포인트 보다는 HTML5로 프리젠테이션 만드는게 좋을 수도 있을 것 같습니다. 별도의 전용 프로그램이 필요없이 웹만 가능하면 프리젠테이션이 되고, 웹콘텐츠 쓰는 것도 쉽고, 보다 다양한 효과를 낼 수도 있으니까요.

아래 부분은 퍼온 부분입니다.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. Reveal.js

Github에서 당당하게 가장 많은 인기를 끌고 있는 웹 프리젠테이션 도구로 상세한 문서화 및 다양하고 신규 기능이 계속 업데이트 되고 있음
* 데모: http://lab.hakim.se/reveal-js/
* 소스코드: https://github.com/hakimel/reveal.js

2. Impress.js
CSS3의 3D 전환 효과를 이용하여, Prezi와 유사한 동적이고 3차원 전환 프리젠테이션을 할 수 있는 도구임
* 데모: http://bartaz.github.io/impress.js
* 소스코드: https://github.com/bartaz/impress.js

c.f.) WebGL을 이용한 프리젠테이션 도구로 마우스로 PT 이동 및 줌인/아웃도 가능함
* 데모: http://fhtr.org/webgl_presentation.html#9
* PT 에디터: http://fhtr.org/editor (오른쪽 상단의 Edit를 누르면 다양한 효과 가능)
* 소스코드: https://github.com/kig/kig.github.com/blob/master/webgl_presentation.html

3. Google HTML5 Slides
HTML5 발표 도구의 시초로 구글에서 HTML5 데모를 하기 위해 만들었던 것으로 유명해져서 Google I/O에서 발표 시 사용되고 있음
* 데모: http://io-2012-slides.googlecode.com/git/template.html
* 소스코드: http://code.google.com/p/html5slides/ (2012년 버전 https://code.google.com/p/io-2012-slides/)

4. Shwr.me
전체 슬라이드 미리보기를 할 수 있고, 바로 프리젠테이션으로 들어갈 수 있는 장점 있음
* 데모: http://shwr.me/
* 소스코드: https://github.com/shower/shower

5. 그 밖에 추천 도구
1) Shwr.me: 전체 슬라이드 미리보기를 할 수 있고, 바로 프리젠테이션으로 들어갈 수 있는 장점 있음
* 데모: http://shwr.me/
* 소스코드: https://github.com/shower/shower
2) Deck.js: HTML 발표 도구 중 유명했으나, 최근에는 업데이트가 계속 되지는 않고 있음
* 데모: http://imakewebthings.github.com/deck.js/introduction
* 소스코드: https://github.com/imakewebthings/deck.js
3) Mozilla Template: Mozilla 커뮤니티에서 사용하고 있는 발표 템플릿
* 소스코드: https://github.com/codepo8/mozilla-presentation-templates

쭉 보시고 나시면 이걸로 어떻게 PT를 만들지 하는 생각이 드실 거에요. 소스 코드(Ctrl-U)를 열어서 내용이 있는 부분의 HTML 마크업만 고치면 그대로 나만의 PT가 될 수 있습니다.