Image map with popup effect hotspot... HELP!

In addition, I have added the following robots.txt file, I hope it is correct!


User-agent: *
Disallow:

I have just realized that it is the same thing as having no robots.txt file at all…

Hi,
Happy new year to everyone!

Unfortunately, now we have to go back to work!!

I see that you have posted some more questions :smiley:

Although some of these issues should go in different threads (and I would suggest that you learn about other areas too) I will do my best to answer some of them.

Regarding your meta tags

Some meta tags are optional, some are necessary… your meta <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”> should go at the very top.

This meta tag is for your web server, while the others are additional information for the search engines. Obviously, the server is more important. No page served… then why would you want to be on the search engines? :lol:

Regarding the tag from google… now that you have validated the site, you can remove it. It is not necessary any longer.

A script tag should never come before the meta tags. It can create problems because the javascript file will be loaded when the objects that it references to do not exist yet.

Regarding your robots.txt

Yep, it is correct. And it would be correct too if you leave the file empty. It would have the same meaning.

What you are not so correct is that this is equivalent as not having a robots.txt file at all. The difference is small, but it is there. The search engines always look for the robots.txt file, and if they don’t find it (that is, there is no file in the root with such a name) the server will send a http 404 error (file not found).
This will show in your server statistics as an error (which I find annoying myself).

The search engine will assume that it can browse and index the whole site (so no problem at all). It is similar to going to a fair, and asking a lady if you can simply walk around whenever I want. I find much nicer that someone tells me that I can do it (find a robots.txt file) than not receiving a response and then decide that I will do what I please…

Regarding the site and the popup effects

After all, this thread was about that :smiley:

I’ve been doing some thought about it and the best way to implement what you want. I am also worried on the usability issues that may arise. Is it really better for the user? Will they find it more comfortable to use if the click on a link and they receive a new window? I am not certain.

As a matter of fact, I can tell you that I have problems loading the page in two of my computers, so this is not to be taken lightly. The success of your page depends on how happy the user is with your site.

Anyway, the sure thing is that you are planning heavy content there (lots of pictures and I’ve read that you plan to add video as well). This is a clear signal to me that your site needs to be “ajaxed”. You can’t keep the user waiting forever till everything loads.

Ajax extends normal javascript with a new function xmlHttpRequest, that allows the loading of elements while the user is browsing and he doesn’t realise that the browser is getting new content. This makes resposes to user actions much faster because the page will show inmediately, and while he decides what to choose, it will load the rest.

For this, I would suggest the use of a framework or a javascript library. The two that came to my head are JQuery and Prototype… My inclination goes to Prototype. While I think that JQuery is more complete, Prototype is easier to use from the learning point of view and more than enough for your needs. It is very complete too, not too far from JQuery and has some very nice effects programmed.

In any case, any of this libraries will take off the load of making sure that your code is cross-browser (I am sorry to say, that not all browsers use the structure “document.getElementById” and this may not work in some computers)

It will also help you to get rid of the javascript in the page. It shouldn’t be there at all, if possible. Much better to get it in a external file with a .js extension.

Read a bit about them and see what you think about it.

JQuery: http://jquery.com/
Prototype: http://www.prototypejs.org/

Another thing, you mentioned that your page doesn’t show in Google.

It is indexed… you are there. But Google is hard competition and what you want to be on the first pages. To do that, you will need to update content in a regular basis (I mean content, not pictures and if you add video, it needs to be tagged accordingly).

My suggestion is that you start learning the tips and tricks from the SEO forum, starting from the stickies posted at the top of that forum. Getting the right results is hard. You need to set up your goals very clearly, and know very well your market to reach them.

It doesn’t show in one day or two. You need good 5-89 months at least, lots of hard work and effort, and well chosen keywords and text to get a number 1 position in Google. So patience.

Start finishing your site and then sending it to all the search engines you can. Since you are in Spain, a few could be:

  • google.es (although it is already in google)
  • yahoo.es
  • paginas-amarillas.es (yes, paginas-amarillas is a search engine)
  • spanish music directories

These are only a few.

Regarding adding video

It really depends on which format you use, so much of it is related to that. Standards say that you should use the <object> tag. Let’s say that your video is in FLV (flash video format) which is pretty popular. It could be something like this.

<object type="application/x-shockwave-flash" data="FlowPlayer.swf"
    width="320" height="263" id="FlowPlayer">
  <param name="allowScriptAccess" value="sameDomain"/>
  <param name="movie" value="FlowPlayer.swf"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noScale"/>
  <param name="wmode" value="transparent"/>
  <param name="flashvars"
    value="videoFile=mymovie.flv"/>
</object>

Now, this assumes that you have created your own video and you are hosting as well. Video takes a lot of bandwith, and depending on your hosting contract it may cost you a good deal of money. If your hosting provided charges when you pass a certain amount of MB, then you should consider a free video hosting service such as youtube, even if this means promoting youtube as well. If you are using this service, simply add the html code that they give you (in youtube, you can find it at the right of the video you are watching)

It is that easy.

Thank you so much with all your inputs… I will read about the prototype and the JQuery…and I will come back to you…
You are right about the loading… it takes too long… Specially with the pictures stuff… I really need to improve this too…
So are you saying that with Prototype I could improve all this? I know about JS so hopefully it should not be too hard, … right!?? If I you prototpe. does it mean I will have to redo my design? Actually I don’t really mind the effort since I think it is worth it…

I will read it over the week end and hopefully I will not have to come back to you for help!!!

Many many thanks

Ajax uses Javascript and it is based in an Asynchronous traffic.

Normally, when you write the address of a site, your request is sent to that server and the server answers by delivering the html/css/javascript files that your browser will render to recreate the page so you can see it.

