1. What are the main elements of client-side application components of distributed systems?
2. Discuss the Views development technologies for the browser-based client-components of web-based applications
3. Discuss the Controller development technologies for the browser-based client-components of web-based applications
Model–View–Controller (usually known as MVC) is an architectural pattern commonly used for developing user interfaces that divides an application into three interconnected parts. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.[1][2] The MVC design pattern decouples these major components allowing for efficient code reuse and parallel development.
Traditionally used for desktop graphical user interfaces (GUIs), this architecture has become popular for designing web applications.[3] Popular programming languages like Java, C#, Python, Ruby, PHP have MVC frameworks that are used in web application development straight out of the box.
4. Discuss the client-Model development technologies for the browser-based client components of web-based applications
Client–server model is a distributed application structure that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients.Often clients and servers communicate over a computer network on separate hardware, but both client and server may reside in the same system. A server host runs one or more server programs which share their resources with clients. A client does not share any of its resources, but requests a server's content or service function. Clients therefore initiate communication sessions with servers which await incoming requests. Examples of computer applications that use the client–server model are Email, network printing, and the World Wide Web.
5. Explain different categories of elements in HTML, proving examples for their use
6. Discuss the importance of CSS, indicating new features of CSS3
Well, it makes CSS3 a whole lot easier to handle given its complexity. Doing this the CSS2 way, would've made things very difficult to manage. The most importantmodules include Selectors, Color, Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations and user interface.
7. Compare and contrast the 3 main types of CSS selectors
8. Discuss the advanced CSS selectors, explaining the specificity
10. Identify the pros and cons of 3 ways of using CSS (inline, internal, external)
There are the following three types of CSS:
Saves Time
Let’s consider an example. You run a website that has 40 pages or more. Due to the need for some strategic changes in the content of the website, you now need to change the text size from 14pt to 12pt or vice-versa. How much time do you think will it take for manually making the size changes to all those 40 pages? A lot! This is where CSS comes into the scenario as a savior. You can then define the changes in a single CSS file and reference all those 40 pages to that same file and your work will be done. Your entire website will start reflecting the size changes.
Help to Make Spontaneous and Consistent Changes
Considering our very own example from the first advantage above, imagine that you have to make more fluid changes to your content. Again, with a single style sheet, you will be able to ensure that the changes look uniform on all the pages and not botched up. If it were not for CSS, you would have to take notes of changes made to one page and reference it while you make changes to another page, always going back and forth. Imagine the amount of exhaustion and brain activity that would be required to justify the consistency of these changes throughout. However, with CSS, your changes are well applied consistently.
Improves Page Loading Speed
Code density on your website contributes to its speed. The more the code, the slower the website gets. FYI, visitors are quick to abandon a website if it takes more than 2-3 seconds to load.
Just a few lines of code is all that is required to make changes to a large number of pages on the website with CSS. Since there is minimal code, the website database remains uncluttered, thus, eliminating any website loading issues. Implementing CSS along with the choice of best website builders is a great way to keep visitors hooked on to your website as they won’t have to wait up for your website to load.
11. Identify frameworks/libraries/plugins/tools to develop the Views/web pages, and discuss their similarities and differences
12. Discuss the client-side component development related aspects in browser-based web applications
According to the very first and basic web app architecture, a server, consisting of web page construction logic and business logic interacts with a client by sending out a complete HTML page. To see an update, the user needs to fully reload the page or, in other words, to have the client send a request for an HTML page to the server and load its entire code once again. Look at this type’s web application architecture diagram below.
Since all the logics and data are stored on the server and the user doesn’t have any access to it, this architecture type is highly secure. Still, due to constant content reload and huge data exchange, it is more common for static websites than actual web apps.
13. Discuss the new features in JS version 6
14. Identify frameworks/libraries/plugins/tools to develop the client-side components of browser-based applications, and discuss their similarities and differences
- Views – what users see (mainly GUIs)
- Controllers – contain event handers for the Views
- Client-model – Business logic and data
2. Discuss the Views development technologies for the browser-based client-components of web-based applications
3. Discuss the Controller development technologies for the browser-based client-components of web-based applications
Model–View–Controller (usually known as MVC) is an architectural pattern commonly used for developing user interfaces that divides an application into three interconnected parts. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.[1][2] The MVC design pattern decouples these major components allowing for efficient code reuse and parallel development.
Traditionally used for desktop graphical user interfaces (GUIs), this architecture has become popular for designing web applications.[3] Popular programming languages like Java, C#, Python, Ruby, PHP have MVC frameworks that are used in web application development straight out of the box.
4. Discuss the client-Model development technologies for the browser-based client components of web-based applications
Client–server model is a distributed application structure that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients.Often clients and servers communicate over a computer network on separate hardware, but both client and server may reside in the same system. A server host runs one or more server programs which share their resources with clients. A client does not share any of its resources, but requests a server's content or service function. Clients therefore initiate communication sessions with servers which await incoming requests. Examples of computer applications that use the client–server model are Email, network printing, and the World Wide Web.5. Explain different categories of elements in HTML, proving examples for their use
6. Discuss the importance of CSS, indicating new features of CSS3
Well, it makes CSS3 a whole lot easier to handle given its complexity. Doing this the CSS2 way, would've made things very difficult to manage. The most importantmodules include Selectors, Color, Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations and user interface.
7. Compare and contrast the 3 main types of CSS selectors
- Inline CSS -
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
- Internal CSS sheets -
The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.
- External CSS sheets -
With an external style sheet, you can change the look of an entire website by changing just one file!
- Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head>
8. Discuss the advanced CSS selectors, explaining the specificity
Advanced Selectors in CSS
Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below:
1) Adjacent Sibling Selector:
It selects all the elements that are adjacent siblings of specified elements. It selects the second element if it immediately follows the first element.
Syntax: It select ul tags which immediately follows the h4 tag
h4+ul{
border: 4px solid red;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>adjacent</title>
<style type="text/css">
ul+h4{
border:4px solid red;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<ul>
<li>Language</li>
<li>Concept</li>
<li>Knowledge</li>
</ul>
<h4>Coding</h4>
<h2>Time</h2>
</body>
</html>
Output:
2) Attribute Selector:
It selects a particular type of inputs.
Syntax:
input[type="checkbox"]{
background:orange;
}
Example:
<html>
<head>
<title>Attribute</title>
<style type="text/css">
a[href="http://www.google.com"]{
background:yellow;
}
</style>
</head>
<body>
<a href="http://www.geeksforgeeks.org">geeksforgeeks.com</a><br>
<a href="http://www.google.com" target="_blank">google.com</a><br>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Output:
3) nth-of-type Selector:
It selects an element from its position and types.
Syntax: Select a particular number tag to make changes.
div:nth-of-type(5){
background:purple;
}
If we want to make canges in all even li.
li:nth-of-type(even){
background: yellow;
}
Example:
<html>
<head>
<title>nth</title>
<style type="text/css">
ul:nth-of-type(2){
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>java</li>
<li>python</li>
<li>C++</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<ul>
<li>C#</li>
<li>R</li>
<li>Matlab</li>
</ul>
</body>
</html>
Output:
9. Explain the use for CSS media queries in responsive web development Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below:
1) Adjacent Sibling Selector:
It selects all the elements that are adjacent siblings of specified elements. It selects the second element if it immediately follows the first element.
Syntax: It select ul tags which immediately follows the h4 tag
h4+ul{
border: 4px solid red;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>adjacent</title>
<style type="text/css">
ul+h4{
border:4px solid red;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<ul>
<li>Language</li>
<li>Concept</li>
<li>Knowledge</li>
</ul>
<h4>Coding</h4>
<h2>Time</h2>
</body>
</html>
Output:
2) Attribute Selector:
It selects a particular type of inputs.
Syntax:
input[type="checkbox"]{
background:orange;
}
Example:
<html>
<head>
<title>Attribute</title>
<style type="text/css">
a[href="http://www.google.com"]{
background:yellow;
}
</style>
</head>
<body>
<a href="http://www.geeksforgeeks.org">geeksforgeeks.com</a><br>
<a href="http://www.google.com" target="_blank">google.com</a><br>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Output:
3) nth-of-type Selector:
It selects an element from its position and types.
Syntax: Select a particular number tag to make changes.
div:nth-of-type(5){
background:purple;
}
If we want to make canges in all even li.
li:nth-of-type(even){
background: yellow;
}
Example:
<html>
<head>
<title>nth</title>
<style type="text/css">
ul:nth-of-type(2){
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>java</li>
<li>python</li>
<li>C++</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<ul>
<li>C#</li>
<li>R</li>
<li>Matlab</li>
</ul>
</body>
</html>
Output:
When you create a website for your business, time and money are likely to be major concerns. Luckily, there is a web design method that can help you save time and money while also improving your visitor's experience. Cascading Style Sheets, more commonly known as CSS, has fast become the preferred web design method for the benefits it offers web designers and website visitors alike.
CSS is a language used to detail the presentation of a web page's markup language (most commonly HTML or XHTML) – such as colors, fonts, and layout. One of its key benefits is the way it allows the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS).
If you already have a website that was designed using tables, you may be reluctant to make the switch to CSS, which will require some time and effort. However, the benefits of CSS are the same for new and old websites alike — so why wait? Here are 5 great reasons to ditch those pesky tables and turn your website into a CSS success story.
- Consistency
- Search Engines
- Viewing Options
- Browser Compatibility
- Bandwidth Reduction
10. Identify the pros and cons of 3 ways of using CSS (inline, internal, external)
There are the following three types of CSS:
- Inline CSS.
- Internal CSS.
- External CSS.
Saves Time
Let’s consider an example. You run a website that has 40 pages or more. Due to the need for some strategic changes in the content of the website, you now need to change the text size from 14pt to 12pt or vice-versa. How much time do you think will it take for manually making the size changes to all those 40 pages? A lot! This is where CSS comes into the scenario as a savior. You can then define the changes in a single CSS file and reference all those 40 pages to that same file and your work will be done. Your entire website will start reflecting the size changes.
Help to Make Spontaneous and Consistent Changes
Considering our very own example from the first advantage above, imagine that you have to make more fluid changes to your content. Again, with a single style sheet, you will be able to ensure that the changes look uniform on all the pages and not botched up. If it were not for CSS, you would have to take notes of changes made to one page and reference it while you make changes to another page, always going back and forth. Imagine the amount of exhaustion and brain activity that would be required to justify the consistency of these changes throughout. However, with CSS, your changes are well applied consistently.
Improves Page Loading Speed
Code density on your website contributes to its speed. The more the code, the slower the website gets. FYI, visitors are quick to abandon a website if it takes more than 2-3 seconds to load.
Just a few lines of code is all that is required to make changes to a large number of pages on the website with CSS. Since there is minimal code, the website database remains uncluttered, thus, eliminating any website loading issues. Implementing CSS along with the choice of best website builders is a great way to keep visitors hooked on to your website as they won’t have to wait up for your website to load.
11. Identify frameworks/libraries/plugins/tools to develop the Views/web pages, and discuss their similarities and differences
Libraries
A library is an organized collection of useful functionality. A typical library could include functions to handle strings, dates, HTML DOM elements, events, cookies, animations, network requests, and more. Each function returns values to the calling application which can be implemented however you choose. Think of it like a selection of car components: you’re free to use any to help construct a working vehicle but you must build the engine yourself.
Frameworks
A framework is an application skeleton. It requires you to approach software design in a specific way and insert your own logic at certain points. Functionality such as events, storage, and data binding are normally provided for you. Using the car analogy, a framework provides a working chassis, body, and engine. You can add, remove or tinker with some components presuming the vehicle remains operational.
plugins
A plugin is a software that can be extended to add some functionality to the site. In Wordpress, you can get millions of free plugin from the plugin directory. Here are some of the essential plugins that the site should have to ensure its backup and security.
12. Discuss the client-side component development related aspects in browser-based web applications
According to the very first and basic web app architecture, a server, consisting of web page construction logic and business logic interacts with a client by sending out a complete HTML page. To see an update, the user needs to fully reload the page or, in other words, to have the client send a request for an HTML page to the server and load its entire code once again. Look at this type’s web application architecture diagram below.
Since all the logics and data are stored on the server and the user doesn’t have any access to it, this architecture type is highly secure. Still, due to constant content reload and huge data exchange, it is more common for static websites than actual web apps.
13. Discuss the new features in JS version 6
There isn’t anything magic about frameworks or library. Both libraries and frameworks are reusable code written by someone else. Their purpose is to help you solve common problems in easier ways.
I often use a house as a metaphor for web development concepts.
A library is like going to Ikea. You already have a home, but you need a bit of help with furniture. You don’t feel like making your own table from scratch. Ikea allows you to pick and choose different things to go in your home. You are in control.
A framework, on the other hand, is like building a model home. You have a set of blueprints and a few limited choices when it comes to architecture and design. Ultimately, the contractor and blueprint are in control. And they will let you know when and where you can provide your input.
The Technical Difference
The technical difference between a framework and library lies in a term called inversion of control.
When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.
Let’s look at an example using jQuery (a library) and Vue.js (a framework).
Imagine we want to display an error message when an error is present. In our example, we will click a button, and pretend an error occurs.
With jQuery:
index.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
</script>
<script src="./app.js"></script>
</head>
<body>
<div id="app">
<button id="myButton">Submit</button>
</div>
</body>
</html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
</script>
<script src="./app.js"></script>
</head>
<body>
<div id="app">
<button id="myButton">Submit</button>
</div>
</body>
</html>
// app.js
// A bunch of our own code,
// followed by calling the jQuery library
// followed by calling the jQuery library
let error = false;
const errorMessage = 'An Error Occurred';
const errorMessage = 'An Error Occurred';
$('#myButton').on('click', () => {
error = true; // pretend some error occurs and set error = true
if (error) {
$('#app')
.append(`<p id="error">${errorMessage}</p>`);
} else {
$('#error').remove();
}
});
error = true; // pretend some error occurs and set error = true
if (error) {
$('#app')
.append(`<p id="error">${errorMessage}</p>`);
} else {
$('#error').remove();
}
});
Notice how we use jQuery. We tell our program where we want to call it. This is much like going to a physical library and pulling certain books off the shelf as we want them.
That’s not to say jQuery functions don’t require certain inputs once we call them, but jQuery itself is a library of those functions. We are in charge.
