banner

Tuesday, July 1, 2008

Interview with TracksLife.com - Your Personal Tracker

There are many popular web apps online this day in age that almost everybody has used: Youtube, Facebook, Flickr, and many others. I recently found another interesting one to add to the list: TracksLife, which I got an interview with the site's founder Scott.

read more | digg story

Sunday, October 28, 2007

Digg Style Update Characters While Typing

Hey guys, It's been a while since my last post. I've been awfully busy with stuff, and such... so yea, I've some some nice content to share! Here, I want to discuss how to make a part of text that will update a number according to how many characters you type into the textfield, and once you reach the limit you will not be able to type anymore. I got this idea from Digg.com, where their news submission page has this implemented. I'm just going to go over a basic one here, and you can probably figure out the rest. Don't know what I'm talking about!? then check out the demo here. If you're ready, let's continue!

So, let's start out with the HTML code. Below I have posted the simple HTML code you'll need: it's really just a textarea, no form needed for this simple script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta equiv="Content-Type" content="text/html; charset=utf-8">
<title>Update Counter While Typing</title>
</head>

<body>
<strong id="countArea">350</strong> Characters Left<br /><br />
<label for="text">Enter Some Text:</label>
<br /><br />
<textarea id="text" name="text" cols="50" rows="8" wrap="soft" onkeyup="updateCounter(this, 350, 'text', 'countArea');" onpaste="updateCounter(this, 350, 'text', 'countArea');">
</textarea>
</body>
</html>


This is, again, just a simple textarea. I have not put any text in it to begin with, just so we can keep the counter nice and simple. However, you probably noticed how I have added some functions to the textarea depending on some actions you do (whenever you release a key or paste something). Now, here we will examine some JavaScript.



<script type="text/javascript" language="javascript">
<--
window.onload = init; function init() { document.getElementById('countArea').innerHTML = 350-document.getElementById('text').value.length;
}
function updateCounter(field,maxlength,id,counter) {
var totalLength = field.value.length;
if(totalLength >= maxlength) {
field.value = field.value.substring(0, maxlength);
}
document.getElementById(counter).innerHTML = maxlength-field.value.length;
}
-->
</script>



Well surprisingly, that isn't too much code to take in. For me, anyways. Now let's explain it, shall we?

The first thing that I have done is whenever the window is loaded, a function with the name init is called. This will check a division on the page with the ID "countArea", which is where you're variable number will be held. The function will set it to 350(which can be changed, I just used 350 in this case. The number in that place is actually the max amount of characters you want in the textarea), and then subtract the value of the textarea so far. It will probably be 0, but if the user clicks the back button after they had already entered text into the textarea, then it will update the number right when the page loads.

The next function is updateCounter(), and this one is a doozy. It takes 4 parameters: field(which is usually just set to "this"),maxlength(the max number of characters allowed in the field),id(the id of the textarea), and counter(the ID of the span or div that is around where your number is).

First off, I check to see how many characters are in the textarea already. I set this number to a variable of totalLength. Then we have an if statement, which basically says "if the user has typed in more characters than the maximum number of characters allowed, execute this". What that does is it deletes everything that the user types after the limit, which is handy for getting your point across to the user that they have typed too much. Then, the final part to this function is getting the counter div, span, or whatever the number is enclosed in and updating it. Pretty simple code, eh?

And that's pretty much it! Hopefully it was informative to you guys, and I hope I can have some more tutorials in the future. If you have any questions just post a comment here, and I'll try to get back to you.

Thursday, August 2, 2007

Typography I

Today I'm looking at typography: not really the main structure of it, but just some neat things. I have gone through and found many different fonts that I love and cherish, and I don't think that my work would be the same without it. Now don't get me wrong, the basics like Arial, Times New Roman, and just serif and sans-serif fonts are the best to use whenever you are working with actual web site fonts. Defining them using CSS for your paragraphs and such would be the best way to be the most accessible, but if you want to add some flair to the work that you do in Photoshop or Flash, I would suggest some of these fonts(Note: the headers are also links to download the fonts).


I know that I talk about Digg a lot, and I mention it beyond the reason of just saying "I like the site". I love the design, all the graphics, and all the back-end coding as well. But what won me over from the start was it's fantastic logo. The font FFF Forward is so simple, but yet it still looks like nothing else out there to date. It really is one fantastic font, and maybe adding your own touch(such as a gradient) will give it your own unique style.


I had looked around for a while before I found a font like this. This is one of those goofy fonts that can sort of fit in with everything, depending on how you apply it. Although it's main purpose seems to be used for a Comedy Club logo or for the next Mickey Mouse video game, I would suggest giving it a download and checking out out, you may be surprised with what you get.


Ah, the classic Nintendo. Good times with those wonderful games, and the fonts that they used! The Press Start font is a mimic of the fonts that you would commonly see in the Super Mario games, and many other games during the 8-bit and 16-bit days of video games. This font may be just what you need to dress up your new arcade site, or to give your home page a vintage feel.


The Mad Scientist font, I think, looks somewhat like what a Mad Scientist would have, but it really doesn't capture the essence. Nevertheless, don't judge a book by it's cover(remember what grandma used to tell you?). This font, although hard to explain, has some nice effects that can be achieved when edited in Photoshop by using the smooth, strong, crisp, or sharp anti-aliasing states.


Pascal is a nice little font that may remind you of art class in High School. I'm guessing you took art that way you didn't need to take Honors Chemistry or AP Calculus, something like that? Well, this font can find itself into many different uses, and it is a very clean font as well, as long as you have some type of anti-alias applied to it. It's pretty thick as well, so being able to apply different text effects to it is a major thumbs up. Although it is not the font for a serious business look, you may want to download it just for your next little project you do.

And there you have it, 5 nice little fonts that you can download right here right now and use. I hope you enjoyed the list, and maybe I can post up another one in the future. If you find any awesome fonts online, feel free to post them in a comment on this post. Until next time!


Thursday, July 19, 2007

Some Helpful Links for Developers

There are a lot of unknown little knick-knacks spread all across the web to help Web Developers out. Everybody knows about different programs that they can purchase, and even though those would be very helpful, some people just can't spend that kind of money. So what do you do? Well, I have some links here that may make it a bit easier. Well, we can only hope, right?

My first link is to a website called www.tredosoft.com. They have some nifty freeware there, and one that I am particularly fond of is their Multiple IE software. Microsoft has made it very difficult to be able to install many versions of Internet Explorer to be able to debug and test out your websites, but this little tool helps you get that done.

Multiple IE's from Start MenuDownloaded here, you can check out all of it's features with a few screen shots and some small descriptions of it. Multiple IE's will install Internet Explorer 3.0, 4.0, 5.0, 5.5, and 6.0. It dates back pretty far into Microsoft's history, and it is helpful because you can use it to test just Internet Explorer 6.0, or you can be really cautious and test back as far as 3.0. I would highly recommend downloading this one.

Another useful thing that has recently hit Windows is the Safari browser. Although still in Beta, it is available for public download and use. Although it will not run exactly the same on Windows as it would on a Mac, it can still be helpful for getting an idea of what your site may look like in the Safari Browser. That can be downloaded here.

The Safari Download page running in Safari
Another good thing about this is the Private Browsing feature, which no other browsers have(as far as I know). When this is turned on, Safari will not save any cookies, searches, or page history. But once you turn it off, it will start saving it again. And unlike Firefox, where if you clear all of your cookies and history than they are gone forever, Safari will only clear the history of sites when you are in private browsing. So all the sites you visit before going into Private Browsing mode will still be saved. Pretty neat, huh? I would recommend downloading this, but it's not a necessity.

The last thing that I want to mention here is something that I am sure you have heard about a lot, and maybe you already have this. I have found this Firefox Add-On extremely useful, and any JavaScript coder will too. It's called Firebug, and it's a small Plug-in for Firefox. It basically sits in the bottom of the toolbar and either shows a green check when the page is clear of JavaScript errors, or it shows a red X when there is 1 or more errors on the page. You can them click the button to bring up a menu to show you all of the errors on the page. If you are trying to make a JavaScript code, this may just be the one Plug-in that will save your life. You can download it here.

Using Firebug to Inspec G4TV's JavaScript
In the screenshot above, I am using Firebug to check out G4TV's JavaScript code, and the small green arrow in the right hand corner shows me that it's all okay. And not only can I check out their JavaScript, I can also see their CSS, HTML, DOM, and much more. Firebug is possibly the most helpful addition for Web Developers, and I would very highly recommend downloading it, even if you are a little against using it at first. You will slowly learn to love it just like I did.

Well thanks for checking out some of these links, and hopefully I can find some more helpful links and post up some more in another entry.

And if you want direct download links, here you are:
Multiple IE
Safari Browser
Firebug(since this is an add-on, there is no direct link, so just click the "Install Now" button).



Wednesday, July 11, 2007

Navigation Exploration - Part 2

In the last segment I talked a bit about two common types of navigation, at lease placement and interactivity-wise. Now I want to go a bit more in-depth with these and really examine some new types of navigations that you can use on your sites. If you are new to web development, the best place to get inspiration for new ideas is off of other people. A neat blog entry I found is actually on a German blog called Dr. Web Blog, which has loads of pictures and links to sites that exhibit the new trend of navigation menus: Web 2.0 Navigations.

Dr. Web Blog

So when choosing what type of navigation to use, it's important to sit back and get a feel for the site. If you are designing a website for a small business, then you will probably need anywhere from 4 to 8 links in your navigation, which could easily be fit into the head section of the web page. If you have around that range, it's a good opportunity to let the creativity fly. Browsing around other websites that have similar themes can help you get an idea about what exactly you are trying to do.

Some sites that use good simple themed navigations are mostly the new Web 2.0 sites. Technorati has a great navigation. Even though the site is an immense search-engine style, the navigation is just a small bar near the header. It contains only the main links that you will need, and that's it. Maybe a little too simple for this monster of a site, but a good navigation none the less.



Another really simple navigation is found at Stikipad. This is an online wiki where you can store information. Although this is not a hugely popular site, it would still need to have some staple links in the navigation. As for how they did it, it was just blended into the very head of the website right next to the logo. I am actually a big fan of this navigation because it is very easy to spot where it is, whatever page you are on us underlined with a large green bar, and it's just easy to understand. If you are questioning how to lay out a navigation, I would suggest taking a look here for inspiration.



Let's say that you have a lot of information that needs to be accessible on the site, so you actually need the navigation to have some space. However, you don't want to confuse older people who visit the site and look at a long list of links and go "this hurts my eyes too much!". Well, a simpler way could be either to have drop-down menus(yuck!) or to use tabs that open up sub-menus. Listed below are three computer websites: Best Buy, Circuit City, and CompUSA. Best Buy and Circuit City use the drop-down menus, while CompUSA uses a sub-menu style.

Best Buy has done a good job with their navigation. Although I am not a fan of the large drop-down menus, they did fit it in really nicely. Plus, once you mouse-over the buttons, the menu is very responsive and appears quickly. The Circuit City menu, however, takes a second for it to actually appear, which is tedious to get through the menu. Although the colors do match the site nicely, it's just a pain to wait when Best Buy's is much more responsive.







Both of the menus do fit nicely to the site either way, so that is one option to consider. Another to consider is loading up the different topics into sub topics and then allowing your visitors to sort of pick and choose which one they want to find. CompUSA uses this style of menus, and I find it pretty nice.

Some styles of this menu will change when you mouse over the area, and some you actually need to click on. Either way, they work very well for people. Even though you are still listing a lot of links, you are doing it horizontally, which is easier to read that vertically in a list.



Their pages take a little while to load as well, so it's not very responsive as some sites on the web that use this style of navigation. However, as you move through the topics, the top part of the menu changes the tab color to highlight where you are, which is nifty and helpful for the user to remember.

So as for choosing between the styles of menus, that's up to you. But once you find out what you want to use, just Google things to see what you like and what you can find. You may be very surprised with what comes up, and it may lead to a site that helps you design the navigation of your dreams.




Monday, July 9, 2007

Navigation Exploration - Part 1

A lot of people fret over creating a perfect navigation, and for relatively good reason. Navigations are the key to any website, and it's what allows people to find your content. If your navigation is difficult to work with and needs an instruction manual to learn how to use, then your users will just head on over to the "back" button and choose another site. There are some key things to consider when choosing to make navigations, such as space, color, design, etc. But we can start small.

Any important site on the web today takes careful consideration of their navigation placement. This is very important, because if the user can't actually see the navigation, they may have a hard time using it. However, you don't want the navigation to be smack-dab in the middle of the page, because that's where the user is going to be spending their time with your content. So, there are two popular placements for navigations: at the top near the header, or off to the left/right side.







The way to decide which one to choose depends on the amount of content that you have, and the type of site you are designing. Let's examine these each and weigh the pros and cons.

Head Nav's


The main types of header navigations are sites that only have about 7-8 main pages. I say main because you may have smaller pages that branch off of your main pages, but they do not actually need a place in the header. This saves room for other important pages that the user may specifically be looking for. These types of menu's can be incorporated into almost any site, and they work well. Some websites will have headers with a main menu, and then a sub-menu. A good example of this is on the social networking site Digg.com:



Digg incorporates searches for the top stories by clicking on a specific category, and then you can click on sub-categories to choose from an even larger list. This can be very helpful on many different types of business sites. One of my favorite sites to incorporate this double menu style design is Template Monster.com:



Note that there are many, many websites that will use this strategy, so there are many other sites that have this design. The ones I have posted here are just for examples.

The positives about using menus like these are that it is very flexible, such as design wise. Since you only need to worry about it fitting into the length of your website, you can make very creative menus with different styles of fonts and graphics, which can bring out the ultimate creative side in many designers. These are also good menu styles to choose because it doesn't overload the user when they look at it, which can sometimes happen when they see a long list menu off to the side.

Side Nav's


Ah, the fantastic side navigation. Who doesn't love it, right?(I can think of a few thousand). The idea behind side navigations is that you have a lot of pages on your website, all with very important information that can't be linked from other pages. There can be websites with lots of information and do this in the header using JavaScript to create a drop-down style of a menu, but there are many issues with those.



First issue with these is that they look really outdated. With all of the new Web 2.0 styles of navigations coming out, these old CSS and JavaScript-based menus do not mix well. Sometimes, websites do have the ability to pull off a nice look to them, but the majority of them just look foolish and unimpressive(in my opinion). Another issue with them is that it can be stressful getting exactly what you want to drop down.

Say you want to go under a navigation titled "main", and underneath that there is a section called "about". You move your mouse towards the about link and BAM! All of the sudden, your mouse has somehow triggered the next navigation menu in line, and you now have to work your way back to the first nav to click on about. Pain in the ass, huh?

This type of thing will not usually happen with drop-downs, but when they do happen, it can be such a pain to deal with. That's why I think it is a lot easier to just stay on the safe side with either a simple header navigation or a side nav.

Wow, got a little off the topic there, but I think I got my point across with using drop-down navigations.

Anyways, back to the side nav's. The most common type of website to use a straight list of links on the side is... DING DING DING! Gaming websites. Want to know why? Because video games have a lot to cover. Secrets, enemies, strategies, abilities, items, stats, levels, characters, plot...and that's just for one game!

Now don't get me wrong, there are most certainly other websites that use this style of navigation, but game websites and fan-sites(which are websites created by fans of certain video game series') are the greatest users of these. The most common layout with these styles is the three-column layout, meaning that there are three columns that hold your website stuff:

Credit to purecaffeine.com

Your left and right columns will usually hold your links, affiliates, other helpful sites, etc. Then your middle column will hold all of your data and such. However, we can save the site designs for another entry.

The pro's of using a side navigation is definitely the simplicity of it. You do not need to create images and choose complex fonts to fit the need, you can just choose the regular font that fits your site, and then edit the CSS to create some pretty rollovers with the a:link, a:visited, a:hover, and a:active states. You also don't need to just list all the links in a row, nor would I advise that. I would say that you could create some type of small little themed graphic or styled header font to split up the navigation into sections.




When choosing placement of your navigation, try to take these both into consideration. When choosing between the two, it shouldn't be too hard. Do you have so much important information that it would just be easier to list it along the side, or should you try to make it a navigation at the top of the page? A good idea with most business websites and popular businesses of adults is to choose a header nav, because not all adults these days are familiar with websites and using navigations, and long lists may cause dizziness and indigestion :).

So until the next entry, hopefully this filled you up a little bit on the understanding of a great navigation system.






Friday, July 6, 2007

Web 2.0 Links to Del.icio.us, Digg, and More!

I have noticed that a lot of websites have links at the bottom to multiple Web 2.0 style sites, with social networking and loads of other goodies. I have also noticed, as I have run into many times, it is difficult to find many sites with easy to understand links to add. So, Here it is! All of the code here is the most basic that it can get, no real PHP or scripting language knowledge is needed. I have replaced part of the URL with [YOUR URL HERE], which you must replace with your actual URL.

I hope these can help, even a little bit. I know that it can be frustrating trying to find things on the web, and these are another little knick-knack that you can keep in your bookmarks. The images I have hosted on Photobucket, so you will have to savethem either from this blog or from another site and upload them to your own server for use, just so it's a bit safer.

And if I have missed any cool or important Web 2.0 style sites that you think I should add, either E-mail me or comment this entry saying which ones to add. I'll be glad to edit the list for any legit entry, so post 'em up!


Del.icio.us Del.icio.us




Digg Digg




Technorati Technorati




Newsvine Newsvine




Ma.gnolia Ma.gnolia




Furl Furl




Reddit Reddit




Co.mments Co.mments




Del.irio.us Del.irio.us




Blinklist Blinklist




Mister Wong Mister Wong




Fleck Fleck




Blue Dot Blue Dot




Wists Wists




ThisNext ThisNext




Taggly Taggly




Spurl Spurl




Slashdot Slashdot




Simpy Simpy




RawSugar RawSugar




Popcurrent Popcurrent




netvouz netvouz




linkaGoGo linkaGoGo




IndianPad IndianPad




Feed Me Links Feed Me Links




dzone dzone




DotNetKicks DotNetKicks




Connotea Connotea




BUMPzee BUMPzee




BlogMarks BlogMarks