Jim Goodrich

Whitewater rafting on the stream of consciousness

A laugh at bad infogr@*#ics and a tip

by Leave a Comment

Large number 10 painted on wall

Photo Credit Horia Varlan

I woke up this morning to an infographic titled “10 Ways to Make Your Infographic Totally Awesome – ‘Our sarcastic tribute to those infographic designers who insist on doing it wrong…repeatedly and unashamedly.'” from Neo Mammalian Studios. It’s hilarious and right on the mark, go visit it right now, just come back afterwards. I found it via halfblog.net (Thank you Geoff).

I don’t care much for infographics on the whole and bad infographics? I’d use them as a virtual coaster for a virtual drink I just spilled and didn’t have a virtual paper towel to wipe off the drink on a virtual table I couldn’t possibly care less about whether or not it got virtual watermarks on it because it’s so easy to replace and besides it’s virtual.

That being said, while  I reading/laughing at this infographic, I flashed on #5 “Copyright is for losers“, with a little callout that says “Google images is your friend”.  I don’t know if it’s because I’ve researched copyright (meaning by no means am I an expert, but I’m knowledgeable), or because I just used this tool yesterday, but there’s an incredibly simple tool out there that helps avoid this.

You can find it at search.creativecommons.org. You put in your search terms and you can find images, video, music and other media that’s all licensed under Creative Commons and you can use for your posts, pages, etc. very liberally, in most cases for free with proper attribution and sharing as long as it’s not being used for commercial purposes. It searches sites such as Flickr, Google images, YouTube and many more that I wouldn’t know to search if it weren’t for this tool.

So take it or a spin, find a graphic or video or piece of music or two, that’s why it’s there. and if you have any other quick suggestions relating to the other 9 points on the infographic, feel free to share them in the comments section, I can always learn a thing or two about something new.

The Basics of Blogging: Secondary Formatting toolbar

by Leave a Comment

This post is on the Secondary Formatting toolbar.  There are 13 buttons/droplists on this one and they’re going to take a bit more explanation and description. So here’s the list from left to right:

WordPress Secondary Toolbar

  1. Header and Paragraph types
  2. Underline*
  3. Align Full
  4. Select Text color
  5. Paste as Plain Text
  6. Paste from Word
  7. Remove formatting
  8. Insert custom character
  9. Outdent (decrease indent)
  10. Indent
  11. Undo
  12. Redo
  13. Help
 *Formatting described is used on the text in this post

The first button on this toolbar 1. Header and paragraph types, requires the most explanation or one specific reason. The formatting will rarely, if ever look the same between the visual tab on the create/edit screen and the published post/page, so it’s not exactly  ‘What You See Is What You Get (WYSIWYG)’. this is because of the use of CSS (Cascading Style Sheets). It’s a good approximation of what it will look like.

Think of it like being invited to a Themed Costume party. The host knows sort of what you will look like because of the theme, but not exactly what you look like until you show up at the party. Same thing here. So let’s start with the styles.

The first choice on the preformatted drop menu is paragraph, the default font style for your blog. It’s your blog’s standard for posts and pages.

The second choice is address, and that’s what it’s made for, to put a specific styling on addresses. This paragraph in that style is not how it was intended to be used, but you get the idea.
The next choice is preformatted. This is the rare exception on these 
styles. It will look exactly the same on the edit/create screen and on
the published post/page. 
              It makes the text easy to copy and paste. 
                  This formatting is very exacting, unforgiving and 
                      labor intensive. 
                  Unless you already can see a use for this format 
              (like a code snippet
or an e.e. cummings poem), you probably won't use it much.

This is the Heading 1 selection.

This is the Heading 2 selection.

This is the Heading 3 selection.

This is the Heading 4 selection.

This is the Heading 5 selection.
This is the Heading 6 selection.

The second button is the 2. Underline button. It’s fairly self-explanatory.

The next button is the 3. Align Full button.  The purpose of this button is to have flush right and left margins, no ragged edges on either side. The downside to this format is to achieve the flush line on both sides spaces are added between words and can make the spaces visually distracting (typographers call it ladders and rivers).

Next is the 4. Select text color button. You get a drop list with color choices for the text you have selected using click and drag.

The next two buttons work in a similar fashion.

The fifth button on the toolbar is the 5. Paste as Plain Text button.You use this button when you want to paste text into a post or page. That removes formatting that could cause problems with how the text is displayed on the page. It’s basically the safest way to make sure that your posts and pages look good.

