Fall 11\' Mstrs Clss Prj 02
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
724
On Slideshare
722
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 2

http://www.linkedin.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Cavallaro,Vincent Albert REPORT 1 SUBMITTAL - Oct. 21, 2011Evangelisti,Matthew JamesRomy,Ben REPORT 2 SUBMITTAL - NOV. 2, 2011Kim,SookyungXuan,Xueqing REPORT 3 SUBMITTAL - NOV. 18, 2011Yung Joo Jang FINAL SUBMITTAL - DEC. 8, 2011Jeff, HirschJosh, TsaiDamian, RakowskyJaimie GerstMariano di Guglielmo BUS APP
  • 2. SU BUS APPWe are happy to present to you our FINAL REPORT for Project Bus App that will live within the sub app family ofapps that now exists for Syracuse University. We enjoyed the opportunity to work ITS to design and develop this app.TABLE OF CONTENTS:Primary scope and potential future scope List of stops to incorporate List of routes and times to includeOur initial research goals Mobile user – the target users Scenario analysis – potential situation a user may encounter Optimal coding language – how to organize and execute Architectural Design – flow chart outlining the app Analysis of Information – how will the information of the app be organized Creation of potential visual elements – how it may want to look Wireframe evolution and final Wireframe with Graphics FINAL Graphic User Interface FINAL Photos and Maps used with the appDevelopers Data Information Review of file structure Index.html JSON Structure/Final Structure JS Example/Final Examples Sample Layout CSS:a schedule table & framework/Final CSS Code Code Testing and results Review of Implementation Difficulties/Source Libraries Final development analysis-RecommendationsOverall Development plan Our schedule of tasks – deliverable milestones Distribution of tasks – team members
  • 3. Primary ScopeThe scope of the project was to create a functional demo/prototype app with actual real information/data that will behosted by local server provided by ITS. The primary function of the app is to display static information containing thebus schedules of a chosen bus station/stop. Further development or addition of data if the app is successful will takeplace beyond this project scope and will be determined by ITS. No GPS, Geo locating or any other existing app proto-col (like fourscquare ®) is going to be used with this app.The primary flow that was developed included five primary user interactions.• First, assuming the SU app is installed on the phone, launch app• Second, the user will need to determine location on campus and will be given a few options based on broad loca- tions, for example, Main Campus or South Campus.(Detailed further in report)• Third, the user will select the station they are at from a list. User will have the ability to view a photo to help confirm the stop they are at.• Fourth, the user will be given a list of bus routes for the station they have selected. It will be based on the current time of the mobile device being used. Only future routes will display for the day. A user using the app in the afternoon will only see the times for the rest of the day and evening, no morning times will display.• Fifth and final, the user will be able to view a static map of bus routes using CENTRO Maps that are associated to list of routes. The maps are stripped of excess information and only act as reinforcement with static information.All of the primary interactions have been completed with enough data to demostrate the app on both the develop-ment and design sides of the project. Future scope will include completion of data entry to encompass all bus routesand times using developers recommendations. Further design documentation will be needed for stops and maps notincluded currently.The data is organized and stored using JSON files. The files were created for this project custom, since none exist-ed. Optimal Coding language – HTML5/CSS/JavaScript was used. Some design graphic elements were influenced by jQuery mobile.
  • 4. Stations and RoutesThe station/stops that should encompass a fully functional Bus App: Indicates future scope. Manley Downtown Manley South Warehouse Manley North Syracuse Stage Center of Excellence Sky Hall #9 Learing Center Sky Hall #19 Everson Museum Winding Ridge Irving Ave. Garage Slocum & Lambreth Small & LambrethThe work focused on schedules for Main Campus, South Campus because they are the most used by the student body.Manley and Downtown have initial buttons but contain no further information beyond the main screen.FUTURE SCOPE:All Manley and Downtown stops listed. Winding Ridge, Slocum & Lambreth and Small & Lambreth stops.The bus routes that have been included for this app are limited due to the time restraints. With that said,enough made it in to truely see how the app can funtion. Further data input is needed to make the app complete.No special holiday routes or schedules are included with this app.
  • 5. User Profiles Grad Student (2nd Year) College Professor Familiar with school bus and stations. -Occasionally needs the bus system Have iPhone4, save all schedule, PDF files, in -Has an android device iBooks -Not the best technologically PDF files sometimes do not display right and -Uses basic organization features the phone hard to search time. -Frequently running to meetings and classes When search different bus, need to switch -Usually needs last minute bus times from one PDF file to another in iBooks. -Does not know their way around campus well Need to update PDF file every semester be- enough to indentify bus stops cause bus schedules are different every se- mester. College Student (Freshman) -Never used bus system before -Owns an iPhone4 and relies on it for everything -Busy schedule -Often needs to check bus times on the go -Needs to figure out what buses go where -Needs to find out which stops are on
  • 6. Scenario AnalysisScenario 1 Looking for bus schedule on the Waiting for the bus “Bus is not comming!” website He checked the wrong scheduleScenario 2Looking her class schedule She needs to go to the She is checking the bus She doesn’t know what bus class before 3p.m. schedule on the internet stop she needs to wait
  • 7. Optimal CodingThe Development team worked to create JSON files and reviewed how to effectively use them in their code. They also RE-familiarized themselves with jQuery, JavaScript, HTML5 and CSS3 while devising the Data Structure. Analysis of Information Function: Show the user what busses are on the way to their current location. This will be based of off the bus schedule and what bus is supposed to be coming. Focus: To make the app very linear. Not complicate the system by adding too much information or too many screens. Easy to use. Target the student mainly, also faculty. Graphic user interface will be based on the SU mobile
  • 8. InspirationResearch Logo and ColorBody text size 12 Verdana RegularBody text size 12 Verdana RegularBody text size 12 Verdana RegularBody text size 12 Verdana RegularBody text size 12 Verdana RegularBody text size 12 Verdana RegularBody text size 12 Verdana Regular
  • 9. InspirationThese are examples of existing apps.
  • 10. Architectural Design CONCEPT 1Version 1 List of bus stops Schedule of the Manley Picture of the bus stop you bus stop you pick Main Campus pick Map of the bus route South Campus Warehouse Pick a campus List of the bus Click to the next screen Shows the map stops in the Find your bus Click to the last screen of the bus route campus you pick
  • 11. Concept Design 1 Screen 1 Screen 2 Screen 3 Screen 4 Screen 5Pick which campus Select a bus stop Icon enlarges Bus schedule page Bus routeyou are at
  • 12. Architectural DesignCONCEPT 2 Version 2 Bus Stop Schedule of the Manley bus stop you pick Main Campus Map of the Picture of the bus route South Campus bus stop Warehouse Pick a campus Pick a bus stop Find your bus Shows the map of the bus route
  • 13. Wire Frame Concept 2Wireframe Concept 1 Pictures of the bus stop Takes you backt to start page Allows you to go to the previous page Centro map page Shows all the bus View time, route, Takes you backt to start page Start Page stops at the campus and bus page Allows you to go to the previous page you pick College Place Take you back to phone home page Takes you backt to start page Takes you backt to start page Allows you to go to the previous page Allows you to go to the previous page 10:15 Rt445 Connective Corridor Pick a Campus Main Campus Bus Stops Manley South Time, Route, Bus College Place 10:15 Rt445 Connective CorridorMain Campus Warehouse YES Yes button NO No button
  • 14. Wireframe Concept 2 Wire Frame Concept 2 View CENTRO map page Start Page Pick your station page View Routes page Needs discussion with Developers Takes you back to Takes you back to Takes you back to Takes you back to main Sub app page start page start page start page or to be determined Allows you to move Allows you to view to any of the four Allows you to scroll a static map from main campus categories at all the routes Centro with static Centro Maps Allows you to view the next station on the Which Campus are you at? list along with photo ROUTES & TIMES ROUTES & TIMES Main Campus South Campus Main Campus What Station/Stop are you at on Main Campus Manley Warehouse College Place Stop Main Campus College Place Stop 6:54 Rt 143 Quad Shuttle College Place Stop Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle Which Campus are you at? What Station/Stop are you at on ROUTES & TIMES ROUTES & TIMES Main Campus Main Campus Main Campus Main Campus College Place Stop College Place Stop College Place Stop 6:54 Rt 143 Quad Shuttle Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle Manley 6:54 Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle South Campus 6:54 Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle Warehouse 6:54 Rt 143 Quad Shuttle 6:54 Rt 143 Quad Shuttle
  • 15. Final Wireframe With Graphic User Interface TYPICAL SU MOBILE HEADER WITH BRANDING CRITERIA. BUTTON GOES ONE BUTTON GOES BACK PAGE TITLE TO APPEAR HERE TO REPLACE SU. Back Home SCREEN BACK (TYPICAL) TO SU APP HOME SCREEN (TYPICAL) FORWARD VIA SELECTION BACK VIA EITHER “BACK” OR “HOME” “BUS SCHEDULE” “STATIONS” “ROUTES” Back Bus Schedule Home Back Stations Home Back Routes Home Main Campus Main Campus College Place College Place Main Campus Archbold Gym MAP 10:15 Rt.445 Connective Corridor MAP 10:30 Rt.443 Connective Corridor Manley Stadium Place MAP 10:42 Rt.143 Connective Corridor MAP 11:05 Rt.443 Connective Corridor MAP 11:22 Rt.443 Connective Corridor South Campus MAP 11:40 Rt.143 Connective Corridor MAP 12:15 Rt.443 Connective Corridor Downtown MAP 11:22 Rt.443 Connective Corridor MAP 11:40 Rt.143 Connective Corridor MAP 12:15 Rt.443 Connective Corridor TYPICAL BACKGROUND COLOR DARK GRAY #4E4E4E MAP 10:15 Rt.445 Connective Corridor Back Stations Home Back Home HEADER COLOR BLACK #000000 Routes TYPICAL ORANGE FOR HEADER TEXT AND GRAPHICS #F47321 TEXT COLOR ORANGE #F47321 Main Campus Main Campus FONT: FRANKLIN GOTHIC NO. 2 ROMAN Back Bus Schedule Home FONT: FRANKLIN GOTHIC BOOK REGULAR 43 College Place College Place MAP BUTTON GRAPHICS AND BAR TO BE SUPPLIES AS PNG FILES USE EXISTING APP GRAPHICS FOR “BACK” & “HOME” 50 Archbold Gym BUTTON PHOTO GRAPHICS TO BE SUPPLIES TEXT COLOR ORANGE #F47321 22 AS PNG FILES FONT: FRANKLIN GOTHIC NO. 2 ROMAN Stadium Place Downtown PHOTO POP UP ALONG WITH TEXT TO BE SUPPLIES AS PNG OR JPEG AS PER DEVELOPERS. Main Campus WHEN POP UP GOES UP, BACKGROUND LIST TO GO TO 50% OPACITY College Place MODIFIED CENTRO MAPS TO BE USED OFF THE “ROUTES” SCREEN. MAPS THAT CORRESPONDS TO THE ROUTE BEING SHOWN WILL College Place TYPICAL GRAPHICS POP UP. TO BE PROVIDED AS PNG FILES. NOTE: MAP NEEDS TO BE DYNAMIC AND BE ABLE TO BE BLOWN UP WITH FINGER MOTION OTHERWISE THE MAPS WILL BE TO SMALL TO READ.
  • 16. Final Graphic User InterfaceMain App Home Screen Main Campus Screen College Place Stop ScreenAsks the user where they areat, and gives them four mainareas to choose from. List times and routes of bus- Main Campus screen list the ses to come further in the stops the user could be poten- day along with the ulitmate tially be at and also provieds end desitination. Based on them with the opportunity to the current time of the mobile view a photo to help comfirm. device being used. Proviedes a the user with the ability to view a stripped down static map to help with orientation.
  • 17. Pictures used for Bus Stops MAIN CAMPUS Archobold College Place Stadium Place SOUTH CAMPUS Sky Hall - 19 Goldstein Sky Hall - 9
  • 18. Sample MapsExisting CENTRO maps were used that correspond to routes on the list selected.
  • 19. Development Data InformationFile Structure index.html* BuSU • css (folder) - main.css • scripts (folder) - jq-main.js - jq-mobile-main.js - jquery-1.3.2.debug.js - json.debug.js - json.htmTable.js • res (folder) • images • data.json • index.html
  • 20. Final Development Data Information File Structure - index.html - css/ schedtable.css ../themes/ ../../bus_sched_SU.min.css ../../images ../../../ajax-loader.png ../../../icons-18-black.png ../../../icons-18-white.png ../../../icons-36-black.png ../../../icons-36-white.png - fancybox/ ../blank.gif ../fancybox_loading.gif ../fancybox_sprite.png ../jquery.fancybox.css ../jquery.fancybox.js ../jquery.fancybox.pack.js - imgs/ ../433skyhall.jpg ../43toCollegePlace.jpg ../43toWarehouse.jpg ../443goldstein.jpg ../Archbold.jpg ../CollegePlace.jpg ../Goldstein.jpg ../SkyHall19.jpg ../SkyHall9.jpg ../StadiumPlace.jpg - sched_dat/ ../data0.json - scripts/ ../json2table.js
  • 21. Final Development Data Information (Continued)
  • 22. Final Development Data Information (Continued)
  • 23. Final Development Data Information (Continued)
  • 24. Final Development Data Information (Continued)
  • 25. Final Development Data Information (Continued)
  • 26. JSON StructureJSON 1 for bus schedule JSON 2 for bus stops
  • 27. Final JSON Structure
  • 28. JS ExampleThis segment of code is from the JavaScript file we are using. It’s main purpose is to create a table with information from the JSON file.
  • 29. Final JS Example
  • 30. Sample LayoutFrom a structural standpoint, to get the code in place• At this point we still needed to implement design, etc. Working visual framework used Working visual framework used as code is put in place without use as code is put in place without use of final graphic interface elements. of final graphic interface elements.
  • 31. CSSMain CSS: schedule table part
  • 32. CSSMain CSS: framework part
  • 33. Final CSS Example CodesBus Schedule Table General CSS
  • 34. Planned Tests• Planned Tests Verify that the webpage loads Verify that the buttons on the main page work Verify that the back button works Verify a list of bus stops show up on the second page Verify a picture loads along with the bus stops Verify that when the picture is clicked, a larger version appears Verify that you can close the picture Verify that schedules load when a bus stop is selected Verify that when a bus stop is selected, the app shows the upcoming times based around the users current time Verify that the home button works Verify page transitions work Verify that the color schedule is consistent Verify a map can load from the schedule• Initial Results See Attached Screenshots• Adjustments to be conducted Focus more on the Android Dev app and making things work in that app first Include all parts in the app (the pictures and maps) so we can fully test• Other Testing Activities to be Conducted Have a few actual users test the app to see if they fully understand it (black box testing)
  • 35. Test Results
  • 36. Results Continued
  • 37. Results Continued
  • 38. Results Continued
  • 39. Final Test Results
  • 40. Final Test Results Continued
  • 41. Final Test Results Continued
  • 42. Implementation Difficulties• JSON file difficult to maintain since it’s so long• Hardware limitations on mobile devices may cause the application to under-perform with large volumes of data• Implementing functions• Creating JSON files• Creation of the HTML webpage• Working with jQuery, Fancybox, GitHub, and Aptana• No late night schedule times available in the list due to Date/TIme condition in the code. Libraries• jQuery Ajax (getJSON())• jQuery Mobile• Fancybox (fancyapps.com/fancybox) Recommendations• For easier maintenance, switch to a database• Use an automated script to generate a JSON file or multiple JSON files• For better performance, efficiency, and power usage, consider re-visiting the ‘if’ conditions in the code to get the proper bus schedule• For late night schedule times for the previous day, re-consider the copndition
  • 43. Overall Development PlanOur schedule of tasks Progress Report #1 Oct. 21, 2011 - As outlined in this report Progress Report #2 Nov. 2, 2011 Refinement from feedback from report #1 Navigation and User Interface Design Presentation of visual element, including colors, icons, any potential images or sounds to be flushed COMPLETE out. Our team will present to concepts to review prior to this submission. Implementation details Decide on which routes and times to include Build JSON files Progress Report #3 Nov. 18, 2011 Refinement from feedback from report #2 HTML and CSS coding Testing and deployment by Developers with Design team support Adjustments as needed Final Report – Dec. 8, 2011 CURRENT Refinement form feedback from report #3 Test results Final enhancements Final app structure/description
  • 44. Distribution of tasks – team membersThe Design team worked on:Researching background information about the user.Creating storyboards to further understand the problems that there are with the current bus schedules.Making a wireframe that represents the architectural design of the interface.Designing the interaction that occurs on the screen between the user and the app.Creating a simple easy to use interface.Ensuring that it relates to the SU mobile app in visually.Deciding what stations should be included in the initial app.Designed Graphic User InterfaceThe Development team met to work on following tasks together:Data StructureJSONsHTML5/CSSjQuery (JavaScript)