Merge branch 'dishub_basics' into 'master'

Rewrite of the basics part (dishub howto)

See merge request disroot/howto!57
This commit is contained in:
muppeth 2018-07-25 10:25:31 +02:00
commit 6b15b89ada
33 changed files with 179 additions and 92 deletions

View File

@ -0,0 +1,49 @@
---
title: User Interface
published: true
taxonomy:
category:
- docs
page-toc:
active: false
---
## User Interface Overview
After logging in, filled out your profile and created a channel, this is, almost for sure, how your channel will look like:
![basics_interface](en/Basics_interface.png)
Yes, it doesnt look much pretty, huh? But, dont get into a daze, by the end of this overview, you should be able to make your channel looks more like this...
![basics_interface_improved](en/Basics_interface_improved.png)
… (or even better) and know where are the most important tools and features, what are they for and what the possibilities of each one of them. And that would be just the beginning.
Lets start by knowing the spaces our new home first. Later you could decorated whatever you want.
For the purpose of this tutorial we will name the parts, or blocks, of the User Interface (UI) in order to identify them later.
![basics_UI](en/Basics_UI.png)</br>
01. **Navigation bar**: From here you access to your personal settings, the menu, the network and public streams, apps, the directory, wikis, the chat, etc. It is very customizable, and it functions like a shortcut and launch applications bar. [To know more about it...](../Navigation_bar)
02. **Profile section**: Here theres some basic information about your channel, like your name and hub address. You can add more info if you want. [To know more about it...](../../02.Channels/02.Profiles)
03. **Share box**: The place where you write and share your thoughts, things you like, your photos, compose articles, etc. By clicking on it the post compositor opens. Its a very well-suited editor to compose and edit your post or shares. [To know more about it...](../../05.Posts)
04. **Activity Notifications**: It informs you about what is happening in the network stream, in the public stream and if you received a connection request, a mail, if someone commented a post youve created or a post that youve been following. Well see about it later.
05. **Connections**: Here you can see some of your connections (those you interact the most) and the common connections you may have with other users while visiting a channel. [To know more about it...](../../03.Connections)
06. **Channel stream**: It works like the “wall” of most social networks, its the place where you see your posts, the comments on them (if theyre enable), the posts youve re-shared, and those from the people youve give permissions to write on it, the posts of your connections. [To know more about it...](../../05.Posts)
07. **Right side widgets**: This space can be used not only as a widget section, but almost anything you want to have accessible (information, apps, notes, sites, shortcuts, etc, as well see later) can be setted to appear in this place.
**NOTE: On the mobile version, the sidebars are hidden.** If you want to show the left sidebar you have to click on the arrow icon.</br>
![MobileLeftBar](en/MobileLeftBar.gif)</br>
The right bar is limited to activity notifications only. If you want to see the notifications, click on the exclamation point icon.</br>
![MobileLeftBar](en/MobilerightBar.gif)</br>

View File

Before

Width:  |  Height:  |  Size: 333 KiB

After

Width:  |  Height:  |  Size: 333 KiB

View File

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

View File

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

View File

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 102 KiB

View File

Before

Width:  |  Height:  |  Size: 359 KiB

After

Width:  |  Height:  |  Size: 359 KiB

View File

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

View File

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View File

Before

Width:  |  Height:  |  Size: 283 KiB

After

Width:  |  Height:  |  Size: 283 KiB

View File

Before

Width:  |  Height:  |  Size: 200 KiB

After

Width:  |  Height:  |  Size: 200 KiB

View File

