File transfers

File transfer applications are essential, because web site developers will always need to be able to copy files over the Internet and up to their server, whether it's program code, images, movies, or any other type of files. Most file transfer applications use a method called File Transfer Protocol( FTP) to send files to and receive files from their site. So the first tools we are going to look at are FTP applications, also called FTP clients.

One very popular and free FTP client is FileZilla, available from filezilla-project.org. FileZilla has a straightforward interface, and is available on both the Mac and Windows platform, so it is easy to recommend it.

For the Mac people out there, Transmit, a commercial FTP client from the team at www.panic.com/transmit, is another solid choice. Transmit has a very easy to use interface, and will immediately feel familiar to Mac users, because of its similarity to the native Mac finder.

Not to forget our Windows brothers and sisters who want something more, I personally prefer WS_FTP from ipswitch.com. It's a little more powerful than FileZilla in several respects, and I feel that it has a nicer interface.

When sending information via FTP, we will usually be presented with two options for the method—ASCII and Binary—in which we send the data.

ASCII is used for transferring information in character form and should only be used for data that is only text (for example, programming code), as it will corrupt any non-text data, such as images or executable files. It is useful when transferring documents between different operating systems as most FTP clients will automatically convert things like end of line characters and special characters to the equivalent character on the destination server.

Binary sends our data, as the name implies, in binary format so it is safe for any type of data. Binary should be used for any non-text transfers, but can be used safely for text documents as well, though no character substitution will take place.

Code editing

Probably the most difficult, and important tool to get right is the code editor or Integrated Development Environment (IDE). Picking the right IDE is important because it will be one of the tools we will use the most when working on our site, especially as our programming skills grow. Using the right IDE can save us hours or even days of work when developing.

A good IDE will usually have at least the following two features:

There are lots of other features available, but these are the two features that most developers would consider essential in their IDE.

One of the top IDEs around, Eclipse (www.eclipse.org), also happens to be free and open source, making it a good choice for many developers. This is further supported by the fact that it is available for both Mac and Windows PCs. It also supports a dizzying variety of plugins that we can use to add new features to it. When developing a Joomla! site, we will want to find and install at least the PHPEclipse (www.phpeclipse.com) plugin to allow us to edit Joomla! Extensions, and core Joomla! files properly.

One disadvantage for eclipse is that it is a little complex (because it is also very powerful) and may overwhelm inexperienced developers. To get around this, I personally recommend using Aptana Studio (http://aptana.com/), which is based on eclipse and also runs in almost the exact same way, accepting the same plugins, and so on. However, it has been subtly enhanced to be more user-friendly, and comes with the most common plugins that a Joomla! developer would want already pre installed. These plugins can be easily added with a single click. They also include many tutorials on their site, in the support section, to help new developers understand, and use Eclipse/Aptana Studio.

Another excellent editor that is available on both Windows and Mac is Adobe Dreamweaver (www.adobe.com/products/dreamweaver/). This commercial IDE is aimed at web development in general and not just at HTML and PHP. It has all the features we would expect in a modern IDE and is used by many developers.

Another free IDE, PSPad (www.pspad.com), is also a good choice for beginning Windows developers, as it is quite simple to use and has an interface similar to a word processor. It does, however, lack an auto completion functionality, which is its only major drawback. Many experienced developers also use PSPad, because it is very lightweight and fast, even when handling large files.

For Windows users who can afford it, PHPed (www.nusphere.com) is highly recommended as it is focused on PHP web development (unlike Eclipse, Dreamweaver, and PSPad which are general IDEs), and even has a Joomla! plugin for its auto completion engine. Thus, giving us access to functions from Joomla! itself, without having to remember them.

For Mac users, there are quite a few good IDEs out there. However, two, in particular, stand out from the crowd. First is Coda (www.panic.com/coda), touted as one window web development. Coda not only has the standard IDE features, but also includes an FTP client, an SVN client (which we will talk about later), a built-in technical book library, and several other great and useful features for web developers. This is the IDE that we will see used in all the demos throughout the book as it is one of the best to work with.

Another great IDE for Mac is CSSEdit (macrabbit.com). Unfortunately, it is focused solely on CSS, and does not support HTML or PHP at all, and so it has only a limited scope for developers, but it is nonetheless recommended as one of the best CSS IDEs around.

Image editing

A good image editor is another important tool for a developer. These, however, are harder to come by without paying a hefty price in either money or practice.

Gimp (www.gimp.org) is a popular free image replacement program, but it has quite a steep learning curve, one that I personally never took the time to climb, preferring other editors. Many developers, however, swear by it, as it is, without a doubt, the most powerful free editor available, and is conveniently available on both Mac and Windows.

A program derived from the Mac version of Gimp, called Seashore (seashore.sourceforge.net), is also available for free to all Mac users. While it has a simpler interface, it is significantly less powerful than Gimp.

Many people use Adobe Photoshop (www.adobe.com), but like Gimp, it also has a fairly steep learning curve to get professional results. There are however, thousands of tutorials out there for it to help people get started.

The top preference of many web designers is Adobe Fireworks— formerly Macromedia Fireworks (www.adobe.com). It is similar to both Photoshop and Adobe Illustrator, but without the complexity of either of them. It has been specifically designed for working with images for the Web, unlike Photoshop (for photos) or Illustrator (for large vector print design and illustrations). It is very easy to pick up to begin producing and editing images that look professional within just a few hours. It is, unfortunately, quite expensive, so may be out of the price range of many beginner developers, but is highly recommended for anyone serious about web development or design.

Web browsing

A common mistake that many new developers make when starting out is assuming that everyone uses the same web browser as them. The truth is that our site visitors will probably come to us from any number of browsers. "Why does this matter?", I hear you ask. Well, we should test our site in as many browsers as possible, as they all have different ways of handling web pages. Our site may look great in Firefox, for example, but look like a dog's breakfast in Internet Explorer.

Testing in a wide variety of browsers helps us to ensure that as many people as possible can access our site and our products.

The recommended browsers that we should test with as a minimum are:

Usually, if your site looks good in Safari, Opera, Firefox, or Chrome, then there is a good chance that it will look fine in the others in that list since all of them support CSS standards quite well, and usually only require slight tweaks to get them looking good.

Internet Explorer, however, is totally different. Generally, it is considered very difficult to work with by most web developers, because of its lack of support, and non standard support, for CSS standards. Internet Explorer, particularly versions 6 and 7, none the less still make up over half of the traffic on the internet because for many inexperienced computer users, or people using their computer at work, Internet Explorer is the only browser they are able to use. As a result, developers will need to ensure their site works in Internet Explorer as well as other browsers.

Installing multiple browsers is as easy as downloading them and running the installer. Except for Internet Explorer, where (because we will need to install different versions) we need to first install Internet Explorer and then a program called Multiple IE (tredosoft.com/Multiple_IE), thereby allowing us to install many previous versions of Internet Explorer from 3.0 to 6.0. Really, we only need to install versions 6 and 7 for most of our testing.

For Mac users, getting Internet Explorer follows the same procedure, except that we will need to use a program such as Parallels (www.parallels.com) or BootCamp (www.apple.com/macosx/features/bootcamp.html) that allows to us to run Windows itself on our Mac machine.

A question many people have at this point is which browser should we use every day when developing?

For many web developers, the browser of choice for the bulk development is Firefox. Not because it is a better browser in itself, Safari and Chrome are both faster, and Opera has nicer core features, but because Firefox supports an extensive array of plugins, in particular one called Firebug (www.getfirebug.com) which allows real time editing and testing of web pages. Thus, reducing the testing and development time dramatically for the front-end of our web site.

There are also many other great plugins for Firefox to support web developers, another favorite being the Web Developer Toolbar (chrispederick.com/work/web-developer) that contains many useful functions for developers, such as clearing specific parts of the browser cache, turning JavaScript on and off, and more.

Microsoft has also released an Internet Explorer Developer Toolbar that does significantly reduce the headaches of working with Internet Explorer, however it is not nearly as useful as Firebug.

Database administration

Being database-driven, it is important to be able to access and alter the database for a Joomla! site. There may come times that we need to fix data, or perform testing and the only way is to get into the database itself.

By far, the most popular database administration tool is phpMyAdmin (www.phpmyadmin.net), a web-based database management tool provided free of cost by most major web hosts. phpMyAdmin is not a perfect database administration tool, but it does more than is required by most web site developers, so is a good choice.

Usually phpMyAdmin will be preinstalled on our web server. If by some chance it is not and we want to install it ourselves, or we simply need some more information about it, there is extensive documentation on the phpMyAdmin site (http://www.phpmyadmin.net/documentation/).

Apart from external applications, there are also some great Joomla! components that work as excellent database administration tools. One of the more flexible of these is EasySQL that allows us to enter our own database commands right from our site administrator panel. It is not for a novice, however, as we need to hand-write those commands.

Storing code

A source code repository is a place to store a copy of not only our code, but also the history of changes made to it, allowing us to move backwards and forwards through the changes we have made.

While not essential, having a source code repository can make developing a site, especially when working with a team, a lot smoother and easier.

A source code repository can usually be updated to and downloaded from remotely, allowing people working at different locations, or even one person who works from multiple machines, to stay updated with the latest code versions.

On top of this, most allow two people working on the same piece of code to work independently and then merge their changes together instead of having to wait for each other to finish before they can do their own work.

Probably the best benefit is the ability to have a safe, offsite backup of our site and customized code in case something goes wrong. With the added ability to go backward in time to an earlier version of the site in case some changes we just made happen to break everything.

Probably the most popular source code repository available today is Subversion, however, another newcomer called Git has been gaining popularity. We will focus mainly on Subversion though, as it is the easiest to work with for new developers.

Subversion is often referred to as SVN, and SVN repositories can be set up in one of the following three ways:

Unless we are an experienced server admin, option one is probably not for us. Option two is much less complicated, but can still be a challenge for some people, and option three is the simplest and easiest to manage for most people, however it is usually the most expensive.

SVN web services can be found both alone, such as springloops.com, and sometimes packaged with project management web services, such as unfuddle.com.

Accessing and using our SVN repository will require a client tool of some sort to be installed on our PC. We can work with SVN via a command line if we wish, but for most of us that is a very slow, cumbersome, and error prone process, so a clean graphical interface is the better option.

One of the better SVN clients is a plugin for the Eclipse IDE called Subclipse (subclipse.tigris.org), which allows us to manage our repository from inside Eclipse itself. As Eclipse is available on both Mac and Windows, and both Eclipse and the Subclipse extensions are free, this is a great choice for many people. Subclipse can also be installed into Aptana studio, which I mentioned earlier, via the easy to use plugin installer.

For Windows, there is also another great choice. Tortoise SVN (tortoisesvn.tigris.org), which is also a free application and that plugs into our file explorer in Windows and lets us manage our SVN repository from our normal file manager window.

For Mac users there is Versions (www.versionsapp.com), a new repository client that is quite solid and reliable. We may remember that I mentioned a built-in SVN client above in the IDE section. The IDE in question was Coda, and it includes a basic, but more than adequate, SVN client in their tool, making it very convenient as we can save a file and commit it to the repository without changing applications.

As the different clients all implement SVN 's functions differently in their user interfaces, it would be difficult to give a useful demonstration without showing all of the different clients. But it is useful that we understand the basic concepts used by SVN, as these concepts can be used across all the clients. In addition, an excellent web book about Subversion can be found at http://svnbook.red-bean.com/. This book contains a lot of excellent extra material about using Subversion.

Building locally

Using certain programs, it is possible to install a ready to use web server on our PC that we can develop and test our Joomla! web site on. This can take the place of using a fully fledged web server at a hosting company.

Using this local server, instead of a live web site, is the development area of choice for many Joomla! developers because of several strong advantages:

For Windows users, Xampp (www.apachefriends.org/en/xampp.html) is a popular choice for setting up a local server. Their site provides lots of information on how to setup and configure our web server.

For Mac users, Mamp (www.mamp.info) is the tool of choice for setting up a web server. There is a great instructional video provided on their home page that will help us get up and running in no time at all.

If we are setting up a local development environment, either via Xampp, Mamp, or by ourselves, there are three things we will need:

These all come by default with Xampp and Mamp, and using one of them is almost always the best option for anyone but an expert.

If we decide to develop locally, once we have finished with our site we will need to move it to our real web server. The best way to do this is via a component called JoomlaPack (www.joomlapack.net/). JoomlaPack will package our site into a zip file that we can then unzip onto our server and when we visit the site, it will automatically show us an installer that is almost identical to the default Joomla! installer.

The main difference being that it will install our site exactly as it was on our local development machine, extensions, content database, and everything else.