How to avoid the web editor By Drew Wells @ 12:23 AM 0 Comments

I started using a skelton HTML file in my favorite text editor to create posts. It saves a lot of time. I write the post locally in my text editor, then I login to the blog, create a new post and cut and paste the text into the HTML interface.

Here is the skeleton blog post, just save as and edit locally instead of using the slow web editor:

blog post template

How to Edit an Existing Article By Drew Wells @ 12:55 PM 0 Comments

Log in with the account that created the article or an editor/admin account.
Click on any article headline to see the article detail.
Click on the 'my articles' option in the article column header.
Select 'approved articles' to see your articles for edit.
Click on the blue pencil icon next to the article title to edit.

When you have completed your edit:
Click on the 'Save' button at the bottom of the form.
Review the completed article and check images and links for errors.

How To Create An Event Listing By Drew Wells @ 4:27 PM 0 Comments

On the blog pages we have an Event sidebar which lists upcoming events that AutomatedQA will be attending. The events are listed
We use short articles
To create an event:
1. Copy the text and link from another event
2. Create an article
3. Paste text into the summary text box
4. Replace date, location and link with same text formatting
   a. The event link should go to the event description page
   b. Leave the article's link field blank
   c. Leave the detail text box blank
5. Check category "Upcoming AQA Events"
6. Enter a very short title with the name of the event - usually one to two words
7. Set the Expiry date/time to 2 days after the last day of the event
8. Save the item
9. Set the publish date on the item for sidebar sorting (see below)
10. Publish the event article
11. Verify the sidebar sorting, edit publish date if it is incorrect

Event Sorting

Events are sorted by publish date descending. Items with more recent publish dates are at the top of the list.

If the event you are entering occurs earlier than the existing events in the list you do not need to change the publish date.

Usually the event you are entering is scheduled to occur after already published events, so you'll need to change the event's publish date so it will sort correctly in the list.

Later events have earlier publish dates. The earliest publish date is at the bottom of the list.

Find the events that are before and after the event you are entering. Edit those events, note their publish date/time and then edit your new event and set the publish date/time on the new item to be between those items.


Example:
The existing event list might look like this:
SDNorth
June 23-27, Anchorage, Alaska | link
SDSouth
December 5-9, McMurdo Station, Antarctica | link

You need to add two events:
VDLive!
May 1-5, Hoboken, NJ
TechID
November 18-23, Orlando, FL

VDLive! is earlier than the existing events so you can use the default publish date when you create the item.

TechID occurs between the currently published events so you need to set the publish date/time to be between the publish date/time of those items.

The publish date/time is not the same as the event date time. So you'll need to edit those items to see the publish date/time, note the publish date/time, then edit your event article and set the publish date/time to be between the other two events.

Set the Expiry date/time to 2 days after the last day of the event. The event will no longer display on the site after the Expiry date.

How to Submit An Article or Blog Post By Drew Wells @ 1:13 PM 0 Comments

To submit an article, register on our community site and then click here to submit an article. The article will be reviewed and you will be notified if it's published.

Please follow these instructions on how to submit an article/blog post to this website. You can leave these instructions open in another browser window and refer to them while creating your article/post.

1. If you don't already have one, create an account on the aqCommunity site.
2. Login to the aqCommunity site.
3. Create an article (the link on the home page is called suggest an article.)
4. For a long article, check the "article" category and any others that are appropriate.
5. For a blog post, check the "blog" category and any others that are appropriate.
   
6. Do not check "Upcoming AQA events" or "Quick Links" categories. 
7. For shorter articles/blog posts, put all content in the summary text box.
8. For long articles, enter a shorter summary in the text box on the summary tab. Usually, this is the first paragraph or so of the article repeated, but other forms are ok.
9. Enter/paste the main body of the article in the text box on the Details tab.
10. Important: Remove Word text formatting from the article.
11. Click the Word document text icon on the edit box toolbar to remove the Word HTML formatting.
12. Alternately, you can paste the text into notepad, then select all and copy from notepad to remove Word's non-standard HTML formatting.
    
13. Format the article text. Important: Items must have fairly simple formatting to ensure that they will display correclty on the site. Allowed formatting is described below. (see below)
14. Resize and upload any images for the article. (see below)
15.  Insert image tags for your uploaded images. (see below)
16. Zip and upload any non-images files related to the article. (see below)
17.  Insert links for any included files images. (see below)
18. Click the Save Article button at the bottom of the summary tab.
19. Preview the article. (see below)
20. View your article list.
21. Click the blue pencil icon to the left of the title to edit the article.
22. Correct any problems in the text.
23. Click the Publish button at the bottom of the summary tab to save your article and notify the editors that it is available for review. Note: If you have publishing permission then this action will make your item public. Just click the Save button and send an email to your editor(s) if your item is ready to be proofed or reviewed.
    
24. Check the blog front page to confirm that your item was published or to confirm that it was not published if you did not mean to make it public yet.
    

