ProHoster > بلوق > إدارة > العرض التقديمي كرمز، أو لماذا لم أعد أستخدم Powerpoint

العرض التقديمي كرمز، أو لماذا لم أعد أستخدم Powerpoint

العرض التقديمي كرمز، أو لماذا لم أعد أستخدم Powerpoint

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

ماذا نريد

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

  1. يجب أن يكون العرض التقديمي عبارة عن ملف نصي عادي بلغة ترميزية.
  2. تدور شرائحنا حول مشاريع التطوير، لذا يجب أن يسهل الترميز إدراجها، دون اللجوء إلى أنظمة خارجية
    • أجزاء التعليمات البرمجية مع تسليط الضوء على بناء الجملة،
    • رسوم بيانية بسيطة على شكل أشكال هندسية متصلة بواسطة الأسهم،
    • مخططات UML والمخططات الانسيابية والمزيد.
  3. يجب أن يتم تخزين مسودة العرض التقديمي في نظام التحكم في الإصدار.
  4. يجب أن يتم التحقق من صحة وتجميع الشرائح النهائية في نظام CI.

يوجد اليوم خياران أساسيان لإنشاء الشرائح بلغات الترميز: package متعاطي المخدرات لـ LaTeX أو أحد أطر عمل إنشاء الشرائح باستخدام HTML/CSS (ريفيل جي اس, تعليق, سطح السفينة.js واشياء أخرى عديدة).

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

ومع ذلك، فإن إتقان HTML/CSS ليس مهارة منتشرة على نطاق واسع: فأنا، على سبيل المثال، لا أتقنها بشكل كامل. لحسن الحظ، يأتي AsciiDoctor المألوف بالفعل للإنقاذ: محول asciidoctor-revealjs يسمح لك بإنشاء شرائح RevealJS باستخدام علامة AsciiDoctor. ومن السهل التعلم وفي متناول الجميع!

كيفية ترميز الشرائح

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

شريحة تحتوي على عنوان وقائمة بالعناصر التي يتم فتحها واحدًا تلو الآخر:

== Зачем нам Streams API?

