Overview of this Lesson

This lesson gives you an overview of web development. We will learn the web development process and life cycle and then discuss the difference between the Internet and the World Wide Web. You'll learn how the Internet and WWW works and how web pages are magically served up to you in your web browser. We'll also explore the basic technologies you will need to learn to develop web sites and web applications.

An Overview of Web Technologies

When we talk about web technologies, we're referring to the languages and frameworks you can use to develop web applications. There are a few very basic technologies that are common across most applications, and these are also the foundation of other tools and frameworks. Let's take a look.

These three technologies are the foundations of more complex tools and frameworks you can use to develop web applications. For example, JavaScript is the base for Node.js, JQuery, Angular, React, and Vue.js.

If you're also interested in server-side development using databases and you might also want to learn PHP. There are several other options, but PHP is the easist to get setup and it allows you to have easy access to free database servers such as MySQL.

I have several tutorials on web development that will help you learn each of these technologies. I suggest that you complete them in the following order:

  1. HTML
  2. CSS
  3. JavaScript
  4. PHP

Web Development Process

Many people think of web development as just sitting down and coding in HTML, CSS, and JavaScript or using frameworks to create a web page. In fact, the actual coding part of web development is one small part of several stages of the development process. For example, a developer needs a clear definition of the site's purpose or goal and who the site's intended audience is. A developer also needs to take time to plan out the pages in the site or application and define how they're linked together, as well as plan out the structure of each page or part of the application and determine and what kind of styling (colour, fonts, etc) the pages will have.

There are many ways to define the Web Development Life Cycle: if you perform an Internet search for such information, you'll find 6 stages, 8 stages, 4 stages - lots of different ways of laying out the same information. Regardless of of how many stages a person is using to develop a web site, all the tasks and processes are the same. I've laid it out for you in 6 stages, but other resources with 6 stages might combine "Launch" and "Testing" into one stage and split "Planning" up into "Visual Planning" and "Content Creation". It doesn't matter. It's more important to become familiar with all of the tasks that need to be taken and the order in which they should be performed.

Stages of the Web Development Life Cycle

  1. Definition
  2. Planning
  3. Development
  4. Testing
  5. Launch
  6. Maintenance

1. Definition

The definition stage is the first and most important stage of the web development life cycle. If you skip this stage, your web site won't meet the client's goals and won't reach the target audience. In that case, the client has wasted their money and your time for a web site that doesn't do what they want.

The definition stage involves collecting and recording information about the client and the proposed web site. Why does the client want the web site? What is it for, what is the purpose and the end goal of the site? What content appears on the site and where does that content come from? You need to find out this information by talking to the client and the site's/application's potential (or existing) users, looking at any existing material (documents, an old web site or old application, catalog, files) currently being used.

Your information gathering should answer all of the following questions:

Once you have these questions answered, you should have a clear idea of what the site is for, who the site is for, and what kind of content it will have. You would typically summarize all of your information into a report and hand it in to your client. Your client will review the report and ensure all the information is complete and correct. If any changes, additions, or omissions need to be made, they will tell you and you can update the report. The updated report is then handed in to the client for another review, and the process is repeated until the client agrees with everything in the report.

With you have a complete report, you can then move on to planning out the web site.

2. Planning

The planning stage shouldn't be skipped: completing this stage in full prevents mistakes and omissions during the coding phase. It also speeds up the coding process because much of the detail work can be laid out during the planning stage. The output of this stage must also be approved by the client before you're allowed to proceeed to the next stage.

