Conclusion of my ILE: Modernizing the BHS Robotics Club Website

Now I could simply just show you the finished product, but there’s more to the journey than the destination. In my first semester of senior year I took VHS Advanced Web Design (although it wasn’t as advanced as thought it would be). Instead, I would simply just watch lectures online from CS50, an introductory computer science course at Harvard University. In December, which is the month in which the Robotics club prepares for the build season, an intense six week period to fully design, build, and program a robot in order to complete a challenge. Xin Zhang, a prestigious BHS student, offered me to help in designing the website. Using the Wayback Machine at Internet Archive, which is a massive internet archive that stores snapshots of websites over time, I was able to look into previous designs of our own website. Unfortunately, I was unimpressed. In order to create a website, I went and gathered the necessary resources:

  • Bootstrap

    • Bootstrap is a powerful front-end framework for HTML, CSS, and JS used to rapidly develop websites that are responsive and mobile-first.
  • Sublime Text 3

    • A text editor that is useful because of plugins like Tag, HTML-CSS-JS Prettify, SublimeLinter.
  • Github

    • Github is powerful collaboration software. It allows all to work on the website (though not live) at the same time and keep track of revisions.
  • Roots.io

    • A modern HTML5 WordPress Bootstrap starter theme

Due to the popularity of Bootstrap, it is common to find websites using Bootstrap that make little changes to make the site unique. For example, it is painfully obvious that haikudeck uses Bootstrap for its website. However, one goal we strived for was to create a unique looking website that one would not expect to be made using Bootstrap.

Finding Inspiration

In order to create a modern responsive web design, we decided to look at other websites to model after. We chose not to base our site model off of other teams in robotics. Instead, we looked to the top. We surveyed university and award winning websites for inspiration. Some of the few that were deemed relevant to our interests was BU, University of Chicago, Johns Hopkins, and Cooper Union. We knew that just because they are university sites or sites of Fortune 500 companies, that cannot stop us from making website on the same scale. The robotics club should, by merit, be employing the most advanced technology and yet our older website does not reflect this notion.

    • Instead of using the default fonts that come with Bootstrap we decided to experiment with Google Fonts and chose Open Sans.
  • ColourLovers

    • Red is not an easy color to work with. It is rare to find sites themed with red and clashing red with black or white in the wrong way can be a disaster.
  • Backstretch

    • Out of all the resources we used, Backstretch had the greatest impact on the site’s appearance (besides using Bootstrap). Backstretch allows us to add a static image to the background of all pages.

What’s next

In order to keep the site going in the future years, we need to make every last effort in order to educate the younger members of the club on how the code works on the site and how to easily make adjustments to the code. From what we learned in this project, we now have to pass the baton to the underclassmen.

What I’ve Learned

To create a functional, modern, responsive web product through the collaboration of highly motivated individuals Recieved a greater sense of understanding in HTML, CSS, Javascript, and PHP Hopefully these skills I have developed will transfer over in college where I plan to study either computer science or biomedical engineering. If I could start over, I would have changed my initial ILE topic to this one. Overall, I am proud of the results of my ILE because we were able to create a product from minimal prior knowledge. For future Help Desk students, I would advise them to be open to change in their ILE topic, it’s never too late to change an ILE.

Here is a link to final product, and here is a link to the HaikuDeck presentation.

 

Advertisements
Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: