Friday, November 4, 2011
Introduction to Ajax with Jquery
http://www.thewebsqueeze.com/web-design-tutorials/introduction-to-ajax-with-jquery.html
jQuery for Complete Beginners: Part 2
http://www.1stwebdesigner.com/tutorials/jquery-complete-beginners-part-2/
Behind the Library: Javascript Events
http://www.thewebsqueeze.com/web-design-tutorials/behind-the-library-javascript-events.html
Writing Better JavaScript with CoffeeScript: The Basics
http://sixrevisions.com/javascript/coffeescript-basics/#more-6062
Tuesday, September 20, 2011
10 jQuery Plugins to Enhance your User Interfaces
*****
jQuery News Ticker
jQuery Stylesheet Switcher
jQuery Easy UI
jQuery News Ticker
jQuery Stylesheet Switcher
jQuery Easy UI
Tuesday, August 16, 2011
Saturday, August 6, 2011
The Neglected Necessities Of Design
With all of these JavaScript tools at our disposal, going overboard and using as many as we can is easy, especially if we can justify their presence as enhancing the user experience. But keep in mind that with each new JavaScript library, plug-in or solution, we are adding files and lines of code to our pages that users have to download. With each bit of functionality, we have a trade-off with performance.
We can do some things to curb the performance trade-off. The most common way to optimize JavaScript is to concatenate and minify the files. Keeping multiple JavaScripts in a single optimized file reduces the number of calls that the website has to make to the server. For high-traffic solutions and clients who demand peak performance, this simple trick can save a lot of money. Of course, at a certain point, a single JavaScript file becomes too long and therefore a hindrance to the website and a nightmare to maintain.
Beyond optimization, there are techniques we can follow to keep JavaScript from weighing us down. One technique is parallel script loading. Loading your scripts in parallel will reduce blocks on the browser and save loading time, especially in older browsers that load linked resources one at a time. A great resource for this is theHead JS project.
Aside from parallel loading, developers have been taking advantage of selective loading techniques for years. This is often referred to as lazy loading, where you call external JavaScript files only where you need them. This is another resource-saving technique.
Friday, July 15, 2011
Tuesday, June 21, 2011
Tuesday, June 7, 2011
Tuesday, May 31, 2011
Friday, April 8, 2011
Friday, March 25, 2011
Thursday, March 10, 2011
Know What JQuery Can do for you.
http://www.webvanta.com/ebooks/Webvanta-5tips-for-better-sites.pdf
K n o w Wh a t j Q u e ry C a n D o F o r Yo u
Perhaps the biggest difference between designing for print and for the web is the
opportunity to use interactivity. You can build your web pages just like printed pages that
appear on screen, but if you do so you’re leaving on the table many of the benefits the web
has to offer.
Interactivity in web pages is provided by JavaScript, the programming language that runs in
the browser. In the early days of the web, JavaScript got a bad name because it was often
used for gratuitous animation and other useless effects. More complex interactions were
complicated to program, especially when taking into account the differences between
browsers.
JavaScript Comes of Age with jQuery
Today, JavaScript has come into its own. Designers have realized that no one except the
creator likes useless animations. But the ability to have a web page change without having
to load a new page from the server is a critical capability that JavaScript provides.
A robust library, which provides a layer on top of the raw JavaScript language, is essential
for writing cross-browser code and handling common tasks simply. Although there are
several high-quality libraries available, in the past couple of years jQuery has become the
overwhelming choice among designers.
If you’re coding your own pages, it would serve you well to learn to use jQuery effects and
plugins. It takes a little study, but it is entirely accessible to anyone with the desire to learn
it.
If you’re doing designs in Photoshop and then handing them off to someone else to code,
you don’t need to know much about how JavaScript works. But you do need to know what
can be easily done by a good coder, so you can use these techniques in your design.
There’s an incredible range of things you can do with jQuery (and JavaScript in general).
The simpler ones for designers to use are those that work entirely with content that has
been loaded as part of the page, with all the interactivity occuring in the browser.
Implementing Ajax interactions, in which the JavaScript code in the browser gets
additional information from the server without loading a new page, is somewhat more
complex
The Many Ways to Show and Hide
The most widely useful technique is the ability to show and hide content. There are many
variations, including:
• Basic show/hide, in which a "details" link is clicked and new region of content appears.
• Accordion, which is a stack of headings with hidden content associated with each one;
content is shown when the heading is clicked. Can be vertical or horizontal.
K n o w Wh a t j Q u e ry C a n D o F o r Yo u
Perhaps the biggest difference between designing for print and for the web is the
opportunity to use interactivity. You can build your web pages just like printed pages that
appear on screen, but if you do so you’re leaving on the table many of the benefits the web
has to offer.
Interactivity in web pages is provided by JavaScript, the programming language that runs in
the browser. In the early days of the web, JavaScript got a bad name because it was often
used for gratuitous animation and other useless effects. More complex interactions were
complicated to program, especially when taking into account the differences between
browsers.
JavaScript Comes of Age with jQuery
Today, JavaScript has come into its own. Designers have realized that no one except the
creator likes useless animations. But the ability to have a web page change without having
to load a new page from the server is a critical capability that JavaScript provides.
A robust library, which provides a layer on top of the raw JavaScript language, is essential
for writing cross-browser code and handling common tasks simply. Although there are
several high-quality libraries available, in the past couple of years jQuery has become the
overwhelming choice among designers.
If you’re coding your own pages, it would serve you well to learn to use jQuery effects and
plugins. It takes a little study, but it is entirely accessible to anyone with the desire to learn
it.
If you’re doing designs in Photoshop and then handing them off to someone else to code,
you don’t need to know much about how JavaScript works. But you do need to know what
can be easily done by a good coder, so you can use these techniques in your design.
There’s an incredible range of things you can do with jQuery (and JavaScript in general).
The simpler ones for designers to use are those that work entirely with content that has
been loaded as part of the page, with all the interactivity occuring in the browser.
Implementing Ajax interactions, in which the JavaScript code in the browser gets
additional information from the server without loading a new page, is somewhat more
complex
The Many Ways to Show and Hide
The most widely useful technique is the ability to show and hide content. There are many
variations, including:
• Basic show/hide, in which a "details" link is clicked and new region of content appears.
• Accordion, which is a stack of headings with hidden content associated with each one;
content is shown when the heading is clicked. Can be vertical or horizontal.
• Tabs, in which multiple content regions are grouped with a set of tabs above or to the
side, each acting like the heading in an accordion.
• Tooltips, which are small text areas that appear when hovering over an item
• Carousels, which typically show a series of items in a horizontal stripe, with arrows to
scroll to additional items.
• Sliders, which show a series of items, one at a time, typically with a timed automatic
advance. These have become very popular for "featured content" at the top of news
sites.
• Slideshows, which show a series of images one at a time, typically fading from one to
the next.
• Lightboxes, which show content in a pop-up region
All of these techniques enable you to pack more information into a smaller area by
displaying only some of it at a time. Viewers have less scrolling to do, can more easily focus
on the most important content, and are more engaged. Adding these tools to your design
repertoire is essential for creating modern web designs.
If you are designing in Photoshop or Fireworks, you can only approximate these effects, of
course. Show each interactive element in each of its possible states, using layers that can be
turned on and off to simulate the interaction.
Graphical Presentations
Beyond the common show and hide techniques, jQuery is also valuable for providing
dynamic graphical presentations, such as:
• Calendars
• Photo galleries
• Maps
• Zoomable images
Form Enhancements
jQuery can also help improve your forms in various ways, including:
• Validation
• Placeholder text
• Date pickers
• Autocomplete
Customization without Coding for jQuery UI Elements
Some of the most common interactions are part of the jQuery UI library, which has an
interactive theme designer. If you want to keep your coding costs down, use the theme
designer to style the jQuery UI elements you want to use. You can then download the
theme to provide whoever is coding the site with ready-made styling, and use screen
captures from the theme designer page in your Photoshop mock-ups.
SEO Cautions: Make Sure Every Page is Accessible and Has a URL
The most fundamental thing you must do is to ensure that every page of the site is
accessible by following links, starting from your home page, even if JavaScript is disabled
and Flash is ignored. (You need to take these same precautions for accessibility as well as
for SEO.)
This is not hard to achieve, as long as you are not using Flash for your navigation, and
JavaScript is used as it should be: for enhancement, and not as a requirement.
Every page must have a unique URL. That means not building the entire site in Flash, or
using Ajax to swap out the contents of a page without changing the URL (unless you think
carefully about the SEO implications). It’s OK to use JavaScript to hide and reveal parts of
a page, as long as all is revealed if JavaScript is disabled (which is how the standard jQuery
tab and accordion widgets work).
Monday, February 7, 2011
Bringing Interactivity To Your Website With Web Standards
It’s necessary to learn the basics of JavaScript before looking at a library like jQuery, to ensure that you understand the fundamentals and therefore know how jQuery does something, not just what it does.
Subscribe to:
Posts (Atom)