Category Archives: Web Stuff

iMedia CMS Cheat Sheet

Posted on by

So the last few classes were probably confusing. I understand that a lot of you guys were lost from the first sentence that Sang said, which is fine. But learning how to do this is likely going to be one of the most important takeaways from this program.

So here’s a little guide. If you find it to be remedia, stop reading and do something better with your time.

Why This Is Important:

I realize that making the claim that this is the most important thing we learn in this program is large, but I promise it’s not hyperbole. Here’s why:

All of you are going to need a nice looking portfolio/website so that you can prove to future employers that you’re good at what we do. Some of us are going to be the web leads for fly ins. Everyone is going to need a website for your capstone. And come May 18th, you’re going to want a site that doesn’t start with student.elon.edu, as you will no longer be a student at Elon.

The CMS Cheat Sheet

Hosting-

Hosting is literally buying hard drive space on someone else’s computer. I know a lot of people are hung up on buying it, but if you want to get ahead in the industry (or just in the industry), you’re going to need a website. If you really, really don’t want to pay that $5-10 a month, I could teach you how to convert an old computer into an Apache server. Or you could just forgo one cup of Starbucks a month and go the cheaper, less nerdy, more reliable method and just pay someone.

There’s a majillion hosting services out there, but I use Dreamhost. Technically I also use BlueHost and GoDaddy, but I primarily use Dreamhost. It’s just the best. I don’t care who you end up picking, it’s just important that you have somewhere for you to show your work to the world.

If you decide you want to pony up the money for Dreamhost (it’s about $120 per year) I can get you $90 off if you follow enter the promo code IMEDIA12 when you sign up. So that means hosting is $30 for the year. After that year though, the price will jump back up to about $10 per month.

Other things to consider:

Most web hosting services offer you two server options: Windows and Linux. That’s not in reference to the software that you personally use, but the software a server is running. Get a Linux server, unless you know what .NET is. If you don’t know what that means, go Linux. Open source applications, like Drupal and WordPress, are built to run on Apache- the Linux Server software.

A lot of hosting companies offer “one-click installs” where you can select a product (WordPress, Joomla, Drupal, etc.) and their little robots create a database and install the product for you. This is the option I usually use, because it’s simple and doesn’t require as much of my life.

If your hosting company doesn’t provide something like that (I know that GoDaddy, Dreamhost, HostGator and BlueHost all do), you can just follow the various instructions available from the CMSs’ websites.

FTP-

File Transfer Protocol (FTP) is how you access and manage your remote files that are on a happy hosting service like Dreamhost or whatever. For the most part, WordPress allows you to upload files through their dashboard interface, but if you want to put up any of the sites that you’ve worked on so far (in bootcamp or whatever) to the internet, you need to have an FTP client.

Much like hosting companies, there are a bunch FTP clients. FileZilla is good. So is CyberDuck. If you’d like to pay for an FTP client, consider Transmit or Fetch. I actually think Fetch might be free. Most good code editors have FTP built into them. Dreamweaver and Coda do, for sure.

FTP is just a way to upload files from your personal computer to your host server.

What you need to access your server remotely:
Server address (usually formatted like this- something.something.com)
And an FTP username/password (usually the same as your hosting login)

Once you have a server to transfer files to, it’s pretty much as easy as drag and drop. Again, Dreamweaver has this functionality built into it, so there’s no need to get anything else.

Download a CMS-

Sang went over WordPress, which is my personal favorite CMS because it has the best support out there, the most themes and plug-ins and the best organization. It, however, is not the “best” CMS. That’s dependant on what you’re trying to do.

There are dozens of CMS programs. Drupal or Joomla is probably the best for website creation. ZenCart or Magento are the best for ECommerce. Any blog should be done on WordPress. It really just depends on what you’re trying to do with the site.

CMS applications use a database and query system to make their sites. The primary languages are MySQL (the database) and PHP (the querying language).

MySQL-

So you might be confused why you need a server to store files and a database to store files. You saw Inception, right? The answer is 42. Don’t really worry about it.

The truth is you can go happily through your life without ever having to know SQL or any of its (evil) children. And that’s fine. All you need to know is that hosting companies have little robots that install these for you, or they will take you by the hand and walk you through the process. Simple as that.

PHP-

