BTI220 notes – Thu Aug 1

You will be introduced to HTML Forms today. Then, you will learn to create an ‘image gallery’.

.

Code samples for today

Code samples can be downloaded from these links:

August 1 – HTML Forms

August 1 – Image Galleries

Inside the zip files, you will find a number of code examples.

.

Introduction to HTML Forms

MDN HTML Forms Guide

.

An HTML Form gathers user input. The user input can be processed by JavaScript in the document, or sent to a web app.

A form is defined by a <form> element, which is a container. It contains text and markup. The markup can include the elements that you’ve worked with already. However, a form needs form-specific elements to gather a user’s input – in fact, one of the most-used form-specific elements is the <input> element.

From MDN: “Other elements that are used for creating forms: <button><datalist><fieldset><input>,<keygen><label><legend><meter><optgroup><option>,<output><progress><select><textarea>.”

Also from MDN: The native form widgets (very comprehensive)

A user’s input can be processed as it’s entered, using JavaScript event-handling code, and watching for events like onchange, onkeypress, onkeyup, etc. (In addition, your JavaScript code can call a web service to get more data.)

It can also be processed when the user clicks a button. As noted above, the processing can happen in the browser, or at a web app. Or both.

There are several ‘button’ choices. Most are <input> elements:

  • <input type=button>
  • <input type=submit>
  • <input type=image>
  • <input type=reset>
  • <button>

As you get experience with HTML Forms, you will typically use ‘type=button’ for in-browser (JavaScript) processing, and ‘type=submit’ for web app processing.

.

Form code for in-browser processing

The following can be used as a template for a form that has in-browser processing:

<!-- somewhere you will have a JavaScript function -->
<form>
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input onclick="login();" type="button" value="Login" />
</form>

The important code is the ‘onclick’ attribute (line 5), which identifies the event to be handled, and the name of the JavaScript function that will handle the event.

.

Form code for web app processing

The following can be used as a template for a form that has web app processing:

<!-- the user's input is sent to a web app -->
<form action="http://host.domain.com/path/to/endpoint/" method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" value="Login" />
</form>

The important code is the form’s start tag (the method and action attributes) (line 2), and the ‘type=submit’ attribute (line 5).

.

What kind of data can be entered by a user?

  • any data types
  • HTTP is a text protocol, so numbers are represented as strings
  • digital content (file upload) – e.g. a photo – is encoded

For in-browser (JavaScript) processing, how can I get the data?

  • use querySelector, querySelectorAll, or a getElement* method

For web apps, how is the data packaged?

  • key-value pairs, in the request body
  • e.g. name1=value1&name2=value2
  • data is URL-encoded

A little more coverage of HTTP, specifically GET and POST, and the fact that HTTP is a text-oriented protocol

MDN article – Sending and retrieving form data

.

W3C specification – Forms

Default content type: application/x-www-form-urlencoded

If you have digital content to send, use this content type: multipart/form-data

.

Form post testers

http://formpost.azurewebsites.net/home/test (your professor’s web site)

.

Others:

http://www.htmlcodetutorial.com/cgi-bin/mycgi.pl

http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi

Info about the above… http://www.cs.tut.fi/~jkorpela/forms/testing.html (handles multipart/form-data)

(echo raw data… http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echoraw.cgi)

.

UX and styling

Follow the advice in the MDN HTML Forms Guide

MDN – Styling HTML Forms

.

Image galleries

It is common to create an “image gallery” page. You will learn to program two kinds of page layouts for an image gallery.

The first gallery is “stacked”. Each medium-sized image is in a bordered box, with its caption beside the image.

gallery-stacked

The second gallery is a “grid”. Each small/thumbnail image is in a bordered box, and its caption appears when you hover the mouse over the image.

gallery-grid

For both galleries, you can click on an image to view it full-size (well, almost full-size; their width has been limited to 1000px).

gallery-popup

.

Coding features for both galleries

An image is in a container. That’s good design. It enables you to process the image, and its caption (and anything else you may put in there) as a unit. All of these image containers are then placed inside another div id=container.

There are two more div elements on the page:

<div id="popup">
  <!-- large version of the image -->
  <img class="image" id="popupImage" alt="Loading..." src="nothing.jpg" />
  <div class="close" onclick="imageClose();">&nbsp;X&nbsp;</div>
</div>

<div id="popupbg"></div>

Style rules affect the appearance of the full-size image when it “pops up” after a gallery image is clicked. They’re covered in detail in the next section.

The JavaScript functions that show and hide the full-size image are common to both galleries.

function imageView(bigImage) {

  // on the full-size image, set the 'src' attribute that's passed in
  // the '#popupImage' element is an img
  document.querySelector('#popupImage').setAttribute('src', bigImage);

  // show the full-size image
  // the '#popup' element is a div
  document.querySelector('#popup').style.display = 'block';

  // show the faded background image
  // the '#popupbg' element is a div
  document.querySelector('#popupbg').style.visibility = 'visible';
}

