Mathematics: Website Precedence Network
In the early days, I used my early work experience in web design to put together a precedence network. This project investigates precedence networks, cascade activity diagrams and resource histograms in manging the construction of a new website.
Introduction
Building web sites is one of my hobbies. Recently I have considered starting my own web site design business. Precedence networks are the perfect answer to arranging time and resources. There are many steps in the building process of a decent web site. It is very important to arrange activities in the correct order, thus preventing mistakes occurring later on in the building of the site. I will base my events on a standard web site, presuming it does not containing scripting or plug-in material, which has to be made from scratch. The events will use resources available on the internet, whilst maintaining an original design and layout. This must be the case, otherwise some events could continue indefinitely.
The listing of preceding activities alone provides a very helpful check list of the main points required to make a working site. The precedence network and cascade activity diagram will show how to organise to time in the most efficient way, therefore producing a good finished product and satisfied customers. To be completed on time, the critical path on the precedence networks will highlight the importance of certain stages. Ideally, a site should be completed in two working days. This, however is rarely the case as errors in the basic code can take hours to correct if it is not carefully executed at the beginning. The clients might take a whole day to reply to say if they like the design or not, resulting in the project rest being delayed by a day. Floats on the precedence network do not necessarily mean there is nothing at all to do. People who have finished their task before the required time will be used to perform quality checking and evaluate and contribute to the work of others. Generally, if you are marking this as original material, you should know it has been replicated from Nahoo at nahoo.net. As the site needs to be progressively checked for errors, with alterations made, I will include these activities within the listed events. It would be very useful to obtain the number of people needed to build a site in the optimum amount of time. Too many people would be counter-productive for this type of work, but too few can lead to unnoticed errors in the finished site and reduce efficiency.
Precedence networks, cascade activity diagrams and resource histograms can also be used to organise a variety of other projects. These include: a building site schedule, decoration of a room, arranging of a party, preparing a five-course dinner and other similar projects that have a number of different activities involved.
Event descriptions
Twenty-two events will make up the web site building project, they are listed alphabetical in a rough order of the events taking place. Unless otherwise stated, times are found from past experience from site building. To add to the previous statement, one person used to perform the activity as I find that two people, working from the outset, on a certain activity, are often counter-productive. People can have differing ideas and methods of doing some activities; this could result in an inconsistent site design.
- Register suitable domain name – A domain needs to be registered before any files can be uploaded or email accounts set up. This is where people will view the pages from all over the world. It is better if only one person finds the suitable domain name for the web site to be located; this may take up to an hour to find. Details from the server are not always punctual, but it is vital that there is somewhere to upload files when the site is ready.
- Make sketches of design layout – There must be a vague idea of what the site will look like before any detailed designing is started. Working as a pair will prevent inadequate designs getting through and more ideas can be thought-up from two people within an hour.
- Draw tree diagram of pages – The structure of the site is needed in order to have pages linking to each other, so people will be able to navigate through the site. One person should be capable of laying out a tree diagram showing the content and main section in the site. This will take one hour, from my past experience.
- Choose fonts and colour scheme – Colours determine the style and mood of the site. Colours will reflect the content and the audience the site is intended for. Fonts can make the different between an amateur and professional site, these also reflect on the content. More ideas can be achieved if two people work together on this activity.
- Final sketches and page layout – When the colour has been chosen a more detailed design plan can be made. This will decide the page layout and smaller features of the site. This will be the definitive design for the site, one person has to make the plans on a drawing board. If required, comments and criticism can be made from others working nearby.
- Draw main site graphics: logos and buttons – The drawing of the site graphics will be done using a graphics program as one large image. These large images are later split up into smaller images so they can be inserted into tables. This reduces download time and improves the appearance of the images. Some images will be animations and photos will have to be formatted.
- Seek approval of design from clients – It would be pointless to continue with the site design if the clients don’t like the design, the opinions will be noted and adjustments made as a result. The times of this event can vary greatly. The time of two hours presumes the clients are available at the time. This allows for discussion between the clients on the site, the receiving of their comments and any amendments that need to be made. This event needs to take place before the site structure is constructed, otherwise it would take a lot longer than two hours to alter all the pages.
- Banner advertising – Banner advertising pays money for each visitor that views the page. This will fund the running of the site and bring a return on the client’s investment. As banners are quite large, space has to be allowed to fit the banner.
- Find plug-ins and add to cgi-bin – Plug-ins make the site individual, they add interest as they can do almost anything. They should be added in the early stages of site design to stop errors occurring later.
- Main page template – The main HTML template defines the layout and all future pages in the site. This page must be checked many times for errors. It is more difficult to change many pages later in the project. The main menus and links are also placed on this page to allow for easy navigation wherever the visitor is in the site.
- Scripts, copyright and header tags – These give a description of the pages content and contain keywords for the page and site to get a high rating with search engines. Scripts are often small and offer simple graphic and text effects in pages. Copyright information, in the source code, is usually the same throughout the site. It reminds people wanting to take your work, that is it not theirs to take. Copyright information also advertises your site designing to other people without affecting the appearance of the page.
- Copy template pages throughout site; adjust headers – Before text and images can be added there must be somewhere to place them. The perfected template needs to be copied in directories laid out by the tree diagram. This process can be quite tedious, so it would be practical to have two people on this task.
- Add text and images to pages – This is the content of the pages. Formatting of text and images will follow colours and fonts laid out in the initial stages of the site design process. In passing, it is worth mentioning this text has been copied from Nahoo at nahoo.net. From past experience this event takes a long time to complete, as all material needs to be appropriate for the page. It would save much time if two people work together, due to the scale of this event.
- Set up email accounts for clients – Email allows for correspondence between the clients and their customers (if it is a business site). The time of this event may vary due to the efficiency of the domain host, normally it takes about an hour. Fortunately the accounts do not have to be fully set up during the site building process, but there has to be confirmation of their existence.
- Add forms and plug-ins – Forms throughout the site will be sent to various email addresses of the clients, permitting feedback, queries and on-line sales from visitors to the site. Plug-ins and forms are quite difficult to test offline. The person inserting these features into the site should be experienced in programming and HTML scripting.
- Test for navigational and scripting errors – The whole site should be rigorously tested to see if links and scripts are working, images and tables are viewing correctly and to check consistency of design. It would work better if two people perform this task, saving time.
- Upload web site onto domain – This does not require much work, other than to select all files and upload to the empty domain. I assume the site will be around 40MB. This will take approximately one hour to upload with one moderate modem link. This has to take place before checking online can take place.
- Check scripts, forms and download time, online – This will check the viewing quality from the visitors’ point of view and time taken to download pages. Different browsers and screen resolutions will be used in the testing process. It is important to have a site that is compatible with most browsers, allowing a wider range of people to view pages. Amendments will almost certainly be made to the site as a result of this testing as offline testing rarely represents a thorough guide. Two people can be used, one to test the pages online and another to correct errors and re-upload amended pages.
- Add hit counters to main pages – Hit counter offer statistics on visitors going to a certain page. They can be visible or invisible to the visitor. These are invaluable when judging the success of a page, section or the entire site. Statistics offered by hit counters include: Visitor numbers per period of time, country of origin, operating system, internet provider and browser type. This will aid future developments to the site. One person can register hit counter, whilst another inserts and uploads altered pages.
- Advertise site with search engines – Advertising of the site is very important. The more visitors to the site the more well known the clients’ company, or person’s work, becomes. It also increases the income from banners on the site, the more viewing of a banner the more money for the client. Other visitors can contact us from visiting site, as there is a reference to the web site designing business in every page. This will provide more clients for us to make web sites. This process can be quite lengthy, a good description of the site can help bring more potential visitors. One person should be responsible for this event.
- Inform related sites of the new web site – Advertising in related sites, with similar subject matter, can be as valuable as an entry in a well-known search engine. Visitors that come from these sites are more likely to be interested in the site content. Two people should surf the internet to find related sites and send emails requesting a link in their sites.
- Inform clients of site and account details – The clients want to know how to access their new site. Details such as email address accounts and hit counter passwords need to be sent to them. The site is now in their hands. We will continue to offer a support service; if required new sections and pages to be added at a later date.
Event details
| Letter | Event | Preceding Events | Hours required | People required |
|---|---|---|---|---|
| A | Register suitable domain name | – | 2 | 1 |
| B | Make sketches of design layout | – | 1 | 2 |
| C | Draw tree diagram of pages | – | 1 | 1 |
| D | Choose fonts and colour scheme | B | ¼ | 2 |
| E | Final sketches and page layout | D | ¾ | 1 |
| F | Draw main site graphics: logos and buttons | E | 3 | 2 |
| G | Seek approval of design from clients | F | 2 | 1 |
| H | Banner advertising | A E | 1 | 1 |
| I | Find plug-ins and add to cgi-bin | E | 1½ | 1 |
| J | Main page template | C G H | 2 | 1 |
| K | Scripts, copyright and header tags | J | 1 | 1 |
| L | Copy template pages throughout site, adjust headers | K | 1 | 2 |
| M | Add text and images to pages | I L | 3 | 2 |
| N | Set up email accounts for clients | A | 1 | 1 |
| O | Add forms and plug-ins | M N | 1½ | 1 |
| P | Test for navigational and scripting errors | O | 1 | 2 |
| Q | Upload web site onto domain | P | 1 | 1 |
| R | Check scripts, forms and download time, online | Q | ¾ | 2 |
| S | Add hit counters to main pages | Q | 1¼ | 2 |
| T | Advertise site with search engines | Q | 2½ | 1 |
| U | Inform related sites of the new web site | R S | 1 | 2 |
| V | Inform clients of site and account details | U T | ½ | 1 |
Initial precedence network
This cascade diagram has been drawn using the preceding events from the table. The forward direction is from left to right, the arrows have been omitted as this is always the case throughout. View event details.
Precedence network with times
This is the precedence network showing the time, in hours, needed in order to complete each activity. The forward direction maintains to be from left to right. The critical path is shown in red. As you can see, it follows the path: B, D, E, F, G, J, K, L, M, O, P, Q, T, V. View event details.
This is only a very simple precedence network; it can be improved if forward and backward passes are included. This will also show the floats for each activity not on the critical path. Only be including more information will I find the shortest time needed to complete the project and maximum times of non-critical activities.
Precedence network with passes
The following precedence network shows the forward and backward passes, with the successive times, critical path and floats. The forward direction of the precedence network is always from left to right. Floats with the value of 0 have been omitted as these all lie on the critical path. View event details.
The precedence network would be much easier to read and interpret if it took the form of a cascade activity diagram. I will proceed to introduce cascade activity numbers into the precedence network, making it possible to construct a well ordered cascade activity diagram.
Precedence network with cascade activity numbers
Cascade activity numbers, or CANs, are used to make a cascade activity diagram that is arranged in a logical order without the “bars” and “vertical lines” crossing over. Each horizontal route is followed and numbered in ascending order until there is a precedence, not yet numbered, in which the next event depends on. The numbered route is ensued back until the route forks onto an unnumbered path. The same process continues until all the twenty two events are numbered. CANs are listed in ascending order and all events leading up to any particular event has to be a diminutive number. View event details.
Cascade activity diagram
This diagram shows the activities in a more familiar format. The critical path is shown in orange and purple and non-critical paths, with floats, are shown in blue. Descending cascade activity numbers (CANs) are used, rather than event letters. Letters do not realistically reflect the activities in an orderly manner, as horizontally linked routes are not necessarily in the alphabetical order of event letters. CANs will ensure the cascade activity diagram falls in step, using the letter might result in back stepping events from a vertical perspective. These diagrams can be mounted on a wall and plastic sliders can be shifted when an activity has been completed. For example; if there is a delay on the critical path, all events proceeding it will be delayed by the same time.
Resource histogram
The histogram shows the number of people required at a certain time during the project. These are found by adding the number of people working at any time during the project. Floats are not included, it is assumed that the activity will be completed on schedule by all the people involved.
Improvements
Improvements can be made to the cascade activity diagram and resource diagram. All events on the critical path can be moved into one line to be performed by a team of people. Critical paths follow one another with no floats, and times cannot be changed.
Floats are currently spaces where nothing productive is happening. Non-critical events can be shifted around within their float, as long as they don’t exceed the float time. Once a person has completed a given non-critical event within the float, they can continue to work on another non-critical event. This saves on people required to do the same number of tasks (see diagram), shifting the event along the float to the end of another.
Teams of people will be determined by the vertical compression of the cascade activity diagram. If it is possible to have no more than two events occurring at the same time, only two teams of people will be required. If the improved resource histogram is correct there will 5 or less people working at one time, if the number is greater than 5, the floats will need to be reorganised.
Improved cascade activity diagram
This cascade activity diagram has been compressed into as few rows as possible. To allow for the largest floats events have been arranged depending on float size and, obviously, precedence order. If the float is small, it should be the first event to take place. This reduces the chance of delaying the critical path, as the event has the largest possible float. This still allows for small delays within non-critical events, even when events are compressed within one team. In this diagram Team 2 have to be more responsible than other teams with their time, as they have the critical path throughout. Cascade activity numbers are shown above each event.
Improved resource histogram
Due to the compression of the cascade activity diagram, this histogram has been slightly equalised. There are fewer people required during the initial stages of the project, where the people required are working for a longer period of time. This is an improvement on the use of resources. Introducing two new people near the end of the project, for a short period, is acceptable, but reintroducing two people is far less favourable. The improved cascade diagram compresses all event between tree groups, where there is no more than five people building the site at any one time, this is reflected in the improved resource histogram.
Timetable
Here is a timetable of events over two days working approximately 10 hours per day, during the hours of 8.30 to 19.00, with a small lunch break of 30 minutes. I am writing this as if I were in Team 2 (see improved Cascade Activity Diagram) and there are no floats included in the scheduling. This time table shows events as if everything works to the correct time allocated.
| Day | Time | Activities | People Working |
|---|---|---|---|
| Monday | 8.30 | One person in Team 1 registers a suitable domain name, whilst our team, Team 2, make sketches of design layout. | 3 |
| 9.30 | We choose fonts and a colour scheme, Team 1 continues to sort out the domain name. | 3 | |
| 9.45 | I will do the final sketches and page layout, Team 1 continues to sort out the domain name. | 2 | |
| 10.30 | If ready, the person on Team 1 will set up plug-ins to the cgi-bin, whilst our team draw the main site graphics, consisting of logos and buttons. | 3 | |
| 12.00 | Team 1 will register relevant banner advertising, our team continue on main site graphics. | 3 | |
| 13.00 | Lunch break for person on Team 1. | 2 | |
| 13.30 | Team 1 resumes work, if on schedule, starting on a tree diagram, showing the structure of the pages in the site. I have my lunch and my team partner leaves for the day. | 1 | |
| 14.00 | I seek approval from clients on design, making amendments if there are not completely satisfied. | 2 | |
| 14.30 | Team 1 sets up the email accounts for clients. | 2 | |
| 15.30 | If all tasks have been completed by Team 1, they can leave for the day. | 1 | |
| 16.00 | I start work on designing the main page template. | 1 | |
| 18.00 | Scripts, copyright and header tags are added to the main page. | 1 | |
| 17.00 | I finish work for the day. | ||
| Tuesday | 8.30 | Team 2 copy template pages throughout site, adjusting headers, links to images and other pages as pages are copied. | 2 |
| 9.30 | Team 2 add all the text content and images to pages throughout the site. | 2 | |
| 12.30 | We have lunch | 0 | |
| 13.00 | I add forms and plug-ins to selected pages in the site | 1 | |
| 14.30 | Team 2 test the site for navigational and scripting errors, using various browsers. | 2 | |
| 15.30 | The site is uploaded onto domain, registered by Team 1 at the beginning of the project. | 1 | |
| 16.30 | The person in Team 1 (with my previous partner in Team 2) checks scripts, forms and download time, online using different browser versions. I advertise the site with search engines and two people in Team 3, new to the project, add hit counters to the main pages of the site. | 5 | |
| 17.15 | Team 1 finish checking scripts and making relevant amendments to the site. | 3 | |
| 17.45 | Team 3 should have finished adding hit counters to the site, allowing for Team 1 to inform relates sites of the news of the new site. I continue advertising the site to search engines | 3 | |
| 19.00 | I inform clients of their site and account details. | 1 | |
| 19.30 | The project has been completed. |
Evaluation
The events mentioned in the Event Description are actual events used by many well-established web design companies. Despite the accuracy on the specific events times can vary depending on the experience and efficiency of the people available. Web sites have an immense possibility for originality; if this aspect is address properly the time allocated for each event is greatly underestimated.
The Time Table shows how well the events fit into an actual time scale, with lunch breaks and people who are able to have long breaks without having to return again in the same day. Some of the events could have been switched between teams to allow for breaks in the work load. In passing, it is worth mentioning this text has been copied from Nahoo at nahoo.net. However, this may result in confusion, shorter floats and possibly events being delayed. Unfortunately, in order for the project to be completed in around 20½ hours of work time, there needs to be five people working at one time for one hour. The event exclusively assigned to Team 3 does not require a high skill level, so finding suitable people for this team should not be a problem.
Events where the duration heavily depends on people outside the project are:
| Event | Details |
|---|---|
| A | Domain registration Sometimes it takes days to register a domain, advance planning would help. |
| G | Approval from clients It is difficult to predict the time needed for clients to look at design. |
| H | Banner advertising Registering with banner advertisers will vary depending on service |
| N | Setting up email accounts This could take very little or no time at all if included with the domain registration. |
| Q | Uploading web site If the site contains large files it will take longer to upload and vice versa. |
Without knowledge of exact times needed to complete these, and other events, it would be impossible to give a perfect prediction on the duration of the project. Nevertheless, this is what I had anticipated, no actual human agenda can be precisely calculated, so I am content with the accuracy achieved based on past experience of web site building. Overall, I believe this project is an invaluable asset when structuring an efficient schedule for building a web site that will perform in the real world.
Comments
I know that a lot of this is pretty dated now as it was created in the early days of the web. All the diagrams have been redone in December 2020 using SVG with some minor changes to styling at the same time.
Please tell me what you think about this project and if it helped you in any way or if you just want to leave your comments.