عرض تقديم الطلب التقديمي

مرحباً ، اسمي ديمتري كارلوفسكي وأحيانًا أتحدث في المؤتمرات والاجتماعات ، ومؤخرًا ، أنا أيضًا انضم إلى فريق المنظمين لأحدهم - PiterJS . في الآونة الأخيرة ، كان لدينا ذكرى - 40 اجتماعا عقد. لكن بدلاً من الاسترخاء وتلقي التهنئة ، شعرنا بالتعب وأعدنا تقارير من المنظمين .


اختبار التحكم الصوتي


ولكن هذا لا يكفي بالنسبة لنا ، لذلك قررنا الاحتفال بالذكرى السنوية الكبيرة من خلال تنظيم مؤتمر على ضفاف Neva PiterJSConf ، والذي سيعقد يوم السبت 7 سبتمبر ، 2019. سارع بالتسجيل ، بينما لا تزال هناك مقاعد فارغة ، لأن المشاركة فيه ستكون مجانية تمامًا لك.


نحن نفعل كل هذا ليس من أجل المال ، ولكن من أجل فكرة عظيمة أن المعرفة يجب أن تكون مجانية. لذلك ، كل ما نفعله متاح في المصادر المفتوحة . يسعدنا مشاركة أفضل ممارساتنا ومعرفتنا وخبراتنا مع الآخرين. ونحث على تعاون المنظمين من مدن أخرى لإنشاء منصة مفتوحة لتنظيم الاجتماعات التكنولوجية على أساس منتظم. انضم إلينا كمنظم أو شريك أو متحدث أو متطوع أو راعي أو مجرد مستمع.


في غضون ذلك ، أقدم لك قصة عن تطبيق الويب العرض التقديمي $hyoo_slides الذي أستخدمه لجميع العروض التقديمية. يتوفر تسجيل الفيديو على YouTube ، ولكن ليس كل شيء موجودًا. يمكنك قراءة هذه القصة كمقال ، أو فتحها في واجهة التطبيق نفسه . بعد ذلك سوف أخبرك كم يمكن أن تفعل وكيف تعمل.


واجهة المستمع


الاستماع العرض


هذه هي الواجهة التي يراها الجمهور أثناء الأداء. لا يوجد شيء لزوم لها في ذلك.


يتم عرض اسم ورقم الشريحة في الأعلى. قد يكون لدى المستمعين أسئلة. وبتسجيل هذا الرقم بسرعة ، سيتمكنون من تسميته بعد الكلام ومن ثم إنقاذ الجمهور من الانتظار الممل ، عندما يجد المتحدث شريحة يتم طرح السؤال عليها.


يمكنك أدناه الانتباه إلى شريط التقدم ، وإظهار المستمعين المتأخرين مقدار ما فاتهم. وإلى أي شخص آخر - كم تبقى حتى النهاية. لا يتم حسابه بعدد الشرائح ، ولكن حسب حجم الخطاب المروي.


انظر كيف يمكنني


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


لأنني باتمان!


ولكن يجب أن يكون التصميم أنيقًا حتى لا يفسد انطباع التقرير. لذلك ، فإن تصميم التطبيق بسيط ، وليس جذابًا ، والأهم من ذلك أنه يتوافق مع توصيات لجان البرنامج.


واجهة المتكلم


واجهة المتكلم تنقسم إلى قسمين.


عرض مقدم


على اليسار هو ما يراه المستمعون. وعلى اليمين توجد ملاحظات المتحدث. سوف يساعدونك على تذكر فكرة ضائعة ، دون الابتعاد عن الجمهور ودون إجهادهم لفترة طويلة ... أم ... هذا ... توقف مؤقت.


الشيء الرئيسي هو المحتوى


لذلك ، في حالتنا ، يتم كتابة المحتوى كمقال بتنسيق MarkDown والموضحة في بعض صفحات GitHub. وتطبيق الويب يعتني بالباقي.


 #       #       

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


أنماط النص


يتم عرض النص العادي فقط للمقدم. وكل أنواع الصور والقوائم والجداول والاقتباسات ، إلخ ، تكون مرئية للجميع.


 - ** - ** ** - ~~~~ - `````` 

  • لهجة
  • لهجة قوية
  • إزالة

