eterps

 

So I’m currently working on a project for the House of Mews in Memphis, TN.  It’s a volunteer project, and kind of a long story on how I got wrapped into it – so I’ll save it for another time.  Anyway, a problem I’ve run into is how to effectively communicate ideas to the House of Mews proprietor.  Using words like content management system, web services, and flex app only draw blank stares.  Bumbling through a long discription of site features elicits some nodding, but the only response I get are questions like, “Can we keep the same music from the old site?”

Argh.

Enter Balsamiq.  The folks at Balsamiq Studios were nice enough to give me a free license since I’d be using it for a non-profit project.  I can’t be more grateful.  This app blows visio out of the water.  It’s so ridiculously easy to use. I cranked out a handful of wireframes in about an hour.  Since it’s all drag and drop, it appeals to the whole ‘instant gratification’ thing.  And when you’re done, you have this neat drawing that looks like you drew it yourself on a piece of paper.

Showing this to the ‘client’ avoided comments like, “that’s the wrong font,” and “that shade of red needs to be lighter.”  Instead I get, “Ohh, so you can click on the little pictures, and the cat’s bio appears. Great!”

Smile.

Here’s an example of a ‘first draft’.

Neat, right? Too bad it looked like crapola when I built it.  So I started over.  After shuffling things around, adding new ideas (and subtracting new ideas), I wound up with this – the mighty ‘work in progress’.

Go try Balsamiq.

 

Problem:  Artists Link needed a website that included a member directory that listed its members in alphabetical order with thumbnails next to each person.  Clicking the person brings up the bio, with a full size pic.  Additional pics are optional.

They also needed the usual organizational website stuff, like info pages, news and events, and contact us.  All of this had to be woven together in a nice tidy package that is dead simple to edit and update.

Solution: Drupal 6 with heavy use of CCK and Views.  Big thanks to the Color Wall theme. Views Slideshow provided the nifty image cycle on the front page.  It randomly selects images from each persons profile and prominently displays them on the front page.  Since the Member content type and member list view were already set up, all I had to do was install the Views Slideshow Module and toss a slideshow in a block.  Easy!

ImageCache saved me tons of effort by creating 3 different sizes of each profile pic.  Combined with lightbox2, ImageCache is pretty darn powerful.  All sorts of clicky functionality can be applied just by uploading one pic. Neat!

 

A great way to get a blog or simple website up and running very quickly is to use WordPress.  Blogging couldn’t be easier when using WordPress, as it provides a handy interface for writing and categorizing posts, adding features via widgets, creating RSS feeds for syndication, and allowing for static pages.  Another insanely useful feature is the ability to change the look and feel with the click of a few buttons using themes.

Themes allow your blog or site to take on a look of its own.  There are literally thousands of WordPress themes available for download. Many (most, even) are available directly on the WordPress website.  Searching Google for wordpress themes will get you a few million results, but many websites simply repost the free sites available on wordpress.org and wrap advertisements around them.  Premium themes are also available for purchase at many places, but again, some sites are more reputable than others.

However, if you want to graduate past premade themes and make your site completely unique, you need to learn how WordPress themes are created and make your own.  This may seem like a daunting task when viewing the WordPress.org documentation, but I stumbled upon a little gem that can’t be beat.  Go directly to Wpdesigner.com created by a young man named SmallPotato and view his tutorials.  The site is now defunct, but the tutorials remain, and are priceless.  There are actually two tutorials, one as HTML, and another as an eBook in 3 parts:

After reviewing these tutorials and referencing the WordPress Codex a few times (for widget code in WP 2.5 and 2.6), I was able to construct my own WordPress themes from scratch.  There are tons of WordPress tutorial sites out there, but this is by far the best place to start (IMHO).  Good luck!

 

My very first project was for my very own mother.  I created a site for her a very long time ago in Macromedia Fireworks (I think), and it fit the bill for a number of years.  However, it was impossibly difficult to update for her, and a real pain for me.  The time finally arrived when a new solution was needed.  Luckily, I recently learned the ins and outs of WordPress, and found a nifty little plugin called NextGen gallery.

