User Interface Design
Dec23

User Interface Design

Welcome to CodeSpread! What is a User Interface? Webopedia says “Abbreviated UI, the junction between a user and a computer program. An interface is a set of commands or menus through which a user communicates with a program.The user interface is one of the most important parts of any program because it determines how easily you can make the program do what you want. A powerful program with a poorly designed user interface has little value. Graphical user interfaces (GUIs) that use windows, icons, and pop-up menus have become standard on personal computers.” As per our definition “User Interface is what you see. User Interface is the bridge which facilitates the interaction between human and machine by rendering the information or performing the operation as per the expectations of humans” What is a User Interface Design? Wikipedia says “User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs.” Just by applying some previous knowledge to design UI can make the difference,the aim is to create interfaces that are easy to use and easy to understand, that meet the needs of the intended users, and that support users in the tasks they wish to undertake. Parameters of a  Good User Interface Design? Usability : These are the needs satisfied by the interface functionality.UI extends usability when it fulfills the needs of the targeted users — users for whom the system has been designed and developed. Next, the scope of interface is extended by looking beyond the users’ immediate work environment and looking at the wider context or situation within which the system is expected to operate Thus, usability is concerned with the extent to which users of an application are able to work effectively, efficiently, and with satisfaction in their particular contexts. First Time Use: How many of us can find it simple to operate a machine if the UI is easy to understand? If UI cannot make an impact in terms of understanding and learning at the first instance then there is a big reason to worry. Efficiency:  Ok, Now we are accustomed to the interface but still it takes lot of time to complete a simple task and lot of steps in UI is the culprit of that. Why not reduce this time and achieve efficiency. Users love efficient UI. Returning Users Memory: When there is a...

Read More
jQuery: Effects/Methods
Dec09

jQuery: Effects/Methods

In our last article, jQuery Part 1 , we covered the basic understanding and now we will move to Methods or effects available in jQuery. Hide/Show/Toggle Methods The most used method Hide/Show. From the last tutorial, we already know, how to select an element of our page. Then, if we are successful, we just have call hide() or show() method as required. Do not forget to include the jQuery library file. <script type="text/&lt;span class=">// <!&#91;CDATA&#91; javascript</span>" src="/jquery/jquery-1.7.1.min.js"> // &#93;&#93;></script> <script type="text/&lt;span class=">// <!&#91;CDATA&#91; javascript</span>" language="javascript"> // &#93;&#93;></script> $(document).ready(function() { $("#btn").click(function () { $("div").show(); }); &nbsp; $(".btnclass").click(function () { $("p").hide(); }); }); &lt;/script&gt; Explanation: On click of a button which has ID “btn”, all the div elements in the page will not be visible to the user. On click of a button having CSS class “.btnclass”, all the paragraph elements in the page will be visible to the user. Note: Though there is no parameter mentioned for Hide/ Show methods in the above example ,still we have some liberty provided by jQuery in terms of optional parameters like, $(selector).hide(speed,callback); $(selector).show(speed,callback); Here, ‘speed’ is the string which can take predefined values like “slow”, “normal”, or “fast” or we can customized it by specifying the milliseconds running time of animation.For ex: $("p").hide(1000); And, ‘callback’ represents the function which will be executed, once the show/hide animation completes. In the below code, ‘event’ function is called as a callback and it will show all the div element of the page. function event (){ $(“div”).show(); } $("p").hide(1000, event); One more method related to show/hide is toggle(), lets see what it does, $("#btn").click(function(){ $("#label1").toggle(); }); Well, it is not difficult to deduce that on click of button with ID “btn”, label1 appearance toggles, if it is in visible state,it gets hidden and vice versa. Similar to Hide/Show methods, toggle also contains the same optional parameters “speed” and “callback”. Fade Methods I suppose, we all know the dictionary meaning of fade and that is the exact feature used by these method. So what are the animations we have related to Fade? fadeIn() : An invisible element would start appearing in fade mode. fadeOut() : A visible element would begin diminishing in fade mode. fadeToggle() : It performs both of the operations described above fadeTo() : element fades to a given opacity (value between 0 and 1). We will try to save time here by providing quick examples as the base would remain same. $("#btn").click(function(){ $("#label1").fadeIn(); $("#label2").fadeOut("slow"); $("#label3").fadeToggle(); $("#label4").fadeTo(“1000”,0.5); }); We mentioned two optional parameters “speed” and “callback” and their use. This two parameters are applicable to our fade methods also. There is an exception in case of...

Read More
UI: Jquery is Javascript Library
Dec08

UI: Jquery is Javascript Library

Jquery Basics: With the title itself, anybody can deduce that we are indirectly talking about javascript only. So, we can say that Javascipt is the guardian of Jquery. These are client end technologies which are completely different from our server side technologies but now they have blend in. Lets try an example in Javascript first,we will try to set the background color of document in our page. For that we will declare a javascript function. <script type="text/javascript"> function setBackgroundColor(color) { document.body.style.backgroundColor=color; } ; </script> <button onclick="setBackgroundColor('&lt;span class=">000AAA')"&gt;Set Color</button> Well,try it and you will see the action. Next,to achieve the similar functionality we will use a Jquery. $(this).css('background-color', 'red'); Look at the difference,Now let me ask you a question which one is neat? and which one you will prefer? Ofcourse, we all know that jquery is much simple, neat and easy to handle. Well, how was this possible? Jquery is a library, so like all library contains books which we read, similar way Jquery contains a lot of common tasks which would have required a lot of javascript code to be written. These tasks can be called in a simple way through Jquery by just following some syntax which we will see later in this document. Why Jquery and not others? There are other frameworks also available so why jquery, because it is very much popular and is growing daily with lot of new tasks being added to the library. One of the major factor is that it is being used by almost all the big companies. What are the prerequisites? This is an important question as, if you know things like HTML CSS JavaScript Then half of the battle is won. How can i start? Go and download the latest jquery from jquery.com and add it into the folder where you are developing your application. There are two version of jquery available: Production Version- Download this version, if you are new to jquery. Development version If you do not want to download, then also there is a way to include jquery in your project. There is a copy of jquery available on Google and Microsoft network, hosted on their CDN. You have to include this code in your page to include the library in your project. <html> script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script> </html> The ‘$’ syntax We have our library in place, we will start with declaring ‘$’. This is a shortcut for $(document).ready. Why it is required? This requirement is somewhat related to Javascript issues which were faced by developers.What really happened was that any javascript code written for a particular element of the page requires the element to be...

Read More