Archive for the ‘Web & Graphics’ Category

Posted on August 31, 2011 - by CDS

Digging into Wordpress, the Book

Digging into Wordpress is both a tutorial blog and recently released book, both by Chris Coyier and Jeff Starr. I’ve been the occasional fan of the site, and decided to give the book a try. I suppose it was mostly the sleek and beautiful design of the book itself that drew my attention, with its aqueous pages and spiral spine. This is definitely not your average reference book, and right away it’s obvious that a lot of time and thought went into the functionality and usability of this book.

The design and organization of the book makes it an easy-to-use reference that actually stays open on your desk (a nice touch). The chapters are well organized, and the color coding makes it super simple to find what you’re looking for. Another design bonus is the lovely typography.

I won’t give a whole synopsis of the book, as that can be found on the website (Digging into Wordpress). But I will give my brief opinion. I would say the book is definitely for web professionals wanting to dig deeper into the inner workings of Wordpress, and those who are interested in developing advanced Wordpress themes. Although the book starts off a little on the elementary side, describing what hosting and domain names are, it makes a sharp turn into the technical that would leave a novice developer clueless. I found that a little uneven, but was grateful for the shift. As a seasoned developer, I certainly don’t need a $75 brush up on the most fundamental aspects of websites. I understand including this basic information for completeness, but honestly I think it could do without it if the book were intended specifically for web professionals.

Aside from the somewhat slow start, the book speeds up and offers a ton of valuable information, from secure installation practices to creating Wordpress CMS applications. If you’ve ever looked at a Wordpress site and said to yourself, “I want to know how they did that”, it can probably be found in this book.

Overall, I highly recommend this book for anyone and everyone designing and developing with Wordpress. I am glad I shelled out the $75. Oh, and you can purchase the PDF version instead for just $27.

More info/purchase: Digging into Wordpress Book

Posted on June 14, 2011 - by CDS

How to get those awesome fonts on your website

Tired of Arial and Times New Roman? Yeah, we were too. There are a couple super simple solutions that we use on our projects that allow the use of a wider range of fonts, without the viewer having to install the font itself. Although there are several solutions, we prefer Google Webfonts and TypeKit. Both solutions are standards compliant, and work about the same way: a script call is added to the header of the site, and the font formatted in CSS.

Google Webfonts are free, which is really nice. They only encourage donations to the font designers. We are using Google Webfonts on this site (Old Standard, Quattrocentro, and Rock Salt). Google Webfonts library is growing, and they’ve got a nice selection of serifs, sans-serifs, handwriting, etc. A little of everything. So far the I haven’t experienced a browser the fonts won’t display the fonts. I’ve tested Firefox 3.0+, IE 7.0+, and Safari.

Typekit is generally a paid service. They do offer a limited usage free option, but with the requirement that a “Typekit Badge” be displayed on the website. It’s a small, innocuous badge that won’t deter from any website. But the free service does not allow access to all of their fonts. Since their prices are very reasonable, from $24.99 to $99.00 per year, you wouldn’t be out much to jump in and try out their more expanded packages. Typekit’s greatest asset is its large font library and language options. It’s well worth the small amount of dough.

They also limit the number of page views, font access, and number of fonts you can use at one time. To clarify about the page views; they are guidelines and the company won’t shut off the fonts if you go over, they’ll just ask you to upgrade to the appropriate page view bracket. Seems fair to me. You’re using their bandwidth when you use the service, and as everyone knows, bandwidth isn’t free. All restrictions aside, Typekit blows the competition away with their large font library, and notably comprehensive language selections.

Both options are a great tool for any web designer. For years, we’ve had to use boring fonts to conform to all the browsers out there. Now there’s a really simple solution to maintain maximum SEO and still have a lovely typeset.

Posted on March 9, 2011 - by CDS

9 Unique Web Design Galleries

There are quite a few inspirational galleries and award websites out there today. We even have our own, The Design Gene. Most all of them are collections of what the moderator feels are worthy of listing in his/her gallery based on overall design. There are a few, however, that focus on specific elements of the website, such as its platform, color scheme, coding, style, etc. Below I’ve compiled a list of some of these element-centric galleries that I find especially useful when seeking very specific inspiration.