This is a synchronous communication, and you will not be able to see the page properly until all the files are in your computer and have been served.

Asynchronous communication means that the page is rendered by parts. So the first part, the main one, is served and viewed by the user, and while he is distracted by reading or viewing something, the rest of the page or site are being served in the background.

This helps to improve the performance because the reaction to user interaction is immediate. He didn’t know, but the page is already in his computer.

In your case you just need the main page to load quickly, and be engaging enough to be able to serve the rest of the site while the user is distracted by something else. Then, when he clicks on pictures or something like that, the browser will show them instantly and he will be pleased for the quick response.

I don’t know if I explained well but I tried :smiley:

PS: remember that you page needs to be usable even if Javascript is disable, so organize the information correctly.

Thanks for the information… I have so much to do and to learn that I am starting to panic!
I never thought about doing stuff if JS is disabled… what do you suggest I do?

Currently I am changing the “getElementById” thing by the prototype syntax.

I am currently having a “small” problem… I have the following onClick event


 <area href="javascript:void(0)" onclick = "hide('fp');document.getElementById('act').style.display='block';document.getElementById('fadeAct').style.display='block'" alt="Actuaciones  del grupo de jazz Caf&eacute; Paris" shape="poly" coords="197, 167, 292, 165, 296, 180, 196, 180">

At first, I only replaced hide(‘fp’) by the prototype command: $(‘fp’).hide(); and it worked prefectly (except for the error I could see on the error console (see later on…))

Then I wanted to go on replacing the getElementById stuff …


<p class="right"><a href = "javascript:void(0)" onclick = "$('fp').hide();
$('act').show();$('fadeAct').show()".....

But it does not work… only the first command ($(‘fp’).hide()) makes dissapear the stuff I want)… the rest is not working…
What am I doing wrong!!!

In addition, I get the following error:


document.getElementById("image_flicker") has no properties.
http://mistonline.in/wp/automatic-ajax-loading-images-with-prototype/

I looked in Internet but could not really found what I was looking for…

What is bothering me is why my code is not working with more than one prototype command in a onclick event!

Don’t panic. There is a lot of stuff to think of, but the only way to do it is by being aware of it and take it step by step.

I’ll look into your issue and come back to you later.

Thank you so much for your help!!!

Well, don’t thank me so quickly. You have homework to do :lol:

Learn about what “semantic markup” means and how it will make your life easier. :smiley:

Think about how you would markup this page differently… try to improve your HTML…

I will start by the alternative to javascript
Then I will replace the getElementById (if you can help me find out what is the problem with 2 commands written on the onclick event!)
And then I will look in at how to improve my HTML

Lot a work!!! but thank you for all the help…

I would like to use prototype… but protptype uses JS right?.. so what is the alternative to this? If js is switched off what am I supposed to do?
Thanks

Hello again,
I am getting rid of the javascript stuff… but I was wondering is “javascript:void(0)” would have the same effect than “#” in the following code:


 <area href="javascript:void(0)" onclick = "$('fp').hide();document.getElementById('themes').style.display='block';document.getElementById('fadeThemes').style.display='block'" alt="Algunos de los temas que toca el grupo de jazz Caf&eacute; Paris" shape="poly" coords="54, 7, 75, 65, 108, 68, 101, 90, 16, 88, 15, 70, 45, 67">

Actually I have replaced it by


 <area href="#" onclick = "$('fp').hide();document.getElementById('themes').style.display='block';document.getElementById('fadeThemes').style.display='block'" alt="Algunos de los temas que toca el grupo de jazz Caf&eacute; Paris" shape="poly" coords="54, 7, 75, 65, 108, 68, 101, 90, 16, 88, 15, 70, 45, 67">

and I cannot see any difference…

Please tell me if I am right! ( I suppose I am not but still!)

One more question… I know that loading the photos take a hell of a lot of time… and it’s not good… you said that I needed Ajax… I looked in Internet but could not find what I was looking for… could you just show me in which direction I should be going?
For the moment, I only load the pictures in a table… and it is too long!

I am improving the site… and I will upload it soon… I just want to solve some issues first…
The photos upload is the most important one!

I was thinking about minshowcase or thickbox… what do you think?

While I understand that you are in a hurry (I don’t know if this is a paid job for you, or what kind of commitment you have but it is obviously important to you) I personally think that you are doing it all wrong.

Your HTML should be top-notch before going into programming. Then, your CSS should be of high level too. After you get those really under control, and only then, you start programming.

The reason is very simple. It reduces the number of errors in your programming and it makes it easier to maintain.

Right now, you know what you are doing and control your code, you remember even where the last dot is. But in 2-3 months after you are finished with this, you will remember nothing. If you need to update the site, you will spend hours just investigation what you did yourself.

Which is, basically, what I am doing right now and am trying to figure out.

We have very different styles of coding, and trying to understand someone else’s code is hard work, believe me :smiley:

Regarding AJAX, it is a mix of technologies ((X)HTML, CSS, javascript, DOM) and not just one thing. To put it very simple, is javascript with a xmlHttpRequest object. This object allows to load elements and pages even after the page has already been served.

If javascript is turned off, of course, it will not work. That’s why you must have an alternative plan. All this (together with the gathering of information, concept design, decisions about which will be offered to the user, etc) is called the planification of the site, and it is preferably done before you code.

The best thing to do is to have a static, good old fashioned HTML site and add behaviour and effects with Javascript. In this way, the site will always work perfectly even if javascript is off. Of course, if it is on, the effects will give it a nicer look and better interaction. In programming, this technique is called Progressive Enhancement.