Category Archives: Web Design and Development

A Very Quick and Easy Beginner’s Guide to Internet System Administration

I believe that there is a point in every web designer’s life wherein they veer towards the path of developer. This is happening partly because, in post-financial-crisis times, we are expected to put on many a hat in our working lives, and in general to do more with less. It should be no surprise to us, who know the ins and outs of the internet (or at the very least how to google it) that it is now our job to make sure that “things work”.

I said this would be quick and easy so I’ll get right to it. You’ve only ever messed with CSS and HTML before, and now you’re tasked with something that’s server-related. What should you do? My best advice is this: take time to really understand what it is you’re doing.

The problem is the easy part. Usually it’s something very simple, like:

  • Your website isn’t loading
  • Your website loads, but it’s just a blank page
  • You can send emails but you aren’t receiving them
  • You can send and receive email, but you don’t get the emails your website’s contact form sends

If you have absolutely no idea where to start when it comes to troubleshooting things like this, you need to learn about how this very complex system we call the internet works. But where to start? The quick and easy version of this is to simply link you to sites I’ve found helpful.

How Does the Internet Work? – You should start here, because if don’t really understand what’s happening when you try to access a webpage, troubleshooting problems is going to be pretty difficult.

UNIXhelp for users – Once you know what’s supposed to be happening, the next step is to understand how web servers works. Most web servers are going to be running some flavor of UNIX, so knowing what UNIX even is and how to use it for server administration is going to be important.

Taking the time to go through both of those guides should be a good start for anyone who is just trying to start out as a web developer or system administrator.

Resources and thoughts on creating your first website

Some people are surprised to hear that I didn’t have any formal training in web design. I always get asked about how I first started learning to create websites, so I thought sharing my personal journey might be helpful.

I honestly think a beginner should start with a pure HTML site to start out, with PHP being the end goal. My own experience with Adobe products like Photoshop and Illustrator allowed me to use Dreamweaver as both a building and a learning tool. Adobe programs are very similar in the way they function, so that was the most comfortable for me. I worked through a Lynda.com tutorial that was specifically designed with a first website in mind.

Of course, not everyone is going to invest in a professional program like Dreamweaver if they don’t know anything about web design. In that case, I would recommend following the tutorials on Mozilla’s web technology documentation. It’s really easy to follow and understand, and you can do it all in a text editor like notebook or textedit. My advice would be to start with the HTML and CSS tutorials. After you’re comfortable with that, you should read up on FTP servers and hosting, because that’s what you’ll be using to actually put your site on the web.

The next step for me after I had a finished, pure-HTML website on the web was to convert it to a WordPress site. WordPress uses PHP, which is more flexible and (in my opinion) more professional than just using HTML. I also came across a more functional text editor called Submlime Text 2 and I highly recommend it over notepad or textedit.

For someone who’s interested in getting into web design, the best advice I can give it to just jump right in and learn as you go.

Choosing and Installing a CSS Preprocessor on Windows

I’ve finally decided to use a CSS Preprocessor to improve my web design workflow. I think the best way to learn what Preprocessors can even help you with is just by reading the comparison articles I’m linking in this post. I’d also not recommend using a CSS Preprocessor until you’ve coded CSS by hand (a lot) first. One thing that stops a lot of designers from using Preprocessors is the dreaded command line. It’s my personal opinion that, even as a visual designer, we need to understand and use the command line, in the same way that I think anyone who uses a computer should computer hardware. It’s just good to know these kinds of things. If you’ve never even opened the terminal on OS X before, The Designer’s Guide to the Command Line (OS X only) will be of great use to get up and running quickly.

If you’re like me, and you have both a Windows and OS X machine, then I’d strongly recommend learning how to use the OS X terminal and then installing Cygwin for Windows. It’s basically a terminal for Windows. Another neat thing is that since OS X and Linux are both Unix-like operating systems, once you’re comfortable using the terminal in one you can use it in the other!

Installing Cygwin on Windows is pretty straight forward. You run an .exe file and it does the rest. Just make sure when you get to the screen where you can choose extra packages that you choose ruby and git (that’s a whole ‘nother post. If you’re interested in CSS Preprocessors you’ll probably be interested in version control too, so you might as well). After Cygwin is installed you should install RubyGems, a package manager for the ruby programming language. Here’s how:

  1. Download the latest RubyGem package .tgz (or tarball, as they call it)
  2. Unzip it into a folder in your downloads folder.
  3. In the Cygwin terminal, navigate to the RubyGems folder in downloads directory. You will probably need to type something like this:

$ cd C:/Users/username/Downloads/RubyGem-versionnumber
Note: Type everything after the $

Now that you’re in the RubyGems folder, type this just to make sure you’re in the right place:

$ ls -la

If you see a file called setup.rb, you’re good! If you don’t see anything except another folder, keep cd’ing into it until you’re all the way in. Once you’re there, type:

$ ruby setup.rb install

If everything worked out you should now have RubyGems installed. As an aside, I’d also like to point out that instead of navigating to the directory that setup.rb was located in, you could have typed the entire path to setup.rb and it would have done the same thing. As a beginner, I find it easier sometimes to just locate the directory first.

The next step is to install your Preprocessor. But which one to choose? I chose SASS because searching for SASS vs. LESS (the two CSS Preprocessors I knew off the top of my head) revealed a nice comparison article from CSS-Tricks. That was enough to convince me, but I’ll probably end up trying LESS at some point too just so I’m able to pick up on a project that already uses it. If you’re still not sure, you can take a look at this Nettuts+ article comparing SASS, LESS, and Stylus.

Installing SASS once you have ruby and RubyGems is easy, simply type:

gem install sass

And there it is! In the next part of this series I will go through how to use SASS for the first time and introduce SASS’ popular helper: Compass.

Educate and Inspire Yourself

RSS Feed IconI’ve recently become that person who likes to be kept up to date on things. This urge probably started when I began listening to NPR during my commute, and now it’s creeping over to topics other than geopolitical news. I’ve tried “keeping up” with certain people and sites that interested and inspired me, but sometimes it’s hard to tell when new content has been published. There’s also the problem of distraction (mostly a good thing). Still, if I only have a limited amount of time per day to engage in this particular type of aggressive knowledge acquisition, I’ll need to make sure I’m focusing on the topics I really want to be focused on.

RSS Feeds are my solution to staying focused and up to date in a variety of categories. I currently use Google Reader as my reader, but there are many different readers to choose from. One interesting thing about Google Reader is the ability to subscribe to “bundles” of feeds. There are literally hundreds of different categories to choose from, including (all of which I’m currently subscribed) Art, Feminism, Science, Technology, Web, UX, and pretty much anything you can think of (though I was surprised not to find any feed related to sexuality). You can also create your own bundles, which I did for a general ‘Design’ feed that you can subscribe to here. it has a mix of education and inspiration relevant to logo design, graphic design, illustration, and web design.

Thinking in Code

Today I’m revisiting the ‘Markup the World Around You’ task that I did once in the HTML & CSS from the Beginning p2p course as part of a challenge in the Webmaking 101 learning track on P2PU.org

View the old task here

I’d also like to “mark up” a photograph I took a while ago at a Teavana.

100_0956

This is basically a container div with two equal width left and right “sidebar” divs. Each sidebar div has 5 equal height “shelf” divs. Some of the shelf divs contain a “menu” – and all of the shelves contain an unordered list of teapots.

To go a step further, each teapot has a specific class that defines the size, shape, and color.

After thinking about it, I’d want to be able to easily change color without changing size/shape. This is because there seem to be a lot less size/shapes than there are colors. I could do this by assigning the teapot’s class as a size/shape, and then using a span to define color, but would this really be the best way? I try to avoid spans when possible.

I could also create a teapot article (class defined as size/shape) and then the paragraph inside that article could have a secondary class that could define color.

I think I would choose the latter because it seems more professional and easier for future editing.