Project 3: Interactive Kiosk

Please download the project brief. The project is tentatively due on November 17, 2014.

HTML5 Boilerplate

We will be basing our projects on the “HTML5 Boilerplate” template, which was refined by the professional web development community to provide a quick-start framework for web development projects. It is available for download from its repository on Github, located at https://github.com/h5bp/html5-boilerplate. (the option to download a zip of the project is in the right column at the bottom)

Please download and unzip the files to a folder on your local machine. Ideally, this folder would be inside the “Public” folder in your Dropbox, as this will allow us to test sites on actual mobile devices easily.

Sample Practice Files

Please download and unzip the Practice site sample.

Please download and unzip the sample code we worked through in class if you need to reference that. I’ll have summary notes up as soon as possible to break down the code into the various steps we followed.

iPad Fullscreen Web App Code

Please add the following in the <head> section of your index.html code:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

…and then save your site to the homescreen of the device you’re using.

Project 2: Blog Branding

Please download the project brief.

Notes on modifying a WordPress theme

Please make sure you have a Dreamweaver “Site” set up for this project, with your Dropbox “themes” folder to be able to access the style.css

You can click on an element on screen and use “Inspect Element” in the popup context menu to view the CSS related to that element in Web Inspector

Note that the number next to “style.css” on the top right of a group of CSS properties in Web Inspector indicates the line number of where that style can be found in your theme style.css file. For example, if you inspect the title of this class site, you get this:

In the style for “#logo a” (the <a> link tag inside #logo), you can see that it says the block of code is found on line 274 of style.css (ignore the ?ver=2.4.0 in the file name). If we go to line 274 of the style.css file for this site, we see this code:


#logo #site-title a {
color:#fff;
font-size:44px;
text-decoration:none;
}

…so we could, for example, change the colour of the logo by altering the color: property on this line.

CSS Image Replacement

Sometimes, we want to replace text with a graphical image using CSS. One common use of this technique is to turn the title of a site into the site’s brand logo.

The steps you need to follow to complete this are:

  1. Use the Web Inspector (right click, “inspect element”) to find the element you want to restyle
  2. Find (as in the tutorial above) the relevant CSS rule for the element in style.css and edit it via Dreamweaver. You will need the following code:

    background-image:url(images/yourimage.png); /* the 'images' part should be the folder your image is in */
    background-repeat: no-repeat; /* keeps the background from tiling */
    display: block; /* sets the element to block, allows width/height */
    width: 306px; /* set the width to the same width as your image */
    height: 66px; /* set the height to the same height as your image */
    overflow: hidden; /* hide text outside the bounds of the box around this element */
    white-space: nowrap; /* force all text to stay on one line without wrapping */
    text-indent: 100%; /* indents the first line of text to be 100% to the left, ie. just off the edge of the box */
  3. Save your style.css and refresh the site, hopefully you see your image instead of the text!

Links to external resources for this project

How to Customize a WordPress Theme — The basic process for customizing a WordPress theme is covered nicely in this article. Please note that we didn’t cover using the “child theme” technique mentioned in the article.

A Web Inspector Tutorial for Front-End Developers — Not specifically for WordPress, but a good review of the basics of how to use Chrome’s Web Inspector to locate the styles you want to modify.

Class List

Amy
Camilla
Claire
Emma
Janessa
Jenna
Lindsay
Megan
Michelle L
Pavel
Sam
Vincci
Chris
Geoff
Jeff
Karen
Lotta
Melissa
Michelle
Rachelle
Sara
Yvonne

Project 1: Handheld Interactive Guidebook

Project outline

You are to research and build a guidebook/information site, sized for a handheld mobile device, to demonstrate your understanding of HTML/CSS. The site content can be of your choosing, but if you have previously taken GDMA 2240 – Social Contexts For Interactive Media, you are encouraged to use this project to continue to explore the work you did in that course. Alternatively, you may choose to make an interactive mobile guidebook for an institution such as Kwantlen Polytechnic, a previous school you have attended, or a company based on one you have work experience with.

We will be building our projects based on the following boilerplate code: https://github.com/h5bp/mobile-boilerplate

Important Update: Please download the updated project brief below. One of the evaluation criteria has changed from the original version uploaded on September 8, 2014.

Download a PDF of the full project brief

Links to external resources for this project

The Curious Case of iPhone 6 1080p Display

Supporting Different Screens in Web Apps (Android Developer Docs)

CSS and HTML review

CSS Refresher slide presentation

HTML5 Boilerplate

We will be basing our projects on the “HTML5 Boilerplate” template, which was refined by the professional web development community to provide a quick-start framework for web development projects. It is available for download from its repository on Github, located at https://github.com/h5bp/html5-boilerplate. (the option to download a zip of the project is in the right column at the bottom)

Please download and unzip the files to a folder on your local machine. Ideally, this folder would be inside the “Public” folder in your Dropbox, as this will allow us to test sites on actual mobile devices easily.

Classwork Example Files

Here are two zips with the different versions of the sample layouts we covered in class.

  1. Simple navigation layout
  2. Absolute positioned and rotated buttons