Changes

   <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>

   <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>

   <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>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. Pres "Save changes" to publish or "Show preview" to view the resulting code.</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>

   <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">

   </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">

     </tr>

     </tr>

   </table>

   </table>

   <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">

   <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">

   </table>

   </table>

   <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>

   <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">

   </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">

   <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>

   <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">

   </table>

   </table>

   <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>

   <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">

   <h3>Tables</h3>

   <h3>Tables</h3>

   <table>

   <table>

   <h3>Links, Images and Files</h3>

   <h3>Links, Images and Files</h3>

   <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 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>

   <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>

   <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>

   <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>

   <h3>References</h3>

   <h3>References</h3>

   <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 place 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>

   <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>

   <table class="wikitable markupTable">

   <table class="wikitable markupTable">

   <h3>Main Pages</h3>

   <h3>Main Pages</h3>

   <p>Recent additions and bottom table</p>

   <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>

   <table class="wikitable markupTable">

   <table class="wikitable markupTable">

   </table>

   </table>

   <h3>Hype cycle table</h3>

   <h3>Hype cycle</h3>

   <p>Hype cycle table, example using blockchain</p>

   <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>

   <table class="wikitable markupTable">

   <table class="wikitable markupTable">