Category: Social Media

Are You a Twit?

If you spend much time on the Internet, you’re familiar with twitter, even if you don’t entirely understand the appeal. Although it was started only four years ago, it’s now one of the most visited sites on the net. In fact, social media sites (Facebook, Twitter, etc) are now passing search engines as the most highly-trafficed sites on the Internet.  So what’s the big deal?

Twitter has a simple premise: what can you say in 140 characters or less? You could use it to waste time telling all your friends what you’re doing every minute of every day, but if you’re reading this, you’re probably more interested in how you can use it as a practical tool. So can you?

 

Twitter is the best-known example of what’s called microblogging; very space-restricted blogs. Like every other service ever made available on the Internet, people have used it for spamming links, and like most blogging software, it now uses nofollow links. In other words: linking to your websites on twitter won’t do anything for your search rankings. What it can do is help you bring in new customers and new business from your old customers.

For example, we often use our twitter page to let people know about new services we offer and articles that they might be interested in. At the time of this writing, the feed isn’t optimized yet; all it does is repeat the links from our Facebook page; thanks to Facebook’s linking feature, all you need to do is post a link and it’ll pull in the first paragraph of the linked page. Since we use descriptive permalinks, it’s easy to tell what the link is about even without other information..but isn’t there a better way?

By using a link-shortening service, we can add a description and still keep the total number of characters low enough to allow easy retweeting; retweeting is the process of forwarding on the message. For example, if we tweet “Awesome SEO article at xyz.com”, one of our followers might then tweet “RT: Awesome SEO article at xyz.com”, and maybe we get more visitors to this website.

There are several URL shortening services available, the most popular of which are probably bit.ly and tinyurl; twitter is also moving to wrap all links using their own t.co service. The downside of using these is that you can’t tell where the link is going without clicking on it; the upside is that it saves an awful lot of space!

So after optimization, we might announce the post on why pagerank doesn’t matter with something like this: “Why Pagerank Doesn’t Matter: http://bit.ly/cDbf56″. Short and to the point. And isn’t that what twitter is all about?

HTML 5, Part IV: Canvas

One of the hot new elements in HTML5, canvas allows you to draw graphics, generally using javascript. Remember that the canvas tag is not supported by IE8, so you’ll need to provide fallback content, like we did in the HTML5 video section, for IE users.

<canvas id=”id” width=”x” height=”width”> </canvas>

The width and height attributes, shown above, are both optional; unless specified they default to 300 pixels wide by 150 pixels high. You can set these using DOM properties or resize the element using CSS.

The canvas tag has not been implemented consistently between browsers. Notice that this isn’t a self-closing tag; text between the two tags will be ignored, so you would put replacement content there for browsers that do not support the canvas tag; leaving that space blank means that older browsers simply won’t display anything. Safari does not actually require the canvas end tag, but Mozilla does; thus the above style works for both as Safari simply ignores the </canvas>.

The WHATWG page has full documentation for this tag; unlike most other HTML, it requires some scripting to be useful. Rather than fully explore the tag, I thought I’d link to a few interesting sites that use it.

The HTML5 Canvas and Audio Experiment puts on an interesting light show (with sound, if your browser supports the <audio> tag). Notice the fallback text inside the audio tag in the page source, displaying an error message for browsers that don’t support it.

ball game – click the set of two or more balls of the same color to remove them. Can you get them all?

You can even use canvas to play a simplified game of Super Mario Kart!

HTML5, Part I: Video

I had originally planned to finish off my Web 2.0 Overview before getting into the specifics of each technology, but yesterday’s introduction to HTML5 got a lot of attention, so we’ll move it up a bit.

HTML5 supersedes HTML 4.0, XHTML 1.0, and XHTML 1.1; it provides new tags for handling many common web design elements that are currently handled with third party applications such as Flash, and standardizes elements that have never been formally documented.

What do you need to get started?
The latest versions of Chrome, Firefox, Opera, and Safari all support some but not all HTML5 features; Internet Explorer 8 has a few features and IE 9 is expected to add more. As always, when designing for Internet Explorer, be particularly careful about elements that compete with Microsoft’s own offerings – for example, IE 8 does not support the canvas tag, which would replace Microsoft’s Silverlight technology. In this series, I’ll attempt to focus on those elements that are supported by all of the major browsers, or at least mention the exceptions.

