INTRODUCTION TO THE CLIENT-SIDE DEVELOPMENT

Elements of client-side application components of distributed system

·        Views –what users see (mainly 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 client’s views comprises two main elements

                              content – HTML

                              formatting-CSS

               server/client-side components may generate the element of Views

Different categories of elements in html

                           

·        Structural elements

Header

               Used to contain the header contain of a site

                              Footer

Contains the footer content of a site

                              nav

               contains the navigation menu or the navigation functionality for the page

aside

               defines block of content that is related to the main content around it, but not central to the page flow

article

               contains a standalone piece of content that would make sense if syndicated as an RSS item

·        Text element

Headings -<h1> to <h6>

Paragraph-<p>

Line break-<br>

·        Images

·        Hyperlinks

·        form elements

§  Lists

§  Tables

·        Data representational elements

Important of css

·        Improve website presentation

·        Makes update easier and smoother

·        Helps web page load faster

indicating new features of CSS3

·        Multi-column layout

·        multiple backgrounds

·        Border image

·        Box shadow

·        Media queries

·        File size and loading time

Advanced CSS selectors

1.      Attribute selector – it selects a particular type of inputs

Syntax- input[type =”checkbox”]{

               background:orange;

}

2.      Class selector

class Selectors are 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 element as we want.

  syntax-

               .important{

               background-color:pink;

               }

3.      element selector – it selects the text enclosed inside the mentioned element

syntax- div{

background:green:

}

p{

               color:yellow;

}

4.      ID selector : it selects the changes made to a specific text on a page as it can be used only once on a page

#special{

               color: pink;

}

CSS media queries in responsive web development

the @media rule, introduced in CSS2 , made it possible to define style rules for different media types. media queries can be used to check many things :

·        width and height of the viewpoint

·        width and height of the device

·        orientation (is the tablet / phone in landscape of portrait mode?)

·        resolution

using media queries are  a popular technique for delivering a tailored style sheet to desktops , laptops ,tables and mobile phone

similarities and difference of framework/libraries/plugins/tools

·        there are many frameworks/libraries/plugins support view development

·        may have JS-based advanced interactive features

·        they dynamically generate HTML+CSS code

The client-side component developed related aspects in browser-based web-applications

·        controller

·        client-model

New features in JS version 6

·        default parameters

·        template literals

·        destructing assignments

·        enhanced object literals

·        arrow functions

·        multi-line Strings