Peer into the mind of Dan as he tries to build an MP3 Player for his PDA and searches for the next thing in his life be it an electrical engineering job or graduate school.
Woohoo a new CSS layout on DanielTse.com. Its simpler in a way, but also there's dynamic menus and the whole layout took only two hours to do!
This probably isn't the first time that CSS divs were used but it is for me! There are multiple solutions out there to do 'pop up menus', I recently gave a link to the solution by Dynamic Drive to a friend of mine because I thought it was simpler.
Its not.
While some people will live with having to change their CSS to add more menu choices (this is understandable) what this affects is the ability for people to search your pages. Think about it, if your submenus are dynamicallly generated then there's no way for the search engine to parse through those pages unless it too could behave the way a user does. It doesn't. Generally, a search engine works by reading through the code of your webpage and catalogues each link. It then goes deeper by another level and catalogues those pages and links as well. If you think about it, dynamic menu generated webpages will not have their javascripts parsed. Using this method with CSS and DIV tags you're able to allow not only for better accessibility (not everyone runs Javascript, but better search engine hits.
I hunkered down and wrote a script that makes DIV tagged things appear and disappear. After man searches for scripts that make DIVs appear and disappear there weren't any that were formatted exactly the way I wanted. I wanted the javacript to show submenus (which are separate from the mainmenu DIV). Anyways take a look see, the styles are taken out just for simplicity sake.
<html>
<head><title></title>
<script>
//Show n' Hide DIVs - Daniel Tse 2003
//Dan@DanielTse.com
//call showMenu('TYPE_DIVNAME_HERE')
//NOTE: Change the hideALL() function when you add/takeaway new menu items
function showMenu()
{
var arguments=showMenu.arguments; //array of all arguments
var divID = arguments[0]; //First argument is ID of Div
hideAll(); //Hide all shown menus
document.getElementById(divID).style.visibility='visible'; //show only the one you want
delete divID;
delete arguments;
return 0;
}
function hideMenu()
{
var arguments=hideMenu.arguments; //array of all arguments
var divID = arguments[0]; //First argument is ID of Div
document.getElementById(divID).style.visibility='hidden';
delete divID; //Cleanup
delete arguments; //Cleanup
return 0;
}
function hideAll()
{
//Cheat a bit here
var AllDivs = new Array("subabout", "subdp", "subprojects"); //Array of all divs to hide
var i=0
var DivCount = AllDivs.length;
for(i=0; i<DivCount; i++){ hideMenu(AllDivs[i]);}
delete i;
delete DivCount;
delete AllDivs;
return 0;
}
</script>
</head>
<body>
blah!!!
<div id="TopMenu">
<ul>
<li><a href="index.html" >home</a></li>
<li><a href="about.html" onMouseOver="showMenu('subabout')">about</a></li>
<li><a href="lessons/math.html" onMouseOver="showMenu('subdp')">dp on</a></li>
<li><a href="projects.html" onMouseOver="showMenu('subprojects')">projects</a></li>
<li><a href="weblog/weblog.html">weblog</a></li>
<li><a href="links.html">links</a></li>
</ul>
</div>
<div id="subabout" class="submenu">
<ul>
<li><a href="about.html">about</a></li>
</ul>
</div>
<div id="subdp" class="submenu">
<ul>
<li><a href="about.html">DP ON</a></li>
</ul>
</div>
<div id="subprojects" class="submenu">
<ul>
<li><a href="about.html">projects</a></li>
</ul>
</div>
</body>
</html>
Jeffery Zeldman recently pointed to this Web page analyzer, which gives you a great breakdown of what's being downloaded by a page :)
A few people have been asking about bandwidth and how it all works so without further ado:
What is Bandwith?
Basically bandwidth is a measure of how much data (pictures, videos, even webpages themselves) you've sent over a period of time (e.g. month). Most hosting services (like Tripod and especially your own domain) will have a bandwidth limit. This is because in the end, bandwidth is expensive, it doesn't matter how fast you go, its how much information is transferred. In the end its a nice measure of how much you send in/out.
I have high-speed who cares?
Yes, but again, it doesn't matter whether you can download 1MB from a website in ten seconds or ten minutes. You will still transfer 1MB of data and this is what's important. In fact having lots of people with high speed could mean that you just reach your bandwidth more rapidly.
How is it Measured?
Since bandwidth is really data you need to know the size of your files. For example if one of your webpages is 10 Kilobytes (KB), then EACH TIME the webpage is viewed by someone then you 'spend' 10Kb. Think of your bandwidth limit as your balance in your bank account-like in the real life, different people have different limits so some people can spend more than others. Each time someone visits your webpage its taken out of your limit. For our example, lets say you had a bandwidth of 1MB (1000KB), this means that if you were to only send out that single 10KB, then a simple division (1000/10) will let you know that you can only have a 100 views of your webpage before your reach your bandwidth limit.
Only 1 MB bandwidth? Get real!!
This isn't as far-fetched as you think. If you examine Tripod's bandwidth limits (on September 10, 2003), you'll find that their monthly bandwidth limit is 1GB (1000MB) BUT to "help you control your website" they further subdivide the bandwidth into daily and hourly limits. Time to whip out your calculators baby! (Just kidding)
Now 1.38MB might not seem a lot of room-don't forget you still have to worry about pictures (averaging 40KB each) and then there's the fact that you have more than one webpage! (On average people will visit between three and four pages of your website). Lets not forget about Flash files as well (average 75KB) You can see how quickly this will add up.
How do I find the size of my webpages/website?
Most hosting packages have a file manager that can tell you the size of your individual webpages and pictures. The onus would then be on you to add the size of the webpage (HTML file) and all the pictures used by that site (all the .jpg, .gif, .png, etc. files). If you use Dreamweaver there's actually a little box at the bottom of the window that reports the size of the webpage you're building (including all the pictures and everything). One final way is to surf to that page, click File -> Save As... make sure you're saving the complete webpage and NOT HTML only, then save the webpage to a known location on your computer. You can then select the files you just saved on your computer Right-Click -> Properties and the computer will then give you the size. Of course if you worked on the webpages on your own computer this step is totally unnecessary.
Holy Schnikes! What am I going to do?
There are a few easy rules to use:
Stop using Frontpage!!!
DON'T USE Word's 'Save as Webpage...' feature!!!
These programs generate huge file sizes that are often really difficult for you to edit/revise later on. These pages are often termed 'bloated', meaning they include unnecessary code. You could go with different service providers like GeoCities (works out to 4.166MB/hour) or your own Internet Service Provider might provide different bandwidth (or possibly none) limits. In the end it comes down to designing good webpages using proper HTML and CSS.