•Distributed systems use client-side elements for users to interact with
•These client-side elements include
•Views – what users see (mainly GUIs)
•Controllers – contain event handers for the Views
•Client-model – Business logic and data
•Browser-based clients’ Views comprises two
main elements
Content – HTML
Formatting – CSS
HTML
HTML uses different types of elements to
define content
•Structural elements
• header, footer, nav, aside, article
•Text elements
Headings are defined with the <h1> to <h6> tags.
Paragraph :- HTML paragraphs are defined with the
<p>This is a paragraph.</p>
<p> tag<p>This is a paragraph.</p>
Line break :- <br>
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break)
Images :- <img src="pic_trulli.jpg" alt="Italian Trulli">
Images can improve the design and the appearance of a web pageLinks allow users to click their way from page to page.
Lists :- An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
The list items will be marked with bullets (small black circles) by default
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Tables :- An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
• Form elements
Input :-
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
<input type="text"> defines a one-line text input field<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Radio buttons :-
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</form>
Check boxes :-
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Buttons :-
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Inline Styles
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.
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page
External Style Sheet
<input type="button"> defines a button<input type="button" onclick="alert('Hello World!')" value="Click Me!">
CSS
• Used to Decorate and Format content
There are 3 main selectors use in CSS
•Element selector
•ID selector
•Class selector
Inline Styles
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.
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page
External Style Sheet
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> section:
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
New features of CSS 3
CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of new features and additions, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
Drop Shadows
CSS3 provides the ability to add drop shadows to elements using the box-shadow property. This property lets you specify the color, height, width, blur, and offset of one or multiple inner and/or outer drop shadows on your elements.
Text shadow
Linear Gradients
W3C added the syntax for generating linear gradients with CSS3.
In CSS3, there’s no need to include an element for every background image; it provides us with the ability to add more than one background image to any element, even to pseudo-elements.
One way to use media queries is to have an alternate CSS section right inside your style sheet.
Media Queries
Media queries can be used to check many things, such as:
- width and height of the viewport
- width and height of the device
- orientation (is the tablet/phone in landscape or portrait mode?)
- resolution
Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
One way to use media queries is to have an alternate CSS section right inside your style sheet.
Inline CSS
Pros:
Testing: Many web designers use Inline CSS when they begin working on new projects, this is because its easier to scroll up in the source, rather than change the source file. Some also using it to debug their pages, if they encounter a problem which is not so easily fixed.
Quick-fixes: There are times where you would just apply a direct fix in your HTML source, using the style attribute, but you would usually move the fix to the relevant files when you are either able, or got the time.
Smaller Websites: The website such as Blogs where there are only limited number of pages, using of Inline CSS helps users and service provider.
Lower the HTTP Requests: The major benefit of using Inline CSS is lower HTTP Requests which means the website loads faster than External CSS.
Cons:
Overriding: Because they are the most specific in the cascade, they can over-ride things you didn’t intend them to.
Every Element: Inline styles must be applied to every element you want them on. So if you want all your paragraphs to have the font family “Arial” you have to add an inline style to each <p> tag in your document. This adds both maintenance work for the designer and download time for the reader.
Pseudo-elements: It’s impossible to style pseudo-elements and classes with inline styles. For example, with external and internal style sheets, you can style the visited, hover, active, and link color of an anchor tag. But with an inline style all you can style is the link itself, because that’s what the style attribute is attached to.
Internal CSS
Pros:
Pseudo-elements: It’s impossible to style pseudo-elements and classes with inline styles. With Internal style sheets, you can style the visited, hover, active, and link color of an anchor tag.
One style of same element: Internal styles need not be applied to every element. So if you want all your paragraphs to have the font family “Arial” you have to add an Inline style <p> tag in Internal Style document.
No additional downloads: No additional downloads necessary to receive style information or we have less HTTP Request.
Cons:
Multiple Documents: This method can’t be used, if you want to use it on multiple web pages.
Slow Page Loading: As there are less HTTP Request but by using the Internal CSS the page load slow as compared to Inline and External CSS.
Large File Size: While using the Internal CSS the page size increases but it helps only to Designers while working offline but when the website goes online it consumers much time as compared to offline.
External CSS
Pros:
Full Control of page structure: CSS allows you to display your web page according to W3C HTML standards without making any compromise with the actual look of the page. Google is the leading search Engine and major source of traffic. Google gives very little value to the web pages that are well-organized, since the value is little thus many Designers ignore it. But by taking small value may drive much traffic to the website.
Reduced file-size: By including the styling of the text in a separate file, you can dramatically decrease the file-size of your pages. Also, the content-to-code ratio is far greater than with simple HTML pages, thus making the page structure easier to read for both the programmer and the spiders. With CSS you can define the visual effect that you want to apply to images, instead of using images per say. The space you gain this way can be used for text that is relevant for spiders (i.e. keywords), and you will also lower the file-size of the page.
Less load time: Using external CSS has reduced the page load timing. when you first visited the website, it has downloaded all the contents + external CSS and while downloading external CSS, it has marked the CSS with the time stamp with the time stamp of the web server. Now when you hit F5, it again starts working but this time the browser compare the time stamps of downloaded CSS with Web Server CSS and due to same time stamp, it doesn’t downloaded the CSS external file from server and using the already downloaded time, which make the Web Page Loading time faster as com paired to first time.
Higher page ranking : CSS will help you create highly readable pages, rich in content, which will prove extremely helpful in your SEO campaign. As you very well know, better site ranking means better visibility on the web, and this can translate into more visitors and, ultimately, into increased sales or number of contracts. For more details lets use some code to understand:
View Development Tools
• jQuery – A JS library, but can be seen a framework too. Itwraps the complexity of pure JS. There are lots of JSframeworks, libraries, and plugins built using jQuery. Good forDOM processing.
• jQuery UI – Focus on GUI development
• Bootstrap – to rapidly design and develop responsive webpages and templates.
• Angular – a JS framework/platform to build frontendapplications.
• React – a JavaScript library for building user interfaces (and
the application, which uses that UI)
_____________________________________________________
JavaScript 6
New features
- JavaScript
let
The
let statement allows you to declare a variable with block scope.
var x = 10;
// Here x is 10{
let x = 2;
// Here x is 2}
// Here x is 10
// Here x is 10{
let x = 2;
// Here x is 2}
// Here x is 10
- JavaScript
const
The
const statement allows you to declare a constant (a JavaScript variable with a constant value).
Constants are similar to let variables, except that the value cannot be changed.
- Exponentiation (
**)
The exponentiation operator (
**) raises the first operand to the power of the second operand.- Default parameter values
ES6 allows function parameters to have default values.
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined return x + y;
}
myFunction(5); // will return 15
// y is 10 if not passed or undefined return x + y;
}
myFunction(5); // will return 15
Array.find() Method
The
find() method returns the value of the first array element that passes a test function.Array.findIndex() Method
The
findIndex() method returns the index of the first array element that passes a test function.Number.isInteger() Method
The
Number.isInteger() method returns true if the argument is an integer.Number.isSafeInteger() Method
The
Number.isSafeInteger() method returns true if the argument is a safe integer.isFinite() Method
The global
isFinite() method returns false if the argument is Infinity or NaN.
Otherwise it returns
true.isNaN() Method
The global
isNaN() method returns true if the argument is NaN. Otherwise it returns false.- Arrow functions
You don't need the
function keyword, the return keyword, and the curly brackets.Component Development
Top JS frameworks/Libraries• jQuery: Basic and simple. Cover the complexity of JS and
provides cross-browser compatibility.
• React: powers Facebook, Ease of Learning, DOM Binding,
Reusable Components, Backward Compatibility.
• Angular: Support for Progressive Web Applications, Build
Optimizer, Universal State Transfer API and DOM, Data
Binding and MVVM.
• Vue: lightweight , with a much-needed speed and accuracy.
___________________________________________________________
References
