Fairview High School

How We Made the Site

Table of Contents

In The Beginning…

The Fairview Website is the running labor of love of a handful of IB Diploma candidates and AP students, who conceived the undertaking in early 2010. Former NHS Co-President Alexander Atallah, who has since graduated and now attends Stanford University, assembled a small team of unique sophomores and juniors to begin architecting the site.

At the time, Microsoft's SharePoint content management system (CMS) was the less-than-stellar solution mandated for use by the Boulder Valley School District (BVSD), but it did not reflect the technical needs or academic caliber of Fairview as an institution, and thus needed replacing. In this vein, higher standards of back-end architecture, user interface design, and user experience quality were the team's motivations for tackling the project.

Eventually, in early 2011, a nexus of skilled students comprised of then-junior Ben Alpert and sophomores Ryan Atallah (Alex's younger brother), Carson Kahn and Ved Topkar led the effort forward. Each with a background in commercial web and graphic design and development, the team rapidly garnered the support of administrative and academic faculty including IB/AP Coordinator Mr. Darren Bessett, Vice-Principal Mr. Ross Sutter, Vice Principal Ms. Sarah DiGiacomo, Librarian and Tech Guru Mr. Jim Sullivan, and Principal Don Stensrud, who would become the project's adult sponsors.

Gaining the confidence of BVSD security staff was not as easy. Impenetrable web security is an integral aspect of every school system, and making sure that your personal information is safe has been everyone's utmost priority. After weeks of blueprinting and prototyping, however, BVSD IT joined the web team as a willing and supportive partner, thanks to the efforts of Mr. Mark Morfin, BVSD CIO Andrew Moore, and their colleagues.

Something From Nothing: the Building Commences

Before the undertaking could clear the planning stage and progress to development, however, the team found itself faced with unique challenges. What programming language would suit the site's purposes best? Did the team even need to power the site dynamically from the back-end, or could it be developed statically and integrated with a preexisting CMS? What would the site's new usage paradigm be, and how closely could the team integrate the site with daily life at Fairview?

Finding no preexisting solutions that fulfilled Fairview’s scalable and expected website and communication needs, the Web Team decided to build the school’s new online communication center entirely themselves. No third-party CMS's were to be used, and use of third-party tools was to be limited as much as possible. This allowed the team maximum control over the finest details, ultimately resulting in a product chiefly-tailored to Fairview's needs.

During the 2010-2011 school year, Ryan meticulously crafted the design, while Ben conceived of innovative solutions circumventing technical barriers that arose in developing the server-side framework through which the site would run. Meanwhile, Carson and Ved worked to form the creative design for features and content placement on the site, while all four bore a rigorous course load and maintained involvement in numerous extracurricular activities. It wasn’t uncommon to see the team discussing website ideas while performing a lab in IB Chemistry II, which is where they made many of the major decisions for the project.

In pursuit of the goal of maximizing school-wide integration and department specific usefulness, the team communicated with almost every facet of the school’s infrastructure. Through numerous meetings coupled with data produced by a comprehensive survey evaluating the website interests of all target audiences of the product, the Web Team developed a thorough model for a web application that would best serve the needs of its user-base.

The bulk of what you see before you came to fruition over the summer of 2011, and an alpha version of the website (meaning that basic functionality was operational, but much work was still to be done) was released on August 15th 2011. Since then, the Web Team continued to develop new features, refine the design, and fix usability problems to ensure the highest quality user experience possible. A fully-featured release of the Fairview website launched on October 9th of 2011.

The site is used by thousands of people daily to communicate with each other about important school-related issues and is increasingly becoming a vital education resource with every new user and feature addition.

Development of the Fairview website is an ongoing process; the application itself is fluid and is updated daily with new information and changes to functionality. The webteam continually develops new features and fixes issues in response to teacher, administrator, and parent requests with the goal of improving this resource's utility to the Fairview community.

For Posterity: Maintenance & Future Planning

After surmounting the immense tasks associated with getting the site operational, equally large issues still had to be assessed: tech support, continued development, site maintenance, and the preparation of a new team of students to assume the role of the soon-graduating seniors who had seen their dreams of a new Fairview website into fruition. After weeks of urgent deliberations, staff training sessions and team meetings, the website architects founded the FHS Student Web & IT Services Program, a for-credit class created for students interested in learning web development and who could be able to continue the team's legacy in the future. Carson, Ryan and Ved became the class's first instructors, teaching to a group of about 20 students for 2 and a half hours a week.

When the Web Team first started this project, they had almost no experience with performing the tasks that would become required in developing a web application on the scale of the Fairview website. Thus, the students taught themselves almost everything that needed to be done to make the new website a reality. As such, the team firmly believes that anyone who is interested in website development, regardless of prior experience or knowledge of programming, can learn enough in their free time to become a professional. There are no restrictions for joining the Web Team, only the willingness to learn new skills and the dedication to make the Fairview website as useful and user-friendly as possible.

The Web Team is responsible for facilitating and maintaining the highly dynamic content on Fairview website, ensuring that all information displayed online is up-to-date and accurate. The team also uses a very powerful customer service and task management system to field, organize and quickly respond to inquiries, as well as address feature requests and fix bugs.

Teachers, students and parent volunteers are now responsible for editing content all over the site, maintaining their own sites with content specific to their class, clubs, activities and sports using the user-friendly editing interface that the Web Team worked hard to perfect.

Ultimately the application has reached a state of stability and sustainability, where the necessary steps have been taken so as to ensure that the new Fairview website, and the unique usability that it offers, will be accessible to students as a powerful tool in maximizing the returns of high school education for years to come.

Technospeak: How It All Works

First, here is a brief list of some of the tools that were used to develop and continue maintaining the Fairview Website. There are several pieces of software or tools that have some small relevant functionality, but the major tools that run the site are listed here.

Server-side tools:

Client-side scripting tools:

Design tools:

Development tools:

Now, a clarification: the Fairview website isn’t actually a “website", but a "web application", or web app. More than just static information on a digital page, a web app includes highly interactive content, dynamic architecture, and often includes a CMS, or Content Management System. In Fairview's case, the web app model provides the freedom for staff and administrative users to add, iterate upon, and richly augment their content without having to know one iota of programatic syntax, script, or styling code.

That doesn't mean that we didn't have to know any code at all, though. The CMS powering the back-end, or server-side inner workings of the site's architecture, was constructed from scratch in an object-oriented web application framework called Ruby on Rails (also called "Rails" or "RoR", for short). Based on the famed Ruby language for syntax and conventions, Rails integrates with our server and front-end using an model-view-controller (MVC) architectural pattern and well-defined association cardinalities. The back-end is also responsible for outputting much of the front-end code, which consists of HTML, CSS and JavaScript.

Our CSS is originally written in SASS (Syntactically Awesome Style Sheets) and then compiled by the server. We've optimized and compressed the output to minimize loading time.

Moreover, the site switches stylesheets based on what browser you're using. While every stylesheet incorporates graceful fallbacks to accommodate all browsers, we used CSS3 and vendor prefixes as much as possible in many places (hey, we're designers), as well as data URI schemes for interface elements. As such, we wanted to ensure that the site would support IE and Firefox inasmuch as they need to be, hence the conditional styling rules.

You'll notice that the majority of our HTML is HTML5, which IE accommodates because we've implemented Modernizr and HTML5 Shiv. We've coordinated our markup and styling as much as possible to ensure that future browsers will continue to support it in even greater measure.

The interface was designed in Adobe Photoshop CS5, but many of the graphics are coded in javascript. All Fairview logos and many other graphics on the site are created in Adobe Illustrator CS5.

Questions or comments about the site? Please contact the Web Team.