Scaffolding Relational Schemas and APIs from Content in Web Mockups

  • Alfonso MuroloEmail author
  • Sybil Ehrensberger
  • Zera Asani
  • Moira C. Norrie
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 10650)


Web developers often use an interface-driven design process where mockups are gradually refined before being implemented using a platform or framework. We propose a tool, DataMockups, that supports the creation of digital mockups and then generates a relational schema automatically based on sample content and some assumptions on its structure. This aims at reducing development effort, and the database knowledge required by developers. Sample content may be entered manually or automatically using data extracted from similar existing websites. A relational schema is inferred from the data content, and then translated to an SQL database definition before generating a server-side API. To support schema evolution, the generated API provides schema abstractions that offer robustness to future schema modifications. We report on a case study for the schema inference and a performance evaluation of the data detection algorithm.


Schema generation Digital mockups Interface-driven development Scaffolding Relational schema 



We would like to thank Loris Diana for his work on the realisation of the DB-API-Generator.


  1. 1.
    Norrie, M.C., Geronimo, L., Murolo, A., Nebeling, M.: The forgotten many? A survey of modern web development practices. In: Casteleyn, S., Rossi, G., Winckler, M. (eds.) ICWE 2014. LNCS, vol. 8541, pp. 290–307. Springer, Cham (2014). doi: 10.1007/978-3-319-08245-5_17CrossRefGoogle Scholar
  2. 2.
    Blakeley-Silver, T.: WordPress 2.8 Theme Design: Create Flexible, Powerful, and Professional Themes for Your WordPress Blogs and Websites. Packt Publishing Ltd. (2009)Google Scholar
  3. 3.
    Yang, F., Gupta, N., Botev, C., Churchill, E.F., Levchenko, G., Shanmugasundaram, J.: WYSIWYG development of data driven web applications. Proc. VLDB Endow. 1(1), 163–175 (2008)CrossRefGoogle Scholar
  4. 4.
    Ramdoyal, R., Cleve, A.: From pattern-based user interfaces to conceptual schemas and back. In: Jeusfeld, M., Delcambre, L., Ling, T.-W. (eds.) ER 2011. LNCS, vol. 6998, pp. 247–260. Springer, Heidelberg (2011). doi: 10.1007/978-3-642-24606-7_19CrossRefGoogle Scholar
  5. 5.
    Verou, L., Zhang, A.X., Karger, D.R.: Mavo: creating interactive data-driven web applications by authoring HTML. In: Proceedings of 29th Annual Symposium on User Interface Software and Technology, pp. 483–496. ACM (2016)Google Scholar
  6. 6.
    Murolo, A., Norrie, M.C.: Deriving custom post types from digital mockups. In: Cimiano, P., Frasincar, F., Houben, G.-J., Schwabe, D. (eds.) ICWE 2015. LNCS, vol. 9114, pp. 71–80. Springer, Cham (2015). doi: 10.1007/978-3-319-19890-3_6CrossRefGoogle Scholar
  7. 7.
    Murolo, A., Norrie, M.C.: Revisiting web data extraction using in-browser structural analysis and visual cues in modern web designs. In: Bozzon, A., Cudre-Maroux, P., Pautasso, C. (eds.) ICWE 2016. LNCS, vol. 9671, pp. 114–131. Springer, Cham (2016). doi: 10.1007/978-3-319-38791-8_7CrossRefGoogle Scholar
  8. 8.
    Hennicker, R., Koch, N.: A UML-based methodology for hypermedia design. In: Evans, A., Kent, S., Selic, B. (eds.) UML 2000. LNCS, vol. 1939, pp. 410–424. Springer, Heidelberg (2000). doi: 10.1007/3-540-40011-7_30CrossRefGoogle Scholar
  9. 9.
    Ceri, S., Fraternali, P., Bongio, A.: Web modeling language (WebML): a modeling language for designing web sites. Comput. Netw. 33(1–6), 137–157 (2000)CrossRefGoogle Scholar
  10. 10.
    Houben, G.-J., Barna, P., Frasincar, F., Vdovjak, R.: Hera: development of semantic web information systems. In: Lovelle, J.M.C., Rodríguez, B.M.G., Gayo, J.E.L., Puerto Paule Ruiz, M., Aguilar, L.J. (eds.) ICWE 2003. LNCS, vol. 2722, pp. 529–538. Springer, Heidelberg (2003). doi: 10.1007/3-540-45068-8_99CrossRefzbMATHGoogle Scholar
  11. 11.
    Newman, M.W., Lin, J., Hong, J.I., Landay, J.A.: DENIM: an informal web site design tool inspired by observations of practice. Hum.-Comput. Interact. 18(3), 259–324 (2003)CrossRefGoogle Scholar
  12. 12.
    Rivero, J.M., Heil, S., Grigera, J., Gaedke, M., Rossi, G.: MockAPI: an agile approach supporting API-first web application development. In: Daniel, F., Dolog, P., Li, Q. (eds.) ICWE 2013. LNCS, vol. 7977, pp. 7–21. Springer, Heidelberg (2013). doi: 10.1007/978-3-642-39200-9_4CrossRefGoogle Scholar
  13. 13.
    Rivero, J.M., Heil, S., Grigera, J., Robles Luna, E., Gaedke, M.: An extensible, model-driven and end-user centric approach for API building. In: Casteleyn, S., Rossi, G., Winckler, M. (eds.) ICWE 2014. LNCS, vol. 8541, pp. 494–497. Springer, Cham (2014). doi: 10.1007/978-3-319-08245-5_35CrossRefGoogle Scholar
  14. 14.
    Rivero, J.M., Grigera, J., Rossi, G., Luna, E.R., Montero, F., Gaedke, M.: Mockup-driven development: providing agile support for model-driven web engineering. Inf. Softw. Technol. 56(6), 670–687 (2014)CrossRefGoogle Scholar
  15. 15.
    Terwilliger, J.F., Delcambre, L.M.L., Logan, J.: The user interface is the conceptual model. In: Embley, D.W., Olivé, A., Ram, S. (eds.) ER 2006. LNCS, vol. 4215, pp. 424–436. Springer, Heidelberg (2006). doi: 10.1007/11901181_32CrossRefGoogle Scholar
  16. 16.
    Tai, K.: The tree-to-tree correction problem. J. ACM 26(3), 422–433 (1979)MathSciNetCrossRefGoogle Scholar
  17. 17.
    Augsten, N., Böhlen, M., Gamper, J.: Approximate matching of hierarchical data using Pq-grams. In: Proceedings of 31st International Conference on Very Large Data Bases, VLDB Endowment (2005)Google Scholar
  18. 18.
    Crescenzi, V., Mecca, G., Merialdo, P.: Roadrunner: towards automatic data extraction from large web sites. In: Proceedings of 27th International Conference on Very Large Data Bases. Morgan Kaufmann (2001)Google Scholar
  19. 19.
    Chang, C., Lui, S.: IEPAD: information extraction based on pattern discovery. In: Proceedings of 10th International Conference on World Wide Web. ACM (2001)Google Scholar
  20. 20.
    Liu, W., Meng, X., Meng, W.: Vide: a vision-based approach for deep web data extraction. IEEE Trans. Knowl. Data Eng. 22(3), 447–460 (2010)CrossRefGoogle Scholar

Copyright information

© Springer International Publishing AG 2017

Authors and Affiliations

  • Alfonso Murolo
    • 1
    Email author
  • Sybil Ehrensberger
    • 1
  • Zera Asani
    • 1
  • Moira C. Norrie
    • 1
  1. 1.Department of Computer ScienceETH ZurichZurichSwitzerland

Personalised recommendations