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