Difference between revisions of "Technology Trends/User Guide"

From wiki
Jump to navigation Jump to search
 
(24 intermediate revisions by one other user not shown)
Line 23: Line 23:
 
         </th>
 
         </th>
 
       </tr>
 
       </tr>
−
      <tr><td colspan="2" class="logo">[[File:Technology_Trends_-_User_Guide.png|200px]]</td></tr>
 
 
       <tr>
 
       <tr>
 
         <th>Status</th>
 
         <th>Status</th>
Line 39: Line 38:
 
         <th>Official publication</th>
 
         <th>Official publication</th>
 
         <td>[[Media:EN_-_Technology_Trends_-_User_Guide.pdf|User Guide.pdf]]</td>
 
         <td>[[Media:EN_-_Technology_Trends_-_User_Guide.pdf|User Guide.pdf]]</td>
 +
      </tr>
 +
      <tr>
 +
        <th>Template</th>
 +
        <td>[[Media:EN_-_Technology_Trends_-_Template.zip|Template.zip]]</td>
 
       </tr>
 
       </tr>
 
       <tr><td colspan="2" class="disclaimer"><table><tr>
 
       <tr><td colspan="2" class="disclaimer"><table><tr>
Line 47: Line 50:
 
   </div>
 
   </div>
  
−
   <br><p>This <b>User Guide</b> provides the instruction necessary to upload a new technology trend briefing paper. Most of the code is written in HTML using the CSS style. The goal of this page is to provide a step by step guide on how to create a page. [http://hilite.me/ html styler]</p>
+
   <br><p>This <b>User Guide</b> provides the instruction necessary to upload a new technology trend briefing paper. Most of the code is written in HTML using the CSS style. The goal of this page is to provide a step by step guide on how to create a page.</p>
  
 
   <div class="mw-collapsible-toggle btn" style="float: left; display: block;">
 
   <div class="mw-collapsible-toggle btn" style="float: left; display: block;">
Line 57: Line 60:
 
   <h3>Getting a GCcollab account</h3>
 
   <h3>Getting a GCcollab account</h3>
  
−
   <p>Before starting to code, you will need an account on [https://gccollab.ca/ GCcollab] in order to create and edit existing GCwiki source code. If you have an Governmenet of Canada email account the process should be simple. If not, a public servant with an existing account can invite you using the invite button located at the top of the dashboard.</p>
+
   <p>Before starting to code, you will need an account on [https://gccollab.ca/ GCcollab] in order to create and edit existing GCwiki source code. If you have a Government of Canada email account the process should be simple. If not, a public servant with an existing account can invite using the invite button located at the top of the GCcollab dashboard.</p>
  
 
   <h3>Installing a Code Editor</h3>
 
   <h3>Installing a Code Editor</h3>
  
−
   <p>Most of the code written on the technology trend page is done in HTML and CSS since they were found to be the easiest and offer versatily when it comes to styling. Therefore, it is highly recommended that you use a Code Editor for the publishing process. They are not obligatory for the purpose of publishing technology trend. However, they simplify and accelerate the process. Below are three of the most popular environment and should be sufficient for the process. These platforms offer important tools and features such as syntax highlighting, file explorers, console, etc. Since Visual Studio Code is currently the most popular choice, examples in this user guide will use this editor, however the process is similar with others.</p>
+
   <p>Most of the code written on the technology trend page is done in HTML and CSS since they were found to be the easiest and offer a lot of versatility when it comes to styling. Therefore, it is highly recommended that you use a Code Editor for publishing the technology briefs. They are not obligatory, but they will simplify and accelerate the process. Below are three of the most popular environments and they should be sufficient. These platforms offer important tools and features such as syntax highlighting, file explorers, console, etc. Since Visual Studio Code is currently the most popular choice, examples in this user guide will use this editor, however the process is similar with others.</p>
  
 
   <ul>
 
   <ul>
 
     <li><b>[https://code.visualstudio.com/ Visual Studio Code] : </b>A completed editor where all the tools are available after installation.</li>
 
     <li><b>[https://code.visualstudio.com/ Visual Studio Code] : </b>A completed editor where all the tools are available after installation.</li>
−
     <li><b>[https://atom.io/ Atom] : </b>A simple and lightweight editor where most features are avaiable as packages and can be installed throught the settings.</li>
+
     <li><b>[https://atom.io/ Atom] : </b>A simple and lightweight editor where most features are available as packages and can be installed through the settings.</li>
−
     <li><b>[https://www.sublimetext.com/ Sublime Text] : </b>A classic editor offering the barebones functionnality.</li>
+
     <li><b>[https://www.sublimetext.com/ Sublime Text] : </b>A classic editor offering some basics functionalities.</li>
 
   </ul>
 
   </ul>
  
 
   <h3>Initializing the Code Editor</h3>
 
   <h3>Initializing the Code Editor</h3>
  
−
   <p>After installing the editor, follow these following steps to start creating your first file. For this example, we will be using Visual Studio Code but the process is similar on other platforms.</p>
+
   <p>After installing the editor, follow these steps to start creating your first file. For this example, we will be using Visual Studio Code but the process is similar on other platforms.</p>
  
 
   <ul>
 
   <ul>
−
     <li><b>Creating a Workspace folder</b> : A workspace is a project folder located on your local computer that contains all of the project code. Locate a suitable directory on your computer a create an empty folder with an appropriate name (such as "GCwiki").</li>
+
     <li><b>Creating a Workspace folder</b> : A workspace is a project folder located on your local computer that contains all of the project code. Locate a suitable directory on your computer and create an empty folder with an appropriate name (such as "GCwiki").</li>
−
     <li><b>Adding the folder to the Editor's workspace</b> : On Visual Studio, open the file explorer located on the left or by pressing Ctrl+Shift+E. Right click on the Workspace portion and click "Add Folder to Workspace". Locate and select the previously created folder as your new workspace.</li>
+
     <li><b>Adding the folder to the Editor's workspace</b> : In Visual Studio, open the file explorer located on the left or by pressing Ctrl+Shift+E. Right click on the Workspace portion and click "Add Folder to Workspace". Locate and select the previously created folder as your new workspace.</li>
−
     <li><b>Creating a new file</b> : Right click on the project folder "GCwiki" and select new file. Enter an appropriate filename with an ending of ".html" such as "EN - Example.html". Use this newly created file to write all the code for the technology brief.</li>
+
     <li><b>Creating a new file</b> : Right click on the project folder "GCwiki" and select “new file”. Enter an appropriate filename with an ending of ".html" such as "EN - Example.html". Use this newly created file to write all the code for the technology brief.</li>
 
     <li><b>Adding the template's code</b> : Navigate to the [https://wiki.gccollab.ca/Technology_Trends template] page. On the upper navigation bar, select "view source" or, if you are logged in, "edit source". From there, copy and paste the [https://wiki.gccollab.ca/Technology_Trends template]'s code to your file. This template offers all the technology brief empty code.</li>
 
     <li><b>Adding the template's code</b> : Navigate to the [https://wiki.gccollab.ca/Technology_Trends template] page. On the upper navigation bar, select "view source" or, if you are logged in, "edit source". From there, copy and paste the [https://wiki.gccollab.ca/Technology_Trends template]'s code to your file. This template offers all the technology brief empty code.</li>
 
     <li><b>Adjusting the template's code</b> : Before starting to publish the technology brief content, you need to adjust the template's information. All comments in the brackets "<span style="color: #008000">&lt;!-- comment --&gt;</span>" need to be replace by the corresponding information. Don't forget to use the underscore (_) when using links and files</li>
 
     <li><b>Adjusting the template's code</b> : Before starting to publish the technology brief content, you need to adjust the template's information. All comments in the brackets "<span style="color: #008000">&lt;!-- comment --&gt;</span>" need to be replace by the corresponding information. Don't forget to use the underscore (_) when using links and files</li>
Line 83: Line 86:
 
   <h3>Publishing on GCwiki</h3>
 
   <h3>Publishing on GCwiki</h3>
  
−
   <p>During the technology trend publishing process, it is important to view how to code is being </p>
+
   <p>Before publishing a technology trend paper, it is important to know how the page will look like. While writing the code, select “Show preview” to make sure the generated page is being properly displayed with the right information. </p>
−
 
 
−
  <ul>
 
−
    <li><b>Creating a new page</b> : To create a new page on GCwiki, you simply have to enter the corresponding name in the URL bar on top of your browser. For example : the link for the this user guide is "https://wiki.gccollab.ca/Technology_Trends/User_Guide". The platform will offer you the option the create the corresponding page. Warning! Once a page has been created, it cannot be deleted so enter a valid name that follows the standards. For english page, name's starts with "Technology_Trends/" followed by the technology name using underscores rather than space. For french page, use "Tendances_Technologiques/" followed by the same structure.</li>
 
−
    <li><b>Adding the code</b> : Navigate to the "Edit Source" tab on top of the page to publish your code. Copy and paste the corresponding code from Visual Studio Code to GCwiki. Pres "Save changes" to publish or "Show preview" to view the resulting code.</li>
 
−
  </ul>
 
−
 
 
−
  <h3>GCwiki Standards and Norms</h3>
 
  
 
   <ul>
 
   <ul>
−
     <li><b></b></li>
+
     <li><b>Creating a new page</b> : To create a new page on GCwiki, enter the corresponding name in the URL bar on top of your browser. For example: the link for this user guide is "https://wiki.gccollab.ca/Technology_Trends/User_Guide". The platform will offer you the option to create the corresponding page. Warning! Once a page has been created, it cannot be deleted, so enter a valid name that follows the standards. For English page, name starts with "Technology_Trends/" followed by the technology name using underscores rather than space. For French page, use "Tendances_Technologiques/" followed by the same structure.</li>
 +
    <li><b>Adding the code</b> : Navigate to the "Edit Source" tab on top of the page to publish your code. Copy and paste the corresponding code from Visual Studio Code to GCwiki. Press "Save changes" to publish or "Show preview" to view the resulting code.</li>
 
   </ul>
 
   </ul>
  
 
   <h3>Visual Studio Code : Settings and Shortcuts</h3>
 
   <h3>Visual Studio Code : Settings and Shortcuts</h3>
  
−
   <p>Here are some settings configuration</p>
+
   <p>After installing Visual Studio Code, there are some parameters you might want to change and shortcuts you might want to know.</p>
  
 
   <ul>
 
   <ul>
−
     <li><b>Autocomplete</b> : </li>
+
     <li><b>Auto-completion</b> : VS code has an autocomplete feature by default where if you start writing the tag and then press "tab", it will create the starting and closing tag. Ex: div.orange -> <span style="color: #007700">&lt;div</span> <span style="color: #0000CC">class=</span><span style="background-color: #fff0f0">&quot;orange&quot;</span><span style="color: #007700">&gt;&lt;/div&gt;</span></li>
 +
    <li><b>Zoom</b> : To change the zoom level of the interface, press Ctrl+Shift+P to open the command bar and search for "Preferences: open settings (JSON)". In that file, change and save the "window.zoomLevel" to a suitable value.</li>
 +
    <li><b>autoClosingTags</b> : By default, VS code will recognise and try to close tags. However, this feature may not be suitable. To disable it, go to the same settings.json file as before and set the value to "false".</li>
 
   </ul>
 
   </ul>
−
 
+
    
−
   <p>Here are some shortcuts to accelerate your process.</p>
 
−
 
 
−
  <ul>
 
−
    <li><b>Autocomplete</b> : </li>
 
−
  </ul>
 
−
 
 
 
   <h2>Basics of HTML and CSS</h2>
 
   <h2>Basics of HTML and CSS</h2>
  
−
   <p>This section introduces the fundamentals of HTML and CSS.</p>
+
   <p>This section introduces the fundamentals of HTML and CSS. HTML is markup language, meaning that it only describes the structure of a Web page and how the browser should display the content. HTML elements are represented by tags which usually consists of a start tag and an end tag with the content inserted in between. These tags affects the content is specific ways. Here are some basic examples:</p>
−
 
 
−
  <p>HTML is markup language meaning that it only describes the structure of a Web page and how the browser should display the content. HTML elements are represented by tags which usually consists of a <b>start</b> tag and an <b>end</b> tag with the content inserted in between. These tags affects the content is specific ways. Here are some basic examples : </p>
 
  
 
   <table class="wikitable markupTable">
 
   <table class="wikitable markupTable">
Line 151: Line 142:
 
   </table>
 
   </table>
  
−
   <p>HTML tags can have attributes that provide additional information about that element. They are always specified in the <b>start tag</b>. These attributes can change the behavior of the HTML element such as the <b>style</b> attribute used to specify the styling of an element. The more common attributes are the <b>id</b> used to define unique element and the <b>class</b> used to define a elements sharing the same property. Once an HTML element has a class or an id, its style or behavior can be changed using CSS by adressing the corresponding name. Here are some examples : </p>
+
   <p>HTML tags can have attributes that provide additional information about that element. They are always specified in the <b>start tag</b> tag. These attributes can change the behavior of the HTML element such as the style attribute used to specify the styling of an element. The more common attributes are the <b>id</b> used to define unique element and the <b>class</b> used to define elements sharing the same property. Once an HTML element has a class or an id, its style or behavior can be changed using CSS by addressing the corresponding name. Here are some examples:</p>
  
 
   <table class="wikitable markupTable">
 
   <table class="wikitable markupTable">
Line 175: Line 166:
 
     </tr>
 
     </tr>
 
   </table>
 
   </table>
−
 
−
  <p>Most of the publishing work is done in HTML using classes to modify the style and the behavior of specific content. Editing the CSS shouldn't be necessary </p>
 
  
 
   <h2>Technology Trend Content Publishing</h2>
 
   <h2>Technology Trend Content Publishing</h2>
  
−
   <p>After the Code Editor has been installed and the template has been copy-pasted into the new technology brief file, you are ready to start publishing. Each brief is different so use the information provided below accordingly.</p>
+
   <p>Most of the publishing work is done in HTML using classes to modify the style and the behavior of specific content. Editing the CSS shouldn't be necessary. After the Code Editor has been installed and the template has been copy-pasted into the new technology brief file, you are ready to start publishing. Each brief is different, so use the instructions provided below accordingly.</p>
  
 
   <h3>Information</h3>
 
   <h3>Information</h3>
  
−
   <p>The first step is to change the template's information accordingly. Most of these changes affects the right-sided table containing the brief's information. These modifications are commented such as <span style="color: #008000">&lt;!-- comment --&gt;</span> to make it easier to locate and make the require changes. Be careful! The information follows a standard syntax and format that must be respected for the sake of consistency. Only the part in green needs to be changed. There is no need to understand what it does</p>
+
   <p>The first step is to change the template's information accordingly. Most of these changes affect the right-sided table containing the brief's information. These modifications are commented such as <span style="color: #008000">&lt;!-- comment --&gt;</span> to make it easier to locate and make the require changes. Be careful! The information follows a standard syntax and format that must be respected for the sake of consistency. Only the part in green needs to be changed. There is no need to understand what the code does.</p>
  
 
   <table class="wikitable markupTable">
 
   <table class="wikitable markupTable">
Line 251: Line 240:
 
   <h3>Headers</h3>
 
   <h3>Headers</h3>
  
−
   <p>Headers indicate a section of the document. In the brief, headers starts at H2 and go up for sub-sections. Any headers will show up in the table of content located at the top of the page.</p>
+
   <p>Headers indicate a section of the document. In the brief, headers start at H2 and go up for sub-sections. Any headers will show up in the table of content located at the top of the page.</p>
  
 
   <table class="wikitable markupTable">
 
   <table class="wikitable markupTable">
Line 266: Line 255:
 
   <h3>Paragraph</h3>
 
   <h3>Paragraph</h3>
  
−
   <p>Most paragraph </p>
+
   <p>A paragraph tag, denoted by the letter “p”, is opened like all other HTML tags with an opening<nowiki> “<p>” tag and a closing “</p>”</nowiki>. In the brief, when an entire paragraph (as shown below) needs to be uploaded with no special rendering this can be done using the paragraph tag.</p>
  
 
   <table class="wikitable markupTable">
 
   <table class="wikitable markupTable">
Line 279: Line 268:
 
   </table>
 
   </table>
  
−
   <p>Collapsable paragraph</p>
+
   <p>In the brief, when an entire paragraph needs to be hidden/collapsible, this can be done by making the paragraph tag part of the class “highlighted mw-collapsible-content”. The CSS will render it as seen below.</p>
  
 
   <table class="wikitable markupTable">
 
   <table class="wikitable markupTable">
Line 299: Line 288:
 
   </table>
 
   </table>
  
−
   <p>Collapsable Line</p>
+
   <p>When only part of a paragraph needs to be hidden/collapsible the paragraph will need to be separated into several paragraph tags based on if they need to be hidden/collapsible or not. Parts that do not need to be hidden/collapsible will be part of the class “inline”. This allows the CSS to render the entire paragraph as one piece of text. Areas of text requiring still to be hidden/collapsible are made part of the class “highlighted inline mw-collapsible-content”. An example can be seen below.</p>
  
 
   <table class="wikitable markupTable">
 
   <table class="wikitable markupTable">
Line 319: Line 308:
 
   </table>
 
   </table>
  
−
   <p>Multiple collapsable paragraph</p>
+
   <p>Because the “inline” tag removes the paragraph separation, two subsequent paragraphs require the “inline-spacer” class in between to reset the separation and make the second paragraph on a new line. This is only a problem when two consecutive paragraphs are made inline and do require this “inline-spacer” class in between.</p>
  
 
   <table class="wikitable markupTable">
 
   <table class="wikitable markupTable">
Line 343: Line 332:
 
   <h3>List</h3>
 
   <h3>List</h3>
  
 +
  <p><nowiki>Lists can be created in two ways. These are unordered lists which are simply bulleted, and ordered lists which are numbered. Unordered lists like all HTML tags are denoted by an opening “<ul>” tag and a closing “</ul>” tag. In the same manner, ordered lists are opened with an opening “<ol>” tag and a closing “</ol>” tag. The items in the list will be placed within these tags. List items require being individually wrapped in a “<li>” opening tag and closing “</li>” tag. An example of this can be seen below.</nowiki></p>
 
   <table class="wikitable markupTable">
 
   <table class="wikitable markupTable">
 
     <tr>
 
     <tr>
Line 368: Line 358:
 
   </table>
 
   </table>
  
−
   <p>Collapsable List</p>
+
   <p>If elements in the list require being hidden/collapsible the entire list will need to be made as a list of lists. When doing this collapsible, items will be placed in a list that is part of the class “highlighted mw-collapsible-content”. An example of this can be seen below.</p>
  
 
   <table class="wikitable markupTable">
 
   <table class="wikitable markupTable">
Line 376: Line 366:
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
−
         <td class="markup half"><span style="color: #007700">&lt;ul&gt;</span><br/><span style="color: #007700">&nbsp;&lt;li&gt;</span>Element 1<span style="color: #007700">&lt;/li&gt;</span><br/><span style="color: #007700">&lt;/ul&gt;</span><br/><span style="color: #007700">&lt;ul</span> <span style="color: #0000CC">class=</span><span style="background-color: #fff0f0">&quot;highlighted mw-collapsible-content&quot;</span><span style="color: #007700">&gt;</span><br/><span style="color: #007700">&nbsp;&lt;li&gt;</span>Element 2<span style="color: #007700">&lt;/li&gt;</span><br/><span style="color: #007700">&lt;/ul&gt;</span></td>
+
         <td class="markup half"><span style="color: #007700">&lt;ul&gt;</span><br/><span style="color: #007700">&nbsp;&lt;li&gt;</span>Element 1<span style="color: #007700">&lt;/li&gt;</span><br/><span style="color: #007700">&lt;/ul&gt;</span><br/><span style="color: #007700">&lt;ul</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">&quot;highlighted mw-collapsible-content&quot;</span><span style="color: #007700">&gt;</span><br/><span style="color: #007700">&nbsp;&lt;li&gt;</span>Element 2<span style="color: #007700">&lt;/li&gt;</span><br/><span style="color: #007700">&lt;/ul&gt;</span></td>
 
         <td class="half">
 
         <td class="half">
 
           <div class="mw-collapsible" data-expandtext="Show Detailed View" data-collapsetext="Hide Detailed View">
 
           <div class="mw-collapsible" data-expandtext="Show Detailed View" data-collapsetext="Hide Detailed View">
Line 392: Line 382:
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
−
          <td class="markup half"><span style="color: #007700">&lt;ol&gt;</span><br/><span style="color: #007700">&nbsp;&lt;li&gt;</span>Element 1<span style="color: #007700">&lt;/li&gt;</span><br/><span style="color: #007700">&lt;/ol&gt;</span><br/><span style="color: #007700">&lt;ol</span> <span style="color: #0000CC">class=</span><span style="background-color: #fff0f0">&quot;highlighted mw-collapsible-content&quot;</span><span style="color: #0000CC">&nbsp;start=</span><span style="background-color: #fff0f0">&quot;2&quot;</span><span style="color: #007700">&gt;</span><br/><span style="color: #007700">&nbsp;&lt;li&gt;</span>Element 2<span style="color: #007700">&lt;/li&gt;</span><br/><span style="color: #007700">&lt;/ol&gt;</span></td>
+
        <td class="markup half"><span style="color: #007700">&lt;ol&gt;</span><br/><span style="color: #007700">&nbsp;&lt;li&gt;</span>Element 1<span style="color: #007700">&lt;/li&gt;</span><br/><span style="color: #007700">&lt;/ol&gt;</span><br/><span style="color: #007700">&lt;ol</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">&quot;highlighted mw-collapsible-content&quot;</span><span style="color: #0000CC">&nbsp;start=</span><span style="color: rgb(190, 70, 0)">&quot;2&quot;</span><span style="color: #007700">&gt;</span><br/><span style="color: #007700">&nbsp;&lt;li&gt;</span>Element 2<span style="color: #007700">&lt;/li&gt;</span><br/><span style="color: #007700">&lt;/ol&gt;</span></td>
−
          <td class="half">
+
        <td class="half">
−
            <div class="mw-collapsible" data-expandtext="Show Detailed View" data-collapsetext="Hide Detailed View">
+
          <div class="mw-collapsible" data-expandtext="Show Detailed View" data-collapsetext="Hide Detailed View">
−
              <div class="mw-collapsible-toggle btn" style="float: left; display: block;">
+
            <div class="mw-collapsible-toggle btn" style="float: left; display: block;">
−
                <div class="toggle mw-collapsible-toggle-collapsed" role="button" tabindex="0"><span class="mw-collapsible-text">Hide Detailed View</span></div>
+
              <div class="toggle mw-collapsible-toggle-collapsed" role="button" tabindex="0"><span class="mw-collapsible-text">Hide Detailed View</span></div>
−
              </div><br/><br/>
+
            </div><br/><br/>
−
              <ol>
+
            <ol>
−
                <li>Element 1</li>
+
              <li>Element 1</li>
−
              </ol>
+
            </ol>
−
              <ol class="highlighted mw-collapsible-content" start="2">
+
            <ol class="highlighted mw-collapsible-content" start="2">
−
                <li>Element 2</li>
+
              <li>Element 2</li>
−
              </ol>
+
            </ol>
−
            </div>
+
          </div>
−
          </td>
+
        </td>
−
        </tr>
+
      </tr>
 
     </table>
 
     </table>
  
 
   <h3>Tables</h3>
 
   <h3>Tables</h3>
  
−
   <h3>Links</h3>
+
   <p>To make a table, use the tag “table” just like before. The table’s rows are then specified one after the other using the tag “tr”. Each cell is coded with either “th” for a header or “td” for details. In the table tab, add the class “wikitable” to add the Wikipedia style to a table or the class “sortable” to make be able to sort the table.</p>
  
−
   <h3>References</h3>
+
   <table class="wikitable markupTable">
−
 
+
    <tr>
−
  <h3>Images</h3>
+
      <th>Markup</th>
−
 
+
      <th>Renders as</th>
−
  <h3>Documents</h3>
+
    </tr>
−
 
+
    <tr>
−
  <h3>Main Pages</h3>
+
      <td class="markup half"><span style="color: #007700">&lt;table</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">&quot;wikitable sortable&quot;</span><span style="color: #007700">&gt;</span><br/><span style="color: #007700">&nbsp;&lt;tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;th&gt;</span>Header 1<span style="color: #007700">&lt;/th&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;th&gt;</span>Header 2<span style="color: #007700">&lt;/th&gt;</span><br/><span style="color: #007700">&nbsp;&lt;/tr&gt;</span><br/><span style="color: #007700">&nbsp;&lt;tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td&gt;</span>Detail 1<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td&gt;</span>Detail 2<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&lt;/tr&gt;</span><br/><span style="color: #007700">&nbsp;&lt;tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td&gt;</span>Detail 3<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td&gt;</span>Detail 4<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&lt;/tr&gt;</span><br/><span style="color: #007700">&lt;/table&gt;</span>  
−
 
+
       </td>
−
 
+
       <td class="half">
−
 
+
         <table class="wikitable sortable" style="margin-left:auto; margin-right:auto;">
−
 
 
−
 
 
−
 
 
−
 
 
−
  <h2>Technology Trend Publishing</h2>
 
−
 
 
−
  <h2>Technology Brief</h2>
 
−
 
 
−
  <h2>Industry Use</h2>
 
−
 
 
−
  <h2>Canadian Government Use</h2>
 
−
 
 
−
  <h2>Implications for Government Agencies</h2>
 
−
 
 
−
  <h3>Shared Services Canada (SSC)</h3>
 
−
 
 
−
  <h4>Value Proposition</h4>
 
−
 
 
−
  <h4>Challenges</h4>
 
−
 
 
−
  <h4>Considerations</h4>
 
−
 
 
−
  <h2>References</h2>
 
−
 
 
−
  <p class="inline">Low-code</p><p class="highlighted inline mw-collapsible-content"> (Some industry analysts and vendors of low-code systems use very different terminology, for example: Gartner uses high-productivity application Platform-as-a-Service (hpaPaaS).)</p><p class="inline"> is built on the concept of higher abstraction levels, where the developer can directly express business processes and requirements without getting mired in coding details. For some apps developed in low-code, a small amount of simple code is typically still written by hand – especially for applications not following one of the vast number of built-in templates. (Those requiring absolutely no handwritten code are referred to as no-code apps.) This reduction in manual coding has some important effects:</p>
 
−
 
 
−
  <ul>
 
−
    <li>App development (including feature capture, testing/validation and deployment) proceeds much faster than usual – enabling agile development, and reducing cost and improving time-to-market. As a side effect, this also reduces the number of errors and requirements mismatches.</li>
 
−
    <li>Less coding (and less intricate coding) allows a broader range of people to engage in app development – no longer limiting this to highly skilled programmers (who are typically rare, talented, and expensive).</li>
 
−
    <li>Low-code originally catered to apps-from-scratch, but is now also able to integrate legacy or third party systems (e.g. ERPs and databases such as SAP, Oracle, DB2, SQL Server, etc.) to build complete apps even more quickly.</li>
 
−
  </ul>
 
−
 
 
−
  <p>Low-code is not without its challenges:</p>
 
−
 
 
−
  <ul>
 
−
    <li>Finding developers: despite the low technical barrier to usage, most low-code systems are proprietary and require at least a modest amount of system-specific training.</li>
 
−
    <li>Highly skilled traditional developers often view low-code with skepticism and defensiveness – partly due to the slow devaluation of the traditional skill set.</li>
 
−
    <li>Licensing costs are often opaque and somewhat higher than those of traditional development environments and tools (many of which are open-source).</li>
 
−
  </ul>
 
−
 
 
−
  <p>According to the March 2019 Forrester Wave report, the current leading low-code systems (out of a total of 13 evaluated in this latest report) are Microsoft PowerApps, OutSystems, and Mendix (now acquired by Siemens), with Kony and Salesforce following closely. Similar vendor rankings are also given by Gartner, Ovum, and IDC.</p>
 
−
 
 
−
  <h2>Technology Brief</h2>
 
−
 
 
−
  <p>Briefly, low-code is a development environment and runtime platform that allows for building apps of almost any kind (with the exception of deeply embedded or very high-performance apps) while only writing a very small amount of simple code. In many cases, absolutely no code is written – making them “no code apps.”</p>
 
−
 
 
−
  <p>To the low code developer (often someone more specialized in the application domain than in coding), the low-code tool appears like most integrated development environments (IDEs). Instead of a window in which to type code, the functionality of the application is built visually. That likely starts with drawing the windows of the application, and attaching actions (again, visually) to the various GUI elements such as buttons, drop-down menus, list boxes, etc. In general, many apps support a business process, which is then drawn diagrammatically in low-code. Each step in the business process may activate other windows or take some further action.</p>
 
−
 
 
−
  <p>Such actions can involve communicating with other applications (such as email), pulling in documents, consulting a database, or taking remote action. Creating an interaction with another application is usually a simple visual connection diagrammatically, and most low-code systems support APIs (which remain only visual in low-code) to a vast number of other vendors’ applications. Similarly, pulling in documents/files is done visually, along with any processing of such files – including sharing them remotely.</p>
 
−
 
 
−
  <p>One of the most significant wins in low-code is database integration: the developer drags and drops a database, which is usually then autodiscovered by the low-code environment, making the structure of the database visually obvious. The developer may then visually create database queries (in a form of visual SQL), and use those results for further processing or display in a window. Naturally, various operations across databases are also supported. The leading vendors of low-code support all of the major databases across many versions. In a limited number of cases, a very complex database query must be written by hand in SQL – though that process is coached by intelligent assistants within the tool, and is done visually.</p>
 
−
 
 
−
  <p>Most real-life app development involves interfacing to legacy systems – something also well enabled in low-code. Such legacy systems (e.g. SAP, some other ERP, or database) appear as connectors in a palette of supported systems, which can then be used visually, while the low-code system manages the actual API usage.</p>
 
−
 
 
−
  <p>All of the low-code systems have extensive palettes of additional components – in many cases written by the low-code vendor in other languages for performance reasons. Some of the pre-built components include:</p>
 
−
 
 
−
  <ul>
 
−
    <li>Location services using GPS on mobile devices.</li>
 
−
    <li>Cloud support for all of the major vendors, as well as private clouds.</li>
 
−
    <li>Cameras, including gesture and facial recognition, etc.</li>
 
−
    <li>Audio support, including sound generation and voice recognition/synthesis.</li>
 
−
    <li>Multilanguage support.</li>
 
−
    <li>Internet-of-Things (IoT) interfaces and complex event processing.</li>
 
−
    <li>Log file and audit trail support in applications requiring governance.</li>
 
−
    <li>Security primitives, such as encryption, signatures, and authentication.</li>
 
−
    <li>Machine learning and artificial intelligence engines.</li>
 
−
    <li>Visualizations for large-scale data.</li>
 
−
    <li>Back-end interfaces to big-data systems such as Hadoop.</li>
 
−
  </ul>
 
−
 
 
−
  <p>Low-code tools additionally have user communities contributing new components or wrappers for legacy systems, and proficient programmers (in other languages such as Java, C++, C#, etc.) can easily produce their own components as needed. The leading low-code vendors have extensive support for mobile and desktop apps, including keyboards, styluses, and touch-screens. Much of that support is encapsulated in a single project, meaning that a mobile version of an app can be co-developed with the desktop version.</p>
 
−
 
 
−
  <p>Low-code environments directly support version control through a variety of interfaces such as to Git, Mercurial, Subversion, etc. This allows not only for the safety of being able to roll back changes, but also for multi-developer projects.</p>
 
−
 
 
−
  <p>Following the assembly of the app, the low-code environment allows for immediately testing/debugging it without a long compile-build cycle. This directly supports agile development and co-refinement of requirements where domain experts/users can make adjustments to the app as early as possible. Such testing can be done in a staged testing platform with test databases, etc.</p>
 
−
 
 
−
  <p>Finally, deployment is usually a single-step process in its lifecycle  manager, where the low-code environment is aware of the deployment platform’s parameters and the app can be pushed directly into production and use. Should anything go wrong, rolling back to a previous version is usually equally easy.</p>
 
−
 
 
−
  <p>Under the hood, low-code is of course also making use of traditional programming languages and tools – though this is not usually visible to the developer. The visual programming is translated directly into C#, Java or similar (some platforms such as OutSystems support both), which is then compiled using the normal development tool-chain. The low-code environment tracks the minimal amount of code generation and recompiles, allowing for a very interactive development experience oriented towards experimentation and prototyping. The output C# or Java can also be used standalone in case of a move away from low-code, though the actual code is often not elegant enough for true understandability.</p>
 
−
 
 
−
  <h2>Industry Use</h2>
 
−
 
 
−
  <p class="inline">All of the major technical industry analysts (Forrester, Gartner, Ovum, and IDC) have reported on low-code for a number of years – following Forrester naming it “low-code” in 2014. Those reports have at times identified up to fifty providers of low-code environments over the past decade. Some of those providers have faded, while three have emerged as the leading providers of very broad low-code solutions</p><p class="highlighted inline mw-collapsible-content"> (A broad solution is one able to interface to many other types of components (both legacy or written in other programming languages), runs on several platforms, is able to produce apps of all types.)</p><p class="inline"> : Mendix (now a part of Siemens), Microsoft (with PowerApps), and OutSystems. The Forrester Wave from March 2019 is shown in Figure 1, while the 2018 Gartner Magic Quadrant is shown in Figure 2.
 
−
 
 
−
  <div class="container">
 
−
    <div class="row">
 
−
      <div class="col-sm-6">
 
−
        [[File:Technology_Trends_-_Low_Code_Application_Development_Forrester_Wave.png|center]]
 
−
 
 
−
        <p class="source">Figure 1 The Forrester Wave: Low-Code Development Platforms for AD&D Professionals, Q1 2019. Used without permission.</p>
 
−
       </div>
 
−
       <div class="col-sm-6">
 
−
         <table class="wikitable hypecycleTable">
 
 
           <tr>
 
           <tr>
−
             <th>English</th>
+
             <th>Header 1</th>
−
             <th>Français</th>
+
             <th>Header 2</th>
 
           </tr>
 
           </tr>
 
           <tr>
 
           <tr>
−
             <td>Challengers</td>
+
             <td>Detail 1</td>
−
             <td>Nouveaux fournisseurs</td>
+
             <td>Detail 2</td>
 
           </tr>
 
           </tr>
 
           <tr>
 
           <tr>
−
             <td>Contenders</td>
+
             <td>Detail 3</td>
−
             <td>Fournisseurs concurrents</td>
+
             <td>Detail 4</td>
 
           </tr>
 
           </tr>
−
          <tr>
+
        </table>  
−
            <td>Strong Performers</td>
+
      </td>
−
            <td>Fournisseurs performants</td>
+
    </tr>
−
          </tr>
+
  </table>
−
          <tr>
+
 
−
            <td>Leaders</td>
+
  <h3>Links, Images and Files</h3>
−
            <td>Chefs de file</td>
+
 
−
          </tr>
+
  <p><nowiki>Links, files, and images are all denoted in a similar fashion with the double square brackets and a vertical line separator as such “[[ | ]]”. For links the left side of the separator contains the URL of the link (if it is a wiki link the title of the page can be given). On the right side of the separator is the name the user wishes to be displayed. Similar to links, files contain the file name to be displayed on the right side of the separator. The left side contains file name that was uploaded to the database separated by underscores. The left side also contains the prefix “Media:EN_-_”. An image is denoted the same way. Except the right side of the separator contains the size of the image in pixels (eg. 40px). The left side contains the name of the image with the prefix “File:”. Examples of all three can be seen below.</nowiki><br/></p>
−
          <tr>
+
 
−
            <td>Stronger current offering</td>
+
  <p>Images and files need to be uploaded to the database by clicking the “Upload file” link on the left side of the page.</p>
−
            <td>Offres actuelles les plus intéressantes</td>
+
 
−
          </tr>
+
  <table class="wikitable markupTable">
−
          <tr>
+
    <tr>
−
            <td>Weaker current offering</td>
+
      <th class="half">Markup</th>
−
            <td>Offres actuelles les moins intéressantes</td>
+
      <th class="half">Renders as</th>
−
          </tr>
+
    </tr>
−
          <tr>
+
    <tr>
−
            <td>Weaker strategy</td>
+
        <td class="markup"><nowiki>[https://www.canada.ca/en.html Canada.ca]</nowiki></td>
−
            <td>Stratégie plus faible</td>
+
        <td style="text-align: center">[https://www.canada.ca/en.html Canada.ca]</td>
−
          </tr>
+
      </tr>
−
          <tr>
+
    <tr>
−
            <td>Stronger strategy</td>
+
      <td class="markup"><nowiki>[[Technology_Trends|Home Page]]</nowiki></td>
−
            <td>Stratégie plus solide</td>
+
      <td style="text-align: center">[[Technology_Trends|Home Page]]</td>
−
          </tr>
+
    </tr>
−
          <tr>
+
    <tr>
−
            <td>Market presence</td>
+
      <td class="markup"><nowiki>[[Media:EN_-_Technology_Trends_-_User_Guide.pdf|User Guide pdf]]</nowiki></td>
−
            <td>Présence sur le marché</td>
+
      <td style="text-align: center">[[Media:EN_-_Technology_Trends_-_User_Guide.pdf|User Guide pdf]]</td>
−
          </tr>
+
    </tr>
−
          <tr>
+
    <tr>
−
            <td>OutSystems</td>
+
      <td class="markup"><nowiki>[[File:Traffic_cone.png|40px]]</nowiki></td>
−
            <td>OutSystems</td>
+
      <td style="text-align: center">[[File:Traffic_cone.png|40px]]</td>
−
          </tr>
+
    </tr>
−
          <tr>
+
  </table>
−
            <td>Mendix</td>
+
 
−
            <td>Mendix</td>
+
  <h3>References</h3>
−
          </tr>
 
−
          <tr>
 
−
            <td>Kony</td>
 
−
            <td>Kony</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Microsoft</td>
 
−
            <td>Microsoft</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Salesforce</td>
 
−
            <td>Salesforce</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>ServiceNow</td>
 
−
            <td>ServiceNow</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>GeneXus</td>
 
−
            <td>GeneXus</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Progress Software</td>
 
−
            <td>Progress Software</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>WaveMaker</td>
 
−
            <td>WaveMaker</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>MatsSoft</td>
 
−
            <td>MatsSoft</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Thinkwise</td>
 
−
            <td>Thinkwise</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Skuid</td>
 
−
            <td>Skuid</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Clear Software</td>
 
−
            <td>Clear Software</td>
 
−
          </tr>
 
−
        </table>
 
−
      </div>
 
−
    </div>
 
−
  </div>
 
  
−
   <p>Among other requirements, the systems featured in the Forrester Wave were chosen because they each:
+
   <p><nowiki>References like other HTML tags are created with an opening <ref> tag and a closing </ref> tag. Within the reference tags the APA citation can be placed. After the citation a link can also be placed with the same format as previously discussed or simply with one square bracket pair like “[ ]”. Doing so, will cause the citation in the text to appear as a number, as seen in the example below.</nowiki></p>
  
−
   <ol>
+
   <table class="wikitable markupTable">
−
     <li>Offer a comprehensive declarative development approach: the level of abstraction matches that of the client, which is critical for expressing the requirements.</li>
+
    <tr>
−
    <li>Provide a low-cost-of-entry commercial model: they allow for free trials, and provide online training material.</li>
+
      <th class="half">Markup</th>
−
    <li>Support building many business use cases, from web and mobile apps to database, event processing, IoT, and business process apps.</li>
+
      <th class="half">Notation</th>
−
    <li>Primarily target large enterprises: revenue over a billion USD and geographically dispersed teams.</li>
+
    </tr>
−
   </ol>
+
    <tr>
 +
    </tr>
 +
     <tr>
 +
      <td class="markup"><span style="color: #007700">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span style="color: #007700">&lt;ref&gt;</span>Wikipedia. (2019, September 1). <nowiki>[https://en.wikipedia.org/wiki/Main_Page Wikipedia]</nowiki>. Retrieved from Wikipedia<span style="color: #007700">&lt;/ref&gt;&lt;/p&gt;</span></td>
 +
      <td>
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<sup><nowiki>[1]</nowiki></sup></p>
 +
        <p class="header2">References</p>
 +
        <ol>
 +
          <li>Wikipedia. (2019, September 1). [https://en.wikipedia.org/wiki/Main_Page Wikipedia]. Retrieved from Wikipedia</li>
 +
        </ol>
 +
      </td>
 +
    </tr>
 +
   </table>
  
−
   <p class="inline">Websites of the low-code tool leaders typically provide reference customers, and these include numerous prominent banks, insurance companies, airlines, government departments, and the US Army – though in most cases no details are given about the precise application domain. Most of the analysts’ reports, as well as self-reporting by OutSystems and Mendix, indicate that 88% of companies are adopting low-code, while 74% of those companies are integrating the business side into low-code development, thereby directly involving the clients who dictate the requirements.</p><p class="highlighted inline mw-collapsible-content"> ([https://www.mendix.com/why-developers-should-embrace-low-code/ Example])</p>
+
   <h3>Main Pages</h3>
  
−
   <div class="container">
+
   <p>Once a brief is completed, changes must be made to the main “Technology Trend” page. The first change is to the recent addition banner. A link must be made to your new trend. The second change needed to be made is in the bottom table listing all the trend. Since the new trend is now available, the relevant information needs to be updated and the name be made into a link to the trend page.</p>
−
    <div class="row">
 
−
      <div class="col-sm-6">
 
−
        [[File:Technology_Trends_-_Low_Code_Application_Development_Gartner_Magic_Quadrant.png|center]]
 
  
−
        <p class="source">Figure 2 : Magic Quadrant de Gartner – Plate-forme d’application d’entreprise comme service à haute productivité. Utilisé sans autorisation.</p>
+
  <table class="wikitable markupTable">
−
       </div>
+
    <tr>
−
       <div class="col-sm-6">
+
       <th class="half">Markup</th>
−
        <table class="wikitable hypecycleTable">
+
       <th class="half">Renders as</th>
−
          <tr>
+
    </tr>
−
            <th>English</th>
+
    <tr>
−
            <th>Français</th>
+
      <td class="markup"><span style="color: #007700">&lt;table&gt;</span><br/><span style="color: #007700">&nbsp;&lt;tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td&gt;</span><nowiki>[[File:Traffic_cone.png|40px]]</nowiki><span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">&quot;disclaimerText&quot;</span><span style="color: #007700">&gt;</span>Recent additions include <nowiki>[[Technology_Trends/Blockchain|Blockchain]], [[Technology_Trends/Drones|Drones]]</nowiki>.<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&lt;/tr&gt;</span><br/><span style="color: #007700">&lt;/table&gt;</span></td>
−
          </tr>
+
      <td>
−
          <tr>
+
        <table class="disclaimer" style="margin: auto;"><tr>
−
            <td>OutSystems</td>
+
           <td>[[File:Traffic_cone.png|40px]]</td>
−
            <td>OutSystems</td>
+
          <td class="disclaimerText">Recent additions include [[Technology_Trends/Blockchain|Blockchain]], [[Technology_Trends/Drones|Drones]].</td>
−
          </tr>
+
        </tr></table>
−
          <tr>
+
      </td>
−
            <td>Mendix</td>
+
    </tr>
−
            <td>Mendix</td>
+
    <tr>
−
          </tr>
+
      <td class="markup"><span style="color: #007700">&lt;table</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">&quot;wikitable sortable technology-table&quot;</span> <span style="color: #0000CC">style=</span><span style="color: rgb(190, 70, 0)">&quot;border: 0px solid;&quot;</span><span style="color: #007700">&gt;</span><br/><span style="color: #007700">&nbsp;&lt;tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;th</span> <span style="color: #0000CC">colspan=</span><span style="color: rgb(190, 70, 0)">&quot;3&quot;</span><span style="color: #007700">&gt;</span>Name<span style="color: #007700">&lt;/th&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;th&gt;</span>Status<span style="color: #007700">&lt;/th&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;th</span> <span style="color: #0000CC">style=</span><span style="color: rgb(190, 70, 0)">&quot;white-space: nowrap;&quot;</span><span style="color: #007700">&gt;</span>Release Date<span style="color: #007700">&lt;/th&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;th&gt;</span>Official Publications<span style="color: #007700">&lt;/th&gt;</span><br/><span style="color: #007700">&nbsp;&lt;/tr&gt;</span><br/><span style="color: #007700">&nbsp;&lt;tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td</span> <span style="color: #0000CC">style=</span><span style="color: rgb(190, 70, 0)">&quot;border-right: 0px solid; text-align:right;&quot;</span><span style="color: #007700">&gt;</span><nowiki>[[Technology_Trends/Blockchain|Blockchain]]</nowiki><span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td</span> <span style="color: #0000CC">style=</span><span style="color: rgb(190, 70, 0)">&quot;border-left: 0px solid; border-right: 0px solid;&quot;</span><span style="color: #007700">&gt;</span>-<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td</span> <span style="color: #0000CC">style=</span><span style="color: rgb(190, 70, 0)">&quot;border-left: 0px solid; text-align:left&quot;</span><span style="color: #007700">&gt;</span><nowiki>[[Tendances_Technologiques/Chaîne_de_Blocs|Chaîne de Blocs]]</nowiki><span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td&gt;</span>Published<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td&gt;</span>2019-05-23<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td&gt;</span><nowiki>[[Media:EN_-_Technology_Trends_-_Blockchain.pdf|EN]] - [[Media:FR_-_Tendances_Technologiques_-_Blockchain.pdf|FR]]</nowiki><span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&lt;/tr&gt;</span><br/><span style="color: #007700">&nbsp;&lt;tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td</span> <span style="color: #0000CC">style=</span><span style="color: rgb(190, 70, 0)">&quot;border-right: 0px solid; text-align:right;&quot;</span><span style="color: #007700">&gt;</span>3D XPoint (Optane)<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td</span> <span style="color: #0000CC">style=</span><span style="color: rgb(190, 70, 0)">&quot;border-left: 0px solid; border-right: 0px solid;&quot;</span><span style="color: #007700">&gt;</span>-<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td</span> <span style="color: #0000CC">style=</span><span style="color: rgb(190, 70, 0)">&quot;border-left: 0px solid; text-align:left&quot;</span><span style="color: #007700">&gt;</span>3D XPoint (Optane)<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td&gt;</span>Development<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td&gt;</span>FY 19-20 Q2<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;td&gt;&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&lt;/tr&gt;</span><br/><span style="color: #007700">&lt;/table&gt;</span>
−
           <tr>
+
      </td>
−
            <td>ServiceNow</td>
+
      <td>
−
            <td>ServiceNow</td>
+
        <table class="wikitable sortable technology-table" style="border: 0px solid;">
−
          </tr>
 
−
          <tr>
 
−
            <td>Microsoft</td>
 
−
            <td>Microsoft</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Kintone</td>
 
−
            <td>Kintone</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Caspio</td>
 
−
            <td>Caspio</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>AgilePoint</td>
 
−
            <td>AgilePoint</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>MatsSoft</td>
 
−
            <td>MatsSoft</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Bpm’online</td>
 
−
            <td>Bpm’online</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Quick Base</td>
 
−
            <td>Quick Base</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>TrackVia</td>
 
−
            <td>TrackVia</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Fujitsu</td>
 
−
            <td>Fujitsu</td>
 
−
          </tr>
 
 
           <tr>
 
           <tr>
−
             <td>OrangeScape</td>
+
             <th colspan="3">Name</th>
−
             <td>OrangeScape</td>
+
             <th>Status</th>
 +
            <th style="white-space: nowrap;">Release Date</th>
 +
            <th>Official Publications</th>
 
           </tr>
 
           </tr>
 
           <tr>
 
           <tr>
−
             <td>Zoho</td>
+
             <td style="border-right: 0px solid; text-align:right;">[[Technology_Trends/Blockchain|Blockchain]]</td>
−
             <td>Zoho</td>
+
            <td style="border-left: 0px solid; border-right: 0px solid;">-</td>
 +
            <td style="border-left: 0px solid; text-align:left">[[Tendances_Technologiques/Chaîne_de_Blocs|Chaîne de Blocs]]</td>
 +
            <td>Published</td>
 +
            <td>2019-05-23</td>
 +
             <td>[[Media:EN_-_Technology_Trends_-_Blockchain_-_v0.2.pdf|EN]] - [[Media:FR_-_Tendances_Technologiques_-_Blockchain_-_v0.2.pdf|FR]]</td>
 
           </tr>
 
           </tr>
 
           <tr>
 
           <tr>
−
             <td>Betty Blocks</td>
+
             <td style="border-right: 0px solid; text-align:right;">3D XPoint (Optane)</td>
−
             <td>Betty Blocks</td>
+
             <td style="border-left: 0px solid; border-right: 0px solid;">-</td>
−
          </tr>
+
             <td style="border-left: 0px solid; text-align:left">3D XPoint (Optane)</td>
−
          <tr>
+
             <td>Development</td>
−
            <td>Kony</td>
+
             <td>FY 19-20 Q2</td>
−
            <td>Kony</td>
+
             <td></td>
−
          </tr>
 
−
          <tr>
 
−
            <td>Appian</td>
 
−
            <td>Appian</td>
 
−
          </tr>
 
−
          <tr>
 
−
             <td>Oracle</td>
 
−
             <td>Oracle</td>
 
−
          </tr>
 
−
          <tr>
 
−
             <td>Pegasystems</td>
 
−
             <td>Pegasystems</td>
 
 
           </tr>
 
           </tr>
 
         </table>
 
         </table>
−
       </div>
+
       </td>
−
     </div>
+
     </tr>
−
   </div>
+
   </table>
  
−
   <h2>Canadian Government Use</h2>
+
   <h3>Hype cycle</h3>
  
−
   <p>Modern low-code can literally be used in all application areas except for deeply embedded systems and very high-performance computing, though even in those two areas, low-code can provide much of an app while interfacing to software components written in other programming languages.
+
   <p>To display a Hype cycle graphic with the translation table, Use this following code. This container will adjust the size of the graphic and place the table either side-by-side or below. This code is based on the bootstrap framework. Here is an example using Blockchain technology.</p>
  
−
   <p>Given this breadth, literally all IT application areas of the Canadian Government are candidates for low-code. For example:
+
   <table class="wikitable markupTable">
−
 
+
    <tr>
−
  <ul>
+
      <th class="half">Markup</th>
−
    <li>Apps consisting of a business process, including interfaces to document/content management, emails for reminders, etc.</li>
+
      <th class="half">Notation</th>
−
     <li>Data gathering and database apps that interface to large scale and distributed data storage – including managing identity and privacy.</li>
+
    </tr>
−
    <li>Communication and task management apps that allow for chats, emails, video conferencing, and calendar management.</li>
+
     <tr>
−
    <li>Data-science and visualization apps that potentially contain some machine learning or artificial intelligence to process and present large amounts of data.</li>
+
      <td class="markup"><span style="color: #007700">&lt;div</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">&quot;container&quot;</span><span style="color: #007700">&gt;</span><br/><span style="color: #007700">&nbsp;&lt;div</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">&quot;row&quot;</span><span style="color: #007700">&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;div</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">&quot;col-sm-8&quot;</span><span style="color: #007700">&gt;</span><nowiki>[[File:EN_Technology_Trends_-_Blockchain_Hype_Cycle_2018.png|center]]</nowiki><span style="color: #007700">&lt;/div&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;div</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">&quot;col-sm-4&quot;</span><span style="color: #007700">&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&lt;table</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">&quot;wikitable hypecycleTable&quot;</span><span style="color: #007700">&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;</span>English<span style="color: #007700">&lt;/th&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;</span>Français<span style="color: #007700">&lt;/th&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;</span>Figure 1. Hype Cycle for Blockchain Technologies, 2018<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;</span>Figure 1. Rapport Hype Cycle sur les technologies de la chaîne de blocs, 2018<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;</span>Expectations<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;</span>Attentes<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;</span>Time<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;</span>Temps<span style="color: #007700">&lt;/td&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&nbsp;&lt;/table&gt;</span><br/><span style="color: #007700">&nbsp;&nbsp;&lt;/div&gt;</span><br/><span style="color: #007700">&nbsp;&lt;/div&gt;</span><br/><span style="color: #007700">&lt;/div&gt;</span>
−
  </ul>
+
      </td>
−
 
+
      <td>
−
  <p>Analyst group IDG and OutSystems have specifically explored OutSystems for digital government, basing their evaluation on the goals shown in Figure 3, though the conclusions are valid for all low-code systems. In particular, low-code can simultaneously increase quality while decreasing service delivery costs.</p>
+
        <table>
−
 
 
−
  <div class="container">
 
−
    <div class="row">
 
−
      <div class="col-sm-6">
 
−
        [[File:Technology_Trends_-_Low_Code_Application_Development_Top_Goals.png|center]]
 
−
 
 
−
        <p class="source">Figure 3 Top Goals with Respect to the Digital Experience Provided for Citizens. Used without permission from: Improving Digital Experience for End Users in the Public Sector, IDG Research Services, December 2018.</p>
 
−
      </div>
 
−
      <div class="col-sm-6">
 
−
        <table class="wikitable hypecycleTable">
 
−
          <tr>
 
−
            <th>English</th>
 
−
            <th>Français</th>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Increase the quality of citizen user experience</td>
 
−
            <td>Accroître la qualité de l’expérience utilisateur du citoyen</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Lower service delivery costs</td>
 
−
            <td>Diminuer les coûts de la prestation des services</td>
 
−
          </tr>
 
−
          <tr>
 
−
            <td>Improve data security</td>
 
−
            <td>Améliorer la sécurité des données</td>
 
−
          </tr>
 
 
           <tr>
 
           <tr>
−
             <td>Provide better access to data and information</td>
+
             <td><b> • div :</b></th>
−
             <td>Offrir un meilleur accès aux données et à l’information</td>
+
            <td><i>(tag)</i></td>
 +
             <td>Division</td>
 
           </tr>
 
           </tr>
 
           <tr>
 
           <tr>
−
             <td>Increase speed of service delivery</td>
+
             <td><b> • container :</b></th>
−
             <td>Accroître la rapidité de la prestation des services</td>
+
            <td><i>(class)</i></td>
 +
             <td>Creates a container for a group of elements.</td>
 
           </tr>
 
           </tr>
 
           <tr>
 
           <tr>
−
             <td>Reduce staff time spent addressing citizen/student requests, questions, complaints</td>
+
             <td><b> • row :</b></th>
−
             <td>Réduire le temps consacré par le personnel à la résolution des demandes de renseignements, des questions et des plaintes des citoyens et des étudiants</td>
+
            <td><i>(class)</i></td>
 +
             <td>Creates an inline space inside the container.</td>
 
           </tr>
 
           </tr>
 
           <tr>
 
           <tr>
−
             <td>Increase usage or programs/generate revenue</td>
+
             <td><b> • col-sm-8 :</b></th>
−
             <td>Accroître l’utilisation des programmes et générer des revenus</td>
+
            <td><i>(class)</i></td>
 +
             <td>Creates a column of width 8/12.</td>
 
           </tr>
 
           </tr>
 
           <tr>
 
           <tr>
−
             <td>Develop user profiles to personalize transactions</td>
+
             <td><b> • col-sm-4 :</b></th>
−
             <td>Créer des profils d’utilisateurs pour personnaliser les transactions</td>
+
            <td><i>(class)</i></td>
 +
             <td>Creates a column of width 4/12.</td>
 
           </tr>
 
           </tr>
 
         </table>
 
         </table>
−
       </div>
+
       </td>
−
     </div>
+
     </tr>
−
  </div>
+
    <tr>
−
 
+
      <th colspan="2">Renders as</th>
−
  <p class="expand mw-collapsible-content">It is worth noting that achieving these goals (likely via low-code) fits into the higher levels of Gartner's Digital Government Maturity Model (such as Level 4 and Level 5).</p>
+
     </tr>
−
 
+
     <tr>
−
  <h2>Implications for Government Agencies</h2>
+
      <td colspan="2">
−
 
+
        <div class="container">
−
  <h3>Shared Services Canada (SSC)</h3>
+
          <div class="row">
−
 
+
            <div class="col-sm-8">[[File:EN_Technology_Trends_-_Blockchain_Hype_Cycle_2018.png|center]]</div>
−
  <h4>Value Proposition</h4>
+
            <div class="col-sm-4">
−
 
+
              <table class="wikitable hypecycleTable">
−
  <p>Given SSC’s heavy involvement in IT services and management, the value proposition of low-code relies on the production, deployment and maintenance of apps. Low-code moves app development to higher abstract levels (such as directly modeling business processes, etc.) and requires far less code to be written, giving the following specific value propositions:</p>
+
                <tr>
−
 
+
                  <th>English</th>
−
  <ol>
+
                  <th>Français</th>
−
     <li>Shorter time-to-market, giving higher client satisfaction, more accurate schedules, and also less temptation to build workarounds or purchase ill-fitting temporary solutions.</li>
+
                </tr>
−
     <li>Fewer person-hours of development, giving lower cost.</li>
+
                <tr>
−
    <li>Broadening the pool of potential app developers, alleviating staffing pressure, and potentially lower costs while shortening development timelines.</li>
+
                  <td>Figure 1. Hype Cycle for Blockchain Technologies, 2018</td>
−
    <li>Direct integration of legacy systems, allowing for incremental roll-out and use of low-code for cost and risk management.</li>
+
                  <td>Figure 1. Rapport Hype Cycle sur les technologies de la chaîne de blocs, 2018</td>
−
    <li>More accurately capturing and building for customer requirements, leading to lower rework and maintenance costs.</li>
+
                </tr>
−
  </ol>
+
                <tr>
−
 
+
                  <td>Expectations</td>
−
  <h4>Challenges</h4>
+
                  <td>Attentes</td>
−
 
+
                </tr>
−
  <p>While low-code vendors pitch it as a solution to all app projects, it is not without its challenges and issues, all of which are relevant to SSC:</p>
+
                <tr>
−
  <ul>
+
                  <td>Time</td>
−
    <li>The nature of low-code is to allow for non-coders (ideally, domain experts for the client) to create apps, however, low-code environments are largely proprietary and require at least a modest amount of training. This applies even to highly skilled developers.</li>
+
                  <td>Temps</td>
−
    <li>Most organizations experience some pushback from traditional developers, partly due to skepticism, though often due to defensiveness as more (and cheaper) people become “developers.”</li>
+
                </tr>
−
    <li>Most traditional development environments involve a one-off purchase of the IDE, however, low-code licenses are considerably more complex, often involving per-deployed-app costs. Those costs are sometimes opaque and need to be fully worked through for the ROI analysis.</li>
+
              </table>
−
    <li><p class="inline">There are several low-code systems to choose from, though the current leaders (which include Mendix, Microsoft and OutSystems) have consistently been ahead of the pack</p><p class="highlighted inline mw-collapsible-content"> (That is not quite true for Microsoft, which is relatively new to low-code, though their development environments and general platforms are very mature and strategic.)</p><p class="inline">. Which platforms to choose is a challenge that depends heavily on legacy software to be supported, existing deployment platforms, etc. Supporting more than one low-code platform will bring its own challenges.</li>
+
            </div>
−
    <li>The proprietary nature of low-code gives a certain level of “lock-in,” preventing SSC from changing vendor or leaving low-code altogether. Vendors usually portray low-code as having no lock-in because C# or Java code is generated, which may be maintained further without low-code. In practice, this is not true for large apps.</li>
+
          </div>
−
    <li>Low-code’s ease (“democratization”) of app development can cause problems for SSC: clients will be tempted to develop on their own if SSC is not fast enough, thereby creating a shadow IT (hidden/skunk works) mentality. If allowed to grow, this will create maintenance issues as well as an existential problem for SSC.</li>
+
        </div>
−
    <li>Security has been the chronic weak link in low-code, and vendors are only now attending to it in a structural way. Security primitives have long been available in low-code development palettes, but their use has not been obligatory and they are not interwoven with the environment.</li>
+
      </td>
−
  </ul>
+
     </tr>
−
 
+
   </table>
−
  <h4>Considerations</h4>
+
 
−
 
 
−
  <p>In choosing whether, how, or when to move to low-code, SSC has numerous considerations. SSC would obviously gain from the low-code efficiency improvement, and the main considerations revolve around when, how, and on what scale to move to low-code. As clients become aware of SSC’s low-code plans, they will exert increasing pressure to shorten timelines/schedules as well as lower project costs. SSC will need to consider even more agility in client interactions, as well as involving them more directly in projects using low-code – all while SSC retains direct control over app development. Regardless of how fast SSC adopts low-code, there is a risk that its popularity is picked up by forward-looking (or desperate) clients that initiate Shadow IT low-code projects. Completely preventing such projects will be difficult, and SSC must consider how to bring such projects “in from the cold,” to be integrated and supported from inside SSC.</p>
 
−
 
 
−
  <p>Rolling out low-code in SSC also requires some other considerations. Despite its simplicity, low-code will require at least a modest amount of developer training. This would have to be coupled with change management to integrate and not alienate traditional developers into the move; not doing so risks creating a two-tier developer corps, or having traditional developers actively working against the low-coders. SSC will need to consider a sequence of projects appropriate for low-code – whether based on risk-management/criticality or potential for savings. The security needs of SSC are somewhat unique (thanks to the broad cross section of clients), and ensuring low-code adequately supports security is a challenge needing exploration.</p>
 
−
 
 
−
  <p>SSC should consider a low-code trial for several reasons: gaining exposure, evaluating low-code tools, and quantifying the ROI (at least for one project). Ideally, all of the leading low-code systems should be evaluated – though the field may be thinned (e.g. to Microsoft PowerApps or OutSystems) based on breadth of the system as well as the match to existing technologies in-use by SSC. During the trial, several aspects should be measured: training cost (which is then translated to amortized training costs as they would be across several projects), amortized licensing costs, elapsed time, client satisfaction, and amortized maintenance costs.</p>
 
−
 
 
−
  <h2>References</h2>
 
−
 
 
−
  <ol>
 
−
    <li>Appian. (2016). <i>[https://www.appian.com/assets/sites/14/2016/12/low-code-guide.pdf Low-Code Guide].</i> Retrieved from appian.com</li>
 
−
    <li>Azoff, M. (2018, April 13).<i>[https://ovum.informa.com/resources/product-content/ovum-decision-matrix-selecting-an-enterprise-mobile-application-development-platform-201819 Ovum Decision Matrix: Selecting an Enterprise Mobile Application Development Platform, 2018–19].</i> Retrieved from ovum.informa.com</li>
 
−
    <li>Maio, A. D., & Howard, R. (2018, November 2).<i>[https://www.gartner.com/doc/reprints?id=1-667LEM1&ct=190130&st=sb Introducing the Gartner Digital Government Maturity Model 2.0].</i> Retrieved from gartner.com</li>
 
−
    <li>Marvin, R. (2018, August 10).<i>[https://www.pcmag.com/roundup/353252/the-best-low-code-development-platforms The Best Low-Code Development Platforms for 2019].</i> Retrieved from pcmag.com</li>
 
−
    <li>Mendix. (2019, July 4).<i>[https://www.mendix.com/why-developers-should-embrace-low-code/ App dev has evolved: Why developers need to embrace Low-Code].</i> Retrieved from mendix.com</li>
 
−
    <li>Outsystems. (2019, March 26).<i>[https://www.outsystems.com/1/idg-report-low-code-development-local-government/ Accelerating Digital Government With Low-Code Development].</i> Retrieved from outsystems.com</li>
 
−
    <li>Revell, M. (2019, February 7).<i>[https://www.outsystems.com/blog/what-is-low-code.html What Is Low-Code?]</i> Retrieved from outsystems.com</li>
 
−
    <li>Rymer, J. R., Koplowitz, R., Mines, C., Sjoblom, S., & Turley, C. (2019, March 13).<i>[https://reprints.forrester.com/#/assets/2/160/RES144387/reports The Forrester Wave™: Low-Code Development Platforms For AD&D Professionals, Q1 2019].</i> Retrieved from reprints.forrester.com</li>
 
−
    <li>Vincent, P., Baker, V., Natis, Y., Iijima, K., Driver, M., Dunie, R., . . . Gupta, A. (2018, April 26).<i>[https://www.gartner.com/doc/reprints?id=1-4XVPI4N&ct=180430&st=sb Magic Quadrant for Enterprise High-Productivity Application Platform as a Service].</i> Retrieved from gartner.com</li>
 
−
     <li>Wikipedia. (2019, July 18).<i>[https://en.wikipedia.org/wiki/Low-code_development_platform Low-code development platform].</i> Retrieved from en.wikipedia.org</li>
 
−
   </ol>
 
−
</div>
 
−
 
 
 
{{#css:
 
{{#css:
  
Line 988: Line 758:
 
     line-height: 27.3px;
 
     line-height: 27.3px;
 
     text-decoration: underline;
 
     text-decoration: underline;
 +
  }
 +
 +
  .centered{
 +
    margin-left: auto;
 +
    margin-right: auto;
 
   }
 
   }
  

Latest revision as of 11:28, 25 November 2019


Technology Trends / User Guide
Tendances Technologiques / Guide d'Utilisateur
Status Translation
Initial release September 1, 2019
Latest version September 1, 2019
Official publication User Guide.pdf
Template Template.zip
Traffic cone.png This page is a work in progress. We welcome your feedback. Please use the discussion page for suggestions and comments. When the page is approved and finalized, we will send it for translation.

This User Guide provides the instruction necessary to upload a new technology trend briefing paper. Most of the code is written in HTML using the CSS style. The goal of this page is to provide a step by step guide on how to create a page.

Hide Detailed View


Initialization and Configuration

Getting a GCcollab account

Before starting to code, you will need an account on GCcollab in order to create and edit existing GCwiki source code. If you have a Government of Canada email account the process should be simple. If not, a public servant with an existing account can invite using the invite button located at the top of the GCcollab dashboard.

Installing a Code Editor

Most of the code written on the technology trend page is done in HTML and CSS since they were found to be the easiest and offer a lot of versatility when it comes to styling. Therefore, it is highly recommended that you use a Code Editor for publishing the technology briefs. They are not obligatory, but they will simplify and accelerate the process. Below are three of the most popular environments and they should be sufficient. These platforms offer important tools and features such as syntax highlighting, file explorers, console, etc. Since Visual Studio Code is currently the most popular choice, examples in this user guide will use this editor, however the process is similar with others.

  • Visual Studio Code : A completed editor where all the tools are available after installation.
  • Atom : A simple and lightweight editor where most features are available as packages and can be installed through the settings.
  • Sublime Text : A classic editor offering some basics functionalities.

Initializing the Code Editor

After installing the editor, follow these steps to start creating your first file. For this example, we will be using Visual Studio Code but the process is similar on other platforms.

  • Creating a Workspace folder : A workspace is a project folder located on your local computer that contains all of the project code. Locate a suitable directory on your computer and create an empty folder with an appropriate name (such as "GCwiki").
  • Adding the folder to the Editor's workspace : In Visual Studio, open the file explorer located on the left or by pressing Ctrl+Shift+E. Right click on the Workspace portion and click "Add Folder to Workspace". Locate and select the previously created folder as your new workspace.
  • Creating a new file : Right click on the project folder "GCwiki" and select “new file”. Enter an appropriate filename with an ending of ".html" such as "EN - Example.html". Use this newly created file to write all the code for the technology brief.
  • Adding the template's code : Navigate to the template page. On the upper navigation bar, select "view source" or, if you are logged in, "edit source". From there, copy and paste the template's code to your file. This template offers all the technology brief empty code.
  • Adjusting the template's code : Before starting to publish the technology brief content, you need to adjust the template's information. All comments in the brackets "<!-- comment -->" need to be replace by the corresponding information. Don't forget to use the underscore (_) when using links and files

Publishing on GCwiki

Before publishing a technology trend paper, it is important to know how the page will look like. While writing the code, select “Show preview” to make sure the generated page is being properly displayed with the right information.

  • Creating a new page : To create a new page on GCwiki, enter the corresponding name in the URL bar on top of your browser. For example: the link for this user guide is "https://wiki.gccollab.ca/Technology_Trends/User_Guide". The platform will offer you the option to create the corresponding page. Warning! Once a page has been created, it cannot be deleted, so enter a valid name that follows the standards. For English page, name starts with "Technology_Trends/" followed by the technology name using underscores rather than space. For French page, use "Tendances_Technologiques/" followed by the same structure.
  • Adding the code : Navigate to the "Edit Source" tab on top of the page to publish your code. Copy and paste the corresponding code from Visual Studio Code to GCwiki. Press "Save changes" to publish or "Show preview" to view the resulting code.

Visual Studio Code : Settings and Shortcuts

After installing Visual Studio Code, there are some parameters you might want to change and shortcuts you might want to know.

  • Auto-completion : VS code has an autocomplete feature by default where if you start writing the tag and then press "tab", it will create the starting and closing tag. Ex: div.orange -> <div class="orange"></div>
  • Zoom : To change the zoom level of the interface, press Ctrl+Shift+P to open the command bar and search for "Preferences: open settings (JSON)". In that file, change and save the "window.zoomLevel" to a suitable value.
  • autoClosingTags : By default, VS code will recognise and try to close tags. However, this feature may not be suitable. To disable it, go to the same settings.json file as before and set the value to "false".

Basics of HTML and CSS

This section introduces the fundamentals of HTML and CSS. HTML is markup language, meaning that it only describes the structure of a Web page and how the browser should display the content. HTML elements are represented by tags which usually consists of a start tag and an end tag with the content inserted in between. These tags affects the content is specific ways. Here are some basic examples:

Markup Renders as
<h1>Header 1</h1> Header 1
<h2>Header 2</h2> Header 2
<p>Paragraph</p>

Paragraph
<div>Division</div>
Division
<b>Bold</b> Bold
<i>Italic</i> Italic
<u>Underline</u> Underline

HTML tags can have attributes that provide additional information about that element. They are always specified in the start tag tag. These attributes can change the behavior of the HTML element such as the style attribute used to specify the styling of an element. The more common attributes are the id used to define unique element and the class used to define elements sharing the same property. Once an HTML element has a class or an id, its style or behavior can be changed using CSS by addressing the corresponding name. Here are some examples:

Markup Style Renders as
<span style="color:red;">Red text</span> red
<span id="blueText">Blue Text</span> #blueText { color: blue; } Blue Text
<span class="green">Green Text</span> .green { color: green; } Green Text

Technology Trend Content Publishing

Most of the publishing work is done in HTML using classes to modify the style and the behavior of specific content. Editing the CSS shouldn't be necessary. After the Code Editor has been installed and the template has been copy-pasted into the new technology brief file, you are ready to start publishing. Each brief is different, so use the instructions provided below accordingly.

Information

The first step is to change the template's information accordingly. Most of these changes affect the right-sided table containing the brief's information. These modifications are commented such as <!-- comment --> to make it easier to locate and make the require changes. Be careful! The information follows a standard syntax and format that must be respected for the sake of consistency. Only the part in green needs to be changed. There is no need to understand what the code does.

line # Name Description Example
2 French Version Link This GCwiki link redirects to the french version of this page. [[fr:Tendances_Technologiques/Guide_d'Utilisateur]]
13 Brief Title This is the name of the brief in the side table in plain text. User Guide
20 French Version Link This link redirects to the french version. [[Tendances_Technologiques/Guide_d'Utilisateur|Guide d'Utilisateur]]
25 Logo File Link This link displays the logo. [[File:Technology_Trends_-_User_Guide.png|200px]]
28 Status Chose one of these 4 states this brief is currently at. Unassigned / Development / Translation / Published
32 Initial Release Simple date text September 1, 2020
36 Latest Version Simple date text September 1, 2020
40 Publication File Link This link shows the published version of this brief. [[Media:EN_-_Technology_Trends_-_User_Guide.pdf|User Guide.pdf-->]]
78 Wiki Page Name This changes the name of this GCwiki page. #firstHeading::after{ content:"User Guide"; }

Headers

Headers indicate a section of the document. In the brief, headers start at H2 and go up for sub-sections. Any headers will show up in the table of content located at the top of the page.

Markup Renders as
<h2>Business Brief</h2> Business Brief

Paragraph

A paragraph tag, denoted by the letter “p”, is opened like all other HTML tags with an opening “<p>” tag and a closing “</p>”. In the brief, when an entire paragraph (as shown below) needs to be uploaded with no special rendering this can be done using the paragraph tag.

Markup Renders as
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis gravida tellus. Pellentesque egestas nisi id diam accumsan, non vulputate neque viverra. Aenean ut tempus turpis. Nullam ac pellentesque ligula.</p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis gravida tellus. Pellentesque egestas nisi id diam accumsan, non vulputate neque viverra. Aenean ut tempus turpis. Nullam ac pellentesque ligula.

In the brief, when an entire paragraph needs to be hidden/collapsible, this can be done by making the paragraph tag part of the class “highlighted mw-collapsible-content”. The CSS will render it as seen below.

Markup Renders as
<p class="highlighted mw-collapsible-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis gravida tellus. Pellentesque egestas nisi id diam accumsan, non vulputate neque viverra. Aenean ut tempus turpis. Nullam ac pellentesque ligula.</p>
Hide Detailed View


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis gravida tellus. Pellentesque egestas nisi id diam accumsan, non vulputate neque viverra. Aenean ut tempus turpis. Nullam ac pellentesque ligula.

When only part of a paragraph needs to be hidden/collapsible the paragraph will need to be separated into several paragraph tags based on if they need to be hidden/collapsible or not. Parts that do not need to be hidden/collapsible will be part of the class “inline”. This allows the CSS to render the entire paragraph as one piece of text. Areas of text requiring still to be hidden/collapsible are made part of the class “highlighted inline mw-collapsible-content”. An example can be seen below.

Markup Renders as
<p class="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p class="highlighted inline mw-collapsible-content">Sed quis gravida tellus. Pellentesque egestas nisi id diam accumsan, non vulputate neque viverra.</p><p class="inline"> Aenean ut tempus turpis. Nullam ac pellentesque ligula.</p>
Hide Detailed View


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed quis gravida tellus. Pellentesque egestas nisi id diam accumsan, non vulputate neque viverra.

Aenean ut tempus turpis. Nullam ac pellentesque ligula.

Because the “inline” tag removes the paragraph separation, two subsequent paragraphs require the “inline-spacer” class in between to reset the separation and make the second paragraph on a new line. This is only a problem when two consecutive paragraphs are made inline and do require this “inline-spacer” class in between.

Markup Renders as
<p class="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p class="highlighted inline mw-collapsible-content">Sed quis gravida tellus. Pellentesque egestas nisi id diam accumsan, non vulputate neque viverra.</p><p class="inline-spacer"></p><p class="inline">Nunc vel sapien efficitur, convallis nulla bibendum, gravida metus.</p><p class="highlighted inline mw-collapsible-content">Integer pharetra aliquet nibh non interdum.</p>
Hide Detailed View


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed quis gravida tellus. Pellentesque egestas nisi id diam accumsan, non vulputate neque viverra.

Nunc vel sapien efficitur, convallis nulla bibendum, gravida metus.

Integer pharetra aliquet nibh non interdum.

List

Lists can be created in two ways. These are unordered lists which are simply bulleted, and ordered lists which are numbered. Unordered lists like all HTML tags are denoted by an opening “<ul>” tag and a closing “</ul>” tag. In the same manner, ordered lists are opened with an opening “<ol>” tag and a closing “</ol>” tag. The items in the list will be placed within these tags. List items require being individually wrapped in a “<li>” opening tag and closing “</li>” tag. An example of this can be seen below.


Markup Renders as
<ul>
 <li>Element 1</li>
 <li>Element 2</li>
</ul>
  • Element 1
  • Element 2
<ol>
 <li>Element 1</li>
 <li>Element 2</li>
</ol>
  1. Element 1
  2. Element 2

If elements in the list require being hidden/collapsible the entire list will need to be made as a list of lists. When doing this collapsible, items will be placed in a list that is part of the class “highlighted mw-collapsible-content”. An example of this can be seen below.

Markup Renders as
<ul>
 <li>Element 1</li>
</ul>
<ul class="highlighted mw-collapsible-content">
 <li>Element 2</li>
</ul>
Hide Detailed View


  • Element 1
  • Element 2
<ol>
 <li>Element 1</li>
</ol>
<ol class="highlighted mw-collapsible-content" start="2">
 <li>Element 2</li>
</ol>
Hide Detailed View


  1. Element 1
  1. Element 2

Tables

To make a table, use the tag “table” just like before. The table’s rows are then specified one after the other using the tag “tr”. Each cell is coded with either “th” for a header or “td” for details. In the table tab, add the class “wikitable” to add the Wikipedia style to a table or the class “sortable” to make be able to sort the table.

Markup Renders as
<table class="wikitable sortable">
 <tr>
  <th>Header 1</th>
  <th>Header 2</th>
 </tr>
 <tr>
  <td>Detail 1</td>
  <td>Detail 2</td>
 </tr>
 <tr>
  <td>Detail 3</td>
  <td>Detail 4</td>
 </tr>
</table>
Header 1 Header 2
Detail 1 Detail 2
Detail 3 Detail 4

Links, Images and Files

Links, files, and images are all denoted in a similar fashion with the double square brackets and a vertical line separator as such “[[ | ]]”. For links the left side of the separator contains the URL of the link (if it is a wiki link the title of the page can be given). On the right side of the separator is the name the user wishes to be displayed. Similar to links, files contain the file name to be displayed on the right side of the separator. The left side contains file name that was uploaded to the database separated by underscores. The left side also contains the prefix “Media:EN_-_”. An image is denoted the same way. Except the right side of the separator contains the size of the image in pixels (eg. 40px). The left side contains the name of the image with the prefix “File:”. Examples of all three can be seen below.

Images and files need to be uploaded to the database by clicking the “Upload file” link on the left side of the page.

Markup Renders as
[https://www.canada.ca/en.html Canada.ca] Canada.ca
[[Technology_Trends|Home Page]] Home Page
[[Media:EN_-_Technology_Trends_-_User_Guide.pdf|User Guide pdf]] User Guide pdf
[[File:Traffic_cone.png|40px]] Traffic cone.png

References

References like other HTML tags are created with an opening <ref> tag and a closing </ref> tag. Within the reference tags the APA citation can be placed. After the citation a link can also be placed with the same format as previously discussed or simply with one square bracket pair like “[ ]”. Doing so, will cause the citation in the text to appear as a number, as seen in the example below.

Markup Notation
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<ref>Wikipedia. (2019, September 1). [https://en.wikipedia.org/wiki/Main_Page Wikipedia]. Retrieved from Wikipedia</ref></p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.[1]

References

  1. Wikipedia. (2019, September 1). Wikipedia. Retrieved from Wikipedia

Main Pages

Once a brief is completed, changes must be made to the main “Technology Trend” page. The first change is to the recent addition banner. A link must be made to your new trend. The second change needed to be made is in the bottom table listing all the trend. Since the new trend is now available, the relevant information needs to be updated and the name be made into a link to the trend page.

Markup Renders as
<table>
 <tr>
  <td>[[File:Traffic_cone.png|40px]]</td>
  <td class="disclaimerText">Recent additions include [[Technology_Trends/Blockchain|Blockchain]], [[Technology_Trends/Drones|Drones]].</td>
 </tr>
</table>
Traffic cone.png Recent additions include Blockchain, Drones.
<table class="wikitable sortable technology-table" style="border: 0px solid;">
 <tr>
  <th colspan="3">Name</th>
  <th>Status</th>
  <th style="white-space: nowrap;">Release Date</th>
  <th>Official Publications</th>
 </tr>
 <tr>
  <td style="border-right: 0px solid; text-align:right;">[[Technology_Trends/Blockchain|Blockchain]]</td>
  <td style="border-left: 0px solid; border-right: 0px solid;">-</td>
  <td style="border-left: 0px solid; text-align:left">[[Tendances_Technologiques/Chaîne_de_Blocs|Chaîne de Blocs]]</td>
  <td>Published</td>
  <td>2019-05-23</td>
  <td>[[Media:EN_-_Technology_Trends_-_Blockchain.pdf|EN]] - [[Media:FR_-_Tendances_Technologiques_-_Blockchain.pdf|FR]]</td>
 </tr>
 <tr>
  <td style="border-right: 0px solid; text-align:right;">3D XPoint (Optane)</td>
  <td style="border-left: 0px solid; border-right: 0px solid;">-</td>
  <td style="border-left: 0px solid; text-align:left">3D XPoint (Optane)</td>
  <td>Development</td>
  <td>FY 19-20 Q2</td>
  <td></td>
 </tr>
</table>
Name Status Release Date Official Publications
Blockchain - Chaîne de Blocs Published 2019-05-23 EN - FR
3D XPoint (Optane) - 3D XPoint (Optane) Development FY 19-20 Q2

Hype cycle

To display a Hype cycle graphic with the translation table, Use this following code. This container will adjust the size of the graphic and place the table either side-by-side or below. This code is based on the bootstrap framework. Here is an example using Blockchain technology.

Markup Notation
<div class="container">
 <div class="row">
  <div class="col-sm-8">[[File:EN_Technology_Trends_-_Blockchain_Hype_Cycle_2018.png|center]]</div>
  <div class="col-sm-4">
   <table class="wikitable hypecycleTable">
    <tr>
     <th>English</th>
     <th>Français</th>
    </tr>
    <tr>
     <td>Figure 1. Hype Cycle for Blockchain Technologies, 2018</td>
     <td>Figure 1. Rapport Hype Cycle sur les technologies de la chaîne de blocs, 2018</td>
    </tr>
    <tr>
     <td>Expectations</td>
     <td>Attentes</td>
    </tr>
    <tr>
     <td>Time</td>
     <td>Temps</td>
    </tr>
   </table>
  </div>
 </div>
</div>
• div : (tag) Division
• container : (class) Creates a container for a group of elements.
• row : (class) Creates an inline space inside the container.
• col-sm-8 : (class) Creates a column of width 8/12.
• col-sm-4 : (class) Creates a column of width 4/12.
Renders as
EN Technology Trends - Blockchain Hype Cycle 2018.png
English Français
Figure 1. Hype Cycle for Blockchain Technologies, 2018 Figure 1. Rapport Hype Cycle sur les technologies de la chaîne de blocs, 2018
Expectations Attentes
Time Temps


Retrieved from "https://wiki.gccollab.ca/index.php?title=Technology_Trends/User_Guide&oldid=14166"