html-slides adalah template untuk membuat slide presentasi yang dijalankan langsung di dalam browser web. Untuk melihat slide tersebut beraksi, lihat tayangan slide demo.
Fitur presentasi
Fitur geser
Untuk membuat presentasi dari slide Anda, Node.js harus diinstal di komputer.
Presentasi dapat ditampilkan dengan browser web utama mana pun (Firefox, Chrome, Edge, Safari, Opera, ...), dan tidak memerlukan perangkat lunak tambahan apa pun.
Unduh atau klon repositori html-slide, dan mulailah membuat presentasi Anda di dalam folder template . Anda tidak memerlukan apa pun di luar folder ini, dan dapat mengganti nama atau memindahkannya.
Folder template berisi file dan folder berikut:
slides berisi slide Anda dan sumber daya medianya.index.build.html berisi daftar slide.deploy merakit slide Anda menjadi satu file index.html .index.html adalah presentasi yang dihasilkan.style berisi file gaya CSS ( style.inc.css ) dan font. Anda dapat menyesuaikan font dan warna default di sini.skeleton berisi kode HTML, CSS dan JavaScript untuk mengubah slide Anda menjadi presentasi. Anda tidak perlu mengubah apa pun di sini. Slide biasanya berupa file dengan beberapa baris kode HTML, atau file SVG. Untuk slide video saja atau gambar saja, kerangka menyediakan kode HTML yang telah ditentukan sebelumnya.
File index.build.html berisi judul dan urutan slide presentasi:
< ?
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' ) ;
? >Baris pertama dan terakhir mengimpor kerangka presentasi, dan harus tetap apa adanya. Setiap slide mengambil parameter berikut:
Ekstensi file menentukan jenis slide:
.inc.html adalah slide HTML (lihat di bawah)..inc.svg adalah slide SVG (lihat di bawah)..mp4 , .webm , atau .ogg adalah slide khusus video. Mereka menghasilkan pemutar video yang ditampilkan pada slide. Mereka terlihat paling baik dengan gaya 'hitam'..png , .jpg , atau .jpeg adalah slide yang hanya berisi gambar. Gaya yang cocok adalah 'hitam' (untuk menempatkan gambar pada latar belakang hitam) dan 'penutup' (untuk menutupi keseluruhan slide).Slide disiapkan untuk ukuran 1000 x 600 piksel. Dalam mode presentasi, skalanya disesuaikan dengan ukuran tampilan.
Slide HTML sederhana ( slides/slide-name.inc.html ) dengan poin-poin terlihat sebagai berikut:
< 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 " >Slide menampilkan gambar (tag img) di sisi kanan (400 piksel), dan menggunakan sisa 600 piksel di sisi kiri untuk judul slide (tag h1) dan poin-poin (tag ul, tag ol, tag li).
Templat berisi contoh untuk memposisikan teks dan gambar, serta menyisipkan tabel.
Format SVG ( slides/slide-name.inc.svg ) cocok untuk slide dengan grafik vektor, seperti diagram atau skema. Slide tersebut dapat digambar menggunakan Inkscape atau perangkat lunak lain yang mampu menyimpan atau mengekspor file SVG.
Dokumen SVG (halaman) harus berukuran 1000 x 600 piksel ( width="1000" height="600" ). Kode SVG mengalami beberapa pembersihan saat mengimpor. Secara khusus, informasi khusus Inkscape dan ID default (misalnya, rect1098 ) akan dihapus.
Untuk membangun kembali presentasi ( index.html ), buka jendela terminal (baris perintah) dan jalankan
./deploy/run
Skrip terus mencari perubahan, dan membangun kembali index.html bila diperlukan. Untuk keluar, tekan Ctrl-C di jendela terminal.
Skrip penerapan dengan kasar memeriksa kode HTML Anda. Secara khusus, ini memperingatkan jika tag tidak ditutup dengan benar.
Untuk memulai presentasi, tekan F11 untuk mengaktifkan layar penuh, dan p untuk beralih ke mode presentasi . Gunakan tombol panah kiri/kanan (atau Page Up / Page Down ) pada keyboard untuk berpindah ke slide sebelumnya / berikutnya. Di perangkat seluler, Anda dapat menggeser ke kiri/kanan.
Tombol menu di pojok kanan atas (tiga garis) membuka indeks slide. Mengklik pada slide mana pun akan mengalihkan ke slide itu.
Jika Anda mengaktifkan jendela lain (atau iframe dalam slide) selama presentasi, tombol menu berubah menjadi merah untuk menunjukkan bahwa tombol panah (untuk berpindah ke slide berikutnya) tidak berfungsi. Mengklik tombol merah akan memfokuskan presentasi lagi, dan membuat tombol panah berfungsi.
Banyak browser mengizinkan pencetakan slide. Setiap slide muat pada halaman lanskap A4.
Saat Anda menyambungkan proyektor sebagai layar eksternal, Anda dapat menampilkan presentasi di kedua layar.
Untuk itu, buka presentasi yang sama di dua jendela browser terpisah (dari browser yang sama). Tempatkan satu jendela di layar utama, dan jendela lainnya di layar eksternal (dalam mode layar penuh). Kedua jendela akan selalu menampilkan slide yang sama.
Perhatikan bahwa konten interaktif mungkin tidak selalu disinkronkan.
Presentasi yang berjalan di laptop mungkin dikendalikan dari jarak jauh melalui ponsel. Ini memerlukan koneksi internet, karena pesan kontrol dikirim melalui server (https://viereck.ch/remote/).
Untuk mengaturnya:
Video disisipkan menggunakan tag 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 >Browser web mendukung berbagai format video. MP4, atau format video MPEG-4/H.264, didukung oleh hampir semua browser web. Browser terpopuler juga memutar file WebM (video/webm), atau Ogg/Theora (video/ogg).
Demikian pula, file audio disisipkan menggunakan tag audio .
Slide dengan video layar penuh dapat dibuat dari indeks slide:
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ; Indeks slide dapat disusun menggunakan topic dan 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' ) ;
? >Topik dan subtopik hanya muncul pada indeks slide. Mereka tidak berpengaruh pada slide atau alur presentasi.
File JavaScript bernama slides/slide-name.inc.js secara otomatis disisipkan dengan slide masing-masing. JavaScript memungkinkan pembuatan slide tingkat lanjut dengan simulasi, animasi, elemen interaktif, dan sebagainya.
Skrip slide sederhana mungkin terlihat seperti berikut:
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 ( ) {
// ...
} ; Kode dijalankan saat presentasi dimuat. slide adalah referensi ke slide terkait, elemen <div> . Saat slide muncul di layar, fungsi onSlideAppears dipanggil. Sebaliknya, onSlideDisappears dipanggil ketika slide menghilang. Merupakan praktik yang baik untuk menjalankan animasi hanya ketika slide terlihat. Perhatikan bahwa beberapa slide mungkin terlihat secara bersamaan.
Untuk menghindari bentrokan nama variabel dan fungsi, kode JavaScript slide ditempatkan ke dalam fungsi anonim. Slide yang dihasilkan memiliki struktur berikut:
< div class =" slide " >
<!-- The slide's HTML or SVG content -->
< script >
( function ( ) {
const slide = document . currentScript . parentElement ;
// The slide's JavaScript code
} ) ( ) ;
</ script >
</ div > Slide masih dapat berkomunikasi satu sama lain melalui objek window :
// In slide A
let fancyState = ... ;
window . getFancyState = function ( ) {
return fancyState ;
} ;
// In slide B
const state = window . getFancyState ( ) ;
... Id elemen harus unik di seluruh halaman HTML. Oleh karena itu, slide harus diawali dengan nama slide yang unik ( fancySlide pada contoh di atas).
Slide interaktif dapat menyinkronkan statusnya dengan instance lain melalui kendali jarak jauh (lihat di atas). Perhatikan bahwa ini ditujukan untuk sejumlah kecil data saja, seperti beberapa angka, atau id elemen, atau teks pendek.
Contoh berikut menggunakan sendState dan state listening untuk menyinkronkan konten input teks:
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 ) ;
} ; 