function imageClose() {
  // hide the full-size image
  document.querySelector('#popup').style.display = 'none';
  // hide the faded background image
  document.querySelector('#popupbg').style.visibility = 'hidden';
}

.

Style rules for the popup full-size image

Here’s a brief explanation of the elements that we need to style:

  • The popup div is not displayed initially, but its other properties are set
  • The image inside the popup div has (for this example) a maximum width setting
  • A ‘close’ button needs to be added to the top-right corner of the popup div
  • A dark (but translucent) background needs to be placed on the page

The style rules are explained in the comments below. Here’s how the popup div works:

#popup {
    display: none;              /* initial setting*/
    position: fixed;            /* absolute? fixed? they have different results... */
    top: 50px;                  /* position from the top edge of the window/viewport */
    left: 50px;                 /* position from the left edge of the window/viewport */
    background-color: white;    /* white background... */
    padding: 20px;              /* ...and padding together create a 'snapshot' appearance */
    border: 1px solid black;    /* nice crisp border */
    z-index: 1000;              /* this is a big number, we want it on top of the other content */
}

.

For the image that’s inside the popup, here’s the ruleset:

#popup .image {
    max-width: 1000px;          /* limit the width for this code example */
}

.

Next, here’s the ruleset for the ‘close’ button that’s inside the popup div. It needs many rules to improve its appearance:

#popup .close {
    position: absolute;         /* we must choose our own position for the 'close' button */
    top: 0;
    right: 0;
    z-index: 1001;              /* put this on top of the popup content/layer */
    font: bold 24px arial, sans-serif;
    color: white;
    background-color: darkred;
    padding: 2px;
    border: 2px solid white;
    border-radius: 10px;
    margin: 2px;
    cursor: pointer;            /* show the link/click pointer when hovering */
}

.

Finally, the ruleset for the background. This effectively enables the popup image to behave like a modal window. The page’s user is unable to interact with the content ‘underneath’ the popup image.

#popupbg {
    visibility: hidden;         /* initial setting */
    background: rgba(0,0,0,0.5);/* black background, but translucent (opacity) */
    position: fixed;            /* anchor it to the upper-left of the window/viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;               /* layer this just below the popup layer */
}

.

Stacked gallery

To recap, the previous sections have code that’s common to both kinds of galleries.

A stacked gallery, as briefly explained above, needs image containers packaged inside an outer container. Here’s a sample:

<div id=container>

  <div class=imageRow>
    <img src='images/mednatgeo201201.jpg' alt='' onclick='imageView("images/natgeo201201.jpg");'>
    <p>The Matterhorn: Night Clouds #2 -- The Matterhorn, 4478 m, at full moon. (&copy; Nenad Saljic/National Geographic Photo Contest)</p>
  </div>

  <!-- etc. -->

.

The rules for each image ‘row’ are below:

.imageRow {
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}

.imageRow img {
  float: left;        /* float the image to the left of content that follows it */
  cursor: pointer;    /* change the pointer to a link/click style */
}

.imageRow p {
  margin-left: 350px; /* ensure the caption text is to the right of the 300px-wide image*/
}

.imageRow:after {
  content: '';        /* required; can be an empty string */
  display: block;     /* return the flow to use 'block' model */
  clear: both;        /* clear any and all floats */
}

.

Grid gallery

As noted above, this is a “grid” gallery. Each small/thumbnail image is in a bordered box, and its caption appears when you hover the mouse over the image.

Its markup begins with the following:

<div class=imageGrid>

    <figure>
        <img src='images/tnnatgeo201201.jpg' alt='' onclick='imageView("images/natgeo201201.jpg");'>
        <figcaption>The Matterhorn: Night Clouds #2 -- The Matterhorn, 4478 m, at full moon. (&copy; Nenad Saljic/National Geographic Photo Contest)</figcaption>
    </figure>

    <figure>
        <img src='images/tnnatgeo201202.jpg' alt='' onclick='imageView("images/natgeo201202.jpg");'>
        <figcaption>Swimming with a Turtle: After observing this turtle, I swam with him for a few minutes. (&copy; John Peterson/National Geographic Photo Contest)</figcaption>
    </figure>

    <!-- etc. -->

.

The style rules that make it work are as follows.

Note the margin settings for the ‘figcaption’ element – that’s what enables it to appear/disappear:

figure {
    float: left;                /* initial settings */
    height: 175px;
    margin: 1em 2em 0 0;
}

figure img {
    padding: 10px;              /* you've seen these before */
    border: 1px solid black;
    border-radius: 5px;
    margin: 10px;
    cursor: pointer;
}

figure figcaption {             /* rule for the hover/popup caption */
    width: 200px;
    font-size: 0.7em;
    padding: 5px;
    margin-left: -1000em;       /* initially, move it away from the window/viewport */
    margin-top: -20px;
    background-color: #ffa;
    border: 1px solid #ffad33;
    border-radius: 5px;
    position: absolute;         /* absolutely positioned, inside the 'figure' element */
}

figure:hover figcaption {
    margin-left: 50px;          /* when hovered, make the caption appear near the image */
}

.

.

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: