All posts by Chris Castiglione

How to Choose a Wireframing Tool

This post is a breakdown of the popular Wireframing tools out there.

Omnigraffle vs. Balsamiq

Omnigraffle and Balsamiq do about the same thing. They are desktop apps for quickly making wireframes, mockups, page layouts, etc. Here are some of the differences:


  • Desktop app: $99-$199
  • Web app: n/a
  • High fidelity: high level of detail, therefore take longer to create, but look more like the actual page
  • Slightly higher learning curve than Balsamiq (in my opinion). But I prefer Omnigraffle overall for my style of developing wireframes.


  • Desktop app: $79 for desktop
  • Web app: $12+/month for web
  • Low fidelity: less detail, they resemble a rough sketch and therefore can be produced much quicker

(Both Balsamiq and Omnigraffle have free trials. So why not give them a try and see what you think?)


  • Pro: An easy way to just… start. Great for something quick, and low fidelity
  • Con: You can “save” to a URL, but can’t export to a file

More Questions

Q: Do you ever use illustrator or photoshop for your wireframes? -Zack

A: You can. But they aren’t as optimized for wireframes. I find that it takes me more time using those programs.

Q: What are your thoughts on go mockingbird? – Zack 

A: I’ve never used it personally, but many of my students have. Looks promising!

Q: Can you use InDesign for wireframes? 

A: I’ve never tried it personally. But here’s a tutorial with some thoughts on InDesign and wireframes.

Q: What are some other options? Have you used X, Y, Z? -you

A: I haven’t used any of these personally so I can’t really judge them for you. But here’s a list of some more options… go explore! Report back.

Omnigraffle vs. Balsamiq: Screenshots

Balsamiq wireframe example
Omnigraffle wireframe example
Omnigraffle wireframe example on a phone

Balsamiq wireframe example on mobile


What is HTML5?

HTML5 is just an update to the HTML language. Think of it as an update to any software program that is on your computer…

Me: “What’s the real difference between Microsoft Word ’95 vs. 2010?”

And then you’re all like: “Uh, not much. They pretty much do the same thing. But the newer version of Word has some new features, and they took away some of the features that I never used… like Clippy the talking paperclip.”

Me: “Exactly. HTML5 is just the same”.
Continue reading What is HTML5?

Launch A Website Quickly with FTP

Q: Hey Chris. I have HTML files. How do I get them on the Web?
A: FTP (Read more for how to get started)

1. Before You FTP, You Need Hosting

The first thing you need is A PLACE TO PUT THOSE FILES. Where is that place? Answer: hosting. I set up a basic tutorial on how to get started with Hostgator (a cheap and reliable hosting solution). Other hosting companies I recommend are listed on the Suggested Web Hosting Page.

Ok, so we have a host. We did that. What’s next?

Your host sent you a “Welcome” email. In that email there is a username, password, and a bunch of other details. SAVE THAT EMAIL. Archive it. Put it in Evernote. Google spreadsheet. Whatever works, you want to be able to find this easily in the future.

2. Download and Install an FTP Client 

Choose one here. But the short of it is that I recommend Cyberduck (for free)… or even better Transmit if you have a few bucks to put into this.

3. Add Your Credentials

