512
edits
Changes
Jump to navigation
Jump to search
Line 47:
Line 47: − + Line 78:
Line 78: − + Line 110:
Line 110: − + − + + + − + − + − <div class="col-sm-6">+ − <nowiki>This is <span style="color:red;">red</span> text.</nowiki>+ − <nowiki>This is <span style="color:red;">red</span> text.</nowiki>+ − <nowiki>This is <span style="color:red;">red</span> text.</nowiki>+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + − <div class="col-sm-6">+ − <p>This is <span style="color:red;">red</span> text.</p>+ + + + + + + + + + + + + + + + + + − + − + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Line 661:
Line 960: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Technology Trends/User Guide (view source)
Revision as of 16:19, 27 August 2019
, 16:19, 27 August 2019no edit summary
</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.</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. [http://hilite.me/ html styler]</p>
<div class="mw-collapsible-toggle btn" style="float: left; display: block;">
<div class="mw-collapsible-toggle btn" style="float: left; display: block;">
<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 "<nowiki><!-- comment --></nowiki> 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"><!-- comment --></span>" need to be replace by the corresponding information. Don't forget to use the underscore (_) when using links and files</li>
</ul>
</ul>
</ul>
</ul>
<h2>HTML and CSS Fundamental</h2>
<h2>Basics of HTML and CSS</h2>
<p>This section offers a basic understanding of HTML. This markup language is designed to be displayed in web browser.</p>
<p>This section introduces the fundamentals of HTML and CSS.</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>
<div class="container">
<table class="wikitable markupTable">
<div class="row" style="background-color: aqua">
<tr>
<th>Markup</th>
<th>Renders as</th>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><h1></span>Header 1<span style="color: #007700"></h1></span></td>
<td class="half"><span class="header1">Header 1</span></td>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><h2></span>Header 2<span style="color: #007700"></h2></span></td>
<td class="half"><span class="header2">Header 2</span></td>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><p></span>Paragraph<span style="color: #007700"></p></span></td>
<td class="half"><p>Paragraph</p></td>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><div></span>Division<span style="color: #007700"></div></span></td>
<td class="half"><div>Division</div></td>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><b></span>Bold<span style="color: #007700"></b></span></td>
<td class="half"><b>Bold</b></td>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><i></span>Italic<span style="color: #007700"></i></span></td>
<td class="half"><i>Italic</i></td>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><u></span>Underline<span style="color: #007700"></u></span></td>
<td class="half"><u>Underline</u></td>
</tr>
</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>
<table class="wikitable markupTable">
<tr>
<th>Markup</th>
<th>Style</th>
<th>Renders as</th>
</tr>
<tr>
<td class="markup third"><span style="color: #007700"><span</span> <span style="color: #0000CC">style=</span><span style="color: rgb(190, 70, 0)">"color:red;"</span><span style="color: #007700">></span>Red text<span style="color: #007700"></span></span></td>
<td class="style third"></td>
<td class="third"><span style="color:red;">red</span></td>
</tr>
<tr>
<td class="markup third"><span style="color: #007700"><span</span> <span style="color: #0000CC">id=</span><span style="color: rgb(190, 70, 0)">"blueText"</span><span style="color: #007700">></span>Blue Text<span style="color: #007700"></span></span></td>
<td class="style third"><span style="color: #0066BB; font-weight: bold">#blueText</span> { <span style="color: #008800; font-weight: bold">color</span><span style="color: #333333">:</span> <span style="color: #007020">blue</span>; }</td>
<td class="third"><span id="blueText">Blue Text</span></td>
</tr>
<tr>
<td class="markup third"><span style="color: #007700"><span</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">"green"</span><span style="color: #007700">></span>Green Text<span style="color: #007700"></span></span></td>
<td class="style third"><span style="color: #BB0066; font-weight: bold">.green</span> { <span style="color: #008800; font-weight: bold">color</span><span style="color: #333333">:</span> <span style="color: #007020">green</span>; }</td>
<td class="third"><span class="green">Green Text</span></td>
</tr>
</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>
<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>
<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"><!-- comment --></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>
<table class="wikitable markupTable">
<tr>
<th>line #</th>
<th>Name</th>
<th>Description</th>
<th>Example</th>
</tr>
<tr>
<td>2</td>
<td>French Version Link</td>
<td>This GCwiki link redirects to the french version of this page.</td>
<td class="markup"><nowiki>[[</nowiki>fr:Tendances_Technologiques/<span class="green">Guide_d'Utilisateur</span><nowiki>]]</nowiki></td>
</tr>
<tr>
<td>13</td>
<td>Brief Title</td>
<td>This is the name of the brief in the side table in plain text.</td>
<td class="markup green">User Guide</td>
</tr>
<tr>
<td>20</td>
<td>French Version Link</td>
<td>This link redirects to the french version.</td>
<td class="markup"><nowiki>[[</nowiki>Tendances_Technologiques/<span class="green">Guide_d'Utilisateur</span>|<span class="green">Guide d'Utilisateur</span><nowiki>]]</nowiki></td>
</tr>
<tr>
<td>25</td>
<td>Logo File Link</td>
<td>This link displays the logo.</td>
<td class="markup"><nowiki>[[</nowiki>File:Technology_Trends_-_<span class="green">User_Guide</span>.png|200px<nowiki>]]</nowiki></td>
</tr>
<tr>
<td>28</td>
<td>Status</td>
<td>Chose one of these 4 states this brief is currently at.</td>
<td class="markup green">Unassigned / Development / Translation / Published</td>
</tr>
<tr>
<td>32</td>
<td>Initial Release</td>
<td>Simple date text</td>
<td class="markup green">September 1, 2020</td>
</tr>
<tr>
<td>36</td>
<td>Latest Version</td>
<td>Simple date text</td>
<td class="markup green">September 1, 2020</td>
</tr>
<tr>
<td>40</td>
<td>Publication File Link</td>
<td>This link shows the published version of this brief.</td>
<td class="markup"><nowiki>[[</nowiki>Media:EN_-_Technology_Trends_-_<span class="green">User_Guide</span>.pdf|<span class="green">User Guide</span>.pdf--><nowiki>]]</nowiki></td>
</tr>
<tr>
<td>78</td>
<td>Wiki Page Name</td>
<td>This changes the name of this GCwiki page. </td>
<td class="markup">#firstHeading::after{ content:"<span class="green">User Guide</span>"; }</td>
</tr>
</table>
<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>
<table class="wikitable markupTable">
<tr>
<th>Markup</th>
<th>Renders as</th>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><h2></span>Business Brief<span style="color: #007700"></h2></span></td>
<td class="half"><span class="header2">Business Brief</span></td>
</tr>
</table>
<h3>Paragraph</h3>
<p>Most paragraph </p>
<table class="wikitable markupTable">
<tr>
<th>Markup</th>
<th>Renders as</th>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><p></span>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.<span style="color: #007700"></p></span></td>
<td class="half">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.</td>
</tr>
</table>
<p>Collapsable paragraph</p>
<table class="wikitable markupTable">
<tr>
<th>Markup</th>
<th>Renders as</th>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><p</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">"highlighted mw-collapsible-content"</span><span style="color: #007700">></span>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.<span style="color: #007700"></p></span></td>
<td class="half">
<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="toggle mw-collapsible-toggle-collapsed" role="button" tabindex="0"><span class="mw-collapsible-text">Hide Detailed View</span></div>
</div><br/><br/>
<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>
</div>
</div>
</td>
</tr>
</table>
<p>Collapsable Line</p>
<table class="wikitable markupTable">
<tr>
<th>Markup</th>
<th>Renders as</th>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><p</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">"inline"</span><span style="color: #007700">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span style="color: #007700"></p><p</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">"highlighted inline mw-collapsible-content"</span><span style="color: #007700">></span>Sed quis gravida tellus. Pellentesque egestas nisi id diam accumsan, non vulputate neque viverra.<span style="color: #007700"></p><p</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">"inline"</span><span style="color: #007700">></span> Aenean ut tempus turpis. Nullam ac pellentesque ligula.<span style="color: #007700"></p></span></td>
<td class="half">
<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="toggle mw-collapsible-toggle-collapsed" role="button" tabindex="0"><span class="mw-collapsible-text">Hide Detailed View</span></div>
</div><br/><br/>
<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>
</div>
</div>
</div>
</td>
</div>
</tr>
</table>
<p>Multiple collapsable paragraph</p>
<table class="wikitable markupTable">
<tr>
<th>Markup</th>
<th>Renders as</th>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><p</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">"inline"</span><span style="color: #007700">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span style="color: #007700"></p><p</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">"highlighted inline mw-collapsible-content"</span><span style="color: #007700">></span>Sed quis gravida tellus. Pellentesque egestas nisi id diam accumsan, non vulputate neque viverra.<span style="color: #007700"></p></span><span style="color: #007700"><p</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">"inline-spacer"</span><span style="color: #007700">></p></span><span style="color: #007700"><p</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">"inline"</span><span style="color: #007700">></span>Nunc vel sapien efficitur, convallis nulla bibendum, gravida metus.<span style="color: #007700"></p><p</span> <span style="color: #0000CC">class=</span><span style="color: rgb(190, 70, 0)">"highlighted inline mw-collapsible-content"</span><span style="color: #007700">></span>Integer pharetra aliquet nibh non interdum.<span style="color: #007700"></p></span></td>
<td class="half">
<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="toggle mw-collapsible-toggle-collapsed" role="button" tabindex="0"><span class="mw-collapsible-text">Hide Detailed View</span></div>
</div><br/><br/>
<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>
</div>
</td>
</tr>
</table>
<h3>List</h3>
<table class="wikitable markupTable">
<tr>
<th>Markup</th>
<th>Renders as</th>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><ul></span><br/><span style="color: #007700"> <li></span>Element 1<span style="color: #007700"></li></span><br/><span style="color: #007700"> <li></span>Element 2<span style="color: #007700"></li></span><br/><span style="color: #007700"></ul></span></td>
<td class="half">
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
</td>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><ol></span><br/><span style="color: #007700"> <li></span>Element 1<span style="color: #007700"></li></span><br/><span style="color: #007700"> <li></span>Element 2<span style="color: #007700"></li></span><br/><span style="color: #007700"></ol></span></td><br/>
<td class="half">
<ol>
<li>Element 1</li>
<li>Element 2</li>
</ol>
</td>
</tr>
</table>
<p>Collapsable List</p>
<table class="wikitable markupTable">
<tr>
<th>Markup</th>
<th>Renders as</th>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><ul></span><br/><span style="color: #007700"> <li></span>Element 1<span style="color: #007700"></li></span><br/><span style="color: #007700"></ul></span><br/><span style="color: #007700"><ul</span> <span style="color: #0000CC">class=</span><span style="background-color: #fff0f0">"highlighted mw-collapsible-content"</span><span style="color: #007700">></span><br/><span style="color: #007700"> <li></span>Element 2<span style="color: #007700"></li></span><br/><span style="color: #007700"></ul></span></td>
<td class="half">
<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="toggle mw-collapsible-toggle-collapsed" role="button" tabindex="0"><span class="mw-collapsible-text">Hide Detailed View</span></div>
</div><br/><br/>
<ul>
<li>Element 1</li>
</ul>
<ul class="highlighted mw-collapsible-content">
<li>Element 2</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="markup half"><span style="color: #007700"><ol></span><br/><span style="color: #007700"> <li></span>Element 1<span style="color: #007700"></li></span><br/><span style="color: #007700"></ol></span><br/><span style="color: #007700"><ol</span> <span style="color: #0000CC">class=</span><span style="background-color: #fff0f0">"highlighted mw-collapsible-content"</span><span style="color: #0000CC"> start=</span><span style="background-color: #fff0f0">"2"</span><span style="color: #007700">></span><br/><span style="color: #007700"> <li></span>Element 2<span style="color: #007700"></li></span><br/><span style="color: #007700"></ol></span></td>
<td class="half">
<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="toggle mw-collapsible-toggle-collapsed" role="button" tabindex="0"><span class="mw-collapsible-text">Hide Detailed View</span></div>
</div><br/><br/>
<ol>
<li>Element 1</li>
</ol>
<ol class="highlighted mw-collapsible-content" start="2">
<li>Element 2</li>
</ol>
</div>
</td>
</tr>
</table>
<h3>Tables</h3>
<h3>Links</h3>
<h3>References</h3>
<h3>Images</h3>
<h3>Documents</h3>
<h3>Main Pages</h3>
<h2>Technology Trend Publishing</h2>
<h2>Technology Trend Publishing</h2>
width: 100%;
width: 100%;
}
}
.markupTable {
width: 100%;
}
.markup {
font-family: "Consolas", Times, serif;
}
.half {width: 50%; }
.third {width: 33.3333%; }
.header1 {
font-family: "Linux Libertine", Georgia, Times, serif;
font-size: 25.2px;
font-weight: 400;
height: auto;
line-height: 32.76px;
text-decoration: underline;
}
.header2 {
font-family: "Linux Libertine", Georgia, Times, serif;
font-size: 21px;
font-weight: 400;
height: auto;
line-height: 27.3px;
text-decoration: underline;
}
#blueText { color: blue; }
.green { color: green; }
/* Mobile Formatting */
/* Mobile Formatting */
