today’s objectives review css selectors web development process review: layout and positioning ...

Today’s objectives

Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop

RULES, SELECTORS, DECLARATIONS

CSS

The Rule

h1 { color : #c0c0c0;

font-family : Arial;

font-size : 2em;

}

Selector

Declaration block

Rule

The Declaration

h1 { color : #c0c0c0; font-size : 2em;

}

p { font-family : Arial;}

Brackets distinguish declarations | rules

Colon separates property and values

Semicolon separates declarations

TYPES OF SELECTORS

CSS

Types of selectors

Tag or HTML Selectors: Page-Wide Styling Class Selectors: Pinpoint Control ID Selectors: Specific Page

Elements/sections

Group Selectors: h1, h2, h3, h4, h5, h6 { color : #F1CD33; }

Child selectors: div > h1 {color : blue; } Adjacent Siblings: h1+p {color : green;} Attribute Selectors

Types of selectors | HTML | Tag

h1 {color : #c0c0c0;}body {background-color : #FFFFFF;}p {padding : 10px;}

Types of selectors | Classes

Classes (apply to more than one type of element)

.mytext {font-family: Verdana; font-size: 14px;}

<p class=“mytext”>Hello World</p>

<span class=“mytext”>Learning CSS</span>

Dependent Classes (when the class is applied to a specific tag - .hiLight only applies to h1 element)

h1.hiLight {background-color : blue;}

<h1 class=“hiLight”>Hello World</h1><h2 class=“hiLight”>Hello World</h2><p class=“hiLight”>Hello World</p>

Types of selectors | Dependent Classes

Types of selectors | ID

ID selectors identify: Major sections Unique content | a rule to ONE element on a page. Configured with #idname

#banner { background-color : #FF00FF;}

<div id=“banner”></div>

Types of selectors | ID

Creates a rule for an id titled “banner”.

Red, large, italic font.

Applies to ID “banner”<style type="text/css">

#banner { color : #FF0000;font-size:2em; font-style: italic;

}

</style>

<h1 id=“banner”>Hello world!

</h1>

HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.

HTML Tree

<html>

<head>

<title>My Web Page</title>

</head>

<body>

<h1>Main Topic</h1>

<p>

A web page about the days of the week, specifically<strong>Tuesday.</strong>

</p>

</body>

</html>

HTML Tree

<html>

<head> <body>

<title> <p><h1>

<strong>

Ancestor to all tags

Ancestor to h1, p, strong

Siblings

Child of <p>

Descendent of <html>

Descendent of <html> and <head>

HTML Tree

Ancestor: tag that wraps around another tag. <html> ancestor of all other tags

Descendent: A tag inside one or more tags. Parent: tag’s closest ancestor

<p><a>HOME</a></p>

Child: tag directly enclosed by another tag.<p><cite><a>HOME…</a></cite></p>

Specificity | Descendent selectors

Specific descendent selectors override less specific selectors

li a {color : green;} All anchors in line items are green

ol li a {color : green;}Only anchors in line item in ordered lists

are green

Selectors | Descendent selectors

p.intro { color : red;}<p class=“intro”>Hello World</p>

Any paragraph with .intro class will be Red.

p .intro {color : red;}<p>Hello <span class=“intro">

World</span</p>

Any tag with .intro class that is in a <p> tag will be Red.

Child selectors

div > h1 {color : blue; } All heading 1 that are children of div will be

blue.

<div><h1>Hello world</h1><h1>Hello everyone</h1>

</div>

Adjacent Siblings

A tag that appears immediately after another tag in HTML

h1+p {color : green;}

Paragraphs that are adjacent to heading 1 will be green.

ATTRIBUTE SELECTORS

Attribute Selectors

Format a tag based on any attributes it has.

img[title] {border : solid 4px #EFEFEF;}

<img src=“image.png” title=“CO XYZ” />

All images with a title attribute will have a border

Attribute Selectors | ^ and $Format external links:

a[href^="http://"] { color : yellow; }

^ - begins withAny link that begins with “http://” is yellow

a[href$=".zip"] { color : green; }$ - Ends withAny link URL that ends with “zip” is green.

Attribute Selectors | *

img[src*="Ire"] {border : solid 5px green;}

<img src="banner_Ire.png“ />

All images where src attribute contains “Ire” get a green, solid border.

Attribute Selectors | *

img[src*="Ire"] {border : solid 5px green;}

<img src="banner_Ire.png“ />

<img src="banner.png“ />

Pseudo-Classes

a:link | a:link { color : #EFEFEF; } a:visited | a:visited { color :

#CCCCCC; } a:hover | a:hover { color : # F33333; } a:active | a:active {color : #B2F511;}

Hover: (these will also work) h1:hover { color : #FFFFFF; } .hiLite:hover { color : #FFFFFF; }

Pseudo-Classes

Proper way to order four link pseudo-classes:

1. a:link { color: #F60; }2. a:visited { color: #900; }3. a:hover { color: #F33; }4. a:active {color: #B2F511; }

If order is changed, the hover and active don’t work.

Pseudo-elements

:first-letter –

p:first-letter {font-size : 2em;

font-weight: bold;color: red;}

:first-line –

p:first-line { font-size : 2em;

font-weight: bold;color: red;}

.hiLite:first-line { text-transform: uppercase; }

Pseudo-element | :first-child:first-child the first of all children an OL may have.

ol li:first-child { font-size:1.2em; }

<ol>

<li>Item 1</li>

<li>Item 2 </li><li>Item 3 </li></ol>

Selectors

http://gallery.theopalgroup.com/selectoracle/

Type selectors to understand why they do



WEB DESIGN & DEVELOPMENT PROCESS

Development process

Developing a website generally involves:1. Conceptualize and research.2. Create and organize content.3. Develop the “look and feel.”4. Produce a working prototype.5. Testing.6. Launching the site.7. Maintaining the site.

Development process

Teague (2009):1. Plan site2. Build site3. Deploy site4. Iterate the process

Iterative design process

1. User Analysis: What to know about the users?

2. Task Analysis: What are users’ goals? Tasks?

3. Environment analysis: What are users’ surroundings and what impact do they have?

4. Recruiting users: Where can you find them?

5. Usability specifications: What specs will you choose for rating your site/software?

McCracken, 2004

What is involved in the process?

1. Identifying needs and establishing requirements

2.Developing alternative designs to meet these needs

3.Building interactive prototypes that can be communicated and assessed

4.Evaluating what is being built throughout the process

Core characteristics of process

1.Users should be involved in the development of the project.

2.Specific usability and user goals need to be identified, clearly documented and agreed at the beginning of the project.

3. Iteration is needed through core activities.

PLANNING

Planning

Robbins (2007) suggests that before doing any development work, ask the client numerous questions related to: resources, goals, and, audience – very important.

Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Planning

Questions to ask clients during the research phase of design.Strategy Why are you creating this web site? What do you expect to accomplish? What are you offering your audience? What do you want users to do on your web

site? And after they’ve left? What brings your visitors back?


Planning: Questions for clients

General Site Description What kind of site is it? (promotional?

Informational?) What features will it have? What are your most important messages? Who are your competitors? What are they

doing right? What could be improved upon?


Planning: Questions for clients

Target Audience Who is the primary audience? How Internet-savvy are they? How technically

savvy? What can you determine about user’s

connection speed? Platform? Monitor size? Browser use?

How often do you expect them to visit your site?

How long will they stay during an average visit?


Planning : Questions for clients

Content Who is responsible for generating original

content? How will content be submitted (process and

format)? How often will the information be updated

(daily, weekly, monthly)?



Resources What resources have been dedicated to the

project (e.g., budget, staff, time)? Does site require content management

system? Who handles maintenance? Is there a server for your site?



Visual design Envisioning a certain look and feel for the

site? Do existing standards (logos and colors)

need to be incorporated? Is site part of a larger site? What are some other web sites you like? What do you like about them? What sites do you NOT like?


Planning

Often large web development firms spend more time on researching and identifying clients’ needs than on any other stage of production.

They conduct case studies, interviews, and extensive market research.


Planning

Must be clear about your expectations and resources early on in the process, particularly when attempting to work within a budget.

Analysis: Understanding problem

So you examined: Problem | Need | Context | Environment Users Tasks Project Goals and objectives.

Now, move to design

DESIGNING & PRODUCING

From Analysis/Problem Space

Conceptualizing design space

Source: www.theaterxtremeseattle.com/

Conceptualizing design space

From Analysis/problem space to design space:

A thorough analysis or good understanding of the problem space helps inform the design space

Create and Organize Content

Collect and organize content

Always remember…

Content is still king on the Internet

Plan site

1. Make sketches2. Define site structure - 3. Decide page flow

Fixed width/fluid height Fluid width/fluid height Fixed width/fixed height Fluid width /fixed height


Plan site

4. Make wireframes Help in planning structure of pages Serve as blueprints for development Should include placement and

measurement of elements in pixels Wireframe Example

http://www.strangesystems.net/images/wireframe_template-visio.gif

Plan site | wireframes

Elements/information to include in wireframe: Fixed/fluid layout Widths Heights Margins/padding Scrolls lines Colors

Source: Heim, S. (2008), p. 190

Wireframes

Page size & Layout

Page layouts to accommodate users:

Fixed width (http://www.corvusart.com/)

Fluid width (http://simplebits.com/)

Elastic – (http://www.mirella-furlan.de/)

http://www.corvusart.com/

http://simplebits.com/

http://www.mirella-furlan.de/

Plan site

Mood boards Visual compositions (comps)

Convey the visual design It is often useful to make alternative designs Photoshop/Illustrator, etc.

Flowchart symbols

Source: Hannafin & Peck

Blueprint/specifications

Flowcharts

Visio PowerPoint


Prototype | Model

Prototyping and construction

•Different kinds of prototypinglow fidelityhigh fidelity

•Compromises in prototypingvertical horizontal

Macro Flowchart vertical

Lesson 1

Begin Lesson

Lesson Menu 1 - 6

Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6No No No No No

Begin Lesson 1 Begin Lesson 2 Begin Lesson 3 Begin Lesson 4 Begin Lesson 5 Begin Lesson 6

Present 1

Question 1

Correct ?

Lesson Menu

Negative Feedback

Yes Yes Yes Yes Yes Yes

Etc. Etc. Etc. Etc. Etc.

Present 2

No

Yes

Glossary

Quit

End Program

No

Yes

Macro Flowchart

Horizontal

Lesson 1

Begin Lesson

Lesson Menu 1 - 6

Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6No No No No No

Begin Lesson 1 Begin Lesson 2 Begin Lesson 3 Begin Lesson 4 Begin Lesson 5 Begin Lesson 6

Present 1

Question 1

Correct ?

Lesson Menu

Negative Feedback

Yes Yes Yes Yes Yes Yes

Etc. Etc. Etc. Etc. Etc.

Present 2

No

Yes

Glossary

Quit

End Program

No

Yes

Flowchart Horizontal

Site Map

Horizontal

Vertic

al

Low-fidelity Prototyping

• Uses a medium which is unlike the final medium, e.g. paper, cardboard

• Is quick, cheap and easily changed

• Examples:• Sketches of screens, task sequences, etc.• Post-it notes• Storyboards

Low-fidelity Prototype

Source: Heim, S. (2008), p. 188

Prototypes Wireframe (web)

• Sketches of basic screen design and layout.

• Sketches of how users might progress through a task.

• Developed from flowcharts and low-fidelity prototypes

• Illustrator, PowerPoint, etc.

Source: Heim, S. (2008), p. 190

Wireframes

High-fidelity prototyping

• Uses materials that may be in final product.

• More like final system than low-fidelity.

• For a high-fidelity prototype, common

environments include Adobe Flash and Visual

Basic, Dreamweaver.


Build site

Build

Cutting Chrome Use background images Transparent png Photoshop/Illustrator, etc. Use grids for layout (http://960.gs/)

http://960.gs/

Build

Create styles guide | Guide should include information about: Topography – font families, sizes, styles Colors – list colors used in site with

hexadecimal and RGB values List default styles – fonts, sizes, colors,

backgrounds Chrome – show images and file names.

Build

Prototype Define HTML structure Create CSS

Organize CSS Segment or combine styles? - How will you

handle this? Loading styles - @import, LINK? - How will you

handle this?

TESTING & DELIVERY

Deploy

Alpha – site not released Beta – site made available to public –

not promoted.

Usability testing Analytics

Iterations

LAYOUTS

Layouts

Fixed Width - regardless of the browser window’s width, the page content’s width remains the same.

Liquid. Design adjusts to fit the browser’s width

Elastic. A fixed width with type size flexibility. Define page’s width using em values. em changes size when the browser’s font size

changes Page width is based on the browser’s base font size.

<div id=“wrapper”>

<div id=“banner”> </div

<div id=“nav”> </div>

<div id=”mainContent”> </div>

<div id=“siteInfo”> </div>

</div>

Page Layout

• DIVs used often to section document• DIVs given IDs• CSS formats IDs or sections


<h1 id=“banner”></h1>

<ul id=“nav”><li>Home</li><li>About</li><li>Buy</li><li>Customer Service</li>

</ul>

<div id=”mainContent”> </div>

<p id=“siteInfo”> </p>

</div>

Page Layout

• Do not overuse DIVs• If another element can be used, use it

<div id=“banner”>1. BANNER</div>

<div id=“nav”>2. NAVIGATION</div>

<div id=“content”>3. CONTENT</div>

1.BANNER

2 3.CONTENT

FLOAT LEFT

L

Normal Flow

#nav {float : left;}

1.BANNER

23.CONTENT

FLOAT RIGHT

R

Normal Flow




#nav {float : right;}

FLOAT Left & RIGHT

1.BANNER

34.CONTEN

T

R

2

L

Normal Flow(notice sequence of content)




<div id=“events”>3. EVENTS</div>

#nav {float :left;}#events {float :right;} With left and right floats,

content fills in the middle space

1.BANNER

43.CONTEN

T

FLOAT Left & RIGHT

R

2

L L





#nav {float :left;}#content {float :left;}#events {float :right;}

Section 3 wraps to the right of section 2


1.BANNER

4. EVENTS

3.CONTENT

Without Floats

2. NAVIGATION





Without floats, sections appear as they do in the normal document flow.



Normal Flow | Box | Wrapper





</div>

Set properties at wrapper level to affect the properties of children of the wrapper.

Wrapper

banner

NavContent Events

Site Information

<html>

<body>

<div id="wrapper“><div id="banner">banner</div><div id="nav">nav</div><div id="content">content</div><div id="events">events</div><div id="footer">footer</div>

</div>

</body>

</html>

LAYOUT | THE GOLDEN RATION

The Golden Ratio

Visual appeal based on ratio (i.e. The Golden Ratio).

Studies suggest the golden ratio plays a role in human perception of beauty.

A common ratio that is aesthetically pleasing. What is the number? 1.62.

Source: http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-design

The Golden Ratio

Take total width of your content area (e.g., 900px).

Divide that by 1.62.

Divide 900px by 1.62 and get 555.55px.

The Golden Ratio

9001.62 = 555 px

900 PX

The Golden Ratio

900 PX

555 px 345 px

The Golden Ratio

Apply the Golden Ratio to other element's width in relation to its height or vice-versa.

The Golden Ratio

W- 300 PX

3001.62 = 185 px H-185 PX

940PX

580PX

The Golden Ratio

A + B

B

A

Source: http://www.deltaflow.com/?p=199

1 : 1.67 = iPod

POSITIONING

Positioning

CSS offers four types of positioning: Absolute Relative Fixed Static

Absolute Positioning

Absolute : Specify left, right, top, or bottom position. Detached from normal flow of page. Other elements fill-in the space left by an

absolutely position element. Absolutely positioned element is

placed relative to the boundaries of its closest ancestor.

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut

<img src=“photo.jpg” alt=“logo” width=“200” height=“150” />

labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut abore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Position in Document Flow

Absolute Positioning

Original space in doc flow is filled in.

Relative positioning

Relative. Element placed relative to its current

position in the normal document flow. Other elements do NOT fill in the space left

in the document flow.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,</a> quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Position in Document FlowRelative Positioning

Positioned Relative to its position in document flow

Positioning Rules

Element positioned relative to the browser window if: it has an absolute position and it’s not inside any other tag that has

absolute, relative, or fixed positioning applied to it.

Element positioned relative to the edges of another element if: it’s inside another tag with absolute,

relative, or fixed positioning.

Fixed & Static Positioning

Fixed. Element is locked into place on the screen.

Static. Normal positioning method – where an

element appears in the normal document flow.

PADDING, MARGINS, ANDBORDERS

CSS

Padding, Margins, andBorders Web browsers treat all html elements as

boxes.

A tag is a box with content inside (text, graphic or other html element).

Padding, Margins, and Borders

HELLO WORLD!

TOP PADDING

RIGHT PADDING

LEFT PADDING

BOTTOM PADDING

TOP MARGIN

BOTTOM MARGIN

LEF

T M

AR

GIN

RIG

HT

MA

RG

IN

RIG

HT

BO

RD

ER

LEF

T B

OR

DE

R

TOP BORDER

BOTTOM BORDER

Other Element

Other Element

Oth

er E

lem

ent

Oth

er E

lem

ent

Padding: space between the content and the content’s border.

Separates content from its border.

HELLO WORLD!

TOP BORDER

PADDING

PADDING

PA

DD

ING

PA

DD

ING


Border: line drawn around each edge of the box.

Can be four sides, on any single side, or any combination of sides.

HELLO WORLD!


Border style values: none: Defines no border dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border double: Defines two borders. groove: Defines a 3D grooved border. ridge: Defines a 3D ridged border. inset: Defines a 3D inset border. outset: Defines a 3D outset border.

HELLO WORL

D!


Background-color: fills space inside border, including padding area.

Margin separates one element from another.


Margins

HELLO WORLD!

TOP MARGIN

LE

FT

MA

RG

IN

RIG

HT

MA

RG

IN

Other Element

Other Element

Oth

er E

lem

ent

Oth

er E

lem

ent

BOTTOM MARGIN

Padding adds space between the content, and the border.

Margins add white space (gutter) between elements.


Four properties control padding: padding-top, padding-right, padding-bottom, and padding-left.

Four properties control margin edges: margin-top, margin-right, margin-bottom, and margin-left.

margin-top : 5px;margin-right : 5px;margin-bottom : 5px;margin-left : 5px;

padding-top : 5px;padding-right : 5px;padding-bottom : 5px;padding-left : 5px;

padding: 10px 5px 5px 10px;margin: 0 10px 10px 20px;


margin-top : 5px;margin-right : 5px;margin-bottom : 5px;margin-left : 5px;

padding-top : 5px;padding-right : 5px;padding-bottom : 5px;padding-left : 5px;

padding: 10px 5px 5px 10px;margin: 0 10px 10px 20px;

The order of the four values is: top, right, bottom, and left.

TRouBLe - Top, Right, Bottom, and Left.

Shortcut


When value is 0, don’t need measurement unit (e.g., em, px).

Use margin: 0; instead of margin: 0px;.

When same value for all four sides, use a single value margin: 5px;


When same value for both top and bottom and another value for left and right, use two values:

margin : 0 2em;

Sets top and bottom margins to 0 ; left and right margins to 2ems.


today’s objectives review css selectors web development process review: layout and positioning ...

Documents