Compiling mockups to flexible UIs

Sinha, Nishant; Karim, Rezwana

doi:10.1145/2491411.2491427

Cited by 11 publications

(4 citation statements)

References 21 publications

Supporting

Mentioning

Contrasting

Order By: Relevance

“…Our first case study is a guillotine layout language where a set of horizontal and vertical dividers partition the space. A subset of CSS can be encoded in such languages [25]. The guillotine language totals 30 constraints.…”

Section: Scalability and Completenessmentioning

confidence: 99%

The Emperor's New Password Manager: Security Analysis of Web-based Password Managers

Akhawe

et al. 2014

100

View full text Add to dashboard Cite

Synthesis is the problem of obtaining programs from relational specifications. We present grammar-modular (GM) synthesis, an algorithm for synthesis from tree-structured relational specifications. GM synthesis makes synthesis applicable to previously intractable relational specifications by decomposing them into smaller subproblems, which can be tackled in isolation by off-the-shelf synthesis procedures. The program fragments thus generated are subsequently composed to form a program satisfying the overall specification. We also generalize our technique to tree languages of relational specifications. Here, we synthesize a single program capable satisfying any (tree-shaped) relation belonging to the language; the synthesized program is syntax-directed by the structure of the relation. We evaluate our work by applying GM synthesis to document layout: given the semantics of a layout language, we synthesize tailored constraint solvers capable of laying out languages of documents. Our experiments show that GM synthesis is sufficiently complete to successfully generate solvers for non-trivial data visualizations, and that our synthesized solvers are between 39-to 200-times faster than general-purpose constraint solvers.

show abstract

Section: Scalability and Completenessmentioning

confidence: 99%

The Emperor's New Password Manager: Security Analysis of Web-based Password Managers

Akhawe

et al. 2014

100

View full text Add to dashboard Cite

show abstract

“…Another approach is to create a fluid and elastic design that can adapt to various display sizes. To support the labor-intensive and time-consuming process of creating responsive designs, Sinha and Karim (2013) devised a mockup-based design tool that creates fluid web layouts from a rough visual depiction of the desired design. In other words, this tool systematically encodes mockups drawn in a WYSIWYG editor into flexible layouts.…”

Section: Related Workmentioning

confidence: 99%

Responsive HTML generation using SuperSQL

Goto

Koshijima

Toyama

2017

IJWIS

View full text Add to dashboard Cite

Purpose With the rapid spread of smartphones and tablets, it is becoming necessary for web developers to create responsive web pages which are visually appealing on devices of various sizes. However, building responsive UIs is a very challenging task, requiring deep knowledge of HTML and CSS. This paper aims to propose an approach to generate responsive web pages using SuperSQL, which is an extension of SQL that can format data retrieved from a database into various kinds of structured documents. Design/methodology/approach By incorporating the methodology of bootstrap, a grid-based framework for front-end development, the authors have made it possible to create responsive web pages from simple SuperSQL queries. In addition, by utilizing SuperSQL’s unique feature that can describe the structure of the output web page, the authors have proposed and implemented a mechanism to automatically optimize the web content’s size and position. Findings In the evaluation, the authors created some actual web applications with and without the use of SuperSQL and compared the code amount (number of lines). As a result, when using the proposed system, the amount of code was reduced to about 1/5. The authors also compared the layout generated by the proposed automatic layout generation mechanism with the responsive layout that was generated manually. As a result, the automatic layout generation mechanism created the same layout as the manually created layout 74.8 per cent of the time, and the user satisfaction level turned out to be 85.8 per cent. Originality/value The way to generate a responsive HTML by using a single SuperSQL query, and the mechanism for automatic responsive layout generation.

show abstract

“…Layout can be inferred from topological descriptions [24], or directly from user-drawn mock-ups [21]. In the latter work, a subdivision of the space expressed as a tree of vertical and horizontal dividers is extracted from a single demonstration, a mock-up.…”

Section: Automatic Layout Inferencementioning

confidence: 99%

Programming by manipulation for layout

Hottelier

Bodik

Ryokai

2014

Proceedings of the 27th Annual ACM Symposium on User Interface Software and Technology

View full text Add to dashboard Cite

We present Programming by Manipulation, a new programming methodology for specifying the layout of data visualizations, targeted at non-programmers. We address the two central sources of bugs that arise when programming with constraints: ambiguities and conflicts (inconsistencies). We rule out conflicts by design and exploit ambiguity to explore possible layout designs. Our users design layouts by highlighting undesirable aspects of a current design, effectively breaking spurious constraints and introducing ambiguity by giving some elements freedom to move or resize. Subsequently, the tool indicates how the ambiguity can be removed, by computing how the free elements can be fixed with available constraints. To support this workflow, our tool computes the ambiguity and summarizes it visually. We evaluate our work with two user-studies demonstrating that both non-programmers and programmers can effectively use our prototype. Our results suggest that our tool is 5-times more productive than direct programming with constraints.

show abstract

Compiling mockups to flexible UIs

Cited by 11 publications

References 21 publications

The Emperor's New Password Manager: Security Analysis of Web-based Password Managers

The Emperor's New Password Manager: Security Analysis of Web-based Password Managers

Responsive HTML generation using SuperSQL

Programming by manipulation for layout

Contact Info

Product

Resources

About