15CS390L -- INDUSTRIAL TRAINING

A REPORT

Submitted by
Sumit Kumar R. Kansagara
[Reg No.: RA1711003011336 ]

in submission for assessment and award of Grade

for the course

BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE ENGINEERING
of

FACULTY OF ENGINEERING & TECHNOLOGY

S.R.M. Nagar, Kattankulathur, Kancheepuram District

AUGUST 2019

SRM INSTITUTE OF SCIENCE AND TECHNOLOGY

(Under Section 3 of UGC Act, 1956)
 ACKNOWLEGEMENT

First, I would like to thank the almighty for the successful completion of this
Training.

I would like to thank HOD/Computer Science, School of Computer Science

Engineering at SRM Institute of Science and Technology for allowing me to undergo
training in Industry of our interest pertaining to period of training not less than fifteen
days.

I would like to extend my gratitude to Mr. Kerul Patel, CEO Adaptable Services Pvt.
Ltd. for giving an opportunity at his reputed organization.
Internship Certificate
 Contents

■ About the Industry & Company Details

■ Training Schedule
■ Topics Covered under the Training
– Basics of Web Development
– SQL
– HTML5
– CSS3
– JavaScript & jQuery
■ Observation & Project Handled
■ Learning after Training
■ Summary
About the Industry & Company Details:

Web design encompasses many different skills and disciplines in the

production and maintenance of websites. The different areas of web
design include web graphic design; interface design; authoring,
including standardised code and proprietary software; user experience
design; and search engine optimization. The term web design is
normally used to describe the design process relating to the front-end
(client side) design of a website including writing markup. Web
design partially overlaps web engineering in the broader scope of web
development. Web designers are expected to have an awareness of
usability and if their role involves creating markup then they are also
expected to be up to date with web accessibility guidelines.

Web development is the work involved in developing a web site for

the Internet or an intranet. Web development can range from
developing a simple single static page of plain text to complex web-
based internet applications (web apps), electronic businesses, and
social network services. A more comprehensive list of tasks to which
web development commonly refers, may include web engineering,
web design, web content development, client liaison, client-
side/server-side scripting, web server and network security
configuration, and e-commerce development. Among web
professionals, "web development" usually refers to the main non-
design aspects of building web sites: writing markup and coding.

Adaptable Services is a full-service digital design studio that's been

serving up award-winning digital solutions since 2005. Their services
include brand strategy, web applications development, mobile
applications development, content strategy, data analytic, hosting and
IT consulting. At present company is working with Surat Municipal
Corporation, Vadodara Municipal Corporation, Surat City Police and
more than 10 Co Operative Banks in South Gujarat.
 Training Schedule

1st – 2nd June:

Introduction of the company staff and fellow interns and my
responsibilities and tasks in the team.

3rd – 8th June:

Introduction to concepts of networking and basic terminologies used in the
industry. Introduction to theoretical concepts used in web design and
developments.

9th -15th June:

Introduction to Server-side scripting and database management system
using PHP myAdmin and SQL.
Built a database for storing student information and admission application
data of a certain university for a company project. Integrated the database
with the website of the university and maintenance of the database.

16th – 22nd June:

Introduction to Client-side scripting using software like Visual Community
Studio and Geany Editor.
Built a static web page for the university website and integrated the web
page into the site.
Built a dynamic web page with form for admission data and thoroughly
tested and debugged it. Integrated the dynamic web page into the website.
Maintenance of the Website.

23rd – 30th June:

Introduction to CSS3 and jQuery. Used jQuery to add animations to the
website.
Thoroughly studied the CSS3 styling sheets being used by the company to
make the university website
Introduction to Web design concepts like UX design and search engine
optimization.
Received internship/training completion certificate.
Topics Covered under Training:
Basics of Web Development:

Web development is the work involved in developing a web site for

the Internet or an intranet (a private network). Web development can range from
developing a simple single static page of plain text to complex web-
based internet applications (web apps), electronic businesses, and social
network services. A more comprehensive list of tasks to which web
development commonly refers, may include web engineering, web design, web
content development, client liaison, client-side/server-side scripting, web
server and network security configuration, and e-commerce development.
TYPES of WEB DEVELOPERS
o Front-end Developer
o Back-end Developer
o Full Stack Developer
HTML5:

HTML5 is the newest version of Hyper Text Markup Language. The first web
browser was introduced in 1993 and the name was MOSAIC. The development
of MOSAIC was at the NCSA (National Centre for Supercomputing
Applications). Later it was discontinued to development on 7th of January 1997.
Still the people were using the nonstandard version of HTML. The standard
version came into existence in 1995, when HTML 2.0 was announced. Later
after two years HTML 3.0 and after two years HTML 4.01 was announced. And
still we are using the milestone of HTML 4.01. The First Draft of HTML5 Was
announced in January 2008. And amazingly HTML5 has a broad browser
support. Though the HTML5 is still under developing phase. And a lot of
organizations are working and planning for the development of HTML5.
We can’t expect the HTML5 may be the future of Web Designing, but we can
say that this is the present of Web designing. Before the development of
HTML5, we were in compulsion to work in Photoshop and Flash application,
but with the development of HTML5, these affords has been reduced. Many
more long script codes can be done with a simple tagging. As we can use
<details> and <summary> tag for show and hide function of Java Script. We
need not to put a long affords to code this thing. Apart from this feature we can
use the 3D image with <canvas>, the special designed paragraph with <header>,
<footer>, <nav>, <article> and many more.

CSS3:

The development of style sheet was to make the markup language more
impressive. It was discovered around 1980s in the beginning of the SGML.
The third level of CSS was started to develop around 1998. And till 2009, it was
under development. The first working draft of CSS3 came in 19-01-2001. And
since the first introduction still it is under construction.

There were some certain shortcomings in CSS2 and due to its unlikeness, the
developer introduced CSS3. It is divided into different modules according to its
specifications. Though the first working draft of CSS3 came on 19-01-2001, but
it was initially declared early in the June 1999. CSS3 is a cascading piece of
paper that specifies concerning the data with a joined hypertext markup
language document display. it's considerably additional options than previous
CSS versions. Additionally, to further graphics functions, CSS3 permits, to pick
out additional hypertext markup language tags and outline however they're
displayed on an online browser. The standard structure of CSS3 permits a
gradual unharness of recent options, and lets browsers update piecemeal to
support the most recent definitions.
CSS3 is completely backwards compatible, so you will not have to change
existing designs. Browsers will always support CSS2. CSS3 is split up into
"modules". The old specification has been split into smaller pieces, and new
ones have been also added.

JavaScript & jQuery:

JavaScript is a very powerful client-side scripting language and was developed

by Brendan Eich in 1995, which appeared in Netscape, a popular browser of
that time. JavaScript is used mainly for enhancing the interaction of a user with
the webpage. In other words, you can make your webpage livelier and more
interactive, with the help of JavaScript. JavaScript is also being used widely in
game development and Mobile application development. Being a scripting
language, JavaScript cannot run on its own. In fact, the browser is responsible
for running JavaScript code. When a user requests an HTML page with
JavaScript in it, the script is sent to the browser and it is up to the browser to
execute it. The main advantage of JavaScript is that all modern web browsers
support JavaScript.
The language was initially called LiveScript and was later renamed JavaScript.
There are many programmers who think that JavaScript and Java are the same.
In fact, JavaScript and Java are very much unrelated. Java is a very complex
programming language whereas JavaScript is only a scripting language. The
syntax of JavaScript is mostly influenced by the programming language C.
Being a scripting language, JavaScript cannot run on its own. In fact, the
browser is responsible for running JavaScript code. When a user requests an
HTML page with JavaScript in it, the script is sent to the browser and it is up to
the browser to execute it. The main advantage of JavaScript is that all modern
web browsers support JavaScript. So, you do not have to worry whether your
site visitor uses Internet Explorer, Google Chrome, Firefox or any other
browser. JavaScript will be supported. Also, JavaScript runs on any operating
system including Windows, Linux or Mac. Thus, JavaScript overcomes the
main disadvantages of VBScript which is limited to just IE and Windows.

You should place all your JavaScript code within <script> tags (<script> and
</script>) if you are keeping your JavaScript code within the HTML document
itself. This helps your browser distinguish your JavaScript code from the rest of
the code.
e.g.
<html>
<head>
<title>JavaScript Example Code</title>
<script type="text/javascript">
alert("Welcome!!! You are now learning JavaScript.");
</script>
</head>
<body>
</body>
</html>

Note
JavaScript is standardized at Ecma International — the European association for
standardizing information and communication systems (ECMA was formerly an
acronym for the European Computer Manufacturers Association) to deliver a
standardized, international programming language based on JavaScript. This
standardized version of JavaScript, called ECMAScript, behaves the same way
in all applications that support the standard. Companies can use the open
standard language to develop their implementation of JavaScript. The
ECMAScript standard is documented in the ECMA-262 specification. See New
in JavaScript to learn more about different versions of JavaScript and
ECMAScript specification editions.

jQuery is a fast and concise JavaScript Library created by John Resig in 2006
with a nice motto − Write less, do more.

jQuery simplifies HTML document traversing, event handling, animating, and

Ajax interactions for rapid web development. jQuery is a fast, small, and
feature-rich JavaScript library. It makes things like HTML document traversal
and manipulation, event handling, animation, and Ajax much simpler with an
easy-to-use API that works across a multitude of browsers. With a combination
of versatility and extensibility, jQuery has changed the way that millions of
people write JavaScript.

Here is the list of important core features supported by jQuery

 DOM manipulation − The jQuery made it easy to select DOM elements,

traverse them and modifying their content by using cross-browser open
source selector engine called Sizzle.
 Event handling − The jQuery offers an elegant way to capture a wide variety
of events, such as a user clicking on a link, without the need to clutter the
HTML code itself with event handlers.
 AJAX Support − The jQuery helps you a lot to develop a responsive and
feature-rich site using AJAX technology.
 Animations − The jQuery comes with plenty of built-in animation effects
which you can use in your websites.
 Lightweight − The jQuery is very lightweight library - about 19KB in size
(Minified and zipped).
 Cross Browser Support − The jQuery has cross-browser support, and works
well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
 Latest Technology − The jQuery supports CSS3 selectors and basic XPath
syntax.

UI/UX Design:

User interface (UI) design is the process of making interfaces in software or

computerized devices with a focus on looks or style. Designers aim to create
designs users will find easy to use and pleasurable. UI design typically refers to
graphical user interfaces but also includes others, such as voice-controlled ones.
User interfaces are the access points where users interact with designs.
Graphical user interfaces (GUIs) are designs’ control panels and faces; voice-
controlled interfaces involve oral-auditory interaction, while gesture-based
interfaces witness users engaging with 3D design spaces via bodily motions.
User interface design is a craft that involves building an essential part of the
user experience; users are very swift to judge designs on usability and
likeability. Designers focus on building interfaces users will find highly
usable and efficient. Thus, a thorough understanding of the contexts, users will
find themselves in when making those judgments is crucial. You should create
the illusion that users aren’t interacting with a device so much as they’re trying
to attain goals directly and as effortlessly as possible. This is in line with the
intangible nature of software – instead of depositing icons on a screen, you
should aim to make the interface effectively invisible, offering users portals
through which they can interact directly with the reality of their tasks. Focus on
sustaining this “magic” by letting users find their way about the interface
intuitively – the less they notice they must use controls, the more they’ll
immerse themselves. This dynamic applies to another dimension of UI design:
Your design should have as many enjoyable features as are appropriate.
User experience (UX) design is the process design teams use to create products
that provide meaningful and relevant experiences to users. This involves the
design of the entire process of acquiring and integrating the product, including
aspects of branding, design, usability and function.

