html-slides는 웹 브라우저 내에서 직접 실행되는 프레젠테이션 슬라이드를 만드는 템플릿입니다. 이러한 슬라이드가 실제로 작동하는 모습을 보려면 데모 슬라이드쇼를 살펴보십시오.
프레젠테이션 기능
슬라이드 기능
슬라이드에서 프레젠테이션을 작성하려면 Node.js가 컴퓨터에 설치되어 있어야 합니다.
프레젠테이션은 주요 웹 브라우저(Firefox, Chrome, Edge, Safari, Opera 등)에서 표시할 수 있으며 추가 소프트웨어가 필요하지 않습니다.
html-slides 저장소를 다운로드하거나 복제하고 template 폴더 내에서 프레젠테이션 만들기를 시작하세요. 이 폴더 외부에는 아무것도 필요하지 않으며 이름을 바꾸거나 이동할 수 있습니다.
template 폴더에는 다음 파일과 폴더가 포함되어 있습니다.
slides 슬라이드와 해당 미디어 리소스가 포함되어 있습니다.index.build.html 에는 슬라이드 목록이 포함되어 있습니다.deploy 슬라이드를 단일 index.html 파일로 조합합니다.index.html 생성된 프레젠테이션입니다.style CSS 스타일 파일( style.inc.css )과 글꼴이 포함되어 있습니다. 여기에서 기본 글꼴과 색상을 조정할 수 있습니다.skeleton 에는 슬라이드를 프레젠테이션으로 바꾸는 HTML, CSS 및 JavaScript 코드가 포함되어 있습니다. 여기서는 아무것도 수정할 필요가 없습니다. 슬라이드는 일반적으로 몇 줄의 HTML 코드 또는 SVG 파일이 포함된 파일입니다. 비디오 전용 또는 이미지 전용 슬라이드의 경우 뼈대는 미리 정의된 HTML 코드를 제공합니다.
index.build.html 파일에는 프레젠테이션의 제목과 슬라이드 순서가 포함되어 있습니다.
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
slide ( 'slides/title.inc.html' ) ;
slide ( 'slides/intro.inc.html' , 'Introduction' ) ;
slide ( 'slides/system.inc.svg' , 'System' ) ;
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;
slide ( 'slides/next-steps.inc.html' , 'Next steps' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >첫 번째와 마지막 줄은 프레젠테이션 뼈대를 가져오며 그대로 유지되어야 합니다. 각 슬라이드에는 다음 매개변수가 사용됩니다.
파일 확장자에 따라 슬라이드 유형이 결정됩니다.
.inc.html 은 HTML 슬라이드입니다(아래 참조)..inc.svg 는 SVG 슬라이드입니다(아래 참조)..mp4 , .webm 또는 .ogg 는 비디오 전용 슬라이드입니다. 슬라이드에 비디오 플레이어가 표시됩니다. '블랙' 스타일과 가장 잘 어울리는 것 같아요..png , .jpg 또는 .jpeg 는 이미지 전용 슬라이드입니다. 적합한 스타일은 'black'(검은색 배경에 이미지를 배치하는 경우)과 'cover'(슬라이드 전체를 덮는 경우)입니다.슬라이드는 1000x600픽셀 크기로 준비되어 있습니다. 프레젠테이션 모드에서는 디스플레이 크기에 맞게 크기가 조정됩니다.
글머리 기호가 있는 간단한 HTML 슬라이드( slides/slide-name.inc.html )는 다음과 같습니다.
< div class =" text left w600 " >
< h1 > Slide title </ h1 >
< ul >
< li > This is bullet 1 </ li >
< li > This is bullet 2 </ li >
< li > This is bullet 3 </ li >
</ ul >
</ div >
< img class =" right w400 " src =" slides/jigsaw.jpg " >슬라이드의 오른쪽(400픽셀)에는 이미지(img 태그)가 표시되고 왼쪽의 나머지 600픽셀은 슬라이드 제목(h1 태그)과 글머리 기호(ul 태그, ol 태그, li 태그)로 사용됩니다.
템플릿에는 텍스트와 이미지 위치 지정 및 표 삽입에 대한 예제가 포함되어 있습니다.
SVG 형식( slides/slide-name.inc.svg )은 다이어그램이나 회로도와 같은 벡터 그래픽이 포함된 슬라이드에 적합합니다. 이러한 슬라이드는 Inkscape 또는 SVG 파일을 저장하거나 내보낼 수 있는 기타 소프트웨어를 사용하여 그릴 수 있습니다.
SVG 문서(페이지)는 크기가 1000 x 600픽셀( width="1000" height="600" )이어야 합니다. 가져오는 동안 SVG 코드가 일부 정리됩니다. 특히 Inkscape 관련 정보와 기본 ID(예: ect1098 )가 제거됩니다.
프레젠테이션( index.html )을 다시 작성하려면 터미널 창(명령줄)을 열고 다음을 실행하세요.
./deploy/run
스크립트는 계속 변경 사항을 찾고 필요한 경우 index.html 다시 작성합니다. 종료하려면 터미널 창에서 Ctrl-C 누르세요.
배포 스크립트는 HTML 코드를 대충 확인합니다. 특히 태그가 제대로 닫히지 않은 경우 경고를 표시합니다.
프레젠테이션을 시작하려면 F11 눌러 전체 화면을 활성화하고 p 눌러 프레젠테이션 모드 로 전환하세요. 이전/다음 슬라이드로 이동하려면 키보드의 왼쪽/오른쪽 화살표 키(또는 Page Up / Page Down )를 사용하세요. 모바일 기기에서는 왼쪽/오른쪽으로 스와이프할 수 있습니다.
오른쪽 상단 모서리에 있는 메뉴 버튼(세 줄)은 슬라이드 색인을 엽니다. 슬라이드를 클릭하면 해당 슬라이드로 전환됩니다.
프레젠테이션 중에 다른 창(또는 슬라이드 내의 iframe)을 활성화하면 메뉴 버튼이 빨간색으로 바뀌어 화살표 키(다음 슬라이드로 이동)가 작동하지 않음을 나타냅니다. 빨간색 버튼을 클릭하면 프레젠테이션에 다시 초점이 맞춰지고 화살표 키가 작동하게 됩니다.
많은 브라우저에서는 슬라이드 인쇄를 허용합니다. 각 슬라이드는 A4 가로 페이지에 맞습니다.
프로젝터를 외부 화면으로 연결하면 두 화면 모두에 프레젠테이션을 표시할 수 있습니다.
이를 위해서는 동일한 브라우저의 두 개의 별도 브라우저 창에서 동일한 프레젠테이션을 엽니다. 하나의 창을 기본 화면에 배치하고 다른 창을 외부 화면에 배치합니다(전체 화면 모드에서). 두 창에는 항상 동일한 슬라이드가 표시됩니다.
대화형 콘텐츠가 항상 동기화되는 것은 아닙니다.
노트북에서 실행되는 프레젠테이션은 휴대폰으로 원격으로 제어될 수 있습니다. 제어 메시지는 서버(https://viereck.ch/remote/)를 통해 전송되므로 인터넷 연결이 필요합니다.
이를 설정하려면:
동영상은 video 태그를 사용하여 삽입됩니다.
< video controls width =" 640 " >
< source src =" slides/video.mp4 " type =" video/mp4 " >
< a href =" slides/video.mp4 " > Play video with external player </ a >
</ video >웹 브라우저는 다양한 비디오 형식을 지원합니다. MP4 또는 MPEG-4/H.264 비디오 형식은 거의 모든 웹 브라우저에서 지원됩니다. 가장 널리 사용되는 브라우저에서는 WebM(비디오/webm) 또는 Ogg/Theora(비디오/ogg) 파일도 재생됩니다.
마찬가지로 오디오 파일은 audio 태그를 사용하여 삽입됩니다.
전체 화면 비디오가 포함된 슬라이드는 슬라이드 색인에서 간단히 만들 수 있습니다.
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ; 슬라이드 색인은 topic 및 subTopic 사용하여 구성될 수 있습니다.
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
topic ( 'Topic 1' ) ;
subTopic ( 'Subtopic 1' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
subTopic ( 'Subtopic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
topic ( 'Topic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >주제와 하위 주제는 슬라이드 색인에만 나타납니다. 슬라이드나 프레젠테이션 흐름에는 아무런 영향을 미치지 않습니다.
slides/slide-name.inc.js 라는 JavaScript 파일이 해당 슬라이드와 함께 자동으로 삽입됩니다. JavaScript를 사용하면 시뮬레이션, 애니메이션, 대화형 요소 등이 포함된 고급 슬라이드를 만들 수 있습니다.
간단한 슬라이드 스크립트는 다음과 같습니다.
const counter = document . getElementById ( 'fancySlideCounter' ) ;
let count = 0 ;
slide . onSlideAppears = function ( ) {
count += 1 ;
counter . textContent = 'This slide has appeared ' + count + ' times so far.' ;
} ;
slide . onSlideDisappears = function ( ) {
// ...
} ; 프레젠테이션이 로드되면 코드가 실행됩니다. slide 는 해당 슬라이드인 <div> 요소에 대한 참조입니다. 슬라이드가 화면에 나타나면 onSlideAppears 함수가 호출됩니다. 반대로 onSlideDisappears 슬라이드가 사라질 때 호출됩니다. 슬라이드가 표시될 때만 애니메이션을 실행하는 것이 좋습니다. 여러 슬라이드가 동시에 표시될 수 있습니다.
변수 이름과 함수 이름이 충돌하는 것을 방지하기 위해 슬라이드의 JavaScript 코드는 익명 함수에 배치됩니다. 생성된 슬라이드의 구조는 다음과 같습니다.
< div class =" slide " >
<!-- The slide's HTML or SVG content -->
< script >
( function ( ) {
const slide = document . currentScript . parentElement ;
// The slide's JavaScript code
} ) ( ) ;
</ script >
</ div > 슬라이드는 여전히 window 개체를 통해 서로 통신할 수 있습니다.
// In slide A
let fancyState = ... ;
window . getFancyState = function ( ) {
return fancyState ;
} ;
// In slide B
const state = window . getFancyState ( ) ;
... 요소 ID는 전체 HTML 페이지에서 고유해야 합니다. 따라서 슬라이드에는 고유한 슬라이드 이름(위 예에서는 fancySlide )을 접두사로 붙여야 합니다.
대화형 슬라이드는 원격 제어를 통해 상태를 다른 인스턴스와 동기화할 수 있습니다(위 참조). 이는 몇 개의 숫자, 요소 ID 또는 짧은 텍스트와 같은 작은 양의 데이터에만 사용됩니다.
다음 예제에서는 sendState 와 상태 리스너를 사용하여 텍스트 입력 내용을 동기화합니다.
const input = document . getElementById ( 'fancySlideInput' ) ;
slide . onSlideAppears = function ( ) {
remote . addStateListener ( onStateChanged ) ;
} ;
slide . onSlideDisappears = function ( ) {
remote . removeStateListener ( onStateChanged ) ;
} ;
// Receive a state update
function onStateChanged ( state ) {
if ( ! state . fancySlide ) return ;
input . value = state . fancySlideText ;
}
// Send a state update when the text changes
input . oninput = function ( ) {
remote . sendState ( 'fancySlideText' , input . value ) ;
} ; 
