Cyflwyniad fel cod, neu Pam nad wyf yn defnyddio Powerpoint mwyach

Cyflwyniad fel cod, neu Pam nad wyf yn defnyddio Powerpoint mwyach

Rwy'n meddwl fy mod wedi rhoi dwsinau o gyflwyniadau i gydweithwyr, cleientiaid, a siarad cyhoeddus yn fy ngyrfa TG. Ers blynyddoedd lawer, mae Powerpoint wedi bod yn ddewis naturiol a dibynadwy i mi fel offeryn cynhyrchu sleidiau. Ond eleni mae'r sefyllfa wedi newid yn ansoddol. O fis Chwefror i fis Mai, cefais gyfle i siarad mewn pum cynhadledd, a bu’n rhaid paratoi’r sleidiau ar gyfer yr adroddiadau mewn amser byr, ond gyda safon uchel. Cododd y cwestiwn ynglŷn â dirprwyo’r rhan honno o’r gwaith ynglŷn â dyluniad gweledol y sleidiau i bobl eraill. Ceisiais weithio gyda dylunydd unwaith, gan anfon ffeiliau .pptx trwy'r post, ond trodd y gwaith yn anhrefn: doedd neb yn gwybod pa fersiwn o'r sleidiau oedd y “mwyaf newydd”, ac roedd y gosodiad yn “symud” oherwydd y gwahaniaeth yn Powerpoint fersiynau a ffontiau ar ein peiriannau. A phenderfynais roi cynnig ar rywbeth newydd. Rhoddais gynnig arno, ac ers hynny nid wyf wedi meddwl mynd yn ôl i Powerpoint.

Beth ydym ni eisiau

Tua blwyddyn a hanner yn ôl, rhoddodd ein cwmni'r gorau i ddefnyddio Word i greu dogfennaeth prosiect, ar ôl cael yr un problemau: er bod Word yn dda ar gyfer teipio dogfen fach, wrth i'r gyfrol gynyddu, mae anawsterau'n codi gyda chydweithio a chael ansawdd uchel a dylunio unedig. Syrthiodd ein dewis ni AsciiDoctor, ac nid ydym byth yn peidio â llawenhau yn y dewisiad hwn, ond pwnc ar gyfer erthygl ar wahân yw hwn. Tua'r un amser, fe wnaethom ddysgu effeithiolrwydd un o egwyddorion DevOps o "popeth fel cod", felly roedd y dewis o ofynion ar gyfer y dechnoleg newydd ar gyfer creu sleidiau cyflwyno yn eithaf amlwg:

  1. Rhaid i'r cyflwyniad fod yn ffeil testun plaen mewn iaith farcio.
  2. Mae ein sleidiau yn ymwneud â phrosiectau datblygu, felly dylai'r marcio ei gwneud hi'n hawdd ei fewnosod, heb droi at systemau allanol
    • darnau cod gydag aroleuo cystrawen,
    • diagramau syml ar ffurf siapiau geometrig wedi'u cysylltu â saethau,
    • Diagramau UML, siartiau llif a mwy.
  3. Rhaid storio drafft y cyflwyniad mewn system rheoli fersiynau.
  4. Dylid dilysu a chydosod sleidiau gorffenedig mewn system CI.

Heddiw, mae dau opsiwn sylfaenol ar gyfer creu sleidiau mewn ieithoedd marcio: pecyn Beamer ar gyfer LaTeX neu un o'r fframweithiau ar gyfer creu sleidiau gan ddefnyddio HTML/CSS (DatgeluJS, sylw, dec.js a llawer o rai eraill).

Er bod fy enaid yn gorwedd yn LaTeX, roedd fy meddwl yn dweud y dylai'r dewis o ateb na fyddwn i'r unig un yn ei ddefnyddio fod ar ochr datrysiad sy'n gyfarwydd i gylch ehangach o bobl. Nid yw pawb yn gwybod LaTeX, ac os nad yw eich arfer dyddiol yn gysylltiedig ag ysgrifennu erthyglau gwyddonol, yna mae'n annhebygol y bydd gennych amser i ymgolli ym myd enfawr, cywrain y system hon.

Fodd bynnag, nid yw meistrolaeth ar HTML/CSS yn sgìl eang yn union: rwyf, er enghraifft, ymhell o fod yn gwbl hyddysg ynddo. Yn ffodus, mae'r AsciiDoctor sydd eisoes yn gyfarwydd yn dod i'r adwy: trawsnewidydd asciidoctor-revealjs yn eich galluogi i greu sleidiau RevealJS gan ddefnyddio marcio AsciiDoctor. Ac mae'n hawdd ei ddysgu ac yn hygyrch i bawb!

Sut i godio sleidiau

Er mwyn deall hanfod sleidiau codio ar AsciiDoctor, y ffordd hawsaf yw rhoi enghreifftiau penodol. Mae'r rhain i gyd o sleidiau gwirioneddol a wneuthum ar gyfer fy nghyflwyniadau cynhadledd eleni.

Sleid gyda theitl a rhestr mewn eitemau yn agor un ar ôl y llall:

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

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

Canlyniad

Cyflwyniad fel cod, neu Pam nad wyf yn defnyddio Powerpoint mwyach

Darn pennyn a chod ffynhonnell gydag amlygu cystrawen:

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

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

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

Canlyniad

Cyflwyniad fel cod, neu Pam nad wyf yn defnyddio Powerpoint mwyach

Wrth baratoi ar gyfer sgwrs, mae demos cod yn cael eu hadolygu a'u gwella dro ar ôl tro, felly mae'r gallu i gopïo a gludo'r “cod crai” yn gyflym yn syth i mewn i sleid yn amhrisiadwy, gan sicrhau bod y demo yn gyfredol heb boeni am amlygu cystrawen.

Teitl, llun a thestun (mae gosodiad y sleid yn cael ei wneud mewn celloedd byrddau AsciiDoctor):

== Kafka Streams in Action

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

Canlyniad

Cyflwyniad fel cod, neu Pam nad wyf yn defnyddio Powerpoint mwyach

Weithiau nid oes angen teitl, ac i ddangos eich pwynt, dim ond delwedd sgrin lawn sydd ei angen arnoch:

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

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

Canlyniad

Cyflwyniad fel cod, neu Pam nad wyf yn defnyddio Powerpoint mwyach

Yn aml mae angen i syniad gael ei gefnogi gan ddiagram syml, ar ffurf “sgwariau wedi’u cysylltu gan saethau.” Yn ffodus, mae AsciiDoctor wedi'i integreiddio â'r system Graphviz — iaith sy'n eich galluogi i ddisgrifio diagramau graff yn seiliedig ar y disgrifiad o fertigau a'r cysylltiadau rhyngddynt. Mae Graphviz yn cymryd cromlin ddysgu, ond yn seiliedig ar yr enghreifftiau a ddarparwyd, mae'n eithaf hawdd ei wneud! Dyma sut mae'n edrych:

== Пишем “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;}
}
-----

Canlyniad

Cyflwyniad fel cod, neu Pam nad wyf yn defnyddio Powerpoint mwyach

Yn yr achos pan fo angen golygu'r capsiwn ar y ffigur, newid cyfeiriad y saeth, ac ati, gellir gwneud hyn yn uniongyrchol yn y cod cyflwyno, yn lle ail-lunio'r llun yn rhywle a'i ail-osod yn y sleid. Mae hyn yn cynyddu cyflymder gweithio ar sleidiau yn sylweddol.

Enghraifft fwy cymhleth:

== Невоспроизводимая сборка
[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;}
}
-----

Canlyniad

Cyflwyniad fel cod, neu Pam nad wyf yn defnyddio Powerpoint mwyach

Gyda llaw, mae'n gyfleus arbrofi gyda delweddau Graphviz a dadfygio ar y dudalen Graphviz ar-lein.

Yn olaf, os oes angen i chi fewnosod siart llif, diagram dosbarth neu ddiagram safonol arall mewn sleid, yna gall system arall sydd wedi'i hintegreiddio ag AsciiDoctor ddod i'r adwy, PlantUML. Ysgrifennodd fy nghydweithiwr Nikolai Potashnikov am alluoedd helaeth PlantUML post ar wahân.

