1 / 17

Ian Bablewski Calvin Flegal Katie McNabb Bryant Moquist

Design Presentation. Ian Bablewski Calvin Flegal Katie McNabb Bryant Moquist. Go Kite Splash Page. 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.

urit
Download Presentation

Ian Bablewski Calvin Flegal Katie McNabb Bryant Moquist

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Design Presentation Ian Bablewski Calvin Flegal Katie McNabbBryant Moquist

  2. GoKite Splash Page 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. 1.

  3. Destination Page 1. 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). 2. 3.

  4. Destination Page Continued 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 HighChartsJavascriptlibrary. 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. 1. 2.

  5. Kite Club Page 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. 1. 2.

  6. 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.

  7. Registration Page 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. 1. 2.

  8. Log-in Page 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”. 1.

  9. Basic Registration Page 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. 2. 1.

  10. Detailed Registration Page 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. 1. 2.

  11. Detailed Registration Page Cont. 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. 1.

  12. Detailed Registration Page Cont. Notable feature: 1.Challenging CSS styling to ensure the ASP controls align properly with the image’s arrows. 1.

  13. Built for Mobile 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. 1.

  14. Built for Mobile Continued Another demonstration of mobile design based upon the screen size with the Destination page. The image also resizes itself. 1.

  15. 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

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

  17. 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

More Related