Woburn Robotics Online: team188.com

[jonathan lall]

I'd like to officially welcome you all to the new team188.com, which I think is chock-full of everything you need to know about our team and FIRST in Canada. Although we launched 90% complete on the Kickoff day as a large number of you have seen (judging by our site logs) I never made a post here to get any criticism. Consider this that post .

This website was made with XHTML 1.1 and CSS, has two site themes (I plan on making more, including a print and low-capability one), and loads really quickly. It degrades gracefully in older browsers and uses no presentational markup. It validates and is accessible; more interestingly, it wasn't incredibly hard to do -- it's all common sense -- although some people seem to think it is hard and that the benefits aren't worth it. We'll see.

A few random features:

• A public forum where questions can be answered quickly
• Ask188: A part of the Site Message System, wherein any team can ask us a question or for advice, and we respond ASAP (this is really popular already)
• A Forum-aid browser sidebar compatible with the top three browsers
• Videos and Animations from past years, including our Chairman's Award submission from two years back
• A photo gallery (which I still have to update with a new gallery)
• A large set of FIRST Frenzy-specific resources, including news, team info, conglomerated rules, and a game overview
• A large repository of features and articles
• The official theme song of Woburn Robotics
• Useful documents for other teams, including our own declassified docs binders and timelines
• A brief history of the team
• A page dedicated to our Lego endeavours
• A page dedicated to our sponsors
• A guestbook (sign it!)
• The Brawny Lad

If you are a member of a FIRST team, I encourage you to take a look and give feedback here in this thread. I would like to improve it, but the 'web team' is just me.


Woburn Robotics Online

[Roland]

was your design inspired by eric meyer, by any chance?

[jonathan lall]

Who?

No I'm just kidding. To answer your question, yes and no. I've seen his little 'curvelicious' demo online, but I created the curve completely independant of it. If you look at the source, it's developed differently. I used my own technique of two-colour transparent PNGs to get the effect to work in both site themes with a textured background. In my opinion, my way is better than his . I was thinking of dropping him a line about it actually. I know he has a style-switcher on his website, but his is all javascript, a no-no in my mind. I made a PHP one (before A List Apart made a similar one might I add ). The menu is also by my design.

[Roland]

Cool. By the way, your curve looks funky in the blue theme in Safari 1.0 - I've attached a screenshot so you can take a look.

[jonathan lall]

Thanks, I'll check it out. I was informed by someone else that it looked identical to the other MOS browsers in Safari. The weird 90-degree white thing is part of the title, which is absolutely positioned. I forgot to make it transparent, I think. The fact that the background is off I'll have to look into. Thank you.

[jonathan lall]

Woo. I forgot to mention Woburn Robotics Online took home the Championship Website Design Award, after winning in Pittsburgh and Toronto (Canadian Regional), which made it eligible for the Championship Award in the first place. As an egotistic plug, let me just say that considering I exclusively did the website, this means I've saved the team from a low-award showing for 2004 () and achieved my goal of making a website that not only explores our team, but promotes FIRST. Consider this a hint that a bit of personal hard work on your part makes everybody happy. I must say there are a lot of nice -- and more importantly, useful -- sites in the Web Competitors thread and I'm waiting to see what kind of cool stuff is in the list of Website Excellence sites. Power to Webmasters everywhere!

[J Flex 188]

just to make jon's head a little bigger.. dont forget to mention that he drives the robot too =P.

but seriously, team 188's own was pretty blown away with this site when it started and with the addition of multiple resources and Season '04 features, so much so that all kudos all the time went to jon, right from the first beginnings of the website award address at nationals. except for the sportsmanship award at CR of course

Originally Posted by jonathan lall

Woo. I forgot to mention Woburn Robotics Online took home the Championship Website Design Award, after winning in Pittsburgh and Toronto (Canadian Regional), which made it eligible for the Championship Award in the first place. As an egotistic plug, let me just say that considering I exclusively did the website, this means I've saved the team from a low-award showing for 2004 () and achieved my goal of making a website that not only explores our team, but promotes FIRST. Consider this a hint that a bit of personal hard work on your part makes everybody happy. I must say there are a lot of nice -- and more importantly, useful -- sites in the Web Competitors thread and I'm waiting to see what kind of cool stuff is in the list of Website Excellence sites. Power to Webmasters everywhere!