Mae troi'r prosiect cyflwyno yn god sydd wedi'i storio ar system rheoli fersiwn yn ei gwneud hi'n bosibl trefnu gwaith ar y cyd ar y cyflwyniad, yn gyntaf oll, i wahanu'r tasgau o greu cynnwys a dyluniad. Disgrifir dyluniad sleidiau (ffontiau, cefndiroedd, mewnoliadau) yn RevealJS gan ddefnyddio CSS. Mae fy sgil personol gyda CSS yn cael ei gyfleu orau gan y gif hwn - ond nid yw'n frawychus pan mae yna bobl sy'n gweithio gyda CSS yn llawer mwy deheuig a chyflymach na mi. O ganlyniad, mae'n ymddangos y gallwn, gyda dyddiad cau cyflym ar gyfer cyflwyniad, weithio ar wahanol ffeiliau ar yr un pryd trwy Git a datblygu cyflymder cydweithredu sy'n amhosibl wrth anfon ffeiliau .pptx trwy'r post.

Adeiladu tudalen HTML gyda sleidiau

Mae ffynonellau testun plaen yn wych, ond sut ydych chi'n eu crynhoi yn y cyflwyniad ei hun?

Mae AsciiDoctor yn brosiect a ysgrifennwyd yn Ruby, ac mae sawl ffordd i'w redeg. Yn gyntaf, gallwch chi osod yr iaith Ruby a rhedeg asciidoctor yn uniongyrchol, sef y peth agosaf at ddatblygwyr Ruby yn ôl pob tebyg.

Os nad ydych chi eisiau llanast gyda gosod Ruby, gallwch ddefnyddio delwedd y docwr asciidoctor/docer-asciidoctor, y gallwch chi, pan gaiff ei lansio, gysylltu'r ffolder â ffynonellau'r prosiect trwy VOLUME a chael y canlyniad mewn lleoliad penodol.

Efallai y bydd yr opsiwn a ddewisais yn ymddangos braidd yn annisgwyl, ond dyma'r mwyaf cyfleus i mi fel datblygwr Java. Nid oes angen gosod Ruby na dociwr arno, ond mae'n caniatáu ichi gynhyrchu sleidiau gan ddefnyddio sgript Maven.

Y pwynt yw bod y prosiect JRuby - Mae gweithrediad Java o'r iaith Ruby mor dda fel ei fod yn caniatáu ichi redeg bron unrhyw beth a grëwyd ar gyfer Ruby mewn peiriant Java, a rhedeg AsciiDoctor yw un o'r defnyddiau mwyaf cyffredin o JRuby.

argaeledd asciidoctor-maven-plugin yn caniatáu ichi gasglu dogfennaeth AsciiDoctor sy'n rhan o brosiect Java (yr ydym yn ei ddefnyddio'n weithredol). Ar yr un pryd, mae AsciiDoctor a JRuby yn cael eu llwytho i lawr yn awtomatig gan Maven, ac mae AsciiDoctor yn rhedeg yn amgylchedd JRuby: nid oes angen gosod unrhyw beth ar y peiriant! (Ac eithrio pecyn graphviz, sydd ei angen os ydych am ddefnyddio graffeg GraphViz neu PlantUML.) Yn syml, rhowch eich ffeiliau .adoc mewn ffolder src/main/asciidoc/. Yma enghraifft o pomnikcasglu sleidiau gyda diagramau.

Trosi sleidiau i PDF

Er bod y fersiwn HTML o'r sleidiau yn eithaf hunangynhaliol, mae'n dal yn angenrheidiol cael fersiwn PDF o'r sleidiau. Yn gyntaf, mae'n digwydd, mewn rhai cynadleddau nad ydyn nhw'n rhoi cyfle i'r siaradwr gysylltu ei liniadur ei hun, bod angen sleidiau arnyn nhw “yn llym mewn fformat pptx neu pdf,” heb ddisgwyl eu bod hefyd mewn HTML. Yn ail, mae'n dda anfon fersiwn heb ei olygu o'ch sleidiau at y trefnwyr fel y'u dangoswyd yn yr adroddiad, ar ffurf PDF ar gyfer cyhoeddi'r ffeil yn deunyddiau'r gynhadledd.

