Web 2.0

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).

Explore Dojo with Dojo Campus Feature Explorer

Dojo Campus has an interesting application called the Dojo Campus Feature Explorer. The application allows you to see examples of various features of the Dojo library and the HTML for each example. The application has an incredible amount of information.

You can go to the Dojo Campus Feature Explorere here.

I recommend this application to anybody that is wanting to learn more about using Dojo.

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).

Silicon Valley Google Technology User Group to host maps meeting

Tagged:  

If you are interested in making a cool Google Maps mash-up the Silicon Valley Google Technology User Group will be hosting a maps meeting. Michael Geary will be the primary speaker at the session. Michael created the Primary Election Results Map application and is very knowledgeable about making a Google Maps mash-up.

The event is April 2nd (so this coming Wednesday) and starts at 5:30pm with Michael speaking at 6:30pm. The event will be held at the Googleplex.

You can register for the event here and you can read more about the event here.

markitup

markitup is an interesting script that allows you to change a textarea html element and turn it into a markup editor. You can use it to edit Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system.

The script is built on the jQuery library and does a good job of using the library. In case you are unfamiliar with the library you can learn more about it here.

You can see quite a few examples of markitup here. Also, you can read the documentation for the script here. Click here to go to the markitup web page where you can download the script.

This script would be very useful if you are creating a CMS, Forum or any system where your users would need to edit markup.

FriendFeed Launches API

Tagged:  

You have probably heard quite a bit about FriendFeed. The service creates a feed of your activity on multiple social networks so you can share it with friends. Today they have released an API for the service so you can start creating some cool mash-ups using the service.

The API offers PHP and Python libraries (unfortunately, if you are using Ruby or Java there are no provided libraries yet) and allows you to receive data in JSON, XML (a simple form of XML), RSS and Atom formats.

You can get more information about the API here. Also, Read Write Web has written a very good post about the API and you can read it here [they have some great articles, check out their post on ourTubeSpy application :-) ].

The API will possibly make some very interesting mash-ups. I'm thinking about using it for the next application for Ajaxonomy Labs (more on that in the near future). I'd love to hear your thoughts on the API and the FriendFeed service (as always, you can leave them in the comments or you can write a blog post about it on this blog with your free Ajaxonomy account).

Learning the Yahoo! User Interface Library

Tagged:  

If you are a developer using the Yahoo! User Interfaces then you are always looking for good resources for learning more about coding with the library. You've probably already gone through a lot of the information on the Yahoo! Developer pages and perhaps you would like a good book about the library. Well, I have come across a book called Learning the Yahoo! User Interface Library.

Below is what you will learn from the book

  • Explore the YUI Library—utilities, controls, core files, and CSS tools
  • Install the library and get up and running with it
  • Handle DOM manipulation and scripting
  • Get inside Event Handling with YUI
  • Create consistent web pages using YUI CSS tools
  • Work with Containers—implementation, skinning, adding transitions, and tabs
  • Debug, maintain, and update applications with the Logger control
  • Examples included in the book:
  •     Calendar interface
  •     Autocomplete
  •     Creating panels
  •     Dialogs
  •     Custom tooltips
  •     Forms
  •     Split button
  •     TreeView Control
  •     Browser History Manager with Calendar
  •     Simple animation
  •     Custom animation
  •     Creating tabs and adding content dynamically
  •     Dragging and dropping
  •     Implementing sliders
  •     Logger at work
  •     Logging custom classes

The book retails for $44.99 and below is the information that you would need to pick it up at your local book store.

Language: English
Paperback: 380 pages [191mm x 235mm]
Release date: March 2008
ISBN: 1847192327
ISBN: 13 978-1-847192-32-5
Author(s): Dan Wellman
Topics and Technologies: Open Source, AJAX

You can read more about the book and purchase it here.

It is good to see more resources for great libraries like the YUI. If you have a chance to read the book, I'd love to hear your thoughts on it (you can leave a comment or blog about it on this blog using your free Ajaxonomy account).

Widgetbox - Easily Create and Distribute Your Widgets

Tagged:  

You may remember that not that long ago we released the del.icio.us Spy Widget. Well, after the initial release I started looking into Widgetbox to extend the capabilities of the widget.

Widgetbox allows you to create or extend widgets that are Flash based, HTML/JavaScript, A Web Page, Blog/Feed or a Google Gadget. Creating a widget is easy, you just click on Make a Widget, then choose the type of content that you want made into a widget and you finally fill out the information in the forms to create your widget. Your widget can also be made to add to social networks like Facebook and MySpace (only Flash widgets can be put on MySpace) using a very simple wizard like process to setup the widget for these networks.

Widgetbox allows you to track subscriptions and hits of your widget. This tracking can help you easily see if your widget is gaining traction or if nobody cares about it. The service also has a directory that has a social feel (with it's user ratings and helping you find related widgets) and helps your widget gain in popularity due to it's viral features.

Below you can see the del.icio.us Spy Widget after using Widgetbox (If you are viewing this in a feed reader you will probably need to click on the del.icio.us Spy link to view the widget in a browser).

Widgetbox is a great tool for any developer wanting to make cool widgets that can easily be shared all over the web. Perhaps I should make a widget of the Ajaxonomy blog next. If you have used Widgetbox, I would love to hear about your experience (as usual, you can leave it in the comments or if you would like you can write a post on this blog using your free Ajaxonomy account).

ProtoFlow

Have you been looking for a cool way to display information on your web site or application. Well, one interesting script that can display information in a cool effect is ProtoFlow.

ProtoFlow is very easy to use and below is how you use it as described on the ProtoFlow web site.

How to use it?

Its fairly easy to use this lib. Just follow the steps:

  1. Download ProtoFlow and extract it.
  2. Add Prototype and Scriptaculous and Reflection.js to your page
  3. Add ProtoFlow.js and ProtoFlow.css to your page
  4. Add Markup and onLoad event (as described below)

Implementation:

Your HTML Markup would look like:


<div id="myCoverFlow">
	<img src="image1.jpg" alt="Caption for this image 1"/>
	<img src="image2.jpg" alt="Caption for this image 2"/>

	<img src="image3.jpg" alt="Caption for this image 3"/>
	.....
	<img src="imageN.jpg" alt="Caption for this image N"/>

</div>
			

Than you can initialize ProtoFlow like:

Event.observe(window, 'load', function(evnt)
{
	var ProtFlowExample = new ProtoFlow($("myCoverFlow"), {
		startIndex: 2,	//which image do you want the flow
						//to focus on by default
		slider: true,	//show or hide slider?
		captions: true,	//show or hide captions, by default we hide it. 
				//So YOU MUST turn it on here
		useReflection: false	//Add reflection to your images. Please 
				//note that this will slow down rendering.
	});
});
			

While there are other scripts that create a similar effect, ProtoFlow is the only one that I know of using Prototype and Scriptaculous. This makes it perfect if you are already using these libraries (just remember to compress the script files as appropriate as the libraries are a little large).

You can get more information about ProtoFlow and see a demo of it here.

If you find any interesting uses for the script I'd love to hear about it (you can leave a comment or you can write a blog post using your free Ajaxonomy account). So, start making that cool website or application and use this or some other interesting effect to make it stand out.

Quick Ajax Loading Icons

If you've done any Ajax development then you know that much of the loading of data is done in the background. This is great from a developers stand point, but from a users stand point it can be confusing as to what is happening while the data is being loaded. The solution to this is to show a loading indicator.

A loading indicator is a great idea and a nice animated image that could be hidden would be nice. However, if you are like most developers making a nice animated image may not be your strongest point. Well, today while seeing what was getting bookmarked on del.icio.us, using the del.icio.us Spy, I found an interesting and simple service that makes it very easy to get a nice looking loading indicator.

The service is call Ajaxload and is very easy to use. You simply choose the loading icon that you like and the background/foreground colors (you can even have the background transparent). Then you just save it to your computer using the "Download It" button and then you have your own customized loading indicator.

You can go to the service by clicking here.

If you have used this or a similar service I would love to hear about your experience with it (you can leave a comment, or if you would like you can write a blog post about it on this blog, using your free Ajaxonomy account). So, remember that your users would love to see a loading indicator when it is appropriate.

Syndicate content