Cherrysave http://www.cherrysave.com A simple web design blog Tue, 22 Jun 2010 23:53:15 +0000 en hourly 1 http://wordpress.org/?v=3.0 WordPress Social Media Optimization in a Nutshell http://www.cherrysave.com/web-content/wordpress-social-media-optimization/ http://www.cherrysave.com/web-content/wordpress-social-media-optimization/#comments Tue, 22 Jun 2010 23:53:15 +0000 admin http://www.cherrysave.com/?p=510 Wordpress is a great platform for SEO — in fact, most of the title and meta optimization is done for you right out of the box. However, that is not the case of social media. Here is a brief list of ways you can use Wordpress to improve the social media optimization of your blog or content site.

Use WordPress Social Media Optimization to capture the world in your lens.

If you find this article helpful, you should share it with your friends on Twitter and Facebook in return.

Add Social Media Buttons to Your Site

Adding social media buttons is a great way to encourage your audience to share your content with their communities. Of course, you can opt to use a plugin that combines multiple different buttons into one discrete unit, but I find that it doesn’t tend to convert well. The buttons are too small, and users don’t seem to use them much.

Therefore, I would recommend using a button that is branded by the social media service you are planning to use. This way, you can tap into the brand equity created by services like Facebook and Twitter when presenting the share buttons to your users. For instance, when I added the Tweetmeme button to Cherrysave, my retweets skyrocketed relative to using another button. The Tweetmeme WordPress plugin is available so you don’t have to manually paste in the code.

If you are interested in adding buttons for other social media services, you should check out the Facebook share plugin and the StumbleUpon plugin.

Optimize Your Meta Title Tags

Generally, the title of your webpage is pulled from the <title> tags that exists in the <head> portion of the page. Occasionally, though, the title that appears in the browser is not necessarily the title that you want to appear on Facebook when a user shares the page. You can set a separate, unique title for social media purposes with the meta title tag:

<META NAME="Title" CONTENT="Page Title Here">

Sony’s Stop Writing on My Wall campaign did a really good job using the meta title tag to optimize for social media. When you visit the actual site, the title is “SMAA – Social Media Addicts Association.” However, when you share it on Facebook, you get “I joined the Social Media Addicts Association!” Perfect for Facebook.

Encourage Your Readers to Share

Your viewers are most likely to share your site if you tell them to. If you focus on providing very high quality content, there will be a feeling of reciprocity that you can focus by requesting them to click on one of your social media buttons.

]]> http://www.cherrysave.com/web-content/wordpress-social-media-optimization/feed/ 16 WordPress 3.0 Released: The Top 7 New Features http://www.cherrysave.com/web-design/wordpress-3-0-released-the-top-7-new-features/ http://www.cherrysave.com/web-design/wordpress-3-0-released-the-top-7-new-features/#comments Sat, 19 Jun 2010 14:55:33 +0000 admin http://www.cherrysave.com/?p=461 Wordpress, the widely-used blogging platform that powers some of the most visited sites on the web, is known for ease of customization and a wide variety of themes and plugins. With the third major version of Wordpress now available to the public, Wordpress is ditching some of the blogging constraints that exist in a fresh install to become a much more powerful content management platform.

If you find this article helpful, you should share it with your friends on Twitter and Facebook in return.

WordPress 3.0 incorporates quite a few new features, including custom post types, a URL shortener, and a new theme. Though there isn’t as many new features as previous WordPress releases, it is helpful to have a list to aid in exploration of WordPress 3.0 new features. You’ll find plenty of lists like this across the web, not least of which being the official changelog at the WordPress codex. The problem is that most of these lists don’t explain how to use the new features, and many are not self-explanatory or enabled by default. This is my attempt to remedy that. Here’s a list of the top seven most compelling features that could change the way you blog.

1. Built-in WordPress Multiuser (MU)

WordPress 3.0 adapts the ability to manage multiple different blogs from a single installation. Previously, you would have to install the WordPress MU (Multiuser) edition in order to do that. This is what blog services like WordPress.com use to provide and sell their hosting services. Now, instead of only having one blog, you can very easily create a network of thousands of blogs, and manage them all from the same interface.

A quick caution to people who are currently running a WordPress MU install: you want to be careful before you upgrade to 3.0. Use a test site to make sure all of the WPMU plugins work before you put them in production. There’s nothing like a ton of angry clients first thing on a Monday morning from users who can’t access their blog.

The multiuser functionality is disabled by default when you install or update to WordPress 3.0. To enable it, you need to paste this line in wp-config.php, right above where it says /* That's all, stop editing! Happy blogging. */:

define('WP_ALLOW_MULTISITE', true);

You should refer to the WordPress documentation for more information.

This will allow the Network option to show up in the Tools menu, which you’ll access by going to Tools → Network. When you access that page, you’ll be greeted by an installer that will ask you to choose whether you want to install sub-blogs in subdirectories or subdomains.

From there, you’ll have to paste in a new wp-admin.php and .htaccess file. WordPress 3.0 will walk you through the steps as soon as the installation of Network mode is completed.

WordPress Multiuser - Be sure to check your WPMU plugins when upgrading to 3.0

2. Custom Post Types

WordPress custom post types are a feature that could turbocharge WordPress as a content management system — and not in the way of the now defunct Turbo mode. While this may not seem much different than a post category at first glance, this gives developers and theme designers the ability to cause certain types of posts to have a different appearance and functionality than the rest of the blog.

