Nifty Features

Technical Website Design/Showcase
1

Over the couple years I was the webmaster of my team’s site, I put together a few “nifty features” on the site that either make the site easier to manage or a bit more interesting to use. Sometimes hours upon hours of hard work go into making this stuff and it never makes it past the team’s eyes so I figured I’d make a thread for webmasters to show off their stuff.

Examples of my stuff include:

My new zoom tool for the picture gallery that I started at 7pm last night and had working model done at 5am and implemented.
File archives that are automatically updated when new files are FTP’d and can have a description added.
A calendar that isn’t so nifty but handwritten like 99% of the code on the site.
I’m in the process of making a chatroom that runs with AJAX.
And there are tons of little things that admins can do to modify the website without having to touch the source code itself.

I’m more than happy to share source code if there are any teams that like what they see and either don’t have the time to or don’t feel like redoing what I’ve already done. If you take some of the JavaScript stuff that doesn’t look like DreamWeaver (I didn’t feel like rewriting that when the team gave me the layout they wanted and had it already) made it and isn’t part of the AJAX API I have on the site, just throw in a comment in the code and if you have a links page and can, link to us! :slight_smile:

Looking forward to seeing some cool stuff and confirming that I’m not the only nerd that sits around and puts hours and hours into writing code for their team’s website.

-Thomas

Edit: The zoom stuff automatically zooms out if the picture is very large so by adjusting the numbers in my code you can set the max height/width that the image will occupy on screen… I’m going to throw together a semi-high resolution and a high resolution gallery on the site later this evening after my computer science test and quiz bowl practice to give a better demonstration of the zoom tool since almost all of the images in the current galleries have been resized and have a horrible resolution now.

2

For those of you who havent seen their team website is here. http://www.blarglefish.com/

I like your site actually. It is very simplistic and it is very well planned and organized. I think that your layout is very simple and should be easy for other teams to manipulate and edit. Did you use CSS or HTML to build your site?

Also, if you are letting the community have your code are you going to publish a white page? And/or will you consider posting screenshots of your USER/MOD/ADMIN CP?

I worked on our site except it has to get approved by our district and that can take a while, so the website is out of date, but the format will probiably be similar. If you are interested check out http://robonauts.org/

Pavan Dave
A Fellow Webbie for 118

3

Very interesting. Any chance you could combine it with the “Live Thumbnails” on WebMonkey?

Personally, I prefer the Live Thumbnails to your version; not a lot of images online require that much zoom. The zooming is still very good, though.

4

When I get the code in a format that people can just download directly I’d release instructions with the code and it will be fully documented. Right now, a good portion of the code (Java code that runs on the server at least) is commented and I’m going to ask the guy that is in charge of website development this year to complete the commenting so he can learn how the site works a bit more.

We have a CSS for the website to allow for easy changes to the colors and stuff.

Just about every section is split up into its own file so it’s pretty easy to find what you want to change.

If anyone wants to take a look at the JSP for the, site just send me an email… tparen1@lsu.edu and give me a general section that you’d like so I can get it fully commented and any possible security (passwords, etc) removed.

I have the pictures up at http://www.blarglefish.com/thomas/admin/.

access.jpg - Where permissions are granted… each person can be customized so they have access to certain things if they need them. System is easily expandable to include other permissions.

calendar.jpg - Delete calendar events by clicking the X, add calendar events

editnews.jpg - Just the news edit page, nothing special

eo1-5.jpg - Screen shots of using a system I named “Easy Object” due to lack of creativity. It basically stores everything in a Java object I made and gets serialized into a MySQL database. I found it to be a nice alternative to running 50 MySQL queries when you want to change 1 thing and a lot safer than giving people access to the database. Runs with AJAX so updating, adding rows, etc doesn’t require page refreshes.

gb.jpg - admins get access to delete bad signatures, on a side note, after a few attacks from crawlers advertising e.d. drugs, I wrote a simple, expandable filter to block out certain words.

members1-2.jpg - Members page, as an admin you can move people up and down the page by clicking the +/- characters next to their names. The officer section has a second set of +/- to organize the officer list.

news.jpg - news page, Edit/delete buttons for each post

pics.jpg - combined screenshot of add/delete galleries, delete requires confirmation, when adding the script automatically sorts the images so the wider images appear before the taller images so it is somewhat sorted.

postcal.jpg - posts a calendar event

quotes.jpg - admin can delete quotes

usercp.jpg - simple user control panel, update password, change email address.

Astro, I haven’t really thought much about live thumbnails but maybe…

5

I’ve found that most spammers use a xxxx@xxxx.info email address. All I did on the team forum on my site was pre-check the email address in the PHP code after someone registers, and if it ends with .info the account would automatically be sent a “purgatory” zone; (instead of sending the user the conformation email) from there the admin would have to manually approve each user. It’s a nifty little thing and I’ve never had to delete a spam thread/post since then.

I also hope that all your pages are .jsp and not .jpg! :ahh:

If I was developing my team’s website in Java, I would probably be interested in seeing all your code. But I went the PHP/MySQL route. Otherwise, it looks like you’re doing a great job on the admin and backend stuff. Just don’t forget the Web Standards, Accessibility, etc. kind of stuff. Keep up the good work.

6

It was in our guestbook which doesn’t ask for email address :-/.

The .jpg things are describing the pictures at http://www.blarglefish.com/thomas/admin/, all the pages are .jsp :slight_smile:

Generally I try to make sure that all my code works the same on IE as it does on Firefox. Which was one of the biggest pains I had with the zoom stuff, whatever happened to ecmascript? :-/

7

The goal of JavaScript was to eventually implement nearly all of the functions of Java into a universal standard. Unfortunately, it’s not as standard between browsers as I would hope. I’ve had a lot of problems with browser compatibility, too. I’ve been checking in Mozilla and IE as my primary sources, but also in Opera to some extent (that one’s a bit of a nightmare).

JSP is nice, but I also have taken the PHP/MySQL route. Unfortunately, right now I’m dealing with issues with the PHP safe mode. Our provider switched our server, and one of the safe mode settings disabled some of the components of our site… not fun, but probably a good thing to catch now.

8

  1. I already made a simple AJAX chatroom. It’s hiding somewhere at aztekera.com.

  2. I cut down the number of spambot accounts on our team’s forum by 100% by simply changing the look of the captcha. Once their spambots couldn’t read the captcha, they could no longer register. I edited all of the uncompressed PNG IDAT data in the captcha script by hand to change it. (I lied. I used Find & Replace to put cool stripes through all the letters.)

9

Alternatively, to make a portal-type site, you can use MS Visual Web Developer and ASP.NET and slap together scripting and forms and login and everything quickly. The code may be grossly inefficient and accessibility might go out the window, but it’s easy.

10

hey…good threat and good site…

when i built the green team website i started with word press and a theme in the style layout i wanted, then i changed all the colors and images, it works pretty good.

i was wondering if anyone had a good php/MySQL calendar that i could try for our meeting/ event schedules…
thanks
/forest
btw to see our site CLICK HERE

11

I’m confused, how is that contributing to the discussion at all? :-/ I wasn’t sure how to take your comments at first so I looked up other posts you’ve made and you always seem to have “your stuff is alright, but they way I’d do it would be awesome” tone. You need to lighten up a bit…