<!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 &lt;iostream&gt;

int main(int argc, char *argv[]) {
  /* An annoying "Hello World" example */
  for (auto i = 0; i &lt; 0xFFFF; i++)
    cout &lt;&lt; "Hello, World!" &lt;&lt; endl;
  char c = '\n';
  unordered_map &lt;string, vector&lt;string&gt; &gt; 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 &lt;iostream&gt;

int main(int argc, char *argv[]) {
  /* An annoying "Hello World" example */
  for (auto i = 0; i &lt; 0xFFFF; i++)
    cout &lt;&lt; "Hello, World!" &lt;&lt; endl;
  char c = '\n';
  unordered_map &lt;string, vector&lt;string&gt; &gt; 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>