This is the server-side language that most CMS projects use. And it’s nice. The reason it’s nice is because you can write code for the different sections of a page (header, body, sidebar, footer, etc) and have them automatically generate new pages on a blog. The posts and other content gets stored in the database and a line of PHP calls the content and assembles it together. Again. The internet is magical.

So what do you need to do?

1. Get a hosting service

-A domain (yourname.com) is not a hosting service. It’s a domain. And you don’t have to buy your domain from the hosting company (or vice versa). If you buy a domain on a service like Namecheap or GoDaddy, you can host the content on BlueHost or Dreamhost. The internet is magical.

2. Download WordPress.org or do a one-click install

-Any hosting company worth its salt will have a software installation section on its control panel that will install your CMS. You don’t have to use WordPress, it’s just the easiest to use and has the best community support. But installation instructions are available from the CMS websites if you can’t one click.

3. At this point you have a functional website. You can pick a theme and quit if you want.

4. If you want to mess around with your theme, get an FTP client.

It’s just 1000 times easier to do this in your favorite editor, than through the editor available online through WordPress. All the styling on your page is CSS. You don’t need to know a stitch of PHP to do it.

If you’re still having trouble getting hosting/domains/CMS/whatever, feel free to come up and ask me about it. I’m always willing to help.

Plinky – My New True Love

Posted on by

I’m in love with a site and that site is Plinky.

I came across Plinky accidentally, like one comes about a good story or a true love. In fact, in the pursuit of ruining the Internet (which I do daily to place food on my table), I found the one thing that might convince me that the web is worth saving. It’s a strange amalgamation of democracy and communism: everyone answers their own opinions to a daily question. Then they build on each other’s works. It’s the most beautiful of all the Internet microcosms: one that could convince me that there is yet a reason to spare this bright blue ball we call earth.

Picture 2 Plinky My New True Love
Here are the top three things I love about Plinky:

1) It Is The Swift Hammer Of Thor To Writer’s Block.

The thing that I think I have the hardest time with as a blogger is coming up with the will to write. WordPress is a damn commitment when you really get down to it. I have to write the whole post, edit it, rewrite it, find photos, edit them, upload them and schedule it. That’s not including the time I spend cursing God or hating myself. It honestly takes a few days to fashion a good post (and you’ve seen what I consider a good post around here). In fact, I have a dozen “drafts” that are pretty much done minus photos, formating and the occasional affiliate link (a boy has to eat, right?)

Where Plinky succeeds is that they make everything easy. The idea is to be brief, but they don’t limit you to a certain word count. They give you a daily prompt and you answer it in as few or as many characters as you’d like. My post today was quite lengthy, but I’ve had others that were only one sentence. It’s just free form fast pace prose creation.

I started a Tumblr blog almost 2 years ago to help me do that very same thing. However, in the 20 some-odd months I’ve been part of Tumblr, I’ve only posted 8 times. In a month of being on Plinky, I’ve made seven answers and made friends. Prompts, I’ve found, help me to fire up my creativity. Plinky is like a light jog before a tremendous workout. It get’s the ideas moving and the blood flowing to the fingertips.

2) It’s A Great SEO Tool

Google’s recent Farmer algorithm change vastly affected the way a lot of people are doing their link building. I’m personally not a huge link building fan (though there is obvious value in it) I prefer to build links organically by having my readers link to it. What readers you ask? I’ve got some- I think.

Picture 1 Plinky My New True Love

However, adding links to a Plinky post is easy enough and every post I’ve put up has been indexed by google within a day of the post. My most recent answer was indexed in less than an hour. That means that not only do you get the anchor text you want, but it will also be indexed very quickly. Now it’s not a great link, but it is still a link. And if that’s what you need to feel better about your site at the end of the day, then it’s a perfect way to do it.

I’m not a huge believe in this, and I imagine that by saying it’s an “SEO tool,” people will take that to mean it’s a place that they can vandalize with useless text and get anchor text out of. I’m going to ask you to be gentle with Plinky, for the next reason I’m going to list.

3) It’s An Unadulterated Realm Of The Internet

Here’s what I mean by that. Facebook used to be this place where only college students could hang out, post photos and stalk cute girls. Now my 85 year old grandfather has a profile. Twitter used to be a free forum for conversation. Now you’ll get spammed any time you mention apple. LinkedIn always sucked.

