Manisha Patil, Author at JavaBeat

Top 5 Best Free Online CSS3 Tools For Web Design

November 26, 2013 by Manisha Patil Leave a Comment

In this tutorial I shall list Free Online CSS3 Tools for creating CSS3 code that can facilitate job of development of interfaces with the latest version of CSS. Version 3 of CSS (Cascade Style Sheets or Cascading Style Sheets) is already in market for quite some time now, but for many it is still a news. This is due to the heterogeneity of adding support to browser version. Unfortunately, professional web developers, designers or programmers are still lurking over this historical issue of not being able to use the same HTML / CSS code to achieve the same result in all browsers.

And because you can not always use, many people end up forgetting some of CSS3 properties, the possible values, how to use, etc. It is very common to use the search tools to refresh your memory about using the @ font-face, border-radius and many other new properties of this version.

So some prefer to look for tools that would assist directly, generating a complete code for a particular purpose, say for example creating an element with rounded edges or a plan of gradient background. There are several such tools available today on the web which are entirely free. This article shall list five of them, that resolve most of our day-to-day situations .

1. CSS3 Generator

Figure 1: Main Interface of CSS3 Generator

The CSS3 Generator tool can be considered one of the most comprehensive available on the web. With a user-friendly and intuitive interface allows you to select one of the features of CSS3, configure it according to the need and generate CSS code.
When all required fields are completed, the result is automatically displayed in a reserved area on the right. Just below the fields to fill, you can check which browsers support the generated code and from which versions.
By clicking on one of the fields to fill out, view a small hint (floating message) indicating what types and ranges of values to be inserted there.
This powerful tool can be found at CSS3 Generator , which will likely be part of your favorite bar from now.

2. Please CSS3

Figure 2: CSS3 Please Tool

The CSS3 Please is a page containing CSS codes whose values can be changed automatically and the result seen in a floating element on the right side, as shown in the figure above.
This tool already includes the prefixes used by some browsers, such as webkit and assigns values to various CSS3 properties. You can also disable a set of properties to see how the element is not defined to have some properties, just click the “toogle rule off / on” option on each block of code. So you can just replace the values to the desired setting and copy the code.
To use CSS3 Please, visit CSS Please.

3. CSS3 Button Maker

Anyone working with the design and implementation of graphical user interface web pages, you know that one of the most common needs in day-to-day is to create custom buttons, trying to get away from that old standard, usually gray.
To create a button with more style, you must change its borders, the font, the color of the background, the effects that occur when the cursor is placed over the button, among other settings.
To facilitate this, there is a CSS3 Button Maker, a tool that allows you to configure all the appearance and behavior of the button and copy the code ready.

Figure 3: CSS3 Button Maker

In this tool you can set the thickness and edge radius, color background, including gradient, size, font, and other key features to this type of interface element.
Access CSS3 Button Maker and check out what this tool has to offer.

4. CSS3 Gradient Generator

Another visual feature that gives a bit of work to set up the plan the elements when we need a degrade effect to be applied, or gradient, ie using various shades of color.
This is one of the properties that has different ways to set up, depending on the browser. And as the goal is almost always to offer an independent solution browser, you must use multiple prefixes (webkit, the, moz, ms) so that the result is the same in all browsers.

Figure 4: CSS3 Gradient Generator

Just choose the color, or options availble in the preset table (figure above). You can also customize your coloroptions. The colors can also be chosen in RGB or hexadecimal format.
The observation of the code is also a good way to learn (or memorize) the properties and values used.
The CSS3 Gradient Generator can be accessed by the address CSS3 Gradient Generator.

5. CSS3 Transforms

Transformations allow you to change the appearance and position of an element, rotating, resizing, etc..
How are various possible transformations and many of them require the use of prefixes (webkit, moz, the, ms) to work equally in all browsers, even those who only use frequently can write the code with ease. Several properties and possible values, which confuses some who are learning or not use as often.
Professionalism aside, why bother memorizing these properties, when you can easily get the required code with the aid of a tool easy to use?
For this, there’s Transforms tool, which allows you to configure 2D and 3D transformations, as well as animations, just by assigning values to properties from a data entry form. The result of the configuration is automatically displayed in a box on the right.

Figure 5: CSS3 Transforms

After defining values, the code can be copied from the area “The code”. Just below this section, are shown browsers that support these features as well as their versions.
The address of this tool is CSS3 Transforms.

Summary

These some of the five tools which aim to streamline and facilitate the work of those using CSS3 on your pages. So why not save these links in the bookmarks bar ? After all, you never know when you’ll need to create a custom button, a background with gradient color or apply transformations and animations to an element with CSS. Hope you liked the article.

Less Known Tags of HTML5

November 21, 2013 by Manisha Patil Leave a Comment

In this article I shall discuss about some of the HTML5 tags which are unused by most users of HTML. We will see the syntax of these, how to use them and some examples of how to use them. Many web developers deal hundreds of line of HTML code daily. The language developed to deal with the entire management of web content, defining standards of tags named for a specific purpose for each one, now dominates the universe of front-end development with regard to the organization of elements on the screen, hypertext.To be a good web developer, you must know HTML tags and their its use well.

There are some tags which are either forgotten or less used by programmers. In the following sections, I have discussed few tags, some of them even bringing benefits in terms of SEO (Search Engine Optimization), ie, higher ranking in web search results. This article is to show some of these tags with syntax, usage, attributes, practical examples and explanations of what they do.

Navigation Features in Foundation Framework

Creating Pie Chart Using CSS3 and HTML

CSS Z-Index example

Tags <abbr> (abbreviation) and <acronym>

These two are very similar in its basic form. When used with the “title” attribute and hover over the text, the title will be shown in the form of tooltip, and is recognized in almost all browsers. However, the use of javascript frameworks like jQuery as many do, the power of these tags is more in evidence. You can create custom balloons to be displayed as a tooltip with the definition of CSS, etc.. leaving the code used flexible and elegant.
An acronym is the initial letters of some words (e.g.Hypertext Mark-up Language => HTML), while an abbreviation is a shortened form of a word (e.g. Doctor => Dr). These are often used to pass the meaning of an acronym, as is shown in Listing 1 and 2. The results of the browser can be checked in Figures 1 and 2, respectively.

Listing 1 . Example use of tag

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<br><br>
<acronym title="World Wide Web"> WWW </acronym> is an international community. </body>
</html>
[/code]

Figure 1 – Results Listing 1 – Acronym

Listing 2 . Example use of tag

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Abbrevation Example</title>
</head>
<body>
<br><br>
<abbr title="Doctor"> Dr. </abbr> Sharma did not attend the meeting.
</body>
</html>
[/code]

Figure 2 – Results of Listing 2 – Attr

Tag <cite>

Everyone already knows well the tag <blockquote> , used to store quotes of others. But one not so common tag <cite> refers to the reference work, service, etc. in question. It basically allows you to set the text within the element as a reference. Normally the browser will make the text inside the tag <cite> in italics, but this can be changed with a touch of CSS. The tag <cite> is really helpful to include references and other places. In Listing 3 is an example of how to use the tag in a paragraph:

Listing 3 . Example use of tag

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Cite Example</title>
</head>
<body>
<br><br>
<p> My famous quote from … – some source <cite> Publications in a Web Programmer </cite>
</body>
</html>
[/code]

Image2_cite
Figure 3 – Results of Listing 3 – Cite

Note in the above listing the tag will not bring much change except the placement of italics. Furthermore, using this tag on your pages benefits in the category of SEO ranking for search engines.

Tag <fieldset>

This tag is used to define and for better organization of form elements within them. To use it the browser renders a border around the square representing the fieldset and together with the tag <legend> you can add a title to the table. In Listing 4 you can see an example of use of tags in an HTML form. Note that the use of tag is waived for reducing code. See the result in Figure 3.

Tag <Otgroup>

The tag <optgroup> is a great way to add a little definition between the groups of options within a box, famous combobox. To understand better, see how it would organize a combo with levels and sub levels through the style of lists in HTML in Listing 5 which is an example of organizing movies by titles.
Listing 5 . Example use of tag <optgroup>

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Optgroup Example</title>
</head>

<body>
<br><br>
<select id="films" name="films">
<optgroup label="Action">
<option value="sprider_man"> Sprider Man</option>
<option value="mission_impossible"> Mission Impossible </ option>
</optgroup>
<optgroup label="Kids">
<option value="shrek"> Shrek</option>
<option value="princess_diaries"> The Princess Diaries </option>
</optgroup>
</select>
</body>
</html>
[/code]

See Figure 5 the result of the same code. Pay attention to the spaces between each data item in the sublist.

Figure 5 – Results of Listing 5 – optgroup

If you want to display editing or revisions with marking, use <ins>, <del>. As the name indicates, the tag <ins> highlights what’s been added to the document with an underscore, and the tag <del> shows what was removed with a strike through (Listing 6).
Listing 6 . Example use of tags and<ins>, <del>

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Optgroup Example</title>
</head>
<body>
<br><br>
<p><del> This text is deleted </del></p>
<p><ins>This text is added newly</ins></p>
</body>
</html>
[/code]

Check the result in Figure 5 for the text in Listing 5.

Figure 6 – Results of Listing 6 – ins and del

Tag <q>

The tag <q> has a purpose quite interesting but little explored. The tag is used for quotes embedded in a document. The concept is that the browser must surround the text with (‘) character (‘) . When it is necessary to use quotes within quotes, or sayings of insiders to another speech, this tag can be used well. Check in Listing 7 is a clear example.

Listing 7 . Example use of tag <q>

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Q tag Example</title>
</head>
<body>
<br><br>
<q> John said <q> Good morning everyone! How <q>? </ q> </ q> replied Ana </ q>
</body>
</html>
[/code]

The result of that listing will be:

Figure 7 – Results of Listing 7 – q tag

Summary

This article discussed some of the HTML tags which are less known. There are many other tags which are not included in the list above like <wbr> search by tags, <adress>, <section>, <nav>, <footer>, <dl> <dt> and <dd>, <dfn>. Hope you liked the article.

Deprecated Tags and Attributes in HTML

November 17, 2013 by Manisha Patil Leave a Comment

In this tutorials I’ll give an explanation about the deprecated tags and attributes with new versions of HTML. We will understand why and what to use in exchange of these tags and attributes. As is known to many, HTML 5 was released some time ago. Along came the uproar about the new features, functionality and features which became agenda of many articles, websites, projects and even new businesses.

Parallel to this, and sort of indirectly some changes have undergone into programming. Some of these changes also involved the removal of the base HTML language: their tags. Everything you need to know after the understanding of web protocols, the internal function of language is the correct usage of HTML tags, to develop a simple web page.

Just like in any large language, the evolution of the HTML was backed with the deprecation too. Deprecation of specifications, concepts, practices and, in the case of HTML, it was tags. This tutorial aims to explain a bit about some tags and their attributes that have deprecated with the emergence of new releases, as well as understand why this happened, substitute resources, etc.

Offline Web Application using HTML 5

HTML 5 Validator

Obsolete Tags in HTML

Check out the Table 1 , which contains a listing of some tags with description and explanation of what happened after deprecation.

Tags Deprecated	Description	Tag Substitute
<applet>	Inserts an applet page	<object>
<basefont>	Sets the font styles	CSS font styles
<center>	Centralizes the elements internal to the tag	CSS style. Ex: “text-align: center”
<dir>	List of directories	<ul>
<u>	Underline	Use CSS text styles
<strike> and <s>	Strikes the text wrapped	Use CSS text styles
<font>	Set font style for the text wrapped	CSS font styles
<isindex>	Adds search field	<form>
<menu>	List of menus	<ul>
<acronym>	Creates an abbreviation with hint of what it means	<abbr>

Table 1: List of tags and their deprecated replacement

Note that two values in the same table were marked red. See below why:

<u> Tag: A tag u, coming from underline, and acted in the text in order to emphasize it was undervalued in view of the confusion that some users had when they saw compared to a hyperlink, for example. This is redundant compared to the use of the CSS to this, since there is still the possibility to use it with style effects.
<font>: This tag was disabled already a long time back and is regarded as an “anti-tag”, because their use violates the precepts of style with CSS. However, it is still very common to use the same old pages or mainly for users who do not feel comfortable using CSS for it.

For all other cases, it is too easy to identify the reason for the replacement or even abolition.

The tag <center> eg is routinely called “lazy tag” because it is widely used to centralize elements when they should have such an effect applied via a CSS style. The new specification is deprecated its effect, including using it in conjunction with a table (<table>) for aligning the same and their respective internal elements.
Along with this, the element <table> also happens to not be used to align forms or other elements in a HTML page, feature hitherto widely used by designers and web developers. You can no longer view such components without the edges of the rows and columns to achieve the organization . For this purpose, it is necessary the use of divisions (<div> ‘s) combined with the CSS styles.
Some other tags that make too meaningless or a scope too obsolete to the reality of the web today, such as <dir> and <acronym>. Particularly, <marquee> tag should have already entered the list as well, effects of of which can be obtained through JavaScript libraries or even plugins like Flash or Silverlight.

Obsolete Attributes in HTML

As much as many deprecated HTML tags, in larger quantities too many HTML attributes were also deprecated. Check in Table 2 a list of attribute values for HTML tags that went “down the drain”.

Attribute	deprecated in tag (s):
align	caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr
rev, charset	a, link
shape, cords	a
alink, link, text	vlink, body
background	body
clear	br
char, charoff	col, colgroup, tbody, td, tfoot, th, thead, tr
color	basefont, font
border	img, object
hspace	vspace, img, object
link	body
noshade	hr
nowrap	td, th
type	li, ul
value	read
vlink	body
width	hr, table, td, th, col, colgroup, pre
vspace	img, object

Table 2: Table of obsolete attributes in HTML 5

All these attributes can be replaced by obsolete controls using style sheet. Most can simply be connected directly to the stylesheet. For example, the test element # added to each page has certain attributes pre-defined style sheet common to all major pages, as in Listing 1 .

Listing 1: Example of standard CSS for all pages

[code lang=”html”]
#test {vertical-align:middle; margin:25px; width:29; height:31; border:none;}[/code]

<td width=”?”… /> for example, is also no longer allowed, you can apply this style using CSS .

Summary

To preserve compatibility and for the sake of customer satisfaction, many browser vendors provide support elements deprecated. But this can not happen forever, as can be observed in other languages, such as Java,. Net, etc.. The general recommendation is to try other ways of achieving, where possible, their effects always updating your code.

Create Buttons using jQuery UI

November 17, 2013 by Manisha Patil Leave a Comment

In this tutorial we will see how to create stylized buttons using the jQuery UI library. In reality 100% of the systems we develop, whether desktop, mobile or web, there are situations where it is required to submit data by the user. And to submit these data or even to perform a simple action like opening a new window, the most common practice is to use buttons.

When we need this type of element (button) on web pages, usually we are resorted to traditional tags <button> and <input>, but these have always the same standard look and which the user is often sick of. Seeking to improve the look of the buttons, we can apply styles with CSS and Javascript effects with, which ensures a considerable improvement in the application interface. In these cases we change the background color, borders, font, and sometimes insert small images on the buttons, facilitating the identification of the function of the same.

Navigation Features in Foundation Framework

Introduction to Foundation 3 Framework

In this tutorial we will see how to stylize buttons in simple and practical manner, using the jQuery UI library, which is based on jQuery combined with efficient cascading style sheets. With it, we will see that even links (tags <a>) can become stylized buttons.

Definition from jQuery UI Team:

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Importing the jQuery UI library

To use the features of this powerful library, you only need to import three files in the HTML document:

the jQuery library (Javascript file)
the actual jQuery UI (Javascript file)
and the stylesheet jquery UI (CSS file)

Add the following tags under the header of the HTML page.

Listing 1: Import the jQuery UI

[code lang=”html”]
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"> </ script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"> </ script>
[/code]

It is essential that the jQuery script is referenced before the script of jQuery UI, because the second depends on the syntax of the first to run.

Basic Buttons using jQuery UI

In the first example we will see how to get the buttons on the most basic way possible, what can be done with a call to the function button() from the element you want to style. In the following case, we use the button tags, and anchor input to create the buttons.

Listing 2: Creating basic buttons using jQuery UI

[code lang=”html”]
<!doctype html>
<html
<head>
<meta charset="utf-8" />
<title>Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$("input[type=submit], a, button").button();
});
</script>
</head>
<body>
<button>Button Tag </button>
<input type="submit" value="Input Tag(submit)" />
<a href="#">Anchor Tag (a)</a>
</body>
</html>
[/code]

As we can see, the syntax is quite simple. First use jQuery to select the three elements from the tag names and then call the function button, responsible for shaping element. The result of this code, when saved in a html file extension and open the browser, is the following.

Figure 1: Basic buttons

Groups of Buttons

Often we have several buttons whose functions are related somehow. In such cases, you may want to group them in order to make it clear that they are similar in some way. For these cases there is Buttonset function () which when applied to a div tag containing buttons, makes a “bar” of tools, grouping the items. When using the function Buttonset, the call to the function button for the individual buttons no longer needed, they are automatically stylized, as we shall see in the following example.

Listing 3: Created group of buttons

If necessary, you can also use links and inputs and these would also be formatted. The result is shown in the following figure.

Figure 2: Buttons grouped

Checkboxes and Radios

With jQuery UI it is also possible to stylize input from checkbox and radio types so that they are similar to buttons, avoiding some of the visual pattern. Reaffirming the simplicity of use that library, formatting checkboxes and radio is made in exactly the same way as for common buttons.

In the following example we have checkboxes and radios, clustered and non-clustered, marked and unmarked, to illustrate the general operation of the button functions and Buttonset for these elements.

Listing 4: Creating checkboxes and radios

[code lang=”html”]
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Button</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$(".Checking").button();
$("#bar").buttonset();
});
</script>
</head>
<body>
<h1>Checkboxes</h1>
<input type="checkbox" class="check" checked="ckecked" id="chk1"/><label for="chk1">Marked</label>
<input type="checkbox" class="check" id="chk2"/><label for="chk2">Unchecked</label>
<h1>Radios</h1>
<div id="barra">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Option 1</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Option 2</label>
<input type="radio" id="radio3" name="radio" checked="checked" /><label for="radio3">Option 3</label>
</div>
</body>
</html>
[/code]

Figure 3: Checkboxes and radios stylized

As it turns out, the look is much more appealing than the standard.

Summary

You can also add icons to the buttons and create submenus (split buttons),. This tutorial aims to give an overview of the element jQuery UI Button. For more information about this feature, a suggestion is to visit the jQuery UI page and read the official documentation of the library at the address JqueryUI .

Use Flexbox in CSS3 For Creating Flexible Layouts

November 13, 2013 by Manisha Patil Leave a Comment

In this article we look at the operation of flexbox in CSS3, their properties, and examples of applications and how to create flexible layouts with CSS3. Flexbox or else Flexible Box Model is a new concept in CSS3 which aims to organize and align the HTML elements in a dynamic and very easy. Forget the old alignment of HTML elements with properties such as float , or with calculations and attitudes that just plastering your layout. The flex-box came to remedy the use of these properties and make your layout more flexible and responsive.

Flexbox Properties and Values

Before applying this “magic” tool in a few examples , let’s see the operation of the properties and their values. The element forming the flexible called Flex container and the child elements of the container Flex are called Flex Items. To create a Flex Container on a project use the property display with the value flex or inline-flex :

display: flex; – determines that this element is a block.
display: inline-flex; – determines that this element is inline block.

In Listing 1 and Listing 2 we have the example of the creation of the divs and classes.

Listing 1: Html code

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset= utf-8"/>
<link href="flexbox.css" rel="stylesheet" type="text/css"></link>
<title>Flex Box</title>
</head>
<body>
<div>
<div>ChildOne</div>
<div>ChildTwo</div>
<div>ChildThree</div>
</div>
</body>
</html>
[/code]

Listing 2: CSS content in flexbox.css

[code lang=”html”]
.divParent{
background:#CCC;
display:flex;
}

.divChildOne, .divChildTwo, .divChildThree{
background:red;
color:#FFF;
padding:3px;
border-radius:10px;
}
.divChildTwo{
background:green;
height:100px;
}
.divChildThree{
background:blue;
height:230px;
}
[/code]

Open the HTML code in the Lsiting 1 in your browser and the an output as shown below would be displyaed:

Figure 1.The output

By applying the property display: flex, the div “divParent “ , created a Flex Container. For the flex-box to really make sense, it must be shown to Flex Container as Flex Items must be organized in the container with the following properties:
1. flex-direction: this property specifies whether the Flex Items will be positioned on the horizontal axis, inverted horizontal, vertical or inverted vertical.
Values :

row, row-reverse, column, column-reverse.
Flex-direction: row; (default): sorts the Flex Items horizontally.
Flex-direction: reverse-row; : sorts the Flex Items reversed horizontally.
flex-direction: column;: sorts the Flex Items upright.
Flex-direction: column-reverse;: sorts the Flex Items upright but with the order reversed.

2. flex-wrap: this property specifies whether the Flex Items will be broken into multiple rows and columns based on the space of Flex Container or simply will not be broken.
Values:

None, wrap, wrap-reverse.
Flex-wrap: none; (default): This value is the default and specifies that the Flex Items will be arranged in one row and one column.