بالطبع ، تتوفر العديد من أدوات التنسيق المضمّنة.


شفرة المصدر


كتل الشفرة المصدرية ، بالطبع ، مدعومة أيضًا ، ومرسومة بجميع ألوان قوس قزح. تماما مثل تريد.


 ```javascript const hello = ()=> <body> Hello, "world"! </body> ``` 

 const hello = ()=> <body> Hello, "world"! </body> 

الجداول


مقارنة بين مختلف الأشياء سوف تساعدك الجداول. على سبيل المثال ، دعنا نرى لماذا يكون $hyoo_slides أفضل من أقرب منافسيه - shwr.me و google slides


 | | shwr.me | google slides | slides.hyoo.ru | |--------------------------|---------|---------------|----------------| |   MarkDown | - | - | + | |   | - | + | + | |   | - | - | + | |  | - | + | + | 

shwr.meشرائح جوجلslides.hyoo.ru
المصدر في MarkDown--+
وضع لوحة مزدوجة-++
تبديل الشريحة السيارات--+
حاليا-++

كما ترون ، فإن $hyoo_slides يتفوق على المنافسين على جميع الجبهات. باستثناء تلك التي لم يتم تضمينها في الجدول ، بالطبع.


حسنا لانو ، الجداول مملة.


الصور


امسك القطة.


 ![](https://github.com/nin-jin/slides/raw/master/slides/cat.gif) 

مايك فارلي


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


فيديو


يمكنك نشر مقاطع الفيديو وصفحات الويب وأي محتوى خارجي آخر باستخدام بناء جملة MarkDown نفسه لإدراج الصور.


 ![ ](https://www.youtube.com/embed/exfBX2pb7AQ?autoplay=1) 

الجمهور المستهدف


على سبيل المثال ، قمت بإدراج مقطع فيديو يوضح أن الواجهات الحديثة بسيطة ومريحة لدرجة أنه حتى القرد يمكنه معالجتها.


لوحة المفاتيح الملاحة


يمكنك تبديل الشرائح باستخدام الأسهم على لوحة المفاتيح. ولكن حتى لا يتم توصيلك بالكمبيوتر المحمول ، ولكن لكي تتنقل بحرية حول المسرح ، ستحتاج إلى سلك تمديد لاسلكي لإصبعك. انه الفرس.


سهم


ولكن ماذا لو كسر الفرس؟


عبارات الكود


ربما تظن أنه في القاعة لدي مكان قوزاق أسيء التعامل معه يقوم بتغيير الشرائح بدلاً مني؟ ومع ذلك ، هذا ليس كذلك.


  • مزيد من فضلك.
  • العودة ، من فضلك.
  • الشريحة رقم 5 ، كن لطيفا.
  • في البداية ، من فضلك.
  • في النهاية ، من فضلك.
  • العثور على "القط" ، يكون لطيف.
  • كرر ، من فضلك.
  • اخرس ، كن لطيفا.
  • يرجى المتابعة .
  • أطفئ الضوء من فضلك.

كرر ، من فضلك. صوت من أعلى يكرر العبارة الأخيرة.


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


ولكن تكرار عبارات الأكواد هذه عشر مرات متتالية ، هو أمر ممل ، لذلك يمكن $hyoo_slides تحليل ملاحظات المتحدث وعندما تقول الكلمة الأخيرة ، قم بتبديل الشريحة تلقائيًا.


حركات الأصابع


حسنا ، تعقيد الوضع. قرر شخص ما بعد الاستماع إلى كلامك ، رؤية الشرائح الخاصة بك من الكمبيوتر اللوحي أثناء ركوب قطار المترو إلى المنزل.


لفتات


لا يوجد لوحة مفاتيح. القطارات صاخبة. هنا ، حركات الأصابع العادية تأتي لإنقاذ.


حاليا


ولكن بعد ذلك يدعو إلى النفق وتختفي علاقته.


لا شبكة


لا يهم ، لدينا Web2.0 HTML5 تطبيق الويب التدريجي مع وظائف كاملة حتى عندما لا يكون هناك الإنترنت.


طباعة قوات الدفاع الشعبي


لكن هنا يأتي إليك المنظمون ويقولون: "نريد ملف PDF".


علامة


أي قوات الدفاع الشعبي؟ لدينا هنا تطبيق Web2.0 HTML5 التقدمي التفاعلي للوسائط المتعددة. ومع ذلك ، يشرحون لك أن التطبيق اليوم ، وغداً لم يعد موجودًا. وإذا كان هناك ، فهو يريد المال. وإذا كنت لا ترغب في ذلك ، فيمكن بالفعل تغيير الشرائح الموجودة إلى ما هو أبعد من التعرف عليها. وقوات الدفاع الشعبي هو بهدوء في الأرشيف مع بالضبط المحتوى الذي يتوافق مع الفيديو المسجل أثناء الأداء.


حسنًا ، لا يهم ، اضغط على Ctrl+P ، واختر "طباعة إلى PDF" واحصل على ما تحتاج إليه. يتم ذلك ببساطة - يتم onbeforeprint الحدث onbeforeprint ، وعندما يحدث ، بدلاً من الشريحة الحالية فقط ، يتم عرض جميع الشرائح على الإطلاق. و onafterprint ، كل ما عدا الحالية ، يتم حذف الشرائح.


في هذا ، انتهت قوائم الميزات الآن.


كيفية إنشاء عرض تقديمي


$hyoo_slides سهلة. ستحتاج readme.md مع المحتوى والصور الخاصة بك. في مكان قريب أيضًا ، ستحتاج إلى نسخ index.html ، الذي يعيد التوجيه إلى تطبيق الويب ويفتح العرض التقديمي فيه. وأيضا offline.js لدعم حاليا.



ضع في اعتبارك أن هذا index.html سيعطي التطبيق أي ملفات يمكن الوصول إليها من المجال الذي وضعت فيه كل شيء. يعد GitHub Pages خيارًا مناسبًا وآمنًا للغاية. أنا استخدامها بنفسي.


تطبيقات أخرى


إذا أعجبك هذا التطبيق ، يمكنك إلقاء نظرة على التطبيقات الأخرى المثيرة للاهتمام التي يتم تنفيذها على إطار عمل mol دولار. إنها خفيفة الوزن لدرجة أن بضع عشرات لا يخشون تحميلها جميعًا مرة واحدة على شريحة واحدة.


معرض التطبيق


ولكن عنهم بطريقة ما في وقت لاحق ...


أمثلة العرض التقديمي


يمكنك معرفة المزيد حول الإطار في عرض تقديمي منفصل. يمكنك حفر أعمق في عرض تقديمي على طاعون المجترات الصغيرة. ويمكنك رفع ستارة المستقبل في عرض تقديمي عن تقدير الكميات للحسابات.



يستخدمون جميعها $ hyoo_slides للعرض. آمل قريبًا أن يكون هناك المزيد من هذه العروض.


هيكل التطبيق


والآن ، دعونا نفتح غطاء محرك السيارة قليلاً ونرى كيف يتم ترتيب التطبيق ، وكيف نفعل لدينا مماثلة في ليلة واحدة فقط.


 $hyoo_slides_page $mol_view sub / <= Listener <= Speaker 

 export class $hyoo_slides_page extends $mol_view { sub() { return [ this.Listener() , this.Speaker() , ] } } 

فيما يلي وصف للمستوى العلوي لشاشة واحدة في view.tree ورمز TypeScript المكافئ. نعلن هنا المكون $hyoo_slides_page ، والذي يمتد المكون الأساسي $mol_view . هذا المكون له خاصية sub . سيتم تقديم كل ما يعرض هذه الخاصية داخل المكون. لذلك ، فإننا نعيد تعريفها ، ونعتبر كقيمة صفيفًا من عنصرين: Listener - مكون لإخراج شريحة إلى المستمعين ومكبر الصوت - مكون من لوحة مكبر صوت إضافية.


تبديل تخطيط الصفحة


بالإضافة إلى وصف الهيكل ، يمكننا أيضًا تطبيق منطق البرنامج الذي يسمح بحساب أي خصائص ديناميكيًا.


 sub() { const role = this.role() return [ this.Listener() , ... ( role === 'speaker' ) ? [ this.Speaker() ] : [] , ] } 

المنطق هنا بسيط: نعرض دائمًا شرائح للمستمعين ، لكن لوحة السماعة تظهر فقط إذا كان الدور الحالي هو speaker . إذا تغير الدور ، فسوف يتغير تخطيط التطبيق أيضًا بسبب سحر البرمجة التفاعلية للكائن.


التوجيه


سنأخذ الدور من معلمة العنوان ، من خلال واجهة برمجة التطبيقات التفاعلية $mol_state_arg .


 role() : 'speaker' | 'listener' { return $mol_state_arg.value( 'role' ) || 'speaker' } 

لأي سبب تم تغيير العنوان - سيتم استخراج الدور منه تلقائيًا ، وسيتم تمريره إلى هذه الطريقة.


هيكل واجهة المستمع


دعونا وصف واجهة المستمع.


 Listener $mol_page title <= title tools / <= Slide_switcher body / <= Listener_content <= Progress 

يستخدم المكون القياسي $mol_page الذي يرسم صفحة نموذجية $mol_page . في الرأس توجد مساحة حيث يتم عرض اسم الصفحة. من خلال خاصية title ، يمكنك تحديد ما سيتم إخراجه هناك. وهو ما فعلناه من خلال ربط title العقار بممتلكاتنا التي تحمل الاسم نفسه. الآن ، تغيير ممتلكاتنا ، لدينا سيطرة كاملة على ما سيتم عرضه على الصفحة كعنوان.


على اليمين في الرأس ، توجد منطقة إخراج لأدوات إضافية - tools . في ذلك نقوم Slides_switcher - مكون لعرض رقم الشريحة والتبديل بين الشرائح المجاورة.


وأخيرًا ، بصفتنا نص الصفحة في body نعرض محتويات الشريحة وشريط التقدم.


تبديل هيكل الصفحة


كيفية تنفيذ Slide_switcher ؟ مجرد استخدام المكون القياسي $mol_paginator .


 Slide_switcher $mol_paginator value?val <=> slide?val 

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


هيكل محتوى الشريحة


لعرض محتويات الشريحة ، نستخدم مرة أخرى المكون القياسي $mol_text .


 Listener_content $mol_text uri_base <= uri_base text <= listener_content 

يستغرق markdown ويجعله. نظرًا لأن الارتباطات في هذا النص ستكون مرتبطة بالملف المصدر وليس بالتطبيق الخاص بنا ، فنحن نمرر الرابط إلى خاصية uri_base ، فيما يتعلق بتحديد جميع المسارات.


هيكل مؤشر التقدم


كما قد تكون خمنت بالفعل ، هناك أيضًا مكون قياسي لعرض التقدم - $mol_portion .


 Progress $mol_portion portion <= progress 

 portion: [ 0 .. 1 ] 

نطعمه برقم من 0 إلى 1 ونحصل على مؤشر مملوء لهذه المشاركة.


هيكل واجهة المتكلم


لدينا شيء أكثر إثارة للاهتمام في واجهة المتكلم. لا يتم إرفاق الأدوات المعروضة في الرأس بالصفحة الحالية بأي طريقة - فهي شائعة في التطبيق بأكمله. لذلك ، بدلاً من تركيبها هنا ، speaker_tools فتحة speaker_tools التي سنقوم من خلالها بنقل قائمة المكونات من الخارج.


 Speaker $mol_page head <= speaker_tools /$mol_view body / <= Speaker_content 

هيكل التطبيق


الآن ، $hyoo_slides مستوى وقم بإنشاء مكون تطبيق $hyoo_slides يستخدم مكون الصفحة.


 $hyoo_slides $mol_view Page!index $hyoo_slides_page - ... plugins / <= Nav <= Touch <= Speech_next - ... 

يحتوي أي مكون $mol_view على خاصية plugins التي يمكن من خلالها توصيل منطق إضافي بها. تعمل الإضافات الإضافية على نفس عقدة DOM مثل المكون نفسه. المكون يبدأ بهم أثناء التقديم. وعندما يتوقف عن تقديم - يتم تدمير الإضافات تلقائيا.


لقد أعلنا أيضًا عن خاصية Page ، التي تعرض لكل مؤشر نسخة منفصلة من مكون $hyoo_slides_page الذي قمنا بتطويره مسبقًا.


إعداد الصفحة الخارجية


 Page!index $hyoo_slides_page role <= role slide?val <=> page_slide!index?val speaker_tools / <= Speech_toggle <= Speech_text <= Open_listener 

نقوم بتمرير خاصية role إلى المكون الفرعي كما هو. يتم توصيل خاصية slide لمكون الصفحة من خلال اتصال ثنائي الاتجاه مع خاصية page_slide للتطبيق. لاحظ أن page_slide لا يقبل فقط القيمة الجديدة الاختيارية ، ولكن أيضًا فهرس الصفحة. هذا يسمح لك بإرجاع رقم لكل صفحة. أخيرًا ، في فتحة speaker_tools التي أعلنا عنها مسبقًا ، وضعنا ثلاثة مكونات للمساعدة في إدارة الشرائح.


هيكل التبديل التحكم الصوتي


نطبق Speech_toggle خلال المكون القياسي $mol_check_icon ، الذي يرسم أيقونة. عندما تنقر عليه ، فإنه يبدل الإشارة checked . ويتم عرض الحالة الحالية عن طريق تغيير لون الرمز.


 Speech_toggle $mol_check_icon Icon <= Speech_toggle_icon $mol_icon_microphone checked?flag <=> speech_enabled?flag 

لقد أخذنا الأيقونة من $mol_icon ، حيث من بين 4000 أيقونة تم تصميمها على نمط تصميم المواد $mol_icon ، من السهل العثور على الأيقونة الصحيحة.


الرقيق نافذة فتح هيكل الزر


كل شيء بسيط هنا. سيكون هذا الزر هو الرابط $mol_link . يمكنها تعيين خاصية uri ، أو يمكنها أن تفعل شيئًا أكثر دهاءًا وتصحيح العنوان الحالي ، مع استبدال بعض المعلمات من خلال arg .


 Listener_open $mol_link target \_blank arg * role \listener slide null sub / <= Listener_open_icon $mol_icon_external 

هنا قمنا بمسح رقم الشريحة من العنوان حتى تأخذ نافذة العبيد من التخزين المحلي ، وليس من العنوان. سيضمن ذلك مزامنة النوافذ مع بعضها البعض. كما أشاروا إلى أن الدور يجب أن يكون "مستمعًا". داخل الرابط ، نضع أيقونة بدلاً من النص.


الإضافات


يمكن أن توسع المكونات الإضافية بشكل كبير قدرات المكون. سوف نستخدمها إلى أقصى حد.


 plugins / <= Nav <= Touch <= Speech_next <= Speech_prev <= Speech_start <= Speech_end - ... 

يمكن تقسيم جميع المكونات الإضافية التي نستخدمها إلى 3 فئات: التنقل باستخدام لوحة المفاتيح والتحكم في الإيماءات والتحكم الصوتي.


لوحة المفاتيح الملاحة


من خلال $mol_nav من السهل تطبيق التنقل على لوحة المفاتيح رأسياً وأفقياً. كل ما نحتاجه هو تزويد المكوّن الإضافي بقائمة من المفاتيح التي سيحولها ، والاتصال في اتجاهين بالقيمة الحالية.


 Nav $mol_nav keys_y <= slide_keys keys_x <= slide_keys current_y?val <=> slide?val current_x?val <=> slide?val 

 slide_keys: [ 0 , 1 , 2 , 3 , ... , 30 ] ^ slide 

حركات الأصابع


لتتبع الإصبع ، يوجد $mol_touch . مع ذلك ، يمكنك التكبير والتحريك والانتقاد. إنها الفرصة الأخيرة التي تهمنا الآن.


 Touch $mol_touch swipe_to_left?event <=> go_next?event swipe_to_right?event <=> go_prev?event 

 go_next( event? : Event ) { this.slide( this.slide() + 1 ) } 

هناك نوعان من التمرير. على سبيل المثال ، اسحب إلى اليسار أو اليمين من أي جزء من الشاشة وانتقد بسبب الحافة اليمنى أو اليسرى من الشاشة نحو الوسط. في الكود المقدم ، قمنا بتعليق معالجاتنا على النوع الأول من التمرير السريع.


التحكم الصوتي


للتحكم الصوتي ، استخدم $mol_speech . من الضروري إنشاء مثيل للمكون الإضافي لكل إصدار من الإجراء.


 Sing $mol_speech event_catch?val <=> sing?val patterns / \sing( \S+?)* \( \S+?)* 

يقبل البرنامج المساعد معالج الإجراءات ومجموعة من النماذج ، عند اكتشاف أي منها ، سيتم تشغيل الحدث. يمكنك استخدام التقاط الأقواس في النقوش للحصول على الكلمات المطابقة لمحتوياتها في المعالج.


تبديل الشريحة السيارات


بشكل افتراضي ، يتطلب $mol_speech معالجة مهذبة. على سبيل المثال ، يجب أن تقول "لا تغني" بل "تغني من فضلك". يمكنك تجاوز خاصية suffix لتغيير أو إزالة كلمة المرور هذه تمامًا.


 Speech_next_auto $mol_speech event_catch?val <=> go_next?val suffix \ patterns <= speech_next_auto_patterns 

على سبيل المثال ، لتنفيذ التبديل التلقائي للشرائح ، لا نحتاج إلى كلمات سحرية. لكننا سننشئ مجموعة من الأنماط بشكل حيوي ، بناءً على تحليل محتويات نص المتكلم.


إطلاق التطبيق


وجود مكون تطبيق ، يمكنك إنشاء مثيل له يدويًا مثل أي فئة عادية. لكننا سنستخدم التشغيل التلقائي من خلال السمة الخاصة mol_view_root .


 <body mol_view_root="$hyoo_slides"> <script src="web.js" charset="utf-8"></script> </body> 

اسم السمة هو اسم المكون. يمكن أن يكون التقديم بهذه الطريقة ، بالطبع ، مكونًا على الإطلاق.


حاليا


لإضافة دعم في وضع عدم الاتصال ، ما mol/offline/install سوى تضمين الوحدة النمطية mol/offline/install في الحزمة.


 include \/mol/offline/install 

يقوم تلقائيًا برفع ServiceWorker ، والذي يقوم بتخزين جميع الطلبات مؤقتًا. وإذا كانت الشبكة غير متوفرة ، فإنها تُرجع البيانات من ذاكرة التخزين المؤقت. هذا ليس أروع تطبيق ، ولكن بالنسبة للحالات البسيطة التي لا ترغب في إزعاجها ، فستفعل ذلك.


وضع الطباعة


في وقت سابق ، قلت إنه أثناء الطباعة ، يتعين عليك تقديم جميع الصفحات ، لكن لا داعي لمراقبة المستخدم يدويًا على onafterprint و onafterprint ، لأن لدينا برمجة تفاعلية كاملة ، لذلك سنستخدم الحالة التفاعلية $mol_print ، والتي تمدنا بعلم رد الفعل الذي يمكننا من خلاله ربط تقديم.


 sub() { if( !this.$.$mol_print.active() ) { return [ this.Page( this.slide() ) ] } return $mol_range2( index => this.Page( index ) , ()=> this.slide_keys().length , ) } 

نحن هنا نرجع صفحة واحدة فقط إذا لم يتم رفع العلم active . بخلاف ذلك ، نرجع صفيفًا كسولًا يحسب طوله وعناصره وفقًا للصيغ المحددة.


خاتمة


نتيجة لذلك ، حصلنا على تطبيق ويب حديث مع مجموعة من الوظائف ويبلغ وزنه 35 كيلو بايت فقط. أضف بيانًا وسوف يكون هناك تطبيق ويب تقدمي كامل. بالطبع ، لم يتم النظر في الكثير من التفاصيل. يمكنك رؤيتهم في الكود على جيثب. لكل الأسئلة ، اكتب البرقيات في الدردشة.


هذه الشرائح موجودة في التطبيق: slides.hyoo.ru
مصادر التطبيق: hyoo-ru / slides.hyoo.ru
أمثلة العرض التقديمي: nin-jin / slide
برقية الدردشة: mam_mol

سأكون سعيدًا إذا حاولت تقديم عرضك التقديمي باستخدام $hyoo_slides . وسأكون سعيدًا جدًا إذا ساعدت في جعله أفضل مما هو عليه الآن. شكرا لاهتمامكم!

Source: https://habr.com/ru/post/ar465763/


All Articles