Lourdes College

Integrated Basic Education Department

Macasandig, Cagayan de Oro City

COMPUTER 10:
DOCUMENTATION

Team Members:

Mamawag, Victoria Rose Ann O.

Descallar, Maria Naomi Y.
Romano, Marion Deanne A.
Tagaro, Adrianiel E.

1
 Table of Contents

I. Phase 1: Problem Definition

a. Conceptualization or Concept table…………………………………3

b. Project Scope…………………………………………………………..6

c. IT project storyboard or wireframe…………………………………..7

d. Work Breakdown Structure………………………………………….11

II. Phase 2: Planning and Design

a. Role Assignment Form……………………………………………….13

b. Resource Identification and Sourcing Worksheet……………...….14

c. Web Design……………………………………………………………17

d. Budget Plan……………………………………………………………19

e. Project Schedule………………………………………………………21

III. Phase 3: Development

a. Code development……………………………………………………22

b. Website Output………………………………………………………..22

IV. Phase 4: Testing

a. Peer Reviews…………………………………………………………..24

V. Phase 5: Deployment

a. Project Narrative……………………………………………………….26

b. Project’s Sound Bite…………………………………………………...26

VI. Phase 6: Maintenance

a. Monitoring the website or status……………………………………..27

2
 Phase 1: Problem Definition

ACTIVITIES DELIVERABLE

Phase 1 (Problem Definition) *Postulation study

I. Formulation and preparation of  data

a. Objectives-

  *Organize the world’s information and make it universally

accessible and useful.

b. Scope-

      *Collects and formats the data it receives.

Phase 2 ( Planning and Design) *Project Team Construction

I. Project Team Identification *Schedule Timetable

           a. Assignment/Roles- *Design Documents (Web

Design,
 *Content Writer- Victoria Mamawag
Database Design,
*Systems/ Information Architect- Naomi Descallar
etc.)
*Graphic Artist- Marion Romano
 
*Web Developer- Adrianiel Tagaro

II. Project Requirements

a. Resources-
 Team Members
 Budget/money
 Internet Connection
 Technology ( laptop, phones etc)

III. Project Designing

3
 A. Design and features-

*Background 

*Logo

*Fonts

Phase 3 (Development) *Software examine and

assessing
I. Code Development

a. CSS 
b. HTML

         II. Unit Testing

     a.Checking for syntax errors

    b. Readable Color Schemes

c.Standard Compliance

III. Unit Combination

*Transfer data between web timesheet and external application.

Phase 4 (Testing) *Approval of Documents

I. Testing and Debugging/ Reforming * System Distribution

a. Simple Tests- Checking the links or navigation points.

b. Complex Forms- Ensure user inputs are accepted.
c. Business Workflows- Looks at testing an end-to-end
workflow business scenario

II. Revision

a. Removing unnecessary 

content from a website

b. Guiding the design and request changes.

     c. improving  functionalities

4
 Phase 5 (Deployment) *Live system Website

I. Migration- Moving data from one location to another.  *User Training

Introducing a new system or location for the data.
*User Instructions
a. Platform
b. Structure
c. Content
d. Design

        II.      Training

a. Importance of time and setting of goals and objectives.

b. To develop and update the website.
c. To know the remaining resources and needs of the
website.

III. Documentation

a. Referring to a site guide that includes all of the specific

information needed to maintain a site.
b. Specific code
c. To explain in detail, what the website is, how it works and
why it works that way.

Phase 6 (Maintenance) *Technological support

I. Debugging newly discovered  * Reports (status of the system,

Errors bugs, etc.)

a. Resolve bugs and defects

b. Prevent Incorrect operation of a website
c. Identify coding errors at various development stages

II. Monitoring the System

a. Refers to process of keeping track of all project related

metrics including team performance and task duration
b. Identify potential problems and take corrective actions
within scope and budget.
c. Used to access the quality and effectiveness of the
performance and the outcome of project implementation

5
 

OUTPUT 1: PROJECT SCOPE

Project Name: Instagram Website Project

Project objectives:

· To create an appealing and creative website for entertainment and

communication purposes.

· To achieve all tasks and to have the presentation of the website by the end
of the year.

· To present the website as an entry as the best social media website.

Website Objectives:

· To make connections with the individuals who see the world in many
exciting ways.

· To build relationship with social users or site visitors and engage

followers.

· Providing quality content and adding new information to establish trust.

· To collect data from social media conversations.

Target Project Completion Date: By the end of the year

Scope of activities:

Content Initiation and Gathering Information – gathering all the content such as the
words, the videos, the images and more that the site will possibly need.