<li>Flex-wrap: wrap; : Specifies that the Flex Items will be arranged in multiple rows and columns, depending on the size of Flex Container .

Flex-wrap: wrap-reverse; : the operation is similar to the wrap , but reverses the order of Flex Items.

3. flex-flow: is a junction between direction-flex and flex-wrap .
Values: Value (flex-direction) | | value (flex-wrap).

4. order: Sort child elements according to the number specified in each.
Properties: Integer Number.
Default value: 0.

Below we see the properties of flexibility:
5. flex-grow: This property determines that a particular Flex Item grow towards others.
Values: Integer Number.
Default value: 0.

6. flex-shrink: Determines how Flex Item will reduce towards others.
Values: Integer Number.
Default value: 1.

7. flex-basis: Fits determine the default value of the Flex-Item . The operation is similar to the width .
Values: Integer Number + Unit of Measure.
Default value: auto.

8. flex: is the junction of the above properties flex-grow , shrink-flex and flex-basis .
Values: Value (flex-grow) | | value (flex-shrink) | | value (flex-basis).

Below we see the alignment properties :
9. justify-content: Used to distribute the Flex Items online the way you would agree, according to the space provided by the Flex Container .
Values:

Start-flex, flex-end, center, space between, space-around.
Justify-content: flex-start; (default) – It is useful for those who want to align Flex Items for the beginning of the line of Flex Container . And all Flex Items are placed side by side without leaving any gaps between themselves.
Justify-content: flex-end; – Similar to flex-start , however, the child elements are positioned at the end of the line -Flex Container .
Content-justify: center; – Similar to the above values, the value center position the Flex-items in the center of the line without leaving gaps between them.
Justify-content: space between; – This value is something truly “magical” in CSS3. The space-between is able to distribute all Flex Items by line uniformly. He places the first Flex Item stuck with the beginning of the line of Flex Container and the last pasted with the end of the line, and the other Flex Items scattered along the line spaced equally distributed.
Justify-content: space-around; – This property is another tool “magic”, similar to the operation of space-between , but the spaces before the first Flex Item and then the last half of the spacing are assigned to other flexible items within the container .

10. ALIGN-items: This property is used to position the flex Items vertically according to the vertical space of the container Flex .
Properties:

Stretch, flex-start, flex-end, center, baseline
Align-items: Stretch; (default) – This value is able to stretch vertically all Flex Items up to the height limit of Flex Container .
Align-items: flex-start; – With this value the child elements are positioned next to each other without leaving gaps between itself and aligned on top of Flex Container .
Align-items: flex-end; – Similar to value flex-start , the child elements are positioned at the bottom of Flex Container .
Align-items: center; – Locates all child elements vertically in the center of the Flex Container.
Align-items: baseline; – All Items Flex are aligned with the baseline of the child element which occupies more space perpendicular to the axis of the arrangement.

11. Self-align: is used by a child element to modify the value defined by align-items .
Values:

Auto, flex-start, flex-end, center, baseline, stretch.
Self-align: auto; (default) – Maintains default value of align-items . If align-items is not set, the child element is stretched.
Self-align: flex-start; – Ignores the value set in items-align and position the Flex Item early in the axis perpendicular to that defined by flex-direction .
Self-align: flex-end; – Similar to flex-start , but positions the Flex Item at the end of the axis perpendicular to the defined flex-direction .
Self-align: center; – Positioning Flex Item is centered on the axis perpendicular to that defined by flex-direction .
Self-align: baseline; – Align the element with the base of Item Flex occupies more space perpendicular to the axis of the arrangement.
Self-align: stretch; – Ignore what was defined in align-items and stretches the element .

12. align-content: This property is similar to property -justify content . However, this property takes effect only when the Flex Container has multiple lines. This property aligns the lines inside the Flex Container axis perpendicular to the property defined flex-direction .
Values:

Stretch, flex-start, flex-end, center, space between, space-around.
Content-align: stretch; (default) – Stretches the lines to the limits of Flex Container .
Content-align: flex-start; – Aligns the child elements at the beginning of the shaft .
Content-align: flex-end; – Aligns the Flex Items at the end of the shaft.
Content-align: center; – Centralize the Flex Items axis.
Align-content: space between; – First Item Flex stands side by side with the first axis and the latter along with the end. The child elements also divide the remaining gaps between them, filling the entire container.
Align-content: space-around; – The child elements are divided equally spacing between them, filling the whole Flex Container . The spaces before the first item Flex and after the last half of the spacing are assigned to other flexible items within the container Flex .

Let’s list a few more examples with the current settings.

Creating an Ordered Menu using Flexbox

In Listing 4 and 5 have structures with only three properties of Flexbox to sort menu.

Listing 4: HTML code displaying the menu

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset= utf-8"/>
<link href="flexbox2.css" rel="stylesheet" type="text/css"></link>
<title>Flex Box</title>
</head>
<body>
<nav>
<a href="#">HOME</a>
<a href="#">PORTFOLIO</a>
<a href="#">SHOP</a>
<a href="#">COMPANY</a>
<a href="#">CONTACT</a>
</nav>
</body>
</html>
[/code]

Lisitng 5. Organization and alignment menu using CSS

[code lang=”html”]
body{
background:#EEE;
}
nav{
background:#AAA;
width:700px;
height:35px;
margin:10px 0px 0px 10px;
justify-content:space-around;
align-items:center;
display:flex;
}
.btn{
background:#111;
width:100px;
height:20px;

font-family:Veranda,Geneva, sans-serif;
font-size:10px;
color:#FFF;
text-decoration:none;
text-align:center;
}
[/code]

Open the HTML code in Lisiting 4 in a browser and you would see an output as below:

Figure 6. Results menu organized with Flex Box .

Creating an ordered layout easily

See in Lisiting 7 and 8 examples of how easy it is to organize the layout elements. Note that there has been no kind of calculation, only aligned using flex-box .

Listing 7. HTML code with declaration of tags, divs and classes

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset= utf-8"/>
<link href="flexbox3.css" rel="stylesheet" type="text/css"></link>
<title>Flex Box</title>
</head>
<body>
<article>
<section>
<div></div>
</section>
<section>
<div></div>
<div></div>
<div></div>
</section>
</article>
</body>
</html>
[/code]

Listing 8. Organizing the layout to justify content-, flex-direction, align-items and self-align Using CSS

[code lang=”html”]
*{
border-radius:10%;
padding:10px;
}
article{
background:#AAA;
width:500px;
height:300px;
margin:5%;
justify-content:space-around;
display:flex;
}
article section:nth-child(1), article section:nth-child(2){
background:red;
width:180px;
display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
}

article section:nth-child(1){
background:blue;
justify-content:flex-end;
align-self:flex-start;
}

.childone, .childtwo{
background:#FFF;
width:30px;
height:20px;
}
[/code]

Open the HTML code in Listing 7 in your browser and you would see and output as below:

Figure 9. Results final layout

Summary

We saw few examples on how to use Flex Box feature. Do some examples yourself and see how easy it is to play with this tool. Use the Flex Box in your layouts and observe how they will be well accepted in various screen dimensions. If you have any thoughts, please write it in the comments section.

Introduction to Backbone.js

November 10, 2013 by Manisha Patil Leave a Comment

The Backbone.js is a JavaScript library using which you can make various web applications. In this article I’ll give an introduction to it and explain to develop an application using Backbone.js. When developing a web application you will inevitably work with the javascript language to handle DOM manipulation or some other needs.

There are many JavaScript libraries, such as Backbone.js, Derby.js, Meteor.js, Knockout.js, Ember.js, Angular.js, and Spine.js , that will make task easier, the library more popular, as we all know is the Jquery. But when our application gets larger the code will have a structure to make it easy to maintain, absolutely jQuery alone can not do this. This is where Backbone comes to play.

What is Backbone.js?

Backbone.js is a JavaScript library that provides structure to your applications, adapts the concept of MVC (model, view, controller) pattern that was implemented at the beginning of the server-side language such as PHP. Simply put, it makes the task of developing JavaScript applications considerably easier for you. But the backbone is not considered a true MVC because C in the backbone stands for the collection instead of Controller. But this gives similar functionality. For those who are not familiar with the terms of the MVC pattern let me give a brief description:

M stands for “Model”, the backbone is simply an object that represents the data.
V means “View” display is responsible for dealing with what to serve / display to the user. View is data bound together or model.
C backbone is “collection” as one mentioned earlier. Collection is the collection model, your responsibility to deal with a set of data (which is stored in the model).

The idea of MVC is separation of concern. This idea is fairly good, because if you keep large codes of your application, you can edit some parts of your code without affecting the other. For example, if you need to update the user interface of your application, you will only need to change the codes within a vision without the need to change the model or collection.

What is Foundation Framework?

When do I need Backbone.js?

If you are developing a web application that requires a lot of javascript.
If your application needs to be scalable, you will need backbone to give structure to your code.
If you are building a web application and works very fantastic with lines of jQuery to traverse the DOM, or give animations, many binding events for your application, you will certainly want to use the Backbone.
If you are creating a theme for wordpress, you will probably need a bit of jQuery, you do not need to use backbone.

The conclusion is that if you want to bring your front-end to the next level, a higher level, you will need to use backbone.

What I need to know before working with backbone?

This advice is only for beginners. Many people understand how to use a javascript library like jQuery, but this is not enough to understand how it works with backbone. You need to know about object-oriented programming.

How do I install backbone?

Installation is simple and straightforward, such as when you install jQuery, you will call the library somewhere in your application. Backbone relies on a utility belt called underscore.js. Therefore, before calling library backbone make sure you call underscore.js first. See the listing below:
Listing 1 : Setting the minimum requirement to work with backbone

[code lang=”html”]
<! DOCTYPE html>
<html>
<head>
<title> Backbone App </title>
</head>
<body>
<script src="js/jquery.js"> </script>
<script src="js/underscore.js"> </script>
<script src="js/backbone.js"> </script>
</body>
</html>
[/code]

Download the underscore.js here http://underscorejs.org/
Download the Backbone.js here http://backbonejs.org

After downloading all the necessary files, put the files in a folder called ‘js’ in the root of your application and call the script as the above listing.

Remember that underscore.js must be called before Backbone.js.

Backbone.js as I mentioned earlier, provides the framework for your code, implementing the standard MV* on the client side. Let me show you a little difference in delegations of events between jQuery and Backbone.

Listing 2 : Using jQuery event delegation

[code lang=”html”]
$(‘div.open’).click(function(){ …. your code goes here ….. });
[/code]

Listing 3 : Backbone using event delegation

[code lang=”html”]
//this code is inside a backbone view object
events : {
“click div.open” : “openDialog” //if user clicks ‘div’ with class ‘open’ run the ‘openDialog’ methods
},
openDialog : function () { … you code goes here …}); //define your openDialog methods as callback
[/code]

There is not much difference between them. While jQuery chaining mechanism provides line that will probably give you the codes of spaghetti as the application becomes larger. Backbone provides more structural approach, where events delegations call is the property of “events” within a display object and separate the other callback methods. Let’s see another example of using event delegation backbone.

Listing 4 : Delegation various events using Backbone

[code lang=”html”]
//This code goes inside the object backbone
events : {
“click div.open” : “openDialog”
“dblclick span.edit” : “editPost”
“click a.close” : “closePost”
},
// Here define the callbacks
openDialog : function (e) { … code here ..},
editPost: function(e) { … code here… },
closePost: function(e) { … code here.. }
[/code]

Other Examples using Backbone.js

Below we will see other examples of code where the Backbone.js is used.

Listing 5 : Creating the class view of a hello world

[code lang=”html”]
var HelloView = Backbone.View.extend({
el: $(‘body’),
initialize: function() {
this.render();
},
render: function() {
$(this.el).append("<h1>Hello World</h1>");
}
});
[/code]

After creating the class, the more important thing is to instantiate the view and initialize method which will occur automatically inserting the H1 to the body.

Listing 6 : Instantiating a view

[code lang=”html”]
var view = new helloView ();
[/code]

The complete code can be seen in Listing 7.

Listing 7 : The complete hello world

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="../lib/jquery-min.js"></script>
<script src="../lib/underscore-min.js"></script>
<script src="../lib/backbone-min.js"></script>
<script>
$(document).ready(function() {
var HelloView = Backbone.View.extend({
el: $(‘body’),
initialize: function() {
this.render();
},
render: function() {
$(this.el).append("<h1>Hello World</h1>");
}
});
var helloView = new HelloView();
});
</script>
</head>
<body></body>
</html>
[/code]

Summary

Remember, as I said it depends on the backbone underscore, it means that you can also use the power of the underscore in the backbone. To learn more about the subject, I suggest you look at the official website of the underscore and see the magic that the backbone can do.

Navigation Features in Foundation Framework

November 7, 2013 by Manisha Patil Leave a Comment

In this article I’ll discuss some more features of the Foundation 3 framework. In the previous article Introduction to Foundation 3 Framework , we saw some of the following features offered by Foundation 3 framework:

Forming basic HTML sturucture using GRIDS
Typography
Buttons

In this articles I’ll cover Navigation using the foundation framework. Refer the article Introduction to Foundation 3 Framework on how to download and setup the Foundation 3 framework in your application.

also read:

Navigation Options in Foundation Framework

The framework provides navigation options for number of situations, like:

Top Bar
Navigation Bar
Vertical Navigation
Side Navigation
Sub Navigation
Pagination
Breadcrumbs

Let us see an example for each one these in the sections below:

1. Top Bar

This framework provides a fixed bar on the top of the page. By default the responsive layout has width of 940px, but you can change that by updating your Scss settings file or changing it with the customizer upon download. An example is shown in the Listing 1 below:

Listing 1: Top Bar example

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example Grid Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

<div class="row">
<div class="twelve columns">
<nav class="top-bar">
<ul>
<!– Title Area–>
<li class="name"><h1><a href="#">Top Bar Title</a></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>

<section>
<!– Left Nav Section –>
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">
<a class="active" href="#">Item 1</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li class="has-dropdown">
<a href="#" class="">Level 1, Has Dropdown</a>
<ul class="dropdown">
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li class="has-dropdown"><a href="#">Level 2, Has Dropdown</a>
<ul class="dropdown">
<li><label>Section</label></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li class="divider"></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li class="divider"></li>
<li><label>Section Name</label></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
<li class="divider hide-for-small"></li>
</ul>

<!– Right Nav Section –>
<ul class="right">
<li class="divider show-for-medium-and-up"></li>
<li class="has-dropdown">
<a href="#">Item 2</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li><a href="#" class="">Level 1</a></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><label>Section Name</label></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
</body>
</html>

[/java]

Open the above html in your browser, you can observe an output as below:

Details of the above file:
The three main elements are:

The title ul
one of the section ul class=“right/left elements
and the li.toggle-topbar element that will expand the menu in the responsive layout.

To position the bar we use a single nav element with a class of top-bar. It will take on full browser width by default. Depending on where you want your links, use the class ul.left and/or ul.right. Simply add items using li. To build a drop down menu you’ll need to add has-dropdown to the li and include ul.dropdownright after that anchor. Add a class of active to mark the current page. I’ve also included the divider using the class li.divider, this will give some separation. You can also include a button (has-button ) and search/text (using class search).

2. Navigation Bar

The default top nav bar provided by this framework includes the main nav options as well as hover dropdowns that support either a list of anchors or arbitrary content (even Grid content). An example is as shown in the listing 2.

Listing 2:Nav bar example

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example Nav Bar Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

</div>
</div>
</li>
</ul>
</div>
</div> <script src="foundation/javascripts/foundation.min.js"></script>
<script>
$(document).foundationNavigation();
</script>

</body>
</html>
[/java]

Open the file in your browser and you would an output as below:

Details of the above file:
In the above file we observe that:

A basic nav bar is created using class nav-bar with the ul element. Then ‘li’ elements are used to create navigation within that.
Class ‘has-flyout’ is attached to the dropdown elements. These render more content on hover.
Class ‘flyout‘ is attached to the ‘div‘ elements, which contains the content rendered on hover.
Notice that direction of the flyouts are left by default. ‘right‘ class is added to set the flyout direction right.
Lastly file ‘foundation.min.js‘ is added and then ‘$(document).foundationNavigation();‘ is used to initialize the navigation and dropdowns.

3. Vertical Nav

By adding class of .vertical to the element the above nav bar can be made vertical. The code is as in the listing below:

Listing 3: Vertical Nav Bar

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example Vertical Nav bar Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

</div>
</div>
</li>
</ul>
</div>
</div> <script src="foundation/javascripts/foundation.min.js"></script>
<script>
$(document).foundationNavigation();
</script>

</body>
</html>
[/java]

Output:

4. Side Nav

Sometimes, instead of a nav bar (either top or vertical) it is suitable to use a side navigation. The code is as in the listing below:

Listing 4: Side Navigation

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example Side bar Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

</body>
</html>
[/java]

The ouput is as in the image below:

5. Sub Nav

Sub navs are useful when you need to move between different states of a page , say for example Filters. An example below demonstrates this:

Listing 5: Sub nav

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example subnav Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

</body>
</html>
[/java]

Output of the above code is as in the image below:

6. Pagination

When you need iteration through a long list of items, for example you want to provide your user with a way to navigate over 50 blog posts, each page showing 10 of it, you need pagination. Here is how you may create one with Zurb Foundation 3.

Lisitng 6: Pagination example

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example pagination Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

</body>
</html>
[/java]

The output of the above code would be as shown below:

7. Breadcrumbs

Breadcrumbs are a great way to show your users where they are in you site hierarchay. It may also helpful to direct your users to the flow of content. An example is as below:

Listing 7: Breadcrumbs example

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example breadcrumbs Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

<ul class="breadcrumbs">
<li><span>Home</span></li>
<li><span>Features</span></li>
<li><span>Add ons</span></li>
<li class="current"><span>Home</span></li>
</ul>
</div>

</body>
</html>
[/java]

Output would be as below:

Summary

In this article we saw one of the features provided by Foundation 3 framework, i.e the navigation. In the next articles i shall discuss some more features. Hope you liked the article.

HTML5 Validator – Validating Forms With HTML5

October 22, 2013 by Manisha Patil Leave a Comment

In this article we will see how to perform form validation with JavaScript and with html5. In this article I’ll will talk about a new feature of HTML5 which is very useful in creating validations of forms, that is the HTML5 Validator. Since long time the validation of a form field is one thing that has been giving a lot of work for developers. Earlier programmers developed many forms of validation in JavaScript, then with the rise of jQuery validation plugin was used the most. But now with the new HTML5 the things have got much, much easier, because the validation has become something like a native language. In this article I will show you some options on how to perform the validation of a field, either by JavaScript or HTML5 .

Validation Using JavaScript

Let’s start the validation in JavaScript, below we use the following html code. It is a code of a simple form, which we will be sent to validate.

Listing 1 : HTML5 Validator Example Code

[code lang=”javascript”]
<!DOCTYPE html>
<html>
<head>
<title>Forms Validation</title>
</head>
<body>
<form action="actionpage" method="post" name="data" onSubmit="return sendData();" >
<table width="588" border="0" align="center" >
<tr>
<td width="118"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Full Name:</font></td>
<td width="460">
<input name="tx_name" type="text" class="formbutton" id="tx_name" size="52" maxlength="150">
</td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">E-mail:</font></td>
<td><font size="2">
<input name="tx_email" type="text" id="tx_email" size="52" maxlength="150" class="formbutton">
</font></td>
</tr>
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">Message<strong>:</strong></font></font></td>
<td rowspan="2"><font size="2">
<textarea name="tx_message" cols="50" rows="8" class="formbutton" id="tx_message" input ></textarea>
</font></td>
</tr>
<tr>
<td height="85"><p><strong><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">
</font></font></strong></p></td>
</tr>
<tr>
<td height="22"></td>
<td>
<input name="Submit" type="submit" class="formobjects" value="sendData">

<input name="Reset" type="reset" class="formobjects" value="redefine">
</td>
</tr>
</table>
</form>
</body>
</html>
[/code]

This is our form, which will be displayed as shown in Figure 1.

Figure 1 : Appearance of the form

Now we need to use JavaScript to validate these fields.

Listing 2 : Code JavaScript Validation

[code lang=”javascript”]
<!DOCTYPE html>
<html>
<head>
<title>Forms Validation</title>

if(document.data.tx_name.value=="" || document.data.tx_name.value.length < 8)
{
alert( "Fill the Name field correctly!" );
document.data.tx_name.focus();
return false;
}

if( document.data.tx_email.value=="" ||
document.data.tx_email.value.indexOf(‘@’)==-1 ||
document.data.tx_email.value.indexOf(‘.’)==-1 )
{
alert( "Fill the E-MAIL field correctly!" );
document.data.tx_email.focus();
return false;
}

if (document.data.tx_message.value=="")
{
alert( "Enter some Message!" );
document.data.tx_message.focus();
return false;
}

if (document.data.tx_message.value.length < 50 )
{
alert( "Message should be atleast 50 characters!" );
document.data.tx_message.focus();
return false;
}

return true;
}

</script>
</head>

<body>

