➤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
Discuss the Views development technologies for the browser-based client-components of web-based applications
➤Browser-based clients’ Views comprises two main elements •Content –HTML
•Formatting –CSS
➤Server/client-side components may generate the elements of Views
An end user can access a web application through a web browser such as Google Chrome, Safari, or Mozilla Firefox. A majority of web applications can be written in JavaScript, Cascading Style Sheets (CSS), and HTML. Client-side programming will typically utilize HTML, CSS and JavaScript.
Client Side Scripting / Coding - Client Side Scripting is the type of code that is executed or interpreted by browsers.
Client Side Scripting is generally view able 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
Below are the common Server Side Scripting technologies:
➧PHP (very common Server Side Scripting language - Linux / Unix based Open Source - free redistribution, usually combines with MySQL database)
➧ASP (Microsoft Web Server (IIS) Scripting language)
➧ASP.NET (Microsoft's Web Application Framework - successor of ASP)
➧ColdFusion (Adobe's Web Application Framework)
➧Ruby on Rails (Ruby programming's Web Application Framework free redistribution)
➧Perl (general purpose high-level programming language and Server Side Scripting Language - free redistribution - lost its popularity to PHP)
➧Python (general purpose high-level programming language and Server Side Scripting language - free redistribution)
Discuss the Controller development technologies for the browser-based client-
components of web-based applications
ASP.NET Core applications are web applications and they typically rely on client-side web technologies like HTML, CSS, and JavaScript.
The internet is steadily moving towards active user engagement and extended functionality offered by web apps. As they are replacing websites, more and more developers are interested in how to develop web apps and attract more visitors to their web resources.
One of the challenges any aspiring developer can encounter before trying their hand in web application development is choosing the type and the component model of web application architecture. Our article will dot the ‘i’s on the matter and help you choose well.
Explain different categories of elements in HTML, proving examples for their use
HTML uses different types of elements to define content ➧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
Discuss the importance of CSS, indicating new features of CSS3
Cascading Style Sheets(CSS)
➧Used to
•Decorate / Format content
➧Advantages
•Reduce HTML formatting tags
•Easy modification
•Save lot of work and time
•Faster loading
Compare and contrast the 3 main types of CSS selectors
➧There are 3 main selectors
•Element selector
•ID selector
•Class selector
In the CSS,
class selector is a name preceded by a full stop (“.”)
ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
Class Selectors
In CSS we have this concept of selectors, in order for us to be able to style our html elements correctly, we have to ensure we use the right selector in the right place. Say, for example, we wanted to style all
<div> elements that feature the class equal to blue with a blue background. We’d have to create a CSS rule that applies to the .blue selector.
With this
.blue rule above, only the following html element would be styled with a blue background.
ID Selectors
If we want to style a html component that features an
id attribute that equalsblue then we have to use the # id selector which will style the single element tagged with this id.
The above rule will only style the element with the attribute
id="blue" like our <div> tag does below.
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):
Discuss the advanced CSS selectors, explaining the specificity
In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to
demonstrate the different selectors
- 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.
- nth-of-type Selector: It selects an element from its position and types.
- Syntax: Select a particular number tag to make changes.
- Direct Child Selector: It selects any element matching the second element that is a direct child of an element matching the first element.
Explain the use for CSS media queries in responsive web development
Media Queries
Media types
all
braille, embossed, speech, hanheld, projection, screen, tv
print, tty
<link media=“(min-width: 30em)” …
<link media=“screen and (min-width: 30em)” …
@media (min-width: 30em) { … }
@media screen and (min-width: 30em) { … }
Identify the pros and cons of 3 ways of using CSS (inline, internal, external)
Can be used as
1.Inline CSS
2.Internal CSS sheets
3.External CSS sheets
Identify the pros and cons of 3 ways of using CSS (inline, internal, external)
Inline CSS
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.
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 <p> 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 <p> 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.
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
Identify frameworks/libraries/plugins/tools to develop the Views/web pages, and discuss their similarities and differences
•There are many frameworks/libraries/plugins to support view development
•They dynamically generate HTML+CSS code
•In server and/or client side
•May have JS-based advanced interactive features
Discuss the client-side component development related aspects in browser-based web applications
•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)
Discuss the new features in JS version 6
ECMAScript 6 is also known as ES6 and ECMAScript 2015.
new features in ES6.
- JavaScript let
- JavaScript const Exponentiation (**) (EcmaScript 2016)
- Default parameter values
- Array.find()
- Array.findIndex()
No comments:
Post a Comment