Line 47: |
Line 47: |
| </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 88: |
Line 88: |
| <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, 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> | | <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>
| |
− | <li><b></b></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"><div</span> <span style="color: #0000CC">class=</span><span style="background-color: #fff0f0">"orange"</span><span style="color: #007700">></div></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> |
| | | |