CMPE 280 Web UI Design and Development February

CMPE 280 Web UI Design and Development February 6 Class Meeting Department of Computer Engineering San Jose State University Spring 2020 Instructor: Ron Mak www. cs. sjsu. edu/~mak 1

HTML and CSS o HTML n n n o content organization semantics Cascading Style Sheet (CSS) n n layout formatting Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 2

Formatting Text o Format text by setting font properties: n n n n n family style weight size line height color spacing and indentation alignment transformations and variants Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 3

Font Family o Example: body { font-family: Geneva; } h 1, h 2 { font-family: "Gill Sans"; } o Surround multi-word names with quotes. o Generic font families: n n n serif sans-serif cursive Computer Engineering Dept. Spring 2020: February 6 n n fantasy monospace CMPE 280: Web UI Design and Development © R. Mak 4

Font Family, cont’d o Specify alternate font families. n n In case a browser lacks a font family. Example: h 1 { font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; } o Default font families shared by Microsoft Windows and Mac. OS X: n n n Arial Comic Sans MS Courier New Computer Engineering Dept. Spring 2020: February 6 n n New Times Roman Verdana CMPE 280: Web UI Design and Development © R. Mak 5

Font Style o Font styles are normal, italic, or oblique (faux italic). n n Not all font families have true italic. Example: h 1: { font-style: oblique; } p: { font-style: italic; } Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 6

Font Weight o Font weights are normal, bolder, or lighter. n Example: . special { font-weight: bold; } n Also: 100, 200, 300, 400, 500, 600, 700, 800, or 900 Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 7

Font Size o Default sizes: n n n xx-small n n n medium large x-large n n n xx-large smaller larger o Specify font size with absolute or relative units. o Absolute units in pixels (px) or points (pt) n Example: h 1 { font-size: 35 px; } n Use points for printing. There is no space between the number and px or pt. Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 8

Font Size, cont’d o Relative units n By percentage of the default size (usually 16 px). By ratio of the parent element’s font size (em units). n Examples: n In traditional typesetting, an em unit is the width of the letter m. body { font-size: 100%; /* 16 px */ Establish the baseline size. } h 1 { font-size: 2. 1875 em; /* 35 px/16 px */ } h 2 { font-size: 1. 75 em; /* 28 px/16 px */ } Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 9

Line Height o Specify line height: n as a multiple of the font size as a percentage of the font size in em, px, or pt units n Example: n n p { line-height: 1. 65; /* 15 px x 1. 65 = 24. 75 px */ } Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 10

Points, Pixels, and Em o Conversion chart for points, pixels, and em: n https: //websemantics. uk/articles/font-size-conversion/ Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 11

Font Variants o Font variants are normal or small-caps. n Example: h 2 { font-variant: small-caps; } Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 12

Combining Font Values o Use the font property to combine font values. n n o Size, families, weight, variant, line height List the values separated by blanks. You must specify the font size and font families. n n n Size before families, only a blank after the size. Specify line height immediately after the font size, separated by a slash. Example: p { font: italic small-caps bold. 85 em/1. 2 Palatino, serif; } Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 13

Line and Letter Spacing Specify line spacing and letter spacing with absolute px units or relative em units. o n Example: h 2 { font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-weight: normal; letter-spacing: 7 px } Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 14

Text Alignment o Text alignments are left, right, center, or justify. n Example: h 1 { text-align: center; } p { text-align: justify; }. intro. subhead { text-align: center; } Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 15

Text Indentation o Specify paragraph indentation with absolute px units or relative em units. n Example: p { text-indent: 2 em; } Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 16

Text Transformation o Text transformations are none, capitalize, uppercase, or lowercase. n Example: h 1 { text-transform: uppercase; } Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 17

Controlling the Display of Elements o Each HTML element has a default display property setting. n o Example: Paragraphs are display: block and emphasized text are display: inline CSS rules can override the default display. n Example: em { display: block; } The following is some emphasized text that displays as a block. Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 18

The Box Model o CSS treats every HTML element as if it were enclosed in an invisible box: n n n o content width content height padding borders margins Use absolute or relative units, or auto. Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 19

Borders o Set the values of each border individually: n n o border-top, border-bottom, border-left, border-right Or just border to set the values of all four borders. . about img { border: 5 px solid gray; } Also: n n n border-color border-width border-style o . nav-main { border-top: 5 px solid red; border-bottom: 1 px solid red; } none, dotted, dashed, solid, double, groove, ridge, inset, outset Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 20

Padding o Set the size of the padding on each side: n padding-top, padding-bottom, padding-left, padding-right n Padding color is the background-color. Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 21

Padding, cont’d o Also: . about { background-color: white; padding: . 3 em. 6 em. 3 em; } n padding: size Applies to all sides n padding: sizetb, sizerl sizetb applies to the top and bottom and sizerl applies to the right and left n padding: sizet, sizerl, sizeb sizet applies to the top, sizeb applies to the bottom, and sizerl applies to the right and left n padding: sizet, sizer, sizeb, sizel in clockwise order Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 22

Margins o Set margin sizes (similar to padding sizes): n o margin-top, margin-bottom, margin-left, margin-right Also: n margin: Computer Engineering Dept. Spring 2020: February 6 h 1: { margin-bottom: . 4 em; } sizetb, sizerl sizet, sizerl, sizeb sizet, sizer, sizeb, sizel CMPE 280: Web UI Design and Development © R. Mak 23

HTML and CSS o HTML n n n o content organization semantics Cascading Style Sheet (CSS) n n layout formatting Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 24

Floating Elements o An element can float among text or other elements by making the other content flow around it. n n n float: left Put the element to the left of the other content. float: right float: none . post-photo { float: left; margin-bottom: 2 px; margin-right: 22 px; } Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 25

Relative Positioning o Position an element relative to its natural location. n n o position: relative; Add any top, right, bottom, or left offsets. Relative positioning does not affect any surrounding elements. Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 26

Relative Positioning, cont’d n Example: <h 1>Relative Positioning</h 1> <p>When you position an element relatively, you <span class="example">position it</span> relative to its normal location. </p>. example { position: relative; top: 35 px; left: 100 px; } Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 27

Absolute Positioning o Position an element absolutely by specifying its position with respect to the page body or to its nearest positioned ancestor element. n n o position: absolute Add any top, right, bottom, or left positions in px, em, or percentage of the ancestor. If elements overlap, specify a z-index value. n n Elements with higher z-index values overlap elements with lower values. Compare the z-index values only for elements in the same container. Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 28

Vertical Alignment o Use vertical-align to align an element: n n baseline Align the element’s baseline with its parent’s baseline. middle Align the middle of the element slightly above the parent’s baseline. sub Position the element as a subscript of the parent’s baseline. super Position the element as a superscript of the parent’s baseline. Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 29

HTML Container Elements o Semantic containers n n n n o <header> … </header> <footer> … </footer> <main> … </main> <aside> … </aside> <nav> … </nav> <article> … </article> <section> … </section> Generic containers n n <div> … </div> <span> … </span> Computer Engineering Dept. Spring 2020: February 6 Have meanings relative to page organization. No inherent meanings. Used to apply styling. Contain a block of content. Contain a word or phrase. CMPE 280: Web UI Design and Development © R. Mak 30

ARIA Landmark Roles o WAI-ARIA n Web Accessibility Initiative Accessible Rich Internet Application o Add ARIA roles to HTML elements to guide HTML screen readers for the visually impaired. o Example: n n <nav role="navigation"> … </nav> Encloses a major block of navigation links. Tip to screen readers. Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 31

Page with No Styles http: //www. htmlcssvqs. com/8 ed/exa mples/chapter-11/no-styles. html Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 32

Styled Page Header Main http: //www. htmlcssvqs. com/8 ed/exampl es/chapter-11/finished-page. html Sidebar Footer Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 33

Assignment #2. Prototype o Use HTML, CSS, Node. js, and Express to create a prototype of your project. n n n o Use a prototype to elicit more accurate requirements from your customer. Do not use any client-side toolkits such as React. Not expected to be a polished application. You do not need to use any actual data on the server side. n You can simply use hardcoded data. Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 34

Assignment #2, cont’d o You can prototype one of the three use cases that you described for Assignment #1, or you can do something completely different. n n o Show more than logging in and logging out. Demonstrate a key functionality. Use Express on the server side. n n n Maintain the model-view-controller architecture. Use GET and POST routing. You can use Jade or another page engine. Computer Engineering Dept. Spring 2020: February 6 CMPE 280: Web UI Design and Development © R. Mak 35