@ -0,0 +1,107 @@
---
title: Navigation Bar
published: true
taxonomy:
category:
- docs
page-toc:
active: false
---
# Navigation bar
Here is the navigation bar:
![Basics_navigation_ bar](en/Basics_navigation_bar.png)
Here are some of the important icons you need to understand:
1. Profile: ![Profile](en/Basics_profile_icon.png)
2. Home Channel: ![home](en/Icon_home.png)
3. Network stream: ![home](en/Icon_network_stream.png)
4. Public stream: ![home](en/Icon_public_stream.png)
5. Connections: ![home](en/Icon_connections.png)
6. Directory: ![home](en/Icon_directory.png)
**Note:** On mobile pinned apps are hidden and only accessible through the hamburger menu on the right ![MobileNavigationBar](en/MobileNavigationBar.png)
![Profile](en/Basics_profile_icon.png) **Profile**: By clicking on it, you access to view and edit your profile, your channel manager, the general settings and to log out.
## 1. Profile: ![Profile](en/Basics_profile_icon.png)
A profile is a collection of information about yourself so you can have different profiles depending on the data you want to share with different users or groups. For example: your public or default profile (which is always available to the general public and cant be hidden) is GNU/Linux and FOSS related. You set the permissions and establish connections with those who may share those interests. But if you have your group of friends that dont care about that much, and you dont want to bore them with it, you can create a new profile with a new set of permissions called “friends”, that allow its members access only to another kind of information.
When you click on the profile icon, you have access to different options.
### View Profiles
Clicking on “View profile” youll see your public profile with the information you has submited, such as your name and tags. You can edit this public profile by clicking on the Edit option at the right of the profile title bar.
(See Profiles Settings for more information about configuration)
![basics_profile](en/Basics_profile.png)
[To know more about profiles and the available options...]((../../02.Channels/02.Profiles))
### Edit Profiles
Here you can see your default and created profiles if there any or create new ones.
(See Profiles Settings for more information about creating and managing profiles)
[To know more about profiles and the available options...]((../../02.Channels/02.Profiles))
### Channel Manager
From here you can manage your channels and create new ones.
Note: Channels are different from profiles. A profile is a collection of information about yourself so you can have different profiles depending on the data you want to share with different users or groups. For example: your public or default profile (which is always available to the general public and cant be hidden) is GNU/Linux and FOSS related. You set the permissions and establish connections with those who may share those interests. But if you have your group of friends that dont care about that much, and you dont want to bore them with it, you can create a new profile with a new set of permissions called “friends”, that allow its members access only to another kind of information.
A channel, on the other hand, its the space on the web that contains collections of content stored in one place, thats the stream (will see that later). What kind of content? Well, thats exactly the point of it. You can create different channels for different kinds of content and specifies whose of your contacts or public can see it. In other words, a profile is information about you and a channel is the space where specific information its gathered and showed up.
Click on the **Channel Manager** to access its options.
![basics_channel_manager](en/Basics_channel_manager.png)
From here you can create and switch between channels. The process to create a channel its the same as when you create your first one.
[To know more about channels and the available options...](../../02.Channels)
### Settings
By clicking on it, you will access to the Account, Channel, Features settings and other configurations.
![basics_settings](en/Basics_settings.png)
!!! The settings options are on the left sidebar. So if you want to show the options on mobile you have to clikc on the arrow icon in the nav bar. ![ArrowIcon](en/ArrowIcon.png)
##### Account settings
In the **Account settings** you can change your email address, your password and set Your **technical skill level**. Every level sets different user features according to what you expect or want to do. By default, DisHub skill level is **4. Expert**, in orden to provide most of the features available.
There are five levels. From level 1 on, each one of them progressively enables Additional features.
0. Beginner/Basic
1. Novice - not skilled but willing to learn
2. Intermediate - somewhat comfortable
3. Advanced - very comfortable
4. Expert - I can write computer code
5. Wizard - I probably know more than you do
##### Channel settings:
This is one of the most important settings. These howtos will refer to it a lot.
![basics_channel_settings](en/Basics_channel_settings.png)
## 2. Home Channel: ![home](en/Icon_home.png)
It works like the “wall” of most social networks, its the place where you see your posts, the comments on them (if theyre enable), the posts youve re-shared, and those from the people youve give permissions to write on it.
Everything is already pretty well explained [here](../01.Basics)
## 3. Network stream: ![home](en/Icon_network_stream.png)
It looks a lot like the **Home Channel**. Except that here, you see not only your posts and comments, but also the posts and comments of your connections, if you allowed them to.
![Network_stream](en/Network_stream.png)
You can filter those posts in different ways.
1. You can use the Affinity tool bar  [More info about it](../../07.Features/01.Connection_filtering)
2. You can click on the different tabs.
![Filter_tabs](en/Filter_tabs.png)
## 4. Public stream: ![home](en/Icon_public_stream.png)
Here, you can see ANYONE posts and comments published in the fediverse, so any Hubzilla, Mastodon, Diaspora, etc., servers.
![Public_stream](en/Public_stream.png)
You can filter those posts by clicking on the cloudwords in **Trending**.
You can also use the **search box** to look for a tag, an user, etc. ![Search_box](en/Search_box.png)
## 5. Connections: ![home](en/Icon_connections.png)
It allows to see your connections and to edit them [Informations here](../../03.Connections)
## 6. Directory: ![home](en/Icon_directory.png)
It allows to see any channel on hubzilla (not just Dishub)
![Directory](en/Directory.png)

