Pin Me

Implementing Websites Using Automatic Code and Graphic Generation

written by: Hans • edited by: Marlene Gundlach • updated: 2/28/2013

This article is about the implementation itself. The design phases are finished now and the generation of the product itself can start up by projecting the models to real world websites.

  • slide 1 of 1


    Project Managers have to discuss and decide where automatic code generation has to be used and also where not. There are many tools like CMS, WYSIWYG, and Code generators like Adobe Dreamweaver or Adobe GoLive. Many components can be taken from libraries as we do with shop systems, boards, blogs or captchas. Such components are not manually coded when there is no strong reason to do so.

    When it becomes clear what needs to be done, some first products are generated. These are:

    • object chunks
    • navigational model
    • site structure model
    • page models
    • logical data models
    • mappings
    • design templates
    • pictures
    • text areas
    • typo styles and others

    Professor de Troyer proposes an interesting approach for prototyping. She supposes to build a transformation pipeline (using XSLT) first that can be used later for fast adaption, efficient change management, and agile transformations on all levels and layers of the system as well as the data structures up to code-defined process parts. The transformation pipeline envisioned by de Troyer is even discussed for more dynamic server side architectures that can be set up using Sun JAVA or Microsoft .NET environments as well as Ruby, PHP, or old school C programs.

    The resulting files represent the system, in the case of a more or less detailed framework, that pictures the data structure as well as the basic functionality, data base access, and other required technical items. But there are even front-end components available by using this automatic approach of generating parts of the web site system.

    This first step of system generation is mostly done in the back-end of the systems architecture. The front-end output components are generated by the next step, where templates and graphics (generated ones as well as hand made ones) are integrated, text is written and added where it is not done by the database itself, special design features are implemented, and some of the latest corrections are made semi-automatically. As we see, the architecture of such systems is multi-layered and the processes realized by that system are mostly divided into multi-step process lines. This fact can be helpful for testing and QM, as well as for project process organization.

    This basic approach can be discussed on different levels. The main level will be to figure out which kind of website project actually has to be made, which kind and how much of data can be expected, and which level of creative design elements is on demand by the customer. We even need to have a look at the maintenance processes, the change rate, and some marketing options as well.

    Summing up, we find a technology that is well known and has its academic background with the WSDM; thus we can use it for better website developement. Always refer to the technological basis before starting the planning process. This is defined and well-founded by the project butterfly that shows these two sides of system development process management. In the following parts, we come up with more project management related details.

    The next article in this series goes beyond the technological parts and discusses the project management view of website design.

Website Design Projects

This short series gives some ideas, not perfect solutions, about website design, website projects and some depending processes. The reader gets a distant point of view to reorganize his web projects using some possibly helpfull ideas.
  1. Website Design Method: Project Planning for a Website
  2. Website Design Method: The Implementation Phase
  3. Implementing Websites Using Automatic Code and Graphic Generation
  4. Website Design: The Project Management View
  5. Small Static Website Projects