3/30/21

BIM222 Internet Programming

Week 5 – HTML Semantics, HTML Multimedia,

HTML Forms

Outline
§ HTML Blocks § HTML Forms
§ Block-Level Elements § HTML Form Basics
§ Inline Elements § More on Forms
§ Handling File Upload
§ HTML 5 Semantics § Some New HTML5 Input Elements
§ What are semantic elements? § Grouping
§ New semantic elements in HTML5
§ HTML vs. HTML5
§ Inspect the DOM with Chrome
§ HTML Multimedia § Tips: Layout & Design
§ Images
§ Audio
§ Video

1
 3/30/21

HTML Blocks
§ Every HTML element has a default display value depending on what type
of element it is
§ The two display values are:
§ Block-Level Elements: A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it can)
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav>
<noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
§ Inline Elements: An inline element does not start on a new line and only takes up as
much width as necessary
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn>
<em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp>
<script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

https://www.w3schools.com/html/html_blocks.asp

HTML Content Models week5-sampleCodes/div-and-span_ex1.html

week5-sampleCodes/div-and-span_ex2.html

Block-Level Elements Inline Elements

§ Render to begin on a new line § Render on the same line (by
(by default) default)
§ May contain inline or other § May only contain other inline
block-level elements elements
§ Roughly Flow Content § Roughly Phrasing Content
(HTML5 category) (HTML5 category)
Example: Divs & Spans

The <div> element is often used as a The <span> element is often used as
container for other HTML elements a container for some text

ü HTML5 replaces these definitions with more complex set of content categories -
Officially not part of HTML5, but still used
ü However, this distinction remains practical because it aligns well with existing CSS rules

2
 3/30/21

Outline
§ HTML Blocks § HTML Forms
§ Block-Level Elements § HTML Form Basics
§ Inline Elements § More on Forms
§ Handling File Upload
§ HTML 5 Semantics § Some New HTML5 Input Elements
§ What are semantic elements? § Grouping
§ New semantic elements in HTML5
§ HTML vs. HTML5
§ Inspect the DOM with Chrome
§ HTML Multimedia § Tips: Layout & Design
§ Images
§ Audio
§ Video

What are Semantic Elements?

§ Semantics is the study of the meanings of words and phrases in a
language
§ Semantic elements = elements with a meaning

§ A semantic element clearly describes its meaning to both the browser

and the developer
§ Examples of non-semantic elements: <div> and <span>
- Tells nothing about its content

§ Examples of semantic elements: <form>, <table>, <article>, and <section>

- Clearly defines its content

3
 3/30/21

Semantic Elements in HTML5

§ Websites often display content in multiple columns (like a
magazine or newspaper)
§ To indicate navigation, header, and footer many web sites
contain HTML code like:
<div id="nav">, <div class="header">, <div id="footer">
§ HTML5 offers new semantic elements to define different
parts of a web page:

o <article> o <footer> o <section>

o <aside> o <header> o <summary>
o <details> o <main> o <time>
o <figcaption> o <mark>
o <figure> o <nav>

Tag Description
Defines an article. The <article> element specifies independent, self-contained
content. An article should make sense on its own, and it should be possible to
<article> distribute it independently from the rest of the web site.
Examples of where an <article> element can be used: Forum post, blog post,
newspaper article
Defines some content aside from the content it is placed in (like a sidebar).
<aside> The <aside> content should be indirectly related to the surrounding content.
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
Specifies self-contained content, like illustrations, diagrams, photos, code
<figure> listings, etc.
Defines a footer for a document or section. A <footer> element typically
contains:
<footer>
authorship information, copyright information, contact information, sitemap,
back to top links, related documents

4
 3/30/21

Tag Description
Specifies a header for a document or section. The <header> element represents
a container for introductory content or a set of navigational links.
<header>
A <header> element typically contains: one or more heading elements, logo or
icon, authorship information
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines a set of navigation links
Defines a section in a document. “A section is a thematic grouping of content,
<section> typically with a heading.” A web page could normally be split into sections for
introduction, content, and contact information.
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

https://www.w3schools.com/html/html5_semantic_elements.asp

Why Semantic Elements?

