Home Introduction The Concept The Concept The Culture The Culture The Code The Code The Content The...

Introduction

The ConceptThe Concept

The CultureThe Culture

The CodeThe Code

The ContentThe Content

The FutureThe Future

SummarySummary

ResourcesResources

Making Sense of the Information AgeMaking Sense of the Information Age

Web Design: Web Design: Look, Feel & FunctionLook, Feel & Function

Courage and clarity in the face of complexity,agility for continuous changeand growth,peaceful mind to sustain paradox,and a vision of all things connected.

Presented by

Kenan Doyle Branam ~ ~ kenan@branam.comWeb Team Leader for mca-i.org

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Objectives

• The Concept

• The Culture

• The Code

• The Content

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

IIntroductionntroduction

Media Experience

• Art & Science

• TV Producer

• Video Artist

• Gestalt Facilitator

• Web Designer

• Media Consultant

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

I think, I think,

therefore, I am… therefore, I am…

…I think.…I think.

I think, I think,

therefore, I am… therefore, I am…

…I think.…I think.

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

“A human being is part of the Whole... He experiences himself, his thoughts and feelings, as something separated from the rest... a kind of optical delusion of his consciousness.”

Albert Einstein

e=mc²e=mc²

Special Theory of Special Theory of RelativityRelativity

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

cc = light ~ Consciousness ~ Cognition

squaredsquared ~ Consciousness

Communicated

mm = mass ~ Medium ~ Form ~ Meaning

ee = energy ~ The Human Experience

Special Theory Special Theory of Media Consciousnessof Media Consciousness

e=mc²e=mc²

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

The MediaThe Media

“The Medium is the Maassage.”

The message is human consciousness sharing experiences.

Herbert Marshall McLuhan1911-1980

The Official WebsiteThe Book

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

The Web ConceptThe Web Concept

Evolution of Media

Face to face• Sign language• Voice language• Graphics

Broadcast media• Theatre• Books• Telephone• Radio• Television

The Internet & the Web

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Formal Language and ProtocolGraphical User Interface with a metaphor

Weaving the WebThe original design and ultimate destiny of the World Wide Web, by its inventor Tim Berners-

Lee with Mark Fischetti.

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

The Metaphor

The Web is more like a “library” than a “shopping mall”.

•Familiar metaphor

•Appropriate content

•Intuitive navigation

•Usable & Accessible with standard code

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

It’s about the Experience

• The Web is literate, not just visual. • The Web is active rather than passive. • The Web is time-sensitive. • The purpose of the Web is sharing

knowledge. • The Web is global and local.

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

The Web CultureThe Web Culture

•Information is Relationship

•Information is Power

•Advertising v Information

•Collaboration

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

The Web CultureThe Web Culture

Information is Relationship

“Knowledge thus exists in relationshiprather than in an ‘objective’ worldor in ‘subjective’ experience.

In information theory, ‘information’ is defined in terms of a ‘relationship’ between an input and a receiving devise. A book contains no information for someone who can't read.”

The Holographic Model John R. Battista

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Information is PowerInformation is Power

Hierarchical Flow

Centric• One-way• One to many

Linear logic (1D+Time) Segregated Filtered (Reductionistic) Static Structure

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Information is PowerInformation is Power

Democratic Flow

Distributed• One-to-one • Many-to-many

Process logic (2D+Time) Networked Contextual Dynamically Structured

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Consumer MetaphorSleeping Beauty (Tired!)

Citizen MetaphorCyber Beauty (Fresh)"Get outta my face! It’s my life and I’ll surf who I want to.“

Dominator v Partnership Relationship Win/Win

Advertising v InformationAdvertising v Information

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Information Management• Accessibility• Equality• Transparency• Universality • Sustainability

CollaborationCollaboration

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

The Web Code The Web Code

The Language • Web Presence • Web Grammar• Web Design• Content & Management• The Shared Experience

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Web PresenceWeb Presence

POP = POP =

Point of PresencePoint of Presence

Build it…Build it…

so they can find itso they can find it

… … then they will come!then they will come!

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Web Domain Name

POP = Point of Presence yourdomainname.com

Registered with InterNic

Addressed to a Web HostIP, Internet Protocol000.000.000.000

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

It’s about networking

• Search Engine Robots• Get listed in Directories• Be Online 24/7/365• Develop Community• Customer Centric

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Web GrammarWeb Grammar

Contract Professionals!

• A graphic artist is not a code expert

• A video producer is not a code expert

• A writer is not an Information Technologist

• An Information Technologist is not a writer

• Etc…

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

HTMLhypertext markup language

• Document Type Definition

• Metatags

• Body, chapters, subchapters

• Accessibility Standards

• W3 - Industry Standard definitions

Everything you need to know about Web Standards

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Header & Metatags

•“page title”

•“description”

•“keywords”

•“author”

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

</head> <body> <!--#include file=“top_menu.ssi”> <!--#include file=“left_side_menu”>

<h1>Page Title</h1><h2>Sub title</h2>

…<h6>whatever</h6><p>___________________________________</p>

</body> </html>

sourcsourceecodecode

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Web DesignWeb Design

Elements of Style

• Graphic Look & Feel• Composition• Font Styles• Color palette• Icons, illustrations & photos• Motion media

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Cognitive Modalities• Perception • Attention (Focus) • Stimulus/Response• Pattern Recognition• Association • Concept Formulation• Creative Adaptation

Global Header Global Header (site name)(site name)

Submenu

Header – Page TitleSubheader

Introductory paragraph - The present standard screen resolution is 800x600 which gives you a 90% audience.

Sub Subheader

;ljasfopuikjf ayfopiu afopiydf oaoiuf oiausdfoiudso osdapiufoi aosdf soadifuopiu 8ouafoipu asdoi fuoa fpoiuadf asdoiufpoiausd fpoi asdfopiuasdf sdoapifusdaf opdasif asd fasd foaps idfoas[difuapsodfiuasd fpoasdif dfopiuasdf psdoaiu foads fasopdifuoasdiufoaspdif opasdifuo8ue0wt[0gikjiufsyaw9upgz o 7y oiu pu 9p8y op8u oi ]oi [pou o8y op87 poi [pi ][pi ][ i][ i][ I I ][I p[ oi[p oiu 89y 897 6 ui po jpo t r 6rasd’;jakf[pwkf[w

& special

Global Navigation Menu bar items items items items itemsGlobal Navigation Menu bar items items items items items

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Design Management

•Server-side includes (*.ssi)

•Cascading Style Sheets (*.css)

•Templates

body { font-family : Humnst777 Blk BT,Verdana, Helvetica, Arial, sans-serif;

font-size : 1em;background-image : url(images/bg-image.jpg);margin-top : 0px;

.intro { }

#contact_form { }

a:link { color: #8000FFfont-weight : bold;

H1 { font-family: Humnst777 Blk BT,Verdana, Arial, Helvetica, sans-serif;font-size: 2em;font-weight: normal;font-style: normal;color: #660066;text-align: center;

p { font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1em;font-weight: normal;font-style: normal;color: #000000;text-align: left;

sourcesourcecodecode

CSSCSS

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title>

type="text/css">

</head>

<body> [etc.]

Paragraph text</p>

sourcesourcecodecode

CSSCSS

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Content ManagementContent Management

Web Weaving versus the Story Line

•Networked v Linear

•Segmented v Contiguous

•“Parsed” v Composite

•Interactive v Sequential

•Integrated v Isolated

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Write for the Web• Use concise, short sentences• Facilitate scanning

• Lists rather than blocks of text

• Short paragraphs

• Bold key phrases

• Have abstract for long documents• Standardize spelling, language• Check spelling

Crawford Kilian : “Writing for the Web”

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Content Planning– About the company or topic– Calendar of events– Product description (text, pictures, videos)– Customer testimonials or quotes– FAQs (Frequently Asked Questions) with answers– Press releases and contacts– Forms (general feedback, user surveys, follow-up

requests, order forms)– List of resellers/distributors– Industry directories (online or in print)– Industry associations or guilds

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Every page should answerthese questions:

– Who– What– Where– When– Why– How

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

“About” suggested info– Company background– Vision & Mission– Management/Key personnel– Awards/Professional affiliations– Location & territory– Contact: Email, Phone, Address– Job postings

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Collaboration Software

• provides multiple “content providers” and “editors” with access to Web pages on a password protected basis.

• Allows content providers to edit text content while restricting branding and style changes.

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

The Future of the WebThe Future of the Web

The Semantic Web

"The Semantic Web is an extension of the current web in which information is given well-defined meaning, better enabling computers and people to work in cooperation."

-- Tim Berners-Lee, James Hendler, Ora Lassila, The Semantic Web, Scientific American, May 2001

Web Weaver Glossary of Terms

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Evolution of Web Languages

(Document Type Definitions) SGML, the basis of all HTM HTML (v.2.0, 3.2, 4, 4.01) XML (v. 1.0 is 2nd version) XHTML SVG (Scalable Vector Graphics)

Here goes video!

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Bigger,Faster, Smarter, Cheaper…

even the audience will be transformed into story tellers and weavers, creating the web of human experience…

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Hyper-Human Skills

We’re alive. Electronic systems aren’t.

• caring• judgment• intuition• ethics• inspiration• friendliness• imagination.

How to Succeed in the Hyper-Human EconomyRichard W. Swason

The Futurist - Sep-Oct 2004.

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

c²m=e ~ The c²m=e ~ The ExperienceExperience

The Story

The Web we weave is the Story of the Human Experience.The Greatest Story Ever Told. A Story about Everything in a medium that enfolds and unfolds its true nature: multi-dimensional, multi-authored, collaborative, globally accessible, never ending.

…to be continued…

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

This PowerPoint presentationis available for download at: http://www.branam.com/makingsense/Web_Design_pps/Web_Design_KDB.pps

Suggested reading list:http://www.branam.com/makingsense/ms-read.shtml

Web Design:Web Design:Look, Feel & FunctionLook, Feel & Function

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Integrating Motion MediaIntegrating Motion MediaSample WebsitesSample Websites

Ray Kurzweil • Artificial Intelligence - http://

www.kurzweilAI.net/• The Brain - http://

www.kurzweilai.net/brain/

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Web Resources LinksWeb Resources Links BooksBooks

Steve Krug: “Don’t make me think” Jakob Nielsen: “Designing Web Usability” Louis Rosenfeld, Peter Morville:

“Information Architecture for the World Wide Web”

Robin Williams: “The Non-Designer’s Design Book”

“Webster’s New World Dictionary of Computer Terms”

More suggestions: www.ward.vt.edu/toolkit/books.phtml

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Web Resources LinksWeb Resources Links Online ReadingsOnline Readings

www.webtechniques.comwww.webreview.comwww.webmonkey.comwww.webreference.comwww.builder.comwww.useit.comwww.ward.vt.eduwww.ward.vt.edu/pubs/WebDesign.htm

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Web Resources LinksWeb Resources Links Online ToolsOnline Tools

www.netmechanic.com– Page size & download time– Spell check– Link check

validator.w3.org– HTML, CSS validation

www.cast.org/bobby/– Accessibility check

Introduction

The CodeThe Code

SummarySummary

ResourcesResources

Web Resources LinksWeb Resources Links Desktop ToolsDesktop Tools

Macromedia Homesite 5+ or BBEdit– Coding by hand

Macromedia Dreamweaver 4– WYSIWYG editing & prototyping

Adobe Photoshop 6 & Fireworks 4– Prototyping & image

creation/optimization CSE HTML Validator 4.5

– Validation– Spell check

XENU Link Sleuth– home.snafu.de/tilman/xenulink.html

Home Introduction The Concept The Concept The Culture The Culture The Code The Code The Content The...

Documents

Incorporating Culture in the Curriculum: The Concept of

The Concept of Culture in Translation Studies

Culture d'entreprise, échec d'un concept

APPLICATION OF THE ORGANIZATIONAL CULTURE CONCEPT …

The Concept of Culture in Vygotsky's Thinking

UNIT 22 CONCEPT OF CULTURE ANDFunction-Malinowski … · 7 Concept of Culture and UNIT 22 CONCEPT OF CULTURE ANDFunction-Malinowski FUNCTION - MALINOWSKI Structure 22.0 Objectives

Simmel. the Concept and Tragedy of Culture

Concept of culture & cultural diversity

French Operational Culture Concept · 2009-04-30 · French Operational Culture Concept The colonial era influenced the development of operational culture con-cepts throughout the

White_The Concept of Culture

Culture the Missing Concept in Organization

The Concept(s) of Culture - is.muni.cz · The Concept(s) of Culture . WILLIAM H. SEWELL, JR. The aim of this chapter is to reflect upon the concept-or more prop erly the concepts-of

Culture concept

THE CONCEPT OF ORGANIZATIONAL CULTURE: …catalogimages.wiley.com/images/db/pdf/0787968455.excerpt.pdf3 1 THE CONCEPT OF ORGANIZATIONAL CULTURE: WHY BOTHER? Culture is an abstraction,

7f4912.Concept of Culture

Using The Concept of Legal Culture

Culture and Society Culture—the concept Components of culture Society Categorizing societies Premodern societies Industrialized societies Globalization

THE CONCEPT OF CULTURE

Strategic culture: the concept

Clark Wissler-The Culture Area Concept (1928)