Format Article Text

   The only formatting normally accepted in articles is:
    Bold / Italic / Underline
    Normal

      Heading 2

      Heading 3

    Blockquote

    Simple tables
    Source code listings

Bold/Italic/Underline

 Select the text and use the toolbar menu to format, or edit the HTML and surround with <b>, <strong>, <u> tags.

Normal and Headings

Place the cursor in the paragraph to be formatted and select Normal, Heading 2 or Heading 3 from the paragraph drop down menu. Or edit the HTML source (bottom tab) and surround the text in <P>, <H2> or <H3> tags. Format section headers as <h2>, for example, <H2>This is a section head</H2>.

Blockquotes

There is no toolbar item for blockquotes so you will need to insert the tags manually in the HTML. Edit the HTML source (bottom tab) and surround the text in <BLOCKQUOTE> tags. For example, <H2>This is a blockquote<br>about blockquotes.</H2>.

Simple tables

Edit the HTML to add simple tables. Tables should not be wider than 500 pixels.

Formatted Source code listings

Source code listings must be formatted in HTML. Here are instructions on how to add source code listings to your article/post. It can be helpful to add markers in your original text before pasting it in the edit box like ***listing ***endlisting so you can find the spots to add the formatting tags. Be sure to remove the markers before submitting to the editors.

Images

Here are detailed instructions on how to add images to your article/post. It can be helpful to add markers in your original text before pasting it in the edit box like ***image1 ***image2 so you can find the spots to add the formatting tags. Be sure to remove the markers before submitting to the editors.

Files

File attachments should be archived as zip files. All files should be included in one zip file unless the archive would be extremely large. A readme.txt text file should be included with a basic description of the file and a pointer to the related article.
Use the upload instructions in the how to add images article to upload the files.

The URL for the files will be:
  http://www.automatedqa.com/images/blog/(your file name)
For example, a post about a new log viewer utility includes the executable and source in one archive:
  http://www.automatedqa.com/images/blog/TCLogViewer.zip

How to Preview An Article

There is no formal article preview feature, however you can hack an article view  URL to see how your saved article looks in the site formatting.

First edit your article and click Save at the bottom of the summary tab.

Now, find your article id by viewing your article list and looking at the URL for the article you're working on. Use the blue pencil URL next to the article title or edit the article and see the URL in the address bar. The number after the words articleId at the end of the URL is the article ID.

For example, here is the view link for article ID #5:
http://www.automatedqa.com/community/Home/Articles/tabid/38/articleType/ArticleView/articleId/5/Default.aspx
Notice the end of the URL - articleId/5/Default.aspx
The article ID, 5, is after articleID and before default.aspx.
You can change that number to preview your article.

Now, you have your article id, you can load another article and change the article ID to preview your saved article.

Open this link in a new browser:
Any article link
The first number after the string /articleID/ in the URL is the article ID.
Edit the URL in the address bar to use your article ID instead.
So this URL,
   http://.../ArticleView/articleId/5/Default.aspx
becomes
   http://.../ArticleView/articleId/YOUR ID/Default.aspx
For example,
   http://.../ArticleView/articleId/169/Default.aspx

Other Notes

Publish date and time should not be changed.
Featured should be unchecked.
Link type should be none.

Formatting Source Code With Syntax Highlighting By Drew Wells @ 1:56 AM 0 Comments

To display source code with syntax coloring and nice formatting like this:

function SetCustomer(CustomerNo, CustomerFirstName, CustomerLastName,CustomerAddresss) { w1 = Sys.ActiveWindow; w1.WinFormsObject("Customer").Keys(CustomerNo); w1.WinFormsObject("FirstName").Keys(CustomerFirstName); w1.WinFormsObject("LastName").Keys(CustomerLastName); w1.WinFormsObject("AddressLine").Keys(CustomerAddress); // extra line breaks and spaces are not removed if (flag==1) { // textarea formatting is preserved } }

Just use HTML edit mode and wrap your code in a <textarea name=code class=c#> tag. Your code will be formatted with spaces and line breaks just like you enter it into the edit box.

Here's an example of how the code will look in the HTML edit view:

<textarea class=c# name=code rows=10 cols=60> function SetCustomer(CustomerNo, CustomerFirstName, CustomerLastName,CustomerAddresss) { w1 = Sys.ActiveWindow; w1.WinFormsObject("Customer").Keys(CustomerNo); w1.WinFormsObject("FirstName").Keys(CustomerFirstName); w1.WinFormsObject("LastName").Keys(CustomerLastName); w1.WinFormsObject("AddressLine").Keys(CustomerAddress); }

The rows and cols are only used if the browser doesn't support the advanced formatting in the syntax highlighter.

You can use:

<textarea name=code class=delphi>

<textarea name=code class=c#>

<textarea name=code class=vb>

<textarea name=code class=jscript>

<textarea name=code class=sql>

<textarea name=code class=xml>

Checklist:

• Use HTML edit mode to add your source code.
• Start your source with <textarea name=code class=c#> where class=language has your language name.
• Whatever spaces and line breaks you put in the <textarea> while in HTML edit mode will be displayed.
• Close your source textarea with the </textarea> tag.
• You can use the rows and cols property for browsers that don't support the nice formatting.

Here's the link to the full documentation: Syntax Highlighter
You can also get there from the ? link at the top of the code listing.

Conversational writing kicks formal writing's ass By Drew Wells @ 2:08 PM 0 Comments

You've got to read this article about conversational writing from the Creating Passionate Users blog:

Conversational writing kicks formal writing's ass

Excerpts:

If you want people to learn and remember what you write, say it conversationally. This isn't just for short informal blog entries and articles, either. We're talking books. Assuming they're meant for learning, and not reference, books written in a conversational style are more likely to be retained and recalled than a book on the same topics written in a more formal tone. Most of us know this intuitively, but there are some studies to prove it.
...
"In five out of five studies, students who learned with personalized text performed better on subsequent transfer tests than students who learned with formal text. Overall, participants in the personalized group produced between 20 to 46 percent more solutions to transfer problems than the formal group."
...
One striking part of the Moreno/Mayer study is how similar the actual content was. Here's the before and after example from the beginning of the lesson they studied:

Formal
"This program is about what type of plants survive on different planets. For each planet, a plant will be designed. The goal is to learn what type of roots, stem, and leaves allow the plant to survive in each environment. Some hints are provided throughout the program."

Conversational
"You are about to start a journey where you will be visiting different planets. For each planet, you will need to design a plant. Your mission is to learn what type of roots, stem, and leaves will allow your plant to survive in each environment. I will be guiding you through by giving out some hints."

Read more of Conversational writing kicks formal writing's ass

 

link

How To Add Images to a Blog Post or Article By Drew Wells @ 1:39 AM 3 Comments

Use inline images for the body of the article and link to larger versions if needed.

Inline images can be up to 500px wide and are used in the body of the blog post or article.  Use an inline image in the post to link to the full-size image alone on a page.

Note: The

Create Image

Decide on your image type: inline, or full. Crop or resize the image to an appropriate size.
Inline - Any size up to 500px wide
Full-size - Create a standard inline version to display in the post and to link to the full size version. Try to stay under 1024x768 for full size images.

Use a high-quality app to crop or resize. Photoshop is great, if you have it. Irfanview is a free image viewer that does a great job, too.

Use a small amount of sharpening to to make resized images look crisper. Save the image as png or jpg. Check the file size of your image before uploading, a full size image should normally be less than 250K. If it's bigger than that, your image may be too large or it may be  uncompressed.

Keep the image simple. Don't add shadow borders or other effects.

Rename the resized image to "your initials_date_seq".
Example: "dw_081405_a.jpg", "dw_081405_b.jpg", "dw_081405_c.jpg".
For a full-size image add "_full" before the extension.

Upload image

Inline/Full - Use FTP to upload the image.
If you are submitting an article to be considered for publication, then link your article images from an external site, your own or something like imageshack.com or photobucket.com.

Or you can use one of these placeholder images:
http://automatedqa.com/images/blog/placeholder.png
http://automatedqa.com/images/blog/placeholder.gif
http://automatedqa.com/images/blog/placeholder.jpg

If your article submission has been accepted please contact drew_at_automatedqa.com for FTP access.

Note: You'll upload two images for a full-size image, the smaller version for the post, and the full-size version to display alone when the smaller version is clicked on. Add "_full" to the name of the full-size version. For example, "dw_081405_a.png" full-size would be" dw_081405_a_full.png".

Add HTML Image Code to Post

Headline - Just select the uploaded image in the Appearance section on the 'Create Article' page. No extra code is needed.

Inline - Switch to HTML mode and insert this code where the image should be placed.

<div align="center">
<img src="/images/blog/(IMAGENAME)" width=### height=### alt="Add rollover text here" title="Add rollover text here" /></div>

Replace (IMAGENAME) with your image name, and add the width and height in pixels. Replace rollover text with the descriptive text you would like displayed if the image is not displayed.

Example:
<div align="center">
<img src="/images/blog/dw_081405_a.jpg" width=200 height=205 alt="I heart PDC" title="I heart PDC" /> </div>

Full-size -  Switch to HTML mode and insert this code where the image should be displayed. Change image name, size, alt text for your image.

<div align="center">
<a href="/images/blog/(IMAGENAME)_full.jpg">
<img src="/images/blog/(IMAGENAME)" width=### height=### alt="Add rollover text here" title="Add rollover text here" /></a></div>

Example:
<div align="center">
<a href="/images/blog/dw_081405_a_full.jpg"><img src="/images/blog/dw_081405_a.jpg" width=200 height=205 alt="Click for full-size" title="Click for full-size" /></a>
</div>