Process

This page has been included to explain the reasoning behind the design of our website as well as the process of development.

Listed below are three tabs explaining the planning, execution, and publishing of our websites:

  • Planning
  • Executing
  • Publishing

Planning

Our first order of business was to decide on a target audience. This audience includes technical course students, teachers, parents of students, people in the community, and anyone else wanting to know about Polk County High School's TSA, the technical department of PCHS, or accessible web development.

We then divided the content involved with this competition among three sites, and we established what design to use on each site. Similar yet different designs were used for each site, because we wanted the Design Brief, the PCHS TSA website, and the PCHS Technology Department website to be distinguishable from each other.The similarities reside in the basic design of each such as the menus and page layout, but the content remains very different.

Google Docs ScreenshotThe roles of each member on our team were also decided upon at this time. The high school technical department's website and the high school TSA chapter's website were assigned to one person while the design brief, being the largest of the three sites, was assigned to the remaining two web developers on our team. We had a graphic designer to create the banners and edit any images needed. Next, we created a timeline for our websites. We needed to have certain parts of our project completed at various times. This ensured that we would stay on track and accomplish all of our goals. Our team collaborated using Google Docs, because we are all in different classes. Information and updates among our team were shared using Google Docs, and ideas were communicated through the use of Google Docs.

Executing

FBLA WebsiteBefore a computer was touched, blueprints for the Technology Department website were drawn. When drawing the blueprints, the content of this website was taken into consideration. This site had to include the instructors in our technology department, the courses offered within our technology department, and the clubs with which our technology department is involved. Lastly, a resources page was included to show where we obtained pictures/information and which programs would be used in the development of our site. After this was done, we brainstormed on a design for our website. We knew the technology department needed to look sleek and professional, so we made the design within those requirements.

After the blueprints were drawn and a design decided upon, research was conducted. Knowledge of the instructors and courses in our technology department was obtained from our instructors and the school itself. Research then had to be done pertaining to the clubs with which our technology department is involved. This information was obtained from the websites of each group such as FBLA, TSA, and SkillsUSA.

Adobe Dreamweaver CS5 ScreenshotThe template for the design brief was then created from scratch using Artisteer 3 and imported into Adobe Dreamweaver CS5. We created the template according to our blueprints, and we created the rest of the pages of our website from that template. The site includes home, instructors, courses, clubs, judges, and resources pages. It also includes links to our other sites such as the PCHS TSA and the Design Brief websites. We created spry menu bars within most of our pages to include the content without causing a page with excessive length. The content was made using Microsoft Word 2007 and then inserted into the pages of the site. Also, the images in the site were either obtained from iClipart and TSA, taken as a screenshot during development, or taken as a picture in our school. All of the images were then edited using Adobe Photoshop CS5. JS Lightbox was incorporated to show our screenshots at a larger scale in an easy-to-use way.

Publishing

Adobe BrowserLab ScreenshotLastly, testing was done. We tested our websites on many of the latest browsers manually, which showed us excellent compatibility firsthand, but we also used Adobe BrowserLab to test our websites on a PC, Mac, and several mobile devices.

We found that our websites are compatible on Windows with Chrome 7 and Chrome 8, on Windows and Mac with Firefox 2, Firefox 3, Firefox 3.6, and Firefox 4, on Windows with Internet Explorer 7, Internet Explorer 8, and Internet Explorer 9, and on Mac with Safari 3, Safari 4, and Safari 5. After testing, we published each website. They are now all three live on the web for the public to see.