<form action="actionpage" method="post" name="data" onSubmit="return sendData();" >
<table width="588" border="0" align="center" >
<tr>
<td width="118"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Full Name:</font></td>
<td width="460">
<input name="tx_name" type="text" class="formbutton" id="tx_name" size="52" maxlength="150">
</td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">E-mail:</font></td>
<td><font size="2">
<input name="tx_email" type="text" id="tx_email" size="52" maxlength="150" class="formbutton">
</font></td>
</tr>
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">Message<strong>:</strong></font></font></td>
<td rowspan="2"><font size="2">
<textarea name="tx_message" cols="50" rows="8" class="formbutton" id="tx_message" input ></textarea>
</font></td>
</tr>
<tr>
<td height="85"><p><strong><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">
</font></font></strong></p></td>
</tr>
<tr>
<td height="22"></td>
<td>
<input name="Submit" type="submit" class="formobjects" value="sendData">

</body>
</html>
[/code]

After we put this code we will validate our form, for example leave the name field blank, it will show the following message:

Figure 2 : Validation Results

Thus our form is being validated, so simple and easy, but with a code rather large, as we can see.

Validating With HTML5

With the arrival of the new version of HTML, in addition to many other improvements, we can now validate a field without writing a lot of code, making the work of developers much more convenient and easy. In the list below you will see that you can do the same as the previous example of a much easier way and practice writing a lot less code.

Listing 3 : Validating form with HTML5

[code lang=”javascript”]
<! DOCTYPE html>
<html>
<head>
<title> Forms Validation – Code Line </ title>

</head>
<body>

<form method="post" action="">
<label for="nome"> Name: </ label>
<input id="nome" type=text required name=nome/>
<br />
<label for="email"> Email: </ label>
<input id="email" type=text required name=email/>
<input type=submit value="OK"/>

</form>

</body>
</html>
[/code]

Do not forget to use HTML5 features that we need to put the doctype referring to HTML5 language. In the above example what we have used is equivalent of HTML5 version. <!DOCTYPE html> = “HTML5”. This goes at the top of every page.

As we can see, much less code is written compared to the previous code, and in the following image we can see that the result is the same validation as with JavaScript.

Figure 3 : Results of validation in HTML5

Summary

I hope it was clear these two types of form validation, we found that in addition to using the old JavaScript, you can use new HTML5 to perform the same function with less code. Hope you like the article, leave your comments and suggestions here.

Introduction to Ext JS

October 22, 2013 by Manisha Patil Leave a Comment

In this article I’ll give a brief overview of the ExtJS a JavaScript framework, which is most popular today, due to the features and quality it offers. External Javascript or ExtJS as it is called, is a JavaScript framework that was initially designed to be an extension of the YUI framework (Yahoo! User Interface Library ) . It was named at the beginning of its development as yui-ext and YUI as its basis for work, so its operation was not possible without the use of YUI.

Its distribution is done through two licenses,

a business license
and other open-source license (open source)

Besides these two licenses, there is a support service that could be purchased individually, where the user acquires the right not only through the support forums, but also through e-mail, telephone, and if necessary, the user could purchase a higher membership level and also be entitled to support via onsite, having access to the SVN Ext JS, where he could find versions of Ext JS in development and yet-to be released versions.

The yui-ext, throughout its development, has been getting new adapters that serve to make the connection between it and other JavaScript frameworks such as Prototype and jQuery. The growth of its features and interface components that have brought value to the most popular JavaScript frameworks like YUI, jQuery and Prototype, made it quickly recognized by developers and contributors, generating greater speed to the emergence of several versions of the yui-ext 0.x., before finally being released as version 1.0, it got its name changed to ExtJS; showing that ExtJS is no longer just an extension to the YUI framework.

It came to be known as a framework after version 1.1 was released. Thereafter, new versions continued to be developed and with them came new functions and basic components redesigned to be more effective and required fewer lines of code.

Ext JS Browser Support

The ExtJS currently supports the most popular browsers like:

IE 6 or higher.
Firefox 1.5 or higher.
Safari 3 or higher.
Opera 9 or higher.
Chrome.

Ext JS Installation and Setup

To use ExtJS, we first need to download the same through the following link: Donwload ExtJS. On this page we find two download options: a free version and the commercial version.

Figure 1: Download Page ExtJS

To download the free version, click on “Download fot Ext JS 4.0.7 GPL“. Save to a directory of your choice. After the download is complete, simply decompress the Zip file. The file that we downloaded, will give us the following folder structure:

Figure 2: Structure of the Ext JS folder

Working With Ext JS

To begin using this framework, we will create the file index.html. The directory structure of our code and the library will be as shown below:

Figure 3: Files needed to use Ext JS

Inside the of index.html file we will include the files needed to run the ExtJS i.e

Ex-all.css: File containing all CSS styles of Ext JS.
Ext-all.js: File that contains all the codes of the components, whether or not visible to users.
Ext-base.js: This file can be used both as Ext JS to other libraries such as jQuery.
We have included our script in the header.

Listing 1: Import the files needed

[code lang=”javascript”]
<!DOCTYPE html>
<html>
<head>
<title>TestIng of ExtJS</title>
<link rel="stylesheet" href="ext-4.0.7-gpl/resources/css/ext-all.css" type="text/css" />
<script src="ext-4.0.7-gpl/ext-all.js"></script>
<script language="javascript" type="text/javascript">
Ext.onReady(function(){
var win = new Ext.Window
({
height: 200,
width: 300,
title: ‘Test’,
html: ‘<b>Example of an application made with ExtJS</b>’
})

win.show();

Ext.get(‘btClose’).on(‘click’, function()
{
win.close();
})})
</script>

</head>
<body>
<input type="button" id="btClose" value="Close Window"></input>
</body>
</html>

[/code]

Let ‘s see the details of the preceding code:

Within Ext.onReady we define a function as a parameter. This function is only loaded after all other elements of our application have been loaded, thus avoiding any problems that may occur. And it is in this function that we insert all the code we want to run when we open our page.
Inside this function we begin by creating the variable “win” and called a window “ext.Window” with the dimensions 300px wide and 200px wide, and define a text to be displayed on this window.
After the creation of this window through our variable “win”, we use the method “show”, which is displayed to the user. It will automatically be positioned exactly in the center of the browser screen.
And finally we use “Ext.get ()”. We can compare this method with the familiar document.getElemetByID ().

Now that the code is ready, let’s test it. To do this, open the file “index.html” in your browser and we get the following result: a blue window in the middle of the browser and if we click on the close button, this window will be closed blue window, as shown in the following figure .

Figure 4: Results of the test example of ExtJS

However, as it is an object of Ext JS, we realize that with Ext.get the returned object has all the properties and methods of the object Ext.Element. And the property Ext.get (‘desiredElement’). Thus using the Ext.get can use events with ease. As we can see, in this case we associate an event to the button with id “btclose” using method “on“, which takes three parameters:

Name of the event that we wish to associate;
The call-back function that will be used when the event is triggered;
And the scope, this is an optional parameter.

Hence we connect a function to the click event of the button that caught our variable which has the window and it executes the method “close” to close. If the result is not the same as shown in Figure 4, make sure your code is the same as shown above.

Summary

In this article we can conclude that ExtJS streamlines the development of web applications, with tools to develop attractive, efficient and mostly functional interfaces. That’s why it leaves ExtJS developer without concern for the visual part, which in most cases is not as important as the treatment of data. If you have any questions, write it in the comments section.

Create CSS Classes For Buttons

