html slides

สไลด์การนำเสนอ HTML

html-slides เป็นเทมเพลตสำหรับสร้างสไลด์การนำเสนอที่ทำงานโดยตรงภายในเว็บเบราว์เซอร์ หากต้องการดูการทำงานของสไลด์ดังกล่าว โปรดดูสไลด์โชว์สาธิต

คุณสมบัติการนำเสนอ

• โหมดม้วนสไลด์
• โหมดการนำเสนอ
• ดัชนีสไลด์
• พร้อมสำหรับการใช้งานแบบออฟไลน์
• การควบคุมระยะไกลจากอุปกรณ์มือถือ
• สามารถพิมพ์สไลด์ได้

คุณสมบัติสไลด์

• สไลด์ HTML พร้อมข้อความ รูปภาพ วิดีโอ
• สไลด์ SVG สำหรับไดอะแกรม กราฟิกแบบเวกเตอร์ และภาพเคลื่อนไหวอย่างง่าย
• สมการกับ MathJax
• การรวมเว็บไซต์หรือเนื้อหาภายนอก
• สไลด์ขั้นสูงพร้อม JavaScript
  • สไลด์แบบโต้ตอบ
  • ภาพเคลื่อนไหวขั้นสูง
  • โมเดล 3 มิติ
  • ข้อมูลสด ไดอะแกรมสด

ข้อกำหนดเบื้องต้น

หากต้องการสร้างงานนำเสนอจากสไลด์ของคุณ จะต้องติดตั้ง 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' ) ;
? >

บรรทัดแรกและบรรทัดสุดท้ายนำเข้าโครงร่างการนำเสนอ และจะต้องคงสภาพเดิมไว้ แต่ละสไลด์ใช้พารามิเตอร์ต่อไปนี้:

1. ไฟล์สไลด์
2. ชื่อเรื่องที่แสดงในดัชนีสไลด์ (ไม่บังคับ)
3. สไตล์ (ไม่จำเป็น)

นามสกุลไฟล์จะกำหนดประเภทของสไลด์:

• .inc.html คือสไลด์ HTML (ดูด้านล่าง)
• .inc.svg คือสไลด์ SVG (ดูด้านล่าง)
• .mp4 , .webm หรือ .ogg เป็นสไลด์แบบวิดีโอเท่านั้น ส่งผลให้มีเครื่องเล่นวิดีโอปรากฏบนสไลด์ ดูดีที่สุดด้วยสไตล์ 'สีดำ'
• .png , .jpg หรือ .jpeg เป็นสไลด์แบบรูปภาพเท่านั้น รูปแบบที่เหมาะสมคือ 'สีดำ' (เพื่อวางรูปภาพบนพื้นหลังสีดำ) และ 'ปก' (เพื่อปกปิดทั้งสไลด์)

สไลด์เตรียมไว้สำหรับขนาด 1,000 x 600 พิกเซล ในโหมดการนำเสนอ สิ่งเหล่านี้จะถูกปรับขนาดให้พอดีกับขนาดของจอแสดงผล

สไลด์ HTML

สไลด์ 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 " >

สไลด์นี้แสดงรูปภาพ (แท็ก img) ทางด้านขวา (400 พิกเซล) และใช้ส่วนที่เหลืออีก 600 พิกเซลทางด้านซ้ายสำหรับชื่อสไลด์ (แท็ก h1) และสัญลักษณ์แสดงหัวข้อย่อย (แท็ก ul, แท็ก ol, แท็ก li)

เทมเพลตประกอบด้วยตัวอย่างสำหรับการวางตำแหน่งข้อความและรูปภาพ และการแทรกตาราง

สไลด์ SVG

รูปแบบ SVG ( slides/slide-name.inc.svg ) เหมาะสำหรับสไลด์ที่มีกราฟิกแบบเวกเตอร์ เช่น ไดอะแกรมหรือแผนผัง สไลด์ดังกล่าวสามารถวาดได้โดยใช้ Inkscape หรือซอฟต์แวร์อื่นที่สามารถบันทึกหรือส่งออกไฟล์ SVG ได้

เอกสาร SVG (หน้า) ต้องมีขนาด 1,000 x 600 พิกเซล ( width="1000" height="600" ) รหัส SVG ผ่านการล้างข้อมูลบางส่วนขณะนำเข้า โดยเฉพาะอย่างยิ่ง ข้อมูลเฉพาะของ Inkscape และ ID เริ่มต้น (เช่น rect1098 ) จะถูกลบออก

การสร้างสไลด์ด้วย การปรับใช้

หากต้องการสร้างงานนำเสนอใหม่ ( index.html ) ให้เปิดหน้าต่างเทอร์มินัล (บรรทัดคำสั่ง) แล้วเรียกใช้

 ./deploy/run

สคริปต์คอยค้นหาการเปลี่ยนแปลง และสร้าง index.html ใหม่เมื่อจำเป็น หากต้องการออก ให้กด Ctrl-C ในหน้าต่างเทอร์มินัล

สคริปต์ปรับใช้จะตรวจสอบโค้ด HTML ของคุณอย่างคร่าวๆ โดยเฉพาะอย่างยิ่งจะเตือนหากแท็กปิดไม่ถูกต้อง

การใช้สไลด์

การนำเสนอ

หากต้องการเริ่มการนำเสนอ ให้กด F11 เพื่อเปิดใช้งานโหมดเต็มหน้าจอ และกด p เพื่อสลับไปที่ โหมดการนำเสนอ ใช้ปุ่มลูกศรซ้าย/ขวา (หรือ Page Up / Page Down ) บนแป้นพิมพ์เพื่อเลื่อนไปยังสไลด์ก่อนหน้า/ถัดไป บนอุปกรณ์เคลื่อนที่ คุณสามารถปัดไปทางซ้าย/ขวาได้

ปุ่มเมนูที่มุมขวาบน (สามแถบ) จะเปิดดัชนีสไลด์ การคลิกที่สไลด์ใดๆ จะสลับไปที่สไลด์นั้น

หากคุณเปิดใช้งานหน้าต่างอื่น (หรือ iframe ภายในสไลด์) ในระหว่างการนำเสนอ ปุ่มเมนูจะเปลี่ยนเป็นสีแดงเพื่อระบุว่าปุ่มลูกศร (เพื่อเลื่อนไปยังสไลด์ถัดไป) ไม่ทำงาน การคลิกปุ่มสีแดงนั้นจะเน้นการนำเสนออีกครั้ง และทำให้ปุ่มลูกศรใช้งานได้

การพิมพ์

เบราว์เซอร์จำนวนมากอนุญาตให้พิมพ์สไลด์ได้ แต่ละสไลด์พอดีกับหน้าแนวนอนขนาด A4

โหมดหน้าจอคู่

เมื่อคุณเชื่อมต่อโปรเจ็กเตอร์เป็นหน้าจอภายนอก คุณสามารถแสดงงานนำเสนอได้ทั้งสองหน้าจอ

หากต้องการทำเช่นนั้น ให้เปิดงานนำเสนอเดียวกันในหน้าต่างเบราว์เซอร์สองหน้าต่างแยกกัน (ของเบราว์เซอร์เดียวกัน) วางหน้าต่างหนึ่งบนหน้าจอหลัก และอีกหน้าต่างหนึ่งบนหน้าจอภายนอก (ในโหมดเต็มหน้าจอ) หน้าต่างทั้งสองจะแสดงสไลด์เดียวกันเสมอ

โปรดทราบว่าเนื้อหาเชิงโต้ตอบอาจไม่ซิงโครไนซ์เสมอไป

การควบคุมระยะไกล

การนำเสนอที่ทำงานบนแล็ปท็อปอาจควบคุมจากระยะไกลด้วยโทรศัพท์มือถือ ต้องใช้การเชื่อมต่ออินเทอร์เน็ต เนื่องจากข้อความควบคุมจะถูกส่งผ่านเซิร์ฟเวอร์ (https://viereck.ch/remote/)

หากต้องการตั้งค่านี้:

1. เปิดงานนำเสนอบนโทรศัพท์มือถือของคุณ คลิกที่ปุ่มเมนู และเปิดใช้งานการ ส่ง จดบันทึกโทเค็นการส่ง ปุ่มเมนูจะเปลี่ยนเป็นสีน้ำเงิน
2. เปิดงานนำเสนอเดียวกันบนแล็ปท็อปของคุณ คลิกที่ปุ่มเมนู และเปิดใช้งาน Listen พิมพ์โทเค็นการส่งจากโทรศัพท์มือถือ ปุ่มเมนูจะเปลี่ยนเป็นสีส้ม

หัวข้อขั้นสูง

การแทรกวิดีโอบนสไลด์ HTML

วิดีโอถูกแทรกโดยใช้แท็ก วิดีโอ :

 < 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) ได้ด้วย

ในทำนองเดียวกัน ไฟล์เสียงจะถูกแทรกโดยใช้แท็ก เสียง

คุณสามารถสร้างสไลด์ที่มีวิดีโอแบบเต็มหน้าจอได้จากดัชนีสไลด์:

 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' ) ;
? >

หัวข้อและหัวข้อย่อยจะปรากฏเฉพาะในดัชนีสไลด์เท่านั้น ไม่มีผลกระทบต่อสไลด์หรือขั้นตอนการนำเสนอ

สไลด์พร้อม JavaScript

ไฟล์ JavaScript ชื่อ slides/slide-name.inc.js จะถูกแทรกพร้อมกับสไลด์ที่เกี่ยวข้องโดยอัตโนมัติ 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 ( ) ;
...

รหัสองค์ประกอบต้องไม่ซ้ำกันตลอดทั้งหน้า HTML สไลด์จึงควรนำหน้าสไลด์ด้วยชื่อสไลด์ที่ไม่ซ้ำกัน ( fancySlide ในตัวอย่างด้านบน)

การส่งสถานะไปยังกรณีอื่น

สไลด์แบบโต้ตอบสามารถซิงโครไนซ์สถานะกับอินสแตนซ์อื่น ๆ ผ่าน รีโมทคอนโทรล (ดูด้านบน) โปรดทราบว่าสิ่งนี้มีไว้สำหรับข้อมูลจำนวนเล็กน้อยเท่านั้น เช่น ตัวเลขสองสามตัว รหัสองค์ประกอบ หรือข้อความสั้น

ตัวอย่างต่อไปนี้ใช้ sendState และ state Listener เพื่อซิงโครไนซ์เนื้อหาของการป้อนข้อความ:

 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 ) ;
} ; 

มากกว่า

• การบวกสมการด้วย MathJax
• การสร้างโปรเกรสซีฟเว็บแอป (PWA)