projects pubs people press funding
Examples have been widely used in the area of web design to help web authors create web pages. However, without actually understanding how an example is constructed, people often have trouble extracting the elements they want and incorporating them into their own work.
WebCrystal is a web development tool that allows users to ask questions about how to reareate desired elements from an example web oage. It provides answers using a textual description and a customized code snippet that can be copied-and-pasted to rebuild the user-selected properties. WebCrystal also supports combining the styles and structures from multiple elements into the generated code snippet, and provides visualizations on the web page itself to explain layout relationships.
Click the screenshot above to watch the demonstration or download the video (47 MB).
(Last updated: 05/14/2012) WebCrystal is now available for download as a Firefox extension. Please upgrade your Firefox to the latest Firefox 12.
If you have any feedback, send it to Kerry at kerrychang@cs.cmu.edu. Like most of the research prototypes, WebCrystal is buggy. Kerry is trying to maintain it, but she can't guarantee any quick responses due to her limited time. Still, you are welcome to let us know what you think that we can do to make WebCrystal better.
Kerry S. Chang and Brad A. Myers (2012) WebCrystal: Understanding and Reusing Examples in Web Authoring. Proceedings ACM CHI'2012. Austin, TX, May 5-10, 2012. pp.3205-3214.