October 18, 2013 by Manisha Patil Leave a Comment

This CSS tutorial explains how to create custom CSS classes for buttons with great look and feel. If you are into Web development, very probably you must have ran into some CSS framework like Blueprint , Bootstrap , Green and Pure are some examples. They all have their peculiarities and offer great classes for creating responsive sites and implementation of UI elements, including buttons (which is the focus of this article). But how about learning how to create your own set of class for buttons?.

Without many frills, we will see in the following sections how to create simple and interesting CSS classes for buttons. The first thing to do is to create a class for, say, button base. This class will contain all the basic appearance of buttons, including its size and the font size. Let’s call it . but (button).

Listing 1: CSS code:style.css

Listing 2: Sample.html

[code lang=”html”]
<html>
<head>
<title>Basic Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a class="but">Normal Button</a>
<button type="but">Normal Button</button>
</body>
</html>
[/code]

Open the above html in your browser and the following button would be displayed:

You can also include a link to open a page in a new window:

Listing 3: Revised.html

[code lang=”html”]
<html>
<head>
<title>Basic Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a class="but" href="http://www.javabeat.com" target="_blank">Normal Button</a>
<button type="button" onclick="window.open(‘http://www.javabeat.com’);">Normal Button</button>
</body>
</html>
[/code]

Let’s make the Button more stylish and intuitive. We will darken it a bit when the user hovers over (using the pseudo-class : hover ). The cursor also change to the classic little hand when passed over the button.

Listing 4: Revised CSS style.css

[code lang=”html”]
/* Basic Button */
.but {
display: inline-block;
background-color: #ccc;
color: #444;
padding: 10px 20px;
text-decoration: none;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
border: 0px;
}
.but:hover {
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));
cursor: pointer;
}
[/code]

Open the html in your browser and you can see the effect. Actually, we are not darkening the color of the button, but adding to it a gradient that goes from transparent to a translucent black. You will understand why this is more up front.

Now that we have a button base, we can create classes for other buttons. Below are classes for primary button (blue), button success (green), button error (red) button and a warning (yellow / orange). In fact, what these classes do is just change the background color and font color.

Listing 5:Revised CSS style.css

[code lang=”html”]

/* Basic Button */
.but {
display: inline-block;
background-color: #ccc;
color: #444;
padding: 10px 20px;
text-decoration: none;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
border: 0px;
}
.but:hover {
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));
cursor: pointer;
}
/* CORES */

.but-primary {
color: #fff;
background-color: #0068B4;
}

.but-success {
color: #fff;
background-color: #009835;
}

.but-error {
color: #fff;
background-color: #CC0000;
}

.but-warning {
color: #fff;
background-color: #F28E00;
}
[/code]

To see this in practice, add the following lines to your HTML:

Listing 6: Revised HTML

[code lang=”html”]
<html>
<head>
<title>Basic Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a class="but" href="https://javabeat.net" target="_blank">Normal Button</a>
<a class="but but-primary" href="https://javabeat.net" target="_blank">Primary Button</a>
<a class="but but-success" href="https://javabeat.net" target="_blank">Success Button</a>
<a class="but but-error" href="https://javabeat.net" target="_blank">Error Button</a>
<a class="but but-warning" href="https://javabeat.net" target="_blank">Warning Button</a>
</body>
</html>
[/code]

Open the above html in your browser and the following button would be displayed:

Note that when you pass the cursor over each of them, the effect remains dark. That’s because we use the gradient with translucent black. That is, instead of creating one dark version of each color, we work with a translucent black that acts as a dimmer.

A Sample Offline Web Application in HTML5

Buttons created, we can now leave for optional classes of effects. These classes are for adding things like shadows or rounded corners to buttons. Class .shadow-but adds a shadow of 1 pixel.Take the class .but-rc (rounded corners), it add rounded corners.

Listing 7: Revised CSS style.css

.but-primary {
color: #fff;
background-color: #0068B4;
}

.but-success {
color: #fff;
background-color: #009835;
}

.but-error {
color: #fff;
background-color: #CC0000;
}

.but-warning {
color: #fff;
background-color: #F28E00;
}
/* Effects */

.but-shadow {
box-shadow: 1px 1px 1px #999;
}

.but-rc {
border-radius: 4px;
}
[/code]

We now have the following HTML snippet:

Listing 8: RevisedHTML

[code lang=”html”]
<html>
<head>
<title>Basic Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a class="but but-shadow but-rc" href="https://javabeat.net" target="_blank">Normal Button</a>
<a class="but but-primary but-shadow but-rc" href="https://javabeat.net" target="_blank">Primary Button</a>
<a class="but but-success but-shadow but-rc" href="https://javabeat.net" target="_blank">Success Button</a>
<a class="but but-error but-shadow but-rc" href="https://javabeat.net" target="_blank">Error Button</a>
<a class="but but-warning but-shadow but-rc" href="https://javabeat.net" target="_blank">Warning Button</a>
</body>
</html>
[/code]

Open the above html in your browser and the following button would be displayed:

Finally, now let’s have buttons of different sizes. With the classes below we can create buttons small, medium and large. Basically, they change the font size to 60% (small), 100% (normal) or 140% (large). But that percentage would be in relation to what? However, compared to the font size of . For this to work well, you must then set a font size for the . Generally, the standard size in browsers is 16px.

Listing 9: Revised CSS style.css

.but-primary {
color: #fff;
background-color: #0068B4;
}

.but-success {
color: #fff;
background-color: #009835;
}

.but-error {
color: #fff;
background-color: #CC0000;
}

.but-warning {
color: #fff;
background-color: #F28E00;
}
/* Effects */

.but-shadow {
box-shadow: 1px 1px 1px #999;
}

.but-rc {
border-radius: 4px;
}
body {
font-size: 14px;
}

/* Sizes */

.but-small {
font-size: 60%;
}

.but-regular {
font-size: 100%;
}

.but-large {
font-size: 140%;
}
[/code]

Listing 10: Revised HTML

[code lang=”html”]
<html>
<head>
<title>Basic Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a class="but but-shadow but-rc but-small " href="https://javabeat.net" target="_blank">Normal Button</a>
<a class="but but-primary but-shadow but-rc but-regular" href="https://javabeat.net" target="_blank">Primary Button</a>
<a class="but but-success but-shadow but-rc but-large" href="https://javabeat.net" target="_blank">Success Button</a>

</body>
</html>
[/code]

Open the above html in your browser and the following button would be displayed:

Following this reasoning, you can create new classes or update existing ones. For example, if you want the text of the buttons always appear in uppercase, you can add the property text-transform the class :

[code lang=”html”]
. but :
text-transform: uppercase;
[/code]

Or, if you want to apply the property to all buttons, you can create a class and add it to the buttons just where you want the text to appear in upper case. Let’s name this class . but-uppercase and put it near the other classes of effects. We will now read as follows:

[code lang=”html”]
/* Effects */
.but-shadow {
box-shadow: 1px 1px 1px #999;
}
.but-rc {
border-radius: 4px;
}
.but-uppercase {
text-transform: uppercase;
}

[/code]

Summary

Through this article I tried to brief you about how to create classes for buttons using CSS. Use your creativity to create new classes. Hope you enjoyed the article. If you have any questions, please write it in the comments section.