Web Development and Design

7:07:00 PM |

Web developers and designers create the websites that makeup the Internet. These series of articles are meant to introduce web development and provide resources but not replace the benefits of taking a course through one of your local education centres.
The previous page is an example of what can happen to a website if to proper steps are not followed?
At a very basic level the Internet is one computer connected to another computer through a phone line, cable or wireless signal; communicating with each other. Add to this the ability to connect to any other computer and communicate with it in fractions of a second and you have the Internet in a nutshell. The terms 'net' or 'web' are a way of visualizing this interconnectedness.

Basic Concepts

When working on a website there are a couple of key concepts that need to be understood.
The local computer is the one you work on to develop your website. The remote computer or server is the one that contains website and serves up the web pages to your visitors. For security reasons servers require you to log on before you can work on them.
Always consider the file on the server to be the original copy as this is the one that visitors will see. If you need to make changes to a existing web page retrieve a copy of the original from the website first. If more than one person is updating the website this will avoid overwriting someone else's changes. This also allows you to test the new page(s) before publishing it to the website.
Hypertext Markup Language or HTML is the language that is at the core of all document on the Internet. It was created by Tim Berners-Lee. The language has evolved to work with the larger XML language. Extensible Hypertext Markup Language (XHTML) allows developers to build websites that take advantage of this broader language. An HTML or XHTML document is a text document with instructions for browsers on how to display the web page (Note: HTML and XHTML are used interchangeably through these documents). Hyperlinks tie all the documents together to integrating the website and connecting it to the rest of the "Net".

Protocols

Around the mid 90's with the introduction of HTML and graphic capable browsers the Internet has taken off as a major communication tool accessible to vast numbers of people. As there is no one organization that owns the Internet there are a number of protocols that have been established to make this communication work. These protocols are overseen by the World Wide Web Consortium or the W3C.org. As of January 2000 the W3C recommends that HTML documents should comply to XHTML 1.0 standards. Visit www.w3c.org for more information on this and many more Internet protocols and standards.
The protocol that connects the computers together and directs the transfer of information has stabilized on Transmission Control Protocol/Internet Protocol (TCP/IP). Error correction is built into this protocol so you can be fairly confident that visitors are seeing the website as it was meant to be viewed.
The three main graphic media formats are Graphic Interchange Format (.GIF), Joint Photographic Experts Group (.JPG) and Portable Network Graphic (.PNG).
There are many sound media format though MPEG 1 Audio Layer 3 (..MP3) and Window Audio (.WAV) are currently the most popular. Musical Instrument Digital Interface (.MID) format is a way of storing complete songs in relatively small files though not as popular with the advent of high speed internet connections.
The standards around video and animation media are less straight forward.
Streaming technology allows content providers to send information such as audio and video media in a controlled stream rather than as a complete file. There are number of companies that provide software to create and play multimedia including; Abode Flash, AOL Real Audio, Microsoft Media Player and Apple Quicktime.
Simple animations can be created using the GIF format. The Moving Picture Expert Group (.MPEG) format is also a video/audio format.
A player is required to play multimedia format. Most browsers have plugins that can be downloaded for free.
Separating Layout and Design
HTML is used to layout the document using the tag structure and styles are used to create the design. For example use tags to define a paragraph but use a style to indent and change the colour of the text in the paragraph.

Role of the Webmaster

The Webmasters role is to oversee the entire website whether they are maintaining the entire site themselves or the site is being maintained by various other people. Their role is to keep the site consistent with company or organizational policy, ensure that the site is working properly (i.e. links work, graphics display etc...) and answer questions that are generated from the website. In smaller organizations most often the Webmaster is also the Web Developer. Even if the Webmaster isn't involved in the day to day site maintenance the person taking on this role must have a good understanding of HTML.

Role of the Web Developer

The Web Developer's role is to layout, markup and develop the web content. Their strengths are a strong understanding of HTML and a grounding in web server technology. Though a developer will often use a HTML editor or publisher, the core language of the Internet is HTML and that design tool is simply interpreting the hypertext markup language for the developer. If the developer doesn't understand HTML they will, very quickly, find themselves in a crisis.
Another skill that is not always required but good to have is an understanding of a programming or scripting language. Developers usually use cascading style sheets (CSS) to create complex site-wide formatting of documents and to create dynamic HTML documents. Adding and modifying JavaScript is also a common required task. Many sites also incorporate programs based on a variety of different languages such as Perl, PHP, ASP, etc. Many website use databases for various functions including updating information, displaying user specific data, submitting queries and tracking transactions as well as many other functions. Knowledge of a range of Simple Query Language (SQL) languages may also be necesssary.
Role of the Web Designer
A design's skills are geared to graphicals design and visual content. Their job is to create the visual imagery for the site. A background in graphic design and a sense of style are required skills. A designer must also understand HTML and CSS to be able to use these languages when formatting a document.

HTML and/or Publishers

As mentioned it is important that the designer have a strong basis in HTML. That being said much of the design work done today is created in a web design software application. Web design software has improved over the years to become a useful and even a required tool of a designer.
There are many commercial programs available. Microsoft's Frontpage and Macromedia's Dreamweaver are two examples.
Mozilla Composer is a free yet versitile web page editor. It takes a bit of practice to understand the quirks of the software but it is a very useful tool.
As well as commercial products there are many shareware software packages that range from HTML text editors to complete GUI applications.
Regardless of the development tools that you use you will find that you are constantly referring back to your favorite text editor. Microsoft's Wordpad or Apple's TextEdit (SimpleText) are free options but a good text editor is worth the cost. Which ever application you use be sure to save all HTML documents as a text file.