§ With HTML4, developers used their own id/class names to style
elements: header, top, bottom, footer, menu, navigation, main,
container, content, article, sidebar, topnav, etc.
§ This made it impossible for search engines to identify the correct web
page content
§ With the new HTML5 elements (<header> <footer> <nav> <section>
<article>), this become easier
§ According to the W3C, a Semantic Web: “Allows data to be shared
and reused across applications, enterprises, and communities.”

5
 3/30/21

HTML4 vs. HTML5

Outline
§ HTML Blocks § HTML Forms
§ Block-Level Elements § HTML Form Basics
§ Inline Elements § More on Forms
§ Handling File Upload
§ HTML 5 Semantics § Some New HTML5 Input Elements
§ What are semantic elements? § Grouping
§ New semantic elements in HTML5
§ HTML vs. HTML5
§ Inspect the DOM with Chrome
§ HTML Multimedia § Tips: Layout & Design
§ Images
§ Audio
§ Video

6
 3/30/21

What is Multimedia?
§ Multimedia on the web is sound, music, videos, movies, and animations
§ Multimedia comes in many different formats
§ It can be almost anything you can hear or see, like images, music, sound, videos,
records, films, animations, and more
§ Web pages often contain multimedia elements of different types and formats
§ Browser Support
§ The first web browsers had support for text only, limited to a single font in a single
color
§ Later came browsers with support for colors, fonts, images, and multimedia!
§ Multimedia Formats
§ Multimedia elements (like audio or video) are stored in media files
§ The most common way to discover the type of a file, is to look at the file extension
§ Multimedia files have formats and different extensions like:
.wav, .mp3, .mp4, .mpg, .wmv, and .avi

HTML Multimedia: Images

§ HTML Image Elements & Attributes
<img> src attribute to define the URL of the image
alt attribute to define an alternative text for an image
width attribute
height attribute style attribute à to define the size
<map> element to define an image-map
<area> element to define a clickable area inside an image-map

7
 3/30/21

HTML Multimedia: Images

§ Use img to bring an image into the web page

§ Image with alt attribute

§ Defines an alternative text for an image, especially useful if the
image cannot be loaded for some reason

Images – Controlling the Size

§ Controlling the size
§ Add width=“number” and height=“number”

§ Add style=“width:numberpx;height:numberpx;”

8
 3/30/21

Notes on Images
§ In HTML 4.01, the width could be defined in pixels or in % of the
containing element
§ In HTML5, the value must be in pixels
§ Always specify the width and height of an image!
§ If width and height are not specified, the page might flicker while the image loads
§ Width and Height, or Style?
§ Both the width, height, and style attributes are valid in HTML5
§ However using the style attribute is suggested
§ It prevents styles sheets from changing the size of images

Images – Using an Image as a Link

§ To use an image as a link, simply nest the <img> tag inside the <a> tag

9
 3/30/21

HTML <figure> and <figcaption> Tags

§ Use a <figure> element to mark up a photo in a document
§ The <figure> element also contains a caption - <figcaption>

The Map and Area Elements & Image Maps

§ An image-map is an image with clickable areas
§ Use the <map> tag to define an image-map
§ The areas are defined with one or more <area> tags
§ The name attribute of the <map> tag is associated with the <img>'s
usemap attribute and creates a relationship between the image and
the map
§ The <map> tag contains a number of <area> tags, that defines the
clickable areas in the image-map
<img src=”...” alt=“…” usemap=“#mypic”> Shape
<map name=“mypic”> • rect
• circle
<area shape=“rect” coords=“x1,y1,x2,y2” href=“…” alt=“...”> • poly
<area shape=“rect” coords=“x2,y1,x3,y2” href=“…” alt=“...”> • default
</map>
https://www.w3schools.com/html/html_images_imagemap.asp

10
 3/30/21

The Map and Area

Elements & Image Maps

§ Example:

HTML Multimedia: Audio

§ Before HTML5, audio files could only be played in a browser with a plug-in (like flash)
§ The HTML5 <audio> element specifies a standard way to embed audio in a web page

§ HTML Audio Elements & Attributes

§ To play an audio file in HTML, use the <audio> element