Typically, the planning stage involves 3 smaller steps:

  1. Project Scope: this involves planning out the tasks that need to be performed, in what order, and how long each task should take.
    • If you're on a team, who's doing which tasks? Who's in charge of content, who's in charge of coding the HTML/CSS/JavaScript/etc, who's in charge of setting up the database?
    • In what order should the tasks be completed? Often a task can't be performed until another task is finished. For example, you can't start coding the CSS for the site until you've determined the colours, fonts, and layouts for each page.
    • Timelines: plan out each task that needs to be done and how long each one should take so you can be completed by your deadline. This usually involves a tool such as a Gantt Chart.
    • Even if you're a team of one, you still need to determine the tasks to be perfored and how long each task should take. Clients won't recommend you to other clients if you're disorganized or late with your deliverables.
  2. Content: create/obtain any content the site needs. This includes text, pictures, images, links, etc. Develop content to aid with accessibility such as captions for videos, text/audio for image descriptions, etc. Some of this might also be done during the Development phase.
  3. Visual Planning: designing the site map and the wireframes for each page in the site and determine the colour scheme or themes to be used.
    • Site Map: a hierarchical diagram that shows each page in the site and how it connects to other pages in the site. You can use lots of tools to create a site map, such as Microsoft Visio, or a free web-based tool like Cacoo.
    • Wireframe: a diagram that shows the layout and structure of a page. Wireframes don't contain actual content, but they might contain annotations that indicate colour or font. Most tools that allow you to create site maps also have the ability to create wireframes.
    • Styling: decide on the colour scheme to use for the site. This usually involves a minimum of 3 colours: a main colour, an accent colour, and a highlight colour. Ideally, you'll want darker/ligher shades of these three colours, also. The colours may be determined by a company logo or the client's personal preference, but you should also keep up with current colour trends: every year there is a new set of popular colours! Decide on which fonts to use and make plans for accessibility (e.g. a screen-reader-friendly version of the application). Determine the client's branding preference for the application (size and location of logo, for example), and determine how images will be displayed (thumbnail, with borders, etc). Ensure that all pages on the site have a consistent appearance.

Site Map Example

Here is an example of a site map for one of my old course web sites at the college where I teach.

Example of a site map

Wireframe Example

Here is an example of a wireframe for one of the pages on my old course web site.

Example of a wireframe

Once you have all of the site maps, wireframes, content, and styling decisions finished, you can start coding!

3. Development

This is the coding part of the process. This is what everyone imagines when they find out your a web developer - they picture you sitting at a computer for hours typing out code. In fact, this is only a small part of the web development process!

Development involves writing the source code that makes up the site's content and functionality. In this course, we'll be focusing on HTML and CSS, but in semester 2 you'll focus on JavaScript and PHP to create more functional and interactive web applications.

Typically, web pages will include code written in:

There are also many technologies and frameworks based on the items above. For example, Bootstrap is a framework you can use to add CSS to your application and Node.js is a JavaScript technology that allows you to perform server-side operations using JavaScript code.

The development phase also might include some content creation. For example, if your web site's content is driven by a database, you will spend some time in the development phase creating the database and populating it with the data that will appear on the web site.

4. Testing

Testing the site involves publishing the site to a small audience. This generally includes the client and a small selection of the target audience. These people are called "test users". Test users try out the site and look for errors, omissions, functionality that doesn't work, spelling/grammar mistakes, and other problems.

Testing is also done in multiple browsers and on multiple devices to ensure the site appears and functions properly with different software, on different computers, and with different devices and screen sizes. This also includes testing your application with accessibility software and uesrs that use accessible software and devices. For example, you'll want to make sure your page is screen-reader friendly and that any elements are accessible with both the mouse and keyboard.

Testing is a very formal process. I've been involved in testing several web sites and web-based applications and they have always involved filling out detailed forms about any problems encountered, along with screen shots. Often the development team contacts test users for more information or to follow up on fixed issues, so being able to communicate well with users by phone, email, or in person is very important.

Once all of the testing has been completed and all issues have been fixed, it's time to launch the web site.

5. Launch

