TECHNICAL REPORT ON STUDENT INDUSTRIAL WORK EXPERIENCE

AT

LISREVEALED PUBLISHING COMPANY

OTA, OGUN STATE

BY

AKINTAN COLLINS KOREDE

N/CS/20/2909

DEPARTMENT OF COMPUTER SCIENCE

IN PARTIAL FUFILMENT TO THE AWARD OF NATIONAL DIPLOMA (ND) IN

COMPUTER SCIENCE

THE FEDERAL POLYTECHNIC ILARO, OGUN STATE

 DEDICATION

The SIWES report is dedicated to God almighty, who has given me the grace to participate In

the SIWES program, to my parents and to mentor and as many that have contributed greatly

to the success of my industrial training.

 ACKNOWLEDGEMENT

I thank God who has seen me throughout my SIWES program and give thanks to my

industrial based Supervisor Mr Adeitan Olawale who guided me throughout my industrial

training. I also want to appreciate my SIWES supervisor Mr Ojuawo, the HOD computer

science department and my SIWES coordinator. I’m grateful. Thanks, and God bless you all.
 ABSTRACT

This report is a summary of all the work experience I have been able to gather during my

SIWES training program at LISTREVEALED PUBLISHING COMPANY. The report

contains my experience in front-end development in relation to HTML, CSS and JAVA

SCRIPT as well as desktop publishing.

 TABLE OF CONTENTS

Title page

Dedication

Acknowledgement

Abstract

CHAPTER ONE

1. INTRODUCTION
2. ABOUT STUDENT INDUSTRIAL WORK EXPERIENCE SCHEME
3. AIMS AND OBJECTIVE OF SIWES
4. ROLES OF STUDENT
5. OBJECTIVE OF THE REPORT
6. THE LOG BOOK

CHAPTER TWO

1. ORGANOGRAM OF LISTREVEALED PUBLISHING COMPANY.

2. BRIEF HISTORY OF LISTREVEALED PUBLISHING COMPANY.

CHAPTER THREE

1. INTRODUCTON TO WEB DEVELOPMENT

2. INTRODUCTION TO HTML
3. INTRODUCTION TO CSS
4. INTRODUCTION TO JAVA SCRIPT
5. INTRODUCTION TO DESKTOP PUBLISHING

CHAPTER FOUR

1. KNOWLEDGE GAINED DURING THE SIWES

CHAPTER FIVE
1. CONCLUSION AND RECOMMENDATION.
 CHAPTER ONE

This chapter gives brief history of SIWES, its aims and objectives as well as a short narrative

on application and posting. It also introduces intelligent solution providers (ISP) of computer,

where I had my SIWES training.

ABOUT STUDENT INDUSTRIAL WORK EXPERIENCE SCHEME

The student work experience scheme (SIWES) is a skill training program designed to prepare

and expose students for the industrial work situation they are likely to meet after graduation.

The scheme affords students the opportunity of familiarizing and exposing themselves to

handling equipment’s and machinery. Before the establishment lacked adequate practical

knowledge and that the theoretical education in the institution of learning was not responsive

to the need of the employer of labor.

It is against this background that the industrial training fund (ITF) initiated, designed and

introduced SIWES in 1973 to acquaint students with the skills of handling industrial

equipment and machinery.

One of the key functions of the ITF to work as cooperative body with industrial and

commerce where students in institutions of higher learning can undertake mid-career work

experience attachment in industrial which are compatible with student’s area of study. The

students industrial work exercise scheme for industrial work situation which they are likely to

meet after graduation.

1. BRIEF HISTORY OF SIWES

The word SIWES (student industrial work experience scheme) was introduced by the federal

government in the year 1973 to develop the technological, physical and social skill of our

nation.
Through this, adequate and intelligent students are providing the department involved the

actual challenge various discipline before they can be awarded as National Diploma (ND)

graduate.

2. AIMS AND OBJECTIVE OF SIWES

 Provide an avenue for students in institutions of higher learning to acquire industrial skills

