Merge pull request #602 from anaqreon/doco

Update context help content and context page element focus feature.

27 files changed, 177 insertions, 0 deletions

diff --git a/doc/tutorials/assets/0965ace945f0c95ae38aa5bfedd230d2a7233d3915ac15d629f9dd845854.png b/doc/tutorials/assets/0965ace945f0c95ae38aa5bfedd230d2a7233d3915ac15d629f9dd845854.png
new file mode 100644
index 000000000..d5cf1093f
--- /dev/null
+++ b/doc/tutorials/assets/0965ace945f0c95ae38aa5bfedd230d2a7233d3915ac15d629f9dd845854.png
diff --git a/doc/tutorials/assets/1ebe02c205962dd25035c441631745d16acdb7a44e50d148256c8ad26a67.png b/doc/tutorials/assets/1ebe02c205962dd25035c441631745d16acdb7a44e50d148256c8ad26a67.png
new file mode 100644
index 000000000..d613925aa
--- /dev/null
+++ b/doc/tutorials/assets/1ebe02c205962dd25035c441631745d16acdb7a44e50d148256c8ad26a67.png
diff --git a/doc/tutorials/assets/2243e48ccea25bd907cce3dbd6fc9f7cd832a4c91a4c5dd294b7b219e7d8.png b/doc/tutorials/assets/2243e48ccea25bd907cce3dbd6fc9f7cd832a4c91a4c5dd294b7b219e7d8.png
new file mode 100644
index 000000000..c403bf806
--- /dev/null
+++ b/doc/tutorials/assets/2243e48ccea25bd907cce3dbd6fc9f7cd832a4c91a4c5dd294b7b219e7d8.png
diff --git a/doc/tutorials/assets/25eaad2435200f72a1dd3a00ba17a76ca6db4c246b3c4fa286b390cae7c8.png b/doc/tutorials/assets/25eaad2435200f72a1dd3a00ba17a76ca6db4c246b3c4fa286b390cae7c8.png
new file mode 100644
index 000000000..ca8ba6fb9
--- /dev/null
+++ b/doc/tutorials/assets/25eaad2435200f72a1dd3a00ba17a76ca6db4c246b3c4fa286b390cae7c8.png
diff --git a/doc/tutorials/assets/2b539d5a8474d6ec6dc91155b628d9be5f99ab04a78108ec404f53ec7bb5.png b/doc/tutorials/assets/2b539d5a8474d6ec6dc91155b628d9be5f99ab04a78108ec404f53ec7bb5.png
new file mode 100644
index 000000000..0da2d96e2
--- /dev/null
+++ b/doc/tutorials/assets/2b539d5a8474d6ec6dc91155b628d9be5f99ab04a78108ec404f53ec7bb5.png
diff --git a/doc/tutorials/assets/31f42a02bdbae095e0329db6c3814e2975979aff12f873f43d81724c5e61.png b/doc/tutorials/assets/31f42a02bdbae095e0329db6c3814e2975979aff12f873f43d81724c5e61.png
new file mode 100644
index 000000000..2a209b2be
--- /dev/null
+++ b/doc/tutorials/assets/31f42a02bdbae095e0329db6c3814e2975979aff12f873f43d81724c5e61.png
diff --git a/doc/tutorials/assets/324247680b605fd214fd61aecd8f216fa8f5dfa0f16a04c8e968fdbc43d0.png b/doc/tutorials/assets/324247680b605fd214fd61aecd8f216fa8f5dfa0f16a04c8e968fdbc43d0.png
new file mode 100644
index 000000000..f992672b0
--- /dev/null
+++ b/doc/tutorials/assets/324247680b605fd214fd61aecd8f216fa8f5dfa0f16a04c8e968fdbc43d0.png
diff --git a/doc/tutorials/assets/3656a67dce40a1fc2515e9089217f2e136d4fcf8babe77bac00ecaad43ce.png b/doc/tutorials/assets/3656a67dce40a1fc2515e9089217f2e136d4fcf8babe77bac00ecaad43ce.png
new file mode 100644
index 000000000..b656192dc
--- /dev/null
+++ b/doc/tutorials/assets/3656a67dce40a1fc2515e9089217f2e136d4fcf8babe77bac00ecaad43ce.png
diff --git a/doc/tutorials/assets/458a842c2ea0fbe3b7869bb14dfffe1e5be098d1cd6e590bbead25b4cc05.png b/doc/tutorials/assets/458a842c2ea0fbe3b7869bb14dfffe1e5be098d1cd6e590bbead25b4cc05.png
new file mode 100644
index 000000000..6129195b6
--- /dev/null
+++ b/doc/tutorials/assets/458a842c2ea0fbe3b7869bb14dfffe1e5be098d1cd6e590bbead25b4cc05.png
diff --git a/doc/tutorials/assets/4aaaf1e124514c8d6999a5fe1d07be5af460cda4ba6cde9106ebc1564bb0.png b/doc/tutorials/assets/4aaaf1e124514c8d6999a5fe1d07be5af460cda4ba6cde9106ebc1564bb0.png
new file mode 100644
index 000000000..923403fe9
--- /dev/null
+++ b/doc/tutorials/assets/4aaaf1e124514c8d6999a5fe1d07be5af460cda4ba6cde9106ebc1564bb0.png
diff --git a/doc/tutorials/assets/4cf326152797a8ecdf5630e921756f825ee00f8ee464d3ef9fed971d2852.png b/doc/tutorials/assets/4cf326152797a8ecdf5630e921756f825ee00f8ee464d3ef9fed971d2852.png
new file mode 100644
index 000000000..f158ad5d9
--- /dev/null
+++ b/doc/tutorials/assets/4cf326152797a8ecdf5630e921756f825ee00f8ee464d3ef9fed971d2852.png
diff --git a/doc/tutorials/assets/75d2927b7ad0d2043d4d3b6ba1364fac8ead173edd39340adaf78be11c9d.png b/doc/tutorials/assets/75d2927b7ad0d2043d4d3b6ba1364fac8ead173edd39340adaf78be11c9d.png
new file mode 100644
index 000000000..edc8b01cc
--- /dev/null
+++ b/doc/tutorials/assets/75d2927b7ad0d2043d4d3b6ba1364fac8ead173edd39340adaf78be11c9d.png
diff --git a/doc/tutorials/assets/7c976a06662a1357b3da8ed0680d1a721c85f2ae2bdd5739a8def466010e.png b/doc/tutorials/assets/7c976a06662a1357b3da8ed0680d1a721c85f2ae2bdd5739a8def466010e.png
new file mode 100644
index 000000000..5b259058b
--- /dev/null
+++ b/doc/tutorials/assets/7c976a06662a1357b3da8ed0680d1a721c85f2ae2bdd5739a8def466010e.png
diff --git a/doc/tutorials/assets/99a6efda4df631dfb2d2a849412044cc6a0f8aebeac289d28786f2649d24.png b/doc/tutorials/assets/99a6efda4df631dfb2d2a849412044cc6a0f8aebeac289d28786f2649d24.png
new file mode 100644
index 000000000..c03ffd18d
--- /dev/null
+++ b/doc/tutorials/assets/99a6efda4df631dfb2d2a849412044cc6a0f8aebeac289d28786f2649d24.png
diff --git a/doc/tutorials/assets/9eae9fad774a4cd29e665961d35affbd053368056f562c58200fb41027b0.png b/doc/tutorials/assets/9eae9fad774a4cd29e665961d35affbd053368056f562c58200fb41027b0.png
new file mode 100644
index 000000000..65d4c5f0a
--- /dev/null
+++ b/doc/tutorials/assets/9eae9fad774a4cd29e665961d35affbd053368056f562c58200fb41027b0.png
diff --git a/doc/tutorials/assets/b0bfdf02aef3710a37bb6092c3240b291eca8afa73133b3ac03b86f3302d.png b/doc/tutorials/assets/b0bfdf02aef3710a37bb6092c3240b291eca8afa73133b3ac03b86f3302d.png
new file mode 100644
index 000000000..45609a7bb
--- /dev/null
+++ b/doc/tutorials/assets/b0bfdf02aef3710a37bb6092c3240b291eca8afa73133b3ac03b86f3302d.png
diff --git a/doc/tutorials/assets/b334915c03a665493915598c69c17a87c910a39db2cd3b5292e4623ea4c4.png b/doc/tutorials/assets/b334915c03a665493915598c69c17a87c910a39db2cd3b5292e4623ea4c4.png
new file mode 100644
index 000000000..d239d6965
--- /dev/null
+++ b/doc/tutorials/assets/b334915c03a665493915598c69c17a87c910a39db2cd3b5292e4623ea4c4.png
diff --git a/doc/tutorials/assets/b3eece28e8db67f1024af42055f0f24ed5e81ba622aca8cac576ccf5930e.png b/doc/tutorials/assets/b3eece28e8db67f1024af42055f0f24ed5e81ba622aca8cac576ccf5930e.png
new file mode 100644
index 000000000..45ed64d00
--- /dev/null
+++ b/doc/tutorials/assets/b3eece28e8db67f1024af42055f0f24ed5e81ba622aca8cac576ccf5930e.png
diff --git a/doc/tutorials/assets/bdbcf0ffd9004657237f6b7b7863da5a8e39a5bc17d2c67fa160efef2056.png b/doc/tutorials/assets/bdbcf0ffd9004657237f6b7b7863da5a8e39a5bc17d2c67fa160efef2056.png
new file mode 100644
index 000000000..fcaed8bef
--- /dev/null
+++ b/doc/tutorials/assets/bdbcf0ffd9004657237f6b7b7863da5a8e39a5bc17d2c67fa160efef2056.png
diff --git a/doc/tutorials/assets/c4cad3e4c356dd2a227df79bd4dc6d47edf1b66ea243f005b6b452ec366b.png b/doc/tutorials/assets/c4cad3e4c356dd2a227df79bd4dc6d47edf1b66ea243f005b6b452ec366b.png
new file mode 100644
index 000000000..0ccfc8995
--- /dev/null
+++ b/doc/tutorials/assets/c4cad3e4c356dd2a227df79bd4dc6d47edf1b66ea243f005b6b452ec366b.png
diff --git a/doc/tutorials/assets/c9a880cc82ffa1f7c2f460397bb083bf7dc2a2b8f065e64da598b45b4a2b.png b/doc/tutorials/assets/c9a880cc82ffa1f7c2f460397bb083bf7dc2a2b8f065e64da598b45b4a2b.png
new file mode 100644
index 000000000..1cb4d2d22
--- /dev/null
+++ b/doc/tutorials/assets/c9a880cc82ffa1f7c2f460397bb083bf7dc2a2b8f065e64da598b45b4a2b.png
diff --git a/doc/tutorials/assets/d080e92d797af5e863fa39b2084c16a8410de1f7a6559633435817444aef.png b/doc/tutorials/assets/d080e92d797af5e863fa39b2084c16a8410de1f7a6559633435817444aef.png
new file mode 100644
index 000000000..22e4cb5d5
--- /dev/null
+++ b/doc/tutorials/assets/d080e92d797af5e863fa39b2084c16a8410de1f7a6559633435817444aef.png
diff --git a/doc/tutorials/assets/e05248fdc5688d6d24bde52432fdc7b39692a094559aa504de99352940b1.png b/doc/tutorials/assets/e05248fdc5688d6d24bde52432fdc7b39692a094559aa504de99352940b1.png
new file mode 100644
index 000000000..5674f5207
--- /dev/null
+++ b/doc/tutorials/assets/e05248fdc5688d6d24bde52432fdc7b39692a094559aa504de99352940b1.png
diff --git a/doc/tutorials/assets/e5d5674a34e848e2cce90a60fc416415271d9c51b81ad2a950fb0157222a.png b/doc/tutorials/assets/e5d5674a34e848e2cce90a60fc416415271d9c51b81ad2a950fb0157222a.png
new file mode 100644
index 000000000..e6b4a9974
--- /dev/null
+++ b/doc/tutorials/assets/e5d5674a34e848e2cce90a60fc416415271d9c51b81ad2a950fb0157222a.png
diff --git a/doc/tutorials/assets/ef78bc6aa3fafebd46f353514c907b3fdfe019918fc5553bb3f31388a36f.png b/doc/tutorials/assets/ef78bc6aa3fafebd46f353514c907b3fdfe019918fc5553bb3f31388a36f.png
new file mode 100644
index 000000000..8de042ae4
--- /dev/null
+++ b/doc/tutorials/assets/ef78bc6aa3fafebd46f353514c907b3fdfe019918fc5553bb3f31388a36f.png
diff --git a/doc/tutorials/assets/facb0bdfdecb4c779de9048cd14b417c0d76de17af476be5f296b78d70e9.png b/doc/tutorials/assets/facb0bdfdecb4c779de9048cd14b417c0d76de17af476be5f296b78d70e9.png
new file mode 100644
index 000000000..cec391fb4
--- /dev/null
+++ b/doc/tutorials/assets/facb0bdfdecb4c779de9048cd14b417c0d76de17af476be5f296b78d70e9.png
diff --git a/doc/tutorials/personal_channel.html b/doc/tutorials/personal_channel.html
new file mode 100644
index 000000000..37c9fc63a
--- /dev/null
+++ b/doc/tutorials/personal_channel.html
@@ -0,0 +1,177 @@
+<p><strong>Table of Contents</strong></p>
+
+<ul id="tutorial-toc">
+    <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>
+
+<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="/help/tutorials/assets/c9a880cc82ffa1f7c2f460397bb083bf7dc2a2b8f065e64da598b45b4a2b.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="/help/tutorials/assets/3656a67dce40a1fc2515e9089217f2e136d4fcf8babe77bac00ecaad43ce.png" alt="image"><img class="img-responsive" src="/help/tutorials/assets/4aaaf1e124514c8d6999a5fe1d07be5af460cda4ba6cde9106ebc1564bb0.png" alt="image"><img class="img-responsive" src="/help/tutorials/assets/99a6efda4df631dfb2d2a849412044cc6a0f8aebeac289d28786f2649d24.png" alt="image"><img class="img-responsive" src="/help/tutorials/assets/e5d5674a34e848e2cce90a60fc416415271d9c51b81ad2a950fb0157222a.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="/help/tutorials/assets/2243e48ccea25bd907cce3dbd6fc9f7cd832a4c91a4c5dd294b7b219e7d8.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="/help/tutorials/assets/31f42a02bdbae095e0329db6c3814e2975979aff12f873f43d81724c5e61.png" alt="image"></p>
+
+<p>Upload your photo and size as necessary using the image editor.</p>
+
+<p><img class="img-responsive" src="/help/tutorials/assets/458a842c2ea0fbe3b7869bb14dfffe1e5be098d1cd6e590bbead25b4cc05.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="/help/tutorials/assets/d080e92d797af5e863fa39b2084c16a8410de1f7a6559633435817444aef.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="/help/tutorials/assets/1ebe02c205962dd25035c441631745d16acdb7a44e50d148256c8ad26a67.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="/help/tutorials/assets/b0bfdf02aef3710a37bb6092c3240b291eca8afa73133b3ac03b86f3302d.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="/help/tutorials/assets/7c976a06662a1357b3da8ed0680d1a721c85f2ae2bdd5739a8def466010e.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="/help/tutorials/assets/2b539d5a8474d6ec6dc91155b628d9be5f99ab04a78108ec404f53ec7bb5.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="/help/tutorials/assets/0965ace945f0c95ae38aa5bfedd230d2a7233d3915ac15d629f9dd845854.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="/help/tutorials/assets/9eae9fad774a4cd29e665961d35affbd053368056f562c58200fb41027b0.png" alt="image"></p>
+
+<p>Crop the image using the photo editor and save your changes.</p>
+
+<p><img class="img-responsive" src="/help/tutorials/assets/b3eece28e8db67f1024af42055f0f24ed5e81ba622aca8cac576ccf5930e.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="/help/tutorials/assets/4cf326152797a8ecdf5630e921756f825ee00f8ee464d3ef9fed971d2852.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="/help/tutorials/assets/ef78bc6aa3fafebd46f353514c907b3fdfe019918fc5553bb3f31388a36f.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="/help/tutorials/assets/75d2927b7ad0d2043d4d3b6ba1364fac8ead173edd39340adaf78be11c9d.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="/help/tutorials/assets/b334915c03a665493915598c69c17a87c910a39db2cd3b5292e4623ea4c4.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="/help/tutorials/assets/facb0bdfdecb4c779de9048cd14b417c0d76de17af476be5f296b78d70e9.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="/help/tutorials/assets/25eaad2435200f72a1dd3a00ba17a76ca6db4c246b3c4fa286b390cae7c8.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="/help/tutorials/assets/bdbcf0ffd9004657237f6b7b7863da5a8e39a5bc17d2c67fa160efef2056.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="/help/tutorials/assets/324247680b605fd214fd61aecd8f216fa8f5dfa0f16a04c8e968fdbc43d0.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="/help/tutorials/assets/e05248fdc5688d6d24bde52432fdc7b39692a094559aa504de99352940b1.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="/help/tutorials/assets/c4cad3e4c356dd2a227df79bd4dc6d47edf1b66ea243f005b6b452ec366b.png" alt="image"></p>
+
+        
\ No newline at end of file