First and foremost, NextGen gallery was installed.  Without this amazing and wonderful piece of software, I would be lost.  NextGen is relatively easy to manage, and provides spectacular display options, flash plugins, and slideshows to enhance the display of photos on a website.  The lightbox2 (or highslide) integration alone is worth its weight in gold (if it weighed anything, that is). In order to create the actual gallery, I started with pages.  One page was created for each gallery (earthenware, stoneware, etc…).  Then, two pages were created for the albums that categorize the galleries (My Work, and UWL Photos).

I created galleries for each set of photos in NextGen, then placed the NextGen tag in each page.  The album tags went into the album pages. For example, to create the Porcelain gallery, I created a page in wordpress with the title Porcelain.  I then created a gallery in NextGen, filled it with pictures, and found that it had an ID of 3.  I then went back to the Porcelain page (Manage>Pages>Porcelain) and inserted the gallery=3 tage as the content of the page. Other plugins I decided to include were:

  • Akismet – For spam filtering (included with WordPress)
  • All in One SEO Pack – This site needs to appear in the search engines when people search for “Karen Terpstra” so I installed this plugin and inserted the keywords “Karen Terpstra” wherever I could.
  • cFormsII – A good form creation utility, although probably overkill for a simple “Contact Me” webform.
  • Folding Pages Widget – Used to create the collapsing menu out of WordPress pages.
  • pageMash – Drag and drop pages into their correct order. Much better than the built in method of page ordering provided by WordPress.
  • WordPress.com stats – just for fun (for now)
  • WP Super Cache – I don’t expect much traffic to this site, but it seems like a good idea.

The Theme

Here’s where things got interesting.  My mom specified that she wanted a ‘home page’ that was just a large photo of one of her works.  She sent me three possibilities.  She also wanted a dark background, which is fairly standard practice for showing off a large number of photos on the web. Once I decided that I was only going to use pages, and wasn’t going to bother with posts, categories, or generally any other ‘normal’ wordpress feature, I felt I needed a simple theme that I could do some major surgery on.

I selected the Neonglow theme from luna-media.  I was intrigued by the use of transparency, and it was nice and simple.  After a few hours of hacking away (with the help of Firebug), I ended up with a decent, simple theme for the entirety of the site, except for the Home page. To create the Home page, I needed to put together an entirely new theme.  Why a new theme you ask? Well, to take advantage of the Page Template feature of WordPress.  I copied page.php (the main theme) to a file called customhome.php.  Then the necessary bit of code required to make it show up in the Page Template field when writing a new page.

View the documentation, or a helpful forum post on WordPress.org to get an idea of what I’m talking about (I’ll add a more detailed tutorial soon). Once I was able to apply my new theme file to the Home page, I pretty much removed everything from customhome.php aside from the code that displayed the content of the page (no title, header, footer, or anything).  I also left the sidebar so the menu would show up, and referenced a nearly identical .css file, only without a background image. The changing image is simply a NextGen gallery set to slideshow mode.  I have as the only content in the Home page.  That’s it, no fancy javascript, no extra flash plugin, just that one little NextGen tag and a seriously hacked up WordPress theme.

 

A little over two years ago, I signed up for a reseller account with HostingZoom and I’m very glad I did.  I don’t host very many sites, but the ones I do host pay for my own sites, as well as some non-profit sites that I host for free.  Not only this, but my friends are getting a better price for the same service than they normally would with their own shared account.  Confused?  Too good to be true?  I’ll explain step-by-step how to host websites using WebHost Manger (WHM) and cPanel software available from most webhosting companies that offer reseller plans. (Video tutorial included) This article assumes you already know what a little bit about web hosting.  For example:

  • You have set up a website once or twice before on a web server
  • You have used cPanel
  • You know what a domain name is, and how to buy one

If all of these statements are true, then there is no reason you can’t sell hosting packages to your friends, family and clients.  Follow the steps below, and view the video to get a solid idea of how this is done.

Find a Reseller Account