You need to add: username, password, domain name. Where do I get that? It’s in your hosting email (see step #1 above)

Here’s how FTP setup looks in Cyberduck:

Here’s how FTP setup looks in Transmit (the same concept as above, but in a different program)

4. Move Your Files From Your Computer to Your Server

Below is a simple example screenshot using Transmit. It’s pretty much the same with any FTP client. Alternatively, you should be able to drag files right from your desktop (or the Finder) onto the server. Dragging the opposite way? Bingo.. it downloads it.

Q: I used Cyberduck. 

A: That’s not a question. But if you chose Cyberduck do yourself a favor…

Go to “PREFERENCES -> TRANSFERS -> PERMISSIONS” and uncheck the “Change Permissions” boxes.

Explanation why you are doing this: By default Cyberduck changes your permissions and you’ll have an error uploading PNGS. So, save yourself the trouble later on and make it look like this…

Q: I get FTP. What is SFTP? 

A: It’s just “secure” FTP. You know, just like “http://” and “https://”. If you choose to setup SFTP with your hosting provider, make sure you also chose that setting in your FTP client. It doesn’t cost anything extra to setup SFTP… so I say, sure why not do it.

Q: Thanks Chris, but, but, but… can I use GIT instead? 

A: Sure, but FTP is great for beginners. Git is probably unnecessary if you’re just starting out. And besides, I still use FTP for small projects and for throwing files on the Web quickly.

How do I Set Up A Domain: with GoDaddy?

You’ve purchased “the next big thing” domain at! Congrats! Now that you’re ready, there are three things you’ll need to get up and running.

First, you may also need to also purchase hosting if you haven’t already. If that’s the case read my recommended hosts and/or How To Setup Hosting.

1. Once you have purchased a domain go to “My Account” and find the domain you’d like to setup. Click “Launch”

2. Look for this page below. You want to go where it says “Nameservers”, the bottom left. Click “Set Nameservers”

3. Fill in your Nameservers

You want to choose “I have specific nameservers for my domain” and then fill in your nameservers. Usually there will be 2 or 3 nameservers to fill in. These ALWAYS start with the prefix “ns1.”, “ns2.” and so on. You’ll find your specific name servers in the welcome email from your hosting company  (ie. Hostgator, Dreamhost or Bluehost sent you this email when you signed up for hosting. If not? Then contact them and they’ll help you out).

Where do programming languages come from?


Mother tongues! The evolution of programming languages is as follows. This is a chart I use in my Programming for Non-Programmers class that traces the root of programming languages through the ages.

It’s a bit dense, but if you zoom in real close it starts to make sense. Start with “C” the mother of all programming languages.

Click here to Download the Full Map

How to Use Dropbox as a Web Server

Use Dropbox as a Server

The quickest and cheapest way to host HTML/CSS/JavaScript files on the Web is to use Dropbox.

Here’s an example of something I’m hosting on Dropbox

Here’s how you can host files on Dropbox:

  1. Get a Dropbox Account.
  2. Put your working HTML files in your Dropbox shared folder.
  3. Right click on the file you want to make public. Navigate to “Dropbox -> Copy Public Link”. Now the public link is in your operating system’s clipboard (aka. you can “paste” the link).

Note: You cannot link to an entire folder/directory (eg. you can only a .html or .zip file).  Also, this won’t work for hosting backend languages like PHP, Ruby or databases like MySQL.

How to get started with HostGator is a hosting service. They’ll help you get your website live on the Web. Here’s how to sign up and get started:

** Note: I set up a code for my class to use: “pfnp2ga902” =  This will give you 1 month of free Hostgator hosting **

1. Go to the website. Click “View WebHosting Plans” and choose the Baby Plan. I’d recommend Monthly. Click “Order Now”


DONT HAVE A DOMAIN? If you don’t have a domain you can enter a new domain on the left and purchase it. Then continue.

HAVE A DOMAIN? If you already own a domain type it in on the right, and continue.

Want HostGator for 1 month free? –  Enter in code “pfnp2ga902” at the bottom for a discount. If you choose the Baby Monthly plan it should go down to only $0.01. Note that after 1 month it will renew for full price of about $8/month. So if you don’t want to keep this after the class then please just cancel it within a month.

OR, Want HostGator for 25% off the lifetime of your account? (this is a better deal for the longterm) – Enter in code “pfnp2ga915”


3. Fill in all your data on the next page. Notice the discount. Click Create Account.

4. You should receive a welcome email. Save this it’s important!

5. Try to login to your “Control Panel”. Works? Good!

6. If there are problems please contact Hostgator. Some of you may need to call to followup with verification. Please do this before class if possible.

The Internet vs. The Web

Most people use the terms “The Internet” and “The Web” interchangeably, although in reality they are two separate, but related, things.

The Internet is everything. It’s the massive network of wires, and connections sending data around the planet at light speed. And it’s exactly what you are thinking of right now! Yup, you got it.

The Web (or WWW) is a SUBSET of The Internet.

  • Basically, it’s the pages we see in a browser.
  • It uses the HTTP protocol (just look at the start of any URL).
  • It display Web pages (written with HTML/CSS/JS).
What is not the WWW? Well, the WWW is not the data we transmit via FTP, torrents, or email. All of that data is part of the Internet, but because it’s not being rendered through a browser it’s not the WWW.
If this is confusing, then just go old school and call it all “cyberspace”! I’m sure that term will come back… just as soon as hipsters start using Windows ironically.