Νομίζω ότι έχω κάνει δεκάδες παρουσιάσεις σε συναδέλφους, πελάτες και δημόσια ομιλία στην καριέρα μου στον τομέα της πληροφορικής. Για πολλά χρόνια, το Powerpoint ήταν μια φυσική και αξιόπιστη επιλογή για μένα ως εργαλείο παραγωγής διαφανειών. Αλλά φέτος η κατάσταση έχει αλλάξει ποιοτικά. Από τον Φεβρουάριο έως τον Μάιο, είχα την ευκαιρία να μιλήσω σε πέντε συνέδρια και οι διαφάνειες για τις εκθέσεις έπρεπε να ετοιμαστούν σε σύντομο χρονικό διάστημα, αλλά με υψηλή ποιότητα. Προέκυψε το ερώτημα σχετικά με την ανάθεση αυτού του μέρους της εργασίας σχετικά με τον οπτικό σχεδιασμό των διαφανειών σε άλλα άτομα. Κάποτε προσπάθησα να συνεργαστώ με έναν σχεδιαστή, στέλνοντας αρχεία .pptx μέσω ταχυδρομείου, αλλά η δουλειά μετατράπηκε σε χάος: κανείς δεν ήξερε ποια έκδοση των διαφανειών ήταν η "νεότερη" και η διάταξη ήταν "κινούμενη" λόγω της διαφοράς στο Powerpoint εκδόσεις και γραμματοσειρές στα μηχανήματα μας. Και αποφάσισα να δοκιμάσω κάτι νέο. Το δοκίμασα και από τότε δεν έχω σκεφτεί να επιστρέψω στο Powerpoint.
Τι θέλουμε
Πριν από περίπου ενάμιση χρόνο, η εταιρεία μας σταμάτησε να χρησιμοποιεί το Word για τη δημιουργία τεκμηρίωσης έργου, έχοντας αντιμετωπίσει τα ίδια προβλήματα: αν και το Word είναι καλό για την πληκτρολόγηση ενός μικρού εγγράφου, καθώς ο όγκος μεγαλώνει, προκύπτουν δυσκολίες με τη συνεργασία και την απόκτηση υψηλής ποιότητας και ενιαίο σχέδιο. Η επιλογή μας έπεσε , και δεν παύουμε να χαιρόμαστε με αυτή την επιλογή, αλλά αυτό είναι ένα θέμα για ξεχωριστό άρθρο. Περίπου την ίδια περίοδο, μάθαμε την αποτελεσματικότητα μιας από τις αρχές DevOps του «όλα ως κώδικας», επομένως η επιλογή των απαιτήσεων για τη νέα τεχνολογία για τη δημιουργία διαφανειών παρουσίασης ήταν αρκετά προφανής:
- Η παρουσίαση πρέπει να είναι αρχείο απλού κειμένου σε γλώσσα σήμανσης.
- Οι διαφάνειές μας αφορούν έργα ανάπτυξης, επομένως η σήμανση θα πρέπει να διευκολύνει την εισαγωγή τους, χωρίς να καταφεύγουμε σε εξωτερικά συστήματα
- θραύσματα κώδικα με επισήμανση σύνταξης,
- απλά διαγράμματα με τη μορφή γεωμετρικών σχημάτων που συνδέονται με βέλη,
- Διαγράμματα UML, διαγράμματα ροής και πολλά άλλα.
- Το προσχέδιο της παρουσίασης πρέπει να αποθηκευτεί σε ένα σύστημα ελέγχου έκδοσης.
- Η επικύρωση και η συναρμολόγηση των τελικών διαφανειών θα πρέπει να γίνονται σε σύστημα CI.
Σήμερα, υπάρχουν δύο βασικές επιλογές για τη δημιουργία διαφανειών σε γλώσσες σήμανσης: πακέτο για LaTeX ή ένα από τα πλαίσια για τη δημιουργία διαφανειών με χρήση HTML/CSS (, , και πολλοί άλλοι).
Αν και η ψυχή μου βρίσκεται στο LaTeX, το μυαλό μου υπαγόρευσε ότι η επιλογή μιας λύσης που δεν θα χρησιμοποιούσα μόνο εγώ θα έπρεπε να είναι στο πλευρό μιας λύσης οικείας σε έναν ευρύτερο κύκλο ανθρώπων. Δεν γνωρίζουν όλοι το LaTeX και αν η καθημερινή σας πρακτική δεν σχετίζεται με τη συγγραφή επιστημονικών άρθρων, τότε είναι απίθανο να έχετε χρόνο να βυθιστείτε στον τεράστιο, περίπλοκο κόσμο αυτού του συστήματος.
Ωστόσο, η γνώση του HTML/CSS δεν είναι ακριβώς μια ευρέως διαδεδομένη δεξιότητα: εγώ, για παράδειγμα, δεν είμαι καθόλου ικανός σε αυτό. Ευτυχώς, ο ήδη γνωστός AsciiDoctor έρχεται στη διάσωση: ένας μετατροπέας σας επιτρέπει να δημιουργήσετε διαφάνειες 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();
----Αποτέλεσμα
Κατά την προετοιμασία για μια ομιλία, οι επιδείξεις κώδικα υποβάλλονται σε επανειλημμένες αναθεωρήσεις και βελτιώσεις, επομένως η δυνατότητα γρήγορης αντιγραφής και επικόλλησης του "ακατέργαστου κώδικα" απευθείας σε μια διαφάνεια είναι ανεκτίμητη, διασφαλίζοντας ότι η επίδειξη είναι ενημερωμένη χωρίς να ανησυχείτε για την επισήμανση σύνταξης.
Τίτλος, εικόνα και κείμενο (η διάταξη στη διαφάνεια γίνεται σε κελιά ):
== 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 παίρνει μια καμπύλη εκμάθησης, αλλά με βάση τα παραδείγματα που παρέχονται, είναι αρκετά εύκολο να το κάνετε! Έτσι φαίνεται:
== Пишем “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 και να εντοπίσετε σφάλματα στη σελίδα .
Τέλος, εάν χρειάζεται να εισαγάγετε ένα διάγραμμα ροής, ένα διάγραμμα τάξης ή άλλο τυποποιημένο διάγραμμα σε μια διαφάνεια, τότε ένα άλλο σύστημα ενσωματωμένο με το AsciiDoctor μπορεί να έρθει στη διάσωση, . Ο συνάδελφός μου Nikolai Potashnikov έγραψε για τις εκτεταμένες δυνατότητες του PlantUML .
Η μετατροπή του έργου παρουσίασης σε κώδικα που είναι αποθηκευμένος σε ένα σύστημα ελέγχου έκδοσης καθιστά δυνατή την οργάνωση κοινής εργασίας για την παρουσίαση, πρώτα απ 'όλα, τον διαχωρισμό των εργασιών δημιουργίας περιεχομένου και σχεδίασης. Ο σχεδιασμός των διαφανειών (γραμματοσειρές, φόντο, εσοχές) στο RevealJS περιγράφεται με χρήση CSS. Η προσωπική μου ικανότητα με το CSS μεταδίδεται καλύτερα με - αλλά δεν είναι τρομακτικό όταν υπάρχουν άνθρωποι που εργάζονται με CSS πολύ πιο επιδέξια και πιο γρήγορα από μένα. Ως αποτέλεσμα, αποδεικνύεται ότι με μια γρήγορη προθεσμία για μια παρουσίαση που πλησιάζει, μπορούμε να εργαστούμε σε διαφορετικά αρχεία ταυτόχρονα μέσω του Git και να αναπτύξουμε μια ταχύτητα συνεργασίας που είναι αδύνατη κατά την αποστολή αρχείων .pptx μέσω ταχυδρομείου.
Δημιουργία σελίδας HTML με διαφάνειες
Οι πηγές απλού κειμένου είναι εξαιρετικές, αλλά πώς τις συγκεντρώνετε στην ίδια την παρουσίαση;
Το AsciiDoctor είναι ένα έργο γραμμένο σε Ruby και υπάρχουν διάφοροι τρόποι για να το εκτελέσετε. Αρχικά, μπορείτε να εγκαταστήσετε τη γλώσσα Ruby και να εκτελέσετε απευθείας το asciidoctor, το οποίο είναι ίσως το πιο κοντινό πράγμα στους προγραμματιστές Ruby.
Εάν δεν θέλετε να μπλέξετε με την εγκατάσταση του Ruby, μπορείτε να χρησιμοποιήσετε την εικόνα docker , στο οποίο, κατά την εκκίνηση, μπορείτε να συνδέσετε το φάκελο με τις πηγές του έργου μέσω VOLUME και να λάβετε το αποτέλεσμα σε μια δεδομένη θέση.
Η επιλογή που επέλεξα μπορεί να φαίνεται κάπως απροσδόκητη, αλλά είναι η πιο βολική για μένα ως προγραμματιστή Java. Δεν απαιτεί εγκατάσταση Ruby ή docker, αλλά σας επιτρέπει να δημιουργήσετε διαφάνειες χρησιμοποιώντας ένα σενάριο Maven.
Το θέμα είναι ότι το έργο - Η εφαρμογή Java της γλώσσας Ruby είναι τόσο καλή που σας επιτρέπει να εκτελέσετε σχεδόν οτιδήποτε έχει δημιουργηθεί για τη Ruby σε μια μηχανή Java και η εκτέλεση του AsciiDoctor είναι μια από τις πιο κοινές χρήσεις του JRuby.
διαθεσιμότητα σας επιτρέπει να συλλέγετε τεκμηρίωση 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 Δύο κόλπα κατά την κυκλοφορία του decktape, τα οποία έπρεπε να καταλήξουμε μέσω δοκιμής και λάθους:
-
ανάλυση μέσω παραμέτρου
-sπρέπει να καθοριστεί με διπλό περιθώριο, διαφορετικά μπορεί να υπάρχουν προβλήματα με τα αποτελέσματα μετατροπής -
στη διεύθυνση URL της έκδοσης HTML της παρουσίασης πρέπει να περάσετε μια παράμετρο
?fragments=true, το οποίο θα δημιουργήσει μια ξεχωριστή σελίδα PDF για κάθε ενδιάμεση κατάσταση της διαφάνειάς σας (για παράδειγμα, πέντε σελίδες για πέντε κουκκίδες εάν εμφανίζονται η μία μετά την άλλη). Αυτό θα σας επιτρέψει να χρησιμοποιήσετε ένα τέτοιο PDF από μόνο του ως παρουσίαση κατά τη διάρκεια μιας αναφοράς.
Αυτόματη συναρμολόγηση και δημοσίευση στο διαδίκτυο
Είναι βολικό όταν οι διαφάνειες μεταγλωττίζονται αυτόματα όταν γίνονται αλλαγές στο σύστημα ελέγχου έκδοσης και ακόμη πιο βολικό όταν οι διαφάνειες που έχουν μεταγλωττιστεί αυτόματα δημοσιεύονται στο Διαδίκτυο για δημόσια χρήση. Οι διαφάνειες από το Διαδίκτυο μπορούν εύκολα να «παιχτούν» μπροστά σε κοινό από οποιοδήποτε μηχάνημα συνδεδεμένο στο Διαδίκτυο και έναν προβολέα.
Εφόσον χρησιμοποιούμε το GitHub στην εργασία μας, η φυσική επιλογή ενός συστήματος CI είναι και για τη φιλοξενία έτοιμων παρουσιάσεων - . Η ιδέα πίσω από το github.io είναι ότι οποιοδήποτε στατικό περιεχόμενο δημοσιεύεται σε ένα υποκατάστημα gh-pages του έργου σας στο GitHub, γίνεται διαθέσιμο στη διεύθυνση <ваше имя>.gihub.io/<ваш проект>.
Ολοκληρώστε το αρχείο διαμόρφωσης TravisCI, συμπεριλαμβανομένης της μεταγλώττισης της έκδοσης HTML της σελίδας με χρήση του Maven, της μετατροπής σε PDF χρησιμοποιώντας decktape και της αποστολής των αποτελεσμάτων σε ένα νήμα gh-pages για δημοσίευση στο github.io, μοιάζει .
Για να δημιουργήσετε ένα τέτοιο έργο στην πλευρά του TravisCI, πρέπει να διαμορφώσετε μεταβλητές περιβάλλοντος
GH_REF— τιμή όπως github.com/inponomarev/csa-hbGH_TOKEN— Διακριτικό πρόσβασης GitHub. Μπορείτε να το λάβετε από το GitHub στις ρυθμίσεις του προφίλ σας, Ρυθμίσεις προγραμματιστή -> Προσωπικά διακριτικά πρόσβασης. Εάν ανεβάσετε μια παρουσίαση σε ένα δημόσιο χώρο αποθήκευσης, τότε για αυτό το διακριτικό αρκεί να καθορίσετε το μοναδικό επίπεδο πρόσβασης «Πρόσβαση σε δημόσιους χώρους αποθήκευσης».GH_USER_EMAIL/GH_USER_NAME— ζεύγος ονόματος/email για λογαριασμό του οποίου θα πραγματοποιηθεί η ώθηση στο νήμαgh-pages.
Έτσι, κάθε δέσμευση του κώδικα παρουσίασης στο GitHub έχει ως αποτέλεσμα οι διαφάνειες να αναδημιουργούνται αυτόματα σε μορφές HTML και PDF και να ανεβαίνουν ξανά στο github.io. (Φυσικά, θα πρέπει να ανεβάσετε στο github.io μόνο εκείνες τις παρουσιάσεις που τελικά θέλετε να δημοσιοποιήσετε.)
Παραδείγματα έργων
Τέλος, εδώ είναι σύνδεσμοι σε μερικά παραδείγματα έργων παρουσίασης με προσαρμοσμένα σενάρια Maven και διαμόρφωση CI για το Travis-CI, τα οποία μπορούν να κλωνοποιηθούν και να χρησιμοποιηθούν κατά τη δημιουργία των δικών σας έργων παρουσίασης:
-
(η ομιλία μου για το JPoint 2019)
-
(η έκθεσή μου για το Heisenbug 2019)
Αντίο Powerpoint! Δεν νομίζω ότι θα σε χρειαστώ ποτέ για τεχνικές παρουσιάσεις :)
Πηγή: www.habr.com