Adding content to the TechBites site is a great way to demonstrate your expertise and share your knowledge. In this article we discover how to create Blogs, Articles, Reviews, and Ingenuity Unlimited items; how to insert images and links to documents; how to embed YouTube videos, and much, much more.

Note: Click Here to open a PDF version of this article in a separate browser window; you can print it out and/or save it to your computer.

Become a Member of TechBites
In order to create your own Blogs, Articles, Reviews, and Tech-Tips on the TechBites site, you first need to become a member of the TechBites community. If you haven’t already joined, simply click on the Create an Account link and follow the on-screen instructions.

The only information you need to provide is your Name and Email Address. Also you get to pick a Username and Password that will allow you to manage your account.

If you subsequently wish to add additional information to your profile, that's totally up to you. Of course the more information you do add to your profile, the more useful this will be to other members. If you provide your location (city, state, country...) for example, this will allow the system to locate and place you on the various Member and Community maps.

Join Communities of Interest
Any content you post will always appear on your personal profile page and also on the main content pages. If you want your content items to appear in one or more of the TechBites Communities (Automotive, DSP, Video...) then you must first become a member of those communities. Simply visit the communities of interest and click the Join Community link associated with each community.

As soon as you've joined a community you can immediately join in any discussions, post messages on the Community Wall, and so forth. However, if you wish to post content to this community, you must first log-off and then log-on again (you need only do this one time whenever you join one or more new communities).

Content Types
There are four main content types: Blogs, Articles, Reviews, and Tech-Tip items:

Blog: A content item of type "Blog" can contain pretty much anything you want to talk about (including brief News and Product items). These items are typically a few hundred words long, but they can be as large as you wish.

Article: A content item of type "Article" is typically a longer, more technical and/or more educational piece than a Blog. In addition to fundamental concepts and design-oriented pieces, articles may also include in-depth product reviews.

Review: As its name suggests, a content item of type "Review" will contain a review of something, such as a component, product, tool, software application, book ... whatever you feels strongly enough about to review in either a positive or negative manner.

Tech-Tip: A content item of type "Tech-Tip" will typically be relatively small, although it can be of any length as the occasion demands. Think of these as "Tips and Tricks". In the case of an electronics design engineer, for example, a Tech-Tip item might include a small circuit; a software developer might provide a cunning snippet of code; or you may have a cunning way to use a program, or... you get the idea.