View File

Before

Width:  |  Height:  |  Size: 789 B

After

Width:  |  Height:  |  Size: 789 B

View File

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

View File

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

View File

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 770 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 533 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 822 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 573 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 785 B

View File

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -8,102 +8,22 @@ page-toc:
active: false
---
## User Interface Overview
After logging in, filled out your profile and created a channel, this is, almost for sure, how your channel will look like:
# How to start really quick?
1. Log in https://hub.disroot.org/ using your Disroot credential (**use the Disroot email, not just the username**)
2. Then, you have to **create a channel**. Indeed, you're not really an user on Hubzilla: you're a channel, or even several channels (a person, an organization, a theme, etc). That means that when you first log in with your Disroot account, you have to create a channel. [To create my channel](../../02.Channels/01.Creation)
3. You will have to choose a **role for your channel**, that means a set of permissions. **Social - Mostly public** is the most typical one you may want to choose. [To know more about roles and permissions](../../04.Permissions)
4. When your new channel is created, you will have to **create a profile** for this channel. You can give as much informations about it as you want. Or as little as you want! You may even create different profiles for a same channel! [To know more about profiles](../../02.Channels/02.Profiles)
![basics_interface](en/Basics_interface.png)
**You're done!**
Yes, it doesnt look much pretty, huh? But, dont get into a daze, by the end of this overview, you should be able to make your channel looks more like this...
Now, you can **create post**:
![Share_box](en/Share_box.png)
![basics_interface_improved](en/Basics_interface_improved.png)
[To know how](../../05.Posts)
… (or even better) and know where are the most important tools and features, what are they for and what the possibilities of each one of them. And that would be just the beginning.
Or you can **add friends** (called *connections* in hubzilla) that you can follow: ![Connections](en/Connections.png)
Lets start by knowing the spaces our new home first. Later you could decorated whatever you want.
For the purpose of this tutorial we will name the parts, or blocks, of the User Interface (UI) in order to identify them later.
![basics_UI](en/Basics_UI.png)</br>
**NOTE: On the mobile version, the sidebars are hidden.** If you want to show the left sidebar you have to click on the arrow icon.</br>
![MobileLeftBar](en/MobileLeftBar.gif)</br>
The right bar is limited to activity notifications only. If you want to see the notifications, click on the exclamation point icon.</br>
![MobileLeftBar](en/MobilerightBar.gif)</br>
01. **Navigation bar**: From here you access to your personal settings, the menu, the network and public streams, apps, the directory, wikis, the chat, etc. It is very customizable, and it functions like a shortcut and launch applications bar.
02. **Profile section**: Here theres some basic information about your channel, like your name and hub address. You can add more info if you want.
03. **Share box**: The place where you write and share your thoughts, things you like, your photos, compose articles, etc. By clicking on it the post compositor opens. Its a very well-suited editor to compose and edit your post or shares.
04. **Activity Notifications**: It informs you about what is happening in the network stream, in the public stream and if you received a connection request, a mail, if someone commented a post youve created or a post that youve been following. Well see about it later.
05. **Connections**: Here you can see some of your connections (those you interact the most) and the common connections you may have with other users while visiting a channel.
06. **Channel stream**: It works like the “wall” of most social networks, its the place where you see your posts, the comments on them (if theyre enable), the posts youve re-shared, and those from the people youve give permissions to write on it, the posts of your connections.
07. **Right side widgets**: This space can be used not only as a widget section, but almost anything you want to have accessible (information, apps, notes, sites, shortcuts, etc, as well see later) can be setted to appear in this place.
Lets take a closer look at the parts.
## 01. Navigation bar
![Basics_navigation_ bar](en/Basics_navigation_bar.png)
On mobile pinned apps are hidden and only accessible through the hamburger menu on the right ![MobileNavigationBar](en/MobileNavigationBar.png)
![Profile](en/Basics_profile_icon.png) **Profile**: By clicking on it, you access to view and edit your profile, your channel manager, the general settings and to log out.
### View profile
A profile is a collection of information about yourself so you can have different profiles depending on the data you want to share with different users or groups. For example: your public or default profile (which is always available to the general public and cant be hidden) is GNU/Linux and FOSS related. You set the permissions and establish connections with those who may share those interests. But if you have your group of friends that dont care about that much, and you dont want to bore them with it, you can create a new profile with a new set of permissions called “friends”, that allow its members access only to another kind of information.
Clicking on **“View profile”** youll see your public profile with the information you has submited, such as your name and tags. You can edit this public profile by clicking on the Edit option at the right of the profile title bar. Same happens if you click on the pencil icon below your profile picture.
![basics_profile](en/Basics_profile.png)
**View Profile:** Clicking on “View profile” youll see your public profile with the information you has submited, such as your name and tags. You can edit this public profile by clicking on the Edit option at the right of the profile title bar.
(See Profiles Settings for more information about configuration)
**Edit Profiles:** Here you can see your default and created profiles if there any or create new ones.
(See Profiles Settings for more information about creating and managing profiles)
**Channel Manager:** From here you can manage your channels and create new ones.
Note: Channels are different from profiles. A profile is a collection of information about yourself so you can have different profiles depending on the data you want to share with different users or groups. For example: your public or default profile (which is always available to the general public and cant be hidden) is GNU/Linux and FOSS related. You set the permissions and establish connections with those who may share those interests. But if you have your group of friends that dont care about that much, and you dont want to bore them with it, you can create a new profile with a new set of permissions called “friends”, that allow its members access only to another kind of information.
A channel, on the other hand, its the space on the web that contains collections of content stored in one place, thats the stream (will see that later). What kind of content? Well, thats exactly the point of it. You can create different channels for different kinds of content and specifies whose of your contacts or public can see it. In other words, a profile is information about you and a channel is the space where specific information its gathered and showed up.
**Settings:** By clicking on it, you will access to the Account, Channel, Features settings and other configurations.
[To know more about profiles and the available options...](../channels/profiles)
[To know how](../../03.Connections)
### Channel Manager
Channels are different from profiles. A channel is the space on the web that contains collections of content stored in one place, thats the stream (will see that later). What kind of content? Well, thats exactly the point of it. You can create different channels for different kinds of content and specifies whose of your contacts or public can see it. In other words, a profile is information about you and a channel is the space where specific information its gathered and showed up.
Click on the **Channel Manager** to access its options.
![basics_channel_manager](en/Basics_channel_manager.png)
From here you can create and switch between channels. The process to create a channel its the same as when you create your first one.
#### Settings
Clicking on the **Settings** option you access to a wide range of settings categorized by its functionality. We will see each one of them.
![basics_settings](en/Basics_settings.png)
!!! The settings options are on the left sidebar. So if you want to show the options on mobile you have to clikc on the arrow icon in the nav bar. ![ArrowIcon](en/ArrowIcon.png)
##### Account settings
In the **Account settings** you can change your email address, your password and set Your **technical skill level**. Every level sets different user features according to what you expect or want to do. By default, DisHub skill level is **4. Expert**, in orden to provide most of the features available.
There are five levels. From level 1 on, each one of them progressively enables Additional features.
0. Beginner/Basic
1. Novice - not skilled but willing to learn
2. Intermediate - somewhat comfortable
3. Advanced - very comfortable
4. Expert - I can write computer code
5. Wizard - I probably know more than you do
##### Channel settings:
![basics_channel_settings](en/Basics_channel_settings.png)
This is one of the most important settings. Here you have four settings options:
1. **Basic settings**:
![basics_basic_settings](en/Basics_basic_settings.png)
!!! There is a nice quick howto start [here](https://hub.disroot.org/help/en/tutorials/personal_channel#Create_a_new_channel)

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -0,0 +1,11 @@
---
title: Published Post options
published: true
taxonomy:
category:
- docs
page-toc:
active: false
---
When a post has been published, there are several options: