The phases of a web development, as well as the programming languages used, are very extensive and varied, and therefore we need specific tools for each of them. We will know below the main existing tools to easily develop a web project.

In web development we have some tools for design, others for layout, others for programming, and for debugging. All the tools we use are very important, from the Operating System to the most insignificant command, and that’s why we must choose the most appropriate one for our needs and capabilities.

Operating System

To develop a website, the first thing we need is an Operating System, of course, and your choice is not so easy. You have to take into account the applications that the Operating System has and its costs.

For example, we have Microsoft Windows, whose applications are very expensive, such as Photoshop, Dreamweaver, Fireworks, ASP .NET… And on the other hand we have GNU/Linux, with GIMP, Inkscape, Amaya, Aptana, PHP (although all of them are also available in Windows).

Another feature to take into account is the facilities that the Operating System provides to the developer, and in this sense GNU/Linux is taken from the street to Windows. And this is because Windows was not designed for developers, but for people who do not have much knowledge about computers.

And on the contrary, GNU/Linux was created by developers, and for developers; and therefore in GNU/Linux we can find an infinite number of tools that will make our lives much easier, which are also free.

Phases of development of a website

In order to choose the tools to be used, we must first identify the phases of the process that form the life cycle of a web development.

Design:

design consists of creating sketches of the final web using a graphic tool, such as Photoshop, GIMP or Inkscape.

HTML/CSS layout:

the layout consists of converting the sketches created in the previous phase into HTML templates, their respective style sheets, and the images used. It is possible to skip the previous phase to start directly with this phase, depending on whether we master tools such as Photoshop or not.

Client programming:

the client programming basically consists of Javascript. A website may have no need for client programming, such as a small corporate website with little static information, or it may require enormous efforts in this phase, as is the case with Web 2.0 projects.

Server programming:

in this phase, which is developed together with the previous one, we will create the web application in a server language, such as PHP, ASP .NET, Python, Perl, etc.

Debugging:

this phase links the previous one with the next one, and is where we will do the unitary tests, assertions, traces, etc.

Local testing:

in our local server we will do all the possible tests.

Upload files to the hosting:

once our website is completed and well tested in our local server (development), we will upload it to the server of the chosen hosting (production). Depending on the hosting, we can use FTP, SFTP (SSH), WebDAV, or even Subversion. I advise to use Subversion if the server allows it, for its convenience and speed, and also for its main utility, which is version control.

Testing in hosting:

we’ll run the last tests on the hosting server to check that the server change hasn’t affected anything. To avoid problems, our local server must have exactly the same configuration as the hosting server.

Tools: PHP development

Next I will list the basic tools for the development of a web in PHP, in its different phases of design and implementation.

Phases: design and layout

• Adobe Photoshop: This application is only available in Windows, and is the most expensive, although it is the most used and thanks to this it has a large community of users who can be counted on for any problem. With it we will create the design, as well as the images that we will use in the layout.
• GIMP: It is the closest open source equivalent to Photoshop. As it is free it is possible to get it for free, and in fact any GNU/Linux distribution includes it. As in Photoshop, we can use it to create the design and the images for the HTML layout. Also available in Windows

Phase: layout

• Inkscape: The Windows equivalent is Adobe Fireworks. It is an excellent vector graphic editor with which you can create icons, banners, and other drawings very easily and simply, even for those who do not have much knowledge of digital graphic editing.
• Adobe Fireworks: The easiest-to-use vector graphics editor I’ve had the chance to use, although I didn’t miss it when I discovered Inkscape. Like its companion Photoshop it is very expensive, and even more so if we have a great free alternative like Inkscape.

Phases: layout, client programming

• Dreamweaver, Aptana, Amaya: I described these tools in my previous article about the main web publishers in the market, so I refer you to it for more information. With them we will create the HTML/CSS code (layout), being Aptana the most professional option for client programming (Javascript).

Phase: server programming

Zend Studio: Without a doubt the best IDE in the market for web development with PHP. It is commercial, although not too expensive considering the excellent tool it is. It is also possible to download it from Zend’s website to test it for 30 days.
With it we will easily create the web application in PHP. Although we can also use any editor. A very good alternative is Eclipse with the PHP plugin.

Another very useful application that is closely linked to Zend Studio is Zend Platform, a module for Apache that allows debugging a web directly in the browser (Internet Explorer or Firefox), as well as other more complex functions, such as configurable alerts so that it sends us an email for each error that occurs on the web, or when a script exceeds a certain execution time, for example.

Phase: local test

Apache Installing an Apache web server on the machine where we develop is essential. This way we can test quickly: we edit a PHP file, go to the browser, update, and see the changes.

Phases: local testing, debugging

Firefox / Firebug / Web Developer Extension: Firefox is undoubtedly the best tool created in recent times for web developers, and with Firefox its two most useful extensions for our profession: Firebug and Web Developer.
With Firebug we will be able to debug Javascript, edit HTML and CSS in the same page to see the changes in real time, check the loading times of the page as a whole, of the images, javascripts, style sheets, etc, as well as their sizes, etc. And Web Developer offers very useful tools such as viewing web cookies, hiding images, resizing the browser to standard resolutions, etc.

Uploading files to the hosting server

Once we have completed all the previous phases, and our project is ready, we must upload it to the hosting server.

The tool to use will depend on the options offered by the hosting, which unfortunately in most cases is only the old FTP. In Dreamweaver and Zend Studio we have a FTP and SFTP (SSH) client, and the task will be simply to configure the FTP and copy and paste the directories we want to upload.

I hope that this guide will help you when facing a web development. We must take into account the development phases and use the appropriate tools: the one that is easiest to use, the most economical, the one we know best, etc.