<audio> controls attribute

loop attribute
muted attribute

<source> src attribute

type attribute

11
 3/30/21

HTML Multimedia: Audio – Handling Sound

§ How it works?
§ The controls attribute adds audio controls, like play, pause, and volume
§ The <source> element allows you to specify alternative audio files which the
browser may choose from
§ The browser will use the first recognized format
§ The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element

HTML Multimedia: Audio – Handling Sound

§ In HTML5, there are 3 supported audio formats: MP3, WAV, and OGG
§ The browser support for the different formats is

Browser MP3 WAV OGG

Edge/IE Yes Yes* Yes*
Chrome Yes Yes Yes
Firefox Yes Yes Yes
Safari Yes Yes No
Opera Yes Yes Yes
*From Edge 79

§ The type attribute specifies the media type File Format Media Type
§ type=“audio/mpeg”, type=“audio/ogg”, type=“audio/wav” MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav

12
 3/30/21

HTML Multimedia: Audio – Looping Sound

§ Add loop to repeat the sound indefinitely with the loop attribute
§ A boolean attribute - when present, it specifies that the audio will start over
again, every time it is finished

§ muted attribute specifies that the audio output should be muted

HTML Multimedia: Audio – Sound in Older

Browsers
§ In general, for sound it’s wise to use MP3 format sound
§ This is supposed to work in all modern browsers
§ Older browsers can’t handle newer HTML tags
§ To be friendly, we can warn the user
<some-new-html-tag>
<p>Sorry, your browser can’t handle some-new-html-tag </p>
</some-new-html-tag>
§ An older browser ignores <some-newhtml--tag> because it doesn’t understand it,
but it does understand <p> so it correctly displays the paragraph
§ A newer browser understands everything, but deliberately ignores the paragraph

13
 3/30/21

HTML Multimedia: Video

§ Before HTML5, a video could only be played in a browser with a plug-in
(like flash)
§ The HTML5 <video> element specifies a standard way to embed a video
in a web page
§ Handling video is very similar to handling audio

<video> autoplay attribute

controls attribute
loop attribute

<source> src attribute

type attribute

HTML Multimedia: Video – Adding a Video

§ How it works?
§ The controls attribute adds video controls, like play, pause, and volume
§ The <source> element allows you to specify alternative video files which the
browser may choose from
§ The browser will use the first recognized format
§ The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element

14
 3/30/21

HTML Multimedia: Video – Adding a Video

§ To start a video automatically use the autoplay attribute
§ width and height attributes can be included
§ It is a good idea to always include width and height attributes
§ If height and width are not set, the page might flicker while the video loads

HTML Multimedia: Video Formats

§ In HTML5, there are 3 supported audio formats: MP4, WebM, and OGG
§ The browser support for the different formats is

Browser MP4 WebM OGG

Edge Yes Yes Yes
Chrome Yes Yes Yes
Firefox Yes Yes Yes
Safari Yes Yes No
Opera Yes Yes Yes
*From Edge 79

§ The type attribute specifies the media type File Format Media Type
§ type=“video/mp4”, type=“video/ogg”, type=“video/webm” MP4 video/mp4
OGG video/ogg
WebM video/webm

15
 3/30/21

HTML YouTube Videos

§ You might have to convert your videos to different formats to make
them play in all browsers
§ Converting videos to different formats can be difficult and time-
consuming
§ An easier solution is to let YouTube play the videos in your web page
§ YouTube Video Id
§ YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video
§ You can use this id, and refer to your video in the HTML code

HTML YouTube Videos

How to Play a YouTube Video in HTML

To play your video on a web page, do the following:

§ Upload the video to YouTube
§ Take a note of the video id
§ Define an <iframe> element in your web page
§ Let the src attribute point to the video URL
§ Use the width and height attributes to specify the dimension of the player
§ Add any other parameters to the URL (autoplay, controls, loop, etc.)

16
 3/30/21

HTML YouTube Videos

§ Define an <iframe> element in your web page
§ An iframe is used to display a web page within a web page

§ YouTube – Autoplay, Muted, Loop

§ add simple parameters to your YouTube URL
§ src=“https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1”
§ src=“https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1”
§ src=“https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1”
§ src=“https://www.youtube.com/embed/tgbNymZ7vqY?controls=1”

Outline
§ HTML Blocks § HTML Forms
§ Block-Level Elements § HTML Form Basics
§ Inline Elements § More on Forms
§ Handling File Upload
§ HTML 5 Semantics § Some New HTML5 Input Elements
§ What are semantic elements? § Grouping
§ New semantic elements in HTML5
§ HTML vs. HTML5
§ Inspect the DOM with Chrome
§ HTML Multimedia § Tips: Layout & Design
§ Images
§ Audio
§ Video

17
 3/30/21

HTML Forms
§ Forms are a great way to let you give people
the opportunity to send you feedback
§ Forms let us send additional information
§ Forms are used to collect user input, or pass
data
§ How they can do that?
§ They let us put in different type of input
elements, i.e. strings, numbers, files, etc.
§ Forms must have server with them
§ The user input is most often sent to a server
for processing

HTML Forms
§ Forms add a new layer to the Request-Response Cycle

Can you send me

index.html
name
password
1:request

Client Network Server

2:response
(Internet)
(Browser) (Web4Server)
Server send back
Forms lets us send that .html file
additional information .css file
pictures

18
 3/30/21

Web Development
§ Front-end
§ What happens on the browser/client-side
§ How we want things to look on your laptop, on your phone, on your tablet
§ We do this using HTML, CSS, JavaScript

§ Back-end
§ What the server is handling
§ Python, Ruby, PHP, Perl, Java

HTML Forms
§ The HTML <form> element defines a form that is used to collect user
inputs

§ An HTML form contains form elements à container for different

types of input elements, like text fields, checkboxes, radio buttons,
submit buttons, and more

19
 3/30/21

HTML Form Basics – Elements & Attributes

<form> action attribute
method attribute
target attribute

<textarea>
form
elements <input type=“submit”>

Basic Form Structure

… form elements go here …

20
 3/30/21

Action Attribute – What is Destination?

action="destination" tells the browser
what program to send the form data to, e.g.:

If the program is on same server as the html file:

If the program is in same directory as the html file:

Method Attribute – GET or POST

§ The method attribute specifies the HTTP method (GET or POST) to be
used when submitting the form data

<form action=“program.php” method=“get”>

or

<form action=“program.php” method=“post”>

21
 3/30/21

GET or POST
method=“get”
get is the default method

Example: search for cats using bing.com

The URL will be http://www.bing.com/search?q=cats . . .

The GET Method

§ For a project you are developing, using get is a good idea
§ Seeing the form data in the URL is useful
§ However, you cannot keep any secrets
§ When GET is used, the submitted form data will be visible in the
page address field
§ GET can only handle a small transmission, e.g. a few hundred
letters/characters

Note: GET must NOT be used when sending sensitive information! GET is
best suited for short, non-sensitive, amounts of data, because it has size
limitations too!

22
 3/30/21

The POST Method

method=“post”

§ The main difference to GET is you cannot see any data

§ The POST method does not display the submitted form data in the
page address field
§ Using POST is better for keeping secrets
§ POST can handle a big transmission, e.g. files

Note: Always use POST if the form data contains sensitive or personal
information. POST has no size limitations, and can be used to send large
amounts of data

HTML <textarea> Tag

§ The <textarea> tag defines a multi-line text input control
§ A text area can hold an unlimited number of characters
§ The size of a text area can be specified by the cols and rows attributes

23
 3/30/21

The <input> Element

§ The <input> element is the most important form element
§ The <input> element can be displayed in several ways, depending on
the type attribute
Type Description
<input type="text"> Defines a one-line text input field
Defines a radio button
<input type="radio">
(for selecting only one of many choices)
Defines a checkbox
<input type=“checkbox”>
(for selecting 0 or more options of a limited number of choices)
Defines a submit button
<input type="submit">
(for submitting the form)
<input type=“password”> Defines a password field

24
 3/30/21

More on Forms:
Form Elements have Different Attributes
§ Form elements can have the following three attributes (most common)
§ type
§ name
§ id

§ Some more attributes

placeholder attribute
value attribute
autofocus attribute
required attribute

Attributes
§ name
§ Almost all input types should have a name attribute associated with it, in order
to be submitted
§ Because that is the information sent to the server
§ If the name attribute is omitted, the data of that input field will not be sent at all
§ Very important for back-end development (on the server side)
§ The name attribute is assigned whatever value is input by the user
§ id
§ Very important for front-end development
§ Used for labels
§ Identifies particular part of the form
§ So, you can make sure that when you click on the label, the right input value will be
highlighted
§ Used by JavaScript

25
 3/30/21

Additional Attributes
§ value
§ A value attribute does different things depending upon which input type it's
matched with
§ button: text inside the button
§ textfield: provides a default value
§ If not changed, will be the value passed to the server

§ placeholder
§ Similar to value, but instead, it provides a suggestion
§ It is not an “official” value, just something you may want to do
§ In telephone numbers or anything where you want people to format things in a certain way
§ In the telephone field à (123) 456-7890
§ It's a suggestion
§ It's letting the person know what kind of input you're expecting
§ As soon as somebody clicks in there, it's gone, so it's not permanent

Useful Attributes
§ required
§ Halts the submit process if any of the required elements are empty
§ Essentially says, hey, you can't submit this form if this particular input field is empty
Ex: If you want someone to put in their password, you need to include required
Else, people can just leave it empty, submit the forms without adding password
§ pattern
§ Only works with input type=text and requires the input have a specific format
§ [0-9]{5} à You can only enter in numbers and there has to be five of them
§ [0-9]{13-16} à You can only enter in numbers, but they need to be between 13 and 16
“Regular
Expressions” § [a-zA-Z]+ à You can only enter characters, which can be in lowercase a to z, or upper
case A to Z. And plus means, there has to be at least one character.
§ Best way is use the pattern attribute with placeholder and supporting text to let people
know the format they need to use

26
 3/30/21

Useful Attributes
§ size=“something” à specifies the size (in characters) for the input field
§ autofocus à sets which field is given focus at the start
§ autocomplete=“on/off” à specifies whether a form or input field
should have autocomplete on or off
§ When autocomplete is on, the browser automatically complete the input values
based on values that the user has entered before
§ min, max, and step can place limits on number inputs
§ min à You can't enter a number that's less than 3
§ max à You can't enter a number over 100
§ step à You can only enter in increments of 5, or increments of 10

Example: Text, Checkbox & Radio

27
 3/30/21

Example: Password

Example: Password – Be Careful!

What is
WRONG?

28
 3/30/21

HTML5 <select> Element – new tag:

Selecting From a List
§ The <select> element
defines a drop-down
list
§ The <option>
elements defines an
option that can be
selected
§ By default, the first
item in the drop-down
list is selected
§ To define a pre-
selected option, add
the selected attribute
to the option

HTML5 <datalist> Element – new tag

§ The <datalist> element specifies

a list of pre-defined options for
an <input> element
§ Users will see a drop-down list of
the pre-defined options as they
input data
§ The list attribute of the <input>
element, must refer to the id
attribute of the <datalist>
element

29
 3/30/21

Example: <label> element

Matches different text on the screen with
the actual input that the user puts in

Example: HTML Form – linking label and input

CHROME

FIREFOX

30
 3/30/21

Handling File Uploads Specifies how the

form-data should be
encoded when
<input type=“file”> submitting it to the
§ Uploading Files server (only for
§ Two parts: the browser and the server method="post")

§ Uploading Files - Form Structure

… other form input elements go here, if any …

File Upload Example

31
 3/30/21

File Upload - The Server Program

§ The file is given to the required server program
§ The server program may do several things
§ It may move the file into another directory
§ It may save the file in a database

Some More New HTML5 Input Elements

Number Input <input type=“number”>
Date Input <input type=“date”>
Time Input <input type=“time”>
Color Picker <input type=“color”>
Slider <input type=“range”>
Email <input type=“email”>
Search <input type=“search”>
Telephone <input type=“tel”>
URL <input type=“url”>

32
 3/30/21

Some New HTML5 Input Elements

§ Input Type Number
§ Defines a numeric input field
§ With min and max attributes restrictions can be set on what numbers are
accepted
§ Input Type Date
§ Used for input fields that should contain a date
§ Depending on browser support, a date picker can show up in the input field
§ With min and max attributes restrictions can be add to dates
§ Input Type Time
§ Allows the user to select a time (no time zone)
§ Depending on browser support, a time picker can show up in the input field

Some New HTML5 Input Elements

§ Input Type Color
§ Used for input fields that should contain a color
§ Depending on browser support, a color picker can show up in the input field
§ Input Type Range
§ Defines a control for entering a number whose exact value is not important
(like a slider control)
§ Default range is 0 to 100.
§ However, restrictions can be set on what numbers are accepted with the min,
max, and step attributes
§ Input Type Email
§ Used for input fields that should contain an e-mail address
§ Depending on browser support, the e-mail address can be automatically
validated when submitted

33
 3/30/21

Some New HTML5 Input Elements

§ Input Type Search
§ Used for search fields (a search field behaves like a regular text field)
§ Input Type Tel
§ Used for input fields that should contain a telephone number
§ The tel type is currently supported only in Safari 8
§ Input Type Url
§ Used for input fields that should contain a URL address
§ Depending on browser support, the url field can be automatically validated
when submitted

Example

34
 3/30/21

Example

Element Grouping

Grouping things <fieldset>

Giving a title <legend>

§ The <fieldset> tag is used to group related elements in a form

§ The <fieldset> tag draws a box around the related elements
§ The <legend> tag defines a caption for the <fieldset> element

35
 3/30/21

An Example Using Form Inputs

Outline
§ HTML Blocks § HTML Forms
§ Block-Level Elements § HTML Form Basics
§ Inline Elements § More on Forms
§ Handling File Upload
§ HTML 5 Semantics § Some New HTML5 Input Elements
§ What are semantic elements? § Grouping
§ New semantic elements in HTML5
§ HTML vs. HTML5
§ Inspect the DOM with Chrome
§ HTML Multimedia § Tips: Layout & Design
§ Images
§ Audio
§ Video

36
 3/30/21

Inspect the DOM with

Google Chrome

Outline
§ HTML Blocks § HTML Forms
§ Block-Level Elements § HTML Form Basics
§ Inline Elements § More on Forms
§ Handling File Upload
§ HTML 5 Semantics § Some New HTML5 Input Elements
§ What are semantic elements? § Grouping
§ New semantic elements in HTML5
§ HTML vs. HTML5
§ Inspect the DOM with Chrome
§ HTML Multimedia § Tips: Layout & Design
§ Images
§ Audio
§ Video

37
 3/30/21

Tips: Layout & Design

The Good, the Bad and the Ugly – in Web Design
§ The Good
http://minimums.com/

§ The Bad

Tips: Layout & Design

§ The Ugly
http://theworldsworstwebsiteever.com/

38
 3/30/21

Tips: Layout

Tips: Layout – Responsive Design

§ Goal is to provide an optimal viewing and interaction
experience across a wide range of devices, from desktop to
mobile phones

§ Adapt the layout to support easy reading and navigation with

a minimum of resizing, panning, and scrolling

§ The design uses fluid, proportion-based grids, flexible

images, and CSS3 media queries
https://www.freshbooks.com/

39
 3/30/21

Wireframing

https://www.lucidchart.com/pages/landing/wireframe_tool?utm_source=google&utm_medium=cpc&utm_campaign=wiref
raming_poland&gclid=CjwKEAiAxKrFBRDm25f60OegtwwSJABgEC-Z3aKB1VU_u4GfGyEmWBumIp90WQqRC--
guseHYg9bNRoC7tzw_wcB

Mockup
§ A storyboard that steps through a mock user experience that details
significant expected behaviors both from a user interface and
application semantic
§ Not just wire frames
§ a walk through
§ wire frames / UI mockups can be included
§ but digs a bit deeper and describes the value proposition for the user
§ Some popular mockup tools
§ https://www.uxpin.com/
§ https://moqups.com/
§ https://balsamiq.com/products/mockups/

40
 3/30/21

Navigational Structure

41