For instance, I’m currently working on a WordPress theme gallery called Themebook. This is a portfolio theme that allows me to upload an image and use that as a centerpiece of the content, much like a photoblog. But, I can’t figure out how to incorporate a normal blog post — that is, an article with a headline, body, and footer — without having to create a special category or tag that I could sort through on the backend. With post types in WordPress 3.0, I could define the types “theme” and “blog-post,” and have the theme use a different approach for each type.

For instance, I could create the ‘theme’ post type by sticking the following in my functions.php file:

add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( 'theme',
    array(
      'labels' => array(
        'name' => __( 'Themes' ),
        'singular_name' => __( 'Theme' )
      ),
      'public' => true,
    )
  );
}

You’ll want to put in your post type, in both singular and plural form, where I put in ‘theme.’

Then, the “Themes” option will appear on the admin page on the top level of the left menu, right by where pages and posts normally live. After I create a few theme posts, I can sort for them with the following:

$loop = new WP_Query( array( 'post_type' => 'super', 'posts_per_page' => 10 ) );
while ( $loop->have_posts() ) : $loop->the_post();
     . . .
endwhile;

Now that you’ve seen Themebook, I would love some advice about the viability of turning it into a theme store, iTunes-style (minus the closed system). Tell me what you think in the comments.

3. Navigation Menu Customization

This nifty little feature lets you build your own custom menu, complete with categories, tags, posts, pages, and anything else from the taxonomy. It uses a nifty drag and drop interface that allows users to sort, organize, and remove elements from the menu on the fly.

Example of WordPress 3.0 Custom Navigation Menus

I tried to play around with this with the new Cherrysave theme (which will hopefully be available for download soon), but I couldn’t get the link to show up in the admin interface. It turns out that because the menu’s public output is meant to be rendered as a widget, you need to have a widgets-aware theme. So, for those of you using custom themes without widget support, don’t get your hopes up (but those of you with stock or good custom themes, let me know what you think of this feature).

4. Custom CMS Taxonomies

Basically, taxonomies are pieces of meta information that attach to things you create in WordPress 3.0. They are used to organize and sort your content in ways to relate directly to the content. For instance, older versions of WordPress only have tags and categories as the available taxonomies for posts. WordPress 3.0 allows users to go far beyond that.

Brian Casel at Mashable explains it far better than I do:

Let’s say you’re a film fanatic and you use your WordPress blog to post reviews and rate new movies. You can create a custom taxonomy for “Rating,” then add R, PG-13, PG, G to every review.

Another example would be real estate listing websites. In addition to photos and descriptions, you might use additional taxonomies to provide a list of specs on each property such as asking price, number of bedrooms, year built, etc.

Much more clear, right? So how does one create said taxonomies? Just stick this code snippet into your functions.php file, my dear:

register_taxonomy('test', 'post', array(
'hierarchical' => false,  'label' => 'test',
'query_var' => true, 'rewrite' => true));

Just replace “test” with the name of your taxonomy, and you’ll be off and running. Now, when you edit or add a new post, you’ll see boxes where you can fill in content about the taxonomies you just created.

An example of a box generated with custom WordPress taxonomies

And, as Cosmin Negoita over at 1st Web Designer points out, you can easily access this information in your theme with the following snippet, placed inside the WordPress loop:

echo get_the_term_list($post->ID, 'test', 'Test: ', ', ', '');

Again, “test” gets replaced with the name of your taxonomy.

5. New Default Appearance: The Twentyten Theme

Twentyten is the much needed new default theme for WordPress 3.0. It’s actually quite beautiful, and features simple lines and great typography.

This is the Twentyten theme, the new default in WordPress 3.0

Twentyten also has advanced features built directly into the theme that take advantage of the power of WordPress 3.0. For instance, you can select a custom header and background from a variety of different stock images, or upload your own. The menus, created by the menu management tool, are drop-downs that live in the header. One of my favorite new features, though, is the ability to create “Asides” and “Galleries” from your posts.

Creating custom post types in WordPress 3.0

To create these types of posts, just create categories called “Asides” and “Gallery,” and file your post as appropriate. The only thing I can’t figure out is why the WordPress development team didn’t choose to take advantage of the new custom post types feature to do this instead. Without reading a guide on Twentyten, most users would never have known that these features existed. With custom post types, Asides and Gallery would appear in the left column, and people could create them at will via a graphical interface. If you have any insight on this, please, leave me a comment.

6. WordPress URL Shortener with Shortlink (self-hosted blogs only)

Shortened URLs are a great way to share your content on Twitter and Facebook. Unfortunately, though, a link from bit.ly or owl.ly, while effective, masks your domain name and can make users wary. Furthermore, it doesn’t do much for your branding. Wtih WordPress 3.0, you can make your own shortlinks, assuming that your blog is self-hosted. All you need to do is click on the “Get Shortlink” button right below the title page in the post editor.

Then, you’ll get a pop-up with the WordPress shortlink URL. For example, the shortlink for this post is:

http://www.cherrysave.com/?p=461

7. Author Templates

Now, you can customize how author information is displayed on your blog. This is really useful for those who have multiple people posting, or those who took advantage of the new Network feature in WordPress 3.0.

In order to create a new author template, merely create author.php in your current theme directory, and use the author template tags as appropriate. At least, that’s how you would have done it in previous versions of WordPress.

In 3.0, you can go a step further and set up a custom template per author, based either on their nice name or their user id number. For instance, I could have a custom author template for myself by creating author-kurt.php or author-1.php in my theme directory, and filling it with author template tags. One feature I would like to see in future versions of WordPress is the ability to create author templates by the user’s class. For instance, there could be one template for admins, one for moderators, and one for authors. If anyone knows how to do this now, let me know.

