Help Spread theContagious
Enthusiasm
Donate Today!
Over the years, our website has gone through many revisions, with the current version being the end result of hundreds of hours of programming and graphics design work.
It was not until the 2005 FIRST Robotics Competition season that our website first started to grow into it's current form. At the time, our previous version of the website was wiped and Arthur Dutra, a sophomore at the time, took over and created the first version of our modern site completely from scratch. That year, it won the UTC New England Regional Best Website Award.
In 2006, the website was expanded even more, and again won the Best Website Award at the UTC New England Regional. But by this time, the entire site had grown huge with hundreds of pages of content, photo galleries, and more. It was time for a better solution.
Starting for the 2007 season, Arthur Dutra (who was now a senior on the team), started work on a new revision of the website which would be a lot easier to maintain. Called a content management system (CMS), it allows anyone on the web development team to log into the website, and create photo galleries, write news articles, create events, and more without an extensive knowledge of HTML.
After looking around at the many currently available CMS's available, the decision was made to write an entire content management system for Team 228, from scratch. And so a year-long project was started, which took Arthur Dutra his entire senior year to complete.
By end of the school year, the website began to move from the advanced development stage and into the production environment of our server. The website you are now seeing is the end result of this year-long project, with the current Team 228 Web/Communications team continuing to keep the website updated.
Design
The very first thing necessary to finish before any of the coding for the backend of the website could be started was to complete a design template for the website. This template had to achieve certain criteria, which were:
- The graphic design has to be representative of Team 228, and include the official team color of orange.
- It must follow all good web design practices, such as
- CSS-based page layout
- Simple, semantic XHTML coding
- Adherence to the latest XHTML and CSS web standards
- Must render perfectly in all major internet browsers
- The total size of the HTML, CSS, JavaScript, and embedded images in any page should be under 100 kb
- Use of Flash will be avoided unless useful
- Use of JavaScript will only be for useful things, such as AJAX for admin backend
- All main page navigation will be done through text, not images
- Everything on the website should utilize logical breadcrumb page navigation (No "mystery meat" navigation!)
- Pages should be accessible to people with disabilities
- A two-column layout, with the main page content on the left. People naturally read from left-to-right, so the first thing they read should be what they came to that page for.
- The natural readability of a body of text is greatly diminished when there are more than 15 words on a single line. Therefore, the website will use a fix-width design to ensure all text will be easily readable on all screen resolutions.
- A minimalist design approach is encouraged, to simplify the CSS and quicken page-loading time.
- The graphic design is encouraged to follow a "Web 2.0" theme.
- The site will be designed for three distinct audiences:
- For people who are new to FIRST and/or Team 228, information about our team, our goals, and other important information should be easy to find. For this reason, we have a custom sub-header on the home page.
- For people on Team 228, information about current news and upcoming meetings should also be easily found.
- For people involved with FIRST, but not Team 228. Here is where photo galleries, video galleries, and the document library rise in importance. Content should be abundant and easily navigable, whether its through browsing, tags or direct searching of the database.
With these points in mind, several different revisions of designs were created before the final version was selected. Now it was time to move into the complex ideas behind the coding of the website itself.
Coding
Now with the main design template finalized, it was time to start coding the backend of the content management system. The first thing to be done was to program a modular system, capable of determining which page the user wants, and retrieving the data for the user.
This was accomplished by storing all the storing everything on the website as "modules" in a database. Then each page has a list of which modules need to be included on that page, in what order, and whether they belong in the left or the right column.
But before the website retrieves all of these modules from the database, it first checks to see if there is a cached copy in existence. This cached copy is automatically updated every hour, and helps drastically reduce load on our database server and decrease page loading time.
From here, the modules are processed and their output data is sent into a page template which generates all the XHTML, CSS, and Javascript code to build every page. First it builds the page header, then adds the left column, then the right column, and finally adds the footer, where it then sends this off to the browser.
However, when a user with administrator privileges is logged into our website, our server has to go through a few additional steps. The first thing it does is add extra content into ever page to add buttons such as "Add News Article" or "Upload Photos to This Gallery". The other thing it does is embed an AJAX-framework library into every page, and loads in a lot of AJAX-functions needed for the dynamic web application features of the administrative backend.
On top of all of this, there are constant and layered security checks going on at all times to ensure the integrity of all data being processed.
Some other cool features of the coding of this website include:
- Use of mod_rewrite to clean up all page URLs. If you look at any page in this website, it looks very "clean". Also, the page URL directly reflects on the hierarchy of the structure of this website; every time you take off the last term and stop at the next "/", you'll always get one page closer to the home page.
- Well over 10,000 lines of PHP and JavaScript code are used for the administrative web-application used to keep the website updated.
- By introducing a caching system, the number of necessary database queries dropped almost 70%.
Content
Last, but not least, is the most important part of our website. Without content, a website is nothing but wasted space on a server hard drive. Ever since the first version of our modern web site came around in the 2005 season, our team has always placed a very high emphasis on putting a large amount of accessible, relevant, and interesting content on our website.
Some quick facts on the content on our website:
- As of January 2009, there were over 4,500 photos in our photo galleries, over 100 documents in our document library, and over 75 videos in our video gallery.
- During the main robotics (FTC + FRC) season of November through April, our website averages over 700 unique visitors per day, queuing up several thousand pages. During the rest of the year, our website averages between 300 and 600 unique visitors per day, also queuing up several thousand daily page views.
- On peak days, such as right after the FRC Kickoff and around the FRC Ship Date, our daily bandwidth approaches one gigabyte per day.
- If you Google "robotics team", our website is the second result. The first one is the main USFIRST.org website.
Credits
The website template and content management system was designed and programmed by Arthur Dutra (Class of 2007) during the 2007 school year. Now graduated, Arthur serves as an advisor to the current Web/Communications Team.
Currently, all content on this website is created and managed by Team 228's Web/Communications Team, which is headed by Tina Dutra (Class of 2011).
Team 228 is a proud member of
Constant Evolution
"It's something that will never be finished. Something that I can keep developing...and adding to."-Walt Disney
Over the years, our website, along with our robot and our entire team, has seen a lot of changes. But one thing is constant: our progress towards improving our team, improving our robots, and improving our community.
Here's a look at some previous versions of our website from the past few years:
