Web Design

Create Web 2.0 Progress Bars: jQuery, DHTML, JS, CSS, Photoshop

Tagged:  

Progress bars are extremely usefull in Ajax applications as it lets people know when you are loading information in the background. Well the DeveloperFox blog has put together a nice list of progress bars using jQuery, JavaScript, CSS and PhotoShop.

Below is an excerpt from the post.

jQuery Progress Bars

jQuery.UI ProgressBar Widget

1

HOWTO: PHP and jQuery upload progress bar

2

jqUploader

“jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly - so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader.

The plugin uses the form action attribute value (normally pointing to a server side script handling the upload and other data manipulations, and appends a variable “jqUploader=1? so that the upload code is initiated when it sees that key/value is on the posted data.”

3

Progress Bar Plugin

This is a progress bar plugin for jQuery.

4

To read the full post click here.

What's the Next Big Social Network?

Tagged:  

I was playing around with the social networking CMS AroundMe this weekend and this got me thinking of what will the next big social network be. It has been a bit of time since we have seen any really huge social networks pop up and I am wondering what kind of social network would make it big. Lately most of the news has been about aggregation services like FriendFeed or our own BuddyBlend, but I haven't seen much in the new social network space.

As I see it nothing will probably happen in the spaces that huge services already have a strong hold, such as the video space and social bookmarking space. While we will see many new challengers, I don't see anybody beating a site like YouTube any time soon. So, I think that if a new social network is to gain a strong hold it will be in a space where there is no clear leader currently.

Below are the spaces that I think that there is a chance for a new social network to dominate.

  • Video Game Space
    While there are currently a few Video Game social networks, there is not yet a MySpace for gamers. I think that in order for a site to clearly win this space they will need to provide on-line games, a space for gamers to talk about their favorite games and a place schedule on-line games.
  • Music Space
    While there are a few sites that are in this space, with last.fm leading the pack, I'm not sure that there is a clear winner in this space. The tough thing in the Music Space is the copyright information if you share music. What I think needs to happen for someone to dominate this space is they need to make a deal with the record labels like iTunes has where perhaps I can listen and share music for free on the site, but if I want to download it to my iPod I need to pay a very small fee.
  • Athletics Space
    I haven't seen many good sites in this space, but think that with so many sports fans that this could be a huge space if done well. Just think of the amount of people in this audience all over the world!
  • Collectible Space
    This would be a place where people who collect items, whether they be baseball cards or cars, could connect with people that have the same interests. I haven't seen any social networks in this space, probably because of ebay, but I think there could be a large social network in this space.
  • Outdoor Activities Space
    I haven't seen many sites in this space, but with so many people enjoying outdoor activities, this could be a huge social network. Just think of a social network where you can share and find your favorite camping sites or places to go rafting.

This is just a small list of possible spaces where the next great social network will exist. I would love to hear your thoughts on the space where the next great social network will exist.

Great Accordion Scripts

A very useful design element on the modern web is the accordion element. With this useful design element you can never have enough accordion scripts to use. Well, WebTecker has put together a nice list of accordion scripts.

Below is an excerpt from the post.

  • jQuery Horizontal Accordion - This is another jQuery Plugin but the accordion is horizontal. It is very similar to the XBOX 360 interface. This plugin requires you use the interface plugin.

  • MooTools Accordion - This MooTools Accordion script is very nice script that is very easy to implement. There is no additional plugins that you need to get this script to work. The one problem with this is that there is no support for this script. But you can easily figure out how to integrate by viewing the source code.

  • Horizontal JavaScript Accordion - This script requires no JavaScript frameworks and is just 1kb. It has been tested in all major browsers. This is a great an easy script to implement.

  • Accordion v2.0 - This accordion script is built with Prototype and Scriptaculous. This script handles both horizontal and vertical accordions. It can even have an accordion inside an accordion. You should check this out.

You can read the full list here.

This is a great list and many of these scripts could be useful if you want a different accordion script.

jQuery UI 1.5 - Rethinking UI

Congratulations to the jQuery UI team on their release of jQuery UI 1.5!

jQuery UI provides low to high-level interactions and themeable widgets for your rich internet applications. Since it's built on the jQuery JavaScript Library, you have a solid foundation on which to build your apps. The library revolves around different mouse interactions, including drag/drop, sorting, selecting, and resizing. Also, you can expect to find the jQuery Enchant effects framework along with some reusable widgets [accordions, date picks, dialogs, sliders, and tabs] included in this release.

What's new?

- Refactored API
95% less exposed methods means 95% less methods you have to remember.

- Increased Stability
A dedicated bug tracker, new unit tests, and the addition of jquery.simulate.js - a plugin specifically designed to fire true browser events..

- Effects
As mentioned above, this release includes Enchant as a part of jQuery UI and includes features like advanced easing, class transitions (morphing) and color animations. You also get all the effects that come standard with script.aculo.us (blind,bounce,drop,fold,slide …), but also some new effects like transfer, explode. clip, and scale. Check out the demos.

View the changelog for a full list of features, bug fixes, and other changes in this release

Imagine you've downloaded a new UI library and are ready to integrate it into one of your applications, what's one of your big obstacles? That's right, figuring out how to get it to match your application's color scheme and look and feel. Wouldn't it be nice if you had a tool that could easily do most of the work for you?

Well get ready for ThemeRoller: a new theme creator for the jQuery UI library created by the crew at the Filament Group in Boston.

ThemeRoller gives you the ability to style your jQuery UI components in minutes. You can easily preview your theme as you make adjustments and when you're done, you can download a ZIP package containing the css, image, and demo page files for your theme. If you don't feel like rolling your own, or maybe want some inspiration, check out ThemeRoller's gallery to browse and download a variety of predefined themes.

Special thanks has to be given to the Liferay staff, who invested countless hours into the development of the new UI website, and with whom the team worked closely together to stabilize jQuery UI for all kinds of enterprise situations.

jQuery UI v1.5 Final Release: http://ui.jquery.com/download

Check out Themeroller

Title Capitalization in JavaScript

John Resig has written a good JavaScript port of the excellent Perl script written by John Gruber that provides pretty capitalization of titles. It is amazing how well the script works for capitalizing words.

Below is an excerpt from the post.

The excellent John Gruber recently released a Perl script which is capable of providing pretty capitalization of titles (generally most useful for posting links or blog posts).

The code handles a number of edge cases, as outlined by Gruber:

  • It knows about small words that should not be capitalized. Not all style guides use the same list of words — for example, many lowercase with, but I do not. The list of words is easily modified to suit your own taste/rules: "a an and as at but by en for if in of on or the to v[.]? via vs[.]?" (The only trickery here is that “v” and “vs” include optional dots, expressed in regex syntax.)
  • The script assumes that words with capitalized letters other than the first character are already correctly capitalized. This means it will leave a word like “iTunes” alone, rather than mangling it into “ITunes” or, worse, “Itunes”.
  • It also skips over any words with line dots; “example.com” and “del.icio.us” will remain lowercase.
  • It has hard-coded hacks specifically to deal with odd cases I’ve run into, like “AT&T” and “Q&A”, both of which contain small words (at and a) which normally should be lowercase.
  • The first and last word of the title are always capitalized, so input such as “Nothing to be afraid of” will be turned into “Nothing to Be Afraid Of”.
  • A small word after a colon will be capitalized.

He goes on to provide a full list of edge cases that this script handles.

You can read the full post here.

I can see some uses for this script in applications that would like to take user input and make it into a properly formatted title. This could be handy in a del.icio.us or digg like application.

YUI based Color Picker Widget

Dynamic Drive has posted a new color picker widget built with the YUI JavaScript toolkit. This widget can be integrated in a form field to provide an inline or floating color picker. A control can also be assigned the color picker, activated with a click, with an option to set the control's background color based on the value chosen in the color picker widget. Since each color picker is defined as an empty DIV on the page, you can surround it with content and style it as you like. This new implementation also supports multiple instances of the color picker on the same page. So, two form elements can have two separate color pickers, as opposed to having one picker shared by all elements.

Visit Dynamic Drive for the script, demos, and installation instructions.

Google's Design Principles

Tagged:  

Google's User Experience (UX) group has put together a list of 10 [high level] design principles that encompass what they call a "Googley" design. These principles represent their User Experience group's declaration of beliefs.

For your consideration, here are the ten principles:

1. Focus on people—their lives, their work, their dreams.
2. Every millisecond counts.
3. Simplicity is powerful.
4. Engage beginners and attract experts.
5. Dare to innovate.
6. Design for the world.
7. Plan for today's and tomorrow's business.
8. Delight the eye without distracting the mind.
9. Be worthy of people's trust.
10. Add a human touch.

For details on each principle, visit the Design Principles page on Google's corporate site.

25 Web 2.0 Generators

So, you're just finishing the next great Web 2.0 app, but you still need a badge or logo for the application. Well, WebTracker.com has put together a list of 25 great tools to make your Web 2.0 fully Web 2.0. The list has everything from button makers to Web 2.0 domain name suggesters.

Below is an excerpt from the list.

Domain

  • MakeWords - MakeWords is a domain name generator that creates random words that you either supply or you don’t. It lets you know what domain name is available.
  • NameBoy - NameBoy creates domain names based on a word that you want in your domain. It then tells you what domain is available.
  • Dot-o-mator - Dot-o-mator is a web 2.0 domain name generator that allows you to select words and then have it combine them to form a domain name.

Favicon

  • Favicon Generator - Favicon Generator takes an image that you upload and makes it into a favicon.
  • Favicon.cc - Favicon.cc allows you to create a favicon icon online without having to upload any file.
  • Favicon Editor - FaviconEditor allows you to upload a photo or you can create a favicon.

Gradients

  • Gradient Maker - Gradient Maker allows you to generate a gradient of 3 types, with instant previewing so you get exactly what you had in mind.
  • Gradient Texture Generator - Gradient Texture Generator allows you to create up to 4 different types of gradients with any colors that you want.
  • Online Gradient Image Maker and Button Generator - This generator is the most in depth I’ve seen it has so many different options. It is a must see for any one.

You can see the full list here.

This list has some cool tools that are very useful if you are looking to make your application look fully Web 2.0, especially if you are not very artistic. If you have used any of the tools on the list I would love to hear your comments on them (as always you can leave them in the comments).

A Better Ajax Back Button - Part2

After a post that I wrote a few months ago on A Better Ajax Back Button, I received many comments. Many of the comments have asked for more information on the post and a working example.

In my previous post the code I used was done using JavaScript prototype objects. Because for some this is a bit more difficult to read I made this example as simple as possible to make it a bit easier to understand.

The below is the JavaScript portion of the code that is needed to accomplish the back button solution.

		function CheckForHash(){
			if(document.location.hash){
				var HashLocationName = document.location.hash;
				HashLocationName = HashLocationName.replace("#","");
				document.getElementById(HashLocationName).style.display='block';
				document.getElementById('Intructions').style.display='none';
				for(var a=0; a<5; a++){
					if(HashLocationName != ('Show' +(a+1))){
						document.getElementById('Show'+(a+1)).style.display='none';
					}
				}
			}else{
				document.getElementById('Intructions').style.display='block';
				for(var a=0; a<5; a++){
					document.getElementById('Show'+(a+1)).style.display='none';
				}
			}
		}
		function RenameAnchor(anchorid, anchorname){
			document.getElementById(anchorid).name = anchorname; //this renames the anchor
		}
		function RedirectLocation(anchorid, anchorname, HashName){
			RenameAnchor(anchorid, anchorname);
			document.location = HashName;
		}
		var HashCheckInterval = setInterval("CheckForHash()", 500);
		window.onload = CheckForHash;

In the above code you will notice that the function RedirectLocation calls the RenameAnchor function then sets the value of the hash (if you read the original article I go into more detail about what an anchor and hash are) in the URL. It is important that the RenameAnchor function is called before setting the hash value as it is important that an anchor with the same value as the hash exists before changing the value in order for the back button trick to work. The next important thing is that an interval is set to call the CheckForHash function (this interval could be whatever you want, but the smaller the number the more responsive the back button will be to the user) which checks the hash value and depending on the value will display a div (in your application you could have the function different, but I just wanted to keep it simple by showing and hiding div's).

Below is the HTML portion of the code.

	<a id='LocationAnchor' name=''></a>
	<div id='linkholder'>
		<a href='javascript:RedirectLocation("LocationAnchor", "Show1", "#Show1");'>Display Option 1</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show2", "#Show2");'>Display Option 2</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show3", "#Show3");'>Display Option 3</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show4", "#Show4");'>Display Option 4</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show5", "#Show5");'>Display Option 5</a>
	</div>
	<div id='Show1' style='display:none;'>
		1st Option
	</div>
	<div id='Show2' style='display:none;'>
		2nd Option
	</div>
	<div id='Show3' style='display:none;'>
		3rd Option
	</div>
	<div id='Show4' style='display:none;'>
		4th Option
	</div>
	<div id='Show5' style='display:none;'>
		5th Option
	</div>
	<div id='Intructions' style='display:block;'>
		Click on the above links to see different values, then use the back button to see your browsing history.
	</div>

In the above code there is an anchor tag that will be renamed in the JavaScript to trick the browser into thinking that the anchor exists. We then have all of the links set to call the RedirectLocation function in order to make sure that the hash and anchor values are set correctly. Finally there are a series of div tags that hold various content and will be displayed or hidden.

That is pretty much all there is to the example. You can view the sample here. Or you can download the code here.

I have tested the script without any issues on Firefox 2.0.0.13 and on Internet Explorer 7. It should work on Opera, Safari and earlier version of Internet Explorer and Firefox, but I have not had a chance to test on these browsers.

In my testing the code works with the back button, forward button and the refresh button. Plus pages where bookmarked correctly.

If you find a good use for this code I would love to hear about it (you can leave it in the comments or write a blog about it with your free Ajaxonomy account).

33 Most Beautiful JavaScript and Flash Galleries

v!valogo has put together a great list of JavaScript and Flash Gallery scripts. The list includes 33 scripts and is quite an impressive list.

Below is just a small sample of the Galleries.

AJAX Image Gallery powered by Slideflow

Lightweight Image Gallery with ThumbnailsDemo

Live Pipe PhotoFolderDemo

JaSDemo

JaS is a highly customizable JavaScript library for easily turning your images into a collection viewable as a slideshow, and with fading effects, if desired. It also supports automatic thumbnail creation and tagging of images, so the viewers can find the exact images they're looking for. You can use it any way you like in your own web site, and adapt it to your specific needs.

MooFlow

MooFlow is a Javascript based Gallery looks like Apple's iTunes or Finders CoverFlow.

You can see all 33 JavaScript and Flash Galleries here.

If you are looking for a cool way to display images on your site or application I definitely recommend checking out this list.

Syndicate content