Colorgorize, http://colorgorize.com
Categorizes websites based on color scheme and provides a color chart for every website. Very useful to find ideas when selecting color schemes for projects. Users can search by adjusting a hue and saturation range, which I find especially neat.

Footer Fetish, http://footerfetish.com
Clever name and clever concept. This is a gallery of great footers. The footer is often overlooked in design, but it doesn’t have to be.

Type Inspire, http://typeinspire.com
Showcase of inspiring and unique typography in web design. Lots of awesome designs that invoke all sorts of ideas for text effects.

Blog Design Heroes, http://blogdesignheroes.com
Gallery of great blog designs. Categorized by platform, and includes Drupal, Joomla, Wordpress and even some of the newer and less commonly used platforms.

Cart Frenzy, http://cartfrenzy.com
Showcase of outstanding ecommerce websites. Categorized by shopping cart software. Great website to get ideas for shopping cart features and layouts.

Illustration Toolbox, http://illustrationtoolbox.com/category/websites
Showcase of illustrated websites. Also includes an illustration showcase, tutorials, freebies, articles and more resources.

Folio Focus, http://foliofocus.com
Gallery of portfolio websites. Mostly web designers. Good place to get some ideas for creating galleries and portfolio type websites.

Minimal Exhibit, http://minimalexhibit.com
Minimalist type websites, lots of negative space and uber clean designs.

We Love WP, http://welovewp.com
Collection of sites powered by WordPress. Not just blogs, but CMS sites as well.

Posted on September 5, 2010 - by CDS

Lorem ipsum….

In most of my projects, and likely other designers’ projects as well, the design concept is completed before any verbiage is provided by client, or written by me. In order to provide a visually complete design concept, placeholder text is often used, in the form of what is known in the industry simply as “Lorem Ipsum”. Lorem Ipsum is a set of “dummy text”, written in Latin, that has been used since the 1500’s as placeholder text in printed works. It’s purpose is just to show a print or design layout, when actual verbiage is not available. If you have perused our portfolio, you probably noticed that many of our “currently in production” websites have this weird Latin text somewhere within the design.

My clients have occasionally been confounded by the dummy text, and ask me why their website is written in Greek. I often forgot that it’s not a common site outside of the design world, and we always get a little chuckle out of it.

I am always cutting and pasting Lorem Ipsum, and thought I would provide a place where other designers, as well as myself, could find it easily for cut and paste in their own projects….
so here it is, the first 15 paragraphs of Lorem Ipsum:

Posted on May 21, 2010 - by CDS

Fix for HolasionWeb WordPress GoDaddy Virus

If you have a WordPress app version 2.9.2 hosted by GoDaddy, and have been experiencing issues lately, there’s a good chance you have the HolasionWeb Virus. To check, log into the WordPress admin. The first thing you might notice is that your admin panel may be all screwed up and look something like this:

If you’re seeing something like this, you probably have the virus associated with holasionweb.com (don’t go to this website, it is not safe). The virus plants a javascript from the holasionweb.com website in either the header or footer of your WordPress admin. Although the virus so far doesn’t appear to do much besides screw up your admin interface, it is still an alarming breach that should be handled immediately. Also note that if you are using a blog feed application, such as SimplePie, it will likely cause your feed to disappear completely. That is exactly what led to the discovery of this virus running on a clients website today.

How to Get Rid of holasionweb.com Infection

First thing, re-upload your wp-admin and wp-includes folders. This will fix your admin interface issues, but will not get rid of the virus. To get rid of it, I found this handy little program by http://www.sucuri.net (via http://www.dlocc.com) that effectively removes the malware.

1. Download the HolasionWeb Script Fix
2. Unzip and upload wordpress-fix.php to your WordPress directory.
3. Run the script by going to http://www.YourSite.com/wordpress-fix.php (note that if your blog is in a subdirectory, you would navigate to http://www.YourSite.com/subdirectory/wordpress-fix.php)
4. The detection and removal should take a few moments, and you will see the progress detailed on the page.

