Thursday, October 1st, 2009 (updated 5 Oct ’09)

adam@engaging.net | Brighton, England

Coding

 
O

nce we’ve populated the system with content data and produced the screen mock-ups, it’s time to knit these together and build something that the world can actually view and use.

Following the industry-standard “Model/View/Controller”:http://en.wikipedia.org/wiki/Model–view–controller pattern, we’ve already produced the Model with the architecture and configuration, so next up is to produce the View. To do this we convert the screen mock-ups to web pages using HTML for the document structure, CSS for the visual design, and JavaScript (increasingly relying on the jQuery framework and jQuery plug-ins) for the interface behavior.

After producing the View we move on to the Controller. In the case of ExpressionEngine, this means converting the HTML/CSS/JS web pages into dynamic templates, where the variable areas of each template are swapped out with dynamic data by the content management system.

The reason we begin coding only after completing the design work is that wireframes may require modifications once they’ve become mock-ups and visual impracticalities appear.

The entire process, with dependencies

Process