Winter 2017 | University of California, San Diego CSE Department
Homework #3 - Building Out Clickable Templates in HTML & CSS
This homework presents an opportunity to use HTML and CSS to implement a click-thru prototype of our class project. The emphasis on this homework is to explore the use of CSS to make our prototype high enough fidelity to give an end user a sense of what it might be like once fully implemented. We also are going to explore the effects of various CSS approaches on the application.
A secondary goal of this assignment is to understand the ramifications of the use of technologies in this case CSS. Since we are using CSS and images heavily we want to see if we can measure the impact on us (the developer) as well as the end user (and their browser) of choices we make. To explore this we need to implement the screens in two ways. The first way is a vanilla CSS execution where we author all the rules ourselves and there is nothing extra provided. The second is to use a framework such as Bootstrap to implement the screens. We are going to record our productivity with each measured by rough time taken (in your work hours) for each approach and also the impact of the solution in terms of file size and rendering time. To make the difference obvious the end user render times should be measured on an Android device with a 3G network throttle. This can be accomplished using a USB cable tying a phone to your system and using Chrome Dev tools to throttle the connection. The TAs will be using a device like this BLU or something similar. No particular device is required but understand if when looking at a chart like this one using an iPhone 7 or Pixel phone you are not getting an accurate reading of what typical users will experience. You may do the versions sequentially or in parallel, but logically you may find doing the vanilla version first makes the most sense for comparison and framework evaluation.
Your turn-in will include two versions of your app prototype that should be reachable online at your hosted location. You also must provide the repo information for the TAs to look over your efforts. The TAs will provide specific information in channel to help you with turn in logistics. Most importantly you will also need to provide a write up that discusses your findings with the two methods employed. You should provide numbers in terms of work effort (lines of code, hours taken, etc.) as well as user impact (load times, byte count, etc.). Your write-up should also provide a reasoned discussion of when you would want to employ each approach. Try not to declare one way the winner, instead present thoughts on how and why each approach you take would be valid for one situation or another. The write-up should be no longer than 3 pages and be succinct and to the point.
15pts for executed screens in CSS/images (framework way)
25pts for executed screens in CSS/images (vanilla way) - extra points because likely it takes you longer.
15pts for analysis (5pts for each version and 5 points for discussion about appropriateness)
The CSS points will focus on four pieces with slightly less emphasis on the visual execution part. The considerations are visual execution, syntactical correctness (use the CSS validator if you like), file and rule organization particularly as related to class, id and element use, and of course browser compatibility and performance
Total: 55pts, the top 3 executions will receive 15 extra points