Is there any important features that I missed? Let me know in the comments, and I’ll update this post as things turn up!

If you find this article helpful, you should share it with your friends on Twitter and Facebook in return.

]]> http://www.cherrysave.com/web-design/wordpress-3-0-released-the-top-7-new-features/feed/ 19 10 Blogs You Should Be Reading for Web Site Design Inspiration http://www.cherrysave.com/inspiration/10-web-design-blogs-you-should-be-reading/ http://www.cherrysave.com/inspiration/10-web-design-blogs-you-should-be-reading/#comments Mon, 08 Feb 2010 03:13:58 +0000 admin http://www.cherrysave.com/?p=350 As much as I would like to take all of the credit for the ideas behind this blog, it actually had quite a bit to do with the wonderful amount of web design resources that are available out there. There is a huge number of bloggers, freelancers, and designers who publish wonderful ideas and designs that inspire plenty of others, including myself. So, I wanted to highlight some of the resources that have given me great web site design inspiration with this design blog list.

1. A List Apart

A List Apart

2. Six Revisions

Six Revisions

3. Speckyboy

Speckyboy

4. Tutorial9

Tutorial9

5. Function Web Design

Function Web Design

[ad#header]

6. Cats Who Code

Cats Who Code

7. Smashing Magazine

Smashing Magazine

8. Freelance Folder

Freelance Folder

9. Script and Style

Script and Style

10. Webdesigner Depot

Webdesigner Depot

These are some of the best web design blogs I’ve found so far. Do you have a design blog that you really like but I didn’t mention? Feel free to leave it in the comments!

]]> http://www.cherrysave.com/inspiration/10-web-design-blogs-you-should-be-reading/feed/ 9 Record your Desktop with Linux Tools http://www.cherrysave.com/linux/record-your-desktop-with-linux-tools/ http://www.cherrysave.com/linux/record-your-desktop-with-linux-tools/#comments Sun, 07 Feb 2010 01:56:44 +0000 admin http://www.cherrysave.com/?p=344 You can capture video of all of the amazing things happening on your desktop with one of Linux's many screencasting applications. These programs are perfect for creating demonstrations for blogs and tutorials, and for illustrating projects with more than just still images.

Many different programs are available, and they all provide a different set of features, options, and output formats. When choosing, consider the degree of control you want to have over your video resolution and whether the video is intended to work on non-Linux operating systems. Common open source output formats, such as FLAC and Ogg Theora, work natively on Linux but require software and plugins on proprietary operating systems. User interfaces also vary greatly; some applications are nothing more than an icon in the system tray while others depend on large interfaces with many options.

I tested three popular screencasting applications to see which is best for everyday use. I evaluated the user interface, the quality and variety of output formats, and the ease of installation and obtaining the required dependencies. I tested the programs on a MacBook Intel Core 2 Duo with 4GB of RAM, dual-booting into Ubuntu 8.04 Hardy Heron.

Istanbul

Istanbul is a simple desktop recorder that lives in your system tray. Clicking on the icon starts the recording session, and clicking it again ends it. The video is encoded in the Ogg Theora format. You can capture the full screen, a selected window, or a portion of the desktop, with or without sound.

Istanbul

This application doesn’t have a complicated user interface, making it easy to use, but there are some drawbacks. Although you do have some control over the resolution size, you cannot change the output format of the video file. This isn’t much of a problem if you’re going to upload the video to a Flash-based video site, but the Ogg Theora format doesn’t work out of the box of the main proprietary operating systems without an application like the VLC media player. Therefore, you’ll have to convert to a different format if your intended audience requires it.

Istanbul is easy to install, and it is included in most distribution repositories. In Ubuntu, I was able to install it with the Synaptic Package Manager. It requires PyGTK and GStreamer, which are common dependencies.

Wink

Wink is geared toward making video tutorials; it compiles a series of screenshots to a Flash format, and allows you to edit the video directly and add text boxes, navigation buttons, and still images. It includes many advanced features, such as the ability to create preloaders (elements that load portions of the video before it starts playing) and control bars for the Flash playback.

Wink

The interface is not as minimal as Istanbul’s, but it is still relatively straightforward. The main drawback of Wink is the video output formats: Flash and Windows .exe programs are good for viewing the video when the file is local or when it is hosted on a personal Web site, but you can’t upload Flash and .exe files to most social networking and video sharing sites. Wink is good for corporate entities who want to share a tutorial with staff, but it is less useful for home users who want to show off their desktop on YouTube.

Most distributions include Wink in their repositories, and you can install it with any package management application. Unfortunately, though, Wink doesn’t work with Ubuntu 8.04 as of the writing of this article without some hacking. I tested it for this review with a previous version of Ubuntu.

XVidCap

With XVidCap, you can capture desktop video and take single-frame screenshots. You can record portions of the screen by dragging a red selection rectangle over the area you wish to capture. The program can handle a wide variety of output formats, including MPEG, AVI, Flash, and QuickTime.

Xvidcap

The interface consists of a small toolbar with more options tucked away inside a Preferences panel. XVidCap uses the FFmpeg libraries to capture video or a series of images, and it can also embed audio. Some people claim that XVidCap can dramatically slow down your computer if you try to record a large area. I didn’t have that problem on my machine, but I had 4GB of RAM.

Installation of XVidCap is easy because it comes in the repositories for most distributions. It requires common dependencies, such as libavcodec (the FFmpeg codec libraries for video), and Cairo, Glade Interface Designer, and GTK+ to render the graphical interface.

Conclusion

