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.
Activity/Demonstration
Many new developers get confused over the difference
between HTML and CSS. Try the following activity to help
you understand a bit better:
Write down all the things that are different
between each of the three examples. (What changes?)
Now try the "No CSS" button. What things are no longer
visible in the page? What has changed?
After doing the demonstration, you should have noticed
the following changes between the 3 different stylesheets,
and the "No CSS" example:
The location of the main navigation buttons/links
changes (sometimes it's under the header, sometimes
it's on the left or right side).
The colours and borders of the main navigation buttons,
including whether or not they change colour when the
mouse hovers over them.
The background colour of the page.
The font style used in the page.
The colours and border styles of the header and
footer.
The colouring and border appearance of the "Sidebar".
The position of the sidebar: sometimes it's on the
side of the page, sometimes it's between paragraphs.
In the list of links inside the "Basic Example" article,
sometimes the list items have bullets and sometimes
they don't. When they have bullets, sometimes the bullets
are dots and sometimes a different symbol.
Sometimes the list items have lines between them (these
are bottom borders). Sometimes the list and list
items have background colouring.
In the third example, the main article has a shadow
behind it.
The headings change fonts, colours, and whether or
not they have decorations like underlines.
Sometimes some links have the standard underline
and sometimes they don't.
The amount of spacing (margins and inner padding) varies
on the different parts of the page, between items,
between items and their containers, within items,
between an item's text and its inner borders.
The size of some elements' text changes.
You might have spotted other things. In summary, CSS
can alter the following things:
Fonts (font families)
Colours of elements and text.
Text formatting: bold/italics, decorations, etc.
Borders: line style, thickness, colours, rounded
corners, etc.
Layout and positioning of items on the page.
Lists: bullet style, symbol, colour, and other formatting.
The amount of margin space around an item and also the
amount of padding space inside an item between its contents
and its own inner borders.
The size of items and the size of text.
You can even do advanced things like changing how items
appear when the mouse hovers over them or when they
have the focus.
HTML is responsible for defining:
The structure of the page. For example, each page has the same
header and the same footer. Each page has the list of links, each
page has the sidebar.
The actual content (text) in the page: each page has the exact
same text content (except where I changed the name of the example,
which I actually changed using JavaScript, but that's a diffent
course entirely).
HTML (Hypertext Markup Language) is used to code the structure
and content of a page or document.
The page/document structure is defined using
HTML elements, such as the
main body of the page, the header and footer, the
navigation menu, sidebars, paragraphs and sections,
and even this list of items you're reading now
(it's called an "unordered list").
The text content is also part of the HTML
code. All the words you are reading on this page that
are not part of an image are part of the HTML code of this page.
Some HTML elements can read files or other media,
such as an element that embeds an image into a document,
or an element that embeds a YouTube video
into a page.
CSS (Cascading Stylesheets) is used to code the style of
a document, such as the colour scheme, layout, borders,
fonts, etc.
Styles include hundreds of characteristics or
properties that define the various colours for different
groups of items, the way links should appear, the
layout of the page and the spacing between elements on
the page, how items should be formatted (for example,
does an item have a border and what style of border, what
colour of border?)
If you examine this bulleted list you're reading now,
you'll notice that the outer-most list doesn't have actual
bullets for each item. Instead, I wrote the CSS so that the items
have a vertical line down the left side. Why? I don't know, it
looked interesting and trendy at the time.
We generally like to keep the page styling separate from the
HTML code that defines the stucture and content of the page so
that it's easier to modify. If I decided to change the appearance
of my bullets in the list, I only have to edit the one CSS file
to change their appearance, rather than editing the 100+ pages
that contain a bulleted list!
JavaScript (no relation to Java) is a programming
or scripting language used to make a page interactive and/or provide some
kind of functional component (which may or may not be
obvious to the user).
JavaScript is used to create interactivity, such
as that found with some web-based games or drag-and-drop
photo albums.
JavaScript also adds functionality, such as
validation of form input fields (e.g. making sure
a user chooses a valid username or enters a quantity
that's more than 0).
JavaScript can even enhance the style of a page, such
as changing the colour or layout of items when the
user interacts with parts of the page/document (e.g.
when they click an image, you could put a border around
the image and add a box shadow, or you could enlarge
the image). For example, if you look the lesson index
menu (click the icon with the 3 horizontal lines at the top-left)
you'll notice the current page is highlighted. That was done
with JavaScript.
JavaScript can add and remove elements and structure
components on a page. For example, the lesson index
menu is created with JavaScript:
the menu items come from a separate file, and a JavaScript function reads
the file and creates that menu. I have the same menu on every page of these
tutorials, so if I decide to add a new page or change the name of a page,
I only have to edit the one file that contains all the menu items! The
JavaScript will always read whatever is in that menu file, so I don't have
to update every single tutorial lesson page whenever I want to add a new
page.
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 a server-side
language. There are several options to choose from including
PHP, Python, Ruby, and Node.js (server-side JavaScript).
I have several tutorials on web development that will help you
learn some of these technologies. I suggest that you complete
them in the following order:
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
Definition
Planning
Development
Testing
Launch
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:
Why does the application need to exist? What is its purpose? These
should be worded as "ability" statments. Examples:
The ability to showcase and sell Client's custom crochet
patterns to the community of chrocheters.
The ability
to showcase the items Client has made from their own custom crochet
patterns, and to allow those who have purchased Client's patterns to
show off their own work.
The ability to allow other crocheters to create accounts
so they can make purchases, upload their own photos, and rate
the patterns Client has created.
The ability for Client's customers to share and request assistance
and tips for completing patterns, as well as new ideas and alternate
stitches, colourways, and yarns.
What are the goals this site should achieve (there should
be at lest 2)? Examples:
The goal of this site is to allow
other yarn crafters to purchase Client's patterns so Client
can make a profit.
The goal of this site is to increase purchases and profits by
allowing users to rate the patterns they've purchased and
share pictures of the items they make from Client's patterns.
The goal of this site is to build a close-knit community
where crafters can feel comfortable sharing ideas and helping
each other.
Who does this site serve, who is the intended audience? Example:
This site is for members of the crochet community that are
interested in new and unique crochet patterns. Such users tend to
be 45-75 years of age
with a median income of $40,000 - $75,000 per year.
How does the web site support the goal of the client?
How does the site help the client with their business, how
does it provide value to the client? Examples:
This site provides Client with the
ability to sell crochet patterns and keep track of transactions
and customer contact information. The application allows the Client
to receive feedback on the patterns, and then use that feedback
to improve their patterns and therefore build a better reputation for
providing high quality, unique patterns. The site
will provide value-added for the client's customers who
can see the results and ratings of the patterns before purchasing,
view and ask for help and tips for completing patterns, and share
ideas, all of which will help with building a community and encourage
more purchases.
What kinds of content will the site contain and where will
it come from? Will it be static and/or dynamic? Example:
The site will contain photos and text descriptions of
available patterns. The writeups will be provided
by the Client and edited by our team members. Photos
can be provided by the Client and we have the option
of sending our photographer out to get photos if
needed.
Patterns are stored as PDF files in a secure area:
patterns can only be accessed after they have been
purchased. Pattern meta-data will be stored in a
database.
The site will contain ratings, reviews, tips, assisstance
and other information from Client's cusomters. customers
will also provide photos of their own creations.
What kinds of interactivity will the site contain? Example:
Users will be able to create accounts.
Users will be able to purchase and download patterns
in PDF format and also add ratings, comments, and post questions
about specific patterns in a blog-comment style.
Client will have a back-end where they can upload and manage
patterns and pattern meta-data, manage transactions and accounts,
and moderate customer-added content.
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:
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.
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.
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:
HTML - Hypertext Markup Language, which defines the structure
and content of the page.
CSS - Cascading Stylesheets, which defines the thematic
elements (such as fonts, colours, borders, etc.) and layout
of the page.
JavaScript - a scripting language that allows you to create
dynamic and interacitve elements in your web application.
PHP, Perl, or other server-side scripting language, which
allows you to create dynamic and interactive applications using
data that comes from the server, such as a database.
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:
Project Definition
Why does this web site/application exist, what is
its purpose? Write at least 2 ability statements.
What are the goals this web site/application needs to achieve?
Write at least 2.
Who is the intended user/audience for this site/application?
How does this site/application support the goal of the client?
What kinds of content will the site/application contain and where will
that content come from?
What kinds of interactivity will the site/application have?
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:
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:
Currently, what are the 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?
How does a page get loaded into your browser when you
click a link/bookmark?
What is bandwidth? How does it affect the loading of
web pages and their files?
What is the World Wide Web Consortium, what do they do?
The word "Internet" is the shortened form of what word?
What does that word mean?
Why did Tim Berners-Lee develop a webbed system of hypertext?
What is ARPANET? Why was it originally developed?
Who controls the Internet?
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?
What does a router do?
What does TCP stand for? What does TCP do?
What does HTTP stand for? What is HTTP?
What does HTML stand for? What is HTML?
What might a GET REQUEST be for? What might a
POST REQUEST be for?
What is SSL and TLS? How do you know these are working?
Suggested Solutions
Currently, what are the 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?
Currently, popular browsers include
Chrome, Firefox, Edge, Safari, and Opera. No, you should target all
browsers, because you don't want to ignore any users.
Not only to many users not use one of the "big four" but
there are also users that use assistive devices (such as screen
readers or specialized web-enabled devices) that might have
different support for various features.
How does a page get loaded into your browser when you
click a link/bookmark?
The browser creates a
request object for the url/file and sends that request to the server.
The server receives the request, locates the requested file, and
sends a response object back to the client. The response contains
a 200 OK status code and the html/text for the requested file/page.
The browser receives the response and renders the html/text from
the response body.
If there is a problem finding or retrieving the page, then the
server sends back a response with an appropriate status code (e.g.
401 UNAUTHORIZED, 403 FORBIDDEN, 404 NOT FOUND, etc.
What is bandwidth? How does it affect the loading of
web pages and their files?
Bandwidth is the
maximum amount of data (usually measured in megabits)
the network is able to transmit per second. It's not how fast
the data travels, it's how much data can travel per second.
For example, if a network's bandwidth is 50Mbps (megabits per second),
then the network is capable of transmitting a 400MB (megabyte) file
in just over a minute (400MB is 3200Mb, so on a 50Mbps network
that's 3200Mb/50Mbps = 64s: that would take about 64 seconds).
If your page has a lot of media and images,
it's going to require more bandwidth to transmit on the user's
network because media files are much larger than plain html/text.
What is the World Wide Web Consortium, what do they do?
World Wide Web Consortium, also referred to as
W3C is an organization
that maintains standards and guidelines for web technologies and
web accessibility intiatives. For example, they maintain the standards
for how we code with certain technologies such as CSS and they
also maintain various guidelines and standards for creating
accessible web content.
The word "Internet" is the shortened form of what word?
What does that word mean?
Most believe that Internet = Interconnected Network or
"Internetwork". It's made up of the latin prefix "inter" (between, among)
and "net" (the short form of "network"). So it could also be
translated as "among a bunch of networks". All of these are accurate,
though: the internet is a large collection of networks (of all
different sizes) connected together. The internet is a network
of networks!
Why did Tim Berners-Lee develop a webbed system of
hypertext?
He wanted to create a way for scientists around the
world to share information with each other. Before hypertext,
data/documents were stored hierarchically on the Internet
(just like your computer's file system),
which was cumbersome because you had to go down several
levels to find the document you wanted. If a document made reference
to a second document, you had to go back up some or all of
the levels and travel a different path to the referenced document.
Berners-Lee created a hypertext system that allowed you to
easly jump to a specific document by clicking its link: instead
of browsing through a hierarchical directory structure, you could
just click the link to the referenced document and it would be
retrieved for viewing. This created a "web" of document
storage and references.
What is ARPANET? Why was it originally developed?
ARPAnet = Advanced Research Project Agency Network; it
was a US Department of Defence project that was developed during
the Cold War. The US wanted to develop a way to send messages from
one point to another, but if the communications lines were
destroyed in a conflict, an important message would not arrive
at its destination. ARPAnet involved breaking a message up
into "packets" and then sending each packet on several
different routes to its destination. A route might consist
of several stops at various nodes. At the destination, the
packets would then be reassembled. The benefit was that
if part of the network was destroyed, packets taking
alternate routes would still arrive at the destination, plus
any destruction would not delete the entire message, only
a packet or part of the message.
Who controls the Internet?
No one! Individual networks have owners/operators that
can make decisions about their own network but there is a
common goal to keep the networks connected and promote sharing
of information.
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?
A packet is a part of a message that is being transmitted.
A packet is routed from its source to its destination, passing
through various nodes or routers on the way. The packet's route
is not static or pre-determined, it will be routed on its path
based on what paths are available, which are the fastest or
least conjested with other internet traffic, etc. If you send a large
file, the file is broken up into several packets and each packet
likely takes a different route. The packets
are reassembled into the file once they all reach the destination.
What does a router do?
A router receives a packet, checks the packet's destination,
and then chooses a route to send the packet on to the next router
on a path to its destination. A single path a packet takes from
source to destination will involve passing through several
routers.
What does TCP stand for? What does TCP do?
TCP = Transfer Control Protocol. TCP is the set of rules
and policies that are followed when a message or file is
received at its destination. When a series of
packets for a message/file are received at their destination,
TCP takes inventory of the packets and makes sure all have arrived,
and then it reassembles them into the original message/file.
If TCP finds any packets missing, they are requested again
from the sender. TCP ensures they all eventually arrive so
it can reassemble the message/file.
What does HTTP stand for? What is HTTP?
HTTP = Hypertext Transfer Protocol; this is the set
of rules and policies that computers follow when sending
and receiving hypertext messages to each other over the
internet. For example, HTTP defines how a browser requests
a specific file or page, and it defines how a server
should respond when it finds the file, can't find the file,
sees that the person requesting isn't allowed to access
the file, etc.
What does HTML stand for? What is HTML?
HTML = Hypertext Markup Language. This is the technology
developers use to create hypertext documents. A hypertext
document consists of the document structure (e.g a header, a
footer, a navigation menu, etc) and the actual content that
fills in that structure (text, paragraphs, the location
of image files or other media files). NOTE that the video
is a bit older so it talks about formatting tags (e.g. it
mentions <font> and <bold> but this is no longer the
case: all formatting, layout, colours, etc is now done
with CSS).
What might a GET REQUEST be for? What might a
POST REQUEST be for?
GET requests are used to request documents/pages/files
from the server. POST requests are used to send information,
such as your login credentials or the values you might fill into
a form when requesting help with an issue.
What is SSL and TLS? How do you know these are working?
SSL = Secure Sockets Layer; TLS = Transport Layer Security.
TLS is a newer technology, but it doesn't matter which one is being
used for a particular connection. SSL/TLS adds a layer of security
to HTTP, and this is referred to as "Secure HTTP" or HTTPS.
You can tell when you're using HTTPS by looking at the address bar
in your browser: there's usually a lock icon or shield icon, or
something similar. NOTE that when the video was first made, HTTPS
was starting to become standard. Today, almost all of your requests
and responses are transmitted over HTTPS.
