View
38
Download
5
Category
Preview:
DESCRIPTION
Cranberry Scheduler. Web Dynamics. Who Is Involved. The team Aaron Papp De'Liyuon Hamb Shawn LeMaster The clients Dr . Bouvier Students and teachers that use the HCI lab. Our Process. Agile development Evolving requirements Short development cycles User roles UI designer - PowerPoint PPT Presentation
Citation preview
Cranberry SchedulerWeb Dynamics
1
Who Is Involved
• The team• Aaron Papp• De'Liyuon Hamb• Shawn LeMaster
• The clients• Dr. Bouvier• Students and teachers that use the HCI lab
2
Our Process
• Agile development• Evolving requirements• Short development cycles
• User roles• UI designer• Main developer• Database Manager
• Weekly stand-up meetings• Discuss requirements and progress• Assign tasks
3
The Problem
• Scheduling the Human-Computer Interaction (HCI) Lab is currently done using paper
• Requires users to go to the HCI lab to check the schedule and record times
• Time-consuming and annoying for users
4
The Goal
• Simplify the process of …• Reserving the lab• Tracking meetings• Tracking volunteers
• Be easily accessible from different locations• Web application approach• Intuitive
5
The Constituency
• Researchers• Schedules meetings
• Volunteers• Signs up for meetings
• Teachers• Tracks research• Meetings• Volunteer participation
6
User Flow
7
Low-Fi Prototyping
8
Researchers
• Scheduling• Rehearsals• Volunteer interviews
• Different research locations
• Remote scheduling
• Email reminders
• Volunteers come to you 9
Humble Beginnings
10
Introducing Locations
11
Translating to Reality
12
Volunteers
• Remote sign-up
• Email reminders
• Choose projects that interest them
13
14
15
16
Teachers
• Aggregate data
• Tracking volunteer points
• Group management
• Location management
17
18
Usability Testing
• 7 tasks• As a researcher
1. Create appointment2. Edit appointment3. View all appointments4. Change settings5. View meeting details
• As a volunteer6. Register as a volunteer7. Confirm your participation in a project 19
Feedback
• 3 tests for feedback
• Largely positive overall
• All tasks were successfully completed• Minor hiccups at a couple spots
20
Feedback
• “Selecting a date on the calendar requires clicking the tiny number. Clicking anywhere should work also.”
Before After
21
Feedback
• “Task #3 confused me for a second, had to fumble with the page to find it. […] But after I seen where it was, it made sense.”• Task 3: View all of your appointments
22
Feedback
• “Clicked wrong place to find the interview information.”• Task 4: “Find the detailed view for this meeting.”
23
Overall
• “No complaints.”• “Enjoyed the layout/color scheme”• “It was simple for me to use.”
24
Development Goals
• Focus on cross browser compatibility• Standards compliant code• HTML5, JavaScript event driven• No 3rd party plugins
• Working around Internet Explorer’s problems• No legacy support
• Hardware compatibility• Develop for smallest common resolution
25
Development Principles
• Using pre-built components• Smarty Template Engine, jQuery, ...• Reduced development time• Increased usable features
• Separation of components• Technically possible to be one large file• Bad practice and hard to work with
• Markup, CSS, and JavaScript on the front-end• Database, PHP, and templates on the back-end
26
Developing Towards Templates
• UI development geared towards templates• Simplifies changing the UI• Change one template instead of separate files• Helped after requirements changed 2nd semester
• Separates content from markup• Better markup readability
• 3 primary templates• Header, body, footer• Sub-templates for page specific markup
27
28
Object-Oriented PHP
• PHP is a procedural language• Object-orientation tacked on
• Chose OO PHP for development• Easier to make changes• Easier to support• Separation of components• Not handling everything in one file
29
Wrapper Classes
• Created classes to black box data handlers• GET, POST, SESSION, SERVER• Can make changes to the handler class• To handle magic quotes for example
• Abundant use of singletons• Prevent duplication of resources• Database connections• LDAP connections
30
Security• PHP Data Objects and prepared statements
• Smarty Template Engine• No dynamic includes• Variable filtering
• Tokens on POST forms
• Secure session handling• Inactivity timeouts• Authentication checks
• Internally restricted redirects31
Database
• MySQL• Free and open source• Well supported by web hosts
• Engine• InnoDB
32
33
Integration
• End product based on hi-fi prototypes
• AJAX• Pull calendar events in the background
• Data validation
• Form pre-filling
34
Demo
35
Questions?
36
Recommended