“User Experience Design” is often used interchangeably with terms such as

“User Interface Design” and “Usability”. However, while usability and user
interface (UI) design are important aspects of UX design, they are subsets of it –
UX design covers a vast array of other areas, too. A UX designer is concerned
with the entire process of acquiring and integrating a product, including aspects
of branding, design, usability and function. It is a story that begins before the
device is even in the user’s hands.

“No product is an island. A product is more than the product. It is a cohesive,

integrated set of experiences. Think through all of the stages of a product or
service – from initial intentions through final reflections, from first usage to
help, service, and maintenance. Make them all work together seamlessly.”
— Don Norman, inventor of the term “User Experience”

Products that provide great user experience (e.g., the iPhone) are thus designed
with not only the product’s consumption or use in mind but also the entire
process of acquiring, owning and even troubleshooting it. Similarly, UX
designers don’t just focus on creating products that are usable; they concentrate
on other aspects of the user experience, such as pleasure, efficiency and fun,
too. Consequently, there is no single definition of a good user experience.
Instead, a good user experience is one that meets a particular user’s needs in the
specific context where he or she uses the product.

Search Engine Optimization:

Search engine optimization (SEO) is the process of increasing the quality and
quantity of website traffic by increasing the visibility of a website or a web page
to users of a web search engine. SEO refers to the improvement of unpaid
results (known as "natural" or "organic" results) ,and excludes direct
traffic/visitors and the purchase of paid placement. Primarily SEO pertains to
search engine. SEO may target different kinds of search, including image
search, video search, academic search, news search, and industry-specific
vertical search engines.

Optimizing a website may involve editing its content, adding content,

modifying HTML, and associated coding to both increase its relevance to
specific keywords and to remove barriers to the indexing activities of search
engines. Promoting a site to increase the number of backlinks, or inbound links,
is another SEO tactic. By May 2015, mobile search had surpassed desktop
search. As an Internet marketing strategy, SEO considers how search engines
work, the computer programmed algorithms which dictate search engine
behaviour, what people search for, the actual search terms or keywords typed
into search engines, and which search engines are preferred by their targeted
audience. SEO is performed because a website will receive more visitors from a
search engine the higher the website ranks in the search engine results page
(SERP). These visitors can then be converted into customers.
SEO differs from local search engine optimization in that the latter is focused
on optimizing a business' online presence so that its web pages will be displayed
by search engines when a user enters a local search for its products or services.
The former instead is more focused on national or international searches.

The leading search engines, such as Google, Bing and Yahoo!, use crawlers to
find pages for their algorithmic search results. Pages that are linked from other
search engine indexed pages do not need to be submitted because they are found
automatically. The Yahoo! Directory and DMOZ, two major directories which
closed in 2014 and 2017 respectively, both required manual submission and
human editorial review. Google offers Google Search Console, for which an
XML Sitemap feed can be created and submitted for free to ensure that all pages
are found, especially pages that are not discoverable by automatically following
links in addition to their URL submission console. Yahoo! formerly operated a
paid submission service that guaranteed crawling for a cost per click; however,
this practice was discontinued in 2009.

Search engine crawlers may look at a number of different factors when crawling
a site. Not every page is indexed by the search engines. The distance of pages
from the root directory of a site may also be a factor in whether or not pages get
crawled. Today, most people are searching on Google using a mobile device. In
November 2016, Google announced a major change to the way crawling
websites and started to make their index mobile-first, which means the mobile
version of your website becomes the starting point for what Google includes in
their index.