Probably the most difficult step is finding a decent company with a good reseller program.  Many webhosts offer reseller programs that simply offer you packages at a discount, and allow you to mark up each package you sell.  This is not correct.  A decent reseller program will be one flat rate per month for an unlimited amount of sites. There are dozens of web hosting companies that offer reseller plans.  When choosing a host, the most important part is to find an established company that has been in business for several years, and offers top notch support.  Do not underestimate the importance of support.  Only choose a company that offers the following support options:

  • Telephone Support – Hiring people to talk on the phone is expensive.  A company with phone support is serious.
  • 24/7 Helpdesk – If your site is on the fritz at 3am, you don’t want to wait to find out what the problem might be.
  • End user support – This is important.  End user support means that the hosting company will answer support questions for your customers! This is crucial.  If you set up a website for one of your friends, do you want them calling you at 9pm on a Friday night because they can’t remember their cPanel password? No, give them a support email address and they can open a ticket that will be handled by your hosting company.

Once you’ve found a good, reliable company after doing your homework and comparing costs and features, go ahead and sign up.  I’m not going to list decent prices here, because hosting packages are constantly getting less and less expensive, and deals change by the day.  You’ll need to do some legwork on your own to find the best price. For the purpose of this tutorial, I will be using examples from the company I currently use, HostingZoom.  They have a standard WHM/cPanel setup and many prices and packages to choose from.  Some other companies have customized control panels (such as fasthosts.com).  These may be easier, and offer more or less flexibility.  The only real way to judge is try it for yourself (hopefully with a demo or free trial).

Sign Up For a Reseller Account

For demonstration purposes, I’ll be using ResellerZoom as a reference for this tutorial, although any company that uses Webhost Manager and cPanel (WHM/cPanel) will likely be the same.  If you look at the ResellerZoom site, you will see 6 different plans.   Most companies will offer similar plans.  I avoid Windows because most software I use (WordPress and Drupal) run best on linux, and Windows is often more expensive.  Also, take note that the Budget Reseller plan does not include end-user support or billing software, so that plan is to be avoided.  I chose the Advanced Resller plan because it was cost effective, and at the time the Failover plan was not available.  I may switch to the Failover plan soon, however, to provide increased reliability to myself and my friends.

You’ll likely have to prepay for a few months to get the advertised rate.  I go in 3 month increments.  This gets me a good deal, but doesn’t lock me into a long contract, so if something should go wrong, I can switch companies without losing too much money.

Upon signing up, you will likely recieve an email detailing all the login information.  This will be similar to the information you received when signing up for a normal hosting account, with a few extra bits – namely, the login info for WHM.  There might also be some info regarding custom nameservers and ClientExec or WHMCS, but I’ll get to that in another post.

Log into WHM

Once your account is active, go to http://yoursite.com/whm (or whatever is detailed in your activation email).  You will be prompted for a login and password. You’ll be greeted by a screen similar to the one below.  Don’t worry, it looks daunting, but many of these features you don’t need to bother with.  We’ll start simple, and work our way up from there.

Create a package in WHM

The first step is to create a package.  A hosting package specifies a disk quota, bandwidth quota and a few other specifics that will be set for your clients.  For small websites such as blogs and personal sites, a gigabyte or two of diskspace is usually more than enough.  This will store thousands of photos, hundreds of music files and a handful of video (although I highly suggest using a video hosting site such as YouTube or Vimeo rather than just uploading video files to a website, if possible). Setting bandwidth can be tricky, as you need to predict how much web traffic a site might be getting.  A small website with a few pages, or a personal blog with a few dozen visitors will use a very minimal amount of bandwidth.  Sites with more complex features, such as flash, music/video downloads, file downloads and other large items will use up bandwidth quickly.  Since this article is geared towards hosting sites for friends and family, we don’t need to worry about exceeding bandwidth very often.  Just in case though, try to encourage people to use sites like Flickr and Picasa to host images, and YouTube and Vimeo to host video, and embed them rather than upload them to their sites.  Always find out what happens if your bandwidth is exceeded.  Some disreputable companies will cancel your account if you exceed the allotted bandwith, while most companies have simple overage charges (like the cell phone companies) if you go over. The rest of the settings, such as Max (FTP, Email, etc…) Accounts, and Max Domains can be set at unlimited (unless restricted by your hosting company).  If you have a friend that needs dozens of FTP accounts or sub-domains, he or she should probably get their own reseller account.  Turn on FrontPage extensions and CGI just in case they are needed, and set the cPanel theme to x3 (the latest greatest, in my opinion). Click the Add button, and you should get a nice message saying the package was added successfully.

