โปรโฮสต์ > บล็อก > การบริหาร > การนำเสนอเป็นโค้ด หรือเหตุใดฉันจึงไม่ใช้ Powerpoint อีกต่อไป

การนำเสนอเป็นโค้ด หรือเหตุใดฉันจึงไม่ใช้ Powerpoint อีกต่อไป

การนำเสนอเป็นโค้ด หรือเหตุใดฉันจึงไม่ใช้ Powerpoint อีกต่อไป

ฉันคิดว่าฉันได้นำเสนอผลงานมากมายแก่เพื่อนร่วมงาน ลูกค้า และการพูดในที่สาธารณะในอาชีพไอทีของฉัน หลายปีที่ผ่านมา Powerpoint เป็นตัวเลือกที่เป็นธรรมชาติและเชื่อถือได้สำหรับฉันในฐานะเครื่องมือสร้างสไลด์ แต่ในปีนี้สถานการณ์มีการเปลี่ยนแปลงในเชิงคุณภาพ ตั้งแต่เดือนกุมภาพันธ์ถึงเดือนพฤษภาคม ฉันมีโอกาสพูดในการประชุม XNUMX ครั้ง และต้องเตรียมสไลด์สำหรับรายงานในเวลาอันสั้นแต่มีคุณภาพสูง คำถามเกิดขึ้นเกี่ยวกับการมอบหมายงานส่วนนั้นที่เกี่ยวข้องกับการออกแบบภาพสไลด์ให้กับผู้อื่น ครั้งหนึ่งฉันเคยพยายามทำงานร่วมกับนักออกแบบ โดยส่งไฟล์ .pptx ทางไปรษณีย์ แต่งานกลับกลายเป็นเรื่องยุ่งวุ่นวาย ไม่มีใครรู้ว่าสไลด์เวอร์ชันใดเป็น "ใหม่ล่าสุด" และเลย์เอาต์ "เคลื่อนไหว" เนื่องจากความแตกต่างใน Powerpoint เวอร์ชันและแบบอักษรบนเครื่องของเรา และฉันตัดสินใจลองอะไรใหม่ ๆ ฉันลองแล้ว และตั้งแต่นั้นมาฉันก็ไม่เคยคิดที่จะกลับไปใช้ Powerpoint อีกเลย

เราต้องการอะไร

ประมาณหนึ่งปีครึ่งที่แล้ว บริษัทของเราหยุดใช้ Word เพื่อสร้างเอกสารโครงการ โดยประสบปัญหาเดียวกัน แม้ว่า Word จะดีสำหรับการพิมพ์เอกสารขนาดเล็ก แต่เมื่อปริมาณเพิ่มขึ้น ปัญหาก็เกิดขึ้นกับการทำงานร่วมกันและการได้รับคุณภาพสูงและ การออกแบบแบบครบวงจร ทางเลือกของเราล้มลง AsciiDoctorและเราไม่เคยหยุดชื่นชมกับตัวเลือกนี้ แต่นี่เป็นหัวข้อสำหรับบทความแยกต่างหาก ในเวลาเดียวกัน เราได้เรียนรู้ถึงประสิทธิภาพของหนึ่งในหลักการ DevOps ที่ว่า “ทุกอย่างเป็นโค้ด” ดังนั้นการเลือกข้อกำหนดสำหรับเทคโนโลยีใหม่ในการสร้างสไลด์การนำเสนอจึงค่อนข้างชัดเจน:

  1. งานนำเสนอจะต้องเป็นไฟล์ข้อความธรรมดาในภาษามาร์กอัป
  2. สไลด์ของเราเกี่ยวกับโครงการพัฒนา ดังนั้นมาร์กอัปควรทำให้ง่ายต่อการแทรก โดยไม่ต้องใช้ระบบภายนอก
    • ส่วนของโค้ดที่มีการเน้นไวยากรณ์
    • แผนภาพง่าย ๆ ในรูปแบบของรูปทรงเรขาคณิตที่เชื่อมต่อกันด้วยลูกศร
    • ไดอะแกรม UML ผังงาน และอื่นๆ
  3. แบบร่างการนำเสนอจะต้องถูกจัดเก็บไว้ในระบบควบคุมเวอร์ชัน
  4. การตรวจสอบความถูกต้องและการประกอบสไลด์ที่เสร็จแล้วควรทำในระบบ CI

ปัจจุบัน มีสองตัวเลือกพื้นฐานสำหรับการสร้างสไลด์ในภาษามาร์กอัป: แพ็คเกจ Beamer สำหรับ LaTeX หรือหนึ่งในเฟรมเวิร์กสำหรับการสร้างสไลด์โดยใช้ HTML/CSS (เปิดเผย JS, ข้อสังเกต, เด็ค.js และอื่น ๆ อีกมากมาย).

แม้ว่าจิตวิญญาณของฉันจะอยู่ใน LaTeX แต่ใจของฉันก็กำหนดว่าการเลือกโซลูชันที่ฉันจะไม่เป็นเพียงคนเดียวที่ใช้นั้น ควรอยู่เคียงข้างโซลูชันที่คุ้นเคยกับผู้คนในวงกว้าง ไม่ใช่ทุกคนที่รู้จัก LaTeX และหากการปฏิบัติประจำวันของคุณไม่เกี่ยวข้องกับการเขียนบทความทางวิทยาศาสตร์ คุณก็ไม่น่าจะมีเวลาดื่มด่ำในโลกอันใหญ่โตและซับซ้อนของระบบนี้

อย่างไรก็ตาม ความชำนาญในการใช้ HTML/CSS ไม่ใช่ทักษะที่แพร่หลายนัก ตัวอย่างเช่น ฉันยังไม่เชี่ยวชาญด้านนี้อย่างเต็มที่ โชคดีที่ AsciiDoctor ที่คุ้นเคยอยู่แล้วมาช่วยเหลือ: ตัวแปลง asciidoctor-เปิดเผย ช่วยให้คุณสร้างสไลด์ 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 ก็สามารถช่วยได้ พืชUML. เพื่อนร่วมงานของฉัน Nikolai Potashnikov เขียนเกี่ยวกับความสามารถที่กว้างขวางของ PlantUML แยกโพสต์.

การเปลี่ยนโปรเจ็กต์การนำเสนอให้เป็นโค้ดที่เก็บไว้ในระบบควบคุมเวอร์ชันทำให้สามารถจัดระเบียบการทำงานร่วมกันในการนำเสนอได้ ประการแรกคือแยกงานในการสร้างเนื้อหาและการออกแบบ การออกแบบสไลด์ (แบบอักษร พื้นหลัง การเยื้อง) ใน RevealJS ได้รับการอธิบายโดยใช้ CSS ทักษะส่วนตัวของฉันกับ CSS ถ่ายทอดออกมาได้ดีที่สุด กิฟนี้ - แต่ก็ไม่ได้น่ากลัวเมื่อมีคนที่ทำงานกับ CSS คล่องแคล่วและรวดเร็วกว่าฉันมาก ผลปรากฏว่าเมื่อใกล้ถึงกำหนดเวลาการนำเสนออย่างรวดเร็ว เราจึงสามารถทำงานกับไฟล์ต่างๆ ได้พร้อมกันผ่าน Git และพัฒนาความเร็วในการทำงานร่วมกันซึ่งเป็นไปไม่ได้เมื่อส่งไฟล์ .pptx ทางไปรษณีย์

การสร้างหน้า HTML ด้วยสไลด์

แหล่งข้อความธรรมดานั้นดีมาก แต่คุณจะรวบรวมมันลงในงานนำเสนอได้อย่างไร

AsciiDoctor เป็นโปรเจ็กต์ที่เขียนด้วย Ruby และมีหลายวิธีในการรัน ขั้นแรก คุณสามารถติดตั้งภาษา Ruby และรัน asciidoctor ได้โดยตรง ซึ่งอาจเป็นสิ่งที่นักพัฒนา Ruby ใกล้เคียงที่สุด

หากคุณไม่ต้องการยุ่งกับการติดตั้ง Ruby คุณสามารถใช้อิมเมจนักเทียบท่าได้ asciidoctor/นักเทียบท่า-asciidoctorซึ่งเมื่อเปิดใช้งาน คุณสามารถเชื่อมต่อโฟลเดอร์กับแหล่งที่มาของโปรเจ็กต์ผ่าน VOLUME และรับผลลัพธ์ในตำแหน่งที่กำหนด

ตัวเลือกที่ฉันเลือกอาจดูค่อนข้างคาดไม่ถึง แต่สะดวกที่สุดสำหรับฉันในฐานะนักพัฒนา Java ไม่จำเป็นต้องติดตั้ง Ruby หรือ docker แต่ช่วยให้คุณสร้างสไลด์โดยใช้สคริปต์ Maven

ประเด็นก็คือโครงการ เจรูบี้ - การใช้งาน Java ของภาษา Ruby นั้นดีมากจนช่วยให้คุณสามารถรันเกือบทุกอย่างที่สร้างขึ้นสำหรับ Ruby ในเครื่อง Java และการรัน AsciiDoctor เป็นหนึ่งในการใช้งานทั่วไปของ JRuby

ความพร้อมใช้งาน asciidoctor-maven-ปลั๊กอิน ช่วยให้คุณสามารถรวบรวมเอกสาร AsciiDoctor ที่เป็นส่วนหนึ่งของโครงการ Java (ซึ่งเราใช้อยู่) ในเวลาเดียวกัน Maven จะดาวน์โหลด AsciiDoctor และ JRuby โดยอัตโนมัติ และ 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 คุณสามารถรับได้จาก GitHub ในการตั้งค่าโปรไฟล์ การตั้งค่านักพัฒนา -> โทเค็นการเข้าถึงส่วนบุคคล หากคุณอัปโหลดงานนำเสนอไปยังพื้นที่เก็บข้อมูลสาธารณะ สำหรับโทเค็นนี้ก็เพียงพอที่จะระบุระดับการเข้าถึง "เข้าถึงพื้นที่เก็บข้อมูลสาธารณะ" เท่านั้น
  • GH_USER_EMAIL / GH_USER_NAME — คู่ชื่อ/อีเมลในนามของการดำเนินการพุชไปยังเธรด gh-pages.

ดังนั้น การคอมมิตโค้ดการนำเสนอแต่ละครั้งบน GitHub ส่งผลให้สไลด์ถูกสร้างขึ้นใหม่โดยอัตโนมัติในรูปแบบ HTML และ PDF และอัปโหลดอีกครั้งไปยัง github.io (แน่นอน คุณควรอัปโหลดงานนำเสนอที่คุณต้องการเปิดเผยต่อสาธารณะไปที่ github.io เท่านั้น)

ตัวอย่างโครงการ

สุดท้ายนี้ ต่อไปนี้เป็นลิงก์ไปยังตัวอย่างบางส่วนของโปรเจ็กต์การนำเสนอที่มีสคริปต์ Maven แบบกำหนดเองและการกำหนดค่า CI สำหรับ Travis-CI ซึ่งสามารถโคลนและนำไปใช้เมื่อสร้างโปรเจ็กต์การนำเสนอของคุณเอง:

ลาก่อนพาวเวอร์พอยต์! ฉันไม่คิดว่าจะต้องการคุณสำหรับการนำเสนอทางเทคนิคอีกต่อไป :)

ที่มา: will.com

เพิ่มความคิดเห็น