Here’s a link to the original solution: http://blog.sucuri.net/2010/05/simple-cleanup-solution-for-latest.html

Hope that works for you and Happy Blogging!

Posted on December 5, 2009 - by CDS

Smashing Book Now Available

The highly anticipated Smashing Book, by the folks over at Smashing Magazine, is now available. The book covers the best practices in modern web design, including technical tips, coding, usability and optimization.

As any designer knows, Smashing Magazine is one of the best resources for web design. As such, I am looking very forward to receiving my copy!

Price: $29.90
Pages: 313

Visit the Smashing Book post for more info

Posted on March 29, 2009 - by CDS

Tips to Secure Your WordPress Blog

I’ve just been through the ringer curing a client’s hacked wordpress blog. There are dozens of ways people can maliciously attack your blog, including DB injections, adding scripts to writable files, writing to your .htaccess files, and more. Below are a few things you can do to prevent people or autobots from commandeering your wordpress blog:

Use a Strong Password

You should use a strong, randomized password with uppercase, lowercase, numbers and special characters. It may be inconvenient to memorize, but it’s an important aspect to securing your blog. If you must have the password on file somewhere, it should be a hardcopy (ie on paper), and not stored on your computer somewhere. You should never use any part of your domain name in your password, or the word “blog”, or common names like your pets, kids, or birthdate. All of these things are quite easy to figure out.

Set Security Keys in config.php 

In config.php (or config-sample.php if this is a new install), find the following lines:

define(’AUTH_KEY’, ‘put your unique phrase here’);
define(’SECURE_AUTH_KEY’, ‘put your unique phrase here’);
define(’LOGGED_IN_KEY’, ‘put your unique phrase here’);
define(’NONCE_KEY’, ‘put your unique phrase here’);

These should all be replaced with secure information, preferably long strings of random uppercase, lowercase, numbers, and special characters. You can go to https://api.wordpress.org/secret-key/1.1/ to generate random strings.

You can also add SECRET_KEY. Right under the code snippet above, add the following:

define(’SECRET_KEY’, ‘0000000000000000000000000′);

Replace the zeros with a long set of uppercase, lowercase, numbers, and special characters. You can go to http://api.wordpress.org/secret-key/1.0/ to have random strings generated.

For more information about what Security Keys do, see http://codex.wordpress.org/Editing_wp-config.php

Change mySQL table prefixes 

By default, wordpress uses the table prefix wp_. Since it’s the default, it’s pretty easy for malicious persons to figure out. When setting up wp-config.php, you can change the table prefix to pretty much anything you want (letters, number, underscores only). In wp-config.php, around line 57 you’ll find the code:

$table_prefix = ‘wp_’;

Simply change wp to something more complex. Be sure to keep the underscore at the end.

Plugins

askApache Password Protect - This plugin doesn’t control WordPress or mess with your database, instead it utilizes fast, tried-and-true built-in Security features to add multiple layers of security to your blog. This plugin is specifically designed and regularly updated specifically to stop automated and unskilled attackers attempts to exploit vulnerabilities on your blog resulting in a hacked site. This is the probably the most effective security plugin available, however, I’ve found that it does not work properly on a lot of servers. Hostmonster and GoDaddy, for instance, do not support Basic or Digets Authentication and therefore do not support this plugin. If your server allows all of the functionality required, this is your best bet to protect your blog.

BTEV - Bluetrait Event Viewer (BTEV) monitors events that occur in your wordpress install. BTEV tracks the following events, password_reset, delete_user, wp_login, lostpassword_post, profile_update, add_attachement, wp_logout, user_register, switch_theme.

Login Lockdown - Login LockDown records the IP address and timestamp of every failed login attempt. If more than a certain number of attempts are detected within a short period of time from the same IP range, then the login function is disabled for all requests from that range. This helps to prevent brute force password discovery. Currently the plugin defaults to a 1 hour lock out of an IP block after 3 failed login attempts within 5 minutes. This can be modified via the Options panel. Admisitrators can release locked out IP ranges manually from the panel.

