Tutorial 09 – Introduction to client-side development

1. What are the main elements of client-side application components of distributed systems?


  Views – what users see (mainly GUIs)
  Controllers – contain event handers for the Views
  Client-model – Business logic and data


2. Discuss the Views development technologies for the browser-based client-components of web-based applications 0

#The MEAN Stack

The MEAN stack has emerged as one of the most popular web development technologies due to its powerful conglomerate of open-source JavaScript-based web development technologies:

• MongoDB: A cross-platform, document-oriented database program.
• Express.js: A framework designed for building web applications and APIs.
• AngularJS: A front-end web application framework developed and maintained by Google.
• Node.js: A server-side JavaScript run-time environment built on Chrome’s V8 JavaScript engine.

#PHP 7 and LAMP Stack

While PHP is one of the oldest and most popular web development technologies on the internet today, the LAMP stack stands for a combination of three open-source web development technologies – the Linux OS, the Apache HTTP Server, and the MySQL database management system – with the PHP

#Python and Django#Ruby and Ruby on Rails
#React.js and Vue.js#ASP.NET and MS SQL#Laravel#TypeScript#Swift

3. Discuss the Controller development technologies for the browser-based client-components of web-based applications

Model-view-controller is an architectural pattern used in software engineering. In complex computer applications that present a large amount of data to the user, a developer often wishes to separate data (model) and user interface (view) concerns, so that changes to the user interface will not affect data handling, and that the data can be reorganized without changing the user interface. The model-view-controller solves this problem by decoupling data access and business logic from data presentation and user interaction

J2EE, JSP, SERVLETS, AJAX, ADOBEFLASH

Libraries

strats, ApacheTiles, Hibernate, WebORB, DWR, Display tag, PD4ML, FCKEditor, ANT

Software

Tomcat, Mysql, Apache HTTP Server

https://www.magicwebsolutions.co.uk/Java-Web-Applications---Server-side-and-Client-sid.htm0

4. Discuss the client-Model development technologies for the browser-based clientcomponents of web-based applications

I. Client Side Scripting / Coding - Client Side Scripting is the type of code that is executed or interpreted by browsers.

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)

II. Server Side Scripting / Coding - Server Side Scripting is the type of code that is executed or interpreted by the web server.

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)
• Zend Framework (PHP's Object Oriented Web Application Framework)
• 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)

5. Explain different categories of elements in HTML, proving examples for their use

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

 6. Discuss the importance of CSS, indicating new features of CSS3

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.

Conclusion

CSS3 is more advantageous over CSS with a number of add-on properties. Most of these properties are a benefit to the web designer and programmer. In this article, we have discussed the advantages of CSS3 over CSS. Readers of the article are invited to submit their comments and views.