Mid-Web-Engineering-Zain Hassan (997-2017)

Mid-Term Web Engineering
Name: Zain Hassan

CMS: 997-2017
Instructor: Sir Kashif Alam
Q: 01
Solution:
Framework is a set of activities that will be performed for every web engineering related
project. The nature of activities might vary to suit the project. Each framework activity is
composed of set of actions. Actions like:
 Work Tasks
 Quality Assurance
 Work Products
 Project Milestones
A framework also has a set of “Umbrella Activities” as following:
Web Engineering Framework Activities
Communication:
It involves heavy interaction and collaboration with the customer and encompasses
requirements gathering and other related activities like understanding what the user wants
etc.
Planning:
This establishes and incremental plan for the WebE Work. Planning is being done to achieve
the development goal based on gathered requirements.
Modeling:
It involves creation of models that assist the developer and the user or customer to better
understand Web App design, functionalities and requirements.
Construction:
It combines both the creation of HTML, XML, CSS, Bootstrap, Javascript, PHP and similar
code with testing that is required to debug errors in the code.
Deployment:
It delivers the final Web App to the client or user who evaluates it and provide feedback
based on the evaluation.
Q: 02
Solution: Importance of RWD and Impact on Web Engineering
Responsive web design was introduced back in 2010 and recommended from 2015
onwards, but there have been many other updates to web design since that are also of
great importance.
Responsive design allows Web developers to build a web page or complete website that can
dynamically adapt to the size of the devices. This enables the rendering of web pages in a
fast and optimized way, ensuring a good user experience on mobile devices, tablet and
desktop.
HTML and CSS code of a website is adapted to the resolution of the device without having
the need to define different styles. Responsible web design is composed by three technical
components:
1. Fluid Grids
Fluid grids are responsible to assign relative units to page elements.
2. Media Queries
Media queries make possible to switch between different CSS based on the features
of the device.
3. Flexible Images
Flexible images are also sized in relative units.
Responsive web design, and mobile-first indexing, is now also important as a ranking
factor. Sites that are responsive will generally load faster which is likely to boost your
ranking and decrease your bounce rate. Responsive web design can also make social
sharing easier, help to grow a bigger audience for brand or business.
RWD has changed the way how the web works in the domain of Web Engineering.
The way people access the Web is changing rapidly. The Web is increasingly used in
smartphones, tablets, TVs and other devices. The importance of RWD can be
understand by these major 5 beneficial points:
1. Cost effectiveness
Maintaining separate sites for your mobile and non-mobile audiences can get
expensive. By using responsive web design, you can save money by eliminating the
cost of paying for a mobile site. You will only need to invest in a single site design to
appeal to all visitors and all devices.
2. Flexibility
When you have a website with responsive web design, you can make changes
quickly and easily. You do not need to worry about making changes on two websites.
This flexibility is a huge advantage when you just want to make a quick design tweak
or fix a typo on your site—you only have to do it once.
3. Improved user experience

User experience is crucial to website owners. You want people to like your site, and
you want it to be easy to use to convince them to come back. If someone visits your
website on a mobile device, and it takes forever to load or your pictures do not have
the proper resolution, it can make your company appear unprofessional.
No one wants to do business with a place that is unprofessional. But responsive
design, which offers a much better user experience, can help convince people to give
your company a chance. Because zooming and scrolling will be eliminated, content
can be viewed quicker, and the overall impression that visitors have will be much
more positive.
4. Search engine optimization gains