and experience in their approved course of study and also by interacting with people with

more experience in the field under consideration.

 Expose students with an opportunity to apply their knowledge in real world situation

thereby reducing the gap between theoretical knowledge and practical work.

 Enlist and strengthen employers’ involvement in the entire educational process and

prepare students for employment in industry and commerce.

3. ROLES OF STUDENT

 Attend SIWES orientation program before going on attachment

 Comply with the establishment’s rules and regulations

 Arrange living accommodation during the period of attachment

 Record all training activities and other assignment in the log book

 Complete SPEI from ITF. FORM 8 and get it endorsed by the employer for submission to

the ITF

4. OBJECTIVES OF THE REPORT

The objectives of the SIWES report are:

 To make through explanation of the work done during my four-month industrial training

 To fulfil the requirement for national diploma in computer science

 To contribute to the body of knowledge and enhance the understanding of the writer

about a similar or same job

5. THE LOGBOOK

The logbook issued to students on attachment by institution was used to report all daily

activities that took place during the period of attachment and it was checked and endured by

the industry base/ institution base supervisor and ITF during supervision
 CHAPTER TWO

1. ORGANOGRAM OF LISTREVEALED PUBLISHING COMPANY.

CEO

MANAGER

INSTRUCTORS

HEAD OF
HEAD OF SOFTWARE
RECEPTONIST DEVELOPMENT
DEPARTMENT
DEPARTMENT

INTERNS

2. BRIEF HISTORY OF BRIEF HISTORY OF 4COLORPRINTS COMPUTER

TECHNOLOGIES.

LISTREVEALED PUBLISHING COMPANY is a private owned organization, established in

the year 2012. It is owned by MR ADEITAN OLAWALE.

It is a non-governmental organization in Ogun state. They operate ICT situated in Ota along

Honda Road.

Science academic for training and skill acquisition in web development and software

development.
 CHAPTER THREE

1. INTRODUCTION TO WEB DEVELOPMENT

Web development is the building and maintenance of websites; it’s the work that happens

behind the scenes to make a website look great, work fast and perform well with a seamless

user experience.

Web developers, or ‘devs’, do this by using a variety of coding languages. The languages

they use depends on the types of tasks they are preforming and the platforms on which they

are working.

Web development skills are in high demand worldwide and well paid too – making

development a great career option. It is one of the easiest accessible higher paid fields as you

do not need a traditional university degree to become qualified.

The field of web development is generally broken down into front-end (the user-facing side)

and back-end (the server side). Let’s delve into the details.

PROGRAMING LANGUAGES

The following languages are the basic tools involved in web development;

 HTML (Hypertext Markup Language)

 CSS (Cascadian Style Sheets)

 JavaScript

TYPES OF WEB DEVELOPMENT

 Front-end development

 Back-end development

 Full-stack development
FRONT-END DEVELOPMENT

Front-end web development, also known as client-side development is the practice of

producing HTML, CSS and JavaScript for a website or Web Application so that a user can

see and interact with them directly. The challenge associated with front end development is

that the tools and techniques used to create the front end of a website change constantly and

so the developer needs to constantly be aware of how the field is developing.

The objective of designing a site is to ensure that when the users open up the site, they see the

information in a format that is easy to read and relevant. This is further complicated by the

fact that users now use a large variety of devices with varying screen sizes and resolutions

thus forcing the designer to take into consideration these aspects when designing the site.

They need to ensure that their site comes up correctly in different browsers (cross-browser),

different operating systems (cross-platform) and different devices (cross-device), which

requires careful planning on the side of the developer.

BACK-END DEVELOPMENT

Backend development is that area of web development that focuses on how a website or web

application works. It is what happens behind the scenes, the same way that a restaurant’s chef

and his/her staff handle all orders without the customers sitting at their tables seeing them.

Instead of cooking food, though, backend developers write codes that enable web browsers to

communicate with databases and servers.

The primary role of a backend developer is to ensure that end-users get the data or services