Next is the 6. Paste from Word button.  Microsoft Word has a reputation for adding a lot of code that if you simply copy and paste, will have your displayed text go wonky.  It’s so prevalent that this button was created. Use it if you want to bring something over from Word.

The 7. Remove Formatting button clears the formatting you might have in a paragraph or selected text should you change your mind about what you used or just decided to make a change.

Next is 8. Insert Custom Character button gives you a drop chart of those extra characters so you don’t have to find the HTML code or the Number code or yourself to write a mathematical formula or a word in a foreign language with diacritical markings.

9. Outdent (decrease Indent)  button. It seems a bit backwards to have this button first since you have to have some indented text before you can outdent or decrease the indent button, but that’s what it does. If you’re outlining a process and you have multiple levels, just click the button and it’s done.

And the 10. Indent button is the other half of the pair. Use it for a Multilevel numbered outline or bulleted list and this will give you the next subset level.

Next is another pair that seems a bit backward, starting with the 11. Undo button.  I don’t have a deinitive answer as to how many actions you can undo, but I do know it stores over 20 of the last actions. This depends on whether or not you have saved as well. Saving will commit all the actions and thereby clear out the individual steps.

The other half of this pair is the 12. Redo button. This will reverse a lost of the actions taken and has the same constraints as the Undo button.

Last, but not least is the 13. Help button. Click that you get a popup box with four tabs “Basics, Advanced, Hot Keys and About” . Each tab gives you specific help on those areas of the toolbar and how it works.

So that’s an overview of the Secondary toolbar in the WordPress interface. More to come soon.

The Basics of Blogging: Primary Formatting toolbar

by Leave a Comment

This post will walk through the most used formatting toolbar in WordPress seen on the Visual Tab at the top of a post when creating or editing a post. By default, there is one row of 15 graphical buttons on the visual toolbar (Extra buttons may be added at the far right by plugins). They appear in this order (from left to right):

WordPress Primary Toolbar

  1. Bold*
  2. Italics*
  3. Strikethrough*
  4. Unordered (Bulleted) list
  5. Ordered (Numbered) List*
  6. Block quotes
  7. Left – Align text+
  8. Center – Align text
  9. Right – Align text
  10. Insert/edit link
  11. Unlink
  12. Insert More tag
  13. Toggle Spellchecker (with multiple languages drop down menu)
  14. Toggle Full Screen mode
  15. Show/Hide Kitchen Sink (yes, that’s really what it’s called).
*Formatting described is used on the text in this post
+Text is left-aligned by default in WordPress

Each of the buttons has a keyboard shortcut which you can see if you place your mouse pointer over the top of the button and let it sit there, so I won’t go further into those.

The first nine of these buttons can be used in one of two ways. You can click it and the format will be applied to the text as you type or you can click and drag to highlight the text then click the button to apply the formatting only to that section.

The First three buttons, 1. Bold, 2. Italics and 3. Strikethrough are used in the Ordered (numbered) list above and are fairly self-explanatory.

The next button is the 4. unordered list, more commonly known as bullet points. This is well suited for blog posts as it’s:

  • Eye catching
  • Easy to scan
  • Allows for the reader to get the point of the post very quickly

The next button is the 5. ordered list, also known as the numbered list (as seen above). It’s good for steps or when you have a set (like buttons at the top of the page) you want to reference in their order.

The next button is the 6. blockquote button. This is best for lengthy quotes from other authors, articles or blogs. it also works very well for testimonials on a page.

It visually calls out any quotes on your post or page.

The next button is the 7. align-left button. This displays your text with a straight edge on the left side of the page and a ragged edge on the right side. This is also the default alignment in WordPress.

The next button is the  8. align-center button.  This will center your text on the page and can have a  ragged edge on both the left and right sides. That depends on the length of the line itself.

The next button is the 9. align- right button. This displays your text with a straight edge on the right side of the page and ragged  edge on the  left side of the page.

The next button looks like link three pieces of chain linked together. It’s the 10. Insert/edit link button. This is a multiple step button. To insert a link, you type the text you want to be a link, then click and drag to select that text and click the button. This opens a dialog box with a field for the URL (web address the link points to), Title (this is what appears if you place your pointer over the link and it’s good for text readers and Search Engine Optimization SEO as well) and a check box asking if you want it to open in a new window/tab (if you’re linking to an external website, rule of thumb is you want to check this box so the reader still has your site open). It also has a droplist at the bottom titled Or link to existing content. this is to link to a post or page on your site, in that case you wouldn’t check the open in a new window/tab.

The next button looks like a broken chain. It’s the 11. Unlink button. All you have to do to use it is click somewhere in link text so your cursor is in the middle of the link, then click the button. This will delete the link information (URL, Title and checkbox) without deleting the link text.

