Articles at Digital DIY

Articles offer a method to share content with rich media and interactive features. An article might be a consolidated idea, completed project or a programming guide. There are hundreds of excellent articles at Digital DIY - have a look at the Completed Projects or Swordfish Code Examples for a few examples.

Why make an article?

Articles are for sharing content which form a reliable (useful) reference. They are not designed to discuss unsolved topics or put questions forward, rather should be "complete" and "refined" content.

Where to begin

You can manage all of your content from the Submit/Edit Content link in the menu. Here's a screenshot of the menu:

menu

Features!

There are many great features which allow content to be shared in exciting and effective ways within articles. Listed below are some examples of each along with a how-to guides. If you need help creating your article, post your question in the article support forum and one of the Digital DIY regulars will lend a hand!

It's fine to have an article for "testing purposes". Please name it appropriately (such as "test") that way Digital DIY publishers understand the article is your own workspace.

It's best to start with the group designation at Digital DIY. There are three user groups:

  • Author (default member access - if you have a username then you have author privileges)
  • Editor (apply in the forum for access)
  • Publisher (apply in the forum for access)

By default, everyone is an author which allows them access to write and edit their own content. The next level of permissions is editor which means the user can edit any content at Digital DIY.

A publisher has the same privileges as editor, though they can publish content created by others. This ensures article content is checked before it is publicly viewable (as the content will end up on the home page of Digital DIY!)

If you have completed your article and would like it published - please make a short post in the article support forum and a publisher will review your contribution.

article_categoryclick to enlargeCategories ensure content is easy to find and shows-up in the right places at Digital DIY. Before saving your content, select the correct location for the content to be saved via the drop-down boxes at the bottom of the editor window. If you can't find an appropriate category please make a suggestion in this forum.

 

 

 

 

 

edit_iconclick to enlargeProbably the most important feature of them all is the ability to edit your content at a later date. You may have discovered an improvement or a fault - the article can be edited by navigating to the Submit/Edit Content link (found in the Site Tools menu). A list will appear with all of the content you have access to. Simply click on the edit icon and make your changes.

This is also handy for creating an article over several sittings - Rome wasn't built in a day! Simply save your article, and resume editing at a later date.

editor_toolbarclick to enlargeThe editor toolbar houses all of the tools and features you can use in articles. We'll look at a few in more detail soon, for now here's a  screenshot of the editor window:

To make content creation and styling easier, the editor is WYSIWYG (what you see is what you get). So when you apply styling in the editor, it will look the same once published (there are a couple of exceptions, they are discussed later).

read_more1click to enlargeWhen your article is published, it will be displayed on the front page of Digital DIY! You may have already noticed that the front page only displays article introductions (a snippet of the whole article). This is achieved by using a "Read more break" in your content. You can insert the break by placing the mouse cursor where it should be placed, and then select the "Read more" tool at the bottom of the editor. On the left is a screenshot that shows where the tool is found on the editor screen.

 

 

multi_pageclick to enlargeYour article might be very long and could be split into several pages. If this is the case, insert page breaks (icon at the bottom of the editor window). The editor will still display all your content on one page, though breaks will appear where pages will be split. Once published, your article will have an index at the top of the article. Here's a screenshot of another article that uses multiple pages.


pagebreakclick to enlargeYou may have noticed in the above image that each page has headings - they are defined when inserting the pagebreak.

 

 

 

 

 

World

A picture says a thousand words, why not put one or two in your article? There are lots of features with images alone, so many that there's a separate guide. For the mean time, on the right is an example image with no special features (freshly uploaded and inserted).

It's important to note that you have exclusive access to your image files. There's no need to be concerned of other people dumping their content in your well sorted image collection!

 

 

The Media tool makes it easy to embed your videos into an article. That said, you may have already uploaded the video to youtube or vimeo. In that case we use a different method:

Sharing a video on Youtube is simple; simply visit the video's URL, for example http://www.youtube.com/watch?v=XXXXXXXX and copy the video ID (the numbers/letters after v=). In this case it is XXXXXXXX.

Now you can insert the video into your article like this (without the asterisks):

{*youtube}XXXXXXXX{*/youtube}

Here's a real example of a Youtube video embedded in an article:

The same principle for embedding videos applies for Vimeo.

There is a tool which allows code snippets (or entire programs) to be inserted into your article via a click of a button. This ensures the code is styled correctly, and appears just as it would in the IDE. Here's a Swordfish Compiler code snippet:

An example Swordfish Compiler program
Device = 18F2520
Clock = 32
 
Include "InternalOscillator.bas"
 
While True
 Toggle(PORTB.0)
 DelayMS(1000)
Wend

The code insert tool  can be found in the editor toolbox.

You may find a particular section of the article takes up a lot of space though its too important to trim. Consider slides to help display the content, allowing the reader to expand the content if desired (I've used slides to sort each of these features!). To insert slides into your content, a special syntax is needed (note - the editor will not render slides while you are editing content):

Example slide syntax
note - you must remove the "*" character for this to work, 
I've only used them to prevent slides from being created
 
{*slide=This is slide number 1}
This is where your content goes for slide 1
{*slide=This is slide number 2}
This is where your content goes for slide 2
{*/slides}

Tabs are very similar to slides, and are useful for grouping content. Here's an example:

Tab 1

This is the first tab

Tab 2

.. and the second

Tab 3

.. and the third

Here's the syntax used used to make the above tabs:

Example tab syntax
note - you must remove the "*" character for this to work, 
I've only used them to prevent tabs from being created
 
{*tab=Tab 1}
 
This is the first tab
 
{*tab=Tab 2}
 
.. and the second
 
{*tab=Tab 3}
 
.. and the third
 
{*/tabs}

There are various styles you can apply to text, simply select the text and then the desired font format from the style combobox. Here's a few examples:

Heading 1

Heading 2

Heading 3

There are other styling effects which can be applied to text - here's a few examples:

example of superscript text

example of subscript text 

Font Color

 Highlighting

  • List item 1
  • List item 2
  1. List item 1
  2. List item 2

It would be much easier to click away in a test article than explain the ins and outs of font formatting.

anchorsclick to enlargeSimilar to hyperlinks, anchors allow linking within the article. An anchor needs to be defined before you can link to it. Simply highlight the content you would like to link to, and then select the anchor tool anchor from the editor toolbox.

Give the anchor a name, and hit OK. Now you can create a hyperlink (as shown above) which will navigate the visitor to the desired content (instead of defining a link, select the anchor name that was defined earlier from the "Anchor" combobox). Try click on this link which takes you back to an anchor in the first paragraph.

 

 

Tables have their place for displaying content, and they are quiet easy to create in your articles. Simply click the create table button table in the editor toolbox, and follow the prompts. There are several other table tools to experiment with - feel free to use the article support forum for guidance. Here's an example of a table with some light formatting:

Column 1, Row 1 Column 2, Row 1
Column 1, Row 2 Column 2, Row 2

Sometimes you may need to apply custom styling to divisions or elements, this can be done via the HTML viewer advanced. You should only embark on this level of customisation if you are familiar with HTML and CSS styling. As always - please use the article support forum if you need guidance.

Forum Activity

Member Access