Ext JS 4
Currently applications are using more of JQuery and plugins, but developers are finding difficult to find plugins or modifying them as per the need. To resolve these issues, here is Ext JS by Sencha.
EXT JS 4 is a major step towards enhanced scripting. It brings a lot of controls and data packages when building web apps. The extension is built on MVC (model-view-controller) architecture which will encourage developers to use more layered scripting in an object oriented fashion.
All the default controls are already available (Web Desktop, grids, menus, trees, containers and much more). Developers can create MVC model/ View/ Controller and apply object oriented concepts there. All the communication is happening in the JSON format. We need not to find JQuery Plugins or create custom controls for our applications. This a new step towards making the application rich, faster and layered application at client side.
SASS (Synthetically Awesome Style Sheets)
SASS is the extension of CSS3 with variables, inheritance, rules and much more. It is much formatted style which reduces the effort for the developer to write different CSS for different elements.
Keep developing rich scripting and styling.. 
Open source CMS systems are the CMS systems that are available with complete source code and can be customized to fit the needs of your business.
Parameters to identify you need a CMS:-
• You need to change the content regularly
• You need to manually update the content
• There are multiple users managing the content
• A lot of time is spent in content update
• You have multiple versions of the same content
• You have multi-lingual content
• Same content is available at multiple locations and is inconsistent
Benefits of Open Source CMS
• No upfront cost and cheaper to implement – You do not need to pay any licensing cost which can be heavy sometimes. You might need to get a few customizations done based on requirement and would need to pay a development team for that.
• Complete flexibility of development and customization – You can customize the CMS based on your requirements and tweak the code/design as your need.
• Easy to find development teams and users worldwide– There are a lot of software service vendors available who specialize in open source CMS development.
• Features/extensions available- You can find a lot of features developed over the CMS and available for free or for some nominal fee.
• Ease of use: - You can get the CMS customized to be used in the way you would like to use it.
Drawbacks of Open Source CMS
• No direct support – There is no support available, you would need to depend on your technical team.
• Dependence on IT team – You would need to be more dependent on an IT team.
• Security Risks – As the code is available to everyone there are security holes that hackers can misuse.
• Documentation - Open source systems are not very well documented.
Algoworks believes in Open source CMS development and specializes in implementation, customization, support and migration from existing systems to Alfresco, Joomla, Drupal, Typo3, DNN CMS systems.
PART - I
CSS stands for Cascading Style Sheets. It is a style sheet language used in layout presentation of HTML and XHTML documents. CSS is used to separate the layout component (style) from the information component (HTML). It is very useful for the development of web page through this you can change the outlook of multiple page of a site e.g. suppose you have to change font-family of paragraph , for this you should have to set the font-family of paragraph in css file like this
p{
font-family : arial ;
}
And this will automatically change the font-family to arial for all pages.
There are three ways to insert the css style sheet into the HTML document:-
(1)Inline style sheet:- CSS can be inserted directly into the Html element tag. For this you should have to add the style attribute inside tag .e.g.,
<p style=” font-family : Arial; text-align : left; font-size : 18px”>
(2) Embed style sheet:- CSS can also be define inside the <head> tag instead of defining inside the element tag of Html document. e.g,
<head>
<style type = text/css>
p{
font-family: arial;
text-align: left;
font-size: 18px;
color: #000000;
}
</style>
</head>
(3) External style sheet:- In this type of style sheet the css style are declared in the separate file outside the HTML document. The css file is being saved with the .css extension.
To apply css style sheet you have to provide link of css file in the <head>…</head> of HTML document.
<head>
<link rel =”stylesheet” type = “text/css” href =” mystylesheet.css”>
</head>
Beside these three ways you can also import other css style sheet of a site in the <head>tag of the HTML document
<head>
<style type=”text/css”>
< @import url(http://www.sitename.com/externalstylesheet.css)>
</style>
</head>
<strong>SYNTAX:</strong>
Syntax of CSS consists of three attributes.
Selector {property: value}
Here selector is the element tag of html doc and property is the css property and the value is the value of the property. e.g,
div{
background-color : red ;
}
Here div is a selector, background-color is property and red is the value. There are mainly three types of selector (i) type selector (ii) class selector (iii) id selector.
(i)Type selector are existing HTML tag like < body>.
(ii)Class selector – the css of HTML tag can also be defined through their class name. For this we have to write dot (.)Class name e.g,
<div class = “test”></div>
In the css file we can define the css of the div like this
div.test {
background-color : red;
}
The benefit of class selector is that we can provide same css to all the similar selector having same class name.
(iii)Id selector - the css of HTML tag can also be defined through their id name. For this we have to write #id name .e.g,
<div id = “test”></div>
In the css file we can define the css of the div like this
#test {
background-color : red;
}
OR
div#test {
background-color : red;
}
The benefit of id selector is that we can define the css of a particular HTML tag.
<strong>Parent –Child selector</strong>
We can define the css of the tag which is defined under the other tag element. e.g,
div.test p{
background-color : red;
}
This will cause the background-color of paragraph to be red without affecting the background color of the div.
CSS Properties:
BACKGROUND
The name implies that using this you can set the background css of the element . The css background have the following properties :-
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
(i) background-color:- using this property you can set the background-color of HTML tags like body, h1 , p, table ,td, div etc.e.g,
div.test{
background-color : red;
}
table.test_table{
background-color : #0000FF OR
background-color : transparent;
}
(it will take the background color of other element inside which it is defined.If this table is defined inside the div then table takes the color of div because the background-color of table is transparent)
(ii) background-image :- this property is used to set the background-image of the HTML tag.e.g,
div.test{
background-image : url(myimage.jpg);
}
td.test_td{
background-image : url(myimage.jpg);
}
(iii) background-repeat: - this property specifies whether a small image will repeat by itself or not. However the default value is ‘repeat’ but you can set other value.e.g,
body {
background-image : url(myimage.jpg);
background-repeat : no-repeat; (background-image does not repeat) OR
background-repeat : repeat-x; (background-image will repeat horizontally) OR
background-repeat : repeat-y (background-image will repeat vertically) OR
background-repeat : repeat (background-image will repeat in both direction)
}
(iv) background-attachment: - this property specifies the image attachment to the background .It has two values ‘fixed’ and ‘scroll’ .
body {
background-image : url(myimage.jpg);
background-attachment : fixed; (image will be fixed and not scroll with the scroll bar) OR
background-attachment : scroll; (image will move alongwith the up and down of scroll bar)
}
(v) background-position: - this property specify the position of image in the background .The position of the image can be fixed by putting value like ‘top, center, bottom’ and ‘left, center, right’ or putting value in px, or %, .e.g,
body {
background-image : url(myimage.jpg);
background-position : center center; (image will be fixed to the center of the body) OR
background-position : 20% 20%; (image will be fixed at 20% horizontally and 20% vertically)
}
TEXT
CSS Text allows you to control the appearance of the text. CSS Text has following properties:-
• color
• direction
• line-height
• letter-spacing
• word-spacing
• text-align
• text-decoration
• text-transform
• text-indent
(i) color: - Using this properties you can set the color of the of the text.
p{
color : blue ; (the color of the text in paragraph will appear blue)
}
(ii) direction: - This css text property decide the direction of the text inside the tag. It has two values: ltr & rtl.
<p>You are a good boy</p>
p{
direction : ltr ; ( You are a good boy ——————————————- ) OR
direction : rtl ; ( ——————————————–Your are a good boy)
}
(iii) line-height: - This property specify the height between the two line.
<p>You are a good boy<br>and intelligent too</p>
p{
line-height : 20px; (You are a good boy
} here you can see the line height between two line is 20px.
and intelligent too)
(iv) letter-spacing: - This property is used to specify the space between two letter.
<p>You are a good boy</p>
p{
letter-spacing : 10px; (Y o u a r e a g o o d b o y )
}
(here you can see the space between the letters is 10px.)
(v) word-spacing: - This property is used to specify the space between two word.
<p>You are a good boy</p>
p{
word-spacing : 10px; (You are a good boy )
}
(here you can see the space between the words is 10px.)
(vi) text-align: - This property specify the alignment of the text inside the element. It has four values . left, right, center.
<p>You are a good boy</p>
p{
text-align : left ; (You are a good boy———————————) OR
text-align : center; (————You are a good boy————) OR
text-align : right ; (——————————————You are a good boy)
}
(vii) text-decoration: - This property specifies how to change the decoration of text.
<p>You are a good boy</p>
p{
text-decoration : underline ; (text will display with underline) OR
text-decoration : overline; (text will display with over line) OR
text-decoration : line-through ; (text will display with cross line)
}
(viii) text-transform: - This property control the text to display in upper and lower case.
<p>You are a GOOD BOY</p>
p{
text-transform : capitalize ; (You are A GOOD BOY) OR
text-transform : uppercase; (YOU ARE A GOOD BOY) OR
text-transform : lowercase ; (you are a good boy)
}
(viii) text-indent:- This property specifies how much space should be provided before the first line of a paragraph.
<p>You are a good boy<br>and you are a intelligent boy</p>
p{
text-indent : 20px ; e.g ( You are a good boy
} and you are a intelligent boy)
BORDER
CSS Border allows you to set the border of an element .CSS Border has following properties,
• Border-style
• Border-width
• Border-color
• Border-top, bottom, left, right
(i) border-style: - This property specifies the border format of an element.
p{
border-style : solid; e.g (this will display element with solid border) OR
border-style : dashed e.g ( this will display element with dashed border ) OR
border-style : double e.g ,
(this will display element with double border i.e element lie inside double border)OR
border-style : dotted e.g (this will display element with dotted border) OR
border-style : groove e.g (this will display element with grooved border) OR
}
(ii) border-width: - This property specifies the border width of the element.
p{
border-width: 5px; (this will display element with described border-width)
}
Beside deciding with pixel(px)the border-width can be by other values like thin, medium, and thick.
(iii) border-color: - This property specifies the color of the border.
p{
border-color : red; (this will display element with red border)
}
(iv) border: - Using this property you can set the border css in one declaration.
p{
border : #000000; 5px; solid (color, width , style) OR
border-top : red; 1px; dashed ;
border-left : blue ; 2px ; dotted ;
border-right : black ;3px; dotted;
border-bottom : green; 4px; dashed;
}
<strong>MARGIN</strong>
The CSS Margin specifies the space outside the element.
p{
margin-top : 10px (this will display element with 10px space at the top from outside) OR
margin-left : 10px (this will display element with 10px space to the left from outside) ) OR
margin-right : 10px (this will display element with 10px space to the right from outside) OR
margin-bottom : 10px (this will display element with 10px space to the bottom from outside)OR
margin : 5px ; (this will display element with 5px space all around from outside)
}
PADDING
The CSS padding is similar to the CSS margin but padding specifies the space inside the element.
<strong>TO BE CONTINUED IN (PART- II)…………</strong>
