يبدو أن لدي فرصة لتقديم العشرات من العروض التقديمية للزملاء والعملاء والمظاهر العامة لحياتي المهنية في مجال تكنولوجيا المعلومات. لسنوات عديدة ، ظلت Powerpoint ، بصفتي وسيلة لصنع الشرائح ، بالنسبة لي خيارًا طبيعيًا وموثوقًا به. لكن هذا العام تغير الوضع نوعيا. من فبراير إلى مايو ، أتيحت لي الفرصة للتحدث في خمسة مؤتمرات ، وكان يتعين إعداد شرائح التقارير في وقت قصير ، ولكن بجودة عالية. نشأ سؤال حول تفويض ذلك الجزء من العمل ، كما هو الحال بالنسبة للتصميم المرئي للشرائح ، لأشخاص آخرين. بمجرد أن حاولت العمل مع مصمم عن طريق إرسال ملفات .pptx عبر البريد ، لكن العمل تحول إلى فوضى: لم يكن أحد يعرف إصدار الشرائح "الأحدث" ، والتخطيط "ذهب" بسبب الاختلاف في إصدارات وخطوط Powerpoint على أجهزتنا . وقررت تجربة شيء جديد. حاولت ذلك ، ومنذ ذلك الحين لا أعتقد العودة إلى Powerpoint.
ماذا نريد
منذ عام ونصف تقريبًا ، رفضنا في الشركة استخدام Word لإنشاء مستندات المشروع ، التي تواجه نفس المشكلات: على الرغم من أن Word مفيد لكتابة مستند صغير ، حيث تنمو وحدات التخزين ، توجد صعوبات في العمل معًا والحصول على تصميم موحد وعالي الجودة. وقع اختيارنا على AsciiDoctor ، ونحن لا نتوقف عن الفرح في هذا الاختيار ، ولكن هذا موضوع لمقال منفصل. في الوقت نفسه تقريبًا ، تعلمنا فعالية أحد مبادئ DevOps المتمثلة في "كل شيء كرمز" ، لذلك كان اختيار متطلبات التكنولوجيا الجديدة لإنشاء شرائح العروض التقديمية واضحًا جدًا:
- يجب أن يكون العرض التقديمي ملف نص عادي بلغة الترميز.
- لدينا شرائح حول مشاريع التطوير ، لذلك يجب أن تسمح لك العلامات بالادراج بسهولة دون اللجوء إلى أنظمة خارجية
- بناء الجملة شظايا رمز ،
- رسومات تخطيطية بسيطة في شكل أشكال هندسية متصلة بالسهام ،
- مخططات UML ، مخططات انسيابية ، وأكثر من ذلك.
- يجب أن يتم تخزين مشروع العرض التقديمي في نظام التحكم في الإصدار.
- يجب أن يتم التحقق من صحة وتجميع الشرائح النهائية في نظام CI.
يوجد اليوم خياران أساسيان لإنشاء شرائح بلغات الترميز: حزمة beamer لـ LaTeX أو أحد أطر عمل إنشاء شرائح HTML / CSS ( RevealJS ، الملاحظة ، deck.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 ** ** **
رأس ومقتطف شفرة المصدر مع تسليط الضوء على بناء الجملة:
== Kafka Streams API: KStreams- [source,java] ---- StreamsConfig config = ...; // Topology topology = new StreamsBuilder() // ....build(); ----
في عملية التحضير للتقرير ، تخضع أمثلة الشفرة التجريبية إلى تعديلات وتحسينات متكررة ، وبالتالي ، فإن فرصة نسخ "الكود الخام" ولصقه مباشرةً في الشريحة لا تقدر بثمن ، مما يضمن أهمية المثال التجريبي وعدم القلق بشأن تسليط الضوء على بناء الجملة.
العنوان والتوضيح والنص (يتم تنفيذ التخطيط على الشريحة في خلايا جدول AsciiDoctor ):
== Kafka Streams in Action [.custom-style] [cols="30a,70a"] |=== |image::KSIA.jpg[] | * **William Bejeck**, + “Kafka Streams in Action”, November 2018 * Kafka 1.0 |===
في بعض الأحيان لا يكون العنوان مطلوبًا ، ولكن لتوضيح أفكارك ، تحتاج فقط إلى صورة بملء الشاشة:
[%notitle] == image::swampman.jpg[canvas, size=cover]
غالبًا ما تحتاج الفكرة إلى دعمها بواسطة رسم تخطيطي بسيط ، في شكل "مربعات متصلة بالسهام". لحسن الحظ ، تم دمج 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;} } -----
في حالة الحاجة إلى تعديل التوقيع على الشكل ، وتغيير اتجاه السهم ، وما إلى ذلك ، يمكن القيام بذلك مباشرة في رمز العرض التقديمي ، بدلاً من إعادة رسم الصورة في مكان ما وإعادة إدخالها في الشريحة. هذا يزيد بشكل كبير من سرعة العمل على الشرائح.
مثال أكثر تعقيدًا:
== [graphviz, "unstable-update.png"] ----- digraph G { rankdir="LR"; graph [ dpi = 150 ]; u -> r0; u[shape=plaintext; label="linter update\n+ 13 warnings"] r0[shape=point, width = 0] r1 -> r0[ arrowhead = none, label="master branch" ]; r0-> r2 []; b1 -> b4; r1->b1 r1[label="150\nwarnings"] b1[label="± 0\nwarnings"] b4[label="± 0\nwarnings"] b4->r2 r2[label="163\nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>] {rank = same; u; r0; b4;} } -----
بالمناسبة ، تجريب Graphviz وتصحيح الصور مناسب على صفحة Graphviz على الإنترنت .
أخيرًا ، إذا كنت بحاجة إلى إدراج مخطط كتلة أو رسم تخطيطي للفئة أو أي مخطط قياسي آخر في الشريحة ، فقد ينقذ نظام آخر مدمج مع AsciiDoctor ، PlantUML . كتب زميلي نيكولاي بوتاشنيكوف موضوعًا منفصلًا عن القدرات الهائلة لـ PlantUML.
يتيح تحويل مشروع العرض التقديمي إلى رمز مخزّن على نظام التحكم في الإصدار تنظيم العمل المشترك على العرض التقديمي ، أولاً وقبل كل شيء ، لفصل مهام إنشاء المحتوى والتصميم. يوصف تصميم الشرائح (الخطوط والخلفيات والمسافات البادئة) في RevealJS باستخدام CSS. أفضل ما لدي هو نقل مهاراتي في CSS الشخصية بواسطة GIF - لكنها ليست مخيفة عندما يكون هناك أشخاص يعملون مع CSS أكثر مرونة وأسرع مني. ونتيجة لذلك ، اتضح أنه في سياق الموعد النهائي التقريبي بسرعة ، يمكننا العمل في وقت واحد على ملفات مختلفة من خلال Git وتطوير سرعة التعاون المستحيل عند إرسال ملفات .pptx عبر البريد.
بناء صفحة HTML مع الشرائح
مصادر النص العادي رائعة ، لكن كيف تجمعها في العرض التقديمي نفسه؟
AsciiDoctor هو مشروع Ruby ويمكنك تشغيله بعدة طرق. أولاً ، يمكنك تثبيت لغة Ruby وتشغيل asciidoctor مباشرة ، والتي من المحتمل أن تكون الأقرب لمطوري Ruby.
إذا كنت لا ترغب في المشاركة في تثبيت Ruby ، فيمكنك استخدام صورة عامل الالتحام asciidoctor / docker-asciidoctor ، حيث يمكنك توصيل مجلد مصدر المشروع عبر VOLUME والحصول على النتيجة في الموقع المحدد.
قد يبدو الخيار الذي استقرت عليه غير متوقع إلى حد ما ، لكنه مناسب جدًا لي كمطور Java. لا يتطلب تثبيت روبي أو عامل ميناء ، لكنه يسمح لك بإنشاء شرائح باستخدام برنامج Maven.
الحقيقة هي أن مشروع JRuby - تطبيق Java للغة Ruby - جيد جدًا لدرجة أنه يسمح لك بتشغيل كل شيء تم إنشاؤه تقريبًا لـ Ruby في جهاز Java ، ويعد تشغيل AsciiDoctor أحد أكثر تطبيقات JRuby شيوعًا.
يتيح لك وجود البرنامج المساعد asciidoctor-maven-plugin جمع وثائق AsciiDoctor ، التي تعد جزءًا من مشروع Java (الذي نستخدمه بنشاط). في الوقت نفسه ، يتم تنزيل AsciiDoctor و JRuby تلقائيًا بواسطة Maven ، ويتم تنفيذ AsciiDoctor في بيئة JRuby: لا يلزم تثبيت أي شيء على الجهاز! (باستثناء حزمة graphviz ، وهي ضرورية إذا كنت ترغب في استخدام رسومات GraphViz أو PlantUML.) ضع ملفات .adoc الخاصة بك في مجلد src/main/asciidoc/ . فيما يلي مثال على شرائح تخطيط تجمع pickhouse .
تحويل الشرائح إلى PDF
على الرغم من أن إصدار HTML من الشرائح مكتفٍ ذاتيًا تمامًا ، إلا أنه لا يزال من الضروري الحصول على نسخة PDF من الشرائح. أولاً ، يحدث أنه في بعض المؤتمرات التي لا توفر للمتكلم القدرة على توصيل الكمبيوتر المحمول الخاص به ، فإنها تتطلب شرائح "بدقة بتنسيق pptx أو pdf" ، ولا تتوقع أن تأتي أيضًا بتنسيق HTML. ثانياً ، من الجيد إرسال منظمي الإصدار بدون تغيير لشرائحك في النموذج كما هو موضح في التقرير ، بتنسيق PDF لنشر الملف في مواد المؤتمر.
لحسن الحظ ، Node.js هي أداة مساعدة decktape مبنية على أساس Puppeteer ، نظام التشغيل الآلي لمتصفح Chrome ، الذي يتولى هذه المهمة. يمكنك تحويل عرض RevealJS إلى PDF باستخدام الأمر
node decktape.js -s 3200x1800 --slides 1-500 \ reveal "file:///index.html?fragments=true" slides.pdf
حيلتان لبدء decktape ، والتي كان عليها أن تأتي عن طريق التجربة والخطأ:
يجب تعيين الدقة من خلال المعلمة -s بهامش مزدوج ، وإلا فقد تكون هناك مشاكل في نتائج التحويل
في عنوان URL لإصدار HTML من العرض التقديمي ، تحتاج إلى تمرير المعلمة ?fragments=true ، مما سيتيح لك إنشاء صفحة PDF منفصلة لكل حالة وسيطة لشريحة (على سبيل المثال ، خمس صفحات لخمس عناصر قائمة ، إذا كانت معروضة واحدة تلو الأخرى). سيسمح هذا باستخدام ملف PDF في حد ذاته كعرض تقديمي في تقرير.
إنشاء تلقائي ونشره على الويب
يكون ملائمًا عند تجميع الشرائح تلقائيًا عندما تدخل التغييرات في نظام التحكم في الإصدار ، وأكثر ملاءمة عندما يتم نشر الشرائح المترجمة تلقائيًا على الإنترنت للاستخدام العام. يمكن "تشغيل" الشرائح من الإنترنت بسهولة أمام جمهور من أي جهاز متصل بالإنترنت وجهاز العرض.
نظرًا لأننا نستخدم GitHub في عملنا ، فإن الخيار الطبيعي لنظام CI هو TravisCI ، ولاستضافة العروض التقديمية الجاهزة - imtqy.com . فكرة imtqy.com هي أن أي محتوى ثابت يوضع في فرع gh-pages في مشروعك على GitHub يصبح متاحًا على < >.gihub.io/< > .
يبدو ملف التكوين TravisCI الكامل ، والذي يتضمن تجميع إصدار HTML للصفحة باستخدام Maven ، والتحويل إلى PDF باستخدام decktape وتحميل النتائج إلى فرع gh-pages للنشر على imtqy.com ، هكذا.
لإنشاء مثل هذا المشروع على جانب TravisCI ، تحتاج إلى تكوين متغيرات البيئة
GH_REF - قيمة النموذج github.com/inponomarev/csa-hbGH_TOKEN - رمز وصول GitHub. يمكنك الحصول عليه على GitHub في إعدادات ملفك التعريفي ، إعدادات المطور -> رموز الوصول الشخصية. إذا قمت بتحميل العرض التقديمي إلى مستودع عام ، يكفي لهذا الرمز المميز تحديد مستوى الوصول الوحيد "الوصول إلى المستودعات العامة".GH_USER_EMAIL / GH_USER_NAME - زوج الاسم / البريد ، الذي سيتم تطبيق الدفع إلى فرع gh-pages نيابةً عنه.
وبالتالي ، فإن كل التزام برمز العرض التقديمي على GitHub سيعيد تلقائيًا إنشاء الشرائح بتنسيقات HTML و PDF وإعادة تحميلها على imtqy.com. (بالطبع ، يجب فقط تحميل العروض التقديمية التي تريد نشرها في النهاية على imtqy.com.)
أمثلة المشروع
أخيرًا ، هناك روابط لبعض الأمثلة على مشاريع العروض التقديمية مع البرامج النصية المخصصة لـ Maven وتكوين CI لـ Travis-CI ، والتي يمكنك استنساخها واستخدامها عند إنشاء مشاريع العروض التقديمية الخاصة بك:
وداعا بووربوينت! لا أعتقد أنني سأحتاجك أبدًا لتقديم العروض الفنية :-)