web development tools

 

Sunday, 26 February 2012

web development tools

Table of Contents

  1. Error checking tools
    1. CSS Validator
    2. HTML Validator
    3. Link Checker
  2. Firefox add-ons (extensions)
    1. ColorZilla
    2. Firebug
    3. HTML Validator
    4. Web Developer
  3. Internet Explorer add-ons
    1. Developer Toolbar
  4. Internet Explorer on Linux
    1. IEs 4 Linux
    2. VMware Server
  5. Opera add-ons
    1. CSS Editor
    2. DOM Console
    3. DOM Snapshot
  6. Run multiple versions of IE on one computer
    1. Evolt stand-alone builds
    2. VMware Server
  7. Specifications

Error checking tools

Up 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

Up 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

Up 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.

Firefox add-ons (extensions)

Up Here are some useful web development extensions for the Mozilla Firefox web browser.

ColorZilla

Up 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.

Ubuntu users

If you're on Ubuntu and are using Firefox from Ubuntu's repository, ColorZilla won't work right by default. You can either use Firefox from the official Mozilla site or apply this workaround:
  1. Uninstall ColorZilla if it is already installed.
  2. Download Firefox from the official Mozilla site (you don't need to install it).
  3. Extract /firefox/libxpcom* from the Firefox package to a temporary location.
  4. As root, copy the extracted files to your /usr/lib/firefox, replacing the files of the same names.
  5. Start up Firefox and install ColorZilla. When you restart Firefox, ColorZilla should be working correctly.

Firebug

Up 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

Up 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

Up 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.

Internet Explorer add-ons

Up Here are some useful web development add-ons for the Internet Explorer web browser.

Developer Toolbar

Up 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 eyedrop 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.

Internet Explorer on Linux

Up The following tools will help you run Internet Explorer on a Linux desktop.

IEs 4 Linux

Up IEs 4 Linux is perhaps the most convenient tool for running Internet Explorer on Linux. Just run the script and it automatically asks which versions you would like to install (6 SP 1, 5.5, and 5.01, with a rough implementation of 7 currently as a hidden beta option), and it downloads and sets everything up on its own. There is no cost involved in the process.
IEs 4 Linux runs using Wine, a Windows compatibility layer for Linux. Because this is essentially a hack, there are some known issues to keep an eye on. For guaranteed perfect emulation, you should use a virtual machine instead, although IEs 4 Linux is usually much more convenient due to its faster performance.

VMware Server

Up VMware Server is a free tool that allows you to start up a virtual computer in a desktop window. This way you can test Windows-only programs like Internet Explorer from a Linux desktop, with no need to purchase extra computers. You will, however, need to purchase a copy of Windows to install on each virtual machine you plan to use.
Because this emulates an entire working computer, there is usually a noticeable performance impact. The free VMware Tools package, conveniently available from the menu in VMware Server, helps accelerate basic utilities like the mouse and graphics, but it is still recommended that you use a modern computer and disable any performance-impacting effects in the virtual machine.

Opera add-ons

Up Here are some useful web development add-ons for the Opera web browser.

CSS Editor

Up The CSS Editor allows live editing of the page's stylesheets. It also provides some context information about the stylesheets, such as the media types and owner node in the DOM.

DOM Console

Up The DOM Console is a simple DOM inspector tool offering basic DOM navigation with viewing of attributes, computed styles, properties, and element geometry.

DOM Snapshot

Up DOM Snapshot displays the webpage's generated source — the source HTML as the browser sees it after any modifications from scripts.

Run multiple versions of IE on one computer

Up Internet Explorer was not designed to allow multiple versions to be installed at once on a single computer. The following tools will help work around this limitation.

Evolt stand-alone builds

Up Evolt has a collection of stand-alone packages of Internet Explorer. These are hacked distributions that use special tricks to separate most of the program from the central Internet Explorer installation. There are some significant bugs with this method, such as conditional comments not working correctly. See Fixing Stand-alone versions of Internet Explorer to fix the conditional comment issue.
Microsoft has warned against relying on stand-alone builds because of the bugs involved. For guaranteed perfect emulation, you should use a virtual machine instead, although you may find the stand-alone builds more convenient due to their faster performance.

VMware Server

Up VMware Server is a free tool that allows you to start up a virtual computer in a desktop window. This way you can test multiple versions of Internet Explorer in their proper configurations, with no need to purchase extra computers. You will, however, need to purchase a copy of Windows to install on each virtual machine you plan to use.
Because this emulates an entire working computer, there is usually a noticeable performance impact. The free VMware Tools package, conveniently available from the menu in VMware Server, helps accelerate basic utilities like the mouse and graphics, but it is still recommended that you use a modern computer and disable any performance-impacting effects in the virtual machine.

Specifications

 Here are the actual language specifications. These are the documents that web browser developers attempt to follow when adding support for these features. They are the result of the collaboration of many web browser developers and other leading figures in Web standards.
Be sure to check the status of a specification before relying on it. A Working Draft (WD) is the earliest stage of development, when the specification may change frequently. Candidate Recommendation (CR) status is the first stage at which browsers should begin working on implementations. The specification then moves on to Proposed Recommendation (PR). Finally, the Recommendation (REC) status is when web developers may begin using it on their webpages.
Browser support information for these specifications is available in the Web browser standards support section.
  • HTML
    • HTML 4.01
    • XHTML 1.0
    • XHTML 1.1
  • CSS
    • CSS 1
    • CSS 2
    • CSS 2.1
    • CSS 3 current work
  • DOM (used in scripting)
    • DOM Level 1
    • DOM Level 2
    • DOM Level 3
    • Others
  • ECMAScript (standardized base for JavaScript and JScript)
    • ECMAScript 3rd edition (PDF)

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Home


















Web development is a broad term for the work involved in developing a web site for the Internet  (world wide web)or an intranet (a private network). This can include web design,web content development,client liaison, client side /server side scripting ,web server and network security configuration, and e-commerce development. However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding. Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications..

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

site management

CONTENT MANAGEMENT
A content management system (CMS) is a system providing a collection of procedures used to manage work flow in a collaborative environment. These procedures can be manual or computer-based. The procedures are designed to do the following:
  • Allow for a large number of people to share and contribute to stored data;
  • Control access to data based on user role (i.e., define information users or user groups can view, edit, publish, etc.);
  • Facilitate storage and retrieval of data;
  • Control data validity and compliance;
  • Reduce duplicate inputs;
  • Simplify report writing;
  • Improve communication among users.
This platform allows you to publish content, edit content, modify it and also ensure that you are in the same page when it comes to site maintenance. Benefits with CMS Web Development –
  • You will find that a good quality CMS is going to help you by simplifying all activities when it comes to publishing content, revision control, easy search, indexing, easy retrieval of content, among other activities.
  • Write reports easily and avoid duplicate content as much as you want to.
While Entering into CMS Web Development these are common names to lookout for-
  • Wordpress
  • Joomla
  • Drupal
  • Magento
  • Zencart.
In a CMS, data can be defined as nearly anything: documents, movies, text, pictures, phone numbers, scientific data, and so forth. CMS's are frequently used for storing, controlling, revising, semantically enriching, and publishing documentation. Serving as a central repository, the CMS increases the version level of new updates to an already existing file. Version control is one of the primary advantages of a CMS.

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

server side development

Server Side Coding

  • ASP (Microsoft proprietary),
  • CSP Server-Side ANSI C.
  • Coldfusion (Adobe proprietary, formerly Macromedia, formerly Allaire)
  • CGI
  • JAVA e.g. Java EE or WebObjects.
  • Lotus domaino.
  • OPerl e.g. Catalyst Dancer (all open source)
  • PHP (open source)
  • Python e.g. Web Framework (open source)
  • Real Studio Web Edition
  • Ruby e.g. Ruby & Rails (open source)
  • Smalltalk e.g. Seaside AIDA/side
  • SSJS Server-Side JavaScript, e.g. Aptana, Jaxer, Mozilla Rohino
  •  Web DNA(WSC proprietary)
  • Websphere (IBM proprietary)
  • .NET and .NET MVC Frameworks (Microsoft proprietary)
The World Wide Web has become a major delivery platform for web development a variety of complex and sophisticated enterprise applications in several domains. In addition to their inherent multifaceted functionality, these web applications exhibit complex behavior and place some unique demands on their usability, performance, security and ability to grow and evolve. However, a vast majority of these applications continue to be developed in an ad-hoc way, contributing to problems of usability, maintainability, quality and reliability.(1)(2) While web development can benefit from established practices from other related disciplines, it has certain distinguishing characteristics that demand special considerations. In recent years of web development there have been some developments towards addressing these problems and requirements. As an emerging discipline, web engineering actively promotes systematic, disciplined and quantifiable approaches towards successful development of high-quality, ubiquitously usable web-based systems and applications.(3)(4) In particular, web engineering focuses on the methodologies, techniques and tools that are the foundation of web application development and which support their design, development, evolution, and evaluation. Web application development has certain characteristics that make it different from traditional software, information system, or computer application development.
Web engineering is multidisciplinary and encompasses contributions from diverse areas: systems analysis and design, software engineering, hypermedia/hypertext engineering, requirements engineering, human-computer interaction, user interface, information engineering, information indexing and retrieval, testing, modelling and simulation, project management, and graphic design and presentation. Web engineering is neither a clone, nor a subset of software engineering, although both involve programming and software development. While web engineering uses software engineering principles, web development encompasses new approaches, methodologies, tools, techniques, and guidelines to meet the unique requirements for web-based applications.

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

client side development

Client Side Coding

  • Ajex Asynchronous JavaScript provides new methods of using JavaScript, and other languages to improve the user experience.
  • Flash Adobe Flash Player is an ubiquitous browser plugin ready for RIAS is also deployed to the Flash Player (version 9+).
  • Javascript Formally called ECMAScript, JavaScript is a ubiquitous client side platform for creating and delivering rich Web applications that can also run across a wide variety of devices.
  • JQUARY  Cross-browser JavaScript library designed to simplify and speed up the client-side scripting of HTML.
  • Microsoft silverlight Microsoft's browser plugin that enables animation, vector graphics and high-definition video playback, programmed usingXMAL and .NET programming languages.
  • HTMLand 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
Looking at these items from an "umbrella approach", client side coding such as XHTML is executed and stored on a local client (in a web browser) whereas server side code is not available to a client and is executed on a web server which generates the appropriate XHTML which is then sent to the client. The nature of client side coding allows you to alter the HTML on a local client and refresh the pages with updated content (locally), web designer must bear in mind the importance and relevance to security with their server side scripts. If a server side script accepts content from a locally modified client side script, the web development of that page is poorly sanitized with relation to security.

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

web designing

Web designing is all about writing code that is valid HTML and CSS which make it easier to correct problems, and edit pages. HTML and CSS are the fundamental technologies for building web pages: (X)HTML for structure, accompanied by CSS for style and layout. By separating the presentation style of documents from the content of documents, CSS simplifies web authoring and site maintenance. For example, having a separate CSS file allows for making aesthetic changes to the entire website rather than just to a single web page. If CSS rules are included within a single HTML page, changes would have to be made to each and every page that used the element in question. The reasoning is that HTML should only be used for raw content and CSS be used to manipulate the content for aesthetic style........

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS