html slides

شرائح العرض التقديمي بتنسيق HTML

html-slides هو قالب لإنشاء شرائح العرض التقديمي التي يتم تشغيلها مباشرة داخل متصفح الويب. لرؤية هذه الشرائح أثناء العمل، قم بإلقاء نظرة على عرض الشرائح التجريبي.

ميزات العرض

• وضع لفة الشريحة
• وضع العرض
• مؤشر الشريحة
• جاهز للاستخدام دون اتصال بالإنترنت
• التحكم عن بعد من جهاز محمول
• يمكن طباعة الشرائح

ميزات الشريحة

• شرائح HTML تحتوي على نصوص وصور ومقاطع فيديو
• شرائح SVG للرسوم البيانية والرسومات المتجهة والرسوم المتحركة البسيطة
• المعادلات مع MathJax
• إدراج مواقع أو محتوى خارجي
• شرائح متقدمة باستخدام JavaScript
  • الشرائح التفاعلية
  • الرسوم المتحركة المتقدمة
  • نماذج ثلاثية الأبعاد
  • البيانات الحية والرسوم البيانية الحية

المتطلبات الأساسية

لإنشاء العرض التقديمي من الشرائح الخاصة بك، يجب تثبيت Node.js على الكمبيوتر.

يمكن عرض العرض التقديمي مع أي من متصفحات الويب الرئيسية (Firefox، Chrome، Edge، Safari، Opera، ...)، ولا يتطلب أي برامج إضافية.

ابدء

قم بتنزيل أو نسخ مستودع شرائح html، وابدأ في إنشاء العرض التقديمي الخاص بك داخل مجلد 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 عبارة عن شرائح للصور فقط. الأنماط المناسبة هي "أسود" (لوضع الصورة على خلفية سوداء) و"غلاف" (لتغطية الشريحة بأكملها).

يتم إعداد الشرائح بحجم 1000 × 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 1000 × 600 بكسل ( width="1000" height="600" ). يخضع كود SVG لبعض عمليات التنظيف أثناء الاستيراد. على وجه الخصوص، تتم إزالة المعلومات الخاصة بـ Inkscape والمعرفات الافتراضية (على سبيل المثال، rect1098 ).

بناء الشرائح مع النشر

لإعادة بناء العرض التقديمي ( index.html )، افتح نافذة طرفية (سطر الأوامر) وقم بتشغيله

 ./deploy/run

يستمر البرنامج النصي في البحث عن التغييرات، ويعيد إنشاء index.html عند الضرورة. لإنهاء ذلك، اضغط على Ctrl-C في النافذة الطرفية.

يتحقق البرنامج النصي للنشر بشكل فظ من كود HTML الخاص بك. وعلى وجه الخصوص، فإنه يحذر إذا لم يتم إغلاق العلامات بشكل صحيح.

باستخدام الشرائح

عرض تقديمي

لبدء العرض التقديمي، اضغط على F11 لتمكين ملء الشاشة، و p للتبديل إلى وضع العرض التقديمي . استخدم مفاتيح الأسهم لليسار/لليمين (أو Page Up / Page Down ) على لوحة المفاتيح للانتقال إلى الشريحة السابقة / التالية. على الأجهزة المحمولة، يمكنك التمرير لليسار/لليمين.

يفتح زر القائمة الموجود في الزاوية اليمنى العليا (ثلاثة خطوط) فهرس الشرائح. يؤدي النقر فوق أي شريحة إلى التبديل إلى تلك الشريحة.

إذا قمت بتنشيط نافذة أخرى (أو إطار iframe داخل الشرائح) أثناء العرض التقديمي، فسيتحول زر القائمة إلى اللون الأحمر للإشارة إلى أن مفاتيح الأسهم (للانتقال إلى الشريحة التالية) لا تعمل. سيؤدي النقر فوق هذا الزر الأحمر إلى تركيز العرض التقديمي مرة أخرى، وتشغيل مفاتيح الأسهم.

الطباعة

تسمح العديد من المتصفحات بطباعة الشرائح. يتم وضع كل شريحة على صفحة أفقية مقاس A4.

وضع الشاشة المزدوجة

عند توصيل جهاز عرض كشاشة خارجية، يمكنك عرض العرض التقديمي على كلتا الشاشتين.

للقيام بذلك، افتح العرض التقديمي نفسه في نافذتي متصفح منفصلتين (لنفس المتصفح). ضع نافذة واحدة على الشاشة الرئيسية، والنافذة الأخرى على الشاشة الخارجية (في وضع ملء الشاشة). ستظهر النافذتان دائمًا نفس الشريحة.

لاحظ أن المحتوى التفاعلي قد لا يكون متزامنًا دائمًا.

التحكم عن بعد

يمكن التحكم في العرض التقديمي الذي يتم تشغيله على جهاز كمبيوتر محمول عن بعد بواسطة الهاتف المحمول. ويتطلب ذلك اتصالاً بالإنترنت، حيث يتم إرسال رسائل التحكم عبر خادم (https://viereck.ch/remote/).

لإعداد هذا:

1. قم بتشغيل العرض التقديمي على هاتفك المحمول. انقر على زر القائمة، وقم بتمكين إرسال . يحيط علما رمز الإرسال. سيتحول زر القائمة إلى اللون الأزرق.
2. قم بتشغيل نفس العرض التقديمي على الكمبيوتر المحمول الخاص بك. انقر على زر القائمة، وقم بتمكين الاستماع . اكتب رمز الإرسال من الهاتف المحمول. سيتحول زر القائمة إلى اللون البرتقالي.

مواضيع متقدمة

إدراج مقاطع الفيديو على شرائح 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 المسماة 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 ومستمع الحالة لمزامنة محتوى إدخال النص:

 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)