Transcript Group 9

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 page’s 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 page’s 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.NET’s membership capabilities to set up the kite school user system.
Log-in Page
1.
Notable feature:
1. Constructed using ASP.NET’s 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.NET’s 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 user’s 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 image’s 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
•
•
•
•
•