Introduction to client-side development
Client Side Scripting is generally viewable by any visitor
to a site (from the view menu click on "View Source" to view the
source code). Below are some common Client Side Scripting technologies: HTML
(HyperText Markup Language) CSS (Cascading Style Sheets) JavaScript Ajax
(Asynchronous JavaScript and XML) jQuery (JavaScript Framework Library -
commonly used in Ajax development) MooTools (JavaScript Framework Library -
commonly used in Ajax development) Dojo Toolkit (JavaScript Framework Library -
commonly used in Ajax development
Main elements of client-side application components of distributed
systems
The client-side
elements which are used by distributed systems for users to interact with,
include
·
Views – what users see (specially GUIs)
·
Controllers – contain event handers for the
Views
·
Client-model – Business logic and data
Views
development technologies for the browser-based client-components of
web-based
applications
Browser-based
clients’ Views comprises twomain elements
·
Content – HTML
·
Formatting – CSS
Server/client-side
components may generatethe elements of Views
Different
categories of elements in HTML
HTML uses
different types of elements todefine content. An HTML element usually consists
of a start tag and end tag, with the content inserted in between:
<tagname>Content
goes here...</tagname>
The HTML
element is everything from the start tag to the end tag:
<p>My
first paragraph</p>
Empty HTML
Elements
HTML
elements with no content are called empty elements. Empty elements do not have
an end tag, such as the <br> element which indicates a line break.
Nested
HTML Elements
HTML
elements can be nested.
All HTML
documents consist of nested HTML elements.
Structural
elements
header,
footer, nav, aside, article
Text
elements
Headings –
<h1> to <h6>
Paragraph
– <p>
Line break
- <br>
Images
Hyperlinks
Data
representational elements
Lists
Tables
Form
elements
Input
Radio
buttons check boxes
Button
Importance
of CSS, indicating new features of CSS3
CSS3 a new
version of CSS or cascading stylesheet benefits from technical features and properties.
From better maintenance, loading speed, and layout design properties CSS3 is
much more versatile. Designers get to implement the design elements from CSS3
in a simpler manner. In this article, we would discuss the advantages of CSS3
over CSS.
Multi
column layout
The CSS3
is beneficial over CSS as it has multi column layouts without use for multiple
divS. Following the use of CSS3 the browser would accept the properties and
create columns. These layouts are supported by safari 3, safari 4 and firefox
1.5.
Multiple
backgrounds
CSS3 adds
multiple layered backgrounds to an element using multiple properties. This
property from CSS3 adds to a visual programmer or designer’s workflow. The
property also helps in reducing the markup for the design. There is a
significant reduction to the workflow effort.
Text
shadow
The text
shadow property from CSS3 is a widely accepted advantage for web designers. The
property provides web designers with the ability to have a cross browser tool.
This property adds dimensions to designs and makes text stand out. The text
then has added depth and dimension.
@font-face-Attribute
This
technology brings the custom embed to fonts easily for the designer. The
property brings better typography to web design and also makes the attribute
usable in practice. This is one of the more highly anticipated properties.
Border
Radius
The
border- radius property provides a curved corner to all the background images.
This is one of the most widely used properties. The web design that results is
cleaner and the development process for design is more efficient. The property
is not critical to design yet is an important facet to design process and
development.
Border
Image
The
property for border image indicates the image of the border for an element.
This property would give a consistency to design elements with scaling and
tiling of the borders. Although not a highly sought-after design property, this
property further amplifies border image styling.
Box shadow
The
property adds a shadow to the design without extra markup and background
images. The box shadow enhances the design details without affecting content
readability. The box shadow adds further multiple values while the horizontal
and vertical offsets as also shadow colors are more commonly used.
Box Sizing
The
property is especially useful in subtracting padding and border to a specified
height and width. From this property the designer gets to know the exact specifications
to the browser calculations of width and height of an element.
Media
queries
The
property for the media queries defines different styles for different devices
based upon their capabilities. A very useful property as the designer would not
essentially have to write separate style sheets for different devices. Also no
javascript would be required to assess the capabilities and properties of
user’s browser.
File size
and loading time
CSS3
prevails over CSS as a much better language for supporting faster loading time.
The CSS3 language builds upon a better file handling and while the faster load
time is important for the website with higher traffic. Here the effect for
loading time compounds further and benefits the web designer.
Updations
CSS3 is important
and advantageous over CSS from updations and future proofing the websites from
a maintenance perspective. Numerous website features like rebuilding and
resizing, updating appropriate properties and uploads are maintained
effectively.
CSS3 plays
a very vital role in web designing. CSS3 will obviously be completely backwards
compatible, so it won't be necessary to change existing designs to ensure they
work – web browsers will always continue to support CSS2. CSS3 offers a bunch
of new ways like you can write CSS rules with new CSS selectors, new
combinators, and some new pseudo-elements. CSS3 also offers new tools for
describing colors in document. HSL (Hue-Saturation-Lightness) is the newest
addition to HSLA which includes an Alpha channel to reduce opacity.
The main
difference between CSS2 and CSS3 is that CSS3 has been break up into different
sections, called modules. Each of these modules is making its way through the
W3C in various stages of the recommendation process. CSS2 was submitted as a single
document with all the Cascading Style Sheets information within it. Because
each of the modules is being worked individually, we have a much wider range of
browser support for CSS3 modules. As with any new specification, be sure to
test your CSS3 pages thoroughly in as many browsers and operating systems as
you can.
In CSS3,
the box model hasn't changed. But there are a bunch of new style properties
that can help you style the backgrounds and borders of your boxes:
Multiple
Background images
Using the
background-image, background-position, and background-repeat styles you can
specify multiple background images to be layered on top of one another in the
box. The first image is the layer closest to the user, with the following ones
painted behind. If there is a background color, it is painted below all the
image layers.
3 New
Background Style Properties
There are
also some new background properties in CSS3
Background-clip
- This property defines how the background image should be clipped. The default
is the border box, but it can be changed to the padding box or the content box.
Background-origin
- This property determines whether the background should be placed in the
padding box, the border box, or the content box.
Background-size
- This property allows you to indicate the size of the background image. It
allows you to stretch smaller images to fit the page.
CSS3
Border Properties
In CSS3,
borders can be the styles we're used to (solid, double, dashed, etc.) or they
can be an image. Plus, CSS3 brings in the ability to create rounded corners.
Border images are interesting because you create an image of all four borders
and then tell the CSS how to apply that image to your borders.
Three main
types of CSS selectors
CSS selectors
are used to select the content you want to style. Selectors are the part of CSS
rule set. CSS selectors select HTML elements according to its id, class, type,
attribute etc.
Element
selector
The
element selector selects the HTML element by name.
<!DOCTYPE
html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This
style will be applied on every paragraph.</p>
<p
id="para1">Me too!</p>
<p>And
me!</p>
</body>
</html>
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:
1
#intro {
2
font-size:
130%;
3
border:
1px solid black;
4
}
Class
selector
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:
1
.important
{
2
background-color:
yellow;
3
}
Advanced
CSS selectors with the specificity
Advanced
selectors
Pseudo
classes
:link
:visited
:hover
Pseudo
elements
first-letter
first-line
first-child
Advanced features
Web fonts
- CSS3 web fonts allow you to use custom fonts other than device
fonts
Colors,
gradients, backgrounds
Transformations
and animations
Media
The use
for CSS media queries in responsive web development
Media
queries are a popular technique for delivering a tailored style sheet to
different devices. As an example, we can change the background color for
different devices. 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.
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;
}
}
The pros
and cons of 3 ways of using CSS (inline, internal, external)
Inline
Pros:
Great for quick fixes/prototyping and simple tests without having to swap back
and forth between the .css document and the actual HTML file.
Pros: Many
email clients do NOT allow the use of external .css referencing because of
possible spam/abuse. Embedding might help.
Cons:
Fills up HTML space/takes bandwidth, not resuableaccross pages - not even
IFRAMES.
Internal
Pros: Same
as above regarding prototype, but easier to cut out of the final prototype and
put into an external file when templates are done.
Cons: Some
email clients do not allow styles in the [head] as the head-tags are removed by
most webmail clients.
External
Pros: Easy
to maintain and reuse across websites with more than 1 page.
Pros:
Cacheable = less bandwidth = faster page rendering after second page load
Pros:
External files including .css can be hosted on CDN's and thereby making less
requests the the firewall/webserver hosting the HTML pages (if on different
hosts).
Pros:
Compilable, you could automatically remove all of the unused space from the
final build, just as jQuery has a developer version and a compressed version =
faster download = faster user experience + less bandwidth use = faster
internet! (we like!!!)
Cons:
Normally removed from HTML mails = messy HTML layout.
Cons:
Makes an extra HTTP request per file = more resources used in the
Firewalls/routers.
Frameworks/libraries/plugins/tools
to develop the Views/web pages, and discuss
their
similarities and differences
There are
many frameworks/libraries/pluginsto support view development
They
dynamically generate HTML+CSS code
In server
and/or client side
May have
JS-based advanced interactive features
Client-side
component development related aspects in browser-based web
applications
Browser-based
clients’ components comprisestwo main aspects
Controllers
Client-model
The
components of browser-based clients aredeveloped using JS/JS-based frameworks,
libraries,
and plugins
The new
features in JS version 6
This is
also called as ECMAScript 6 is also known as ES6 and ECMAScript.
New
features
JavaScript
let
JavaScript
const
Exponentiation
(**)
Default
parameter values
Array.find()
Array.findIndex()
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
Advantages:
Inline CSS can be used for many purposes, some
of which include:
1. 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.
2. 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. 4/19/2019 Programming Applications and
Frameworks https://mypafsliit.blogspot.com/2019/04/introduction-to-client-side-development.html
26/42
3. Smaller Websites: The website
such as Blogs where there are only limited number of pages, using of Inline CSS
helps users and service provider.
4. 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:
1. Overriding: Because they are the
most specific in the cascade, they can over-ride things you didn’t intend them
to.
2. 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 tag in
your document. This adds both maintenance work for the designer and download
time for the reader.
3. 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:
1. 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.
2. 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.
3. 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
tag in Internal Style document.
4. No additional downloads: No
additional downloads necessary to receive style information or we have less
HTTP Request
Disadvantages
1. Multiple Documents: This method
can’t be used, if you want to use it on multiple web pages.
2. 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. 4/19/2019 Programming Applications and Frameworks
https://mypafsliit.blogspot.com/2019/04/introduction-to-client-side-development.html
27/42 3. 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: A. 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. B. 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 filesize of the page. C. 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.comfor 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. D. 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. 4/19/2019 Programming Applications and Frameworks https://mypafsliit.blogspot.com/2019/04/introduction-to-client-side-development.html
28/42 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:
References:
