Skip to content

Commit

Permalink
UI content and minor enhancements (#39)
Browse files Browse the repository at this point in the history 
* Teacher page content

* Content for teacher pages, plus minor tweaks
  • Loading branch information
@Jasata
Jasata committed Sep 18, 2020
1 parent 02c3d25 commit 509aa71
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 135 deletions.
112 changes: 33 additions & 79 deletions html/create.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="nav navbar-nav">
<a class="nav-link p-3" href="#sec1">Creating</a>
<a class="nav-link p-3" href="#sec2">Workflow</a>
<a class="nav-link p-3" href="#sec3">Exporting</a>
<a class="nav-link p-3" href="#create">Creating</a>
<a class="nav-link p-3" href="#publish">Publishing</a>
<a class="nav-link p-3" href="#maintain">Maintaining</a>
</ul>
</div>
</div>
Expand All @@ -77,95 +77,49 @@

<!-- EXECUTIVE SUMMARY -->
<article>
<p>This is the executive summary (or abstract) paragraph. This should be very very short and only highlight what this page is generally for.</p>
<p>This page gives you a general information. For now, we would like you to contact us so that we can help you and also gain information on ways in which this solution is going to be used.</p>
</article>

<article>
<p>Page should be divided into three sections.
<details>
<summary>Prerequisites and Limitations</summary>
<p>All the things that are needed <strong>before</strong> virtual image creation is to be attempted.</p>
<p>Additionally, it is necessary to list the practical limitations, such as being restricted to Linux when using the provided instances. Licensing issues should also be reminded of, so that a teacher won't start distributing a licensed operating system.</p>
</details>
<details>
<summary>Practical how-to instructios</summary>
<p>All the steps (see below) in depth and with animated example images (use Screen2Gif).</p>
</details>
<details>
<summary>Resources</summary>
<p>Finally, the page should be concluded with a list of resources, both internal and external, as well as link to the help page, which will be created specifically for the teachers.</p>
</details>
</p>
<p>All images should be prefixed with the page name. For instance, this content is to be located in the "introduction.html", and thus all image resources (primarily) used by this content, should have their names prefixed with "introduction_".</p>
<h2 id="sec1">Creting a Virtual Machine Image</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus. Blandit massa enim nec dui. Faucibus vitae aliquet nec ullamcorper sit amet risus. Arcu non sodales neque sodales ut etiam. Amet mauris commodo quis imperdiet. Vulputate mi sit amet mauris commodo quis imperdiet. Laoreet non curabitur gravida arcu ac. Enim facilisis gravida neque convallis a cras. Pharetra et ultrices neque ornare aenean euismod elementum.</p>
<h2 id="sec2">Workflow in Creating Your Course Specific VM image</h2>
<h1 id="create"><i class="fa fa-wrench"></i>Creting a Virtual Machine Image</h1>
<p>Currently, there are two alternatives to choose from:</p>
<p>
<details>
<summary>Install Hypervisor</summary>
<p>Unless you already are running any of the supported hypervisors, you need to install one.</p>
</details>
<details>
<summary>Download basic VM image</summary>
<p>You have an option to either download generated image that has smaller footprint or standard Debian 10 installation that has been created using UTU answers file.</p>
</details>
<details>
<summary>Import Downloaded VM Image</summary>
<p>If hypervisor installation has been successfully completed, this is as simple as double-clicking the downloaded .OVA -file. Hypervisor will take care of the rest.</p>
<summary>Modify one of our VMs</summary>
<p>UTU Course Virtualization Team develops and publishes a number of virtual machines that are suitable as a foundation for many kinds of courses.</p>
<p>You can simply download the one that best meets your requirements, import, run and install with the software needed in your course. Export procedure is a handful of clicks and then you can upload the image for your students to use.</p>
<p>At this point, we would still like to hear from you and either recommend the best image or perhaps assist you in some requirements that could be useful for other courses as well.</p>
</details>
<details>
<summary>Install and Configure Your Software</summary>
<p>This part of the process is entirely in your hands. Technical consulation is available, but we cannot guarantee that we can solve all problems - but we will certainly try.</p>
</details>
<details>
<summary>Export Your VM Image</summary>
<p><strong>VirtualBox: </strong>Right click on the virtual machine and select "export"</p>
<p><strong>VMPlayer: </strong>Some other thing...</p>
<summary>Create your own</summary>
<p>Creation of a virtual machine and installing the operating system into it is one of the most basic things that everyone does with their hypervisors. Nothing prevents you from doing exactly this, if you feel that what we can offer does not meet your requirements.</p>
<p>We would like you to consider testing the virtual machine in all three major operating systems (MacOS, Linux and Windows) as well as with both hypervisors (VirtualBox and VMware) in all three OS'es. This is what we do with the ones we offer, just in case there are some unexpected issues.</p>
<p>If you make your own virtual machine, you should still contact us as we can provide you with some start-up scripts that let students choose their locale and do some other useful personalization steps. That should save you some work and be worth dropping us a mail.</p>
</details>
</p>
<h1 id="sec3">Exporting Virtual Machine</h1>
<p>Blah blah, yak yak yak...</p>
<img class="img-fluid" src="img/create_export_vm.gif">
<h1>Copied content for Bulk</h1>
<div name="Tutorial" data-unique="Tutorial"></div><h2 id="Tutorial"><a href="#Tutorial" class="headerlink" title="Tutorial"></a>Tutorial</h2><div name="WhatisPyQt?" data-unique="WhatisPyQt?"></div><h3 id="What-is-PyQt"><a href="#What-is-PyQt" class="headerlink" title="What is PyQt?"></a>What is PyQt?</h3><p>PyQt is a port of the Qt library (C++). Qt is a very powerful GUI library. PyQt is not a single module, but a collection of modules.</p>
<p>These modules include:<br><em>QtCore, QtGui, QtWidgets, QtMultimedia, QtBluetooth, QtNetwork, QtPositioning, Enginio, QtWebSockets, QtWebKit, QtWebKitWidgets, QtXml, QtSvg, QtSql and QtTest</em>.</p>
<p>So what’s in these modules?</p>
<ul>
<li><p><strong>Qtcore</strong> contains the core non-GUI code.</p></li>
<li><p><strong>QtGui</strong> has everything for window management like event handling and graphics.</p></li>
<li><p><strong>QtWidgets</strong> has a many UI widgets like buttons, labels, textinput and other things you’d see in a desktop window.</p></li>
<li><p><strong>QtMultimedia</strong> for multimedia content and camera.</p></li>
<li><p><strong>QtBluetooth</strong> scan bluetooth devices and connect.</p></li>
<li><p><strong>QtNetwork</strong> a cross-platform solution for network programming. Set up a socket server or client that works on all desktop systems. Supports both the TCP/IP stack and UDP. </p></li>
<li><p><strong>QtPositioning</strong> determine a position by using a position (WiFi, Satellite)</p></li>
<li><p><strong>QtWebSockets</strong> implementation of the websocket protocol. </p></li>
<li><p><strong>QtWebKit</strong> web browser implementation. You can use this to render a webpage. This is based on WebKit2. WebKit is used in the Safari browser, by KDE and others.</p></li>
<li><p><strong>QtWebKitWidgets</strong> Deprecated. WebKit1 version of web browser implementation</p></li>
<li><p><strong>QtXml</strong> use XML files, reading/writing and so on.</p></li>
<li><p><strong>QtSvg</strong> svg graphics (Scalable Vector Graphics (SVG). A type of image format.</p></li>
<li><p><strong>QtSql</strong> work with databases. </p></li>
<li><p><strong>QtTest</strong> unit testing</p></li>
</ul>
<div name="InstallingPyQt" data-unique="InstallingPyQt"></div>
<h3 id="Installing-PyQt">
<a href="#Installing-PyQt" class="headerlink" title="Installing PyQt"></a>Installing PyQt
</h3>
<p>You can easily make desktop software with PyQt. There are two ways to install PyQt: with an installer and from code. </p>
<p>Compling PyQt from source can be a tedious process, recommend you to install using the installer or package manager. (an end-user can simply run a setup program to install your software)</p>
<p>You can view <a href="/install-pyqt/">the tutorial on PyQt installation</a>.</p>
<div name="CreatingApps" data-unique="CreatingApps"></div>
<h3 id="Creating-Apps">
<a href="#Creating-Apps" class="headerlink" title="Creating Apps"></a>Creating Apps
</h3>
<p>After PyQt is installed, you can create all kind of desktop software. PyQt has many widgets including buttons, input fields, combobox, webview and tons of others.</p>
<p>This is straightforward and you will learn how to do that in the next tutorials.</p>
<p><strong>Related Course:</strong><br><a href="https://gum.co/pysqtsamples" target="_blank" rel="noopener">PyQt Desktop Apps with Python</a></p>
<p>Please contact us at <a href="mailto:vm-support@utu.fi?subject=New%20virtual%20machine%20for%20my%20course">vm-support@utu.fi</a>.</p>
<p>There is some <a href="documentation.html">documentation</a> available, which should be useful. More will hopefully become available later.</p>
</article>

<article>
<h1 id="publish"><i class="fa fa-bullhorn"></i>Publishing a Virtual Machine Image</h1>
<p>This site is intended as the one-stop location for both students and teachers. In the <a href="upload">upload</a> page you can store your virtual machine image and set its availability (anyone, students, teachers, not-available). You can also give it a descriptive label ("name") and description, then give your students URL with search string that explicitly gives them your image - or just let the students search it themselves.</p>
<p>What you should be careful about are any licensing issues. Virtual machines we offer are not subject to any lisencing and can be freely distributed, but you need to be aware of any licensing that the software you install might have. In many cases, campus licenses exist and you merely need to limit the availability of your image to authenticated students (set availability "students"). In more restrictive cases, please contact us and we will try to solve the licensing requirements either with existing features, or in cases where similar requirements are likely to appear again, we will create the necessary features for you.</p>
</article>


<article>
<h1 id="maintain"><i class="fa fa-bullhorn"></i>Maintaining virtual machine image</h1>
<p>This part should be a relief - if your virtual machine uses no licenses, you have no maintenance tasks at all.</p>
<p>More likely, you will wish to update some software in your image - perhaps not even every year, but once in awhile. As far as virtual machine images are considered, that is not maintenance, but a creation of a new image. When that time comes, upload the updated image, set the availability and make the old image not available to anyone.</p>
<p>Removal of old images will be available in the next feature update in Spring 2021. If you wish to remove images (instead of just hiding them), please contact us.</p>
<p><strong>If your virtual machine uses licensed software</strong> you should take care to remove its availability when the licensing agreement expires. If such images appear in this system, we will implement some tools for time limited availability or similar.</p>
</article>

</main>
<aside>
</aside>
</div>
</div><!-- class="container-fluid" -->
<!-- MAIN ENDS -->



Expand Down
2 changes: 1 addition & 1 deletion html/documentation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@

<!-- ARCILE DOCUMENTS -->
<article>
<h1 id="docs"><i class="fa fa-file-text"></i>Documents</h1>
<h1 id="docs"><i class="fa fa-book"></i>Documents</h1>
<p>
<a href="document/designddocument.pdf">Design Document</a><br />
<!--
Expand Down
4 changes: 0 additions & 4 deletions html/help.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,10 +132,6 @@ <h2>Getting a VM Image to Run</h2>
</details>
</p>

<h2>Using the VM</h2>
<p>Please Note that your teacher may have chosen to create a virtual machine entirely of his or her own design and that the answers provided here may not apply.</p>
<p>TBA</p>


</article>
<!-- ARTICLE FAQ ENDS -->
Expand Down
21 changes: 7 additions & 14 deletions html/help_teacher.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,7 @@
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="nav navbar-nav">
<a class="nav-link p-3" href="#create">Create VM</a>
<a class="nav-link p-3" href="#install">Install Software</a>
<a class="nav-link p-3" href="#docs">Documents</a>
<a class="nav-link p-3" href="#documentation">Documentation</a>
<a class="nav-link p-3" href="#contact">Contact</a>
</ul>
</div>
Expand Down Expand Up @@ -78,17 +76,12 @@
</article>

<article>
<h1 id="create">Creating the Virtual Machine image</h1>
<p>help stuff</p>
<h1 id="install">Installing Course Specific Software</h1>
<p>help stuff</p>
<h1 id="docs">Documents</h1>
<p>
<a href="#">doc 1</a><br>
<a href="#">doc 2</a><br>
<a href="#">doc 3</a>
</p>
<h1 id="contact">Contact Us</h1>
<h1 id="documentation"><i class="fa fa-book"></i>Documentation</h1>
<p>Please refer to <a href="documentation.html">documentation</a> page.</p>
</article>

<article>
<h1 id="contact"><i class="fa fa-comments-o"></i>Contact Us</h1>
<p>Please try to be as descriptive as possible to make helping you more efficent. In more challenging issues, be prepared to meet us personally to work out a satisfactory solution.</p>
<p><strong>Support email address:</strong> <a href="mailto:vm-support@utu.fi">vm-support@utu.fi</a></p>
<p>Please allow up to 2-3 days for replies. Personnel helping you are available only 2 days per week.</p>
Expand Down
Binary file removed html/img/create_export_vm.gif
View file
Binary file not shown.
Binary file removed html/img/site-logo.png
View file
Binary file not shown.

0 comments on commit 509aa71

Please sign in to comment.