Mid-Web-Engineering-Zain Hassan (997-2017)
Mid-Web-Engineering-Zain Hassan (997-2017)
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
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
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.
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> <!-- Developed by Zain Hassan (997-2017)-->
<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;
padding-right: 11px;
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;
padding-right: 12px;
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