Create accounts for friends/family

Now comes the fun part – setting up the individual hosting accounts.  Each of your friends/clients needs their own account.  Start by clicking the Create a New Account link under Account Functions.  Type in the domain name for the website.  The domain name does not need to be purchased, but must be registered elsewhere for the site to become fully active (there is way to access the site before the domain name is registered, and I’ll go over it soon).  Domains can be registered at GoDaddy or name.com for about $10. The username must be 8 letters, and also must be unique to the server that you are on.  If you get an error message, it means someone else on your server already has that username.  WHM will suggest a username based on your domain name. It’s best to stick with that one unless you need something else.  Then pick a nice, safe password (lots of letters, numbers, and valid symbols). Type the email address of your friend/client in the Email field.  This address will receive notifications generated by WHM and cPanel. In the Package section, choose the package that you just created.  This will specify how much space and bandwidth can be used, as well as how many ftp, mysql, domain, etc… accounts they can have.  If you need to tweak anything, click the Select Options Manually box. The Settings section should be changed automatically based on the package you created.  Under DNS Settings check the box that says Use the nameservers specified at the Domain’s Registrar.  This will ensure that GoDaddy or name.com.  Make note of the nameservers, such as ns1.hostingco.com, as this information will be needed by your friend later. Click the Create button, and you’ll be greeted with a big screen full of text…

Send the Details

After creating the account, you’ll be brought to a page full of text.  There will be a section enclosed in a box with the title, New Account Info.  Copy the information in this box and paste it into an email to send to your friend/client.   The rest of the stuff isn’t really that important. You’ll also want to note the cpanel login location, and FTP information.  cPanel can be reached at http://clientdomain.com/cpanel  where clientdomain.com is the domain name of your friend/client.  The FTP address is simply clientdomain.com at port 21.  For cPanel and FTP, the username and password are the specified in the account information.

Set the Nameservers

In order for the site to be online, you’ll need to change the nameserver entries where the domain was registered.  If you registered at GoDaddy you can view the tutorial here. At name.com the information is here.  Usually it just takes a few minutes for these settings to go into affect, but it can take up to 48 hours for the domain to propogate throughout the entire internet.

You’re All Set!

Once the domain has propogated, that’s it!  You friend, grandma, second cousin, office buddy, or whomever now has their own shared hosting account thanks to you!  You can arrange to bill them whenever you like, or just share the space out of the goodness of your heart.  Additional help for WHM is usually provided by your hosting company.  ResellerZoom provides a number of instructional videos, or you can try the official WHM manuals. In a future post, I’ll show you how to use ClientExec to automate account setup and billing, so your friends can sign up themselves and automatically recieve their account information and first invoice via email, without you touching a thing! Neat!

Sale! $7.49 .com at Go Daddy GoDaddy.com 120x60

 

Everyone’s seems to be head over heels about standards based HTML/CSS these days.  Web designers and consultancies all seem to tout their ability to create standards compliant and accessible sites.  You just can’t use deprecated tags, and you must separate content from presentation if you want to be a high class webfellow. I remember way back when <center> and <font> were considered perfectly good HTML tags, but today web developers  scowl at these tags like a half eaten egg-roll in the buffet tray – it just shouldn’t be there any more, and anyone who considers partaking is icky.  Time to get serious and learn the correct way of doing things…

Getting Familiar with XHMTL/CSS

I thought I’d do some homework (boring!) and re-learn the HTML that I thought I once learned many moons before.  I fired up my web browser and looked up “HTML and CSS tutorials”.  There were only 22 million results, and the first one had something to do with learning HTML from a dog.  No thanks.