they requested without a glitch and on time. As such, backend development requires a

comprehensive set of programming skills and knowledge.

FULL-STACK DEVELOPMENT

A Full Stack Developer is a relatively new role which brings together the skills and roles for

what were traditionally known as web designer and web developer. Web designer worked on

the design of the site, and the web developer worked on the code. As the web has grown more

and more complex, and customers are seeking more complex solutions for their on-line

presence, the two roles have become more specialized and technical. Further in some cases,

the two roles and skills have become inter-linked, resulting in the position of Full Stack

Developer.

3. INTRODUCTION TO HTML

Hypertext markup language (HTML) is a programming language that communicates

instructions to the web browser. It instructs the web browser on exactly how the web page

should display to the viewer.

HTML PAGE STUCTURE

 The <!DOCTYPE html> declaration defines that this document is an HTML5 document

 The <html> element is the root element of an HTML page

 The <head> element contains meta information about the HTML page

 The <title> element specifies a title for the HTML page (which is shown in the browser's

title bar or in the page's tab)

 The <body> element defines the document's body, and is a container for all the visible

contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

 The <h1> element defines a large heading

 The <p> element defines a paragraph

HTML HEAD TAGS

The <head> element is a container for metadata (data about data) and is placed between

the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta

information.

HTML BODY TAGS

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as headings,

paragraphs, images, hyperlinks, tables, lists, etc.

Note: There can only be one <body> element in an HTML document.

HTML LINE BREAKS

The <br> HTML element produces a line break in text (carriage-return). It is useful for

writing a poem or an address, where the division of lines is significant.

HTML NON-BRAKING SPACE

&nbsp is used to create space between a line of text

HTML HEADING TAGS

<h1> </h1>

<h2> </h2>

<h3> </h3>
<h4> </h4>

<h5> </h5>

<h6> </h6>

HTML TEXT FORMATING

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text

 <i> - Italic text

 <em> - Emphasized text

 <mark> - Marked text

 <small> - Smaller text

 <del> - Deleted text

 <ins> - Inserted text

 <sub> - Subscript text

 <sup> - Superscript text

HTML IMAGE INSERTION

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages.

The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image

HTML TABLES

A table in HTML consists of table cells inside rows and columns

Example

A simple HTML table:

<table>

  <tr>

    <th>Company</th>

    <th>Contact</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Alfreds Futterkiste</td>

    <td>Maria Anders</td>

    <td>Germany</td>

  </tr>

  <tr>

    <td>Centro comercial Moctezuma</td>

    <td>Francisco Chang</td>

    <td>Mexico</td>
  </tr>

</table>

HTML FORMS

An HTML form is used to collect user input. The user input is most often sent to a server for

processing.

Example

Top of Form

First name:

Last name:

Submit

INTRODUCTION TO CSS

CSS is the language we use to style an HTML document. CSS describes how HTML

elements should be displayed.

CSS is the language we use to style a Web page.

________________________________________

What is CSS?

CSS stands for Cascading Style Sheets

CSS describes how HTML elements are to be displayed on screen, paper, or in other media

CSS saves a lot of work. It can control the layout of multiple web pages all at once

External stylesheets are stored in CSS files

CSS RULES

A CSS rule is a grouping of one or more CSS properties which are to be applied to one or

more target HTML elements.

A CSS rule consists of a CSS selector and a set of CSS properties. The CSS selector

determines what HTML elements to target with the CSS rule. The CSS properties specifies

what to style of the targeted HTML elements.

Here is a CSS rule example:

div {

border : 1px solid black;

font-size : 18px;

This example creates a CSS rule that targets all div elements, and the set the CSS properties

border and font-size for the targeted elements.

The CSS selector part a CSS rule is the part before the first {. In the example above it is the

div part of the CSS rule. The CSS properties are listed inside the { ... } block.

CSS rules have to be specified inside either a style element or inside an external CSS file.

CSS COLOR

The <color> CSS data type represents a color. A <color> may also include an alpha-channel

transparency value, indicating how the color should composite with its background.

A <color> can be defined in any of the following ways:

Using a keyword (such as blue or transparent). All existing keywords specify a color in the

sRGB color space

Using the RGB cubic-coordinate system (via the #-hexadecimal or the rgb () and rgba ()

functional notations). These always specify a color in the sRGB color space

Using the HSL cylindrical-coordinate system (via the hsl () and hsla () functional notations).

These always specify a color in the sRGB color space

Using the HWB cylindrical-coordinate system (via the hwb () functional notation). These

always specify a color in the sRGB color space

Using the LCH cylindrical coordinate system, via the lch () functional notation. This can

specify any visible color.

Using the Lab coordinate system, via the lab () functional notation. This can specify any

visible color.

Using the color () functional notation, to specify a color in a variety of predefined or custom

color spaces.
CSS IDs

CSS ID is similar to classes. They are defined as the stylesheet and referenced in HTML

documents.

The primary difference is that once an ID has been used in an HTML element, it cannot be

used again with the same HTML file. IDs are generally used for layout elements that will

only be needed once. A great place to use IDs is for defining CSS rules for Divs. Divs are

considered layout elements because they contain content such as graphics, text and media that

makes up the web page.

CSS MARGIN

Margins allow us to add spacing around the parameter of an element; a margin can be added

to any side or a combination of sides. To apply the margin, we need to add the margin

definition to our Div. ID. To add a margin, we simply type in margin and the amount of the

margin.

CSS PADDING

Padding creates spacing between the parameters of an HTML element and the content within

it. Similar to margins, padding can be added around all four sides of an element or only

specified sides.

CSS TEXT PROPERTIES

CSS allows many different text formatting options

 Color style decoration: it changes the color of the text it is applied to

 Letter spacing: this allows us to adjust the amount of spacing between each character

in a word, sentence or block of text.

 Word spacing: this allows us to adjust the spacing between words rather than letters.
  Text-align: this allows us to add a text decoration of underline, overline, line-through.

 Text-transform: this allows us to change text to capitalized letter, lowercase or

uppercase.

CSS TEXT FONT PROPERTIES

 Font-family: this allows us to change the font face of the text

 Font-size: this allows us to change the size of the font.

 Font-style: this allows us to make the text italic, oblique or normal.

 Line-height: allows us to change the spacing between each line of text in a paragraph.

CSS BORDERS

 Border: this decoration border is used to specify where the border will be applied and

the thickness.

The thickness is stated in pixels.

 Border (default all round)

 Border-top

 Border-bottom

 Border-left

 Border-right

We can use these values. If we just use the border without defining the value, the border will

be applied to all four sides.

 Border color: this will be the color of the border itself, the color value can be

represented by a color name such as red, green or blue, hexadecimal number e.g #333

or RGB value rgb(255,0,0).

 Border style: We can use border style decoration. There are:

 o Dashed

o Dotted

o Double

o Groove

o Hidden

o None

o Rigid

CSS BACKGROUND

CSS background color decoration allows us to set a background color to an element. The

value can be a color name, or hexadecimal number or an RGB code. We can also use an

image as a background. To do this, we need to use the background image decoration. To use

a background image, we need to indicate the path e.g. background-image: url (photo.jpg).

3.3 INTRODUCTION TO JAVASCRIPT

What is JavaScript

A high-level definition

JavaScript is a scripting or programming language that allows you to implement complex

features on web pages — every time a web page does more than just sit there and display

static information for you to look at — displaying timely content updates, interactive maps,

animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is

probably involved. It is the third layer of the layer cake of standard web technologies, two of

which (HTML and CSS) we have covered in much more detail in other parts of the Learning

Area.
The core client-side JavaScript language consists of some common programming features

that allow you to do things like:

Store useful values inside variables. In the above example for instance, we ask for a new

name to be entered then store that name in a variable called name.

Operations on pieces of text (known as "strings" in programming). In the above example we

take the string "Player 1: " and join it to the name variable to create the complete text label,

e.g. "Player 1: Chris".

Running code in response to certain events occurring on a web page. We used a click event in

our example above to detect when the label is clicked and then run the code that updates the

text label.

And much more!

What is even more exciting however is the functionality built on top of the client-side

JavaScript language. So-called Application Programming Interfaces (APIs) provide you with

extra superpowers to use in your JavaScript code.

APIs are ready-made sets of code building blocks that allow a developer to implement

programs that would otherwise be hard or impossible to implement. They do the same thing

for programming that ready-made furniture kits do for home building — it is much easier to

take ready-cut panels and screw them together to make a bookshelf than it is to work out the

design yourself, go and find the correct wood, cut all the panels to the right size and shape,

find the correct-sized screws, and then put them together to make a bookshelf.

They generally fall into two categories.

Browser APIs are built into your web browser, and are able to expose data from the

surrounding computer environment, or do useful complex things. For example:

The DOM (Document Object Model) API allows you to manipulate HTML and CSS,

creating, removing and changing HTML, dynamically applying new styles to your page, etc.

Every time you see a popup window appear on a page, or some new content displayed (as we

saw above in our simple demo) for example, that's the DOM in action.

The Geolocation API retrieves geographical information. This is how Google Maps is able to

find your location and plot it on a map.

The Canvas and WebGL APIs allow you to create animated 2D and 3D graphics. People are

doing some amazing things using these web technologies — see Chrome Experiments and

webglsamples.

Audio and Video APIs like HTMLMediaElement and WebRTC allow you to do really

interesting things with multimedia, such as play audio and video right in a web page, or grab

video from your web camera and display it on someone else's computer (try our simple

Snapshot demo to get the idea).

What is JavaScript doing on your page?

Here we'll actually start looking at some code, and while doing so, explore what actually

happens when you run some JavaScript in your page.

Let's briefly recap the story of what happens when you load a web page in a browser (first

talked about in our How CSS works article). When you load a web page in your browser, you

are running your code (the HTML, CSS, and JavaScript) inside an execution environment

(the browser tab). This is like a factory that takes in raw materials (the code) and outputs a

product (the web page).

A very common use of JavaScript is to dynamically modify HTML and CSS to update a user

interface, via the Document Object Model API (as mentioned above). Note that the code in
your web documents is generally loaded and executed in the order it appears on the page.

Errors may occur if JavaScript is loaded and run before the HTML and CSS that it is intended

to modify. You will learn ways around this later in the article, in the Script loading strategies

section.

JavaScript running order

When the browser encounters a block of JavaScript, it generally runs it in order, from top to

bottom. This means that you need to be careful what order you put things in. For example,

let's return to the block of JavaScript we saw in our first example:

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {

const name = prompt('Enter a new name');

para.textContent = `Player 1: ${name}`;

Copy to Clipboard

Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so

that when the paragraph is clicked, the updateName() code block (lines 5–8) is run. The

updateName() code block (these types of reusable code blocks are called "functions") asks

the user for a new name, and then inserts that name into the paragraph to update the display.
If you swapped the order of the first two lines of code, it would no longer work — instead,

you'd get an error returned in the browser developer console — TypeError: para is undefined.

This means that the para object does not exist yet, so we can't add an event listener to it.

JavaScript is a lightweight interpreted programming language. The web browser receives the

JavaScript code in its original text form and runs the script from that. From a technical

standpoint, most modern JavaScript interpreters actually use a technique called just-in-time

compiling to improve performance; the JavaScript source code gets compiled into a faster,

binary format while the script is being used, so that it can be run as quickly as possible.

However, JavaScript is still considered an interpreted language, since the compilation is

handled at run time, rather than ahead of time.

There are advantages to both types of language, but we won't discuss them right now.

Server-side versus client-side code

You might also hear the terms server-side and client-side code, especially in the context of

web development. Client-side code is code that is run on the user's computer — when a web

page is viewed, the page's client-side code is downloaded, then run and displayed by the

browser. In this module we are explicitly talking about client-side JavaScript.

Server-side code on the other hand is run on the server, then its results are downloaded and

displayed in the browser. Examples of popular server-side web languages include PHP,

Python, Ruby, ASP.NET and... JavaScript! JavaScript can also be used as a server-side

language, for example in the popular Node.js environment — you can find out more about

server-side JavaScript in our Dynamic Websites – Server-side programming topic.

Dynamic versus static code

The word dynamic is used to describe both client-side JavaScript, and server-side languages

— it refers to the ability to update the display of a web page/app to show different things in

different circumstances, generating new content as required. Server-side code dynamically

generates new content on the server, e.g. pulling data from a database, whereas client-side

JavaScript dynamically generates new content inside the browser on the client, e.g. creating a

new HTML table, filling it with data requested from the server, then displaying the table in a

web page shown to the user. The meaning is slightly different in the two contexts, but related,

and both approaches (server-side and client-side) usually work together.

A web page with no dynamically updating content is referred to as static — it just shows the

same content all the time.

INTRODUCTION TO DESKTOP PUBLISHING

Definition of desktop publishing: the production of printed matter by means of a desktop

computer having a layout program that integrates text and graphics.

Desktop publishing (DTP) is the creation of documents using page layout software on a

personal ("desktop") computer. It was first used almost exclusively for print publications, but

now it also assists in the creation of various forms of online content.[1] Desktop publishing

software can generate layouts and produce typographic-quality text and images comparable

to traditional typography and printing. Desktop publishing is also the main reference for

digital typography. This technology allows individuals, businesses, and other organizations to

self-publish a wide variety of content, from menus to magazines to books, without the

expense of commercial printing.[2]

Desktop publishing often requires the use of a personal computer and WYSIWYG page

layout software to create documents for either large-scale publishing or small-scale local

multifunction peripheral output and distribution – although a non-WYSIWYG system such as

LaTeX could also be used for the creation of highly structured and technically demanding

documents as well. Desktop publishing methods provide more control over design, layout,

and typography than word processing. However, word processing software has evolved to

include most, if not all, capabilities previously available only with professional printing or

desktop publishing.[3]

The same DTP skills and software used for common paper and book publishing are

sometimes used to create graphics for point of sale displays, presentations, infographics,

brochures, business cards, promotional items, trade show exhibits, retail package designs and

outdoor signs.
 CHAPTER FOUR

4.0 KNOWLEDGE GAINED DURING THE SIWES

The student industrial work experience scheme (SIWES) exercise has contributed greatly in

my academic career, I have gained experience which is useful to my field of study.

The first advantage acquired during my industrial training was that I was web development. I

was exposed to the programming languages needed to build a basic web application such as

HTML, CSS and JavaScript.

Finally, my understanding about web development has been enlightened. This experience

training has given me the opportunity to gain first experience of my profession.

 CHAPTER FIVE

CONCLUSION AND RECOMMENDATION

5.0 CONCLUSION

The SIWES program is expected to be undergone by all students of applied science in all

tertiary institutions in Nigeria.

I therefore deeply appreciate the industrial training of my institution, Federal polytechnic

Ilaro for involving themselves is this enlightening program. The importance of this program

cannot be over emphasized as there are numerous benefits to this program.

5.1 RECOMMENDATION

I would like to use this medium to implore the federal government at all stages to take this

SIWES program with utmost importance as it serves as virtual improvement in the future

development of this country.

Government should also ensure to introduce more productive training programs to the

secondary and tertiary institutions all across Nigeria.

The federal government should also make adequate provision in the annual budget for proper

funding od SIWES in view of the potential of the scheme to contribute to enhancing the

quality of the stream of technical skill available in the country.

A comprehensive and detail directory of employer who accepts student is needed for the

facilitation of future placement of students in the industry.

In order to guarantee quality assurance of institution and the ITF, ITF should ensure that the

backlog in payment of students allowance is cleared urgently to remove the negative image

being created for the SIWES program.