Web Design/Useful Applications

From Wikiversity
Jump to: navigation, search


Web Design Useful Applications
DeliciousFruitFromOSWD.png
This page is part of the Web Design project.
CSSZenGardenLikeTheSea.png

Here are some useful applications.

Browsers[edit]

A web browser is an application to look at web pages. You're using one right now to read this text. Every operating system ships with at least one browser, such as Internet Explorer (Windows) or Safari (Mac OS X) or Firefox (Many Linux Distribution), Konqueror (some Linux Distribution) etc..

Surprisingly few computer users are aware of web browsers as applications in their own right. They simply "browse the web". As a web developer you need to know that different browsers exist and that each of them displays web pages in a slightly different manner. So you need to test your web pages not only with the default that happens to be on your machine, but also with the more popular alternatives, such as free and open sourced commercial Firefox and the popular close-source Opera.

Some browsers also provide rather hidden features, that are very useful for development. For example:

Firefox together with the Web Developer form an previously useful tool for designing and testing web pages, now Firebug became more popular. Throw in a handy page validator with the Tidy HTML engine and you couldn't have it better! For Opera, users have Dragonfly built-in the browser.

Editors[edit]

HTML editors are applications to actually make web pages, to program HTML code. Before you ask, yes, web development is a form of programming. A web page is a piece of software code, written with an editor and displayed (rendered) by a browser.

Web development involves not only writing code, but also visual design and content management. You'll find that different HTML editors support different aspects of this workflow. At one extreme you'll find editors that let you only manually type code, on the other complex development environments that can modify thousands of pages at the click of a button.

Code Editing Only[edit]

For straight code editing a plain text editor is all you need. Every operating system ships with at least one text editor, such as Notepad (Windows), vim/KWrite/Gedit (Linux) or TextEdit (Mac OS). There's an immense selection of editors out there, each comes with their own set of bells and whistles. See Wikipedia's Comparison of text editors for an exhaustive list of alternatives.

Several specialized text-based HTML editors evolved from basic text editors. They added useful features for web development like color syntax highlighting, code validator and built-in FTP clients. See Wikipedia's Comparison of HTML editors for an exhaustive list of HTML editors.

For starters any text editor will do.

WYSIWYG (What you see is what you get)[edit]

WYSIWIG editors make it possible to design pages without understanding anything of the code behind them. This is a good thing for beginners at first, but may make it more difficult to progress to more advanced design later. However, for absolute beginners they provide the quickest way to design simple pages. However, many web designers prefer not to use WYSIWYG editors as they tend to have a mind of their own, or rather a mind of their programmer. This can lead to difficulties when they do something you don't want.

Adobe Dreamweaver is a commercial WYSIWYG editor that also lets you manually change the code once you understand HTML. It's targeted at professional web designers who need advanced tools for site management and integration with other software products. Although Microsoft no longer sells its well-known FrontPage product, it now offers a lighter version of Visual Studio for web developers called Visual Web Developer Express. Beginners should also look at the free and open sourced WYSIWIG editor KompoZer and Quanta Plus.

Multimedia Design[edit]

Graphical Content and Multimedia

Developing quality layout and design begins with a quality user interface. Even the most basic professional web pages include some graphics. These can be acquired or created. Useful tools for graphic design include:

  • Adobe Photoshop, Illustrator and Fireworks (http://www.adobe.com/), all part of the commercial suite of Adobe software products that also includes Flash and Dreamweaver. These tools are targeted for professional designers.
  • GIMP (http://www.gimp.org/) - This is an open source tool with many advanced design features useful for graphic design.

The internet today is a multimedia filled experience. There are several applications available that enable developers to to create and publish multimeadia content on the web. These include:

  • Adobe Flash - This is is a product used to create interactive animations and other content in the Adobe Shockwave Flash formant. It is widely used to add complex effects and interactivity to websites, and quite often used to build entire websites. A small plugin needs to be installed in web browsers in order to enable them to read Flash content
  • Java Applet - Java applets are small application objects that may be embedded in web pages. These application objects are written in the Java programming language and can add a range of interactivity options to webpages. Their use has been somewhat limited in recent. Java applications and applets may be created using the Java Development Kit (JDK) Available at the Sun Microsystems website.