There are very few places left on the internet that are free of the spam and wasted space of most modern social networks. Remember when everyone had a MySpace page? Then what happened- The only people who wanted add you were amateur porn stars and people with terrible bands. But that place exists again, and it’s called Plinky.

I haven’t been bugged by anyone offering me a free iPad 2. People are actually just reading my answers and leaving responses. It’s like being heard again. It’s nice. I know that I just listed it as an untapped SEO resource, but hear me out on this. It shouldn’t be ransacked and brutalized by SEOs desperate to get a link. They only ask for a short answer to a prompt, and there’s no reason you can provide a quality answer to the question and get a link in the process.

The Bottom Line

Plinky is a new favorite site, and this week’s winner of the Magnetic Oreo Award. I encourage anyone who fancies themselves a writer to use it often to do some metaphorical stretching before writing.

magnetic oreo award1 288x300 Plinky My New True Love

Create your own SeeStyles Theme For Coda

Posted on by

Creating your own themes is a really easy process, and I’m sure if you’ve figured out how to import the files, you’ve also learned to export them and how to tweak the colors to your particular fancy. That being said, I’m going to go ahead and explain it anyway.

Step 1: Find a color scheme

Finding a color scheme that both looks good together and can cover the various facets of web code can be tedious. Unless you’re a design nerd of have some level of OCD that requires that everything have the same six corresponding colors, using a web app to help you pick them is a lot easier.

kuler Create your own SeeStyles Theme For Coda

I’ve found that one of the best places to start is with Adobe Kuler. I like to pick a cool looking Kuler group and base my colors around that. Kuler is also a great way to do this, because you can upload your own images and have Kuler extract the color theme automatically. If you’re not into Kuler, there are several other sites, including ColourLovers, Pictaculous and Daily Color Scheme that provide the same basic function. Get about 6 colors to work with.

Step 2: Assign The Colors To Code

In any particular language you’re going to have to have around 6 categories to assign colors to: Numbers, tags, attributes, comments, strings and functions (I realize this isn’t true across the board, but it’s true enough).
colorwheel Create your own SeeStyles Theme For Coda
HTML is actually the language that you’ll have the most trouble giving colors to because it has to incorporate everything into one screen. But remembering that comments are comments, numbers are numbers and strings are strings regardless of the language helps in the ultimate coloration of the final product.

The easiest way to do it is to have Kuler up on one side of your screen and use the magnifying glass tool in the color selector screen just drag it over the color you want to assign. You could always drag the selector around the color wheel and shade it to taste, but I’ve never had that much time in my life.

Unfortunately, there’s no super quick way to do this, so you’re going to have to click on the color box next to the words and repeat the process until you’ve either finished or decided that you have something better to do. You can also use the radio boxes to the right of the color box to either bold or italicize the particular aspect of your code.

It’s important to realize that there are 5 different HTML color files: ASP-HTML, JSP-HTML, LassoScript-HTML, PHP-HTML and plain ol’ HTML. I usually only bother to change the PHP-HTML and HTML files, because I largely just edit wordpress themes. Honestly, you should only change the files you’re going to use the most.

selectcolors Create your own SeeStyles Theme For Coda

Step 3: Export, Zip and Upload.

Finally, when you’ve gone through the process you just need to click the export button and save it to a file. It’s a good idea to export the original files (or you could just download them from here) just in case you want to restore everything to the factory settings.

You have to export each individual file and save them as the file type as the name in the designated folder. Either save just the files you will use most often or go through and make an entire theme.

Shortly, I’ll have a video ready that I’ll put here as a walkthrough. But it probably won’t be until Friday.

If you want to share them with others, leave me a comment and I’ll post them here on my site. I enjoy seeing people’s designs and want to create a library of coda seestyles that people can download from a single site.

Trouble Sleeping? Read A Book Before Bed

Posted on by

I’m on a computer most of the day. At least 8 hours for my job, and then a few more hours at night working on various personal projects (definitely not porn). In fact, I’m writing this post at 11 pm. And some studies, like this one by the Germans, suggest that staring at a screen might be ruining our sleep.

And although we all know that looking at a screen for several hours a day can ruin your vision, it also puts your brain on overdrive.

HealthPhoto prv Trouble Sleeping? Read A Book Before Bed

Looks like computers make your brain red. And books make your brain red.


In this fun little study by UCLA, surfing the web (*is that a phrase we still use?) can actually make you smarter. Or at least make your brain more active. I guess old people are doing it to curtail Alzheimer’s or something. However, it’s because we’re surfing the web (or using a computer or playing angry birds) that many avid computer users are suffering from terrible sleep.

Here’s the fun thing though, according to that little image, the human mind is more active when using a computer than reading. Now, I’m no scientist but I would assume that if using a computer makes your brain more active than reading, then the inverse is also true: Reading makes your brain slow down and become less active (for lack of a better word). Focusing on reading a book calms the brain and helps you relax.

books flipped Trouble Sleeping? Read A Book Before Bed

Well lookie here- looks like there's science happening!


This isn’t really breaking news- lots of people suggest reading before bed before bed, I’m just saying that this image (helpfully reversed) is all I need to see to convince myself to keep reading this (so boring)

I’ve been sleeping terribly, and maybe this will help. Especially because it’s after midnight and I’m still watching Veronica Mars and blogging. I’m not sure which one of those is worse.

Chris Kirkham Site Redesign

Posted on by

Chris Kirkham.com has been operational for almost 2 years. And though it’s never received much attention (and deservingly so) I have used it to teach myself the fundamentals of web design and how the internet works. And now I’m fairly proficient at what I am doing here, so much so that I am teaching my coworkers how to do it.
This latest redesign is very simple. newbackground Chris Kirkham Site Redesign
I’m becoming a huge fan of minimalist design and that’s what this is all about. Infinitely inspired by Vilfredo Pareto, I stripped this site down to the only things that actually matter: My work and how to get a hold of me. I got rid of my picture because who cares and I moved my UNICEF support to the sidebar of the blog. I fully intend on doing an HTML 5 portfolio to display my work in a cool way soon and later this month I’m going to do a full redesign on this blog to match the homepage. I’ll make the theme available too, because I’m a nice guy.
I thought it would be entertaining to go through the past iterations of the blog and sort of explain how we got to here. So let’s get into it.

The Caryn Esplin Nightmare Site: Sept 08-Jan 09

esplin Chris Kirkham Site Redesign
Caryn Esplin deserves no credit for the gaudiness of this particular homepage. I admit that I did this design out of my own choosing because I thought it would look awesome. However, she did have us make websites for Comm 347: Advanced Visual Media, but doesn’t know anything about code or web standards and best practices. This site is was a .jpg with hotspots over where there should be links. I was simultaneously enrolled in a class where I was learning HTML and CSS (a class I laugh at because I was so bad back then) and she wouldn’t let me make the site out of good old fashioned web code. You know, the stuff that Google and Facebook are made of? But this sort of stuff is exactly why Matt Cutts hates freaking .jpg sites. When I got my first web design job, I was told I’d get fired if I did that. So thanks for nothing, Caryn.

The B&W: Jan 09-May 10

bw Chris Kirkham Site Redesign
I’m not going to lie. I still love this background. I just like the picture mostly. But the problem was it was too big. I wanted to do it 1080, but it just looked bad. And no one bothered to explain the idea of margin: 0px auto; to me so it was left justified and terrible. Plus it was awful on the mobile phone. Of course I didn’t know this until I got an iPhone in May 09, but I learned. I love the background though. It’s a great picture.

Purple Tie: May 10-Sept 10

purpletie Chris Kirkham Site Redesign
I thought this was the ideal background for about 2 days. I liked that it was smaller, it looked good on the iPhone and all I really had to change was the background image. This was when I was really starting to get interesting in the idea of pursing perhaps writing more in this blog. I decided to instead get engaged to a girl that lived 400 miles away and then marry her 3 months later. So not much blogging happened. I’m hoping that will change soon. I’m learning that I’m probably just going to have to stop sleeping to make that happen.

Last Thoughts

This isn’t likely going to be the last change of the homepage. And hopefully I’ll actually end up with something to market in the end and then my website will have an actual purpose. What do you like/hate about the redesign? What would you change if you were a journalist working as a scam blogger with no real-world marketable skills?

5 Great SeeStyles Themes for Coda

Posted on by

