A small matter of programming: perspectives on end user computing
A small matter of programming: perspectives on end user computing
Design galleries: a general approach to setting parameters for computer graphics and animation
Proceedings of the 24th annual conference on Computer graphics and interactive techniques
The volume and evolution of web page templates
WWW '05 Special interest tracks and posters of the 14th international conference on World Wide Web
Answering why and why not questions in user interfaces
Proceedings of the SIGCHI Conference on Human Factors in Computing Systems
Getting inspired!: understanding how and why examples are used in creative design practice
Proceedings of the SIGCHI Conference on Human Factors in Computing Systems
Finding causes of program output with the Java Whyline
Proceedings of the SIGCHI Conference on Human Factors in Computing Systems
Two studies of opportunistic programming: interleaving web foraging, learning, and writing code
Proceedings of the SIGCHI Conference on Human Factors in Computing Systems
FireCrystal: Understanding interactive behaviors in dynamic web pages
VLHCC '09 Proceedings of the 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC)
Designing with interactive example galleries
Proceedings of the SIGCHI Conference on Human Factors in Computing Systems
Bricolage: example-based retargeting for web design
Proceedings of the SIGCHI Conference on Human Factors in Computing Systems
d.tour: style-based exploration of design example galleries
Proceedings of the 24th annual ACM symposium on User interface software and technology
CHI '12 Extended Abstracts on Human Factors in Computing Systems
Quantifying and reducing the cost of web edits
CHI '13 Extended Abstracts on Human Factors in Computing Systems
Proceedings of the 22nd international conference on World Wide Web companion
Cascading tree sheets and recombinant HTML: better encapsulation and retargeting of web content
Proceedings of the 22nd international conference on World Wide Web
Authoring multi-stage code examples with editable code histories
Proceedings of the 26th annual ACM symposium on User interface software and technology
| Hi-index | 0.01 |
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 design. This paper introduces WebCrystal, a web development tool that helps users understand how a web page is built. WebCrystal contributes novel interaction techniques that let the user quickly access HTML and CSS information by selecting questions regarding how a selected element is designed. It provides answers using a textual description and a customized code snippet that can be copied-and-pasted to recreate the desired 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. Our user study shows that WebCrystal helped both novice and experienced developers complete more tasks successfully using significantly less time.