Preparing Your Text
Everyone does things in different ways. If you wish, you can enter your content item directly into the content creation editor (we'll discuss this editor a little later in this article). However, my personal preference is to prepare the text for my Blog or Article or whatever off-line on my computer.

I use Microsoft Word as my word processor of choice. I make sure all of my text is of type Normal. I don’t use any special headings or anything. If you already have special headings and suchlike in an existing document, then use the Edit  > Select All command to select everything in your document and set the style to Normal.

While I'm entering my text, the only formatting I use is to set selected items (like titles and image captions) to be bold and/or italic and/or underlined. I also use superscripts^{(Like This)} and subscripts_{(Like This)} as required, because – as we shall see – these can be imported directly into the TechBites content creation editor.

Preparing Your Images
I also like to prepare any images I'm going to use in my article. Very often it's necessary to crop images (chop off unwanted parts) or re-size them or perform some other action on them. These tasks are performed using an image processing tool, and then the modified image is saved in an appropriate format as discussed below.

If you don’t already have access to an image processing program like PhotoShop or Paint Shop Pro, then there are lots of really good freeware or shareware applications available such as Paint.NET (www.getpaint.net).

There are three main file formats used for images on the web: GIF (Graphics Interchange Format), JPG or JPEG (Joint Photographic Experts Group), and PNG (Portable Network Graphics). A brief summary of these formats is as follows:

GIF: This format uses an indexed color scheme, which means that it can only display a maximum of 256 colors. GIF is really useful for saving simple images with lines and text and flat blocks of color, but it's NOT a good format for saving photographic-type images with lots of colors and lots of "stuff" going on.

JPG: This is a great format for storing photographs and other images with lots of shadings and tones and suchlike. In order to reduce the image file size, JPG uses a lossy compression algorithm that selectively discards some of the data. In most image processing programs you can select the amount of compression to use. Unfortunately the compression values/effects are somewhat arbitrary from one program to another. For images to be used on the web, I tend to start with a compression factor of 20, check to see what the result looks like and also if I've achieved my required file size (see below), and then "tweak" as necessary.

PNG: This sort of "the best of both worlds" in that it combines the best features of the GIF and JPG formats. The only downside is that it's not supported by some of the older web browsers (this is becoming less and less of a problem over time).

When you are manipulating and saving your images for use on the TechBites site, there are two constraints you have to keep in mind. The first is that they should be less than 575 pixels wide; the second is that they must be less than 60 kilobytes (KB) in file size (where the size of the file is affected by the width and height of the image and – in the case of JPG images – the amount of compression being used).

Consider the following examples (these were re-sized in Paint Shop Pro using the Image > Re-size command; the Re-sampling field was set to the Smart Size option; the Aspect Ratio was locked so that varying the width automatically updated the height; all of the images were stored in JPG format with a compression factor of 25):

350 pixels wide; 116 pixels high; size = 7 KB

400 pixels wide; 133 pixels high; size = 8 KB

450 pixels wide; 149 pixels high; size = 9 KB

500 pixels wide; 166 pixels high; size = 10 KB

550 pixels wide; 183 pixels high; size = 12 KB

Preparing Other Documents
In some cases when you are creating a Blog, Article, Review, or Tech-Tip item, you may wish to include links to other websites or documents. In other cases you may wish to add links to your own documents that you have uploaded to the TechBites server. In this latter case, you need to prepare those documents before you start to create your content item.

You can upload all sorts of documents to the TechBites server, including TXT (Notepad), DOC (Word), PPT (PowerPoint), PDF (Adobe's Portable Document Formal), ZIP (compressed format) and so forth.

The main thing is to have these documents ready and waiting on your computer before you start to create your content item. The other point you need to keep in mind is that each document you upload to the TechBites server has a maximum file size of 1.2 megabytes (MB).

Actually Creating Your Content Item
When you are ready to create a new content item – and assuming you've already logged-in to the Techbites site – simply click the Create Content link in the main navigation.

In the resulting dialog, set the Select Section field to MyBlog and then set the Select Category field to reflect the type of content you intend to create (a Blog, Article, Review, or Tech-Tip item). As soon as you've done this, the main editor will appear as shown below:

First, enter a suitably descriptive title for your masterpiece. Next, enter a short summary paragraph in the upper content area. In addition to appearing at the beginning of your article, this paragraph will also appear as an overview in the appropriate content listing sections of the site. Next, enter the main body of your article in the lower area.

You can enter your article by hand, but it's usually better to create it off-line using the editor of your choice and then "pour" it into this content creation editor. If you create your article in Microsoft Word, then use the Edit > Select All and Edit > Copy commands to select the required text in Word, and then click on the Paste from Word icon in the content creation editor (see the above illustration) and follow the on-screen instructions. This strips out huge amounts of complex and unnecessary "hidden" formatting in word, but it will leave any bold, italic, and underlined text; and it will also preserve any superscripts^{(Like This)} and subscripts_{(Like This)}.

If you are using any other editor, it's usually a good idea to first copy your content into Notepad, and then copy it from there into the TechBites content creation editor. If you decide to "pour" your article from any other editor, as soon as you've done so it's usually a good idea to select all of the content and to then click the Remove Formatting icon (see the above illustration).

THIS PART IS VERY IMPORTANT...
Once you've entered your content item (including any images and links to other documents as discussed later in this article), use the pull-down menu to select the Primary Community Tag – that is, the Primary Community with which you wish this article to be associated.

Next, select the Community Tags associated with any communities in which you wish this content item to appear (you should also select your primary community here).

Note that you have to be a member of these communities for their tags to appear in your content creation editor (as you can see from the illustration n the previous page, I'm a member of a lot of communities).

In the Meta Description field, enter a short description of this item that succinctly describes what it is all about. It's also a good idea to use as many of your keywords as possible in this description.

In the Meta Keywords area, enter a list of comma-separated keywords and phrases that you feel are related to your content. These reflect the keywords others might use to search for your article (e.g. Computing, Book, Review...).

Finally, enter the security code in the field provided at the bottom of the editor and then click the Submit button. Your article will immediately appear on your profile page, on the appropriate site-wide content page, and in any communities for which you selected the corresponding Community Tags.

Including Images in Content Items
In order to add one or more images to a content item when you are creating it, first place your cursor in the body of your article where you wish an image to appear. For example, I've placed the cursor between two paragraphs in the illustration shown below:

Once you've placed the cursor where you wish the image to appear, click the Insert/Edit Image icon as shown in the illustration below:

This will launch the Insert/Edit Image dialog. In particular, observe the Browse icon as shown in the illustration below:

Clicking this Browse icon launches an associated file manager that allows you to create a hierarchy of directories/folders and to upload images from your computer into these folders as you wish. For example, let’s assume that I've created a folder called 2009-08 into which I've loaded three images as illustrated below:

Clicking on one of these image names (meter.jpg in this example) causes a thumbnail to be displayed in the window. Clicking the Insert button returns you to the Insert/Edit Image dialog with the URL associated with your image as illustrated below:

Now we need to add a brief Description of the image and a Title for the image (the Description will form the "Alt Text" that pops-up when a reader moves the mouse cursor over the image in the article). In practice these will usually be the same text.

You can also use the Appearance and Advanced tabs to control the positioning and attributes associated with this image, although in practice you probably won’t need to do this often if you only require this image to appear in-line with the article text.

When you are ready, click the Insert button and observe your image appear in your article as illustrated in the example below:

The easiest way to center your image is to click the image to select it (the "Image Manipulation Handles" will appear to show that it's been selected) and to then click the Center Justification icon as shown below:

Once you've inserted an image, you can click on it and re-size it on-the-fly using its handles. Furthermore, if you click on an image that's already in the article and then click the Insert/Edit Image icon, you will be presented with the opportunity to modify the description and properties associated with that image.

Adding External Links in Content Items
Consider the following image. Let's assume that we wish to turn the phrase "These Words" into a hyperlink to an external website. Observe that, as no text is currently selected, the Insert/Edit Link icon is grayed out:

First we use our mouse to select the phrase "These Words" as illustrated in the following image. Observe that the words are now highlighted; also that the Insert/Edit Link icon is now active:

The next step will be to actually click the Insert/Edit Link icon. This will cause the Insert/Edit Link dialog to appear as illustrated below:

Let's assume that we wish to add a link to my DIY Calculator website. In this case we will enter the URL in the Link URL field as illustrated in the following diagram. Observe that we also need to enter a title in the Title field. Also, since we're linking to an external site that we (typically) wish to be displayed in a separate window, we've set the Target field to be "Open in new window (_blank)":

Now, all we need to do is to click the Insert button. The result (as shown in the following image) is that that our link has been applied to the selected text:

If we wish to modify our link, all we have to do is click on it to select it with the mouse, and then click on the Insert/Edit Link icon to re-access the Insert/Edit Link dialog and make our changes. Alternatively, if we decide that we wish to remove our link completely, then all we have to do is click on it to select it with the mouse, and then click on the Delete/Remove Link icon.

Adding Links to Documents (e.g. ZIP and PDF Files) in Content Items
Sometimes when you are creating a content item, you might wish to add a link to some other document such as a PDF or a ZIP file. In this case you should first create that document on your system. Later, when you are creating your content item, you select the text that you wish to use as a link as illustrated below:

Next you click the Insert/Edit Link icon to access the Insert/Edit Link dialog. In particular, observe the Browse icon as shown in the illustration below:

Clicking this Browse icon launches an associated file manager that allows you to create a hierarchy of directories/folders and to upload documents from your computer into these folders as you wish. For example, let’s assume that I've created a folder called 2009-08 into which I've already uploaded a ZIP file called "act-fus.zip" as illustrated below:

Clicking on this file selects it, then clicking the Insert button returns you to the Insert/Edit Link dialog with the URL associated with your document as illustrated below:

Next we set the Target to open up in a new window and we specify a Title as illustrated below:

When we are ready, we click the Insert button. The result (as shown in the following image) is that that our link has been applied to the selected text:

Once we publish this article, clicking on this link will cause the selected document to open up in a new browser window. If we wish to modify our link, all we have to do is click on it to select it with the mouse, and then click on the Insert/Edit Link icon to re-access the Insert/Edit Link dialog and make our changes. Alternatively, if we decide that we wish to remove our link completely, then all we have to do is click on it to select it with the mouse, and then click on the Delete/Remove Link icon.

Embedding YouTube Videos in Content Items
There's an old saying that "A picture's worth a thousand words." I absolutely agree and, on that basis, I would go on to say that a video is worth a million words. If you have a digital video recorder, you can create your own videos and upload them to the YouTube website. I personally use a Flip Ultra (www.TheFlip.com), which is amazingly easy to use; the last I saw you could purchase these little scamps from Best Buy for around $125.

Alternatively, it may be that you simply find a YouTube video that's relevant to a Blog or an Article that you are writing, and you decide that you'd like to embed that video in your content. So, how do we go about doing that?

Well, first of all we locate the relevant video on YouTube. Purely for the sake of this example, I've chosen one that always brings a smile to my face. This is the one where 200 dancers "spontaneously" start performing their version of "Do Re Mi" from The Sound Of Music in the Central Station of Antwerp.

Observe the Embed field on the right-hand side (indicated by the red ellipse in the image above). Clicking on this text selects it (the background turns blue) and also brings up some options as shown in the following illustration:

The main thing you have to do is to select the size. I've selected the 560 x 340 option in this example. You really don’t want to go any larger than this (smaller windows will download more smoothly on less-powerful computers).

If selecting the size caused the Embed text to become de-selected, then click in it to re-select it again, then use the Edit > Copy command to copy the selected text onto your clipboard, open up a simple text editor (like Notepad), and use the editor's Edit > Paste command to temporarily save this code:

OK, now we start to create our content item (Blog, Article... whatever) as described earlier in this paper. The following is the way I do things ... you may decide to do things differently. First I decide where I want to locate the video and I add some placeholder text ("mmmmmm" in the example below):

Observe the HTML icon in the previous image. Clicking this icon activates the HTML Source Editor, then we scroll down through this code until we see our placeholder text as shown below:

Don;t worry If you are not familiar with HTML, because we won't be doing anything complicated. Having said this, we've got to be really careful not to mess things up here. First of all we go back to the simple text editor we're using to store our embed code and use its Edit > Select All and Edit > Copy commands to grab a copy of this code. Then we return to the HTML Source Editor window and use the mouse to select the line containing our placeholder text (the whole line including the "p" and "/p" HTML tags at the beginning and end) and use the browser's Edit > Paste command to replace this text with our embed code:

Then we click the Update button to return us to our normal view of the world. Observe that the embedded video currently appears as a yellow box. Also observe that, by default, this box is left-aligned (it's on the left-hand side of the column):

The easiest way to center our video is to click the yellow box to select it and to then click the Center Justification icon as shown below:

We then continue to finish up the article as usual (select the appropriate Community Tags, add a Meta-Description, specify Meta-Keywords) and click the Submit button. When you come to look at your finished article, you will see your embedded video in all its glory as shown below (click on the video to play it ... go on, you'll love it).

But Wait... There's More!
I'm not sure what, but I am sure that you'll come up with some cunning content-creation tips and techniques of your own. And when you do, why not write an article about it, and then let me know and I'll add a link to your article from this one.

Enjoy!