Yn ffodus, mae cyfleustodau Node.js yn trin y dasg hon. dectape, wedi'i adeiladu ar y sail Pypedwr - systemau awtomeiddio ar gyfer rheoli'r porwr Chrome. Gallwch chi drosi cyflwyniad RevealJS i PDF gyda'r gorchymyn

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

Dau dric wrth lansio decktape, y bu'n rhaid i ni feddwl amdanynt trwy brofi a methu:

  • datrysiad trwy baramedr -s rhaid ei nodi gydag ymyl deublyg, fel arall efallai y bydd problemau gyda'r canlyniadau trosi

  • yn URL fersiwn HTML y cyflwyniad mae angen i chi basio paramedr ?fragments=true, a fydd yn creu tudalen PDF ar wahân ar gyfer pob cyflwr canolradd yn eich sleid (er enghraifft, pum tudalen ar gyfer pum pwynt bwled os cânt eu dangos un ar ôl y llall). Bydd hyn yn caniatáu ichi ddefnyddio PDF o'r fath ar ei ben ei hun fel cyflwyniad yn ystod adroddiad.

Cydosod a chyhoeddi awtomatig ar y we

Mae'n gyfleus pan fydd sleidiau'n cael eu llunio'n awtomatig pan wneir newidiadau i'r system rheoli fersiynau, a hyd yn oed yn fwy cyfleus pan fydd sleidiau a luniwyd yn awtomatig yn cael eu postio ar y Rhyngrwyd at ddefnydd y cyhoedd. Gellir “chwarae” sleidiau o'r Rhyngrwyd yn hawdd o flaen cynulleidfa o unrhyw beiriant sydd wedi'i gysylltu â'r Rhyngrwyd a thaflunydd.

Gan ein bod yn defnyddio GitHub yn ein gwaith, dewis naturiol system CI yw TravisCI, ac ar gyfer cynnal cyflwyniadau parod - github.io. Y syniad y tu ôl i github.io yw bod unrhyw gynnwys statig yn cael ei bostio i gangen gh-pages o'ch prosiect ar GitHub, ar gael yn <ваше имя>.gihub.io/<ваш проект>.

Cwblhewch ffeil ffurfweddu TravisCI, gan gynnwys llunio fersiwn HTML y dudalen gan ddefnyddio Maven, trosi i PDF gan ddefnyddio tâp dec, a llwytho'r canlyniadau i fyny i edefyn gh-pages i'w gyhoeddi ar github.io, yn edrych fel felly.

I adeiladu prosiect o'r fath ar ochr TravisCI, mae angen i chi ffurfweddu newidynnau amgylchedd

  • GH_REF — gwerth fel github.com/inponomarev/csa-hb
  • GH_TOKEN — Tocyn mynediad GitHub. Gallwch ei gael gan GitHub yn eich gosodiadau proffil, Gosodiadau Datblygwr -> Tocynnau Mynediad Personol. Os ydych chi'n uwchlwytho cyflwyniad i gadwrfa gyhoeddus, yna ar gyfer y tocyn hwn mae'n ddigon nodi'r unig lefel mynediad “Mynediad i gadwrfeydd cyhoeddus”.
  • GH_USER_EMAIL / GH_USER_NAME — enw/pâr e-bost y bydd y gwthio i'r edefyn yn cael ei wneud ar ei ran gh-pages.

Felly, mae pob ymrwymiad o'r cod cyflwyno ar GitHub yn arwain at ailadeiladu'r sleidiau'n awtomatig mewn fformatau HTML a PDF a'u hail-lwytho i github.io. (Wrth gwrs, dim ond y cyflwyniadau hynny rydych chi am eu gwneud yn gyhoeddus yn y pen draw y dylech eu huwchlwytho i github.io.)

Enghreifftiau o brosiectau

Yn olaf, dyma ddolenni i gwpl o enghreifftiau o brosiectau cyflwyno gyda sgriptiau Maven wedi'u teilwra a chyfluniad CI ar gyfer Travis-CI, y gellir eu clonio a'u defnyddio wrth greu eich prosiectau cyflwyno eich hun:

Hwyl fawr Powerpoint! Dwi ddim yn meddwl y bydda i byth angen chi ar gyfer cyflwyniadau technegol :)

Ffynhonnell: hab.com

Ychwanegu sylw