Show me the video!
Let’s start with how to embed video in a webpage. Traditionally this has been done with a third-party plugin such as QuickTime, RealPlayer, or Flash; now we have a standards-based method that should be supported on all platforms. Currently the <video> tag works in Chrome, Firefox 3.5, IE 9, Opera, and Safari 3; however, each browser supports different codecs and containers. Unfortunately, there is no one container/codec combo that works for all of these browsers, so if you want your video to show up for everyone using an HTML5 browser, you’ll need to encode it multiple times. Fortunately, HTML5 allows you to specify several videos in one video tag, leaving it to the browser to choose which one to display. To have the video display on all browsers, you’ll need the following encodings: (Converting video into the correct formats is one service a professional website designer will provide)

  • Theora video and Vorbis audio in an Ogg container
  • H.265 video and AAC audio in an MP4 container
  • VP8 video and Vorbis audio in a WebM container

Finally, to accommodate browsers that do not support the <video> tag, you’ll want to fall back to a Flash video.

So give me the tag details, already!
When you only have one video file, the tag works pretty much as expected; however, it has a number of optional (but desirable) attributes:

<video src=”videoname” width=”XXX” height=”YYY” controls> </video>

So what’s all this? The src part, width, and height should be fairly self-explanatory;  width and height are optional but should be used anyway. By default, the video tag does not offer the user any type of control over the video; the controls option adds a built-in set. Alternatively, you can write your own; the video element has methods play() and pause() and read/write properties volume, muted, and currentTime.

If you expect every visitor to watch the video,  the preload option will start it downloading as soon as the page loads; setting preload=”none” will tell the browser not to load the video until it’s requested. Finally, the autoplay option does exactly what you would expect; it downloads the video and starts it playing as soon as possible.

Several videos, one tag
What if you went ahead and made three encodings of your video so everyone using an HTML5 browser can see it? In that case, your code will look something like this:

<video width=”xxx” height=”yyy” controls>

<source src=”video.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>

<source src=”video.webm” type=’video/webm; codecs=”vp8, vorbis”‘>

<source src=”video.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>

<object width=”XXX” height=”YYY” type=”application/x-shockwave-flash” data=”__FLASH__.SWF”>

<param name=”movie” value=”__FLASH__.SWF” />

<param name=”flashvars” value=”image=__POSTER__.JPG&amp;file=__VIDEO__.MP4″ />

</object>

</video>

Do you really need all that? Well, no…but if you don’t specify exactly how each video is encoded, the browser will find out whether it can play a video by downloading it and trying to play it, wasting your bandwidth and the user’s time. Better to put in a little extra effort beforehand! The object tags will be ignored by HTML5 browsers (as will any non-source tags inside the video tag) but will cause older browsers to display the flash movie.

Side note: the MP4 file format should be listed first, as the iPad only notices the first source listed and will fail to play your video otherwise.

Acknowledgements:
Video for Everybody offers a more in-depth discussion of setting up your videos to be readable by everyone,

HTML5: Up and Running (due out next month from O’Reilly) contains a fascinating discussion of the history of HTML and instructions on encoding video.

Web 2.0, Part III: Can You Digg It?

Surfing the Internet, you’ve probably seen the buttons suggesting that you Digg the content you’re currently viewing.  So what is this Digg stuff anyway?

Digg is a social news site that was founded in late 2004; it allows people to promote articles they feel are newsworthy. Users vote to either digg or bury an article; high-scoring articles make it to the front page, after which the site owner hopes he bought a strong enough server to handle the traffic. (See also: Slashdot effect)

So if you’re trying to get lots of people to your site, getting dugg can be the way to do it. How does that happen?

First off, of course, you need good content; your site needs to be something people will want to share, something they can point their friends to and say “hey, this is interesting”. After that, you have two options. You can go to digg.com and digg your own stories, hoping people will see them and digg them as well. Or you can add a digg button to your site, allowing the people who are already reading it to give the page their vote of approval by clicking the icon.

Either way, don’t be spammy. While it’s fine to dig your own site (and is specifically allowed), it won’t be successful unless you have something people actually want to read, and if you’re the first to digg a page you’ll need to take the time to write a good description as well. But if you’ve got great content that your users are enthusiastic about, providing a digg button helps them to share your site with others.

aweb 2.0, Part II: Wik, Wik, Wiki!

These days, who hasn’t used Wikipedia? The largest encyclopedia in the world, it was created mostly by its users and, as of this writing, has a google pagerank of 9 and millions of backlinks.  Sounds like something to emulate, doesn’t it? As it happens, the software used to create Wikipedia can be yours for the low. low price of…free!

Ok, enough with the used car salesman routine.  The truth is, wikis are very useful when you have content that should be created and edited by a number of users (although they can also be used as a simple CMS – just require registration to post and don’t let anyone else register!) While there are a number of wiki implementations available, if you plan to open your wiki to the public, MediaWiki is probably your best bet because users will already be familiar with how it works through using wikipedia, wikimedia, and other MediaWiki-based sites. Access is open by default, so it you’re looking to set up a private wiki, you might be better off with a different software option.

To set up your wiki, visit MediaWiki.org to download the software, then unpack it and set up a MySQL database as you did in the building a blog articles. Like WordPress, the wiki software has a web-based configuration utility; at the time of this writing, the latest version is 1.15.4, so to configure the site I went to sitename/mediawiki-1.15.4; if your site is to be entirely wiki-based, you probably want to actually point the url to the wiki directory.

Now just follow the instructions on your new wiki page to build your site! Notice the tabs at the top of each page. Assuming you’re logged in as an administrator, one of them will be “protect”; you can use this to restrict who can edit the page. Even if you plan to let anyone edit pages, it’s probably a good idea to protect at least the main page so random people don’t come along and change it!

You can set any page to be editable by admins, by registered users, or by anyone. Further restrictions are possible – you can prevent new accounts from being created, only allow account creation by sysops, etc – but they require editing the php code; you can find instructions in the WikiMedia manual.

Now go forth and wiki!


Blogs and wikis are just a few of the services that Moonlight Designs Studio provides; check us out today!

Web 2.0, Part I: Overview

You’ve probably heard the term web 2.0, which refers to more interactive websites (although no single definition exists).  Rather than just browsing static webpages, users interact with and even change them; this is good for the site owner, because not only are interactive websites more likely to keep users coming back, users can actually add value to the site.

A number of tools have been developed that are particularly useful for building web 2.0 sites; today we’ll take a brief look at a few of them.

AJAX, which stands for Asynchronous Javascript and XML, allows for faster user interaction.  Simple processing is done on the client side in javascript without having to wait for the data to be routed to the server and back; in the meantime, data that does need to be transferred is formatted with XML. AJAX allows you to do things like updating parts of a page as new information becomes available, without ever reloading the entire page.

Flash, of course, is still very popular in spite of not being supposed on the iPad.  Many flash applications are now written using Adobe Flex.  Flash is frequently used to add animation, video, and interactivity (particularly advertisements and games) to websites.

Much of the functionality of flash is now being provided in HTML5; while it is still technically in draft status, major browsers are already being updated to be compatible with the new standards.  HTML5 has the advantage over other technologies in that it should (soon) be supported on all systems, whereas Flash and Javascript pages will not be available to all users.

Blogs, of course, are a big part of the more interactive web; we covered WordPress last week, but there are a number of other options as well. Social networking (e.g., Facebook) is huge, and users also want new ways to consume your content (e.g., RSS). PHP has long been used for coding interactive sites, particularly in combination with MySQL databases. CSS, of course, allows you to customize the look of your content without having to do any extra work on the content itself; see the Zen Garden for a nice example of what CSS can do.

In the future, we’ll be providing a more in-depth look at each of these technologies, as well as talking a bit about when you might want to use them.

Building a Blog, Part V: WordPress Plugins

So your blog is up and running.  You’ve made a few posts, sent a link to your friends or customers, and made sure everything is spelled correctly.  Then you realize you have no idea if anybody is actually reading your posts, and the comments are filled with robot spam.  What now?

Time to add some plugins to your blog!  A plugin is a small program that adds functionality to WordPress.   As of this writing, WordPress ships with Askimet already installed; Askimet is spamcatching software to filter out robot posts from actual users.  Log into your administrative panel, click on plugins, then follow the directions to active Askimet.  Congratulations!  You’ve struck another blow in the ongoing fight against spammers!

