Setup a Development Environment
* Introduction
Alright, let's get started then! The first thing you're going to need is a suitable "development environment". A development environment is simply put, your computer, your chosen web server, and the applications you use to author, test, and debug your web site. One set of applications that I'm not going to discuss in the text because it should go without saying, is a set of good graphics applications but, know that you will need both an image editor (i.e. Photoshop, Gimp, etc..) and a good vector graphics application (i.e. Illustrator, Freehand, Inkscape, etc...). In the videos you may see me address these issues and I will be using Adobe's Creative Suite for the most part but, know now that you'll need access to these kinds of applications to create effective designs.
The next thing you're going to need to understand, is what an internet browser does and how to leverage your web browser as a tool for development (it can be much more than just a page viewer). You'll also need to understand what an editor is and what they can, can't, should, and shouldn't do to make things easier for you in your tasks. And finally you'll need to understand the differences in platforms for development and serving web pages. To begin, let's talk about the web browser and what choices there are.
Read further - Browsers ↓
* Browsers
The web browser market is in a constant state of ebb and flow. Newer versions of different browsers are constantly coming out and this can cause big headaches for web developers everywhere. As a web designer you'll need to be aware of these different beasts and design your site to work in as many of them as possible. This can be challenging because they all have their own little quirks, bugs, and limitations. It may seem overwhelming or frustrating at first because there are so many different browsers out there in the world, but the truth is, there is a relatively few number of rendering engines that power them all.
A rendering engine is the underlying mechanism in the browser that interprets the web page code into a displayable piece of content. This is the underpinning of why and how a web page gets displayed. Knowing which browsers use which rendering engine will help you to test against a huge variety of possible viewers. Below is a table of the available rendering engines and there browser/platform counterparts. You will want to have access to at least one browser for each of these rendering engines for testing and development so you can ensure a certain level of accessibility to your websites. Ideally you'd want to have as many as possible including different/older versions that may still be lingering around but, platform and availability make this nearly impossible so do your best to get as many as you can.
Note: This list only covers the most common and is in no way a complete list of all the available rendering engines and browsers, but these are the main four that make up around 99.9% of the browser market.
| Rendering Engines & License | Browsers | Platforms |
|---|---|---|
Webkit/KHTMLOpen sourceLicensed under both the LGPL and BSD |
Webkit Browser | Mac OSX Windows Available as a source file for building on any number of platforms including Linux |
| Safari | Mac OSX Windows iPhone Mobile Browser |
|
| Konqueror/KHTML | Linux Mac OSX Windows |
|
| Adobe AIR | Mac OSX Windows (Linux support is planned) |
|
Presto/OperaProprietary License |
Opera Browser | Mac OSX Windows Linux |
| Nintendo Wii Internet Channel | Nintendo Wii | |
| Nintendo DS Internet Browser | Nintendo DS | |
| Opera Mobile/Mini | Available on many mobile phones made by Nokia, Motorola, and others. | |
GeckoOpen sourceLicensed under the Mozilla Public License |
Firefox/Mozilla | Mac OSX Windows Linux |
| Netscape | Mac OSX Windows |
|
| Camino | Mac OSX | |
| Flock | Mac OSX Windows Linux |
|
MSHTML/TridentProprietary License |
Internet Explorer | Windows |
| Windows Mobile Browser | Windows Mobile Windows CE |
|
| Maxthon | Windows |
The first thing you're going to need as web designer is a solid "go to" browser for viewing and debugging your work. The most widely used browser for this purpose is the open source Mozilla Firefox Browser. It is not currently the most advanced browser available as it only supports CSS2 and HTML4. Safari and the Webkit engine are much further along in that they support many elements of the yet to be released CSS3 and HTML5 specs. Since it is open source and has a huge development community behind it, Firefox is the most extendable though and this is why it's the most recommended. There are a number of wonderful plug-ins and extensions, made specifically for web developers, available for Firefox.
Download Firefox for your platform here if you don't already have it installed. I recommend version 2 for now. Version 3 is still in beta and many of the plug-ins you'll want to use are not available for version 3 just yet.
Recommended Plug-ins:
Note: There are many more helpful plug-ins available than just the ones I mention here, but these are some the best around for web development.
| Plug-in | Description |
|---|---|
| FireBug |
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. |
| Aardvark |
Powerful and user-friendly "selector" utility for selecting elements and doing various actions on them. It can be used for cleaning up a page prior to printing it (by removing and isolating elements), for making the page more readable, and (most appreciated by web developers), for analyzing the structure of a page. |
| Measure-It |
Draw out a ruler to get the pixel width and height of any elements on a webpage. |
| ColorZilla |
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. |
To install these plugins:
Install Firefox browser and click on the links I provided once there click on the "Install Now" button. You can wait to restart Firefox after you've installed them all, but none of them will be available to use until you after you do restart the browser, meaning actually close/quit Firefox and launch it again. You should not have to restart your computer.
Once you have Firefox and the plugins installed we'll need to take a look at some editors for eriting our code and actually making or web pages.
Read further - Editors ↓
* Editors
The next thing you are going to need is a great text editor. There are as many editors to choose from as browsers so I'm just going to go over some of the most commonly used that have the features that are essential for a good editor to have.
The most helpful feature a good editor should have is syntax highlighting. What this means is that as you type out your code your editor is able to recognize the syntax your using (HTML, CSS, Javascript, whatever...) and on the fly highlight the different parts of your code in blocks by changing the font color. This will make reading your code easier and recognizing where there are problems a snap.
Recommended Editors:
| Platform | Editors |
|---|---|
| Mac OSX |
Textmate Vi/Vim or Emacs Bluefish |
| Windows |
Ultra Edit PSPad |
| Linux |
Bluefish Kate/Kwrite Gedit Vi/Vim or Emacs |
No matter which editor you choose to use the basics of good clean standards based code are the same. A good editor can help you to code faster and to keep track of where you are in the code. It cannot however, do the coding for you though many editors out there try. You may be wondering why I didn't mention some other editors out there Like Dreamweaver® or Nvu. These editors are what is referred to as WYSIWYG |/wiz'ee-wig/ or /wiss'ee-wig/| editors for "What You See is What You Get". The problem with these editors is that very rarely do you actually "get" what you "see". The way they work is to interpret the actions of the editor into code while the author manipulates a page visually much like you would a word document. The problem is that in order to do that, the editor must make a lot of very specific code statements and use a lot of inline style to lock in the choices of author. The result of all this, mucking about, is sloppy and often times unreadable code that would be a nightmare to maintain. The bottom line, do not use these types of editors. Your code will suffer if you do and you will never really learn how to code proficiently.
If you are just starting out at writing HTML and CSS code I highly recommend using a simple interfaced editor rather than a full blown IDE. It will keep your eyes on the code and not wondering down the endless drop-down option panels or confuse you with it's automatic and seemingly random code completion. An editor will become your best friend and they all different nuances and tricks for maneuvering around. The idea is pick one and learn it well, read the manual, help files, and visit it's web forums.
A few suggestions to get you started. You know that weird looking thing in your hand you use to point at things on the screen. Some people call it a "mouse", but when editing code it is a crutch. Pretend it doesn't exist. Pretend the only way to communicate with your computer is it's keyboard. If you can learn how to quickly move around the screen with your keyboard you will become a much faster and more effective coder.
Some screen navigation to get you started. These "tricks" are almost all universal in the *nix flavored editors. I'm not going to go over any specific shortcuts to any editor other than this so please read the documentation for your editor for more tips & tricks.
Open up a text file with your editor of choice and try these out.
Note: I know from experience that these shortcuts work in TextMate, Emacs, vi/Vim, and nano/pico.
- Ctl+P will move the cursor up one line
- Ctl+N will move the cursor down one line
- Ctl+F will move forward on character
- Ctl+B will move back one character
- Ctl+A will move the cursor to the beginning of the line
- Ctl+E will move the cursor to the end of the line
- Ctl+D will begin deleting to the right of the cursor
- Ctl+K will delete everything to the right on that line
Great! So you've chosen a text editor next let's talk a bit about your chosen platform or operating system. (Windows, Linux, and Mac OS X)
Read further - Platform ↓
* Platform
While for the purposes of this site, a basic introduction to web design (HTML/CSS), the platform you are working on will make little difference. When it comes down to moving a finished site to a production web-server though, an understanding of the different platforms will become a much more critical thing so I'm going to touch on this idea here. If you'd like to skip ahead into the actual coding feel free, but if you have any curiosity about how the web works read on.
Some people tend to really love their chosen operating systems. So much so, that they'll even engage in fervent and heated arguments over the matter. So I'm never going to come out and say this one, is better than that one, or any useless nonsense like that. What I will say, however is this, your development environment should be able to replicate your production environment, while at the same time, be able to provide you with all of the tools you need to create beautiful and inspired work.
The most common production environment today on the web is by far Linux. This may be surprising to people who have never considered the operating system of the web-servers themselves. The web itself was created by Unix developers running primarily BSD Unix and other unix variants, long before windows even existed. The most common web application "stack" as it's called is referred to as the "LAMP" stack. A stack is essentially everything that is needed for a web application to run. The server must have an operating system, a web server application, a hypertext capable language for manipulating data, and a place to store the results of those manipulations (a database). The LAMP stack consists of Linux + Apache Web-server+ MySQL database + PHP(Pre-Hypertext Processing Language). This is the technology that you are using everyday on the internet, it powers the web as we know it. Some organizations that you may have heard of that use it include, Google, Yahoo, The NY Times, Wikipedia, and just about everyone else.
You can run these same applications and languages on a windows platform, but the performance differences can be very disheartening. When it comes to high volume, high traffic servers performance really matters and as of November 2007, out of the top 500 high performance supercomputers, 426 (85.2%) run Linux and this number continues to climb.
So, knowing this fact, the easier it is for your development environment to communicate and replicate with your production environment (which will most likely be a Linux or Unix based server) the easier your life will be. Some the things you'll find you need to do as a web administrator will require you to have many of the same tools your server has. These tools are things like SSH (Secure Shell), SFTP (Secure File Transfer Protocol), and advanced scripting languages like bash, ruby, python, and on and on.
These tools are available on all three of the major operating systems to varying degrees of support, but as a web designer you'll also need access all of the latest graphics/multimedia applications like Adobe's suite of applications PhotoShop, Illustrator, and Flash you may also find your self needing quicktime and video editing capabilities with the rise of online video.
Because of the unique needs of web designers the platform of choice for them is becoming more and more Mac OSX. With Mac OSX you have access to the same kind of bash terminal and the same Gnu/UNIX tools that your web server has and you have the ability to run them in the same way that they run on the server. In the windows world installing and using these tools can be a long and tedious hassle and many of them just don't have an alternative or are just plain un-installable. So I here you ask, why not just use Linux for your desktop? Well, you definitely can and many of the programmers who don't deal with design at all, do. As for designers though, we need more than just the shell tools. We need to be able run Adobe Illustrator and Photoshop and be able to easily manipulate videos for titling and compression with expensive proprietary software that just won't run on Linux.
So there you have it of the three major operating systems Mac OSX comes out on top for web designers and is increasingly becoming the platform of choice for web designers. It's not because Mac is cooler than PC(windows) or that web designers are a bunch of elitist Steve Jobs fanatics. It's because they have needs, and when it comes down to the tools they use right now, OSX is the only operating system that can give them the best of both worlds. Keep in mind though that this may some day change, say when a creative application suite comes along that is far more capable than Adobe and runs on Linux, or Microsoft creates the next most powerful web-server, or Adobe and Apple start selling linux versions of their software. Of course, many would argue that it will be cold day in hell before any of those things happen. The truth is they all could easily happen because, technology can and does, make very abrupt turns when your not looking.
So if you're running a Mac right now, great news you should have everything out of the box to create, deploy, and maintain a great website if not you may want to consider making the switch and if you are really opposed to owning a Mac and think Apple is evil then I suggest you at the very least have another PC running linux and use it for your development environment.