XVidCap is the most versatile of these three tools for recording your desktop and creating screencasts. Istanbul is a close second, but its lack of support for a variety of different output types is a drawback. Wink is nice, but it’s limited in use to only a few tasks, and it’s not for users who merely want to record their desktops. XVidCap can handle many popular video formats, allowing it to play nice with both Windows and Mac OS X. The red selection box is kind of clunky, and there is no easy way to record only a specific window without it, but XVidCap gets the job done in an efficient manner.

]]> http://www.cherrysave.com/linux/record-your-desktop-with-linux-tools/feed/ 12 Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs http://www.cherrysave.com/web-design/forget-about-photoshop-stop-using-images/ http://www.cherrysave.com/web-design/forget-about-photoshop-stop-using-images/#comments Fri, 05 Feb 2010 05:52:50 +0000 admin http://www.cherrysave.com/?p=320 Images increase download time for end-users and workload for web designers, slowing down the time it takes to fully develop a concept for clients. Furthermore, images can add unneeded clutter and increase search-engine blindness, detracting from the principle of simple web design. You don't need images to create a deep and beautiful web design. Instead, you can use CSS, typography, and optical effects to do many of the same things and instead only use images when they are clearly needed.

Images increase download time for end-users and workload for web designers, slowing down the time it takes to fully develop a concept for clients. Furthermore, images can add unneeded clutter and increase search-engine blindness, detracting from the principle of simple web design.

You don’t need images to create a deep and beautiful web design. Instead, you can use CSS, typography, and optical effects to do many of the same things and instead only use images when they are clearly needed. If you like these tips, you should check out the bonus tips for five more ways to stop using images in web design.

Before we get started, there is one potential downside to these techniques that needs to be mentioned. Because of the (awful) state of standards-compliant browsers, not all of these ideas will work (or look the same) in all browsers. Therefore, there may be times when you might opt to use an image instead when you want an element to be sure to render the same across all browsers. One way to test browser standards is via the Acid3 test. And, you can see how your design will look in a variety of different browsers with BrowserShots.

Sideways Text

I recently spoke of being creative with text to create typographic contrast. You can rotate text by 90 degrees in order to create a more dramatic appearance, all without resorting to an image. This trick relies on proprietary CSS attributes, so it probably will not be well supported outside of Webkit-, Mozilla-, and Microsoft based browsers.

To do it, add the following code snippet to your stylesheet:

.sideways {
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Then, add the style to the element in the usual method:

<h1 class="sideways">CSSrules</h1>

The output should look something like this:

Example of CSS attribute that creates rotated text

Of course, you can rotate text in a variety of different directions and angles by changing the value of the attribute.

Create a Triangle

Believe it or not (and I wouldn’t, if I were you… :-) ), you can create some basic shapes with CSS. Now, you won’t have to use images to include basic symbols within your templates. You can create a triangle by inserting this HTML in the spots where you want the triangle to go:

<div class="upper">
     <div class="inner"></div>
</div>

Now, use the following CSS classes to complete the effect:

.upper {
     position:absolute;
     left:150px; top:100px;
}

.upper div {
     border-left-color: transparent;
     border-style: solid;
}

.inner{
     border-width: 0 0 300px / 200px;
     border-bottom-color: #955;
}

You will get the following:
Create a triangle using only CSS

Automatically Zebra-Stripe a Table

Okay, so I know that this doesn’t quite qualify as a way to replace using images, but it’s such a nifty, simple trick that I couldn’t help but mention it. Using a single selector, you can automatically alternate the appearance of rows in a table. No more having to use PHP or Rails to dynamically insert an “odd” or “even” class to every other table row…

To do this, just start with a basic table. The key thing is to make sure that you wrap the main content of the table in the
tbody
tag. This will make it so that zebra-striping is not applied to the header rows. Here’s the table:

<table border="0">
	<tbody>
		<tr><td>One</td><td>and</td></tr>
		<tr><td>Two</td><td>and</td></tr>
		<tr><td>Three</td><td>and</td></tr>
		<tr><td>Four</td><td>end.</td></tr>
	</tbody>
</table>

And the magical, magical CSS snippet:

tbody tr:nth-child(odd) {
   background-color: #ccc;
}

And that will churn out (something) like this:

Zebra-stripe a table with CSS

Drop Shadows or Glows

You can also avoid using images by using CSS to add a drop shadow or a glow to elements. The following code snippet will apply the shadow to a box element, which is useful for making something stand out on a page. Obviously, you’ll have to play with the effect a little bit to make sure that it doesn’t look too tacky.

.module {
  background-color: #cccccc;
  /* offset left, top, thickness, color with alpha */
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  /* IE */
  filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
  /* slightly different syntax for IE8 */
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}

Of course, most of these commands are redundant in order to ensure that the browser renders it correctly. Oh, the joy of standards compliance… Here’s what the final effect looks like:
Drop shadows with CSS

Gradients

Here’s a simple trick for gradients:

.gradient {
	background-image: -moz-linear-gradient(top, #aaaaaa, #dddddd);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#ddd));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaaaaa,endColorstr=#dddddd);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaaaaa,endColorstr=#dddddd)";
}

And it looks like this:

Add a gradient with CSS

Keep in touch with these updates by subscribing to the RSS feed or following me on Twitter.

]]> http://www.cherrysave.com/web-design/forget-about-photoshop-stop-using-images/feed/ 29 TimeVault simplifies data backup for Ubuntu users http://www.cherrysave.com/linux/timevault-simplifies-data-backup-for-ubuntu-users/ http://www.cherrysave.com/linux/timevault-simplifies-data-backup-for-ubuntu-users/#comments Thu, 04 Feb 2010 14:22:22 +0000 admin http://www.cherrysave.com/?p=312 TimeVault is a backup utility for Ubuntu that addresses these problems.]]> Backing up data can be difficult, especially when you only want to copy files that changed since the last backup. It can be even more troublesome when you have to remember to start the process manually,or you have to delete old backups to make room for new ones. Because of these difficulties, some people decide not to back up data at all, and feel the pain when they accidentally delete the wrong file or their system crashes. TimeVault is a backup utility for Ubuntu that addresses these problems.

TimeVault makes saving and recovering data easy through an automatic process. You define directories to include or exclude from the process, and TimeVault takes care of the rest by creating snapshots of your data. A snapshot is a clone of a directory at a point in time. Files are copied if they’ve changed since the last snapshot. If a file hasn’t changed, it is simply referenced to an older snapshot and no space is used for backing it up. Snapshots are read-only, so they are protected from accidental deletion or modification. If you are the root user, you can delete intermediate snapshots without harming the rest of them. Because of that, you can still restore to a point before or after the deleted snapshot. When you pick what files to exclude, you can specify either a path or a pattern to identify files, which is especially handy if you want to exclude large media files or music directories.

The Pending Snapshots dialog displays a list of the current backup tasks being performed by TimeVault.

TimeVault can make backups even easier by automating them. It can be set to take a daily snapshot of included directories without you having to do anything, and will let you know when the automatic snapshot is finished with a notification in the system tray. Automatic snapshots are optional, and can be enabled in the preferences dialog by checking the “Enable automated snapshots” option on the General tab.

Snapshots expire when certain conditions are met, such as after a defined number of days, when enough snapshots have been taken for a single file, or when too much space is used for a file. You can edit and adjust these settings in the Expire tab of the preferences dialog.

It’s simple to restore data with the Snapshot browser. It displays a timeline of all the snapshots taken, the data included, and the size and the number of files in any given snapshot. You can also search the snapshots to find one with a specific file, which is useful if you want to restore a deleted document. You can also delete backups from the Snapshot browser without having to go through the filesystem manually. Also, TimeVault can revert all of the monitored directories back to a certain snapshot. You just select the snapshot and click the Revert button in the bottom right corner.

The Snapshot Browser is the main interface for restoring data to a previous snapshot.

TimeVault’s restoration features are integrated into Nautilus, the GNOME filesystem browser. By right-clicking on a file and selecting the Properties option in the context menu, and selecting the Previous Versions tab (indicated by the TimeVault icon), you can see how many previous versions of the file are stored in snapshots, as well as other basic information. At the bottom of the dialog there are buttons to launch the Snapshot Browser to restore previous versions of files.

Installing TimeVault

TimeVault is not yet part of the Ubuntu repositories. Because of that, you have to download and install a .deb package from the Launchpad project site.

After the .deb package is installed, you can start TimeVault Notifier manually from Applications -> System Tools -> TimeVault in the GNOME menu panel. The Notifier consists of the system tray icon and notifications for completed snapshots, and has convenient access to preferences and the Snapshot Browser. The TimeVault back end will run all the time. For most people, it is easier if the TimeVault Notifier begins at startup. To do this, open the Session configuration panel from System -> Preferences -> Sessions in the GNOME panel. Click on the Add button, type “TimeVault Notifier” in the name box, and “/usr/bin/timevault-notifier” in the path box. Click OK when finished. Next, you should specify a directory to store TimeVault snapshots with a command like sudo mkdir /home/timevault/ . If you skip this, the snapshots will go into the root directory, and that can make things messy.

Tell TimeVault to use that directory by selecting it in the Snapshots Root Directory option under the General tab of the preferences dialog. Lastly, be sure to visit the Include and the Exclude tabs of the preferences dialog to tell TimeVault which files to put in the snapshot. As soon as you finish that, the application will make its first backup.

]]> http://www.cherrysave.com/linux/timevault-simplifies-data-backup-for-ubuntu-users/feed/ 7 Using Web Fonts in CSS3 http://www.cherrysave.com/web-design/using-web-fonts-in-css3/ http://www.cherrysave.com/web-design/using-web-fonts-in-css3/#comments Wed, 03 Feb 2010 14:34:18 +0000 admin http://www.cherrysave.com/?p=308 simple web design, it would be better to use plain text. Thankfully, you can use CSS3 web fonts along with other typography techniques to dress up the font on your website.]]> Currently, you can only use about 10 to 15 types of fonts on the web without having to create time-consuming and non-Google friendly images. In order to promote and further the idea of simple web design, it would be better to use plain text. Thankfully, you can use CSS3 web fonts along with other typography techniques to dress up the font on your website.

As a disclaimer, remember that CSS3 is not universally supported yet by all browsers, so use the following techniques with caution. Off of the top of my head, I believe that this is supported in Webkit (Safari, Chrome) and Firefox, but if I’m wrong let me know in the comments.

Import Web Fonts Into Your Design

With CSS3, you can import fonts into our design much like you import video, images, text, and scripts. First, find a font on the web that you would like to use. Generally, it has to be publicly accessible in a TrueType format (.ttf). For this example, I’m going to use the Kimberley TrueType font referenced recently on A List Apart.

To import the font, merely reference it as follows in the stylesheet:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}

The @font-face selector indicates that you are declaring a font for use in the stylesheet. The font is named (anything you like) after the font-family: selector. The path to the font is referenced via the src: attribute.

