Table of Contents
This is a case study for use in a class like Software Development.
Putting Ideas to Work
Frangelico DeWitt leads a digital transformation team at HVAC in a Hurry, an HVAC (heating, ventilation, and air conditioning) service firm. After spending a few weeks in design sprints to figure out what would move the needle for HinH, they’ve decided to test a web application that helps HVAC (heating and air conditioning) technicians check on the availability and pricing of replacement parts.
They have a set of user stories they think are solid for a first go. They drafted two parallel concepts for these based on comparables and after some exploratory user testing, they’ve settled on ‘concept 2’.
As a way to articulate the design in more explicit detail, Frangelico volunteered to create a working prototype in HTML. He’s finished a page that deals with seeing the available HVAC parts and finding the part of interest (see sample code: Making HTML Manageable, Part III). Now he’s working on a page that shows the details for an individual part- kind of like what you see in the thumbnail here.
From Prototype to HTML
Frangelico has a basic working version up here: HVAC Part Detail Page (Static).
Looking at the sample code on JS Fiddle, can you identify all the HTML elements? Can you explain their roles?
Pick a CSS entry and tie it back to the HTML it styles/affects. What happens if you change or delete the CSS entry?
Suppose you want to delete the text that reads ‘Orders (90 day): 87’. How would you do that?
Suppose you want to put a border around the paragraph that starts with ‘This part is…’. How would you do that?
Hint: Just Google ‘add border to paragraph HTML’ and take it from there. Don’t worry: lots of development happens this way!
Suppose you wanted to create rounded corners on that border? How would you do that? Fork the JS Fiddle and try it out!
What else do you think is worth trying? Try it out!
Exhibit A: User Stories
These explain the design intent for the team’s new web application.
Epic User Story
‘As Ted the HVAC technician, I want to identify a part that needs replacing so I can decide my next steps.’
Storyboard
Based on their observations in the field, Frangelico’s team thought through the user experience of the epic with the following storyboard: 
Child Stories
User Story |
Test Cases |
| ‘I know the part number and I want to find it on the system so I can figure out next steps on the repair.’ | Make sure it’s possible to search by part number. Make sure descriptive info. appears as the search narrows (photo?) to help avoid error. |
| ‘I don’t know the part number and I want to try to identify it online so I can move the job forward.’ | Make sure it’s possible to search by make/model of units Make sure it’s possible to search by type |
| ‘I don’t know the part number and I can’t determine it and I want help so I can move the job forward.’ | Make sure an estimate of the turnaround time for an expert to review is available |
| ‘I want to see the cost of the part and time to receive it so I decide on next steps and get agreement from the customer.’ | Make sure it’s possible to dispatch a request by email to the customer in case they order their own parts and/or carry their own inventory of spares. NOTE: How would the customer respond so we can help structure the next steps as we would otherwise? |
| Make sure it’s possible to indicate priority Make sure cost associated with priority delivery are available |
|
| ‘I want to order the part so that we can move forward with the repair.’ |
Exhibit B: Wireframes
These describe the approach to the user interface the team’s going to detail and test further. For static mockup’s of the two concepts, see this Balsamiq file: Parallel Prototyping at HinH.
Exhibit C: Working with the Sample Code on JS Fiddle
The basic idea with JS Fiddle is that you can quickly write and test your code in a simplified environment. When you arrive at the sample JS Fiddle, you can freely edit it.
If you want to see your changes in the ‘Results’ pane, you’ll need to click the ‘Run’ button at the top.
If you want to save your version, you’ll need to have set up a free account on JS Fiddle and click ‘Save’.
Exhibit D: Working with HTML
The web and most digital things you can see as a user are built from Hyper Text Markup Language (HTML). It organizes and encapsulates the stuff you see online in various tags, ‘<>’. For example, a first-level heading (heading 1) that reads ‘Hello, World!’ would look like this in HTML:
<h1>Hello, World!</h1>.
The first tag starts the H1 (<h1>) and the second one finishes it (</h1>).
One super important and common such tag is the <div> tag. This tags is a central building block for elements on pages. For example, here are some notes on how the div is functioning in the JSFiddle:
To see this in action, try changing around the div or creating a new one in the JSFiddle.
Resources
For an introduction to the fundamentals of HTML, this is a good, quick resource: HTML Introduction.
For a more extended and more guided introduction, check out this lesson on Codecademy: Learn HTML: Elements and Structure. The course this is a part of (Introduction to HTML) is rated at 4 hours, so I would stick to just that first lesson, ‘HTML Elements and Structure’, and I would not proceed to ‘HTML Tables’. In fact, you may find you’re ready to roll after the first couple of items in the lesson. Generally speaking, I would do the minimum here that you feel you need to be comfortable that you understand the fundamentals, and press forward with the case. Codecademy also has a bunch of premium features which are probably quite good, but for this purpose I think you’ll be just fine with the free/basic version of the Learn HTML module.
Exhibit E: Working with CSS
CSS centralizes the styling for your HTML, which is an important job. For an example, take a look at what the starter code would look like without CSS: Cluttered HTML-Only Example of Parts Detail Page.
Let’s step through this example CSS entry for the top navigation bar:
.top-bar {
color: #FFFFFF;
height: 40px;
margin: 0px;
padding: 10px;
display: flex;
align-items: center;
}
The style elements in a CSS entry are enclosed in curly braces {}. The first item ‘.top-bar’ is a called a CSS selector. That selector specifies the HTML element or elements where the designated style should apply. It will apply to HTML elements that have the class ‘top-bar’, like this div:
<div class="top-bar">
<p>I am this div's contents.</p>
</div>
Matching these CSS selectors with the HTML you want to style is where a lot of the action/debugging happens, particularly when you’re getting started. There are quite a few ways to formulate CSS selectors, but three are dominant and fundamental:
1. Element/Tag:
Select all HTML elements with said tag. For example, this entry instructs all type enclosed in <p></p> tags to have the font Arial.
p {
font-family: Arial;
}
2. Class:
Select all elements with this class. These start with a period, and the ‘top-bar’ class above is an example of this.
3. ID: Select all elements with this ID.
These are used primarily for special cases and one-offs and start with a hashtag. For example, this entry instructs all elements with the ID nav-bar to have their type centered:
#search-box {
text-align: center;
}
ID’s in HTML look like the class designation you saw above, but instead they have the element ‘id’ (id=”search-box”). These three entries have increasing specificity and increasing precedence. For example, if an HTML element had both a class and an ID and both specified a font, the font designated by the ID would take precedence and be the one you’d see rendered.
The Resources below will help you through these and so will Google’ing your more questions. Just like HTML, there are a lot of facilities and facets available, so I would focus primarily on working through the case and its implementation specifics. Otherwise, it’s easy to get lost in all the fun and interesting (but possibly not useful to you right now) things CSS can do.
That said, here are two few fundamental concepts you should be basically comfortable with for the case discussion:
How do you pair CSS entries with HTML elements?
What is the CSS Box Model and the role of content, padding, border, and margin?
Resources
For an introduction to the fundamentals of CSS, this is a good, quick resource: CSS Introduction. I would start here and see if it gets you through the case preparation.
If you want a more guided introduction and/or you really liked Codecademy, they have a module on CSS: Learn CSS. However, I would not plan to go through the whole thing: it’s rated at a hefty 11 hours! It’s also more than you’ll need for the case. A few lessons you might find helpful are: ‘Selectors and Visual Rules’, ‘The Box Model’, and ‘Display and Positioning’.
Exhibit F: Adding Images to Your Fiddle
HTML displays images through a reference to where they’re hosted using the ‘src’ (short for ‘source’) attribute. For example, in the snippet below the images is hosted on this site:
<img style="vertical-align: middle;" src="https://cowanstaging.wpenginepowered.com/wp-content/uploads/2017/12/hvac-board-4-post-150px.png" alt="PCB board 2">
So, you need a place online to host any image you want to use. Google Drive is convenient. The steps are:
- Upload the image to your Google Drive account
- Right (or two finger) click it the image and pull up the sharing settings (and as of this writing go to the ‘Get link’ submenu). Make sure the image is set to ‘Public’ (or similar). Copy the URL.
- From the URL, copy the file ID. In this URL, I’ve highlighted the ID in bold: https://drive.google.com/file/d/1X4VMskGu7iW3wtWATn8D7J8VXe_j2jX2/view?usp=sharing
- Using this format, copy in the file ID where you see the placeholder ‘fileID’: http://drive.google.com/uc?export=view&id=fileID. For example, ‘http://drive.google.com/uc?export=view&id=1X4VMskGu7iW3wtWATn8D7J8VXe_j2jX2’.
- Place that URL in the value for the ‘src’ parameter. You can see an example on JS Fiddle here: HTML with image hosted on Google Drive.
Exhibit G: Debugging with the Chrome DEVTOOLS
The Chrome DEVTOOLS tutorials are pretty good and quite short. I recommend checking out the first portions of these tutorial if you want to use them–
Get Started With Viewing And Changing The DOM (Document Object Model)
View and Change CSS
There are even small practice exercises for you to use in-context as a warm-up. A few things I would be sure you can do by the end of reviewing these and applying them in the case (or wherever you like):
- Identifying an HTML element
- Identifying the element’s Box Model properties and changing Those in Live-Edit (HOWEVER I would not worry about ‘persistent authoring’)
- Understanding the ‘Styles’ vs. ‘Computed’ styles in the Elements menu, and how to live-edit a given CSS attribute
- Targeting the correct line/area in the correct CSS file and updating it on your live site/asset