Visual Designs – To define the structure, the model, the behavior and the views of the
system. It is also to implement images, colors, fonts and other elements.

Construction of the System – refers to the development, installation of databases,

training of the users as well as the testing of the components.

Site Migration – the affection of search engine visibility and will change the location,
structure, platform, content and the design.

6
 HTML transfiguration – to preserve the original format and to convert documents into
the HTML code.

OUTPUT 2: THE WIREFRAME

WIREFRAME HOME INSTAGRAM

CLICK TO ADD SUBTITLE

7
CLICKTO ADD TEXT

8
 WIREFRAME PROFILE INSTAGRAM

OUTPUT 2: THE WIREFRAME

. V V
CLICK TO ADD SUBTITLE

217 562 653

POST FOLLOWERS FOLLOWING

MESSAGE

CLICK TO ADD SUBTITTLE

CLICK TO ADD TEXT

9
CLICK TO ADD TEXT

10
OUTPUT 3: WORK BREAKDOWN STRUCTURE

A B C D
1 Task
2 Problem Definition
3 Assessment or Conceptualization
4 - Producing the concept paper
- Conversing or conference regarding the concept paper
5 Extensive Scope Objectives
6 -Approval and Agreement of the team members on the objectives.
7 Making the Approval of the criteria
8 - Documentations and finalization of the objectives.
9 Planning and Designing
1 Project Scope Record
0
1 - Conference and the finalization about the website scope and
1 objectives.
1 Budget Plan
2
1 - Research, discussion, and agreement on the cost needed for
3 the project.
1 Directory of IT Project Supplies
4
1 - Identification of human and material resources with the
5 distribution of the roles of each member and the discussion of
the materials needed
1 Development
6
1 Code Development
7
1 - It includes software examine and assessing.
8
1 Unit Testing and Combination
9
2 - Checking for syntax errors and readable color schemes
0
11
2 Testing
1
2 Testing and Debugging/ Reforming
2
2 - Checking the links or navigation points and ensures the user
3 inputs are accepted. It looks at testing an end-to-end workflow business
scenario
2 Revision
4
2 - Removing unnecessary content from a website Guiding the design
5 and request changes. improving functionalities
2 Deployment
6
2 Migration
7
2 - Moving data from one location to another and introducing a new
8 system or location for the data.
2 Training
9
3 - To develop and update the website and to know the remaining
0 resources and needs of the website.
3 Documentation
1
3 - Refers to a site guide that includes all of the specific
2 information needed to maintain a site and to explain in detail, what
the website is, how it works and why it works that way.
3 Maintenance
3
3 Debugging newly discovered Errors
4
3 - Resolve bugs and defects. It prevents Incorrect operations of a
5 website and Identifies coding errors at various development stages.
3 Monitoring the System
6
3 - Refers to process of keeping track of all project including team
7 performance and task duration. It is to identify potential problems and take
corrective actions within scope and budget. It is also used to access the
quality and effectiveness of the performance and the outcome of project
implementation.

12
Phase 2: Planning and Designing
ROLE ASSIGNMENT FORM

ROLE SKILLS REQUIRED ASSIGNED TO

Project Manager  Systematic Victoria Rose Mamawag

 Outstanding
leadership skills
 Best
communication
skills

Systems/Information  Having an artistic Adrianiel Tagaro

and visual skills
Architect  Creative
 Intimate with
website navigation

13
 design

Designer/Graphic  Better optical Maria Naomi Descallar

Artist communication
skills
 Outstanding
photography skills
 Creative

HTML Developer  Have deep Marion Romano

knowledge and
understanding of
HTML/CSS
 Good
memorization
skills
 Having technical
skills

RESOURCE IDENTIFICATION AND SOURCING WORKSHEET

TASK RESOURCE SOURCE

Planning and Project Manager Victoria Mamawag from

Designing groupmates.

Personal Use home computer.

Computer(Hardware)

14
 MS Word (Software) for Available in home computer.
documentation

Vistaprint (Software) for Available in home computer

project storyboard

MS Paint (Software) Available in home computer.

Alternative to Vistaprint

Web Page Design

Graphic Artist Maria Naomi Descallar from
groupmates

Personal Computer Use home computer

Adobe Photoshop (Software) Available in home computer

for design work

MS Paint (Software) Available in home computer

alternative to Adobe
Photoshop

Digital Camera(Hardware) for Borrow from Victoria’s aunt

taking photographs

HTML Developer (Resource) Marion Romano from

groupmates

15
 Pictures of Lourdes College Naomi to schedule a trip and
School( Content) take beautiful pictures.

Essay about the Lourdes Adrianiel to write an essay

College about Lourdes College