About a year ago I pirated Coda, which is probably the best web development platform on the Mac. After the first time I tried to update, I got a pop-up about how I was stealing from a bunch of poor coders that just wanted to make my user experience better. I felt immediately guilty and purchased Coda that day. It was one of the best purchases that I’ve ever made.
PastedGraphic 1 5 Great SeeStyles Themes for Coda

Thanks to Cabel Sasser for the image

Coda actually has a great feature that allows you the option of tweaking the color scheme and then lets you export your color settings as a .seestyle file so that you don’t have to worry about losing that perfect shade of whatever it is that you wanted so badly. Some designers have actually set up a bunch of .seestyles so that you can upgrade your coda experience immediately. Here are some of the best examples I found:

Espresso-Ish


espresso 5 Great SeeStyles Themes for Coda
Espresso is a web editor much like Coda, and if you’d like, you can now color your Coda UI to look similar to the Espresso UI. I’ve never tried Espresso, though I have tried CSSedit and have to say that the people at MacRabbit do a very good job. That being said, I can get the same sort of functionality that CSSedit provides simply by hitting cmmd+4, so I’ve never been able to cough up the $40. I’ve gone on a tangent, and for that I apologize.

This is a very clean theme and I especially like it when the colors are inverted. Available only for PHP-HTML, CSS, Javascript, HTML, XML and SQL.

Download here

Specials Board

Screen shot 2010 07 28 at 12.34.33 PM 5 Great SeeStyles Themes for Coda Joe Bergantine is one of my new favorite human beings. I stumbled on his site by accident and found two of the SeeStyles that I included on this post. Specials Board is a super nice, light-on-dark theme that was obviously created by someone who likes color and can appreciate good design.

This theme isn’t a far cry from Birds of Paradise (my personal favorite), but the deep grey background really helps the colors pop. This is an ideal seestyle for anyone who is used to using light-on-dark coding formats but is looking for slightly softer colors to look at.

Download here


Birds of Paradise


birdsoparadise 5 Great SeeStyles Themes for Coda This is my favorite SeeStyle of the group because it is so different than anything I ever thought about using as a color. Actually, when I’m not using the color scheme I designed for myself, I usually use Birds Of Paradise. It’s so bright and clean, and there’s something about the brown background that makes coding a lot less nerdy and a lot easier to look at for hours on end.

My only real beef is that Joe has made the comments a dark shade of brown that is almost invisible against the background. I resolved that problem by adjusting the contrast of that particular shade all the way to white, which makes it a nice tan color. If you’d like to just download my modified Birds Of Paradise you can do it here, but I still have to give all the credit to Joe for making this color palette in the first place.

Download here

Colorful Syntax

Screen shot 2010 07 28 at 12.44.22 PM 5 Great SeeStyles Themes for Coda
Jason Robb’s Colorful Syntax is really fun because there are so many different colors dancing around on the screen. I stumbled upon this SeeStyle theme on Dribbble.com, and immediate fell in love with it. It is one of my absolute favorites, and I can’t endorse it highly enough.

I have had a little bit of a problem getting the right colors to appear when loading it. However, if you have Jason’s site open, you can do some color matching to ensure that your theme looks just as sharp as his does.

On a somewhat related note, if you’re into graphic design at all, you should consider submitting some of your stuff to Dribbble. It’s like show and tell for designers. Which is also their slogan. I’m not that clever.
Download here

Ivory Coast


ivorycoast 5 Great SeeStyles Themes for Coda
This is a SeeStyle that I put together for myself, but I think it turned out really well. I actually feel a little embarrassed to put my own stuff up with these guys (especially Joe, who is an intimidating man) but I had a lot of fun making this and hope that it can be enjoyed by anyone who is interested in downloading the files and importing them. Available for PHP-HTML, HTML, CSS and Javascript (because that’s where I do my coding).

Download here

If you like Coda, you should check out the Panic Blog, which is one of the sharpest looking blogs on the Internet. If you haven’t tried Coda, you can download a trial for free for 14 days, or pirate it and feel like a jackass and then buy it. I’d recommend buying it after the trial ends- it’s shame free.

Do you like Coda or have SeeStyles that you have made and want to share? Put a link to them in the comments and share your themes! Or read my post if you’d like to learn how to make a custom coda seestyle.