A distributed system is one in which both data and transaction processing are divided between one or more computers connected by a network, each computer playing a specific role in the system.
Distributed systems use client-side elements for users to interact with
Client-side elements include:
•Views –what users see (mainly GUIs)
•Controllers –contain event handers for the Views
•Client-model –Business logic and data
•Content –HTML
•Formatting –CSS
HTML...
An HTML element is an individual component of an HTML (Hypertext Markup Language) document or web page.[vague] HTML is composed of a tree of HTML nodes, such as text nodes. Each node can have HTML attributes specified. Nodes can also have content, including other nodes and text.
•Structural elements
•header, footer, nav, aside, article
•Text elements
•Headings –<h1> to <h6> •Paragraph –<p> •Line break -<br>
•Images
•Hyperlinks
Data representational elements (these elements use nested structures)
•Lists
•Tables
•Form elements
•Input
•Radio buttons, check boxes
•Buttons
CSS.....
CSS stands for Cascading Style Sheets. It is generally used to display HTML in various views. It is used to design the view for HTML. CSS is a combination of a selector and a declaration.
There are the following three types of CSS:
Inline CSS.
Internal CSS.
External CSS.
Inline CSS
For Inline CSS every style content is in HTML elements. It is used for a limited section. Whenever our requirements are very small we can use inline CSS.
Internal CSS
In internal CSS the style of CSS is specified in the <head> section. This is internal CSS, it affects all the elements in the body section. Internal CSS is used in the condition when we want a style to be used in the complete HTML body. For that we can use style in the head tag.
External CSS
In External CSS we create a .css file and use it in our HTML page as per our requirements. Generally external Cascading Style Sheets are used whenever we have many HTML attributes and we can use them as required; there is no need to rewrite the CSS style again and again in a complete body of HTML that inherits the property of the CSS file.
There are many frameworks/libraries/plugins to support view development
•They dynamically generate HTML+CSS code
•In server and/or client side
•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 (and the application, which uses that UI)
Browser-based clients’ components comprises two main aspects
•Controllers
•Client-model
The components of browser-based clients are developed using J
S/JS-based frameworks, libraries, and plugins.
The client-server model is a distributed communication framework of network processes among service requestor s, clients and service providers. The client-server connection is established through a network or the Internet.
The client-server model is a core network computing concept also building functionality for email exchange and Web/database access. Web technologies and protocols built around the client-server model are:
Hypertext Transfer Protocol (HTTP)
Domain Name System (DNS)
Simple Mail Transfer Protocol (SMTP)
Telnet
Clients include Web browsers, chat applications, and email software, among others. Servers include Web, database, application, chat and email, etc.
HTML element
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> which indicates a line break
The basic elements of an HTML page are:
A text header, denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.
A paragraph, denoted using the <p> tag.
A horizontal ruler, denoted using the <hr> tag.
A link, denoted using the <a> (anchor) tag.
A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.
An image, denoted using the <img> tag
A divider, denoted using the <div> tag
A text span, denoted using the <span> tag
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
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.
1. CSS3 Selectors
Selectors are at the heart of CSS. Originally, CSS allowed the matching of elements by type, class, and/or ID. CSS2.1 added pseudo-elements, pseudo-classes, and combinators. With CSS3, we can target almost any element on the page with a wide range of selectors.
2.CSS3 Colors
CSS3 brings with it support for some new ways of describing colors . Prior to CSS3, we almost always declared colors using the hexadecimal format (#FFF, or #FFFFFF for white). It was also possible to declare colors using the rgb() notation, providing either integers (0–255) or percentages.
3. Rounded Corners: border-radius
The border-radius property lets you create rounded corners without the need for images or additional markup. To add rounded corners to our box, we simply add
border-radius: 25px;
4. 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.
box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
There are 3 main selectors
•Element selector
•ID selector
•Class selector
1 – Element Selector
Element Selectors are very simple. They correspond with any HTML element type. For example, add the following code to your blank CSS file; these are three simple Type Selectors:
1 body {
2 font-family: Arial, sans-serif;
3 font-size: small;
4 }
5
6 h1 {
7 color: green;
8}
9
10 em {
11 color: red;
12}
This code selects and styles our <body> element, as well as all <h1> and <em> elements on our page.
2.ID selector
If you take a look at the code of our HTML page, you’ll notice we have a <div> element with an ID of intro. We assign elements IDs when they are unique on a page; there is only one “intro” section on our page. This is important, because two elements cannot have the same ID.
When an element has an “ID” we can access it with a CSS selector by placing a pound sign (#) in front of it’s ID value. Add the following code to your CSS file, directly below our <h1> rule:
view sourceprint?
1 #intro {
2 font-size: 130%;
3 border: 1px solid black;
4 }
3 – Class Selectors
Class Selectors are very similar to ID Selectors. The major difference is that while a certain ID should only be assigned to one element, we can assign the same class to as many elements as we want.
If you look at the code of our HTML page, you’ll notice that two of our paragraph tags have a class of “important.” When an element has a class we can access it with a CSS selector by placing a period in front of it’s class name. Let’s add the following rule to our CSS file to make these paragraphs stand out:
view sourceprint?
1 .important {
2 background-color: yellow;
3 }
Advanced Selectors in CSS
Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below:
** 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.
filter_none
brightness_4
h4+ul{
border: 4px solid red;
}
Example:
filter_none
brightness_4
<!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:
Attribute Selector: It selects a particular type of inputs.
Syntax:
filter_none
brightness_4
input[type="checkbox"]{
background:orange;
}
Example:
filter_none
brightness_4
<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:
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
Example
If the browser window is 600px or smaller, the background color will be lightblue:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
2.Add a Break point
Earlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen.
Media queries can help with that. We can add a break point where certain parts of the design will behave differently on each side of the break point.
Only one page is affected by style sheet.
Classes and IDs can be used by internal style sheet.
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.
Developers often use the terms “library” and “framework” interchangeably. But there is a difference.
Both frameworks and libraries are code written by someone else that is used to help solve common problems.
For example, let’s say you have a program where you plan on working with strings. You decide to keep your code DRY (don’t repeat yourself) and write some reusable functions like these:
function getWords(str) {
const words = str.split(' ');
return words;
}
function createSentence(words) {
const sentence = words.join(' ');
return sentence;
}
Frameworks and libraries are both code written by someone else that helps you perform some common tasks in a less verbose way.
A framework inverts the control of the program. It tells the developer what they need. A library doesn’t.
The programmer calls the library where and when they need it.
The degree of freedom a library or framework gives the developer will dictate how “opinionated” it is.
New ES6 features
Arrows
Arrows are a function shorthand using the => syntax. They are syntactically similar to the related feature in C#, Java 8 and Coffee Script. They support both statement block bodies as well as expression bodies which return the value of the expression.
Classes
ES6 classes are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.
Enhanced Object Literals
Object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods, making super calls, and computing property names with expressions. Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.
Template Strings
Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.
0 comments:
Post a Comment