PESHAWAR ELECTRIC SUPPLY COMPANY
Phone # (091 9212230 Fax # (091) 9212024
INTERNSHIP CERTIFICATE
IT IS CERTIFIED THAT MR. MUHAMMAD UMAID S/O KHALID
HASHMI, TRAINEE BS (CS) (COMPUTER SIENCE), IQRA NATIONAL
UNIVERSITY PESHAWAR, REG # 091-4136 HAS SUCCESSFILLY
COMPLETED TWO MONTHS INTERNSHIP WITH THIS DIRECTORATE.
_____________________
ADDL; DG (IT) PESCO
PESHAWAR ELECTRIC SUPPLY COMPANY
TABLE OF CONTENT.
1.1 Introduction 1
1.2 History PESCO 1
1.3 Vision 1
1.4 Strategic Objectives 1
1.5 Technical overview 2
2.1 Project introduction 3
2.2 Context of Internship 3
2.3 Technical Aspect 3
2.4 Overview 4
2.5 JSON 4
2.6 HTML 4
2.7 Style/CSS 5
2.8 problems and suggestions 7
3.1 Conclusion 8
1.1INTRODUCTION
Peshawar Electric Supply Company (PESCO) is well equipped and determined to provide and
maintain steady power supply to its numerous consumers. We are in the process of meeting
our consumers' expectations
1.2 HESTORY OF PESCO
Peshawar Electric Supply Company (PESCO), located in Peshawar provides service of power
distribution to over 2.6 million consumers of all civil districts of Khyber Pakhtunkhwa, Pakistan.
At PESCO, we own and maintain Khyber Pakhtunkhwa’s electricity distribution system via 132,
66, 33KV sub-transmission lines, sub-stations and 11KV & 440V low tension lines with
distribution transformers that deliver electricity to your home or business.
1.3 VISION
Achieve and maintain the highest degree of efficiency, reliability and responsiveness as a public
service organization for variety of customers.
Public and company workers' safety shall be high on our priority.
Retaining and growing our business, staff and customer base will be of primary importance.
Developing innovative business relationships both inside and outside our local distribution area
will be key to our success.
1.4 STATEGIC OBJECTIVES
● To maintain, augment and expand, as needed, a cost effective and efficient distribution
system to adequately meet the power needs of its consumers.
● To comply with the performance parameters specified by NEPRA regarding voltage and
frequency variation, tripping, break downs, line losses etc.
● To continue certain public service obligations including the following:
Installation of basic distribution facilities.
Maintenance of Service reliability.
Public and company workers’ safety shall be high on our priority
Prompt Connections to new customers to ensure open access to all.
● Digitalization and Automation of the Company.
To lead the organization through major cultural change w.r.t.
To improve quality of service.
To reduce theft and improve commercial efficiently.
To innovate and satisfy the consumers demand.
● To strive for setting the tariff above the cost of supply to ensure a reasonable return on I
investment.
● To improve morale and professionalism amongst its employees
1.5 Technical directorate overview
The tasks assigned to Technical Directorate in PESCO are:
Planning and designing of electricity distribution, sub-transmission and grid stations.
Procurement of material for these development and system expansion works.
Construction of the development and system expansion works.
2.1 PROJECT INTRODUCTION
The team SILEX ( Supporting Interaction and Learning by Experience ) conducts Research in the
field of knowledge construction, user assistance, system adaptation to the user, and usage
analysis by the user. The topic of the SILEX team is about the interaction between human and
machine. They design new methods and solutions to successful knowledge transfer between
users and web technology.
One of the projects that my team works on ,COAT, consists of the design and
implementation of a Trace-Base Management System for the web platform
2.2Context of Internship
I have been assigned the task to provide translation(internationalisation) for the Trace
collecting web extension , andsuggest a solution to translating and dynamically editing the
content of a web pagein general. As previously mentioned, the M-Trace object contains
information of the user traces (action history on the LARAVEL platform) which allows a detailed
preview of each trace, containing information, such as date and URL. This is where I fit in. For a
better user experience, an option to choose a language of preference had to be added to the
pages displaying and managing the trace view. This is way of establishing good communication
with the user, while making it accessible for a wider audience. Furthermore, the solution had to
be extended and modified in order to comply with any web page written in HTML.
More details on my weekly tasks can be found in Appendix A. Implementations will be
discussed further ahead in the report.
2.3Technical Aspect
For the completion of the tasks the following web languages and scripts have been used: HTML
for the construction of the layout, CSS for the design of the layout, JavaScript for dynamic
functioning and JSON for data storage. Kango - a cross-browser extension platform was used to
provide compatibility to the
extension for all major browsers. The Kango framework includes useful features. Along with the
options to write background scripts that process large data in background and browser
management, the storage has been found useful to the Trace-Me extension for reasons
including storing user made changes, such as the language preference.
2.4Overview
The Translate and Edit application had been planned to consist of two partsfront-end and back-
end development. The front-end is the part of the web that you can see and interact with (e.g.
Client-side programming). While front-end code interacts with the user in real time, the back-
end interacts with a server to return user ready results. The front-end is a combination of
HTML,CSS and JavaScript coding. By using JavaScript, modifications of the design of a web page
can be made immediately, however only temporary and visible only by the user.
Normally the user would not have rights to modify web content dynamically on the server side.
Logically, administrators are the ones who deal with back-end modification of
databases for example, as they often contain sensitive data which should not be available to
see or modify by the general public. Back-end programming languages include PHP, Python,
Ruby and others.
As I have minimal experience with back-end programming, I have initially focused on the front-
end development of the Translate and Edit module.
However, if a developer were to extend its functionality, they would be able to reuse code that
manages user edits for the
2.5. JSON
The database in this case is the JSON library file, stored on the server-side and parsed upon
request. As JSON was used primarily in the Trace-Me web extension to store data, I have
decided it would be a good idea to use it as a method of internationalization for the Assistant of
Trace-Me, mainly because of the simplicity of adding data, which is an important part of the
module.
By creating an array of objects, each containing default text from the Assistant and it’s
translations, I was able to compare every text attribute on the page with the existing ones in
the library and replace them appropriately.
2.6. HTML
What I had to take in mind prior to starting the project was accessibility issues and web
standards.
I had written a strict XHTML file that contains two sections - one list (<ul>) section for the flag
buttons and another (<div>) for the modification buttons.
One major concern of web accessibility is the use of images.It is considered best practice to add
“alt” and “title” attributes for users who cannot distinct images.
For example the image of the German flag has a title “Deutsch” and alt attribute set to “german
flag”. The lang attribute is also set as english (lang=”en”) in order to inform the browser of the
default human language of the script, which is essential for the proper reading of the web page
by certain technologies for the disabled.
2.7. Style/ CSS
The main styling is stored in an external spreadsheet, although the HTML DOM style object has
also been used to change some settings while the JavaScript is being loaded. For example the
Save button for the edit module has set visibility
to “hidden” in the external stylesheet, but the property changes to “visible” when the edit
button is clicked to avoid potential confusion.
Another method I have used to change properties inside JS is the jQuery .css() method. I have
found it to be effective in changing background and border properties of objects
2.8. JavaScript
All functionality of the modules has been programmed in JavaScript, including jQuery and AJAX.
jQuery is a fast and small JavaScript library that offers many useful features that make event
handling among other things much simpler with an easy-to-use API that works across a
multitude of browsers.
AJAX, though not another programming language or library is a way of using existing standards.
It is the art of exchanging data with a server and updating Parts of a web page, without the
need to reload the entire web page.
As AJAX was already used to dynamically load data for the Trace-Me Assistant, I have found
certain AJAX event handlers in jQuery to be useful for my application.
I used the jQuery.ajax() handler which performs an asynchronous HTTP (ajax) request. The
request is sent to the translation library (or the json file) leading to the creation of a JSON
object upon success. The object, stored in a variable called libData will be further used to refer
to text values in the application.
The idea of the edit module is that once the user decides they want to change the screen text
of a web page, all of the text values would become editable by a single button click. For this
purpose, the following actions need to occur:
Collect all HTML tags on the web page and store them in variables;
Perform a check if each tag contains text;
Highlight the tags with found text values upon mouse hover;
Wrap the text inside a text box and allow modification;
Distinct the modified text from the unmodified (e.g. Outline the text box);
The next step of the edit process would be to save the changes by clicking on the ‘Save’ button.
What happens is the following:
Input values are collected and stored in arrays;
A new JSON object is created;
Whenever the user changes a text value, it is stored locally inside a JSON object;
Display new text values on reload;
Optionally, the user should be able to reset all text nodes in their original state .
That is made possible by adding another button called ‘Default’, which deletes
the object in local storage.
Some of the main JavaScript code can be find attached as Appendix B on page *.
Explanations of what each bit of code does are provided.
The functionality of the back-end office modifications would be exactly the same
with the only difference that the changes will be made permanent. It would be
possible to reset default(old) values, however that would mean not only changing
data but adding more to the database. This could bring up some complications, the
most obvious one being processing time.
2.9 Problems and Suggestions
All in all, the methods proposed in the solution are quite general, however not fully completed.
There is plenty of room left for improvement. For instance, while accessibility issues have been
handled, some JavaScript functions remain accessible only at user click which could be difficult
for those that do not use a mouse output. I would suggest that tab properties are added to all
text that allows modification in order to make sifting through them easier and on click event
handlers are extended to work on key press events as well. I have struggled to find the best
practice of comparing strings. Not all web applications are programmed perfectly with text that
is always enclosed in tags, or properly spelled, which means a comparison is not full and might
result in a glitch.
3 .1 Conclusion
In a nutshell, this internship has been an excellent and rewarding experience. I can conclude
that there have been a lot I’ve learnt from my work at the research Centre. Needless to say, the
technical aspects of the work I’ve done are not flawless and could be improved provided
enough time. As someone with no prior experience in JavaScript whatsoever I believe my time
spent in research and discovering new languages was well worth it and contributed to finding
an acceptable solution to an important aspect of web design and development. Two main
things that I’ve learned the importance of our time-Management skills and self-motivation.
Although I have often stumbled upon these problems at University, they had to be approached
differently in a working environment.
