Web Development Tools

Web Development can be split into many areas and a typical and basic web development hierarchy might consist of: Client Side Coding 

•AJAX Asynchronous JavaScript provides new methods of using JavaScript, and other languages to improve the user experience. 

•JavaScript is a ubiquitous client side platform for creating and delivering rich Web applications that can also run across a wide variety of devices. •Microsoft Silverlight Microsoft's browser plugin that enables animation, vector graphics and high-definition video playback, programmed using XML and .NET programming languages. 

•REAL Studio Web Edition is a rapid application development environment for the web. The language is object oriented and is similar to both VB and Java. Applications are uniquely compiled to binary code. 

•HTML5 and CSS3 Latest HTML proposed standard combined with the latest proposed standard for CSS natively supports much of the client-side functionality provided by other frameworks such as Flash and Silverlight Server Side Coding • ASP (Microsoft proprietary) 

• PHP (Open Source) 

• ColdFusion (Adobe proprietary, formerly Macromedia, formerly Allaire) 

• CGI and/or Perl (open source) 

• Groovy (programming language) Grails (framework) 

• Java, JSP, e.g. Java EE or WebObjects 

• Python, e.g. Django (web framework) (open source) 

• REAL Studio Web Edition 

• Ruby, e.g. Ruby on Rails (open source) 

• Smalltalk e.g. Seaside, AIDA/Web 

• SSJS Server-Side JavaScript 

• Websphere (IBM proprietary) 

• .NET (Microsoft proprietary)  

Database Technology 

• Apache Derby 

• DB2 (IBM proprietary) 

• Firebird • Microsoft SQL Server 

• MySQL 

• Oracle 

• PostgreSQL 

• SQLite 

• Sybase  

You wouldn't publish a book without spell-checking it, and you shouldn't publish a webpage without validating it. 

The following tools will scan your page and give a detailed summary of the errors they find. CSS Validator 

The W3C CSS Validator, developed by the same organization that created and standardized the CSS language, is the most used and most reliable CSS validator available. It's a free and open source web-based tool that will scan your CSS source and explain any lexical or syntactic errors it finds. The W3C CSS Validator checks compliance with the CSS 2 standard by default. At the time of writing, most browsers are targetting the upcoming CSS 2.1 specification. There are some well-supported features of CSS 2.1 that didn't exist in CSS 2, so the W3C CSS Validator may give you errors on those. On the results page, the validator will often give you a number of warnings even if there are no errors. These warnings do not imply that your page is invalid or even written poorly. They are basically tips for things to be aware of. Most of them deal with the fact that users may customize their default stylesheet, and if they, for example, choose to have a black background and white text by default and your page only specifies a light background color, the page may be unreadable for those users. The validator may recommend that you specify a text color along with your background color to prevent these potential problems. 

 HTML Validator The W3C HTML Validator, developed by the same organization that standardized the HTML language, is the most used and most reliable HTML validator available. It's a free and open source web-based tool that will scan your HTML or XHTML source and explain any lexical, syntactic, or structural errors it finds. The W3C HTML Validator is somewhat unusual in that it determines the SGML profile (HTML versus XML) of the page based on the doctype. All major web browsers use the Content-type HTTP header to determine the profile, while the doctype is usually only used for the element/entity sets and doctype switching. What this means is that if you have an XHTML doctype but use the typical Content-type: text/html HTTP header (usually the default), the W3C HTML validator will parse it as XML even though all major web browsers will parse it as regular HTML. Because of this, browsers may see the page as invalid even though the W3C HTML Validator says it's valid. There are a number of other reasons to beware of XHTML in general.  

Link Checker The W3C Link Checker, developed by the same organization that standardized the HTML and HTTP languages, is a free and open source web-based tool that will scan your website and report any broken links it finds, as well as other relevant information. You may specify an arbitrary number of pages deep to check.  

** Here are some useful web development extensions for the Mozilla Firefox web browser. ColorZilla ColorZilla is a little tool that sits in your statusbar and offers an eyedropper, color picker, and rudimentary full-page zoom settings. It's useful for quickly grabbing and comparing colors on a webpage. The full-page zoom settings resize the text and images, but backgrounds and other stylistic aspects are left the same. 

Firebug Firebug, made by the creator of the DOM Inspector, is a powerful and easy-to-use tool for debugging scripts. It includes three main features: a console which lists errors and allows you to execute any arbitrary JavaScript code at any time in the scope of the webpage itself; a debugger which shows you all of the JavaScript source with errors highlighted; and an inspector which allows you to navigate the page's DOM, element styles, computed layout, and associated events.  

HTML Validator The HTML Validator extension uses a local HTML validation tool to validate every page you visit, with the results displayed as an icon in the status bar and with a summary and highlights in the View Source window. This can help you conveniently identify errors in the markup without needing to consult the W3C validator every time. It's available for both Windows and Linux and has a very small performance impact. Version 0.7.x uses a local install of HTML Tidy as its backend, which is less reliable than the W3C validator. However, as of version 0.8 (still in beta at this time of writing), there is an optional SGML mode that uses the same backend as the W3C validator and produces very accurate results.  

Web Developer The Web Developer extension is a must-have for web developers. It offers over a hundred different tools to help web developers get their work done, all from a convenient and well-organized context menu or toolbar, depending on your preference. Some particularly useful features include: live CSS and HTML editing; options to disable images, scripts, cookies, or a number of other things; view server response headers; a ruler showing the pixel coordinates of the cursor position and selected elements; various outline tools; quick access to a number of validation tools, including for non-public pages; and view generated source to see how the page has been modified by scripts.  

** Here are some useful web development add-ons for the Internet Explorer web browser. Developer Toolbar 

The Internet Explorer Developer Toolbar, developed by Microsoft, is the closest thing you'll get to Firefox's Web Developer extension and DOM Inspector in Internet Explorer. It was clearly designed to be familiar to people who have used the Web Developer extension, with most of the same features organized in the same way. It doesn't yet offer live CSS and HTML editing, arguably the most useful features in the Web Developer extension, but it does have a DOM inspector (also modeled after the Firefox equivalent) and an eye drop color picker, though it doesn't yet have a spectrum color picker. The Developer Toolbar is available for Internet Explorer 6 and 7 with no cost. At the time of writing, this add-on is still in beta.