Posts Tagged ‘javascript’
The Benefits of Using jQuery
Keana Lynch | May 24th, 2011in Creative Design, Google Analytics, Web Development
Recently I have had the opportunity to make really exciting and interactive web pages using jQuery. Before working on these projects I had very little understanding of jQuery and what all it could be used for. So I decided to do some research on what the benefits are of using jQuery over other applications such as conventional JavaScript and wanted to see what all I can build using it. Basically you can do almost anything with jQuery to make effects and animation on your site and still be SEO friendly and cross browser compliant. But those aren’t the only benefits….
What is jQuery?
“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” http://jquery.com/
Benefits of using jQuery:
- Search Engine Optimized – While search engines are getting better at being able to read content within some Flash, everything within jQuery is setup as text. This means it is completely readable to all the search engines, exposing all your keyword rich content.
- Save Time – Five lines of jQuery are equivalent to 25 lines of conventional JavaScript code. This means smaller files and faster loading web pages.
- Plug-ins – There are an abundance of plug-ins on the web that make creating special effects simple and fast for web developers.
- Help? – With an abundance of plug-ins comes with an abundance of help. There is a large helpful support community on the web to help you quickly remedy any bug issues.
- That was easy! – jQuery has easy implementation for web developers in comparison to other applications.
- Cross Browser Friendly – jQuery is currently the most popular JavaScript library and works in all browsers.
- FREE! – free, open source software.
- Mobile Devices – jQuery is supported by any mobile device whose web browser supports JavaScript. A lot of mobile devices like iPads and iPhones don’t run Flash at all.
- Simplifies AJAX
- Wow Factor – Web developers use jQuery to make web pages more exciting, interactive, cleaner, and more user friendly. Make your users go WOW!
jQuery in action! A few examples of jQuery Usage
- Rotating Image Slider
- Interactive Google Map
- Animated Content Menu
- Slide Effects
- Slider Gallery
- Photobar Gallery
- Slideshow Gallery
- Mobile Image Gallery Web App
- Content Slider
- Photo Zoom Out Effect
Tags: javascript, jquery, mobile, seo
Posted in Creative Design, Google Analytics, Web Development | No Comments »
Java Script with Dot Net
Gary Synan | January 11th, 2011in Other, Web Development
There are many times when you want to execute some javascript within your Dot Net page to give it that smooth client side processing without reloading the page. One example would be when you have a contact or registration page that needs to be edited before emailing or saving the page data. You could accomplish this with some Dot Net validation controls, or by registering your javascript within your code behind.
If you already have some javascript that edits input fields and displays a popup box or does whatever it is you need it to do and you want to leverage the existing work then you can also execute it from your Dot Net control. You still want to edit the fields in your code behind in case the user has javascript turned off. Yes there are still people that do this. You can catch the click event with a custom validator in the code behind for this purpose and use an OnClientClick to execute the javascript edits. Hopefully the javascript edit are executed the vast majority of the time and the code behind edits will have no impact.
Look at the example below. Lets say you have some javascript called ‘validate’ that validates the fields on the form. This is the work that you want to leverage in your new project. Placing this within your <head> tag would appear as so:
function validate(theForm) {
javascript edits here
on err return false
else return true
}
Now let’s look at your submit button. In this example it is an image button.
<asp:ImageButton imageUrl=”/images/buttons/submit.gif” AlternateText=”Submit” OnClientClick=”return validate(registrationForm)” width=”92″ height=”24″ tabindex=”12″ runat=”server” > </asp:ImageButton>
Notice the OnClientClickattribute. This will execute your javascript validation. Your javascript validation should return a true or false depending on whether validation passed. The return is captured in the OnClientClick attribute and if it is false, control will not be passed to the code behind. This will keep the Click event from firing and editing your data from within your code behind.
Now let’s suppose javascript is turned off. We need to edit the page from the code behind. So lets set up a custom validator below the image button as so:
<asp:customvalidator id=”registerPage” onServerValidate=”CheckPage” ErrorMessage=”" Runat=”server” ValidationGroup=”Page”></asp:customvalidator>
We will capture the Click event in our code behind with the following code: Execute the custom validator, that will execute your code behind validation.
Sub btnSubmit_Click(ByVal sender AsObject, ByVal e AsSystem.Web.UI.ImageClickEventArgs) Handles btnSubmit.Click
registerPage.Validate()
If (Page.IsValid) Then
ProcessForm()
End if
End Sub
Below is the validation routine referenced by the custom validator.
these should be the same edits as your javascript
End Sub
By using the OnClientClick attribute to execute the javascript edits, we can then capture the Click event when javascript is turned off and execute the code behind edits. It should not matter if the javascript passes validation and then the code behind validation is executed because these edits should also pass validation.
That is one way to execute client side validation and leverage some pre-existing javascript code.
Happy coding!
Tags: beacon technologies, javascript, Web Development
Posted in Other, Web Development | No Comments »
AJAX 101: What AJAX Does and Why You Want AJAX
Louisa Nicholson | May 13th, 2009in Web Development
It’s not uncommon now-a-days to hear this weird jargon thrown around called ‘AJAX’, but what does it stand for?
I’ve yet to read a better history and break down than what Jeremy Keith wrote in his book entitled “Bulletproof AJAX“. So without further ado, I’m going to quote Keith a bunch:
“Jesse James Garrett is an information architect, author and founding partner of the San Francisco-based company Adaptive Path. In February 2005, he published an essay on the Adaptive Path Web site titled ‘Ajax: A New Approach to Web Applications.’ In this essay, Garrett coined the term Ajax to describe techniques used by a new kind of Web application…. It was originally intended to be an acronym standing for ‘Asynchronous JavaScript and XML.’ ”
Keith goes on to explain that the acronym implies that asynchronous and XML are requirements within AJAX, which just isn’t true. (JavaScript is definitely required in most cases, but the AJAX behavior could be done through Flash or Java as well, just to name a couple.) “Jesse James Garrett later updated his essay, making it clear that Ajax is not an acronym.” The technology has been around before Garrett as well but coining the term made it possible for most of us to talk about a set of technologies, that when used together, create a new user experience. So think of AJAX more as a user experience than a certain set of technologies.
Garrett created the term AJAX so he could more easily have a conversation with clients and his developers alike. So why is the AJAX behavior different than your traditional development?
Example
- Tradition: You login at a web site and notice your browser has to think for a bit while it either refreshes your current page or goes to a new one. This makes you have to reload the same content or be forced to load new content.
- AJAX alternative: You login at a web site, it gives you a little notice saying that you’re now logged in. That’s it. No loading required on your end.
What AJAX does is allow the user to send and receive information back from the site without ever having to load content. It’s not that the technology is that much smarter, or psychic, but that all the loading happens behind the scenes, putting the burden on what matters the least, in the code. What matters most is the user and their experience on your site.
So why ask for it?
AJAX allows for a faster, smoother user experience. It’s becoming so mainstream lately that it’s making more traditional web development seem bulky and slow to use in comparison. Ever used Google Maps? Yep, all AJAX. Even the competition switched over to use their techniques – Mapquest and Yahoo, to name a couple.
It’s also pretty neat on our end too. This affords us with some pretty neat effects we can do easily for our clients’ sites, like animation.
Now that you’re just a little more knowledgeable on the subject, I hope your next web site will include a lot of AJAX implementation to give your users a smoother experience. Feel free to contact us for more information regarding AJAX implementation on your site.
Tags: ajax, design, flash, interface, javascript, usability, Web Development, web site
Posted in Web Development | No Comments »
Understanding Better Form Usability
Louisa Nicholson | June 17th, 2008in Creative Design, Web Development
Every usability expert, designer or developer could give you different opinions about what makes forms more usable, less confusing and less daunting. I sought out to research all the experiments and form a general list of things that developers, designers, and gurus should and should not do. The rest, as usual, always depends on the context of the project.
After combining this research with fellow co-workers and everyone’s combined knowledge, I generated a short list of common things you can do to improve your forms, but I want to discuss what types of forms I’m talking about first.
One type of form is the generic one: I’m talking about the generic “contact” form on the web, the one with fields that aren’t even new to my grandmother anymore. Fields are empty areas for you to fill in data, usually personal data. Fields like “Name”, “E-Mail Address” and “Comments” are very well known. Also, forms like “Request for Quote”, “Search” or “Sweepstakes” have much in common with the “Contact” form: they are generic, no task required, “enter in that information yet again”, forms.
The other type of form is one that requires more thought on the user. Forms like these include insurance quotes, submitting payment, government forms, loan requests, etc. These are the types of forms you receive in the mail in a booklet and have an instruction book accompanying it. These forms are quite different from the “generic” forms I mentioned above. The more data and thought necessary required from the user, the more division and instruction is needed in the form itself. In general, I think each form in this division should be designed in each instance, so I don’t think general tips apply all the time, but most of the ones I will list can apply.
So we will only be discussing the generic form, which is a good base for any working professional in this area I think. This form shares a commonality with many others, your contact form will be at least 50% identical the next guy’s contact form, and this means that already your user base is experienced with your form. Which brings me to the first tip:
#1 Don’t break convention just because it looks neat or you think it’s better
Break convention only if it works better. Your forms should be putting your user first. They are active participants ready to endure your form gauntlet – do not change their minds! Making your forms work should be the number one priority. What’s the only way to know if it’s working better? Field testing.
#2 Do field testing
I can’t agree with the usability experts more: field testing always shows you what went wrong or right with your forms. I understand that many companies lack the resources to hold usability tests, but they are a necessity. My favorite thing to do is actually allow the client to field test by bringing them in and watching them use your form. Make your coworker do it. Make your mom do it. Don’t tell them you’re testing the usability, make something up. If you are able to watch them use it, you did not guide them through it and you learned something from the experience, congratulations, you just did usability testing. Now take notes and correct what went wrong. This won’t be as accurate as some measurement tools the experts have, but it’s just as helpful and it was free. Have to say, nothing is more embarrassing then to watch that client months later use it and complain because it makes them frustrated or simply does not work. Field test before it’s too late.
#3 “Use the right field for the right task”¹8
Crescimanno and Nielsen argue that every field type should be appropriated correctly with the label. For example, if your label said “First Name” you should not use a radiobox for your field because then the user cannot correctly fill in their first name. A more complex example would be if your label said “Expiration Date” and you gave the user 3 drop down menus, 1 for month, 1 for day and 1 for year. The month and day fields have an absolute beginning and end, 01-12 for month and 10-31 for day. The year field, on the other hand, is a bit arbitrary since we are concerned with when said subject expires. Do you list the years until 2012? 2050? Should the user have to endure a very, very long drop down menu or should the user face having their year not even listed? If you put into too many years or not list enough, respectively, this could happen. Why not just make all 3 fields free entry? Or why not require just month and year in the same format and make it easier not only for the user, but also your developer? Usually there is a good solution to every type of data you need. And like Crescimanno suggests, stay away from multiple-selection boxes that are confusing (and may not even work in all browsers).
#4 Don’t let your clients pick your form structure for you
Unless your client is a certified master in creating usable forms, don’t allow them to pick what type of data they “think” they need. Have a good sit down with them and ask considerate questions about why they think they need this form, what do they expect from the user, what data are they looking for, how do they intend on using the data, and so on. I guarantee that your company (full of qualified, wonderful people) can create not only a more usable form, but also a form that integrates better with the database, integrates better with the graphical design of the website it is in, does not deter the user away, that takes the least amount of time to fill in, etc. Clients are blind-sighted by the bigger picture, take control of this crucial analysis process.
#5 Use informative error messages¹
Don’t tell me the form encountered a critical error after I hit “submit”. Don’t tell me my e-mail address is invalid when I only have not registered with it yet. Don’t tell me my password is not strong enough, tell me why. Please.
#6 Use better placed labels¹²³
Do not make them bold, do not place them far away, make them consistent with other labels, right-align if you won’t place the label above the field and don’t use illegible fonts.
#7 Quit putting in a reset button4
Reset buttons are accidentally hit instead of the “submit” button when the user submits a form, so what purpose does it serve?
References:
1 A List Apart: Sensible Forms: A Form Usability Checklist
2 UX Matters: Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach
3 UX Matters: Label Placement in Forms
4 Creating Good Websites: Usability
5 Sitepoint: 7 Steps to Usable Forms
6 Krug, Steve. “Don’t Make Me Think: A Common Sense Approach to Web Usability”, 2000, New Riders Press.
7 Nielsen, Jakob. “Designing Web Usability”, 1999, Peachpit Press.
Tags: design, errors, form, html, interface, Internet, javascript, usability, user, validation, web
Posted in Creative Design, Web Development | No Comments »
