Added Tutorials section with a Personal Channel tutorial

3 files changed, 198 insertions, 1 deletions

diff --git a/doc/member/member_guide.html b/doc/member/member_guide.html
index 6614a4b2d..d104b19c8 100644
--- a/doc/member/member_guide.html
+++ b/doc/member/member_guide.html
@@ -15,4 +15,4 @@ new ideas are related to the <strong>decentralized</strong> nature of the grid;
 with the advanced <strong>permissions system</strong> that is necessary to protect your data privacy.
 The purpose of this guide is to help you understand how to create, configure, and
 use your nomadic identity.
-</p>
\ No newline at end of file
+</p>
diff --git a/doc/toc.html b/doc/toc.html
index 45214e210..4ee6eeea1 100644
--- a/doc/toc.html
+++ b/doc/toc.html
@@ -77,6 +77,19 @@
             </ul>
         </div>
     </div>
+    <div class="panel">
+        <div class="panel-heading">
+            <h4 class="panel-title">
+                <a data-toggle="collapse" data-parent="#accordion" href="#tutorials"><span class="glyphicon glyphicon-folder-open">
+                    </span>Tutorials</a>
+            </h4>
+        </div>
+        <div id="tutorials" class="panel-collapse collapse">
+            <ul class="list-group">
+                <li class="doco-list-group-item"><a href="/help/tutorials/personal_channel">Personal Channel</a></li>
+            </ul>
+        </div>
+    </div>
 </div>
 
 <script>
@@ -85,6 +98,9 @@
         var url = document.createElement('a');
         url.href = window.location;
         switch (url.pathname.split('/')[2]) {
+            case 'tutorials':
+                $('#tutorials').addClass('in');
+                break;
             case 'about':
                 $('#about').addClass('in');
                 break;
diff --git a/doc/tutorials/personal_channel.html b/doc/tutorials/personal_channel.html
new file mode 100644
index 000000000..6a65461ed
--- /dev/null
+++ b/doc/tutorials/personal_channel.html
@@ -0,0 +1,181 @@
+<p><strong>Table of Contents</strong></p>
+
+<ul id="tutorial-toc">
+    <li><a href="/help/tutorials/personal_channel#personal-channel">Personal Channel</a>
+        <ul>
+            <li><a href="/help/tutorials/personal_channel#Create_a_new_channel">Create a new channel</a></li>
+            <li><a href="/help/tutorials/personal_channel#Configure_your_channel_features">Configure your channel features</a></li>
+            <li><a href="/help/tutorials/personal_channel#Add_a_profile_photo">Add a profile photo</a></li>
+            <li><a href="/help/tutorials/personal_channel#Compose_a_post">Compose a post</a></li>
+            <li><a href="/help/tutorials/personal_channel#Use_an_uploaded_image_as_a_channel_cover_photo">Use an uploaded image as a channel cover photo</a></li>
+            <li><a href="/help/tutorials/personal_channel#Make_a_connection">Make a connection</a></li>
+        </ul>
+    </li>
+</ul>
+
+<hr>
+
+<h1 id="personal-channel">Personal Channel</h1>
+
+<p>This tutorial is intended to be followed in sequence as if you were setting up a 
+channel for the first time. It introduces some of the tools and features related 
+to a personal channel in a natural way.</p>
+
+<h1 id="Create_a_new_channel">Create a new channel</h1>
+
+<p>When you log in for the first time after registering, you must create a channel. 
+(Alternatively you can load https://grid.reticu.li/new_channel)</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/c9a880cc82ffa1f7c2f460397bb083bf7dc2a2b8f065e64da598b45b4a2b2dca-1.png" alt="image"></p>
+
+<p>Enter your name and a nickname for the channel address, and select a "role". 
+Typically if this is a personal channel that represents you, select a <strong>Social</strong> role 
+with a level of default privacy that you are comfortable with. If you are unsure, 
+select <strong>Social - Restricted</strong>.</p>
+
+<h1 id="Configure_your_channel_features">Configure your channel features</h1>
+
+<p>When your new channel is created you are directed to the channel settings page. 
+Take the time to look around at all the settings pages to familiarize yourself with 
+your options, even if you don't understand everything you see right now.</p>
+
+<p>Navigate to the <strong>Additional Features</strong> settings and follow the screenshots below to 
+enable various features. Remember to press the Submit button when you are done with
+your selections.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/3656a67dce40a1fc2515e9089217f2e136d4fcf8babe77bac00ecaad43ceca5a-1.png" alt="image"><img class="img-responsive" src="https://grid.reticu.li/photo/4aaaf1e124514c8d6999a5fe1d07be5af460cda4ba6cde9106ebc1564bb063cd-1.png" alt="image"><img class="img-responsive" src="https://grid.reticu.li/photo/99a6efda4df631dfb2d2a849412044cc6a0f8aebeac289d28786f2649d2413cc-1.png" alt="image"><img class="img-responsive" src="https://grid.reticu.li/photo/e5d5674a34e848e2cce90a60fc416415271d9c51b81ad2a950fb0157222a038c-1.png" alt="image"></p>
+
+<h1 id="Add_a_profile_photo">Add a profile photo</h1>
+
+<p>Navigate to your channel home by clicking the "Home" icon on the left side of the 
+navbar, and then select the <strong>About</strong> tab to view your profile.</p>
+
+<p>Press the <strong>Edit</strong> button on the right to edit your profile information.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/2243e48ccea25bd907cce3dbd6fc9f7cd832a4c91a4c5dd294b7b219e7d8648e-1.png" alt="image"></p>
+
+<p>From the <strong>Profile Tools</strong> dropdown menu, select the <strong>Change profile photo</strong></p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/31f42a02bdbae095e0329db6c3814e2975979aff12f873f43d81724c5e61190a-1.png" alt="image"></p>
+
+<p>Upload your photo and size as necessary using the image editor.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/458a842c2ea0fbe3b7869bb14dfffe1e5be098d1cd6e590bbead25b4cc050b9d-1.png" alt="image"></p>
+
+<p>When you press <strong>Submit</strong> you will be redirected back to the profile editor. 
+(You might need to clear your browser cache if you have trouble seeing the new photo.)</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/d080e92d797af5e863fa39b2084c16a8410de1f7a6559633435817444aef00b4-1.png" alt="image"></p>
+
+<p>Returning to your channel home page you will see that a post notifying others of your new 
+profile pic has been automatically posted.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/1ebe02c205962dd25035c441631745d16acdb7a44e50d148256c8ad26a674921-1.png" alt="image"></p>
+
+<h1 id="Compose_a_post">Compose a post</h1>
+
+<p>Go to your channel home and open the post editor by pressing the <strong>Share</strong> textbox 
+at the top of the channel "wall". Enter a message, and then drag-and-drop an image 
+file into the post editor text area (alternatively you can use the <strong>Attach file</strong> 
+tool at the bottom).</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/b0bfdf02aef3710a37bb6092c3240b291eca8afa73133b3ac03b86f3302dcf56-1.png" alt="image"></p>
+
+<p>Your image file will be automatically uploaded and stored in your cloud files, and 
+a link will appear in the post window. Pressing the post preview button will allow you to preview your post before publishing it.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/7c976a06662a1357b3da8ed0680d1a721c85f2ae2bdd5739a8def466010e9549-1.png" alt="image"></p>
+
+<p>Pressing the lock button near the Submit button will open the <strong>Access Control List</strong> 
+so you can specify exactly who can access this post.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/2b539d5a8474d6ec6dc91155b628d9be5f99ab04a78108ec404f53ec7bb5b5ea-1.png" alt="image"></p>
+
+<h1 id="Use_an_uploaded_image_as_a_channel_cover_photo">Use an uploaded image as a channel cover photo</h1>
+
+<p>One way to add some pizzazz your channel is to add a cover photo that visitors will 
+see when they load your channel page. Hubzilla's integrated cloud file system 
+allows you to choose an existing photo for this purpose.</p>
+
+<p>Visit your photos in the <strong>Photos</strong> app</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/0965ace945f0c95ae38aa5bfedd230d2a7233d3915ac15d629f9dd845854a485-1.png" alt="image"></p>
+
+<p>Select the photo you wish to use and select <strong>Use as cover photo</strong> from the <strong>Photo Tools</strong>
+dropdown menu.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/9eae9fad774a4cd29e665961d35affbd053368056f562c58200fb41027b092eb-1.png" alt="image"></p>
+
+<p>Crop the image using the photo editor and save your changes.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/b3eece28e8db67f1024af42055f0f24ed5e81ba622aca8cac576ccf5930ee9f0-1.png" alt="image"></p>
+
+<p>When you load your channel home page, you will first see the cover photo, and your
+channel page will fade in as you scroll down.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/4cf326152797a8ecdf5630e921756f825ee00f8ee464d3ef9fed971d2852936e-1.png" alt="image"></p>
+
+<h1 id="Make_a_connection">Make a connection</h1>
+
+<p>Making connections between channels to share things is what Hubzilla is all about. 
+Making a connection is simple. If you do not already know how to reach a channel's home
+page, you might try a directory search by opening the <strong>Directory</strong> link on the right 
+side of the top navbar.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/ef78bc6aa3fafebd46f353514c907b3fdfe019918fc5553bb3f31388a36faabf-1.png" alt="image"></p>
+
+<p>You can connect directly from the directory entry using the <strong>Connect</strong> button there, 
+or you can open the channel page first and press the <strong>Connect</strong> button below the 
+profile photo.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/75d2927b7ad0d2043d4d3b6ba1364fac8ead173edd39340adaf78be11c9d0c7a-1.png" alt="image"></p>
+
+<p>After you connect you are immediately taken to the connection editor page, where 
+you make some important decisions about what you plan to share with this channel.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/b334915c03a665493915598c69c17a87c910a39db2cd3b5292e4623ea4c4a45c-1.png" alt="image"></p>
+
+<p>The two important settings are</p>
+
+<ul><li>The individual permissions for the newly connected channel</li>
+<li>The privacy group(s) the connection is a member of</li>
+</ul><p>The individual permissions are mostly straightforward, but they can be slightly 
+unclear at first. For example, <strong>Can view my file storage and photos</strong> does <em>not</em>
+mean that the connected channel will be able to view <em>all</em> of your photos and files! 
+It means that you will have the <em>option</em> to share photos and files with that 
+channel. It is perfectly possible for you to allow someone to read your posts but
+disallow them from seeing photos in that post. This kind of unusual situation is, 
+as they say, not a bug; it is a feature.</p>
+
+<p>Privacy groups allow you to conveniently share items with groups of people. You can
+create whatever groups fit your needs by opening the <strong>Add privacy group</strong> link.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/facb0bdfdecb4c779de9048cd14b417c0d76de17af476be5f296b78d70e993e3-1.png" alt="image"></p>
+
+<p>In this editor, you can switch between the existing privacy groups and see at a 
+glance what channels are and are not members of the group. Selecting the icon of 
+a channel in either box will move it to the in or out of the group.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/25eaad2435200f72a1dd3a00ba17a76ca6db4c246b3c4fa286b390cae7c86971-1.png" alt="image"></p>
+
+<p>When editing an individual channel's settings, you can set their privacy group 
+membership using the widget on the left:</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/bdbcf0ffd9004657237f6b7b7863da5a8e39a5bc17d2c67fa160efef205661bf-1.png" alt="image"></p>
+
+<p>Connections are a mutual engagement. The channel you connect can <em>choose</em> to approve your
+connection. They will receive a notification that you connected</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/324247680b605fd214fd61aecd8f216fa8f5dfa0f16a04c8e968fdbc43d04469-1.png" alt="image"></p>
+
+<p>which takes them to their <a href="https://grid.reticu.li/connections"><strong>Connections</strong></a> editor page where 
+they can choose to approve the connection or not.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/e05248fdc5688d6d24bde52432fdc7b39692a094559aa504de99352940b10497-1.png" alt="image"></p>
+
+<p>After you approve a connection, it is a good idea to open the individual connection 
+editor by pressing the edit button beside the <strong>Delete</strong> button.</p>
+
+<p><img class="img-responsive" src="https://grid.reticu.li/photo/c4cad3e4c356dd2a227df79bd4dc6d47edf1b66ea243f005b6b452ec366b5acc-1.png" alt="image"></p>
+
+        
\ No newline at end of file