Scaffolding for an actual topic

Started entering content in Topic #1

000_objectives.md

@@ -30,6 +30,7 @@ Prerequisites
 <li class="ui item">Some Computer Science background (i.e., a few courses)</li>
 <li class="ui item">Basic C programming skills (i.e., a 1-semester course)</li>
 <li class="ui item">Elementary Linux command-line skills</li>
+<li class="ui item">Access to MPI documentation/tutorials</li>
 </ul>
 
 </div>

01_topic.md

@@ -4,5 +4,5 @@ title: Topic #1
 description: Basics of distributed memory programming
 ---
 
-{% include_relative topic_basics_of_distributed_memory_programming/index.md %}
+{% include_relative topic_basics_of_distributed_memory_programming/index.html %}
 

_includes/head.html

@@ -14,25 +14,30 @@
 
   <!-- Semantic UI, JQuery, etc. -->
   <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/semantic/semantic.min.css">
-  <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/public/css/basics.css">
+  <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/public/basics.css">
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
   <script src="{{ site.baseurl }}/semantic/components/accordion.js"></script>
   <script src="{{ site.baseurl }}/semantic/components/popup.js"></script>
   <script src="{{ site.baseurl }}/semantic/components/transition.js"></script>
+  <script src="{{ site.baseurl }}/semantic/components/tab.js"></script>
 
   <script language='javascript'>
                $(document).ready(function(){
                $('.ui.accordion').accordion();
-
-                 $('.popable')
-                     .popup({
-                       position: 'right center'
+               $('.popable')
+                   .popup({
+                     position: 'right center'
+                   })
+               ;
+                 $('.menu .item').tab();
+
+                 $('.paths.example .menu .item')
+                     .tab({
+                       context: '.paths.example'
                      })
                  ;
 
-
-
                });
   </script>
 

_includes/sidebar.html

@@ -12,7 +12,7 @@
 
 
   <a class="ui item {% if page.url ==  '/' %} active{% endif %}" href="{{site.baseurl}}">
-    <h4 class="ui header">Home</h4>
+    <h3 class="ui header">Home</h3>
   </a>
 
 
@@ -23,14 +23,14 @@ <h4 class="ui header">Home</h4>
   {% if node.navigate != false %}
   <a class="ui popable item fluid {% if page.url == node.url %} active{% endif %}" href="{{site.baseurl}}{{ node.url }}"
        data-content="{{node.description}}" data-variation="inverted">
-      <h4 class="ui header fluid">{{node.title}}
-      </h4>
+      <h3 class="ui header fluid">{{node.title}}
+      </h3>
   </a>
-
   {% endif %}
   {% endif %}
   {% endif %}
   {% endfor %}
+  <div class="ui divider" style="margin-top:0em"></div>
 
-  <div class="ui divider"></div>
 </div>
+

index.md

@@ -9,13 +9,18 @@ navigate: false
 <font size=+1>
 
 <p class="ui">
-SMPI CourseWare is a set of hands-on pedagogic material focused on teaching high performance computing and distributed memory computing in simulation. This is
+SMPI CourseWare is a set of hands-on pedagogic materials focused on teaching high performance computing and distributed memory computing in simulation. This is
 done with
   <a href="http://simgrid.gforge.inria.fr/simgrid/latest/doc/group__SMPI__API.html">SMPI</a> (Simulated MPI),
  a simulator for <a href="http://www.mpi-forum.org/docs/docs.html">MPI</a> applications provided as part of
  <a href="http://simgrid.gforge.inria.fr">SimGrid</a>.
  </p>
 
+<p class="ui">
+This not self-contained course. Although tutorial information is provided, the intent is for this material
+to be included into existing courses.
+</p>
+
 <p class="ui">
  Using the navigation bar on the left you can see the specific learning objectives, and explore the covered topics. Each topic consists of
  short tutorial information and of many hands-on activities. Topic #0 is a good place to start :)

topic_basics_of_distributed_memory_programming/about.html

@@ -0,0 +1,20 @@
+
+<p class="ui">This topic introduces basic but essential concepts for distributed-memory programming, such as:</p>
+
+  <ul class="ui list">
+    <li class="ui item"> Single-Program Multiple-Data (SPMD) programming style</li>
+    <li class="ui item"> The use of <i>process rank</i> to distribute work among processes</li>
+    <li class="ui item"> Local vs. Global indices for 1-D and 2-D data distribution of arrays</li>
+    <li class="ui item"> Simple message-passing to coordinate processes</li>
+  </ul>
+
+  <p class="ui">
+  In this topic we do not focus on performance at all, and we implement a "toy" application that
+  computes a Julia set and saves it as a bitmap file for display. Below is (a low-res version of) the
+  Julia set we will compute:
+  </p>
+
+  <p style="text-align:center;">
+    <img align="center" src="{{ site.baseurl}}/topic_basics_of_distributed_memory_programming/julia_small.jpg">
+  </p>
+

topic_basics_of_distributed_memory_programming/index.html

@@ -0,0 +1,47 @@
+
+
+
+<div class="ui pointing secondary menu">
+  <a class="item active" data-tab="first">About</a>
+  <a class="item " data-tab="second">Activity #1</a>
+  <a class="item" data-tab="third">Activity #2</a>
+  <a class="item" data-tab="fourth">Activity #3</a>
+</div>
+<div class="ui tab segment active" data-tab="first">
+  {% include_relative topic_basics_of_distributed_memory_programming/about.html %}
+</div>
+<div class="ui tab segment " data-tab="second">
+  <div class="ui top attached tabular menu">
+    <a class="item active" data-tab="second/a">2A</a>
+    <a class="item" data-tab="second/b">2B</a>
+    <a class="item" data-tab="second/c">2C</a>
+  </div>
+  <div class="ui bottom attached tab segment active" data-tab="second/a">2A</div>
+  <div class="ui bottom attached tab segment" data-tab="second/b">2B</div>
+  <div class="ui bottom attached tab segment" data-tab="second/c">2C</div>
+</div>
+<div class="ui tab segment" data-tab="third">
+  <div class="ui top attached tabular menu">
+    <a class="item" data-tab="third/a">3A</a>
+    <a class="item" data-tab="third/b">3B</a>
+    <a class="item" data-tab="third/c">3C</a>
+  </div>
+  <div class="ui bottom attached tab segment" data-tab="third/a">3A</div>
+  <div class="ui bottom attached tab segment" data-tab="third/b">3B</div>
+  <div class="ui bottom attached tab segment" data-tab="third/c">3C</div>
+</div>
+<div class="ui tab segment" data-tab="fourth">
+  <div class="ui top attached tabular menu">
+    <a class="item" data-tab="third/a">3A</a>
+    <a class="item" data-tab="third/b">3B</a>
+    <a class="item" data-tab="third/c">3C</a>
+  </div>
+  <div class="ui bottom attached tab segment" data-tab="third/a">3A</div>
+  <div class="ui bottom attached tab segment" data-tab="third/b">3B</div>
+  <div class="ui bottom attached tab segment" data-tab="third/c">3C</div>
+</div>
+
+
+<!--</div>-->
+
+

topic_basics_of_distributed_memory_programming/simple_spmd_program.html

@@ -0,0 +1,15 @@
+
+
+
+<div class="ui top attached tabular menu">
+  <a class="active item" data-tab="first">Step #1</a>
+  <a class="item" data-tab="second">Step #2</a>
+</div>
+<div class="ui bottom attached active tab segment" data-tab="first">
+  TBD
+</div>
+<div class="ui bottom attached tab segment" data-tab="second">
+  TBD
+</div>
+
+