Copyright Info and the Web Development Process

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 the future of manned and unmanned space travel.

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.

The roles of each member on our team were also decided upon at this time. The high school technology department's website and the high school TSA chapter's website were each 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.

Creation

Before a computer was touched, blueprints for each site were drawn. To decide on what pages to have and what content to include on each page, we made a plan of what we wanted our site to cover. On the Design Brief, we included the past capabilities of space travel using a clean, easy-to-use timeline. We also decided on which current and future governmental space missions to go over (International Space Station, Orion MPCV, Juno, Dawn, and Curiosity) and which current and future commercial space missions to go over. We also stated a solution pertaining to the future of space flight. For the TSA and Technology Department sites, we decided to include all pertinent information, such as the clubs, instructors, courses, and upcoming events in our technology department, and the advisors, officers, a brief description, and the past awards won for the chapter TSA site. Lastly, a contact us page was included on the TSA and Technology Department sites to give users an easy way to get in touch with us, and a copyright page was included on all three sites to explain the web development process, 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 designs for our websites. We wanted our sites to match, so they could easily be distinguished as part of a group, and we wanted the sites to look professional and clean. We eventually decided on a gradient with a different color and a fading design in the top left for the TSA and Technology Department sites. On the Design Brief, we chose a sleek looking starry background with a blue galaxy coming out of the bottom of the page. All the sites used a 'floating' menu system and rounded corners on each section of the site to look modern and professional.

After the blueprints were drawn and a design decided upon, research was conducted. Knowledge of past space missions and current and future governmental missions was obtained through the use of NASA (National Aeronautics and Space Administration). Then, research had to be done pertaining to current and future commercial missions. This information came from SpaceX and Bigelow Aerospace We also got information about TSA from the National TSA site, and we got information about SkillsUSA and FBLA from their respective national sites.

The site was then created from scratch using Adobe Dreamweaver CS5. We created the the first page according to our blueprints, and we created the rest of the pages of our website from that page. Each of our sites, PCHS TSA, PCHS Tech. Dept., and the Design Brief, have links to each other. We created spry tabbed panels 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, NASA, TSA, and the instructors at our school or taken as a screenshot during development. 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. We considered using one of the online services to generate our timeline for us, but instead, in order to add customization and appeal, we used Adobe Edge Preview 4 to create our interactive timeline and moving header. It uses pure HTML 5, CSS3, and Javascript. This enables it to be viewed on a larger variety of platforms, including iPhones and iPads.

Because of the Edge banner, we also made a separate version of our Design Brief in the event that users have Internet Explorer 8 or earlier, because Adobe Edge Preview 4, which was used to make the banner on each page, is not compatible with versions earlier than IE9. When a user goes to our website with an earlier version of IE, they will automatically be redirected to the compatible site, which uses regular images for the banner instead. To expand platform compatibility, we created mobile versions of all three sites using jQuery in Dreamweaver. If a user goes to one of our websites using a smartphone or tablet, they will automatically be redirected to a mobile version of our site that is much easier to view and use on mobile devices. WOW Slider was incorporated on our home pages to show pictures of activities relating to the specific page that each slide is linked to and to provide another easy way to find the other sites in the Webmaster competition along with the mobile versions of each site. WOW Slider put the pictures into an interactive banner which links each picture to the corresponding page or site. Lastly, Google Calendar was used to show the upcoming events on the technology department and TSA sites and the upcoming launches on the Design Brief.

Publishing

Lastly, 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 8+, on Windows and Mac with Firefox 3+, on Windows with Internet Explorer 8+, and on Mac with Safari 3+. Our site is also mostly compatible on many earlier browsers, including IE8, because we used a separate version of our site specifically for earlier versions of IE. When viewing on a mobile or touch device, users will automatically see the mobile version of our site. It works on all popular devices/platforms.

Notice: The following programs were used in the development of all three of our websites.