I eventually found the w3 schools, which is a great primer, and has the spectacular feature of trying out bits of code as you learn (learn by doing!).   There are scads of websites that are good for reference, but since I like to learn something new by doing something practical, rather than just reading text, a good tutorial or three suits me just fine. Here are a few links to do some good ol’ research on standards based XHTML/CSS:

Sometimes You Just Need a Good Book

Despite spending hour after hour poring over instructional websites, I didn’t feel like I was pulling it all together, nor in a position to build a fully functioning website.  I needed something comprehensive, something I could put my hands to, and something else that I couldn’t quite put my finger on.  I decided to swallow my pride and buy a book.

My first attempt at learning XHTML/CSS came a few years ago when I was first introduced to WordPress and Drupal.  I wanted to know more about how these tools worked, so I bought The HTML, XHTML and CSS Bible.  It was large, comprehensive, and utterly boring.  In short, it was a textbook.  Reading a standard textbook without a teacher to guide you and classmates to discuss the material with is an absolute challenge.  Needless to say, I didn’t get very far.  This was not the case with my most recent purchase – Head First HTML with CSS & XHTML.  This book was spectacular!  It reads like a real person is talking to you, does not take itself seriously, and is based around bite sized projects large enough to teach you something, but short enough to keep your attention.

I did a fair amount of research before selecting the book, and the Head First series has received a lot of praise.  O’Reilly is definitely on to something here, and I’ll probably pick up a few more of their books as I progress in my career.  Rather than regurgitating tons of facts in an enormous tome and tacking on sample problems at the end of each section, the Head First book considers how people learn effectively and applies those educational principles in a way that makes it easier to learn difficult material.  Combine this book with the endless reference material and tutorials on the web, and it’s a snap to get up to speed on the foundations of building websites.

Get Graphics, Get More Practice

After wrapping my head around XHTML and CSS, I went in search of applying this knowledge to building a real site.  In order to have a halfway decent site that people want to look at, it’ll need to be visually appealing.  This requires graphics.

Before coding a site, one will often start with a mockup or wireframe.  These pre-websites are often made in Photoshop, with fancy graphics and what not.  There are a number of decent tutorials that walk through the practice of going from design to code using popular design packages (namely Adobe Photoshop and The GIMP).  Here are a couple good ones:

There is Always More to Learn

This post is a brief summary of what got me started down the path of building standards based code for the web.  There is much more to learn, and techniques are ever changing.  I didn’t even touch on cross-browser compatiblity and the necessary (but troublesome) browser hacks, nor any advanced CSS techniques.  I’ll likely post more info on these in time, as I get a greater handle on things.  I think the most important thing to know when starting to create websites is that not everyone views the web the same way I do.  Some people use Macs, or Internet Explorer 6, or Opera, or a cell phone.  Starting with a solid foundation in standards based code will go a long way towards pleasing a demanding audience.

 