[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабирование

نتيجة

العرض التقديمي كرمز، أو لماذا لم أعد أستخدم Powerpoint

مقتطف التعليمات البرمجية للرأس والمصدر مع تمييز بناء الجملة:

== Kafka Streams API: общая структура KStreams-приложения

[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции

Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----

نتيجة

العرض التقديمي كرمز، أو لماذا لم أعد أستخدم Powerpoint

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

العنوان والرسم التوضيحي والنص (يتم التخطيط على الشريحة في الخلايا جداول AsciiDoctor):

== Kafka Streams in Action

[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===

نتيجة

العرض التقديمي كرمز، أو لماذا لم أعد أستخدم Powerpoint

في بعض الأحيان لا تكون هناك حاجة إلى عنوان، ولتوضيح وجهة نظرك، تحتاج فقط إلى صورة بملء الشاشة:

[%notitle]
== Жить в легаси нелегко

image::swampman.jpg[canvas, size=cover]

نتيجة

العرض التقديمي كرمز، أو لماذا لم أعد أستخدم Powerpoint

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

== Пишем “Bet Totalling App”

Какова сумма выплат по сделанным ставкам, если сыграет исход?

[graphviz, "counting-topology.png"]
-----
digraph G {
graph [ dpi = 150 ];
rankdir="LR";
node [fontsize=18; shape="circle"; fixedsize="true"; width="1.1"];
Store [shape="cylinder"; label="Local Store"; fixedsize="true"; width="1.5"]
Source -> MapVal -> Sum -> Sink
Sum -> Store [dir=both; label=" n "]
{rank = same; Store; Sum;}
}
-----

نتيجة

العرض التقديمي كرمز، أو لماذا لم أعد أستخدم Powerpoint

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

مثال أكثر تعقيدا:

== Невоспроизводимая сборка
[graphviz, "unstable-update.png"]
-----
digraph G {
  rankdir="LR";
  graph [ dpi = 150 ];
  u -> r0;
  u[shape=plaintext; label="linter updaten+ 13 warnings"]
  r0[shape=point, width = 0]
  r1 -> r0[ arrowhead = none, label="master branch" ];
  r0-> r2 [];   b1 -> b4;  r1->b1
  r1[label="150nwarnings"]
  b1[label="± 0nwarnings"]
  b4[label="± 0nwarnings"]
  b4->r2
  r2[label="163nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>]
  {rank = same; u; r0; b4;}
}
-----

نتيجة

العرض التقديمي كرمز، أو لماذا لم أعد أستخدم Powerpoint

بالمناسبة، من الملائم تجربة Graphviz وتصحيح الصور على الصفحة جراففيز على الانترنت.

أخيرًا، إذا كنت بحاجة إلى إدراج مخطط انسيابي أو رسم تخطيطي للفصل أو أي رسم تخطيطي قياسي آخر في شريحة، فيمكن أن يأتي نظام آخر مدمج مع AsciiDoctor للإنقاذ. بلانتوم. كتب زميلي نيكولاي بوتاشنيكوف عن القدرات الواسعة لـ PlantUML وظيفة منفصلة.

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

بناء صفحة HTML مع الشرائح

تعد مصادر النص العادي رائعة، ولكن كيف يمكنك تجميعها في العرض التقديمي نفسه؟

AsciiDoctor هو مشروع مكتوب بلغة روبي، وهناك عدة طرق لتشغيله. أولاً، يمكنك تثبيت لغة Ruby وتشغيل asciidoctor مباشرة، وهو على الأرجح الأقرب إلى مطوري Ruby.

إذا كنت لا تريد العبث بتثبيت روبي، فيمكنك استخدام صورة عامل الإرساء asciidoctor/docker-asciidoctor، حيث يمكنك، عند تشغيله، توصيل المجلد بمصادر المشروع عبر VOLUME والحصول على النتيجة في مكان معين.

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

النقطة المهمة هي أن المشروع جروبي - يعد تطبيق Java للغة Ruby جيدًا جدًا لدرجة أنه يسمح لك بتشغيل أي شيء تم إنشاؤه لـ Ruby تقريبًا في جهاز Java، ويعد تشغيل AsciiDoctor أحد أكثر استخدامات JRuby شيوعًا.

توفر asciidoctor-maven-plugin يسمح لك بجمع وثائق AsciiDoctor التي تعد جزءًا من مشروع Java (الذي نستخدمه بنشاط). في الوقت نفسه، يتم تنزيل AsciiDoctor وJRuby تلقائيًا بواسطة Maven، ويعمل AsciiDoctor في بيئة JRuby: ليست هناك حاجة لتثبيت أي شيء على الجهاز! (باستثناء الحزمة graphviz، وهو أمر ضروري إذا كنت تريد استخدام رسومات GraphViz أو PlantUML.) ما عليك سوى وضع ملفات .adoc في مجلد src/main/asciidoc/. هنا مثال على بومنيكجمع الشرائح مع الرسوم البيانية.

تحويل الشرائح إلى PDF

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

ولحسن الحظ، تتولى الأداة المساعدة Node.js هذه المهمة. شريط سطح السفينة، بنيت على الأساس العرائس — أنظمة التشغيل الآلي لإدارة متصفح Chrome. يمكنك تحويل العرض التقديمي RevealJS إلى PDF باستخدام الأمر

node decktape.js -s 3200x1800 --slides 1-500 
  reveal "file:///index.html?fragments=true" slides.pdf

هناك حيلتان عند تشغيل شريط سطح السفينة، كان علينا التوصل إليهما من خلال التجربة والخطأ:

  • القرار عبر المعلمة -s يجب تحديدها بهامش مضاعف، وإلا فقد تكون هناك مشاكل في نتائج التحويل

  • في عنوان URL الخاص بإصدار HTML للعرض التقديمي، يتعين عليك تمرير معلمة ?fragments=true، مما سيؤدي إلى إنشاء صفحة PDF منفصلة لكل حالة متوسطة لشريحتك (على سبيل المثال، خمس صفحات لخمس نقاط نقطية إذا تم عرضها واحدة تلو الأخرى). سيسمح لك هذا باستخدام ملف PDF هذا بمفرده كعرض تقديمي أثناء التقرير.

التجميع التلقائي والنشر على شبكة الإنترنت

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

نظرًا لأننا نستخدم GitHub في عملنا، فإن الاختيار الطبيعي لنظام CI هو ترافيس سي، ولاستضافة العروض التقديمية الجاهزة - github.io. الفكرة وراء github.io هي نشر أي محتوى ثابت في أحد الفروع gh-pages مشروعك على GitHub، يصبح متاحًا على <ваше имя>.gihub.io/<ваш проект>.

استكمال ملف تكوين TravisCI، بما في ذلك تجميع إصدار HTML للصفحة باستخدام Maven، والتحويل إلى PDF باستخدام شريط السفينة، وتحميل النتائج إلى سلسلة رسائل gh-pages للنشر على github.io، يبدو هكذا.

لبناء مثل هذا المشروع على جانب TravisCI، تحتاج إلى تكوين متغيرات البيئة

  • GH_REF - قيمة مثل github.com/inponomarev/csa-hb
  • GH_TOKEN - رمز الوصول إلى جيثب. يمكنك الحصول عليه من GitHub في إعدادات ملفك الشخصي، إعدادات المطور -> رموز الوصول الشخصية. إذا قمت بتحميل عرض تقديمي إلى مستودع عام، فهذا الرمز يكفي لتحديد مستوى الوصول الوحيد "الوصول إلى المستودعات العامة".
  • GH_USER_EMAIL / GH_USER_NAME — زوج الاسم/البريد الإلكتروني الذي سيتم تنفيذ الدفع إلى سلسلة المحادثات نيابةً عنه gh-pages.

وبالتالي، يؤدي كل التزام بكود العرض التقديمي على GitHub إلى إعادة إنشاء الشرائح تلقائيًا بتنسيقات HTML وPDF وإعادة تحميلها إلى github.io. (بالطبع، يجب عليك فقط تحميل العروض التقديمية التي تريد نشرها للعامة على github.io فقط).

أمثلة على المشاريع

أخيرًا، فيما يلي روابط لبعض الأمثلة على مشاريع العرض التقديمي مع نصوص Maven المخصصة وتكوين CI لـ Travis-CI، والتي يمكن استنساخها واستخدامها عند إنشاء مشاريع العرض التقديمي الخاصة بك:

وداعا باور بوينت! لا أعتقد أنني سأحتاجك أبدًا في العروض التقديمية الفنية :)

المصدر: www.habr.com

إضافة تعليق