Replace WP-Version - Security your WordPress-Installation and eliminate or replace your wp-version and database-version on easy way with a small plugin. If you’re running an older version of WordPress, anyone can view source to see what attacks might work against your blog. This plugin replaces the WP-version with a random string < WP 2.4 and eliminate WP-version > WP 2.4.

WP Security Scan - Scans your WordPress installation for security vulnerabilities and suggests corrective actions.

Stealth Login (or any similar plugin) – Allows you to define a different path to your login pages so that they are hidden from viewers. I discovered the importance of this function the hardway when someone successfully and continually was able to change the admin email address by running sql commands through the login form. They would run some command that changed the email address in mySQL, and once that was done they reset the password, which was then emailed to their address.

The good thing was that the BTEV event viewer plugin logged their ip address, and their failed login attempts. It basically provided me with a timeline of the hackers events, so I could pinpoint exactly when and from what page they were able to change the email address. Since they were apparently running sql commands through the login form, I installed stealth login (and banned their ip range). If they manage to gain access to the site again somehow, they won’t be able to find the login form to run the commands again.

*Note* I’m not sure if the comment forms are vulnerable as well, but I don’t think so because of where they write to the sql database. Again, I’m not 100% sure of that.

*Note* You should note also that Stealth Login (and probably other similar plugins) write commands to your .htaccess file, so you need to also make sure that chmod of the .htaccess file is set to 644. Otherwise, a more clever hacker could write to your .htaccess file and undo the redirects that Stealth Login creates.

.htaccess – restrict access to admin files

It’s a good idea to protect certain directories with .htaccess, particularly wp-admin folder. If you have a .htaccess file in your wp-admin folder already, download it first and append it with the information below. If you do not have a .htaccess file in wp-admin, create a new one in notepad and add the following:

# allows access to images, CSS, javascript to everyone
<Files ~ “.(css|jpe?g|png|gif|js)$”>
Allow from all
</Files>

# restrict access to your ip address only
Order deny,allow
Allow from 00.000.00.000 #replace this with your static ip address
Deny from all

This will restrict access to the admin folder to only the ip addresses specified. If you have  multiple admins, add each of their ip addresses to a new line. Save the file, and upload it to your wp-admin folder. Be sure to chmod your .htaccess files to 644 so they are not writeable by the public.

.htaccess – ban ip address or ip range

There are many ways to find the ip address of those who try or succeed in breaking into your wordpress blog. You can view the server logs, but I like to use the BTEV Event Viewer plugin. It lists all activity by ip address in a user-friendly manner. You can sort the events by “warnings”, “errors”, “notices” “debug”, or “display all”. This makes it really easy to monitor exactly who is doing what on your blog, and when. Regardless of how you determine if a ip address should be blocked, it is an easy task with .htaccess. The following code will block a single address. If you have a .htaccess file in your root directory already, download it first and append it with the information below.

# block a specific ip address
order allow,deny
deny from 00.00.00.00 #replace with ip address. repeat this line if blocking more than one
allow from all

If you find that you’re always blocking ip addresses from the same range (they will have similar beginning digits), you can block and entire range using the CIDR number or the ip range if you know it. Use the code below to block by CIDR number or ip range.

<Files *>
order allow,deny
allow from all
deny from 00.0.0.0/0 # CIDR number or ip range
</Files>

You can find the CIDR number of a given ip address at: www.subnet-calculator.com/cidr.php

Disable Annonymous FTP

Unless you need this function for some reason, you should have annonymous FTP disabled for your website. This is usually done in your hosting account admin panel. The procedure and allowances differ greatly across the many hosting platforms, and if you need assistance doing so you can always contact the support team of your hosting company. Some hosting companies do not allow you to delete the anonymous user, but you can restrict or deny its priveledges. Other companies may not have an annonymous user setup as a default… it all depends on the hosting company.

A really bad scenario would be having annonymous FTP enabled, coupled with a writeable .htaccess…. you could very easily have your entire website deleted.