[Brandon Martus]

Congrats.. (still) looks good.


I hear the place its hosted is nice, too.

[aaronbr28040]

Awesome website. It was great getting to be on an alliance with you guys at nationals. Your robot was amazing, your driving was amazing, and your website was amazing. Woah I'm really going to make jon's head big now.
-Aaron

[Steve W]

This is meant to make Jon's head bigger (so it might explode). I know Jon worked hard on this site and took ideas and applied were he could. Even though Jon is the brains behind this site I know that others gave great input. Congrats to the team and Jon. A great designer is that, only when he knows what and to whom he/she is designing. Now let's see if Jon can pass on his knowledge to others so that 188 will repeat next year.

[theory6]

Really nice website. I like it a lot! What I like the most about the site is that theres so much to do and lots of good information. Correct me if I'm wrong but it must have taken a lot of time or a lot of stages to put all that information together. I really like the Ask188 feature and that background picture of a robot frame. And the color scheme changer is just too cool! Great job 188 on a perfect website and it really deserved to win the award! Go Canada!

[LauraN]

Very, very nice. I especially liked how you did the color fade on the links in the navigation bar. Is that some trade secret, or can you tell us how you did it without using javascript? *hopes that isn't too stupid of a question*

You seem to be looking for feedback other than everyone just saying, "wow, it's really cool," (since you seem to know that already =P) so I tried to think of some suggestions. The only thing I can think of is that with the large amount of information and documents you have, a sitemap may be useful. I don't really think you need one, but it would make the site even more professional than it already looks and would just be plain cool. This isn't even a criticism, just a suggestion that it took me awhile to come up with. =)

Originally Posted by jonathan lall

A few random features:

• The official theme song of Woburn Robotics

Oh my God you have a theme song. That's completely amazing.

[jonathan lall]

Originally Posted by LauraN

Very, very nice. I especially liked how you did the color fade on the links in the navigation bar. Is that some trade secret, or can you tell us how you did it without using javascript? *hopes that isn't too stupid of a question*

No it's not stupid at all. I've been asked this before so I'll give you a long answer. I decided early on that I wasn't going to use Javascript, especially not for something presentational. IMO Javascript, Flash, and especially Java, are very seldom needed or wanted. I like to preach that websites are still documents made to be read and need minimal presentational stuff in them; that's what CSS is for.

I was thinking one day that it'd be cool to have some kind of animation in the menu without using some silly non-HTML appelet to get the effect. What I realized is that through CSS, one could put in an animated .gif file as a background-image for some element. It seems to work in all major browsers except for Opera (but team188.com's menu is redundant and still rolls over normally in Opera). I simply made an animated .gif that runs once (i.e. doesn't loop) for the background-image on the :hover of menu items. It is one pixel in size (I go overboard making all images load quickly), and repeats (tiles) throughout the background because I didn't set a background-repeat rule (this is incidentally the same thing I do to get the background of the site to have stripes; it's a two-pixel image that repeats). When the :hover animation is complete, the static dark red/blue (depending on theme) you see on :hover is the background-color which is also set. So to sum up, there is a ~.5 second animated .gif set as the background-image of the :hover of the menu items, and also a background-color to get the full effect.

Originally Posted by LauraN

You seem to be looking for feedback other than everyone just saying, "wow, it's really cool," (since you seem to know that already =P) so I tried to think of some suggestions. The only thing I can think of is that with the large amount of information and documents you have, a sitemap may be useful. I don't really think you need one, but it would make the site even more professional than it already looks and would just be plain cool. This isn't even a criticism, just a suggestion that it took me awhile to come up with. =)

Oh my God you have a theme song. That's completely amazing.

I was going to make a site map but I decided against it simply because that would require me writing a script that updated it as I changed the site. I have no intention of even attempting that! And the theme song is by J 188 (not to be confused with J Flex 188) on these forums. Thanks everyone for the comments.