ارائه به عنوان کد یا چرا من دیگر از پاورپوینت استفاده نمی کنم

فکر می‌کنم ده‌ها سخنرانی برای همکاران، مشتریان و سخنرانی‌های عمومی در حرفه‌ام در زمینه فناوری اطلاعات ارائه کرده‌ام. سال هاست که پاورپوینت به عنوان ابزار تولید اسلاید برای من یک انتخاب طبیعی و قابل اعتماد بوده است. اما امسال وضعیت از نظر کیفی تغییر کرده است. از فوریه تا می، فرصت سخنرانی در پنج کنفرانس را داشتم و اسلایدهای گزارش ها باید در مدت کوتاهی اما با کیفیت بالا تهیه می شد. این سوال در مورد واگذاری آن قسمت از کار در رابطه با طراحی بصری اسلایدها به افراد دیگر مطرح شد. یک بار سعی کردم با یک طراح کار کنم و فایل‌های pptx. را از طریق پست بفرستم، اما کار به هرج و مرج تبدیل شد: هیچ کس نمی‌دانست کدام نسخه اسلایدها "جدیدترین" است و طرح بندی به دلیل تفاوت در پاورپوینت "متحرک" بود. نسخه ها و فونت ها در دستگاه های ما. و تصمیم گرفتم چیز جدیدی را امتحان کنم. من آن را امتحان کردم، و از آن زمان به بعد به بازگشت به پاورپوینت فکر نکردم.

ما چه میخواهیم

حدود یک سال و نیم پیش، شرکت ما استفاده از Word را برای ایجاد مستندات پروژه متوقف کرد، زیرا با مشکلات مشابهی مواجه شد: اگرچه Word برای تایپ یک سند کوچک خوب است، اما با افزایش حجم، مشکلاتی با همکاری و به دست آوردن کیفیت و کیفیت بالا ایجاد می شود. طراحی یکپارچه انتخاب ما افتاد Ascii دکتر، و ما هرگز از این انتخاب خوشحال نمی شویم، اما این موضوع برای مقاله جداگانه ای است. تقریباً در همان زمان، ما تأثیر یکی از اصول DevOps "همه چیز به عنوان کد" را یاد گرفتیم، بنابراین انتخاب الزامات فناوری جدید برای ایجاد اسلایدهای ارائه کاملاً واضح بود:

1. ارائه باید یک فایل متنی ساده به زبان نشانه گذاری باشد.
2. اسلایدهای ما در مورد پروژه های توسعه هستند، بنابراین نشانه گذاری باید بدون استفاده از سیستم های خارجی، درج آن را آسان کند.
   • قطعات کد با برجسته سازی نحو،
   • نمودارهای ساده به شکل اشکال هندسی که با فلش به هم متصل شده اند،
   • نمودارهای UML، نمودارهای جریان و موارد دیگر.
3. پیش نویس ارائه باید در یک سیستم کنترل نسخه ذخیره شود.
4. اعتبارسنجی و مونتاژ اسلایدهای تمام شده باید در یک سیستم CI انجام شود.

امروزه دو گزینه اساسی برای ایجاد اسلاید در زبان های نشانه گذاری وجود دارد: بسته پروژکتور برای 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 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;}
}
-----

نتیجه

به هر حال، آزمایش با Graphviz و اشکال زدایی تصاویر در صفحه راحت است Graphviz آنلاین.

در نهایت، اگر نیاز به درج فلوچارت، نمودار کلاس یا سایر نمودارهای استاندارد شده در یک اسلاید دارید، سیستم دیگری که با AsciiDoctor یکپارچه شده است می‌تواند کمک کند. PlantUML. همکار من نیکولای پوتاشنیکوف در مورد قابلیت های گسترده PlantUML نوشت پست جداگانه.

تبدیل پروژه ارائه به کد ذخیره شده در یک سیستم کنترل نسخه، سازماندهی کار مشترک روی ارائه، اول از همه، جداسازی وظایف ایجاد محتوا و طراحی را امکان پذیر می کند. طراحی اسلایدها (فونت، پس زمینه، تورفتگی) در RevealJS با استفاده از CSS شرح داده شده است. مهارت شخصی من با CSS به بهترین وجه توسط این گیف - اما وقتی افرادی هستند که بسیار ماهرانه تر و سریعتر از من با CSS کار می کنند ترسناک نیست. در نتیجه، مشخص می‌شود که با نزدیک شدن سریع به مهلت ارائه، ما می‌توانیم روی فایل‌های مختلف به طور همزمان از طریق Git کار کنیم و سرعت همکاری را توسعه دهیم که در ارسال فایل‌های pptx. از طریق پست غیرممکن است.

ساخت یک صفحه HTML با اسلاید

منابع متن ساده عالی هستند، اما چگونه آنها را در خود ارائه جمع آوری می کنید؟

AsciiDoctor پروژه ای است که به زبان روبی نوشته شده است و راه های مختلفی برای اجرای آن وجود دارد. ابتدا می‌توانید زبان Ruby را نصب کنید و asciidoctor را مستقیماً اجرا کنید، که احتمالاً نزدیک‌ترین چیز به توسعه‌دهندگان Ruby است.

اگر نمی خواهید با نصب Ruby مشکلی ایجاد کنید، می توانید از تصویر docker استفاده کنید asciidoctor/docker-asciidoctor، که هنگام راه اندازی، می توانید پوشه را با منابع پروژه از طریق VOLUME به آن متصل کنید و نتیجه را در یک مکان مشخص دریافت کنید.

گزینه ای که من انتخاب کردم ممکن است تا حدودی غیر منتظره به نظر برسد، اما برای من به عنوان یک توسعه دهنده جاوا راحت ترین گزینه است. این نیازی به نصب Ruby یا docker ندارد، اما به شما امکان می دهد با استفاده از اسکریپت Maven اسلاید ایجاد کنید.

نکته این است که پروژه جی روبی - پیاده سازی جاوا زبان Ruby به قدری خوب است که به شما امکان می دهد تقریباً هر چیزی را که برای Ruby ایجاد شده است در یک ماشین جاوا اجرا کنید و اجرای AsciiDoctor یکی از رایج ترین کاربردهای JRuby است.

دسترسی پلاگین asciidoctor-maven به شما امکان می دهد اسناد AsciiDoctor را که بخشی از یک پروژه جاوا است (که ما فعالانه از آن استفاده می کنیم) جمع آوری کنید. در همان زمان، AsciiDoctor و JRuby به طور خودکار توسط Maven دانلود می شوند و AsciiDoctor در محیط JRuby اجرا می شود: نیازی به نصب چیزی روی دستگاه نیست! (به استثنای بسته graphviz، که اگر می خواهید از گرافیک های GraphViz یا PlantUML استفاده کنید، لازم است.) به سادگی فایل های .adoc خود را در یک پوشه قرار دهید. src/main/asciidoc/. اینجا نمونه پومنیکجمع آوری اسلاید با نمودار

اسلایدها را به PDF تبدیل کنید

اگرچه نسخه HTML اسلایدها کاملاً خودکفا است، اما همچنان لازم است که یک نسخه PDF از اسلایدها داشته باشید. اولاً، اتفاق می افتد که در برخی از کنفرانس ها که به سخنران امکان اتصال لپ تاپ خود را نمی دهد، به اسلایدهایی "به طور دقیق در قالب pptx یا pdf" نیاز دارند، بدون اینکه انتظار داشته باشیم که آنها نیز در HTML باشند. ثانیاً، خوب است که یک نسخه ویرایش نشده از اسلایدهای خود را همانطور که در گزارش نشان داده شده است در قالب PDF برای انتشار فایل در مواد کنفرانس برای برگزارکنندگان ارسال کنید.

خوشبختانه، ابزار Node.js این کار را انجام می دهد. نوار عرشه، بر اساس ساخته شده است توله سگ - سیستم های اتوماسیون برای مدیریت مرورگر کروم. با دستور می توانید ارائه 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و برای میزبانی ارائه های آماده - github.io. ایده پشت github.io این است که هر محتوای ثابتی در یک شعبه پست شود gh-pages پروژه شما در GitHub، در دسترس می شود <ваше имя>.gihub.io/<ваш проект>.

فایل پیکربندی کامل TravisCI، شامل کامپایل نسخه HTML صفحه با استفاده از Maven، تبدیل به PDF با استفاده از decktape، و آپلود نتایج در یک رشته gh-pages برای انتشار در github.io، به نظر می رسد پس.

برای ساخت چنین پروژه ای در سمت TravisCI، باید متغیرهای محیط را پیکربندی کنید

• GH_REF - مقداری مانند github.com/inponomarev/csa-hb
• GH_TOKEN - رمز دسترسی GitHub. می توانید آن را از GitHub در تنظیمات نمایه خود، Developer Settings -> Personal Access Tokens دریافت کنید. اگر ارائه ای را در یک مخزن عمومی آپلود می کنید، برای این نشانه کافی است تنها سطح دسترسی "دسترسی به مخازن عمومی" را مشخص کنید.
• GH_USER_EMAIL / GH_USER_NAME - جفت نام/ایمیل که از طرف آنها فشار به رشته انجام می شود gh-pages.

بنابراین، هر commit کد ارائه در GitHub منجر به بازسازی خودکار اسلایدها در قالب‌های HTML و PDF و بارگذاری مجدد در github.io می‌شود. (البته، فقط باید آن دسته از ارائه هایی را که در نهایت می خواهید عمومی کنید، در github.io آپلود کنید.)

نمونه هایی از پروژه ها

در نهایت، در اینجا پیوندهایی به چند نمونه از پروژه‌های ارائه با اسکریپت‌های Maven سفارشی و پیکربندی CI برای Travis-CI وجود دارد که می‌توانند هنگام ایجاد پروژه‌های ارائه خود، شبیه‌سازی و استفاده شوند:

• https://github.com/inponomarev/kstreams-examples (گفتگوی من برای JPoint 2019)

• https://github.com/inponomarev/csa-hb (گزارش من برای Heisenbug 2019)

خداحافظ پاورپوینت! فکر نمی کنم برای ارائه های فنی به شما نیاز داشته باشم :)

منبع: www.habr.com