These client-side elements
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
Content –HTML
Different types of elements to define content
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
Structural elements
header, footer, nav, aside, article
Text elements
Headings –<h1> to <h6>
Paragraph –<p>
Line break -<br>
Images
Hyperlinks
Formatting –CSS
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style
Tools
jQuery–A JS library, but can be seen a framework too. It wraps the complexity of pure JS. There are lots of JS frameworks, libraries, and plugins built using jQuery. Good for DOM processing.
jQuery UI –Focus on GUI development
Bootstrap–to rapidly design and develop responsive web pages and templates
Angular–a JS framework/platform to build frontend applications
React–a JavaScript library for building user interfaces
3. Discuss the Controller development technologies for the browser-based client-components of web-based applications
Mobile web application
- There are several ways of targeting mobile devices when making a web application:
- Responsive web design can be used to make a web application - whether a conventional website or a single-page application viewable on small screens and work well with touchscreens.
- Progressive Web Apps are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications.
- Native apps or "mobile apps" run directly on a mobile device, just as a conventional software application runs directly on a desktop computer, without a web browser (and potentially without the need for Internet connectivity); these are typically written in Java (for Android devices) or Objective-C or Swift (for iOS devices). Recently, frameworks like React Native, Flutter, Xamarin, and FuseTools allow the development of native apps for all platforms using languages other than each standard native language.
- Hybrid apps embed a mobile web site inside a native app, possibly using a hybrid framework like Apache Cordova and Ionic or Appcelerator Titanium. This allows development using web technologies (and possibly directly copying code from an existing mobile web site) while also retaining certain advantages of native apps (e.g. direct access to device hardware, offline operation, app store visibility).
4. Discuss the client-Model development technologies for the browser-based clientcomponents 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
5. Explain different categories of elements in HTML, proving examples for their use
html - <head> element
The <head> is usually the first element contained inside the <html> element. While it is also an element container that encapsulates other HTML elements, these elements are not directly displayed by a web browser. Instead they function behind the scenes, providing more descriptive information about the HTML document, like its page title and other meta data. Other elements used for scripting (JavaScript) and formatting (CSS) are also contained within the <head> element, and we will eventually introduce how to utilize those languages. For now, the head element will continue to lay empty except for the title element, which will be introduced
next.
HTML Head Element Code:
<html>
<head>
</head>
</html>
html - <body> element
The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of a web page is the <body> element. We will be looking at each of these elements in greater detail as the tutorial progresses, but for now, it's only important to understand that the body element is one of the four critical web page elements, and it contains all of the page's viewable content.
HTML Body Element Code:
<html>
<head>
<title>My Web Page!</title>
</head>
<body>
<p>Once upon a time...</p>
</body>
</html>
html - <html> element...</html>
<html> is the element that begins and ends each and every web page. Its sole purpose is to hold each web element nicely in position and serves the role of book cover; all other HTML elements are encapsulated within the <html> element. The tag also lets web browsers know, "Hey, I'm an HTML web page!", so that the browser knows how to render it. Remember to close your HTML documents with the corresponding </html> tag to signify the end of the HTML document.
6. Discuss the importance of CSS, indicating new features of CSS3
CSS Selectors
Alright! So now that you are well versed with the syntax of CSS, let's move on to Selectors. Selector helps us identify HTML elements on which a particular style has to be applied.
Selectors are of 3 types, namely,
element Selectors
id Selectors
class Selectors
This module will help you understand what selectors mean and how these three types of selectors work, which in turn save a lot of time and efforts when designing extensive(large) webpages.
To build a style sheet, we need to define rules that select HTML elements and apply various style properties to them. We already know about element selectors, (Recall we assigned style to the <h1>tag), don't worry if you do not remember, we will discuss it again in this tutorial. Besides element selector, the two most common forms of selectors are id and class selectors.
CSS 3 Border Image
Another exciting feature in CSS 3 is the ability to swap out a border with an image. The property border-image allows you to specify an image to display instead of a plain solid-colored border.
CSS 3 Box Shadow
A box shadow allows you to create a drop shadow for an element. Usually this effect is achieved using a repeated image around the element. However, with the property box-shadow this can be achieved by writing a single line of CSS code.
After previously removing this property from the CSS 3 Backgrounds and Borders Module, the W3C added it back in the last working draft.
CSS 3 Text Shadow
The new text-shadow property allows you to add drop shadows to the text on a webpage. Prior to CSS 3, this would be done by either using an image or duplicating a text element and then positioning it. A similar property called box-shadow is also available in CSS 3.
7. Compare and contrast the 3 main types of CSS selectors
Selectors are of 3 types, namely,
element Selectors
id Selectors
class Selectors
1) Universal Selector
The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Each set of tags represents an element on the page. Look at the following CSS example, which uses the universal selector:
* {
color: green;
font-size: 20px;
line-height: 25px;
}
The three lines of code inside the curly braces (color, font-size, and line-height) will apply to all elements on the HTML page. As seen here, the universal selector is declared using an asterisk. You can also use the universal selector in combination with other selectors.
2) Element Type Selector
Also referred to simply as a “type selector,” this selector must match one or more HTML elements of the same name. Thus, a selector of nav would match all HTML nav elements, and a selector of <ul> would match all HTML unordered lists, or <ul> elements.
The following example uses an element type selector to match all <ul> elements:
ul {
list-style: none;
border: solid 1px #ccc;
}
To put this in some context, here’s a section of HTML to which we’ll apply the above CSS:
<ul>
<li>Fish</li>
<li>Apples</li>
<li>Cheese</li>
</ul>
<div class="example">
<p>Example paragraph text.</p>
</div>
<ul>
<li>Water</li>
<li>Juice</li>
<li>Maple Syrup</li>
</ul>
There are three main elements making up this part of the page: Two <ul> elements and a <div>. The CSS will apply only to the two <ul> elements, and not to the <div>. Were we to change the element type selector to use <div> instead of <ul>, then the styles would apply to the <div> and not to the two <ul> elements.
Also note that the styles will not apply to the elements inside the <ul> or <div> elements. That being said, some of the styles may be inherited by those inner elements.
3) ID Selector
An ID selector is declared using a hash, or pound symbol (#) preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol.
Here’s an example:
#container {
width: 960px;
margin: 0 auto;
}
This CSS uses an ID selector to match an HTML element such as:
<div id="container"></div>
In this case, the fact that this is a <div> element doesn’t matter—it could be any kind of HTML element. As long as it has an ID attribute with a value of container, the styles will apply.
An ID element on a web page should be unique. That is, there should only be a single element on any given page with an ID of container. This makes the ID selector quite inflexible, because the styles used in the ID selector rule set can be used only once per page.
If there happens to be more than one element on the page with the same ID, the styles will still apply, but the HTML on such a page would be invalid from a technical standpoint, so you’ll want to avoid doing this.
In addition to the problems of inflexibility, ID selectors also have the problem of very high specificity.
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
Media Queries in Responsive Design
- Media types first appeared in HTML4 and CSS2.1, which enabled the placement of separate CSS for screen and print. In this way, it was possible to set separate styles for a page’s computer display vis-à-vis its printout.
- 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)
An external CSS is a standalone.CSS file that is linked from a web page. The advantage of external stylesheets is that it can be created once and the rules applied to multiple web pages. Should you need to make widespread changes to your site design, you can make a single change in the stylesheet and it will be applied to all linked pages, saving time and effort
An internal CSS holds CSS rules for the page in the head section of the HTML file. The rules only apply to that page, but you can configure CSS classes and IDs that can be used to style multiple elements in the page code. Again, a single change to the CSS rule will apply to all tagged elements on the page.
Inline styles relate to a specific HTML tag, using a style attribute with a CSS rule to style a specific page element. They’re useful for quick, permanent changes, but are less flexible than external and internal stylesheets as each inline style you create must be separately edited should you decide to make a design change.
Advantages of Internal CSS:
- Only one page is affected by stylesheet.
- Classes and IDs can be used by internal stylesheet.
- There is no need to upload multiple files. HTML and CSS can be in the same file.
Disadvantages of Internal CSS:
- Increased page loading time.
- It affects only one page – not useful if you want to use the same CSS on multiple documents
Advantages of External CSS:
- Smaller size of HTML pages and cleaner structure.
- Faster loading speed.
- Same .css file can be used on multiple pages.
Disadvantages of External CSS:
- Until external CSS is loaded, the page may not be rendered correctly
Advantages of Inline CSS:
- Useful if you want to test and preview changes.
- Useful for quick-fixes.
- Lower HTTP requests.
- Disadvantages of Inline CSS:
- Inline CSS must be applied to every element
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.
Libraries normally provide a higher level of abstraction which smooths over implementation details and inconsistencies. For example, Ajax can be implemented using the XMLHttpRequest API but this requires several lines of code and there are subtle differences across browsers. A library may provide a simpler ajax() function so you’re free to concentrate on higher-level business logic.
A library could cut development time by 20% because you don’t have to worry about the finer details. The downsides:
a bug within a library can be difficult to locate and fix
there’s no guarantee the development team will release a patch quickly
a patch could change the API and incur significant changes to your code.
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.
A framework normally provides a higher level of abstraction than a library and can help you rapidly build the first 80% of your project. The downsides:
the last 20% can be tough going if your application moves beyond the confines of the framework
framework updates or migrations can be difficult – if not impossible
core framework code and concepts rarely age well. Developers will always discover a better way to do the same thing.
Tools
A tool aids development but is not an integral part of your project. Tools include build systems, compilers, transpilers, code minifiers, image compressors, deployment mechanisms and more.
Tools should provide an easier development process. For example, many coders prefer Sass to CSS because it provides code separation, nesting, render-time variables, loops, and functions. Browsers do not understand Sass/SCSS syntax so the code must be compiled to CSS using an appropriate tool before testing and deployment.
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
top 10 best ES6 features
Default Parameters in ES6
Template Literals in ES6
Multi-line Strings in ES6
Destructuring Assignment in ES6
Enhanced Object Literals in ES6
Arrow Functions in ES6
Promises in ES6
Block-Scoped Constructs Let and Const
Classes in ES6
Modules in ES6
1. Default Parameters in ES6
Remember we had to do these statements to define default parameters:
var link = function (height, color, url) {
var height = height || 50
var color = color || 'red'
var url = url || 'http://azat.co'
...
}
They were okay until the value was 0 and because 0 is falsy in JavaScript it would default to the hard-coded value instead of becoming the value itself. Of course, who needs 0 as a value (#sarcasm font), so we just ignored this flaw and used the logic OR anyway… No more! In ES6, we can put the default values right in the signature of the functions:
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
...
}
By the way, this syntax is similar to Ruby!
2. Template Literals in ES6
Template literals or interpolation in other languages is a way to output variables in the string. So in ES5 we had to break the string like this:
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
Luckily, in ES6 we can use a new syntax ${NAME} inside of the back-ticked string:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
3. Multi-line Strings in ES6
Another yummy syntactic sugar is multi-line string. In ES5, we had to use one of these approaches:
var roadPoem = 'Then took the other, as just as fair,\n\t'
+ 'And having perhaps the better claim\n\t'
+ 'Because it was grassy and wanted wear,\n\t'
+ 'Though as for that the passing there\n\t'
+ 'Had worn them really about the same,\n\t'
var four Agreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
While in ES6, simply utilize the back ticks:
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
var fourAgreements = `You have the right to be you.
You can only be you when you do your best.`
14. Identify frameworks/libraries/plugins/tools to develop the client-side components of browser-based applications, 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.
References
https://www.smashingmagazine.com/2018/05/future-of-web-design/
https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/
