By Enio...

⁣

Here we are again with my series dedicated to steemstem.io, which I started a couple of articles ago. I have so far covered the conceptualization of the application and detailed its graphical user interface accessible from the page home, mainly. This, mainly, constitutes an approach carried out with a sense of coherence in our learning about the DApp for the dissemination of STEM knowledge in this blockchain.

On this occasion we will continue with more practical questions of the webapp. The purpose of this issue is to know more about the process of creation and publication of posts with steemstem.io through the analysis of its interface and the exposure of the techniques for the creation of posts. The ultimate goal of this series of articles, as highlighted before, is to make this application known throughout the world and promote the adoption of this technology by Steem users, community members and beyond.

Let's get started.

🚀 🔬 💻 Creation and publication of posts with steemstem.io

The posting is possibly the most important activity when taking care of blogging itself, as it deals with the creation of posts, the fundamental pieces of content that we publish on the Internet as bloggers.

Believe it or not, the word post is a loanword present in many languages. Yes, it's a Gallicism (of French origin) and then an Anglicism (also adopted from English) widely used on the Internet to refer both to messages and articles, as long as they are published. In the context of blogging, as we know, the posts refer more specifically to the entries of a blog, which are the units of main content that give form to this means of compiling, expressing and disseminating our contents.

This is something that also concerns steemstem.io, since, as already explained, it is a client application of blockchain which, like steemit.com and others, allows users to manage their Steem account for blogging purposes (with the extra aim of providing a novel way to deal with Science communication for what concerns SteemSTEM). This of course includes the functionality of creating entries for their blogs on the social network relying on Steem.

The key point, however, is that the posts created with steemstem.io are supposed to be about Science, Technology, Engineering, Mathematics and related disciplines, so, thanks to that faculty, steemstem.io can become our preferred application for managing the scientific and academic content of our blog, as well as being a symbol and a means to potentially articulate and unite the users as a community. This is to highlight the potential or real value of steemstem.io for us, as well as the importance of adopting this technology.

I. Interface to create posts

To create a post with steemstem.io you must go to the user menu, which, as it was explained in the last article, is at the top right of the DApp interface header and you will recognize it because it has a profile image (as long as a user has logged in before):

^{⬆️ Image 1: User menu. --}

Within this menu you can click the option New post, which will take you to the page for the creation of entries. Another way to get there is through the URL https://www.steemstem.io/#!/create. Once there, you'll see a GUI very similar to other blogging websites:

^{⬆️ Image 2: Extended interface view for the creation/editing of posts from steemstem.io. --}

Now, each of the parts of this interface is going to be described, in order to make a more accurate analysis that allows the reader to know better all the functionality of creation of posts.

In that sense, the first thing you notice is a division, a horizontal strip with recommendations to users from @SteemSTEM when publishing posts (SteemSTEM Recommendations). These includes:

^{⬆️ Image 3: @SteemSTEM's recommendations. --}

Remember to credit your images and cite your sources.
Images must be copyrighted for commercial use.
Be original: re-phrasing other websites is rarely considered valuable.
Markdown is supported.
In case the post contains some HTML/markdown pieces of code, please click on the code icon </> to input it. Click a second time to generate the preview.

As you can see, it's a bit of @SteemSTEM criteria for curation, added to some tips or useful technical data when using this view.

Bellow that division you see that the view is separated into two vertical sections. On the left side, the form for writing and editing posts (Write a new post) and on the right side, the post preview.

First of all, the form for writing/editing posts is composed of a series of form elements whose role is very easy to understand, and on which you surely have some experience, since it looks like the interface of another well-known social media and some word processors. This form is composed by:

1. The text field for the title (title): is located at the top of this section and is where you place the title of the post as a structural data of the document. It's well-known that this title is the one registered in the blockchain identifying your post:

^{⬆️ Image 4: Post title field. --}

It is worth clarifying since we can also speak of "title" in the sense of titles and subtitles (headings) inside the body of the post properly, which can be denoted with the HTML tags <h1>, <h2>, <h3>, <h4>, <h5> and <h6>, with the Markdown operator # or with the functionality of styles of the editor.

2. The WYSIWYG editor: is the section labeled in bold as article. Its view is shown below:

^{⬆️ Image 5: WYSIWYG editor. --}

It is the part of the interface that allows the user to write and edit the body of the post, that is, the content itself. It's fair to say that it is a more developed editor than Steemit's, because it has features that are absent in the latter and will be explained soon.

This WYSIWYG editor is graphically integrated by a grid of icons that represent different functions to edit the input body. Among such icon-functions are:

2.1 Style: with its magic wand icon, this function allows the user to choose between several ways to denote some texts and apply a characteristic style to them. Basically, you can choose between six levels of headers, computer or programming code (code) and the default style (normal).

2.2 Bold, italics, underline, and strikethrough: styles well enough known to be applied to key words, short phrases or any other portion of text.

2.3 Remove font styles: its icon is a kind of pencil eraser and serves to eliminate font styles, that is, eliminate the type, color, size and effect of font to texts that have been selected, applying the default style.

2.4 Superscript and subscript: serve to insert these pair of special effects to the fonts. They can be very useful when it comes to posts on STEM, since these characters allow to denote symbols, formula elements, reference marks, etc.

2.5 Font size: allows the user to choose between 9 different font sizes ranging from size 8 to size 36. It should be noted that this feature is not currently supported by Steemit, so it is an advantage of part of steemstem.io. However, Steemit (or any other application) may not visualize as expected the texts formatted with this feature by steemstem.io.

2.6 Recent color: you can use it to apply a background color to the fonts or text, which is useful for highlighting. This is also a feature of steemstem.io and not of steemit.com, so if applied to a post, Steemit or any other front-end application may not be able to display the text as expected.

2.7 Unordered list and ordered list: serve to denote and format lists or incisors. The unordered list will be displayed with bullets, while the ordered list will be numbered.

2.8 Paragraphs: serves to give some formatting options to the paragraphs, such as right, center, left and justified alignment, as well as indented to the right or left.

2.9 Table: serves to insert a data table of up to 10 x 10 cells.

2.10 Link: with it you will be able to insert hyperlinks or links to websites or Internet resources. Very useful when listing the article's references, for example.

2.11 Picture: serves to link images to the post and they may be local or be online.

2.12 Icon </>: is the last of the icons and its function is to switch the view of the Standard mode (AKA Wizard mode) (WYSYWYG) to the view of Source code mode (HTML/Markdown) and vice versa. The following image shows a view of each mode:

^{⬆️ Image 6: Standard mode (wizard mode) versus source code mode. We can access both as we need to. --}

All the functions represented by these icons make the editing posts experience very simple. It is very easy to learn and get used to it.

3. Tags field: continuing with the post edit form, below the WYSIWYG editor is a field for tags, which you will recognize by the word in bold tags. Here you can add the Steemit tags to categorize the post. The DApp will always place the #steemstem tag as the first one, so the user will only be able to enter up to 4 tags (if he/she enters more, the extra ones will be ignored).

^{⬆️ Image 7: Tags field. --}

4. Add-a-beneficiary button: from here you will be able to set which Steem accounts are going to be beneficiaries of the post rewards and to what extent (percentage). Logically, it is expected that among the beneficiaries, @steemstem is going to be added. This community has a policy to commend users who do so, through an increase in voting power applied to the curation of the post. Adding beneficiaries is something certainly optional, but praiseworthy to support the maintenance of the accounts with which the support to the users is materialized.

^{⬆️ Image 8: Beneficiaries button. --}

5. Save-as-draft button: allows the users to save their posts temporarily as a draft while editing them.

^{⬆️ Image 9: Save-as-draft button. --}

This is a nice function that is currently enabled. Still, I recommended users to export the HTML of the post, that is, enter the source code mode and copy the source code displayed there, in order to save it in another place, perhaps in a local file on your computer.

6. Submit button: this button will make the application publish the post in the blockchain, not before verifying that everything is as it should be:

^{⬆️ Image 10: Submit button. --}

Meanwhile, on the right side of the form for creating posts is the preview section, where you can see what the post will look like once published. This preview includes the content of the post (body), its tags and beneficiaries.

II. Post creation methods

When creating a post with steemstem.io (as in other DApps), each user "has his own style". However, the methods to input them into the blockchain through a certain client software are very concrete and can even be enumerated. Bellow I will detail a couple of them that are available in this application.

Basic method: through the WYSIWYG editor

It has been pointed out that the editor that is loaded by default in the form for creating posts is a WYSIWYG editor, whose name stands for What You See Is What You Get. Honoring its name, this kind of "wizard" allows the user to create and edit his/her post in such a way that the changes the user is making are visualized in the same way as it will be seen in the final and published version.

Actually, you're probably quite familiar with this editor, as word processing programs (such as Word or Writer) are of the same type, as well as email editors and other applications. It is very popular today because the idea is to make things easier for people involved in producing and publishing content, who shouldn't need too many technical skills to just start writing and publishing. Authors are "assisted" by a very versatile and comfortable graphical interface and hence we could refer to this modality to edit posts as wizard mode.

The important thing is to know that you can completely write your posts about STEM from this editor, without having to mess with the HTML code, so it is very helpful for Steem users who have little or no knowledge of markup languages. You simply start writing and formatting with the editor's graphical options, icons and their functions described above.

However, this type of editor also has its disadvantages. In the world of Steem's blogging, basically, it does not give users the same expressiveness they could have if they made direct use of markup language. For example, I may be interested in creating a floating element layout based on the CSS classes pull-left and pull-right, but this cannot be achieved with the options available in the WYSIWYG editor.

Other disadvantages are more technical. However, that is something that does not necessarily limit the authors of Steem. In fact, the WYSIWYG editor (wizard mode) may be sufficient in more than 90% of cases.

Let's now see how to perform some common tasks from this method 1.

How to insert images from the WYSIWYG editor?

Step 1: place the cursor on the part of the text where you want the image to be inserted.

Step 2: click on the icon Picture, one of the last among the grid of icons of the editor. A box will appear in which you can specify how you are going to insert the image:

^{⬆️ Image 11: Dialog box to insert images. --}

If the image to be inserted is stored on your computer, click the browse button in order to search for the image in your file system and then press the red button "insert image". The image will be loaded and added to the post, but keep in mind that this may take a while, even if it doesn't seem to be working.

On the other hand, if the image to be inserted is hosted online, paste the web address (URL) of the image into the text field shown and then click on the red button "insert image". This may also take a while.

Another way to insert an image is by dragging and dropping it from your file explorer program into the text area of the editor. However, this method is currently under development, so personally I do not recommend using it.

How to insert hyperlinks from the WYSIWYG editor?

Step 1: place the cursor on the part of the post where you want the hyperlink to be inserted.

Step 2: click on the Link icon, one of the last among the grid of icons of the editor. A box will appear in which you can specify how the hyperlink will be inserted:

^{⬆️ Image 12: dialog box to insert links. --}

The upper field (text to display) is the text that you want to have the property of hyperlink, and the lower field (To what URL should this link go?), the URL, link or hyperlink as such.

Step 3: optionally, in the box below you can specify if you want the hyperlink to open in a new window. If not, simply press the red button insert link.

How to insert (Youtube's) videos using the WYSIWYG editor?

The editor does not have a function for that. To achieve this you have to use the method that follows this one.

Although the Steemit's application displays the video whose URL is written directly into the body of the post, that is an extended function of that application. In a way, Steemit's promotion that users resort to this practice (just dropping the video link in the post) is debatable, although the function is friendly. Currently, the application steemstem.io does not support the same functionality, which is why the video URLs will not be interpreted by steemstem.io to view the video as Steemit does.

Advanced method: from source code mode (HTML/Markdown)

As mentioned above, the WYSIWYG editor has a function to work in source code mode, i.e. to write or edit the post using HTML and Markdown markup languages. Actually, the WYSIWYG editor generates for you the HTML source code of the post, since the post will be represented that way when it is sent to the blockchain.

Although HTML is a simple markup language, it requires the users to master it to some extent. Some users find it difficult to work that way; many advanced or knowledgeable users do, but not all. That's why the WYSIWYG wizard is incorporated, to make things easier. Nevertheless, the access to the source code mode is always allowed to give the user total control over the body notation of the post, manipulating its HTML/Markdown code.

To access the source code mode you can press the icon </>, the last of the icons grid of the WYSIWYG editor. You will notice that the background of the textarea of the WYSIWYG editor turns black, and that almost all of its icons are disabled, as they cannot be used in that mode. To return to the "wizard mode", you must press that same icon </> again.

If you had already written some things in the post with the WYSIWYG editor, then when you enter the source code mode you will notice that the textarea of the editor will reflect a text that will look quite different from the one you had there. All that text you see there is what in computing is called "source code". In this case, it is HTML language source code or Markdown language source code (or combined).

Advanced bloggers can deal with this and take advantage of it by giving them more control and expression. If you make changes to this source code, you will have to go back to the wizard mode or standard mode to notice how the changes you have made are reflected in the preview.

Now let's see how to perform some common tasks through this method 2.

How to insert images through the source code mode?

Step 1: locate in the source code the exact place where you want the image to be put.

Step 2: insert a piece of code as follows:

If you want to express it in HTML, use the <img> tag like this:

<img src="Image-URL" alt="alternative text">

Where: URL-of-image should be replaced by the web address or URL of the image, as understood, and alternative text should be replaced by a text describing that image (examples: "image 1", "enlarged view of the bacillus", "example of prime number factoring", etc.). This is useful in case the image is not downloaded or displayed by the browser for some reason.

Otherwise, if you want to express it in Markdown, use the syntax:

!  [ alternative text] (URL-of-the-image)

Where, as in the previous scenario, the corresponding substitutions should be made (note: in this sintax the exclamation mark must be joined with the opening bracket and the closing bracket must be joined with the opening parenthesis, i.e. eliminate the blank spaces between the operators when using the syntax).

Step 3: return to standard or wizard mode by pressing the icon </>, to be able to verify in the preview the applied changes.

How to insert hyperlinks (links) through the source code mode?

Step 1: locate in the source the exact place where you want the hyperlink to be.

Step 2: insert a piece of code as follows:

If you want to express it in HTML, use the <a> tag like this:

<a href="URL-o-link"> object-with-hyperlink-property </a>

Where: URL-o-link should be replaced by the URL for the hyperlink, as understood, and object-with-hyperlink-property should be replaced by what you want to react as a hyperlink, which is usually a text, but could also be an image.

Otherwise, if you want to express it in Markdown, use the syntax:

[object-with-hyperlink-property] (URL-o-link)

Where, as in the previous scenario, the corresponding substitutions should be made (note: the parenthesis and bracket to the center of the syntax must be joined, meaning, with no space between them).

Step 3: return to the standard mode using the </> icon, in order to be able to verify the applied changes in the preview.

How to insert (Youtube's) videos from the source code mode?

Step 1: Obtain the appropriate HTML snippet for it, which should be generated by the website hosting the video. In case of Youtube, open the page of the desired video and locate the option share and, within it, the option insert. You will see a text box with a fragment of HTML code that you will recognize because it starts and ends with the tag <iframe>. Copy that fragment.

Step 2: locate in the source code of the post the exact place where you want the video to be. Paste the corresponding snippet (the one from the the previous step, in case of Youtube). Be careful not to spoil the whole source code in any way, as this will affect the structure and presentation of post.

Step 3: return to the standard mode using the </> icon, in order to be able to verify the applied changes in the preview.

In summary

In this review of the official DApp of the #SteemSTEM community, several aspects of interest for the Steem's bloggers has been covered, in relation to posts publishing and editing functionality, which turns out to be the main source of content for the blockchain.

It's been detailed the graphical user interface for this functionality, describing practically every icon and graphical element and its respective function. The good news is that it's anything but difficult and probably you already have previous experience and knowledge about it.

We have learned a couple of important things: the WYSIWYG editor (its role and peculiar name) and the source code editing mode, which provides more advanced ways to denote and format the content of the post. I have a series of posts about HTML oriented in that sense and can be useful, although it is still in Spanish, but surely there is similar material in English as well.

Also, some frequently asked questions from users when creating a post with #SteemSTEM have been responded as well as provided their solutions in both modes (as long as they exist). However, there are still more aspects to detail, more functions to explain, more questions to answer, etc. Hence the feedback is important, dear reader and colleague. I will continue to produce useful materials for the community to adopt this wonderful tool.

At the moment, if you have any doubt, contribution or suggestion, do not hesitate to let me know, and, in case it is not clear:

I invite you to use steemstem.io 😃

SOME SOURCE OF REFERENCE

Steemstem.io profile on DApp.com.
DApp.com Ranking and Steemstem.io.
Steemstem.io Repository on GitHub

Thanks to Benjamin Fuks (@lemouth), Robert Bauer (@justtryme90) and Andrew Mobbs (@mobbs) for their review and collaboration in providing information for this article.

If you are interested in more Science, Technology, Engineering, and Mathematics (STEM) topics, check out the #SteemSTEM tags, where you can find more quality content and also make your contributions. You can join the #SteemSTEM Discord server to participate even more in our community and consult the periodically reports published by @SteemSTEM.

EXPLANATORY NOTES

Unless otherwise indicated, the images in this publication have been produced by the author, some based on images with the necessary permissions for reuse, such as the screenshots of the application reviewed.
The validity of the information contained in this article depends partly on the state of updating of the application.