تنسيق العرض التقديمي الحديث؟

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

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

هناك العديد من محركات جافا سكريبت التي يمكن استخدامها لإنشاء عروض تقديمية رائعة: Marp ، Reveal ، انهيار أرضي ، الشرائح المتسللة ، slidify وغيرها. في بعض المحركات ، يمكنك استخدام تخفيض السعر ، والبعض الآخر مضمن في IDE ، والبعض الآخر لديه برامج تحرير خاصة بهم. لقد جربت أول محركين.

كتوضيح ، تتوفر أمثلة الشرائح والفيديو .

يدعم كلا المحركين المذكورين أعلاه تنسيق النص العادي Markdown. الأول ، Marp ، يسمح لك بإنشاء عروض تقديمية في IDE الخاص به ، وهو مناسب للغاية ، لكن الإخراج لا يزال ملف PDF ثابتًا. والثاني ، Reveal ، أكثر إثارة للاهتمام: يمكن استخدامه لإنشاء مواقع تقديم العروض بالكامل - يمكنك استخدام القوة الكاملة لجافا سكريبت ، HTML و CSS إلى جانب Markdown. سأتحدث في الغالب عن الكشف في هذا المقال.

يمكنك رؤية تطور العروض التقديمية الخاصة بي في المستودع https://github.com/KvanTTT/Presentations .

• كمية صغيرة من النص
• باستخدام الاستعارات
• بساطتها وتصميم شقة
• الوصول عبر الإنترنت
• العمل دون اتصال
• الإصدارات عبر منصة
• الشرائح باللغة الإنجليزية
• الوصول عن طريق الرابط
• رابط مقروء
• الموضوعات الظلام والضوء
• التكامل مع أنظمة التحكم في الإصدار (Git)
• باستخدام تنسيق النص العادي (تخفيض السعر)
• ملاحظات الشريحة
• باستخدام الرموز التعبيرية
• الصور والمخططات بتنسيقات مناسبة (JPG ، PNG ، SVG)
  
  • JPG
  • PNG
  • SVG
• باستخدام IDEs مريحة وبسيطة
• من السهل طباعة نص العرض
• مجاني للاستخدام
• ميزات إضافية
• يبدو العرض التقديمي بسيطًا وباردًا
• عيوب
• استنتاج

كمية صغيرة من النص

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

باستخدام الاستعارات

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

بساطتها وتصميم شقة

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

الوصول عبر الإنترنت

يجب أن يكون العرض التقديمي متاحًا من المتصفح. وبالتالي ، لن تخاف من فقدان محرك أقراص محمول ، أو تعطل جهاز الكمبيوتر المحمول وغيره من المحن أثناء العرض.

العمل دون اتصال

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

الإصدارات عبر منصة

إنه يعمل على أنظمة Windows و Mac و Linux و Android و iOS نعم ، يمكنك التنقل بين الشرائح حتى على الهاتف أثناء العرض التقديمي!

الشرائح باللغة الإنجليزية

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

الوصول عن طريق الرابط

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

رابط مقروء

من الرابط إلى العرض التقديمي https://kvanttt.imtqy.com/Presentations/2018-05-15-Source-code-analyzers-how-generalizable-are-they/English/index.html ، يتضح على الفور ما يلي:

• الكاتب: kvanttt
• تاريخ النشر: 2018-05-15
• التنسيق: العروض التقديمية (يمكن أن يكون هناك أيضًا ، على سبيل المثال ، مقالات ، عينات )
• اللغة: الإنجليزية
• العنوان: المصدر - تحليل - الكيفية - التعميم - هم ، هم
• يمكنك أيضًا الرجوع إلى أي صفحة من العرض التقديمي باستخدام علامة الرقم #/5 .

الموضوعات الظلام والضوء

للحصول على أفضل التكيف مع الإضاءة أو الحالة المزاجية. يمكنك أيضا إنشاء الخاصة بك.

يمكنك أيضًا تغيير نمط الانتقالات بين الشرائح.

التكامل مع أنظمة التحكم في الإصدار (Git)

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

يمكن تكوين GitHub بحيث عند الضغط على gh-pages أو الفرع master ، يتم نشر الموقع على الفور على استضافة ثابتة في مجال imtqy.com ، وهذا مناسب للغاية.

هنا هو المجلد المصدر: https://github.com/KvanTTT/Presentations/tree/master/2018-05-15-Source-code-analyzers-how-generalizable-are-they

باستخدام تنسيق النص العادي (تخفيض السعر)

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

تخفيض السعر يجعل من السهل وصف:

• أنماط النص المختلفة ( مائل ، غامق ، يتوسطه ، رابط ، اقتباس ، code snippet ) ،
• العناوين،
• قوائم ، مرتبة وغير مرتبة ،
• الجداول،
• المفسدين،
• العناصر الإضافية التي قد تختلف تبعا للتنفيذ. إذا لزم الأمر ، يمكنك استخدام علامات HTML كذلك.

 <!-- .slide: style="text-align: left;" --> # ️ Text fingerprinting with zero-length characters Be c​aref​ul wh​at yo​u copy <span class="fragment">️ [https://diffchecker.com](https://www.diffchecker.com/M2PvqSXw)</span> <span class="fragment"> Be c•aref•ul wh•at yo•u copy• </span> <aside class="fragment" align="middle">Detail: [habr.com](https://habr.com/post/352950/) | [Medium](https://medium.com/@umpox/be-careful-what-you-copy-invisibly-inserting-usernames-into-text-with-zero-width-characters-18b4e6f17b66) </span> <br> <aside class="notes"> There is another similar funny story with zero-width characters. F​or exam​ple, I have ins​erted 5 such characters in​to thi​s string, c​an you tel​​l? You can check it using the service <https://www.diffchecker.com>. These characters can be used as unique text fingerprints to identify users. Using this method, for example, you can play detective: encode the name of the user in a copied message to understand who leaks some confidential information :) You can find more information about such characters on Habr and Medium. </aside> --- 

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

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

باستخدام الرموز التعبيرية

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

الصور والمخططات بتنسيقات مناسبة (JPG ، PNG ، SVG)

JPG

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

PNG

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

SVG

لسبب ما ، ينسى العديد من الأشخاص SVG ، الذي يتمتع بالمزايا التالية:

• تحجيم الصورة إلى أي حجم دون فقدان الجودة ؛
• التكامل مع جيت (تنسيق النص) ؛
• يمكنك تغيير الألوان والخطوط والعناصر الأخرى في الملف مباشرة ؛
• حجم ملف صغير.

بدعم من جميع المتصفحات الحديثة - وحتى حبر! لسوء الحظ ، يمكن تحميلها على Habr بشكل غير مباشر فقط.

لاحظ أن معظم الصور في هذه المقالة بتنسيق SVG.

 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generated by graphviz version 2.38.0 (20140413.2041) --> <!-- Title: cfg Pages: 1 --> <svg width="478pt" height="601pt" viewBox="0.00 0.00 478.13 601.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 597)"> <title>cfg</title> <polygon fill="white" stroke="none" points="-4,4 -4,-597 474.131,-597 474.131,4 -4,4"/> <!-- 27 --> <g id="node1" class="node"> <title>27</title> <ellipse fill="none" stroke="black" cx="310.039" cy="-575" rx="75.2868" ry="18"/> <text text-anchor="middle" x="310.039" y="-571.3" font-family="Times New Roman,serif" font-size="14.00">name == &quot;admin&quot;</text> </g> <!-- 33 --> <g id="node2" class="node"> <title>33</title> <ellipse fill="none" stroke="black" cx="229.039" cy="-488" rx="81.4863" ry="18"/> <text text-anchor="middle" x="229.039" y="-484.3" font-family="Times New Roman,serif" font-size="14.00">key1 == &quot;validkey&quot;</text> </g> 

باستخدام IDEs مريحة وبسيطة

على سبيل المثال ، رمز Visual Studio مع الإضافات. المعاينة على اليسار ، الإصدار النهائي (تقديم) على اليمين أو في المتصفح. هناك مكون إضافي لمدقق الإملاء ، ومكونات إضافية لإنشاء المحتويات (TOC) ، وجداول التنسيق وغيرها.

من السهل طباعة نص العرض

يمكن طباعة نص الشرائح والملاحظات بسهولة (على سبيل المثال ، للتدريب). إنه نص عادي مع الحد الأدنى من القمامة.

مجاني للاستخدام

جميع الأدوات والتنسيقات والاستضافة الثابتة .imtqy.com مجانية. وحتى هذه الصورة

ميزات إضافية

في محرك reveal.js ، تتوفر أيضًا ميزات أخرى

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

يمكنك أيضًا تجربة إصدار تفاعلي.

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

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

عيوب

بالطبع ، كل شيء له عيوب ، وهذا النهج ليس استثناء:

1. تصدير الخرقاء إلى PDF ، عليك تحرير الإخراج. ومع ذلك ، هو متاح أيضا ‌.
2. لا تصدير إلى PPTX .
3. ليس من السهل جدًا إتقانه ، خاصة بالنسبة لغير المبرمجين والمطورين غير العاملين في الواجهة (من الناحية المثالية ، تحتاج إلى معرفة HTML و CSS ).
4. ليس من السهل جدًا إجراء التعديلات. ولكن يمكنك التكيف وأتمتة ذلك.
5. لا يتم عرض الرموز التعبيرية نفسها في كل مكان (على سبيل المثال ، لن ترى الرموز التعبيرية في هذه الجملة).
6. المحرك لا يزال الخام.

استنتاج

يبدو لي أن العروض التقديمية المستقبلية ستكون هكذا: تفاعلية ، في شكل مواقع ويب يسهل تحريرها لكل من المبرمجين والمصممين. دعونا نحاول تقريب هذا المستقبل!

بالمناسبة ، يمكن أيضًا كتابة المقالات باستخدام Git و Markdown واستضافتها على GitHub أو GitLab. سأكتب عن هذا لاحقا.

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

تتوفر مصادر المقالة على GitHub - يرجى إرسال طلب السحب إذا وجدت أي خطأ. للتحويل إلى تنسيق habr.com ، استخدم مكتبة MarkConv .