Discrepancy resolution processor and methods for implementing the same

1. A method for programmatically comparing, fixing, and flagging discrepancies, the method comprising:

resizing a first exported image file having a raster-based image format so that dimensions of the resized version of the first exported image file are the same size dimensions as those of a second exported image file having a vector-based image format;

cleaning up the second exported image file to make the second exported image file appear visually similar enough to the first exported image file so as to fulfill the needs of a software demonstration presentation being created, wherein the software demonstration presentation comprises an interactive software-product demonstration presentation for an envisioned software product that is a digital artifact presented to demonstrate features of the envisioned software product and how the envisioned software product is to function and operate in response to user interaction with a user interface;

loading the second exported image file as a Document Object Model (DOM) so that a script can interact with the DOM as if the second exported image file were in a browser;

identifying problematic characteristics with the second exported image file that were caused when the second exported image file was exported from image editing software, and adjusting the problematic characteristics of the second exported image file that were identified;

inserting the second exported image file within a Hypertext Markup Language (HTML) shell that mimics a final context that the second exported image file will be loaded into;

rendering the second exported image file in the browser and taking a screenshot of the rendered second exported image file;

processing the resized version of the first exported image file and the screenshot of the second exported image file to determine discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file; and

determining, by comparing the discrepancies to a configurable threshold, whether an image of the resized version of the first exported image file and an image of the screenshot of the second exported image file are similar enough, according to the configurable threshold, to be considered to match.

2. The method of claim 1 , further comprising:

highlighting the discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file in any way that is visually detectable so that the discrepancies are clearly visible to a user.

3. The method of claim 1 , further comprising:

creating a visual representation of discrepancies that cycles back and forth between the resized version of the first exported image file and the screenshot of the second exported image file so that the discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file are observable when viewed by a user.

4. The method of claim 1 , wherein cleaning up the second exported image file, comprises:

renaming identifiers of the second exported image file to ensure that each is unique and do not collide with other identifiers of other SVGs that on a webpage;

cleaning identifiers of the second exported image file so they are valid for Hypertext Markup Language (HTML); and

performing other manipulations with respect to the second exported image file to optimize use of the second exported image file in the browser.

5. The method of claim 4 , wherein the other manipulations comprise one or more of:

altering objects of the second exported image file so that they are positioned, sized, oriented, colored, and shaded, in a way that more closely matches their positioning, sizing, orientation, colorizing and shading in the first exported image file.

6. The method of claim 1 , wherein the problematic characteristics with the second exported image file that were identified comprise one or more of: text sizing being incorrect; text spacing being incorrect; leading; word spacing; letter spacing; border width; and drop shadows missing; and component positioning on a web page being placed incorrectly.

7. The method of claim 1 , wherein processing the resized version of the first exported image file and the screenshot of the second exported image file to determine the discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file, comprises:

processing the resized version of the first exported image file and the screenshot of the second exported image file via a diff program that determines the discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file to generate a difference file that records the discrepancies.

8. The method of claim 1 , wherein the second exported image file has a format that is subsequently programmatically manipulatable including one or more of:

interpreting the image data as a Document Object Model (DOM); and

manipulating the image data via JavaScript or CSS.

9. A system, comprising:

a server system comprising at least one first hardware-based processor and memory, wherein the memory comprises processor-executable instructions encoded on a non-transient processor-readable media, wherein the processor-executable instructions comprise one or more scripts, when executed by the first hardware-based processor, are configurable to cause:

executing, at a discrepancy resolution processor, on a first exported image file, having a raster-based image format, and a second exported image file, having a vector-based image format, to programmatically compare, fix, and flag discrepancies between the first exported image file and the second exported image file by:

resizing the first exported image file so that dimensions of the resized version of the first exported image file are the same size dimensions as those of the second exported image file;

cleaning up the second exported image file to make the second exported image file appear visually similar enough to the first exported image file so as to fulfill the needs of a software demonstration presentation being created, wherein the software demonstration presentation comprises an interactive software-product demonstration presentation for an envisioned software product that is a digital artifact presented to demonstrate features of the envisioned software product and how the envisioned software product is to function and operate in response to user interaction with a user interface;

loading the second exported image file as a Document Object Model (DOM) so that a script can interact with the DOM as if the second exported image file were in a browser;

identifying problematic characteristics with the second exported image file that were caused when the second exported image file was exported from image editing software, and adjusting the problematic characteristics of the second exported image file that were identified;

inserting the second exported image file within a Hypertext Markup Language (HTML) shell that mimics a final context that the second exported image file will be loaded into;

rendering the second exported image file in the browser and taking a screenshot of the rendered second exported image file;

processing the resized version of the first exported image file and the screenshot of the second exported image file to determine discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file; and

determining, by comparing the discrepancies to a configurable threshold, whether an image of the resized version of the first exported image file and an image of the screenshot of the second exported image file are similar enough, according to the configurable threshold, to be considered to match.

10. The system of claim 9 , wherein the processor-executable instructions, when executed by the first hardware-based processor, are further configurable to cause:

highlighting the discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file in any way that is visually detectable so that the discrepancies are clearly visible to a user.

11. The system of claim 9 , wherein the processor-executable instructions, when executed by the first hardware-based processor, are further configurable to cause:

creating a visual representation of discrepancies that cycles back and forth between the resized version of the first exported image file and the screenshot of the second exported image file so that the discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file are observable when viewed by a user.

12. The system of claim 9 , wherein cleaning up the second exported image file, comprises:

renaming identifiers of the second exported image file to ensure that each is unique and do not collide with other identifiers of other SVGs that on a webpage;

cleaning identifiers of the second exported image file so they are valid for Hypertext Markup Language (HTML); and

performing other manipulations with respect to the second exported image file to optimize use of the second exported image file in the browser.

13. The system of claim 12 , wherein the other manipulations comprise one or more of:

altering objects of the second exported image file so that they are positioned, sized, oriented, colored, and shaded, in a way that more closely matches their positioning, sizing, orientation, colorizing and shading in the first exported image file.

14. The system of claim 9 , wherein the problematic characteristics with the second exported image file that were identified comprise one or more of: text sizing being incorrect; text spacing being incorrect; leading; word spacing; letter spacing; border width; and drop shadows missing; and component positioning on a web page being placed incorrectly.

15. The system of claim 9 , wherein processing the resized version of the first exported image file and the screenshot of the second exported image file to determine the discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file, comprises:

processing the resized version of the first exported image file and the screenshot of the second exported image file via a diff program that determines the discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file to generate a difference file that records the discrepancies.

16. The system of claim 9 , wherein the second exported image file has a format that is subsequently programmatically manipulatable including one or more of:

interpreting the image data as a Document Object Model (DOM); and

manipulating the image data via JavaScript or CSS.

17. A system comprising at least one hardware-based processor and memory, wherein the memory comprises processor-executable instructions encoded on a non-transient processor-readable media for programmatically comparing, fixing, and flagging discrepancies, wherein the processor-executable instructions, when executed by the processor, are configurable to cause:

resizing a first exported image file having a raster-based image format so that dimensions of the resized version of the first exported image file are the same size dimensions as those of a second exported image file having a vector-based image format;

cleaning up the second exported image file to make the second exported image file appear visually similar enough to the first exported image file so as to fulfill the needs of a software demonstration presentation being created, wherein the software demonstration presentation comprises an interactive software-product demonstration presentation for an envisioned software product that is a digital artifact presented to demonstrate features of the envisioned software product and how the envisioned software product is to function and operate in response to user interaction with a user interface;

loading the second exported image file as a Document Object Model (DOM) so that a script can interact with the DOM as if the second exported image file were in a browser;

identifying problematic characteristics with the second exported image file that were caused when the second exported image file was exported from image editing software, and adjusting the problematic characteristics of the second exported image file that were identified;

inserting the second exported image file within a Hypertext Markup Language (HTML) shell that mimics a final context that the second exported image file will be loaded into;

rendering the second exported image file in the browser and taking a screenshot of the rendered second exported image file;

processing the resized version of the first exported image file and the screenshot of the second exported image file to determine discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file; and

determining, by comparing the discrepancies to a configurable threshold, whether an image of the resized version of the first exported image file and an image of the screenshot of the second exported image file are similar enough, according to the configurable threshold, to be considered to match.

18. The system of claim 17 , wherein the processor-executable instructions, when executed by the processor, are configurable to cause:

highlighting the discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file in any way that is visually detectable so that the discrepancies are clearly visible to a user; and

creating a visual representation of discrepancies that cycles back and forth between the resized version of the first exported image file and the screenshot of the second exported image file so that the discrepancies between the resized version of the first exported image file and the screenshot of the second exported image file are observable when viewed by a user.

19. The system of claim 17 , wherein cleaning up the second exported image file, comprises:

renaming identifiers of the second exported image file to ensure that each is unique and do not collide with other identifiers of other SVGs that on a webpage;

cleaning identifiers of the second exported image file so they are valid for Hypertext Markup Language (HTML); and

performing other manipulations with respect to the second exported image file to optimize use of the second exported image file in the browser, wherein the other manipulations comprise one or more of: altering objects of the second exported image file so that they are positioned, sized, oriented, colored, and shaded, in a way that more closely matches their positioning, sizing, orientation, colorizing and shading in the first exported image file.

20. The system of claim 17 , wherein the problematic characteristics with the second exported image file that were identified comprise one or more of: text sizing being incorrect; text spacing being incorrect; leading; word spacing; letter spacing; border width; and drop shadows missing; and component positioning on a web page being placed incorrectly.