Tweet
Tweet

Slide 1

Slide 1 text

INSTANT DOCS PHP & SVG TEMPLATES

Slide 2

Slide 2 text

SINGLE PAGE DOCUMENTS Certificate Receipt Invoice

Slide 3

Slide 3 text

TOOLS FPDF ▸ Supports images, links, lines and page breaks, header and footer management, true type and type1 fonts and requires no extensions ▸ Line by line drawing with blind positioning ▸ API is complex and dated ▸ You have to mind the page format, margins and measures ▸ Really slow template design ▸ Really slow rendering of complex designs

Slide 4

Slide 4 text

TOOLS FPDF+FPDI ▸ Supports images, links, lines and page breaks, header and footer management, True Type and Type1 fonts and requires no extensions ▸ Fast templating using existing PDFs ▸ API is complex and dated ▸ You still have to mind the page format, margins and measures

Slide 5

Slide 5 text

TOOLS WKHTMLTOPDF ▸ Supports images and links ▸ No line control, no header or footer management ▸ You may user any web font ▸ HTML+CSS ▸ Inconsistent media metrics (screen vs. paper) ▸ Paper size, margins and page breaks are on you

Slide 6

Slide 6 text

TOOLS SVG ▸ Vectors in a XML fi le ▸ Tons of desktop publishing tools ▸ Page attributes are managed by your publishing tool ▸ Supports bitmap images (base64 encoded) ▸ Supports multiple: fonts, encodings, languages and alphabets (including bi-di fonts) ▸ Dazzling light and fast ▸ No multipage support

Slide 7

Slide 7 text

EXAMPLE SIMPLE CIRCLE

Slide 8

Slide 8 text

EXAMPLE SIMPLE CIRCLE

Slide 9

Slide 9 text

EXAMPLE SIMPLE CIRCLE

Slide 10

Slide 10 text

EXAMPLE SIMPLE PATH

Slide 11

Slide 11 text

EXAMPLE COMPLEX PATH

Slide 12

Slide 12 text

HOW IS THAT GOING TO HELP ME WITH MY REALLY SPLENDID TEMPLATE? YOU (PROBABLY) TEXTO

Slide 13

Slide 13 text

{{ NAME }} PLACEHOLDERS

Slide 14

Slide 14 text

PIECE OF CAKE SIMPLE PARSER 1

Slide 15

Slide 15 text

PIECE OF CAKE MULTIPLE VARS 1 'Satoru Gojo', 5 '{{noOneCares}}' => 'Yuji Itadori' 6 ); 7 8 $template = file_get_contents('template.svg'); 9 10 foreach ($varset as $key => $value) { 11 $template = str_replace($key, $value, $template); 12 } 13 14 file_put_contents('doc.svg', $template);

Slide 16

Slide 16 text

WHAT ELSE? ASTONISHING GRAPHS ▸ Dynamically Generated ▸ Pixel Perfect Design ▸ Image Effects ▸ Fonts of Choice ▸ Mixed Bitmaps

Slide 17

Slide 17 text

WHAT ELSE? PARTIALS ▸ Design once ▸ In fi nite partial fi les ▸ Run-time inclusion ▸ Add as many as needed ▸ Con fi gure each object individually ▸ Change colors as needed ▸ Stretch, Resize & Skew

Slide 18

Slide 18 text

WHAT ELSE? PARTIALS ▸ Design once ▸ In fi nite partial fi les ▸ Run-time inclusion ▸ Add as many as needed ▸ Con fi gure each object individually ▸ Change colors as needed ▸ Stretch, Resize & Skew

Slide 19

Slide 19 text

WHAT ELSE? PARTIALS ▸ Design once ▸ In fi nite partial fi les ▸ Run-time inclusion ▸ Add as many as needed ▸ Con fi gure each object individually ▸ Change colors as needed ▸ Stretch, Resize & Skew COMIC CORN PARTIAL

Slide 20

Slide 20 text

PDF PARSING INTO

Slide 21

Slide 21 text

PARSING INTO PDF LIBRSVG $ sudo apt install librsvg2-bin $ rsvg-convert -f pdf -o doc.pdf doc.svg

Slide 22

Slide 22 text

PARSING INTO PDF LIBRSVG 1 'Satoru Gojo', 5 '{{noOneCares}}' => 'Yuji Itadori' 6 ); 7 8 $template = file_get_contents('template.svg'); 9 10 foreach ($varset as $key => $value) { 11 $template = str_replace($key, $value, $template); 12 } 13 14 file_put_contents('doc.svg', $template); 15 `rsvg-convert -f pdf -o doc.pdf doc.svg`;

Slide 23

Slide 23 text

PARSING INTO PDF INKSCAPE $ sudo apt-get install inkscape $ inkscape doc.svg --export-pdf=doc.pdf

Slide 24

Slide 24 text

PARSING INTO PDF INKSCAPE 1 'Satoru Gojo', 5 '{{noOneCares}}' => 'Yuji Itadori' 6 ); 7 8 $template = file_get_contents('template.svg'); 9 10 foreach ($varset as $key => $value) { 11 $template = str_replace($key, $value, $template); 12 } 13 14 file_put_contents('doc.svg', $template); 15 `inkscape doc.svg --export-pdf=doc.pdf`;

Slide 25

Slide 25 text

PAGES DOCS WITH MULTIPLE

Slide 26

Slide 26 text

DOCS WITH MULTIPLE PAGES THE GLUE $ sudo apt-get install pdftk $ pdftk *.pdf cat output doc.pdf

Slide 27

Slide 27 text

PARSING INTO PDF PDFTK 1 $value) { 14 $template = str_replace($key, $value, $template); 15 } 16 17 file_put_contents('doc.svg', $template); 18 `inkscape doc.svg --export-pdf=doc_page_{$page}.pdf`; 19 $page++; 20 } 21 `pdftk doc_page_*.pdf cat output doc.pdf`

Slide 28

Slide 28 text

DOCS WITH MULTIPLE PAGES DON’T FORGET TO CLEAN UP $ rm doc_page_*.pdf $ rm doc.svg

Slide 29

Slide 29 text

COMPLEX LET’S GET A LITTLE MORE

Slide 30

Slide 30 text

LET’S GET A LITTLE MORE COMPLEX PARTIAL GRAPH

Slide 31

Slide 31 text

LET’S GET A LITTLE MORE COMPLEX PARTIAL GRAPH

Slide 32

Slide 32 text

LET’S GET A LITTLE MORE COMPLEX CREATE DASHBOARDS & REPORTS

Slide 33

Slide 33 text

GOT APPS? NOT EVERYTHING NEEDS PAPER

Slide 34

Slide 34 text

NOT EVERYTHING NEEDS PAPER. GOT APPS? CREATE COMPLEX DASHBOARDS AND APPS

Slide 35

Slide 35 text

speakerdeck.com/ramcoelho

Slide 36

Slide 36 text

THANK YOU! FOLLOW ME AROUND: @RAMCOELHO speakerdeck.com/ramcoelho

Slide 37

Slide 37 text

{{QUESTIONS}}? FOLLOW ME AROUND: @RAMCOELHO speakerdeck.com/ramcoelho