Now, you can use the font in CSS as you would any other font by using the name you previously gave the font.

h1 { font-family: "Kimberley", sans-serif }

You can use this pattern to import a huge variety of fonts without hosting any of them on your site or by creating cumbersome images. One issue, though, is copyright issues attached to fonts you find on the internet. You should either ask permission before using a font, or find a font that is Creative Commons friendly.

Interested in learning more about simple web design? You can follow @simplrdesgn on Twitter, join the Cherrysave Facebook page, or read along by subscribing to RSS.

]]> http://www.cherrysave.com/web-design/using-web-fonts-in-css3/feed/ 1 The Semantic Web: Speaking to Humans With Readable Code http://www.cherrysave.com/web-design/semantic-web/ http://www.cherrysave.com/web-design/semantic-web/#comments Wed, 27 Jan 2010 03:58:10 +0000 admin http://www.cherrysave.com/?p=280 The semantic web consists of teaching computers to understand the meaning of web content. You should learn the advantages of writing on the semantic web when working on web development projects because search engines (and people) strongly rely and prefer code that makes sense intuitively instead of having to read pages of documentation and confusing inline comments.

The Semantic Web Rubik Cube

What is the Semantic Web?

So what exactly is the semantic web? It turns out that it is difficult to define it simply, yet I’ll try anyway. The semantic web is best described as structured data. The main goal is to take the structure that the web and some applications have as a whole — URLs, categories, tags — and apply them to the data represented by code. That is, the semantic web envisions an interconnected web of data.

Many consider the semantic web to be a founding anchor of Web 3.0. British engineer Tim Berners-Lee envisions a web with SVG graphics built on a well-organized and self-descriptive (tagged, friended, categorized) Web 2.0. The semantic web promises to organize the world’s information in a dramatically more logical way.

Riding the Semantic Web: Organizing Your Code in a More Cohesive Way

The current HTML schema doesn’t have much support for the semantic web. In fact, one of the few ways you can tell computer systems about the actual content of your page and not just the display properties is through the meta tags. Using that, you can tell search engines about things like the title and keywords associated with a piece of content, but you can’t do much more than that.

Yet, there are some things you can do with the semantic web when you code to take advantage of semantic principals. And the best part is that they tend to be quite simple. Here’s a few examples of some of the things you can do:

  • For headings, use a heading tag (h1, h2, h3, etc...)
  • For paragraphs, use a paragraph tag (p)
  • For lists, use a list item tag (li, ol, ul, etc...

Like I said, these are really simple principals, yet it can make a huge difference in the readability and clarity of code for both web developers, computers, and end-users. For example, look at the difference between the following two snippets of code:

Non-semantic

<span id="heading-1"><font size="8" color="black"><strong>Heading 1</strong></font></span>

Semantic

<h1>Heading 1</h1>

Obviously, the second snippet is much more simple for people and for computers (read: search engines and data miners) to read, and they should (or could) look about the same in a web browser.

The Advantages of Writing in Semantic Code

There are at least two advantages in taking advantage of the semantic web. First, computers can how understand the content of your page and make use of that. For example, in the current iteration of HTML, you can tell search engines the title and content of your page with the meta. In the future, Amazon could tell computers, in code form, the type and style of the products on their web page. The books would be classified as such, dramatically improving the categorization and usability of the internet. The second benefit is that it will improve communication between web developers and designers. Engineers will instantly understand what the code is attempting to model much more so than if one was using the common universal tags.

That’s all well and good, but I’m sure you’re looking for a better way to currently take advantage of the semantic web. XFN (XHTML Friends Network) uses data in the rel attribute to describe relationships between people. For instance, I could link to my friend Creed, whom I’ve met in real life, in the following way:

<a href="http://www.creedsblog.us.creedsthoughts.office.doc/" rel="met friend">

From the rel tag, you can see that I’ve met Creed, my friend, in real life (when he was stealing things out of my garage). The key to the semantic web, though, is that computers should be able to easily parse the meaning of those friend relationships. You can use a CSS snipet to do that:

a[rel~="friend"] {font-weight: bold;}

That will bold all of your friends via the stylesheet on a given page.

Of course, these are merely the beginnings of the semantic web. There will be undoubtedly more ways to classify and organize data on the web. Keep in touch with these updates by subscribing to the RSS feed or following me on Twitter.

]]> http://www.cherrysave.com/web-design/semantic-web/feed/ 0 Build Your Own Custom Ubuntu Live CD http://www.cherrysave.com/linux/build-your-own-custom-ubuntu-live-cd/ http://www.cherrysave.com/linux/build-your-own-custom-ubuntu-live-cd/#comments Fri, 06 Nov 2009 18:49:06 +0000 admin http://www.cherrysave.com/?p=270 You turn on your trusty old Linux box, and things are going well as you pass through the boot loader, until the disk check reveals that your hard drive partition table is corrupt, and you are unable to access your machine. You need a good rescue disk -- and the best way to get one is to create your own.

You can customize an Ubuntu 8.04 Hardy Heron live CD to make a good bootable utilities disk by adding and removing packages from the standard installation. Specifically, you can remove most of the Ubuntu applications and install antivirus, a partition recover tool, a few disk utilities, and a rootkit checker, among other things. I’m going to create the live CD within an Ubuntu installation, but the directions should work for most Debian-based operating systems, and can be easily ported elsewhere. This guide largely follows the community documentation article on the Ubuntu customization process, which is a good place to look for more advanced information and troubleshooting support, while the livecdlist.com wiki is the best place to look for customized directions.

To create and use the Ubuntu-based boot CD, you’ll need a computer with at least 3GB of disk space and 512MB RAM. 1GB of swap is recommended, though I did it with 512 MB.

Create the live CD environment

The first step is to download the Ubuntu 8.04 live CD ISO file for your system type. You can get it from the Web site, or you can use wget on the command line:

wget -v http://releases.ubuntu.com/hardy/ubuntu-8.04-desktop-i386.iso

To work with the image, you’ll need to install a few packages to support the squashfs filesystem format, and mkisofs, the utility to create ISO images. On Ubuntu, you can install them with the command sudo apt-get install squashfs-tools mkisofs.

Now, load the squashfs module, then copy, mount, and extract the contents of the ISO file in order to customize the contents:

sudo modprobe squashfs
mkdir rescue
mv ubuntu-8.04-desktop-i386.iso rescue
cd rescue
mkdir mnt
sudo mount -o loop ubuntu-8.04-desktop-i386.iso mnt
mkdir extract-cd
rsync --exclude=/casper/filesystem.squashfs -a mnt/ extract-cd
mkdir squashfs
sudo mount -t squashfs -o loop mnt/casper/filesystem.squashfs squashfs
mkdir edit
sudo cp -a squashfs/* edit/

You’ll want to customize the CD in a chroot environment. Chroot changes the root directory of the environment, allowing you to access the files and applications inside the CD directly, which you must do in order to use tools like apt-get. In order to use a network connection inside chroot, which you’ll probably want to do to add new packages, you’ll need to copy in the hosts and resolv.conf files to configure your network settings. You can achieve this with the following:

sudo cp /etc/resolv.conf edit/etc/
sudo cp /etc/hosts edit/etc/

Once you’ve completed these steps, you can start to work inside the live CD. Mount the live CD to the edit/dev mountpoint, then change your root directory into the newly mounted volume. You’ll need to mount /proc and /sys volumes to work with the kernel, and export your settings to avoid locale and GPG problems later on:

sudo mount --bind /dev/ edit/dev
sudo chroot edit
mount -t proc none /proc
mount -t sysfs none /sys

export HOME=/root
export LC_ALL=C

Free space by removing unneeded packages

You can configure the packages that are included with the live CD using apt-get or Aptitude. You’ll want to free up some space to add the rescue applications; even though the data is compressed, all of it needs to fit on a 700MB CD or on a higher-capacity DVD. You can remove packages and applications that aren’t useful for the recovery. I chose to remove the OpenOffice.org suite, the GNOME games set, Ekiga, Ubiquity, Evolution, and the GIMP, saving me around 200MB. If you are comfortable without a command-line environment, you might want to get rid of GNOME and Xorg; if you do that, you need not install GParted and the other graphical tools in the next section. In any case, the goal is to get rid of large applications. To sort all of the installed packages by size, run the following command in the chrooted environment:

dpkg-query -W --showformat='${Installed-Size} ${Package}\n' | sort -nr | less

You can use apt-get to remove a package. Use it with the --purge argument to get rid of configuration files. The sudo command won’t work in the chroot, and therefore should be omitted:

apt-get remove --purge package-name

Add rescue applications

Once you have removed all of the unneeded applications from the live CD you can start to add rescue and recovery applications. Generally, rescue CDs include a variety of disk utilities and security tools, as well as networking tools to find support and access outside machines. You may not want all of the applications I mention, and you can add some that I don’t. This is your personal boot CD, and should be configured as you see fit. For ideas about what to include on your CD, you might want to check out some of the prebuilt rescue distributions mentioned in the sidebar.

You can install packages from the repositories using apt-get, but you must add the multiverse repository to your /etc/apt/sources.list file:

deb http://us.archive.ubuntu.com/ubuntu/ hardy main multiverse
deb-src http://us.archive.ubuntu.com/ubuntu/ hardy main multiverse

A disk partition tool is the staple of a mature boot disk. Fortunately, the Ubuntu live CD comes with GParted, the GNOME Partition Editor, so adding a package isn’t required. If you chose to forgo a graphical environment, you should make sure that parted is installed instead to handle partition tables from the command line. If you accidentally delete a partition, installing a program like testdisk can help you recover it, as well as provide a few other basic disk tools. If you are using the ext2 filesystem type and you accidentally delete a file, you’ll find the e2undel package helpful in recovering it. If you need to copy an entire partition from a dying disk, or just want to make a backup, partimage is the way to go. You can also use it to restore a partition with a previously made backup.

If you plan to use this disc with Windows machines, you will want to install antivirus and rootkit tools. Clamscan provides quick and easy virus scan with a command-line-based update tool. Chkrootkit is a scanner to find and remove rootkits that could be hiding in your computer. You can use sleuthkit to conduct analysis of your filesystem and browse through hidden files.

After you finish adding packages, clean up your temporary data and unmount the environment:

apt-get clean
rm -rf /tmp/*
rm /etc/resolv.conf
umount /proc
umount /sys
exit
sudo umount edit/dev

Now, regenerate the manifest (which is basically a list of installed packages) and copy in into the correct directory:

chmod +w extract-cd/casper/filesystem.manifest
sudo chroot edit dpkg-query -W --showformat='${Package} ${Version}\n' > extract-cd/casper/filesystem.manifest
sudo cp extract-cd/casper/filesystem.manifest extract-cd/casper/filesystem.manifest-desktop
sudo sed -i '/ubiquity/d' extract-cd/casper/filesystem.manifest-desktop

Compress the filesystem to squeeze it onto a disc:

sudo rm extract-cd/casper/filesystem.squashfs
sudo mksquashfs edit extract-cd/casper/filesystem.squashfs -nolzma

And finally, create the ISO file:

cd extract-cd
sudo mkisofs -r -V "$IMAGE_NAME" -cache-inodes -J -l -b isolinux/isolinux.bin -c isolinux/boot.cat -no-emul-boot -boot-load-size 4 -boot-info-table -o ../ubuntu-8.04-desktop-i386.iso

Once the image file is created, you need to burn it to a disc. You can do that pretty easily with K3b or Brasero. If you want, you can do it from the command line:

cdrecord dev=/dev/cdrom ubuntu-8.04-desktop-i386.iso

Once the CD is finished burning, you should be able to put it into your optical drive and boot into the environment you just created.

This should give you more than enough information to start building your ultimate custom rescue CD. Add the packages and tools you need, and hopefully you’ll never be at a loss the next time your computer has a problem during startup.

]]> http://www.cherrysave.com/linux/build-your-own-custom-ubuntu-live-cd/feed/ 14 JQuery for Beginners: Using Simple JQuery Effects for a Rockstar User Interface http://www.cherrysave.com/jquery/jquery-for-beginners-using-simple-jquery-effects-for-a-rockstar-user-interface/ http://www.cherrysave.com/jquery/jquery-for-beginners-using-simple-jquery-effects-for-a-rockstar-user-interface/#comments Fri, 06 Nov 2009 16:30:14 +0000 admin http://www.cherrysave.com/?p=254 JQuery is a Javascript library that attempts to make things like editing styles, creating animations, and using AJAX much easier than it has been in the past. Let's be honest: Javascript can very occasionally be a nasty code to program with, and JQuery attempts to tone it down a little bit and make it much more manageable.

This is the second part of my series on JQuery for Beginners. Be sure to check out the first part of the JQuery tutorial series where I introduce the framework and show readers show to use selectors, hierarchies, and attributes.

Simple Effects

One of my favorite parts about the JQuery library is the built-in effects, which can be tied into the events manager to animate the appearance and disappearance of elements in the web page. That is, you can make things like div and a elements slide or fade with ease.

So, the first thing we need to do is create a link and a paragraph to play with. My goal is to make the paragraph do things (i.e. slide and fade) when users click on the link. The most important thing is use fill in the id attribute of the paragraph and the link. Without it, JQuery won’t as easily know which elements we are referring to.

<p id="paragraph">This is the demonstration paragraph.</p>
<a href="#" id="link">Click this to do things!</a>

Now, we’ll get started with the JQuery. First, we want to declare a function that runs right when the page loads. We do that with $(document).ready. After that, we need to select the link and drop it into a function. We call the link with $("#link"), and make it react to click. Then, we select the paragraph, and do something with it. Here, we’ll hide it. Here’s the source code:

$(document).ready(function(){
    $("#link").click(function () {
      $("#paragraph").hide();
    });
  });

Slides, Fades, and Toggling

As soon as the page loads, JQuery finds the link and attaches an action to it when the link is clicked. That action, located inside the function, will hide the paragraph called #paragraph. Using the same format, you can swap in a whole variety of effects using the same pattern. For instance, you can make the paragraph fade out with the fadeOut method. Here’s some good ol’ source code for you:

$(document).ready(function(){
    $("#link").click(function () {
      $("#paragraph").fadeOut();
    });
  });

Here’s the full list of effects you can use like this:

  • show
  • hide
  • toggle
  • slideDown
  • slideUp
  • slideToggle
  • fadeIn
  • fadeOut

Speed and Callbacks

But you want more fine-tuned control, don’t you? Well, you can do two more things with these effects methods. First, you can pass a first argument that controls the speed of the animation. This can use one of three predefined speeds (such as slow, normal, and fast) or a speed defined in milliseconds (134 milliseconds, and not a millisecond more). The other thing you can do is add a callback. A callback is a function that will be called as soon as the effect is complete. For instance, you can make a fast fade out that alerts you when it is done:

$(document).ready(function(){
    $("#link").click(function () {
      $("#paragraph").fadeOut("slow", function () {
         alert("I'm done!");
    });
    });
  });

Custom Effects

So you want to add a little bit more customization that you have with the built-in effects? Well, then it’s time to make a custom animation. I’m going to omit the ready and the click function, so refer to the code samples above if you are still murky on the idea. In general, the custom animation method takes the following form:

$("#paragraph").animate({width: 50%, opacity: 0.5}, "slow", "swing");

The first attribute in the brackets is a series of styles you want to animate to. These are based on CSS. In my example, I’m going to increase the size of the paragraph by 50 percent and I’m going to half the opacity. The next parameter is the duration; here, I’m going to resize and dim slowly. The last parameter is easing. Easing, in a nutshell, controls the evenness of the animation. linear will make it the same speed the entire time. swing will make the animation faster toward the end. You can also include an optional callback as the last function.

I Hate Animations

One problem is that animations tend to destroy the notion of simple web design. Yes, they can add a more natural feel to the UI, but they can also make things a bit too flashy for a minimalist. Therefore, you may want to give users the option of disabling all animations. Anytime the following method is called, all animations will cease to work.

jQuery.fx.off = true;

Of course, you can turn it back on by setting it to false.

Wrap Up

I hope you find this quick premier on JQuery effects useful. Please, add any corrections and suggestions to the comments. And, of course, follow me on Twitter to get notified of the next JQuery installment.

]]> http://www.cherrysave.com/jquery/jquery-for-beginners-using-simple-jquery-effects-for-a-rockstar-user-interface/feed/ 7