Poem about Lourdesian faith Adrianiel to write an essay

about Lourdesian Faith

100 pesos (Funding) Utilize Project Budget

Transportation cost and
allowance for visit to Lourdes
College

Deployment Web Server( Hardware) Use Fishnet Web Hosting

services if funding is available.

Web Server Alternate 1 Use school establishments to

(Hardware) host website if available.

Web Server Alternate 2 Use free Web hosting services

(Hardware) over the web(geo.school.com)

10,000 pesos (Funding) for 1 See total necessary funding

year payment for hosting in
Infocom

1,000 pesos for (Funding) for See total necessary funding

domain name registration

16
 Total Required 11,100 pesos Seek assistance from Cagayan
Funding de Oro Local Government or
sponsorship from RVM sisters.

WEB DESIGN

WIREFRAME HOME INSTAGRAM

CLICK TO ADD SUBTITLE

17
CLICKTO ADD TEXT

18
BUDGET PLAN

BUDGET FOR RESOURCE NAME BUDGET

Problem Definition

 Completion of  Printing of  Php 35.00

framework framework paper
paper  Photocopying  Php 7.00
 Interviewing expenses for all
Collogue members  Php 100.00
 Transportation
cost of going to
Lourdes College

Planning and Design

 Create Gantt

19
 Chart  Print out of Gantt  Php 40.00
 Take Chart  Php 90.00
photographs of  Film for camera  Php 40.00
school’s  Scanning photos
facilities

Development

 Home page  HTML Credentials  Php 450.00

Content- Books  Php 1,100.00
Combination  PC Rental Cost for
35 hours

Testing

 Test  Printing Test  Php 25.00

Compliance to Scripts
Statement

Deployment

 Migration  Domain name  Php 1,800.00

registration

Grand Total Php 3,687.00

20
Project Schedule

Monitoring Completion of Correction Action

21
Phase 3: Development

Possible Code development:

Possible Web Output:

22
23
Phase 4: Testing

PEER REVIEW OF THE WEBSITE 1 

It is effective and helpful for social media users

since it gives connection to the people especially
Theme 
with the advance technology at this time which is
rampant.

Project Ideas and It gives precise content information and gives

Content  entertainment to users.

It is well organized and articulate, able to express

Writing and
your thoughts and ideas clearly and effectively writing
Organization 
or speech is clear and easy to understand.

Language and The correct grammar and spelling for various

Conventions  languages is the place of activity is accessible.

Appearance and The design is simple yet useful to users. The

Presentation  wireframe is classic

It runs smoothly and free from technical problems.

Technical Performance 

Self -evaluation Shares information with peers and leader and has the
(Individual) capability to organized time and schedule. 

24
 PEER REVIEW OF THE WEBSITE 2

Our instablog focuses on providing information about

Theme  Lourdes College to give them insight into the school.

The content tells the truthful information and events about

Project Ideas and
Lourdes College. The idea also corresponds to the given
Content 
theme.

It is well planned and fluent, able to express your thoughts

Writing and and ideas clearly and effectively speech is clear and easy to
Organization  understand. The writings were well elaborated and were
organized systematically.

The correct parsing and meaning for various languages is

Language and
easy to understand and fun to read with expression. The
Conventions 
place of activity is reachable.

The design plan is simple and arranged orderly according to

Appearance and
the contents placed, and it is also valuable to users. The
Presentation 
wireframe is classic

Technical The technical concerns of the project continue to perform well

Performance  without the presence of possible defects or flaws. 

Self -evaluation
Makes appropriate decisions and sets realistic priorities.
(Individual)

25
Phase 5: Deployment

Project Narrative:

Lourdes College is our chosen community and it is a Catholic school. It has the
common goal or mission to facilitate the formation of Ignacia Marian leaders as well as
to give and share knowledge to the students as a prestigious school. The student
government is a group consist of student leaders that have good leadership skills and
values. Their mission is to serve the school wholeheartedly and the one who facilitates
student’s activities. They are also the ones who manage the behavior of the students
and are consistent of their responsibilities. Conflicts that we have possibly encountered
while project scheduling are the lack of human and other resources, the loss of
connectivity requirements such as the internet connection needed. There were delays
that occurred with our expected and predicted deadlines because of the lack of
manpower and the lack of equipment’s used with the technical errors and problems.
The lack of funds because of improper allocation of the overall budget given such as
unexpected situation especially displacement of money. The relationship and interaction
of the project team members were ideal and unitive.

Project’s sound bite:

They give out concrete references and details to come up with the desirable and
expected outputs for the project team to visualize the projects itself.

26
Phase 6: Maintenance
Monitoring Completion of Correction Action

27
28