That’s it for now…. I will be updating this post when additional information is available. Happy blogging!

Posted on December 21, 2008 - by CDS

Tips & Tricks: Flash Site Freezes in Fullscreen Mode

Today I discovered an issue with Nvidia graphics cards and flash websites. For some reason, they can crash a fullscreen flash site when “hardware accelleration” is enabled. If you encounter this issue, you can right click on the flash website, click “settings”, and disable “hardware accelleration”. Then refresh the page and see if that fixed it. There may be a more permanent fix to the problem involving drivers, etc., but this is a quick fix.

Posted on December 21, 2008 - by CDS

Tips & Tricks: Photoshop Stuck on Hand Tool

I’ve heard of this happening, but until recently it had never happened to me. When you use photoshop with large files or with lots of other apps open, your cursor may become stuck on the hand tool, making it impossible to do any work. Shutting down photoshop, restarting, etc. sometimes works, but not everytime. This started happening to me quite often, particularly with Illustrator, itunes, Flash, CuteFTP, and more open. It turns out it’s a memory allocation problem. There are several things you can do to fix the problem, I have learned.

• Quick fix is to hit the space bar, which usually releases the hand tool. If your problem is really bad this might not work
• Next, you can allocate more memory to photoshop. In CS3, click on edit >> preferences >> performance, and increaes the memory usage. This of course could cause problems with other applications run simultaneously, but it’s not a perfect world.
• You may also want to check your paging file. The paging file is a portion of the hard disk that your computer can use like memory, so when setting your paging file base it on the available space you have on your hard disk. Most computers come with 100+ GB, so it can usually be set really high with no problems. This, in addition to increasing photoshop memory usage worked for me.
• If you have an integrated graphics chip, you could have problems with graphic design tools. Unlike graphics cards, integrated chips do not come with their own memory set, and instead use memory resources from your cpu. You could upgrade to a good graphics card to free up this memory. This is especially effective for photoshop, where graphics rendering is causing the graphics chip to “steal” memory from the cpu. Be sure to check that you have an open slot for a new graphics card before you purchase one; not all systems will have the extra PCI ( or PCI express) slot.
• You could upgrade your memory. Unfortunately for me I am running 32-bit Windows Vista and maxed out at 4GB. But if you have the 64-bit version, you can upgrade to 8GB!

Posted on December 21, 2008 - by CDS

Tips & Tricks: Flash LoadMovie trick

I discovered a little trick to bypass the problem of buttons on flash layers being active through the layers. If you’ve used the loadmovie function in flash to open external flash movies in layers (or not in layers), you’ve no doubt encountered the “click-through” glitch. Well, I can think of times you may want that effect so maybe it’s not a glitch, but I think in most cases you don’t want buttons from layer 0 to be active when layer 1 is viewable. My problem was that I was using layers, but not for every movie loaded. And the movies on the middle layer would change at a specific time of day, and because the same references were being used on layers 0 and 1, standard disable and enable coding would not work. I tried variations of the following:

_parent.button.enabled=0;
_parent.button.enabled=1;

_level0.button.enabled=0;
_level0.button.enabled=1;

and more etc…

Because of my level issues, only the disable function would work completely. And, then there was always the problem of doing this for every button, which would become cumbersome. I could of course used an array to apply to all buttons, but I wanted something even simpler… a graphical solution.

Here is what I did. Buttons in flash work in heirarchy. A button on a higher layer or that is arranged in front of another button will basically block any buttons behind it. So, in the movies that were being loaded on top, I made one button that encompassed the entire stage, set the alpha to 0%, named the button “hidden_btn” and added the following AS to the timeline:

hidden_btn.useHandCursor = false;

It’s essentially a hidden button that does not turn the cursor to hand, so nobody knows it’s even there. Not only did this work perfect, it saved me the trouble of all the additional AS for every button, etc.  I only need to copy and paste one movieclip and one line of AS to the external movies. This may not work in every situation, but it’s an easy and effective method for simple loadmovie functions.

The final result can be viewed at http://www.baxterclare.com