Design Presentation

Ian Bablewski Calvin Flegal Katie McNabb Bryant Moquist

GoKite Splash Page

1.

Notable features: 1. Javascript drop down for Destinations link. A query string is passed to the linked Destinations page, which will determine the pages content. 2. Music is triggered on the page load using Javascript.

Destination Page
1.

2.

3.

Notable features:
1. Query string is sent to the database on the page load to collect the pages content. 2. Content delivered via SQL queries and filled with information provided by multiple users. 3. Weather information to be queried from a separate forecast table in the database (not yet fully implemented).

Destination Page Continued

1.

2.

Notable features:
1. The number of monthly kiteable days is calculated by querying the database for the set of all kite schools in a particular destination and averaging their responses for each month. The chart is then generated using the HighCharts Javascript library. Users can hover over the bars to see the exact value calculated.

2. Links to kite school users individual pages are added as they register. Their information is passed via query string to the Kite School page.

Kite Club Page

1. 2.

Notable features: 1. CSS layering of a semi-transparent box over the image. 2. Data fetched based on the query string and positioned with CSS.

Kite Club Page Continued

Notable feature: Each club user has their own unique page based upon their responses in the registration process. The Kite Club page fetches the appropriate data on the page load and populates the page based upon the query string passed into it.

Registration Page

1.

2.

Notable features: 1. Use of CSS throughout the website to ensure consistent styling and a pleasing browsing experience. 2. Use of ASP.NETs membership capabilities to set up the kite school user system.

Log-in Page

1.

Notable feature: 1. Constructed using ASP.NETs multiview capabilities. This page is the same as the registration page but appears differently to the user based upon the query string sent to the URL. In this case, the string is login.

Basic Registration Page

1.

2.

Notable features:

1.Data is stored in multiple tables and connected by foreign keys in the database. For example, e-mail is stored as part of ASP.NETs membership table and the other information is stored in a userInfo table. The tables are connected by the unique membership ID.
2. Error checking of key fields to ensure they are stored in a consistent format.

Detailed Registration Page

1.

2.

Notable features:

1.Use of the multiview capability for the bulk of information provided by each user with error checking in key fields.
2. Customized greeting based upon the users name using the ASP.NET label control and the database.

Detailed Registration Page Cont.

1.

Notable features:

1.CSS styling to align the ASP controls into pleasant looking columns.
2. All previously entered data throughout registration is pre-populated on the page load via database query.

Detailed Registration Page Cont.

1.

Notable feature: 1.Challenging CSS styling to ensure the ASP controls align properly with the images arrows.

Built for Mobile

1.

Notable feature: Use of 1140 grid design via CSS to build a pleasant experience both for desktop and mobile users. The columns stack for smaller browser sizes and expand to multiple columns when a larger screen is available.

Built for Mobile Continued

1.

Another demonstration of mobile design based upon the screen size with the Destination page. The image also resizes itself.

Database Design
One database with five parts and connected via a unique destination key and a unique user key: 1. ASP.NET Membership System and Tables 2. Destination Table Stores the global destination information used to connect kite school user and weather information 3. UserInfo Table Holds the user responses to the registration pages which is used to generate Destination page content and individual Kite School page content 4. GFS Table Intended to store weather forecast information from the Global Forecasting System 5. NWW3 Table Intended to store wave information from the NWW3 wave forecast model

Javascript Highcharts Library

Built on the jQuery Framework Produces charts via SVG element Charts respond to CSS styling Embedded C# is parsed before it is served

Weather API and Data

Attempt to deliver up-to-date forecast information on each destination page by interfacing with National Weather Service servers Accomplishments: Successfully queried the NOAA NOMADS Server and pulled down forecast data programmatically in the wgrib2 format Successfully parsed the data with command line options into useable CSV files Challenges Execution on 6 hour time intervals to get updated forecast information Server permissioning for read and write access to add the data automatically to the database