Introduction to client-side development
Distributed systems use
client-side elements for users to interact with
These client-side elements
include (MVC )
Views –what users see (mainly
GUIs)
Controllers –contain event
handers for the Views
Client-model –Business logic
and data
Views development
technologies
HTML
HTML is the standard markup
language for creating Web pages.
HTML stands for Hyper Text
Markup Language
HTML describes the structure
of Web pages using markup
HTML elements are the
building blocks of HTML pages
HTML elements are represented
by tags
HTML tags label pieces of
content such as "heading", "paragraph", "table",
and so on
Browsers do not display the
HTML tags, but use them to render the content of the page
<!DOCTYPE
html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p> Visible page content </p>
</body>
</html>
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 <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tag name> content goes here... </tag name>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash
inserted before the tag name
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags,
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read
HTML documents and display them.
The browser does not display the HTML tags, but uses them to determine
how to display the document:
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type and helps
browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Documents
HTML Headings -
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the
least important heading:
<h1>First Heading</h1>
HTML Paragraphs -
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph </p>
HTML Links -
HTML links are defined with the <a> tag:
<a
href="https://www.w3schools.com">This is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML
elements.
You will learn more about attributes in a later chapter.
HTML Images -
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are
provided as attributes:
<img src="w3schools.jpg"
alt="W3Schools.com" width="104" height="142">
HTML Buttons -
HTML buttons are defined with the <button> tag:
<button>Click me</button>
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list
items):
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Break tag- (<br>)
Empty HTML Elements
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):
<p>This is a <br> paragraph with
a line break.</p>
Empty elements can be "closed" in the opening tag like this:
<br />.
HTML5 does not require empty elements to be closed. But if you want
stricter validation, or if you need to make your document readable by XML
parsers, you must close all HTML elements properly.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
<a> = href
<img> = src,
width, height, alt
The style Attribute - The style attribute is
used to specify the styling of an element, like color, font, size etc.
All HTML elements can have attributes
The title attribute provides additional "tool-tip" information
The href attribute provides address information for links
The width and height attributes provide size information for images
The alt attribute provides text for screen readers
CSS
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or
in other media
CSS saves a lot of work. It can control the layout of multiple web pages
all at once
External stylesheets are stored in CSS files
CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by
semicolons.
Each declaration includes a CSS property name and a value, separated by
a colon.
A CSS declaration always ends with a semicolon, and declaration blocks
are surrounded by curly braces.
In the following example all <p> elements will be center-aligned,
with a red text color:
p {
color: red;
text-align: center;
}
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements
based on their element name, id, class, attribute, and more.
The element Selector
The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case,
all <p> elements will be center-aligned, with a red text color):
p {
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a
specific element.
The id of an element should be unique within a page, so the id selector
is used to select one unique element!
To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
The style rule below will be applied to the HTML element with
id="para1":
#para1 {
text-align: center;
color: red;
}
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character,
followed by the name of the class.
In the example below, all HTML elements with class="center"
will be red and center-aligned:
.center {
text-align: center;
color: red;
}
Grouping Selectors
If you have elements with the same style definitions, It will be better
to group the selectors, to minimize the code. To group selectors, separate each
selector with a comma.
In the example below we have grouped the selectors from the code above:
h1, h2, p {
text-align:
center;
color:
red;
}
CSS Comments
Comments are used to explain the code, and may help when you edit the
source code at a later date.
Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span
multiple lines:
p {
color: red;
/* This is a single-line
comment */
text-align: center;
}
/* This is
a multi-line
comment */
Insert CSS
There are three ways of
inserting a style sheet:
External style sheet
Internal style sheet
Inline style
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:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
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:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
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.
The example below shows how
to change the color and the left margin of a <h1> element:
<h1 style="color:blue;margin-left:30px;">This is a
heading</h1>
Which one to use?
The major question is which
CSS would be used. After going through many web sites and articles, I am here
writing my views.
Inline CSS
Advantages:
Inline CSS can be used for
many purposes, some of which include:
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. This can be done in combination with the
Important rule of CSS.
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.
Disadvantages
Inline CSS some of the
disadvantages of which includes:
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
Advantages:
Since the Internal CSS have
more preference over Inline CSS. There are numerous advantages of which some of
important are an under:
Cache Problem: Internal styles will be read by all browsers unless
they are hacked to hide from certain ones. This removes the ability to use
media=all or @import to hide styles from old, crotchety browsers like IE4 and
NN4.
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
Disadvantages
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
Advantages
There are many advantages for
using external CSS and some of are:
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: Today, when Google has included the Loading time in
his algorithm, its become more important to look into the page loading time and
another benefit of having low file-size pages translates into reduced bandwidth
costs. CSS can help you save some money by offering you. I done a small
experiment to check the page load time. I am using the Mobile Internet
Connection for testing and for that first I cleared the web cache of the
website and visited http://lawmirror.com for first time after clearing cache.
The total time taken to load the website is 16 seconds. Now I hit the F5 button
and the time taken to load the website is 8 seconds. Using external CSS has
reduced the page load timing. It me explain it how it reduces the time, 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. If you check
under Firebug or Chrome tools it will tell 304 Not Modified, meaning the file
is not modified since last downloaded file, and thus ignoring to download the
external CSS file.
Higher page ranking : In the SEO, it is very important to use external
CSS. How it gives, let me explain, In SEO, the content is the King and not the
amount of code on a page. Search engines spider will be able to index your
pages much faster, as the important information can be placed higher in the
HTML document. Also, the amount of relevant content will be greater than the
amount of code on a page. The search engine will not have to look too far in
your code to find the real content. You will be actually serving it to the
spiders “on a platter”. 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:
First file – <h1
style=”text-align:center; margin-top:25px; margin-bottom:25px;”>abc
Second File –
h1{text-align:center; margin-top:25px; margin-bottom:25px;} <h1>
For Designer, the both things
are same but for SEO and Spider point of view and they are different. Spider
have to extra time to remove the style tag from the first file and which
consumers say 2 secs, but in second file the content is directly available to
spider and thus can easily index the content without looking in CSS, which give
priority of second file over first file. Spider will index both the pages but
when it gets the contents goods, it will first index those and then go for
other pages with doing some work.
Cascading Order
What style will be used when
there is more than one style specified for an HTML element?
All the styles in a page will
"cascade" into a new "virtual" style sheet by the following
rules, where number one has the highest priority:
Inline style (inside an HTML
element)
External and internal style
sheets (in the head section)
Browser default
So, an inline style has the
highest priority, and will override external and internal styles and browser
defaults
Responsive Web Design
Responsive web design makes
your web page look good on all devices.
Responsive web design uses
only HTML and CSS.
Responsive web design is not
a program or a JavaScript.
Web pages can be viewed using
many different devices: desktops, tablets, and phones. Your web page should
look good, and be easy to use, regardless of the device.
Web pages should not leave
out information to fit smaller devices, but rather adapt its content to fit any
device:
It is called responsive web
design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the
content to make it look good on any screen.
Viewport
The viewport is the user's
visible area of a web page.
The viewport varies with the
device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile
phones, web pages were designed only for computer screens, and it was common
for web pages to have a static design and a fixed size.
Then, when we started surfing
the internet using tablets and mobile phones, fixed size web pages were too
large to fit the viewport. To fix this, browsers on those devices scaled down
the entire web page to fit the screen.
Setting The Viewport
HTML5 introduced a method to
let web designers take control over the viewport, through the <meta> tag.
You should include the
following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
A <meta>
viewport element gives the browser instructions on how to control the
page's dimensions and scaling.
The width=device-width
part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device).
The initial-scale=1.0
part sets the initial zoom level when the page is first loaded by the
browser.
Grid-View
Many web pages are based on a
grid-view, which means that the page is divided into columns. Using a
grid-view is very helpful when designing web pages. It makes it easier to place
elements on the page. A responsive grid-view often
has 12 columns, and has a total width of 100%, and will shrink and expand as
you resize the browser window.
Media Query
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.
Definition and Usage
The @media rule is used in
media queries to apply different styles for different media types/devices.
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 (responsive web design)
to desktops, laptops, tablets, and mobile phones.
You can also use media
queries to specify that certain styles are only for printed documents or for
screen readers (mediatype: print, screen, or speech).
In addition to media types,
there are also media features. Media features provide more specific details to
media queries, by allowing to test for a specific feature of the user agent or
display device. For example, you can apply styles to only those screens that
are greater, or smaller, than a certain width.
@media not|only mediatype and (mediafeature and|or|not mediafeature)
{
CSS-Code;
}
meaning of the not, only and
and keywords:
not: The not keyword reverts the meaning of an entire
media query.
only: The only keyword prevents older browsers that do not
support media queries with media features from applying the specified styles.
It has no effect on modern browsers.
and: The and keyword combines a media feature with a
media type or other media features.
They are all optional.
However, if you use not or only, you must also specify a media type.
There are tons of screens and
devices with different heights and widths, so it is hard to create an exact
breakpoint for each device. To keep things simple you could target five groups:
/*
Extra small devices (phones, 600px and down) */
@media
only screen and (max-width: 600px) {
.example {background: red;}
}
/*
Small devices (portrait tablets and large phones, 600px and up) */
@media
only screen and (min-width: 600px) {
.example {background: green;}
}
/*
Medium devices (landscape tablets, 768px and up) */
@media
only screen and (min-width: 768px) {
.example {background: blue;}
}
/*
Large devices (laptops/desktops, 992px and up) */
@media
only screen and (min-width: 992px) {
.example {background: orange;}
}
/*
Extra large devices (large laptops and desktops, 1200px and up) */
@media
only screen and (min-width: 1200px) {
.example {background: pink;}
}
New Features in CSS 3
CSS 3 Selectors
In addition to the selectors
that were available in CSS2, CSS 3 introduces some new selectors. Using these
selectors you can choose DOM elements based on their attributes. So you don't
need to specify classes and IDs for every element. Instead, you can utilize the
attribute field to style them.
Rounded corner elements
Rounded corner elements can
spruce up a website, but creating a rounded corner requires a designer to write
a lot of code. Adjusting the height, width and positioning of these elements is
a never-ending chore because any change in content can break them.
CSS 3 addresses this problem
by introducing the border-radius property, which gives you the same
rounded-corner effect and you don't have to write all the code
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.
CSS 3 Gradient
While the Gradient effect is
a sleek Web design tool, it can be a drain on resources if not implemented
correctly using current CSS techniques. Some designers use a complete image and
put in the background for the gradient effect, which increases the page load
time.
Here are examples of the
linear gradient property in CSS 3. To date, it is supported only in Safari 4
and Chrome (WebKit) and Firefox 3.6.
CSS 3 RGBA: Color, Now
with Opacity
The RGB property in CSS is
used to set colors for different elements. CSS 3 introduces a modification and
added opacity manipulation to this property. RGB has been transformed to RGBA
(Red Green Blue Alpha channels), which simplifies how you control the opacity
of elements.
CSS 3 Transform (Element
Rotation)
CSS 3 also introduced a
property called transform, which enables rotating Web elements on a webpage. As
of now, if a designer wants to rotate of an element, he or she uses JavaScript.
Many JavaScript extensions/plugins are available online for this feature, but
they can make the code cumbersome and most importantly consume more resources.
CSS 3 Multicolumn Layout
Almost every webpage today is
divided into columns or boxes, and adjusting these boxes so they display
correctly on different browsers takes a toll on Web designers. CSS 3 solves
this problem with the multicolumn layout property; all you have to do is specify
the number of columns you need and they will be created.
This property is currently
supported by the Firefox and WebKit browsers.
CSS 3 Web Fonts
CSS 3 also facilitates
embedding any custom font on a webpage. Fonts are dependent on the client
system and Web pages can render only fonts that are supported by the browser or
the client machine. By using the @font-face property, you can include the font
from a remote location and can then use it.
Other Tool
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
(and the application, which uses that UI)
Component development
Browser-based clients’
components comprises. two main aspects
Controllers
Client-model
The components of browser-based
clients are developed using JS/JS-based frameworks,
libraries, and plugins.
Main features of client-side
component development tools
- DOM processing (dynamic
content generation,change, removal)
- Data processing
- Data persistence
- Session management (cookies)
- Communicating (with server
components)
ECMAScript 6
new features in ES6.
JavaScript let - let statement allows
you to declare a variable with block scope
JavaScript const - JavaScript variable with a constant value
Exponentiation (**)
(EcmaScript 2016) - the first operand
to the power of the second operand -
Default parameter values
Array.find()
Array.findIndex()
New Number Properties
ES6 added the following
properties to the Number object:
EPSILON
MIN_SAFE_INTEGER
MAX_SAFE_INTEGER
New Number Methods
ES6 added 2 new methods to
the Number object:
Number.isInteger()
Number.isSafeInteger()
New Global Methods
ES6 also added 2 new global
number methods:
isFinite()
isNaN()
Web workers - This API is meant to be invoked by web
application to spawn
background workers to execute scripts
which run in parallel to UI
page. The concept of web works is
similar to worker threads
which get spawned for tasks which
need to invoked separate from
the UI thread.
Web storage/ sessionStorage - This is for persistent data
storage of key-value pair data in Web clients.
Geolocation – Identify the device location
File API – Handle the local files
Image capturing – use local hardware (camera)
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
Generic client-side
features
Form/data validation
Dynamic content generating/updating
Some business logic
(client-model)
Delta-Communication (AJAX,
SSE, WS)
Data formatting/preparation
