William Daniau / wize

Blame view

doc/Wize_Presentation.html 12.1 KB
  <!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 = '
  ';
    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 = '
  ';
    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>