It’s been said that blogging is an essential step for boosting your career prospects these days.  It can be a supplement to your resume, a good way to keep in touch with folks in your industry, a way to tout your knowledge, or gain deeper insight into topics you (think you) know about.  Business minded people say blogging is a way to ‘brand’ yourself, or market yourself to employers, clients, partners, friends, or whomever.  Whatever the reason, I decided that I needed a career blog.  If you make the same decision, here’s an easy way to get started…

  1. Make a list of your favorite blogs (at least 5) related to your career. Read these often to get inspiration, and to see how blogging is done.  You can see a few of my fav’s in my Blogroll.
  2. Learn about career blogging. Penelope Trunk offers some great advice and reasoning for starting a blog.  Dan Schwabel is a proven ‘self-promoter’ and recommends blogging as an essential career tool.  I saw Dan speak in person in Boston, and although I think his technical ability is a bit lacking, he definitely knows his stuff when it comes to self promotion and personal branding. His entire website has plenty of useful tidbits to think about when promoting yourself online.  Also, there is a free eBook from Rockable Press called, Rockstar Personal Branding that is worth checking out.
  3. Pick a name. Buy that domain. You’ll need an address for your blog.  Forget about free blogs like eric.blogspot.com or ect203093.wordpress.com – they are as unprofessional as you can get.  At the very least, you’ll want firstnamelastname.com, and perhaps .net, .us, and .org as well.  There’s much to think about when buying a domain name (or names), so check here, here and here for some useful advice.  Once you decide on a name, go to a registrar and buy it!  I’ve used name.com and GoDaddy to register domains.  They are both about the same price, and have similar features.  GoDaddy has pretty good telephone support, and you can click here to save 10% at GoDaddy.com.
  4. Get a web hosting account. Websites live on web servers.  For a small website, you generally want to rent a small portion of a server for your website.  This is called ‘shared hosting’.  You pay a small amount per month for a certain amount of space, bandwitdth, and software on a professionally configured web server.  I recommend HostingZoom (I’ve used them for years).  I’ve also had good experience with Dreamhost, and heard good things about Lunarpages, Bluehost, and HostGator.  Go to one of these sites and sign up for their basic linux plan.  They all have Fantastico, which easily allows you to install WordPress (among many other great webapps).
  5. Learn about WordPress and install it. After you sign up for hosting, log in to your web host account’s Control Panel (cPanel). Find the Fantastico Icon, click it, then follow the onscreen prompts to install the latest version of WordPress.  Here’s a easy video that shows you how, and here’s a more comprehensive video.  If you’re wondering why you need to buy all this stuff just to use wordpress instead of using wordpress.com, the answer is freedom and flexibility.  With wordpress.com and other free blogging sites, you are limited in what you can post, the plugins you want to install, and features you can use.  You often have to pay extra for ‘upgrades’ such as a custom domain name, and widgets for your blog.  With your own hosted installation of WordPress, the sky’s the limit!
  6. Get a new theme.
    1. Find a theme and download it. Tons of free themes are listed on wordpress.org. Find one to your liking, and click the download button.
    2. Learn to use FTP. An FTP program will transfer files from your computer to your web server (which is where your website lives).  Download FileZilla if you don’t have it already – it’s a free and open source FTP program for Windows, Mac, and Linux.  Type your site name in the “Host:” box, then your username and password in their respective boxes, and use Port: 21, then click the Quickconnect button.  You should connect to your web server and be able to see all the folders and files.
    3. Install your new theme. You must copy the new theme’s folder to /wp-content/themes/ on your web server, then activate the theme from your WordPress administration menu (click “Design” then “Themes”).
    4. Watch this video if you need help.
  7. Write an About page, 2-5 posts to publish immediately, and another 2-3 posts for the coming week (or two). Start by brainstorming a few blog posts about related to you and your work.  A mindmapping tool can be a big help, or just use good ol’ pen and paper.  Come up with a few posts before you publish any.  A blog with only one or two posts will not garner any readers or impress anyone, so make sure you start with at least five.  Type out the posts in WordPress, save them, put leave them as ‘unpublished’ until you are ready to unveil your blog.
  8. Be confident in your ability to proofread, or have a friend to edit your first few posts. A blog that is impossible to read won’t be read.  Use spellcheck, common sense, proper grammar, and spellcheck again.  If all else fails and you are convinced your articles are terrible, hire a copywriter on elance to proofread your work (more on this later).
  9. Post your content! Set the “Publish Status” of all your posts to ‘published’ and you are on your way! Tell all your friends and family about your blog and spread the word.  Don’t forget to write 1-2 posts per week until you become way to busy with all the new work you’ll be getting, or become a professional blogger and start posting every day.
  10. Share your content! The blog isn’t going to do much good if nobody sees it.  Let friends, family and co-workers know about your new site.  You can try the Wordbook plugin to automatically update your Facebook mini-feed with your blog posts.  The Sociable plugin is good as well. It allows you to put all those nifty little Web2.0 icons on your blog so your readers can share your posts on Digg, Twitter, Technorati, del.icio.us, and many others.  Be sure to take some advice from the pros on how to promote your blog around the internet. Remember those favorite blogs from step 1?  Engage with the authors, comment on their posts, link to their interesting posts, and maybe someday they’ll mention you on their blog. It takes time, but almost certainly gets people viewing your posts.

© 2012 Eric Terpstra Suffusion theme by Sayontan Sinha