Search engine optimization, or SEO, is a strategy used by many companies to help
boost themselves in Google’s search page rankings. The closer you are to the top,
the better the chance potential customers will find you.
SEO campaigns and website maintenance are also a much smoother process with a
mobile friendly website. It’s also quicker and less expensive than making a stand-
alone mobile application in addition to your desktop website.
5. Ease of management
Most businesses, especially smaller ones, don’t have a lot of time to update or
refresh the way their website looks. But rather than having to hire a designer to
handle every aspect of your website, responsive design allows you to make the
changes yourself, quickly and easily.
Additionally, with just one website, other elements of your marketing will be much
easier to manage. You’ll never have to wonder if you should link the mobile or
desktop site on a social media update, or question whether or not all of your redirect
links will be working to get the right visitors to the right site. Responsiveness takes
much of the stress out of managing a business website.
Q :03
Solution:
Code:
<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<title>SIMPLE FORM</title>
</head>
<style>
.my-form{
background:#9BFEBB;
width:650px;
}
.first-name {
margin-left: 10px;
padding: 2px 4px;
font-size: 20px;
padding-right: 11px;
float: left;
}
.last-name {
padding: 2px 2px;
font-size: 20px;
float: left;
}
.male {
padding: 23px 2px;
font-size: 20px;
float: left
}
.female {
padding: 23px 2px;
font-size: 20px;
}
.email {
margin-top: -5px;
margin-left: 10px;
padding: 2px 4px;
font-size: 20px;
float: left;
}
.age {
margin-top: -5px;
padding: 2px 2px;
font-size: 20px;
float: left;
}
.pass {
margin-top: -5px;
padding: 2px 2px;
font-size: 20px;
}
.phone {
margin-top: 10px;
margin-left: 10px;
padding: 2px 4px;
font-size: 20px;
padding-right: 9px;
float: left;
}
.dob {
margin-top: 10px;
padding: 2px 4px;
font-size: 20px;
float: left;
}
.web-link {
margin-top: 10px;
margin-left: 10px;
padding: 2px 4px;
font-size: 20px;
}
.pass-position {
margin-left: -60px;
}
input{ border: 0.1px solid #00800024;
padding: 5px;background:#CAFFBB;
-webkit-text-fill-color: #00800099;
}
.input-pass{
position: relative;
left: 10px;
}
.input-dob{height:15px;
padding-right:20px;
padding-left:20px;
}
.input-btn{block-size:25px; background:#0350A8;margin:10px;-webkit-text-fill-
color:white;padding-right:20px;padding-left:20px;padding-bottom:25px;font-size:20px;}
</style>
<body>
<div class="my-form">
<form method="post" action="mailto:[email protected]">
<div class="first-name">
<label>First Name</label> <br>
<input type="text" placeholder="Enter First Name">
</div>
<div class="last-name">
<label>Last Name</label> <br>
<input type="text" placeholder="Enter Last Name">
</div>
<div class="male">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
</div>
<div class="female">
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
</div>
<div class="email">
<label>Email Address</label> <br>
<input type="text" placeholder="Enter Email Address">
</div>
<div class="age">
<label>Age</label> <br>
<input type="number" placeholder="Enter Age">
</div>
<div class="pass">
<label class="pass-position">Enter Password</label> <br>
<input type="password" class="input-pass" placeholder="Enter Password">
</div>
<div class="phone">
<label>Mobile Number</label> <br>
<input type="number" placeholder="Enter Mobile Number">
</div>
<div class="dob">
<label>Date of Birth</label> <br>
<input type="date" class="input-dob" placeholder="dd-mm-yyyy">
</div>
<div class="web-link">
<label>Website URL</label> <br>
<input type="text" placeholder="Enter Website URL">
</div>
<div class="button"></div>
<input type="submit" value="Submit" class="input-btn">
</div>
</form>
</div>
</body>
</html>
Screen Shot:
Q: 04
Solution: PHP Program to print number series
Code:
<?php //Written by Zain Hassan (997-2017)
function num_pattern($val)
{
$num = 0.25;
for ($m = 0; $m < $val; $m++)
{
echo $num.", ";
$num = $num + 1.5;
}
}
$val = 10;
num_pattern($val);
?>
Output:
END

Mid-Web-Engineering-Zain Hassan (997-2017)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mid-Web-Engineering-Zain Hassan (997-2017)

Uploaded by

Copyright:

Available Formats

Mid-Term Web Engineering

Name: Zain Hassan

A framework also has a set of “Umbrella Activities” as following:

Web Engineering Framework Activities

Flexible images are also sized in relative units.

3. Improved user experience

4. Search engine optimization gains

You might also like