The next button is the 12. Insert More Tag button. this can be used to split your post into displaying on more than one screen. This only works with a post, not a page. once you use the button, it will place a link at that spot that leads to the rest of the post.

The next button is the 13. Toggle Spellchecker button. You can use it on the post as a whole or any section you click and drag over with your mouse to select. The droplist contains multiple languages you can spellcheck.

The next button  is the 14. Toggle Fullscreen Mode button. It has four arrows pointing in four diagonal directions. Click that button and it shows you what your post/page looks like without any of the WordPress interface surrounding it.  To exit fullscreen mode, point your mouse at the top of the page and click the exit fullscreen link.

The last button is the 15. Show/hide the Kitchen sink button. It looks like three rows of small boxes in different colors and its sole purpose is to make the secondary toolbar that sits just below this toolbar appear and disappear. It is the last default button on the primary toolbar. If you have any buttons to the right of this button, it is usually because you are using a plugin that put it there.

If you don’t see the secondary toolbar, click the button and it will appear. That secondary toolbar is what the next post will be about.

Audio Player Test

by Leave a Comment

I’ve been holding back on using HTML5’s Audio/Video capabilities because the ease of downloading the files with a simple right click (or CMD click for you Mac users) after all, I don’t like to make it too easy to download my music files wouldn’t you know. But since ReverbNation has launched an HTML5 player widget  that restricts that, I’ve decided to test out some plugins to see if they do the same thing.

So here’s my first test.  It’s a Plugin called Degradable HTML5 audio and video. Its description seems to be the best one I’ve read so far, so I’ll test it. If the player remains up, it means it’s the one I like the best, if not, you’ll know that I’ve moved on to other plugins.

Here are Jim & Tim‘s web demos for testing purposes.

Never Been to Spain
[html5audio src=”http://jamesgoodrich.com/audio/neverbeentospain” format=mp3 wav]

Stuck in the Middle with You
[html5audio src=”http://jamesgoodrich.com/audio/stuckinthemiddlewithyou” format=mp3 wav]

Your Mama Don’t Dance
[html5audio src=”http://jamesgoodrich.com/audio/yourmamadontdance” format=mp3 wav]

[Edit: As a result of the initial writing, I found a known plugin conflict with Viper’s Video Quicktags, which I use on this site. Fortunately, the plugin author provides a modified version download that deals with this conflict.]

Let me know what you think in the comments.

I made it mobile…Mostly

by Leave a Comment

After a presentation by the Google Mobile Team at a seminar a little over a week ago, I decided to set up  mobile themes for some sites as a test. The one you’re reading right now has a mobile theme, as well as With A Voice Like This, 4-AM, The Caroling Connection and Jim & Tim.

Jim & Tim was a slightly different case. I had installed a mobile theme on that site before, something very basic and it was a set it and forget it type of WordPress plugin. It was an “I’ll get around to it when I have a chance…Or the motivation”. Well, now was the time. It had some design flexibility that I hadn’t taken advantage yet. I looked around and found that the only place the plugin existed anymore as far as I could tell was on the Jim & Tim website. No listing in the WordPress repository and the plugin website was no longer valid.

I went and found a plugin called WPTouch (I’m linking to the free version because I have nothing to do with it other than testing it out). Installing it is the standard WordPress plugin installation process. After that, it all come  down to flexibility for me.  The top one for me is that the person using the mobile device can switch between the mobile theme and the standard theme with the click of a virtual button, so it can load fast and have the user complete their business or take a look at the full desktop site, if they want. Here’s the back end flexibility I see so far(this list is by no means comprehensive):

  • Choose landing page
  • Choose which pages go on the menu
  • Choose and add icons for the pages on the theme’s drop-down menu
  • Change basic color schemes
  • Select User Agents to load mobile theme

That last one might seem a bit cryptic to you, it did to me at first. User Agent in this case can be a platform (e.g. Android) or a device (e.g. iPod). This can be a double edged sword in trying to keep up with everything, but it also allows you to choose whether or not certain devices display the mobile theme at all. I can see the possibility of certain sites being straightforward and fast loading  to the point of not wanting to serve up the mobile theme on a tablet. On the flip side, I know someone with an HTC Incredible who has three browsers, the one that comes standard with the smartphone itself, Opera  and Dolphin. Of those three, only the standard browser on the phone showed the mobile theme.

Seems like there’s some more tweaking to be done. And that’s just what I plan to do.

Photo Credit: Auswandern Malaysia