But now you notice the Add New link, click it, and are overwhelmed by the variety of plugins available.  Which ones should you get first?  Let’s start with a few of the basics.  Remember: to use one of the plugins, you must first install and then activate it.

Google XML Sitemaps Remember when I pointed out how updating attracts search engines?  Google and other engines like to crawl frequently updated websites several times per day to keep their results as fresh as possible.  Not only does building a sitemap help the search engines to find all the content on your site, but the plugin will automatically notify Google that your website has been updated, encouraging them to crawl your site immediately.

StatPress keeps track of all kinds of handy statistics, presenting them both as numbers and as a colorful bar chart, so you can see how much traffic you’re getting.  If a promotion you’re running is working particularly well (or badly), this is a good way to find out.

Broken Link Checker What’s worse than clicking on a link and getting the dreaded 404 error?  This annoys your readers and makes you look unprofessional.  This handy plugin will keep an eye on all of the links on your site and let you know if any of them no longer work.

Are there other plugins you should have?  Absolutely!  In the future we’ll be talking specifically about plugins designed for SEO, which deserve a whole post of their own.  One thing to keep in mind when trying out new plugins is that they are not all compatible with each other; sometimes you can get odd errors as a result of interaction between two incompatible plugins.   If your site used to work right and now is behaving strangely, try deactivating plugins until the unwanted behavior goes away.

That’s all for this week; be sure to check back on Monday for more, and in the meantime, don’t forget to visit our main site!

Building a Blog, Part IV: Update Early, Update Often

Now that you have your blog set up, the tricky thing is to keep it updated; this is particularly true if you don’t have someone whose job is simply to run your online profile. Fortunately, it’s easy to have posts go up on your blog every day without actually having to write something every morning; WordPress allows you to write a post and schedule it to appear later.

If you’re at the Add New Post screen, on the right hand side above the Publish button you’ll see the words “Publish immediately”, followed by an Edit link.   Clicking on that allows you to schedule your post to go up at some time in the future.  (Do watch out, though – this defaults to 24-hour time, and if you’re not careful you could set your blog to publish in the past instead.  That, of course, could create a time travel paradox and kill us all..)

The first three articles in this series, for example, were all written last week.  Why not just post them immediately?  Well, then you’re not giving your customers any reason to come back!  Which would you rather have: a potential customer visiting every day to read your new posts, or visiting once a week when you upload them all at once?  Additionally, if you use the SEO tools we’re going to talk about in a later article, the search engines will notice every time you post an update, which helps keep your site fresh in the rankings.  Most importantly, though, look at it from the user’s perspective.  Your readers are either using an RSS feed (more on this later), in which case they’ll only visit when you post something new, or they aren’t, in which case they get annoyed when your site hasn’t been updated!

Time for an example.  One week ago today, I launched a new blog called Good News About America; I’ll be using it as an example for many of the things we’ll be talking about.  Notice that there’s no professional artwork or design involved here; it uses a standard free template that anyone can download and a few easy-to-use plugins.  The only things at all unique about it are the header (simply a few words photoshopped onto part of a photo I took) and, of course, the content.

As you can imagine, only a few days after launch, the blog doesn’t have a ton of visitors.  It is, however, being regularly indexed by the search engines and has already started receiving some traffic.  As an experiment, I deliberately stopped posting for over 24 hours; here are the results: [1]

Pretty impressive, eh?  In the first five days, I had 34 visitors, 116 pageviews, 290 spiders, and 8 feeds.  On day 6, I had exactly one of each.  However, after posting a new article and waiting a few minutes:

The second screenshot was taken less than an hour after the first one, maybe half an hour at most after the site was updated, and already it’s been spidered four more times. By the end of the day, it had been spidered 38 times and had 9 feeds.

What should you take from this?  I’m hoping these three points:

  1. Your blog should be updated daily, at minimum
  2. You should be monitoring traffic to see how changes affect your visitors
  3. You should be letting the search engines know when you update, something we’ll discuss in tomorrow’s article.

Next time: WordPress plugins you absolutely need to use.

Footnotes:

[1] The reason there are no statistics for the day the blog launched is that the tracking plugin hadn’t been installed yet; we’ll talk more about it in the article on adding plugins to your blog.

Building a Blog, Part II: Configuring WordPress

Ok, so you’ve followed the instructions in part I and you now have…a simple, very blue blog.  Doesn’t look very interesting yet, does it?  Don’t panic!  We’ll be spicing it up very shortly.

If you’re logged in to your dashboard, you should see a sidebar with a number of links including Posts, Media, etc.  The one you want right now is at the top of the second batch of links and is labeled Appearance.   You’ll see your current theme (the WordPress default) and probably the classic theme.  Not very exciting…but there are tons more to choose from!  At the top of the page, next to the Manage Themes title, is a button marked Add New; click on it and you’ll be treated to a huge number of free themes you can use for your site.  When you see one you like, just click install; once it’s installed, click activate to (you guessed it!) activate the theme and change the appearance of your blog.  There are many paid themes as well, some costing hundreds or even thousands of dollars, but to start you should stick with the free themes until you know what you like.

One of the options in the Appearance dropdown is Custom Header; this allows you to upload your own header image rather than using the default.  You can crop your image from within WordPress, but you’re better off just uploading a correctly sized header: 850 by 120 pixels.  The appearance of your blog is very important, as it needs to match the rest of your site; if you’re not a graphic artist, it’s probably a good idea to hire one to create your header image.  Research shows that customers have more trust in websites that have a professional look, and consistency plays a big part in that.  For example, this blog’s style matches that of our main site, although they were designed at different times.

Underneath Appearance is a link called Plugins; this is where you can download software that adds additional functionality to your blog. WordPress ships with Askimet, which helps keep spam out of your comments, but you have to sign up for a (free) key and activate it before it’ll work.    As with themes, there are a huge number of free plug-ins; you’ll want to read the comments and find some that interest you.  We’ll recommend a few in a future article.

Under Settings, you can change the blog title and tagline; just delete the tagline if you don’t want it to be superimposed over your header.  You’ll also set things like your time zone and the format to use for the date and time of your posts and comments.

You’ll notice there are a ton of various options that can be set, but the defaults should work until you’re up and running.  Next time, we’ll talk about making your first post.

Building a Blog, Part I: Setting up WordPress

These days, everyone and his brother has a blog; not only are they an easy way to communicate with your customers, they’re an easy way for your customers to communicate with you.  Google often highlights cool things in the Official Google BlogMicrosoft has a blog, even McDonald’s has a blog…and now you can, too!  We’ll walk you through the steps.

 

The most popular blogging software these days is called WordPress, and it’s available in three flavors , all free – wordpress.com, which is the easiest and gets you a yourname.wordpress.com address,wordpress.org, where you download the files and install them on your own web server, and wordpress MU (multiuser), which allows you to administer hundreds or thousands of blogs.

Your blog will presumably be www.yourdomain.com, www.yourdomain.com/blog, or blog.yourdomain.com – in other words, for a business blog, you probably want it under your own domain, not a subdomain under wordpress.  Unless you’re planning to have your customers set up their own blogs on your site, wordpress MU is probably overkill.  So we’ll look at the process of setting up a wordpress.org blog.  For this article, we’ll assume you already have a domain name set up and have ftp and ssh access.  Not sure what those terms mean?  Not to worry – we’ll be posting about them in the near future.  (Of course, if you don’t want to mess with the technical stuff at all, it’s easy to hire someone to do it for you; us, for example! ;-) )

Installing WordPress is pretty simple.  First, download the files; if you want to do everything with ftp and you’re running Windows then you’ll want the .zip file, otherwise you’ll want the .tar.gz.   If you downloaded the zip file, go ahead and unzip it, then FTP into your account and upload the files.   If you have shell access you can upload the .tar.gz file, then ssh in and type tar -xzvf filename.tar.gz (where filename.tar.gz is the actual name of the file; at the time of this writing, it’s wordpress-2.9.2.tar.gz).  Alternatively, you can skip ftp completely and download WordPress directly to your server by typingwget http://wordpress.org/latest.tar.gz, then open it as above.  Linux will extract the files into a new directory called (shockingly!) wordpress.

The next step is to go to your control panel and set up a MySQL database; you’ll get a screenful of useful information (specifically, database name, user name, password, and database host) that you’ll need for the next step.   Finally, fire up your web browser and go to www.yoursitehere.com/wp-admin/install.php; enter the information you just collected and a minute later you’ll be good to go.

Next time: configuring your blog