Optimization techniques are highly tuned to the dominant search engines in the
target market. The search engines' market shares vary from market to market, as
does competition. In 2003, Danny Sullivan stated that Google represented about
75% of all searches. In markets outside the United States, Google's share is
often larger, and Google remains the dominant search engine worldwide as of
2007. As of 2006, Google had an 85–90% market share in Germany. While
there were hundreds of SEO firms in the US at that time, there were only about
five in Germany. As of June 2008, the market share of Google in the UK was
close to 90% according to Hitwise. That market share is achieved in a number
of countries.

Successful search optimization for international markets may require

professional translation of web pages, registration of a domain name with a top-
level domain in the target market, and web hosting that provides a local IP
address. Otherwise, the fundamental elements of search optimization are
essentially the same, regardless of language.
Web Typography:

Put simply, it is the art, design, and arrangement of text (referred to as type)—a
concept borrowed from traditional print design. It is as much about what you
don’t do with your type as what you do. On the web, typography often gets very
little attention, and there are certain technological limitations that can cause web
typography to suffer when compared to print typography. However, with the
tools available to you, there’s no reason why type cannot be presented on the
web in a wide variety of stylish and beautiful forms.

In this Web Standards Curriculum article, I’ll look at exactly why typography is
limited on the web (compared to print design) and present some tips to follow
for good web typography, along with an example web page that demonstrates
some of these tips. Don’t worry if you don’t understand the CSS and HTML
code at this stage—the point here is to make you think about design. While you
are going through the article, it might be an idea to have a pen(cil) and paper by
your side so you can start to sketch ideas about text layout.

When it comes to typography on web, the old adage “less is more” very much
proves the point. In general, limiting only one or two font families in a single
site result in a cleaner look. You can develop the look and feel, and styling of
text and headlines by adjusting font size, thickness (bold, semi-bold, etc),
italicizing, kerning and spacing instead of using variety of type faces. An
important point to remember is the organization of hierarchy of information. For
example, using larger size and bold of font style for the headline and then
smaller size of same font style for subheading, then using book or regular font
for the main text and so forth. In another word, make a clean delineation of
information with sizes and boldness of same typeface for consistency rather
than employing different type faces.
Limitations of typography on the web to consider:
 A limited selection of fonts
 No hyphenation, making full justification look ugly when a column of
text gets narrow
 Poor control over kerning (ie, the spacing between the letters)
 A lack of control over how the work is viewed—designers must account
for a wide variety of screen sizes, resolutions and environments
Observation & Project Handled:

The university website the company was working on is still not fully online, but
some parts of the website are functional and online.
URL for the website: - https://www.balajigirls.org/

Database design (Server-side scripting)

The database was designed using SQL and was hosted by phpMyAdmin,
MySQL administration tool.
The following shows the exam master and student master tables used for the
website -
Web page Design (Client-side scripting)
These Web pages show that the admission form page (dynamic web page) was
filled and the data input was stored in the database and a confirmation web page
(static web page) was shown to the user filling out the form.
The next step would be payment confirmation and opening of a secure payment
portal.

The payment portal link would be provided by the partnered bank(s).

Learning after Training:

Thanks to Mr. Kerul Patel for this amazing opportunity to let me get a hands-on
experience on this project.

After this internship, I had an exposure to the following:

1. I did an in-depth study on web design concepts after concluding my

training at Adaptable Services Pt. Ltd.
2. I attended an online Workshop of 1 month on UI/UX design conducted
by MyCaptain, IIM-B incubated company.
3. I am currently working on SRM-IST’s Milan website, Milan is the
cultural fest of SRM. I am working along with a team of 5 people and am
in-charge for all the animations for the website.
4. I am also working on a website for start-up, shreiten with one more
person.
5. Studying XML and web services.
6. Learning various hosting concepts and methods to host a website.

Summary:
In a nutshell –

 Learned about the concepts of networking, web design and

development.
 Polished my visualization skill.
 Learned SQL, HTML5, CSS3 and jQuery
 Using the skills I learned, I helped build a functional database to store
all the data.
 Learnt to integrate a database with web pages and many debugging
methods.
 Became familiar with some common problems faced while creating
websites and databases and their integration.