Basic Information Technology

TOPIC Web Development

Group MembersEhtasham SarwarNajam ShamSyed Ibrar HussainSaqib Saleem Atiq-ur-rehman

Definition : Web development is a broad term for the work involve in developing a web site for the internet (World Wide Web) or an intranet (a private network).

Steps of web developmentInformation Gathering

PlanningDesign

DevelopmentTesting

Maintenance

Information Gathering : The process of collecting information about something  The first step in developing a successful web

site is to gather information. Many things need to be taken into consideration when we design the look and feel of your site, so we first ask a lot of questions to help us understand your business and your needs in a web site.Certain things to consider are :

Purpose :What is the purpose of the site? Do you want to provide information, promote a

service, sell a product.. ?

GoalsWhat do you hope to accomplish by building

this web site? Two of the more common goals are either to make money or share

information.

Target AudienceIs there a specific group of people that will help you reach your goals? It is helpful to

picture the “ideal” person you want to visit your web site. Consider their age, sex or

interests-this will help us determine the best design style for your site.

Content Are they looking for specific information,

a particular product or service..

Planning

Using the information gathered from phase one , we put

together a plan for your website .

The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.

Requirements analysis This includes client goals, target audience,

detailed feature requests and as much relevant information as you can possibly gather. Even if

the client has carefully planned his or her website, don’t be afraid to offer useful

suggestions from your experience. Project charter

The project charter (or equivalent document) sums up the information that has been gathered

and agreed upon in the previous point. These documents are typically concise and not overly

technical, and they serve as a reference throughout the project.

Site mapA site map guides end users who are lost in the structure or need to find a piece of information

quickly. Rather than simply listing pages, including links and a hierarchy of page

organization is good practice.Contracts that define roles, copyright and

financial pointsThis is a crucial element of the documentation

and should include payment terms, project closure clauses, termination clauses, copyright ownership and timelines. Be careful to cover

yourself with this document, but be concise and efficient.

Gain access to servers and build folder structure

Typical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and

any languages or frameworks currently installed.Determine required software and resources

(stock photography, fonts, etc.)Beyond determining any third-party media needs,

identify where you may need to hire sub-contractors and any additional software you may

personally require. Add all of these to the project’s budget, charging the client where necessary.

DesignThe design stage typically involves moving

the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape, but for the absence of the content and special features.

Wireframe and design elements planningThis is where the visual layout of the website

begins to take shape. Using information gathered from the client in the planning phase, begin designing the layout using a wireframe.

Pencil and paper are surprisingly helpful during this phase, although many tools are

online to aid as well.Mock-ups based on requirements analysis

Designing mock-ups in Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes you for slicing and coding when the time later on.

Review and approval cycleA cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both client and contractor are satisfied with the design. This is the easiest time to make

changes, not after the design has been coded.Slice and code valid XHTML/CSS

It’s coding time. Slice the final Photoshop mock-up, and write the HTML and CSS code

for the basic design. Interactive elements and jQuery come later: for now, just get the

visuals together on screen, and be sure to validate all of the code before moving on.

DevelopmentDevelopment involves the bulk of the

programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape. Take a strategic approach, and avoid future hassles by constantly testing as you go.

Build development frameworkThis is when unique requirements might force

you to diverge from the process. If you’re using Ruby on Rails, an ASP/PHP framework or a

content management system, now is the time to implement it and get the basic engine up and

running. Doing this early ensures that the server can handle the installation and set-up smoothly.

Code templates for each page typeA website usually has several pages (e.g. home,

general content, blog post, form) that can be based on templates. Creating your own

templates for this purpose is good practice.

Develop and test special features and interactivity.

Here’s where the fancy elements come into play. I like to take care of this before adding the static

content because the website now provides a relatively clean and uncluttered workspace.

Some developers like to get forms and validation up and running at this stage as well.

Fill with content.Time for the boring part: loading all of the

content provided by the client or writer. Although mundane, don’t misstep here, because even the simplest of pages demand tight typography and

careful attention to detail.

Testing At this point, we attend to the final details

and test your web site. We test things such as the complete functionality of forms of other scripts, we test for last minute compatibility issue, ensuring that the site is optimized to be viewed properly in the most recent browser version.This marks the official launch of your site, as it is now viewable to thepublic.

MaintenanceThe development of your web site is note

necessarily over, though. One way to bring repeat visitors to your site is to offer new content or products on regular basis. If this interests you, we will be more than happy to continue working together with you to update the information on your web site. We offer maintenance packages at reduced rates, based on how often you anticipate making changes or additions to your site.