Project Plan HTML5-Based WYSIWYG Label Designer The Capstone - - PowerPoint PPT Presentation

project plan
SMART_READER_LITE
LIVE PREVIEW

Project Plan HTML5-Based WYSIWYG Label Designer The Capstone - - PowerPoint PPT Presentation

Project Plan HTML5-Based WYSIWYG Label Designer The Capstone Experience Team Plex Systems Michele Winsky Andrew Melfi Matthew Duffy Department of Computer Science and Engineering Michigan State University Spring 2012 From Students to


slide-1
SLIDE 1

From Students… …to Professionals

The Capstone Experience

Project Plan

HTML5-Based WYSIWYG Label Designer

Team Plex Systems

Michele Winsky Andrew Melfi Matthew Duffy Department of Computer Science and Engineering Michigan State University Spring 2012

slide-2
SLIDE 2

Project Overview

  • HTML5-based WYSIWYG Label Designer
  • Label designer created with web technologies
  • Allows the intuitive creation of labels with various

elements

  • The created label flows are to be used to trace

products during/after manufacturing

The Capstone Experience Team Plex Systems Project Plan 2

  • Barcodes
  • Text Labels
  • Text Data
  • Lines
  • Images
slide-3
SLIDE 3

Functional Specifications

  • Accessed through user’s web browser
  • User may load or manage previously created

layouts

  • Create elements by selecting an object from

the list

  • Ability to save the current layout
  • Each element may be adjusted by mouse or

granularly by element properties

The Capstone Experience Team Plex Systems Project Plan 3

slide-4
SLIDE 4

Design Specifications

  • Single Webpage
  • Dynamic content on the page
  • Content is driven by client side interaction
  • Mouse is the primary interface method
  • Finished labels reside server side

The Capstone Experience Team Plex Systems Project Plan 4

slide-5
SLIDE 5

Screen Mockup: App Overview

The Capstone Experience Team Plex Systems Project Plan 5

slide-6
SLIDE 6

Screen Mockup: App Overview

The Capstone Experience Team Plex Systems Project Plan 6

slide-7
SLIDE 7

Screen Mockup: Element Properties

The Capstone Experience Team Plex Systems Project Plan 7

Barcode Object Text Object Line Object Image Object

slide-8
SLIDE 8

Technical Specifications

  • Web application is primarily executed on the

user’s machine

  • HTML5/CSS Directs Layout
  • JavaScript / jQuery Directs App Behavior
  • Backend Systems Provide
  • C#/ASP.Net Barcode Representation
  • SQL Server Database Access using ASP.Net

The Capstone Experience Team Plex Systems Project Plan 8

slide-9
SLIDE 9

System Architecture

The Capstone Experience Team Plex Systems Project Plan 9

slide-10
SLIDE 10

System Components

  • Hardware Platforms
  • Windows server
  • SQL Server 2008
  • Client Side does not require a specific platform
  • Software Platforms / Technologies
  • Client Side
  • HTML5/CSS for the general layout
  • jQuery, JavaScript, and Ajax for dynamic content
  • Server Side
  • ASP.Net

The Capstone Experience Team Plex Systems Project Plan 10

slide-11
SLIDE 11

Testing

  • Browsers
  • Chrome 7+
  • Firefox 4+
  • Internet Explorer 9+
  • Safari 5+
  • UI
  • Needs to be intuitive
  • Independent user testing
  • Granular Testing
  • Possibility of breaking the app
  • Stability/Stress
  • 1000s of elements on a label

The Capstone Experience Team Plex Systems Project Plan 11

slide-12
SLIDE 12

Risks

  • Limited experience with web technologies
  • No team member has done extensive web development
  • Slowly picking up the necessary skills
  • Project specification
  • Design was very open
  • Provided an example mock-up to understand their

desires

  • HTML5 is not uniformly supported
  • Each browser implements HTML5 in its own way
  • Verify each major feature before implementation

The Capstone Experience Team Plex Systems Project Plan 12