diff options
| -rw-r--r-- | doc/member/member_guide.html | 2 | ||||
| -rw-r--r-- | doc/toc.html | 16 | ||||
| -rw-r--r-- | doc/tutorials/personal_channel.html | 181 |
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 |