Launching your site involves publishing the content on the Internet (uploading all of the application's files to a web server). If the client doesn't have a web server, you need to provide one for them. They might wish to have their own dedicated web server or use one of several hosting sites available (for a fee).

Once the web site is live, it's important to get feedback from users. You did this during testing, but it's possible that the test users missed something, or perhaps a different user finds an issue with the live site that wasn't an issue on the test site. Get feedback from the users in the early stage of the launch phase and make any necesssary changes.

6. Maintenance

Once you've developed a web site, it's not out of your hair forever. There will always be ongoing maintenance: users will always want some new feature, and more issues may be discovered. Web content is always changing as time passes: you may have to update text or images on the site as things change. And of course, you can always improve things: users might discover a feature is cumbersome and you'll have to make it more efficient, or perhaps a new technology allows you to do something in a better way.

Always ensure that any site you develop has a way for a user to provide feedback to the client. The client will inform you when they need to you fix, add, or improve something based on user feedback. In the meantime, you can move on to a new project. :)

Exercise

You've likely found these tutorials because you're interested in building your own web site or web application, or you're taking a college or university course in web development. You've probably already got at least one idea in mind for a web site or application you'd like to create. Think about that application, and go through the first two phases of the web development process by filling in the answers below:

  1. Project Definition
    1. Why does this web site/application exist, what is its purpose? Write at least 2 ability statements.
    2. What are the goals this web site/application needs to achieve? Write at least 2.
    3. Who is the intended user/audience for this site/application?
    4. How does this site/application support the goal of the client?
    5. What kinds of content will the site/application contain and where will that content come from?
    6. What kinds of interactivity will the site/application have?
  2. Planning
    • Outline all the tasks that need to be performed and in what order. If you're comfortable, sketch out the timelines for each task.
    • Sketch out a rough site map for your site/application.
    • Choose at least one page in your application and design the wireframe for that page. Think about the theme and colour scheme you might use.

Understanding the Web and the Internet

Many people mistakenly believe that the World Wide Web (aka "the Web") and the Internet are the same thing. In fact, they're not! The web is actually only a small part of the Internet. The Internet is a global network of computers that share information. The web is a part of that network that allows people to share information using hypertext (web pages and applications are made of hypertext, which are the pages that contain links you can click on).

Watch these two videos, as they define define this difference more clearly:

It is also important to understand how the Internet works. This next set of videos do this really well!

After watching those videos, you should have a clear understanding of the Internet and the Web. Test yourself by making sure you know the answers to the following questions in your own words:

  1. Currently, what are the two most popular browsers being used? Do you think this means you should only design your web pages/applications to target the functionality/features of those two browsers?
  2. How does a page get loaded into your browser when you click a link/bookmark?
  3. What is bandwidth? How does it affect the loading of web pages and their files?
  4. What is the World Wide Web Consortium, what do they do?
  5. The word "Internet" is the shortened form of what word? What does that word mean?
  6. Why did Tim Berners-Lee develop a webbed system of hypertext?
  7. What is ARPANET? Why was it originally developed?
  8. Who controls the Internet?
  9. What is a packet? How does a packet get from one place to another? What happens if you want to send a very large file?
  10. What does a router do?
  11. What does TCP stand for? What does TCP do?
  12. What does HTTP stand for? What is HTTP?
  13. What does HTML stand for? What is HTML?
  14. What might a GET REQUEST be fore? What might a POST REQUEST be for?
  15. What is SSL and TLS? How do you know these are working?

Suggested Solutions

  1. Currently, what are the two most popular browsers being used? Do you think this means you should only design your web pages/applications to target the functionality/features of those two browsers? No, you should target all browsers, because you don't want to ignore any users.
  2. How does a page get loaded into your browser when you click a link/bookmark?
  3. What is bandwidth? How does it affect the loading of web pages and their files?
  4. What is the World Wide Web Consortium, what do they do?
  5. The word "Internet" is the shortened form of what word? What does that word mean?
  6. Why did Tim Berners-Lee develop a webbed system of hypertext?
  7. What is ARPANET? Why was it originally developed?
  8. Who controls the Internet?
  9. What is a packet? How does a packet get from one place to another? What happens if you want to send a very large file?
  10. What does a router do?
  11. What does TCP stand for? What does TCP do?
  12. What does HTTP stand for? What is HTTP?
  13. What does HTML stand for? What is HTML?
  14. What might a GET REQUEST be fore? What might a POST REQUEST be for?
  15. What is SSL and TLS? How do you know these are working?