Problem

JavaJam Coffee House Case StudyIn this chapter's case study you will use the existing...

JavaJam Coffee House Case Study

In this chapter's case study you will use the existing JavaJam (Chapter 7) website as a starting point to create a new version of the website that utilizes media queries to Configure display for mobile devices. Figure displays wireframes for desktop browser, typical tablet screen, and typical smartphone screen display. When you have finished, the website will look the same in desktop browsers (see Figures 7.39 and 8.36). The mobile displays should be similar to the screen captures in Figure.

You have five tasks in this case study:

1. Create a new folder for the JavaJam Coffee House website.

2. Edit the javajam.css external style sheet to include media queries and styles needed for appropriate desktop, tablet, and smartphone display.

3. Edit the Home page (index.html).

4. Edit the Menu page (menu.html).

5. Edit the Music page (music.html).

Task 1: Create a folder called ch8javajam to contain your JavaJam Coffee House website files. Copy the files from the Chapter 7 Case Study ch7javajam folder. Copy the file javalogomobile.gif from the student files chapter8/starters folder into the ch8javajam folder.

Task 2: Configure the CSS. Launch a text editor and open the javajam.css external style sheet file.

a. Configure Support of HTML5. Add the following style rule to Configure most older browsers to render HTML5 block display elements as expected. header, hgroup, nav, footer, figure, figcaption, aside, section, article { display: block; }

b. Configure Tablet Display.

1. Code a media query to select for typical tablet device viewport size.

@media only screen and (max-width: 768px) {}

2. Configure the following new styles within the media query:

a. The body element selector. Set margin to 0.

b. The wrapper id selector. Set minimum width to 0 and width to auto.

c. The h1 element selector. Set margin to 0 and Configure javalogomobile.gif as the background image.

d. The content id selector. Set left margin to 0.

e. The nav element selector. Eliminate float (Hint: Use float: none;), set the width to auto, and Configure 0 padding.

f. Navigation unordered list. Use a descendant selector to Configure ul elements within the navigation area to display centered text.

g. Navigation list items. Use a descendant selector to Configure li elements within the navigation area with inline display, 0 top and bottom padding, and 0.75em left and right padding.

h. The section element selector. Configure section elements to have 0 padding.

i. Content unordered list. Use a descendant selector to Configure ul elements within the content id to clear float and have 1em of top padding.

c. Configure Smartphone Display.

1. Code a media query to select for typical smartphone device viewport size.

@media only screen and (max-width: 480px) {}

2. Configure the following new styles within the media query:

a. The body element selector. Set margin to 0.

b. The wrapper id selector. Set the width to auto, minimum width to 0, and margin to 0.

c. The h1 element selector. Set margin to 0 and Configure javalogomobile.gif as the background image.

d. The content id selector. Set top and bottom padding to 0.1em, left and right padding to 1em, margin to 0, and font size to 90%.

e. Navigation unordered list. Use a descendant selector to Configure ul elements within the navigation area with 0 padding.

f. Navigation list items. Use a descendant selector to Configure li elements within the navigation area with inline-block display, 5em width, 120% font size, centered text, a 2px box shadow (use #330000), #F5F5DC background color, 1% margin, and 2.5% padding.

g. Navigation hyperlinks. Use a descendant selector to Configure anchor elements within the navigation area with block display. This will provide the user a larger area to tap when selecting a hyperlink.

h. Content images. Use a descendant selector to Configure img elements within the content id to not float, set padding to 0, and set margin to 0.1em.

i. The section element selector. Configure section elements to have 0 padding.

j. Section Images. Use a descendant selector to Configure img elements within a section element to not display.

k. The mobile id. Set display to inline. You'll apply this id when you edit the home page (index.html).

l. The desktop id. Set display to none. You'll apply this id later when you edit the home page (index.html).

d. Configure Desktop Display. Code the following new styles abovethe media queries.

1. The mobile id. Set display to none. You'll apply this id when you edit the home page (index.html).

2. The desktop id. Set display to inline. You'll apply this id later when you edit the home page (index.html).

e. Configure Flexible Images. Configure a new style for the img element selector above the media queries. Set maximum width to 100% and height to auto.

f. Configure Sections. Later in the case study you will rework the music.html page to show each announcement in a section element instead of within a div element. Let's get the CSS Configured now. Review the CSS and locate the #content div selector. Replace #content div with section. Change the left and right padding to 20%.

Save your javajam.css file. Use the CSS validator (http://jigsaw.w3.org/css-validator) to check your syntax. Correct and retest if necessary.

Task 3: Edit the Home Page. Launch a text editor and open the index.html file. Edit the code as follows:

a. Configure a viewport meta tag in the head section that Configures the width to the device-width and sets the initial-scale to 1.0.

b. Add statements needed to the head section to apply the HTML5 shim so that older browsers will successfully display the HTML5 elements.

c. The home page displays a phone number in the contact information area. Wouldn't it be handy if a person using a smartphone could click on the phone number to call the coffee house? You can make that happen by using tel: in a hyperlink. Configure a hyperlink assigned to an id named mobile that contains the phone number as shown below:

888-555-5555

But wait a minute, a telephone link could confuse those visiting the site with a desktop browser. Code another phone number directly after the hyperlink. Code a span element assigned to an id named desktop around the phone number as shown here:

888-555-5555

d. Remove the height and width attributes from the img tag.

Save the index.html file. Remember that validating your HTML can help you find syntax errors. Validate and correct this page before you continue. Display your page in a browser. While your home page will look unchanged in maximized desktop browsers (see Figure 7.39), as you resize and reduce the browser viewport dimensions, the displays should be similar to the screen captures in Figure.

Task 4: Edit the Menu Page. Launch a text editor and open the menu.html file. Edit the code as follows:

a. Configure a viewport meta tag in the head section that Configures the width to the device-width and sets the initial-scale to 1.0.

b. Add statements needed to the head section to apply the HTML5 shim so that older browsers will successfully display the HTML5 elements.

Save the menu.html file. Remember that validating your HTML can help you find syntax errors. Validate and correct this page before you continue. Display your page in a browser. Resize the browser window to test the media queries. Compare your work with Figure, which shows screen captures of the menu page.

Task 5: Edit the Music Page. Launch a text editor and open the music.html file. Edit the code as follows:

a. Configure a viewport meta tag in the head section that Configures the width to the device-width and sets the initial-scale to 1.0.

b. Add statements needed to the head section to apply the HTML5 Shim so that older browsers will successfully display the HTML5 elements.

c. Remove the height and width attributes from the img tags.

d. Each performance announcement is contained within a div element. A section element is more descriptive of this type of content than the generic div element. Replace the div tags that surround each performance announcement with section tags.

Figure JavaJam wireframes.