<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Wize Presentation</title> <!-- metadata --> <meta name="generator" content="Zim 0.72.0" /> <meta charset="utf-8"/> <meta name="version" content="S5 1.1" /> <meta name="presdate" content="" /> <meta name="author" content="" /> <meta name="company" content="" /> <!-- configuration parameters --> <meta name="defaultView" content="slideshow" /> <meta name="controlVis" content="hidden" /> <!-- style sheet links --> <link rel="shortcut icon" href="./Wize_Presentation_files/_resources/common-spec/favicon.ico" > <link rel="stylesheet" href="./Wize_Presentation_files/_resources/common-spec/zim-variables.css" > <link rel="stylesheet" href="./Wize_Presentation_files/_resources/common-spec/zim-pres-variables.css" > <link rel="stylesheet" href="./Wize_Presentation_files/_resources/ui/default/slides.css" type="text/css" media="projection" id="slideProj" /> <link rel="stylesheet" href="./Wize_Presentation_files/_resources/ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" /> <link rel="stylesheet" href="./Wize_Presentation_files/_resources/ui/default/print.css" type="text/css" media="print" id="slidePrint" /> <link rel="stylesheet" href="./Wize_Presentation_files/_resources/ui/default/opera.css" type="text/css" media="projection" id="operaFix" /> <link rel="stylesheet" href="./Wize_Presentation_files/_resources/common/zim-style.css" > <link rel="stylesheet" href="./Wize_Presentation_files/_resources/common/zim-table-style.css" > <link rel="stylesheet" href="./Wize_Presentation_files/_resources/common/zim-special.css" > <link rel="stylesheet" href="./Wize_Presentation_files/_resources/common/zim-hljs.css" > <link rel="stylesheet" href="./Wize_Presentation_files/_resources/common-spec/zim-pres-override.css" > <link rel="stylesheet" href="./Wize_Presentation_files/_resources/common/hljs/styles/sunburst.css" > <!-- hljs --> <script src="./Wize_Presentation_files/_resources/common/hljs/highlight.pack.js"></script> <script src="./Wize_Presentation_files/_resources/common/wizefunc.js"></script> <!-- S5 JS --> <script src="./Wize_Presentation_files/_resources/ui/default/slides.js" type="text/javascript"></script> <style type='text/css'> * { font-family: sans-serif } img { display: block; margin-left: auto; margin-right: auto; height: var(--main-pres-img-height); } tt { font-size: inherit; } td, th { font-size: var(--main-pres-table-font-size); } code { font-size: var(--main-pres-code-font-size); } body { background: var(--main-pres-background-color); background-image: url('./Wize_Presentation_files/_resources/common-spec/fond-pres.jpg'); background-repeat: var(--main-pres-background-repeat); background-size: var(--main-pres-background-size); } </style> </head> <body> <div class="layout"> <div id="controls"><!-- DO NOT EDIT --></div> <div id="currentSlide"><!-- DO NOT EDIT --></div> <div id="header"> <div id="logoDivId" style="position: absolute; right: 1em;"> <img id="logoImgId" src='./Wize_Presentation_files/_resources/common-spec/logo-pres.png' alt=' '> </div> </div> <div id="footer"> <h2 id="footinfo1"></h2> <h2 id="footinfo2"></h2> </div> </div> <div class="presentation"> <div class="slide"> <h1>Wize Presentation</h1> <p> Created Wednesday 16 October 2019 </p> <p> Quick presentation using <b>Wize_S5</b> export. </p> <p> <ul> <li>left-click or right arrow → next slide</li> <li>left arrow → previous slide</li> <li>mouse over bottom right → shows navigation</li> </ul> </p> <h4>#Wize from H4</h4> <h4>#William Daniau from H4</h4> </div> <div class="slide"> <h1>Slides</h1> <p> Every <b>H1</b> header will start a new slide. </p> <p> This export uses special <b>H4</b> and <b>H5</b> headers for in document configuration, these headers begins with the "#" character and are never directly displayed. We will refer these as <b>#H4</b> and <b>#H5</b> in the following </p> <p> The content of the first two <b>#H4</b> on the page, will be placed in the footer. The <b>#H5</b> headers will be interpreted as layout informations as demonstrated later. </p> <h4>Standard H4</h4> <h5>Standard H5</h5> <p> will be of course normally displayed! </p> </div> <div class="slide"> <h1>Features</h1> <p> The presentation will keep most of the current Wize theme, however the behaviour will be somewhat different. </p> <p> <ul> <li>Resizing the browser will try to keep almost everything with same proportions.</li> <li>no scrolling is possible</li> </ul> </p> </div> <div class="slide"> <h1>Customization</h1> <p> All customization is done into the common-theme directory. </p> <p> The specific <b>Wize_S5</b> customization is done with four files :<br> <ul> <li><tt>zim-pres-variables.css</tt></li> <li><tt>zim-pres-override.css</tt></li> <li>Optional file <tt>logo-pres.png </tt>will be used as the logo.</li> <li>Optional file <tt>fond-pres.jpg</tt> will be used as the background.</li> </ul> </p> </div> <div class="slide"> <h1>Tables</h1> <p> Here's a table example : </p> <table> <thead><tr> <th align="left">First Name</th> <th align="left">Name</th> <th align="left">email</th> <th align="left">Favorite color</th> </tr></thead> <tr> <td align="left">Nathalie</td> <td align="left">Charpentier</td> <td align="left"><a href="mailto:nathalie.charpentier@lasbas.com" title="nathalie.charpentier@lasbas.com" class="mailto">nathalie.charpentier@lasbas.com</a></td> <td align="left">Green</td> </tr> <tr> <td align="left">Marcel</td> <td align="left">Dupont</td> <td align="left"><a href="mailto:marcel.dupont@nothere.com" title="marcel.dupont@nothere.com" class="mailto">marcel.dupont@nothere.com</a></td> <td align="left">Blue</td> </tr> <tr> <td align="left">Joe</td> <td align="left">Smith</td> <td align="left"><a href="mailto:joe.smith@here.com" title="joe.smith@here.com" class="mailto">joe.smith@here.com</a></td> <td align="left">Orange</td> </tr> <tr> <td align="left">Electra</td> <td align="left">Cigales</td> <td align="left"><a href="mailto:electra.cigales@nowhere.com" title="electra.cigales@nowhere.com" class="mailto">electra.cigales@nowhere.com</a></td> <td align="left">Red</td> </tr> </table> <p> It uses the current theme colors.<br> The relative font-size used in tables can be defined in <tt>zim-pres-variables.css</tt> file. </p> </div> <div class="slide"> <h1>Pictures</h1> <p> By default, pictures will be centered and resized to an height of approximately 8 characters. This value can be modified into <tt>zim-pres-variables.css</tt> </p> <p> <img src="./Wize_Presentation_files/tournesol.jpeg"> </p> </div> <div class="slide"> <h1>Code</h1> <p> Code will be syntax highlighted but the portion of code that can be actually displayed is limited. </p> <div class="zim-object"> <pre><code class="cpp">#include <iostream> int main(int argc, char *argv[]) { /* An annoying "Hello World" example */ for (auto i = 0; i < 0xFFFF; i++) cout << "Hello, World!" << endl; char c = '\n'; unordered_map <string, vector<string> > m; m["key"] = "\\\\"; // this is an error return -2e3 + 12l; } </code></pre> </div> <p> The relative size of the used font for code can be defined in <tt>zim-pres-variables.css</tt> file. </p> </div> <div class="slide"> <h1>In doc customization 1</h1> <p> Having pictures, tables, lists and code all displayed centered the same way can be boring in a presentation, this is why there's the ability to somewhat customize these by using <b>#H5</b>. </p> <p> For example : </p> <h5>#left</h5> <h5>#height5em</h5> <p> <img src="./Wize_Presentation_files/tournesol.jpeg"> </p> <p> Adding two <b>#H5</b> with "<b>#left</b>" and "<b>#height5em</b>" after the text "For example :" just before the image, makes it floating left, which means that text will flow around it. And we also specified a height of 5 characters. </p> </div> <div class="slide"> <h1>In doc customization 2</h1> <p> This is a screnshot of how the previous appeared in <b>zim</b> </p> <h5>#left</h5> <h5>#height7em</h5> <p> <img src="./Wize_Presentation_files/in_doc_h5_custom_v3.png"><br> Every <b>#H5</b> header must contain only one instruction. </p> </div> <div class="slide"> <h1>In doc customization 3</h1> <h2>Available configuration tags</h2> <p> The following configuration tags are available : </p> <h5>#left</h5> <h5>#width40vw</h5> <p> <ul> <li>#left</li> <li>#right</li> <li>#widthXXUU</li> <li>#heightXXUU</li> <li>#fontsizeXX</li> </ul> </p> <p> These applied on <br> <ul> <li>images</li> <li>lists</li> <li>tables</li> <li>code</li> </ul> </p> </div> <div class="slide"> <h1>In doc customization 4</h1> <h2>#left and #right</h2> <p> These will respectively make the following object float left or right </p> <h2>#fontsizeXX</h2> <p> This tag will only be usefull with other objects than images, it will apply a XX% factor on the font-size. </p> </div> <div class="slide"> <h1>In doc customization 5</h1> <p> These tags use a unit. This unit better be a relative one such as em (character), vh (viewport height), vw (viewport width) </p> <h2>#heightXXUU</h2> <p> This tag will force the height of an object to value XX within unit UU. This tag is mainly intended to be used with images. </p> <h2>#widthXXUU</h2> <p> This tag will force the width of an object to value XX within unit UU. It also force height to auto. </p> </div> <div class="slide"> <h1>In doc customization 6</h1> <h2>Example 1</h2> <h5>#width50vw</h5> <h5>#right</h5> <h5>#fontsize90</h5> <table> <thead><tr> <th align="left">First Name</th> <th align="left">Name</th> <th align="left">email</th> <th align="left">Favorite color</th> </tr></thead> <tr> <td align="left">Nathalie</td> <td align="left">Charpentier</td> <td align="left"><a href="mailto:nathalie.charpentier@lasbas.com" title="nathalie.charpentier@lasbas.com" class="mailto">nathalie.charpentier@lasbas.com</a></td> <td align="left">Green</td> </tr> <tr> <td align="left">Marcel</td> <td align="left">Dupont</td> <td align="left"><a href="mailto:marcel.dupont@nothere.com" title="marcel.dupont@nothere.com" class="mailto">marcel.dupont@nothere.com</a></td> <td align="left">Blue</td> </tr> <tr> <td align="left">Joe</td> <td align="left">Smith</td> <td align="left"><a href="mailto:joe.smith@here.com" title="joe.smith@here.com" class="mailto">joe.smith@here.com</a></td> <td align="left">Orange</td> </tr> <tr> <td align="left">Electra</td> <td align="left">Cigales</td> <td align="left"><a href="mailto:electra.cigales@nowhere.com" title="electra.cigales@nowhere.com" class="mailto">electra.cigales@nowhere.com</a></td> <td align="left">Red</td> </tr> </table> <p> Here we used <b>#width50vw</b>, <b>#right</b> and <b>#fontsize90</b> before this table, which means, that we want it to float on the right and to have its width equal be 50% of the viewport width (even if it seems to be more due to margins). We also apply a 90% sizing on the font. </p> </div> <div class="slide"> <h1>In doc customization 7</h1> <h2>Example 2</h2> <h5>#width70vw</h5> <h5>#fontsize80</h5> <div class="zim-object"> <pre><code class="cpp">#include <iostream> int main(int argc, char *argv[]) { /* An annoying "Hello World" example */ for (auto i = 0; i < 0xFFFF; i++) cout << "Hello, World!" << endl; char c = '\n'; unordered_map <string, vector<string> > m; m["key"] = "\\\\"; // this is an error return -2e3 + 12l; } </code></pre> </div> <p> Here we used <b>#width70vw</b> and <b>#fontsize80</b> before this block code, sizing it to 70% of viewport width. </p> </div> </div> <script src="./Wize_Presentation_files/_resources/common/go-hljs.js"></script> <script> tagToInfo(true); tagToStyle(); </script> </body> </html>