[World Leader Pretend]

http://manhattanhighschool.org

Hey, I've had this site up for almost a year but I got around to updating it today. While the site displays perfectly in the latest major version of Safari (also perfect in the nightly build), I need it to be workable in all the major browsers. I tried to build the site as lightweight as possible, and all the pages loaded quickly for me. Here is a rough graph if you can help me fill it in with your experience:

Safari: Page Load Speed - Fast | Color Accuracy - Perfect | Java/apps - Working | Layout - All shapes present and positioned correctly.

FireFox 3: Page Load Speed - Fast | Color Accuracy - Perfect | Java/apps - NOT WORKING (check the photo pages) | Layout - Some shapes missing (the shadow circles) and the whole photo box

Internet Explorer: (both the new and old versions)

FireFox 2:

---

Those are the major ones, but if you have Opera or Camino feel free to check it out too.

Thanks for your help!!

[Brad]

I couldn't find any Java applets. Do you mean JavaScript?

[Fahrenheit]

Seems ok in Camino - is it designed in iWeb? Cos iWeb sucks for page speed to be honest.

[World Leader Pretend]

Originally Posted by Brad I couldn't find any Java applets. Do you mean JavaScript?

Yeah, I meant script. What I am referring to are those photo boxes where you can launch slideshows and scroll through the pictures.

Originally Posted by Farenheit Seems ok in Camino - is it designed in iWeb? Cos iWeb sucks for page speed to be honest.

Yeah, it is an iWeb monstrosity. I don't know enough HTML or other fancy languages to make a decent looking page without WISIWIG so iWeb it is. You said that iWeb sucks for page speed, but did this particular site load quickly?

[Brad]

Originally Posted by World Leader Pretend Yeah, it is an iWeb monstrosity.

That's probably why it breaks in Firefox 3. (hint: there's also a fix from that link)

Originally Posted by World Leader Pretend You said that iWeb sucks for page speed, but did this particular site load quickly?

Everything is very speedy for me, but I'm at my office on a fat network pipe. It still feels faster and lighter than most iWeb sites I've seen, though.

[World Leader Pretend]

Thanks Brad, I appreciate the link. I ran the little fixer app and am now re-uploading. I also got rid of any shadows and replaced them with solid lines. They apparently cause problems with Firefox.

Is there a reason why my site needs the user to manually dump their cache in order to see the new site while regular sites update normally? I mean, if i visit any major site I see the newest version and I don't have to clear my cache...

EDIT: Well after a fresh upload all the problems that I had with Firefox have been corrected, the picture elements work, including the slideshow, and the shapes and colors all display properly. Thanks for the link Brad! Now if someone could just see how this works in IE...

[Brad]

Originally Posted by World Leader Pretend Is there a reason why my site needs the user to manually dump their cache in order to see the new site while regular sites update normally? I mean, if i visit any major site I see the newest version and I don't have to clear my cache...

Most major sites that require the browser to update its cache (especially for linked JavaScript or CSS) force it by changing an HTTP GET parameter for the URL, assuming they don't simply change something in the path or file name.

For example, note that in AppleNova's source, one of the CSS files has the URL:

http://www.applenova.com/Styles/main-2.1.css?201

See that "?201" on the end? By changing the 201 on this URL, I can effectively force the browser to retrieve a newer version. In fact, whenever I update AppleNova's CSS, that's exactly what I do. I increment that number so everyone automatically gets the newest version of the CSS with the next page load.

You can do the same with images, JavaScript, CSS... pretty much anything "embedded" into a page by a URL that the browser may cache.

[World Leader Pretend]

Alright cool, so what would be the easiest way for me to implement this in my iWeb code? (The site auto-updated without me clearing the caches this last upload, but that was the first time)

[Brad]

Well, the "easy" way would probably take a lot of manual work if iWeb is generating the code for you. You'd need to find any URLs to things you want refreshed and append a unique identifier to them. A time stamp is a good value since it'll never overlap with future revisions.

The "quickest" (but not easiest for a novice) way to do this would be a search-and-replace from the command line. For example, if you "cd" to the directory where your website's code lives, the following command will go through all the subdirectories, find all .html files, and search for .css", .css', .js", and .js' and insert a question mark and the current time before the closing quote. It also creates .bak backup files of everything it touches in case something goes wrong and you want to manually revert.

find . -name "*.html" -print0 | xargs -0 perl -i.bak -pe "s/\.(css|js)(\"|\')/.\$1\?`date +%Y%M%d%H%m%S`\$2/g"

I wrote and tested this command on my own Mac with a few dummy files and directories and it seems to work as expected. Caveat emptor, of course.

If you don't want the .bak files to be created, remove the ".bak" after the "-i".

[Brad]

Originally Posted by World Leader Pretend Now if someone could just see how this works in IE...

I tested it from home in a Windows XP VM running IE7 and everything generally works. The only bug I found was that some of the slideshow images have misaligned reflections. That's probably a bug outside of the scope of an easy fix, though, and probably something weird IE is doing with iWeb's JavaScript or CSS.



Also, in all browsers, on the Articles page, the hexagons are clickable, but the text in them isn't.

[Artap99]

http://www.browsershots.org/

I use that site whenever I'm working on a site. They provide just about every browser known to man.

[World Leader Pretend]

Originally Posted by Brad Also, in all browsers, on the Articles page, the hexagons are clickable, but the text in them isn't.

Yeah, that is on purpose I guess... I couldn't get the text to become a hyperlink UNLESS I wanted the text to be this ugly reddish color. iWeb was goofing up and it wouldn't let me change link text color. That is why on the other pages the text is outside the hyperlink graphics...

I'm going to change the hexagon stuff so it isn't so confusing.. or fix the link color problem.

And Artap, thanks for the site!