Web Development and Design

8/3/2019 Web Development and Design

1/31

Week 1

Geraldine Torrisi-steele

[email protected]: 0419784765

Other textbook kinda: http://www.ict.griffith.edu.au/teaching/1621ICT/

Project prep 1: get in groups, submit 100-200 word idea of what your making

Prep 2: flowcharts, purpose, objectives,

Prep 3: storyboards

There are templates for these

Site titleTeam member names

Current time and date

Random piece of trivia

Website: requires coverpage which displays:

Css formatting

Use javascript on at least one other page.

Each screen must have a small number on the top right hand corner

Full assessment document at site

Presentation: 5-10 min talk

Must have visual aids

Originates from the military

The idea of Survivability of networks got the internet started

The first node of the internet connected Stanford research and the university of California,L.A.

in 1969 (basicly, when the internet started)

Internet grew rapidly

1989: Tim bernes-Lee created the first web browser

Internet

Original purpose of the www was to get through academic papers and research sharing

Internet refers to the fact that computers are connected together

www refers to the graphical interface that we use

Rather rapid growth of the computers connected to the www

Client server model

Client sends its URL request to the server, who then gives back data

http = hyper text transfer protocol

Its the lingo!

Set of rules that enable communication between the client and server

URL = universal research locater

www = subdomain/host domain

Standard format is 4 octets, numbers have to be between 0 and 255

IP = internet protocol, unique identifier for the computer on the internet

Typing a URL goes to a domain server, URL gets resolved into the IP address to find the computer.

HTML 1

Hyper text marker language

Week 1Friday, 5 August 2011

10:13 AM

Web develo ment and Desi n Pa e 1
mailto:[email protected]://www.ict.griffith.edu.au/teaching/1621ICT/http://www.ict.griffith.edu.au/teaching/1621ICT/mailto:[email protected]


2/31

First conceived in 1990: allow exchange of research docs

Html2

1995

HTML markup can be represented via hypertext news, mail, documentation, and hypermedia;

menus of options, database query results.

Html4

1999

Supports more multimedia options, scripting languages, style sheets, better printing facilities and

docs more accessible to users with disabilities.Html5

Focus on the needs of web application developers as well as evolving html and addressing issues

found in the current specifications

Currently a work in progress

Response to the variability and inconsistency of web technologies

Like error handling, Compliance, and a more semantic approach

Introduces support for multimedia and graphical content without using plug-ins and APIs

(Application programming interface)

Has two main goals: consistent, defined error handling and to develop the ability of the browser to

be an application platform via HTML, CSS, and javascript

First thing about HTMl, its not a programming language

Basis is tags

Most have an opening tag and a closing tag

First tag is HTML

Next would be a head tag

Title tag

Head tag

Body tag

Body tagHTML tag

Basic structure of HTML docs

Some tags

Headings

Paragraph

1st unordered;

Link

How to create anchors in the document

.htm or .html is basics for webpage creation

XHTML

Created to create well formed documents

Standards for HTML

Case sensitive

Elements must be nested properlyAll elements must be closed

Empty elements must be terminated

Attribute names must be lowercase

Attribute values must be quoted



3/31

Attributes must have values.

www.csszengarden.com

http://www.csszengarden.com/http://www.csszengarden.com/


4/31

Week 2

Lab focus is on 2-3 on textbook

The internet has its foundations in the military. What problem was being addressed by the military

that laid foundations for the internet? Survivability of da web

1.

The world wide web has its beginnings in 1989. What was the primary purpose for the first

hypertext documents? Sharing research papers

2.

Is the following a valid IP address: 16.245.1.265? Why/why not? No, made up of 4 octects (0 to 255)3.

Complete the following: HTML is a tag based language used for formatting hypertext documents.4.

What is the main aim of XHTML as stated by w3C? Make a uniformed language5.

Websites have no value unless users understand and can act on information they contain:

Understanding to have meaning, to realize the significance of

We can look at it as Website development is an exercise in communication.

Communication mutual understanding user being able to interpret the site.

A website is considered effective if the message it intends to deliver is understood and used by the

users.

If the user interpreters the intent = it gets the organisation intent, and is an effective site

Step one: define the purpose of the site: should only have 1 clear purpose for a website, very broad.The objectives of the site specific, observable and measurable.

Step two: Identify the audience that the site is intended for. Audience profile age, gender, location,

intent, language, nationality, disabilities, interests, occupations, equipment, etc.

Step three: Plan the content for the site.

Need to select the content for the intention of the original purpose.

How to present the content Add value to the site (make it nice and pretty.)

Step 4: Plan the structure of the website.

Three options

Linear, Hierarchical, Network

Step 5: Plan the Web Pages

Several page types

Cover pages

Content pages

Transitional pages

Action pages

Step 6: Plan the navigation for the site

Needs to be both efficient and effective

3 click rule: should require no more then 3 clicks to get to something.Effective talks about the fact that the user doesnt get lost.

Should be able to answer (Good guide for effective navigation)

Where the fuck am i?

Week 2Friday, 5 August 2011

10:14 AM



5/31

Where can I go?

They need to know

How the hell do I get there?

How do I get that?

Craft a look and feel

Make it portable

Design with low-bandwidth user in mind

Clear presentation and easy access in informationCreate smooth transitions

Provide visual structure to the page layout

Use active whitespaces

Design for location.

Look for Jakob Neilson usability - http://www.useit.com/

Brief introduction of CSS

Separation of content from style

Css separates content from style bitches!

Basic syntax for css

Selector {property: value}

Example

Body {color: blue}

Selector -> determines element to which rule is applied

Declaration -> details the exact property values

Property -> quality or characteristic/s (e.g. color)

Value -. Precise specification of property(e.g.blue)

Three ways to implement, first is Inline (defined alongside the element you want to style), second isimbedded(embedded is embedded into the style sheet), and third is external (an external style

sheet)

Internal:

Easy to change

Faster to download

Reduces code

Cross platform

External stylesheets are easier to do maintenance on

Reducing the file sizeReducing the bandwidth usage

Improving the flexibility.

The id selector is used when you want to implement a certain style on a single area on a page.

Configure the id name as the selector

Eg footer { : }

Place hash in front of the id name

#footer { : }

Set the declaration property and value#footer {font-style:italic; font-size: .75em}

To define an Id selector:

Class selector is used when you want to implement the style on multiple elements

http://www.useit.com/http://www.useit.com/


6/31

To define a class:

1. configure the class name as the selector

e.g. nav { : }

2. Place dot (period) in front of the class name

.Nav { : }

3. Set the declaration property and value

.Nav { font-weight:bold; font-size: 1.25em}

Cascading order in css is to deal with conflicts

User defined styles highest precedence

Inline styles

Embedded style sheet

External style sheet

Browsers internal style sheet lowest precedence

Cascading order is

Understanding Inheritance

Based on hierarchical structure of documents

Css rules inherit from parent elements to child elements

Precedence(inheritance)



7/31

Review of week 2

Concept of Usability

Designing contextually

Userview process

Defining usability: purpose, audience, content, structure, webpages, navigation

Concept of usability:

Week 3Monday, 8 August 2011

9:10 AM



8/31

Designing contextually model:

The designed page is not in isolation, every one you make is impacted by other factors.

Decision making for design

Environment of the website

Two categories

Physical space - equipment, etc

Cognitive space of the user - kinds of thoughts, intentions, how they are processing info

User environment

User's expectation of the site

User's mental model

Site environment

Need to think about the user's knowledge, experiences, skills, personality, physical properties,

demographics.

User

Two categories

Target audience

Everybody else

Genre: a specific characteristic or type that shows that it's from a specific group.

Genre is good to find the target audience and what they expect, content, organisation, functionally,

look and feel

Response time

Positioning of content

Navigation visibility

Security

The website itself - things to think about

Key issues, consistency, info placement on page, coding (pointing things out with different textconsistency), use of color, layout, clarity of text

Page level

User view process



9/31

In summary

Usability is the amount of mental effort required by users in order to achieve their goals

Usability is about user-centred design that also takes into account contextual factors and the nature

of the task.

The designing contextually model, focuses on the fact that design decisions at site and page level are

impacted upon by genre, user and environment factors. It demonstrates the truly integrated nature

of usable design.

The user-view process provides a methodology for designers to assist the creation of usable design.

It incorporates interactive design modification

Learnable

Memorable

Effective

Efficient

Satisfying

User interfaces are

This is used as a basic guideline for designing and evaluating the usability of web sites.

Homepages are crucial

Intro of what the site is about - establishes identity

Pointing the user in the right direction - overview of content

Homepages

Make the site's purpose clear: explain who you are and what you do

Write a window title with good visibility in search engines and Bookmark lists.

Group all corporate information in one distinct area

Help users find what they need

Reveal site content

Use visual design to enhance, not define, interaction design

Configures a horinzontal line

Css border property

Configures a border around the element

Consists of border-width,style, and color

H2{border: 2px solid #ff0000}

Different types

Inset, outset,double,groove,ridge, solid, dashed, dotted

Can configure a line on one or more sides of an element

Border-bottom,left,right,top

H2{border-bottom: 2px solid #ff0000}

Css padding

Configures empty space between the content of XHTML element and the border

Set to 0px by default

H2{border-bottom: 2px solid #ff0000; padding:5px;}

Can configure padding on one or more sides

Padding-bottom,left,right,top

GIF

Graphics interchange format

Best used for line art and logos



10/31

Max of 256 colors

One color can be configured as transparent

Can be animated

Uses lossless compression

Can be interlaces

JPEG

Joint Photographic Experts Group

Best used for photographsUp to 16.7 million colors

Use lossy compression

Cannot be animated

Cannot be made transparent

Progressive JPEG similar to interlaced display

PNG

Portable Network Graphic

Support millions of colors

Support multiple levels of transparency (but browsers do not -- so limit to one transparent color for

Web display)Support interlacing

Use lossless compression

Combines the best of GIF & JPEG

XHTML Image Element

Configures graphics on a web page

File name of the graphic

Src Attribute

Configures alternate text content(description)

Alt Attribute

Height of the graphic in pixels

Height Attribute

Width attribute width of graphic in pixels

XHTML Alignment

Align="top"

Default alignment

Align="middle"

CSS backgroup image propertyConfigures a backgroup-image

By default background images tile (repeat)

Body{backgroup-image: url(backgroup1.gif);}

CSS backgroup repeat property



11/31

Using background-repeat

h2 { background-color: #d5edb3;

color: #5c743d;

font-family: Georgia, "Times New Roman", serif;

padding-left: 30px;

background-image: url(trilliumbullet.gif);

background-repeat: no-repeat;

}

Image maps

element

Defines the map

element

Defines a specific area on a map

Can be set to a rectangle, circle, or polygon

href Attibute

shape Attribute

coords Attribute



12/31

Web site organization

Hierarchical

Linear

Random

Page layout design techniques

Aka rigid or fixed design

Fixed-width, usually at left margin

Ice design

Page content typically centered

Often configured with a fixed or percentage width such as 80%

Jello Design

Page expands to fill the browser at all resolutions.

Liquid Design



13/31

Define the term usability as it refers to

website design?

2. Briefly explain the key idea behind website

model called designing contextually?

3. The Userview process is a general

methodology for implementing site usability.

What 5 key design principles does it

incorporate?

4. In web page design, what is meant by the

term active whitespace?

5. In Jakob Nielsens eye-tracking study for

web pages, he found that most users follow

a/an ______ shaped reading pattern.

1. Define the term usability as it refers to website design? the

amount of mental effort expended by users in order to achieve

desired goals.

2. Briefly explain the key idea behind website model called designing

contextually?

It emphasizes that the design at page level is being impacted upon

by everything else The levels to be considered in design are

represented as co-centric circles.Design decisions made in the

larger circles impact and supersede those made in the smaller

circles (lower levels)

3. The Userview process is a general methodology for implementing

site usability. What 5 key design principles does it incorporate?

User-centred approach ( define users as pre-requisite for

development and testing),

Early human factors input human factors and design guidelines

considered very early in the process coming from research,

conventions of practice and consensus of experts. Iterative design

Prototypes progressively refined after presentation to the user.

Continuous testing and integrated design (what does the user

need to do, how should the user do it, how do we tell the user what

to do need to be considered simultaneously at beginning and

throughout.

4. In web page design, what is meant by the term active

whitespace?

Deliberately planned whitespace

5. In Jakob Nielsens eye-tracking study for web pages, he found that

most users follow a/an F shaped reading pattern.

Usability testing

Understand the user when testing a site

Ask what they would use the site for

Figure out the context

Ask a test group to do a specific task

Does the homepage act as a gateway

Are mental models of usage consistent across the site?

Some web specific usability evaluation issues:


9:08 AM



14/31

Is the overall user experience intuitive and pleasant?

Does user performance change across different platform and browsers?

Is all major functionality visible above the scroll line on each page.

Do error messages make sense to the user?

Are users provided with feedback about where they are?

Learning time

Time to performErrors

Ease of remembering and amount remembered

Subjective measures

Key measures of usability

Usability evaluation goal setting

Early paper testing

Storyboard testing

Interactive prototype testing

Process

Digital divide: certain parts of the population have substantially better opportunities to benefit fromthe new economy then other parts of the population.

Economic divide - some people just don't have the monies

The usability divide - design not allowing users to do what they want to do

The empowerment divide - users don't have the knowledge or skills to be able to fully

participate

Reasons why people can't access the internet

Accessibility refers to the fact that you can/can't get to it

Usability and accessibility are not independent concepts

Accessibility is about designing so that more people in more situations can use the site more

effectively

Usability and accessibility is about designing effective efficient satisfying interfaces for users.

Function - physical limitations, characteristics of users

Situational - environment

What are some good reasons for providing accessible websites? Larger base of users, so you don't

get sued.

Web accessibility is a social issue

Web accessibility is an aspect of corporate social responsibility

Web accessibility benefits all people

1.1 Provide text alternatives for any non-text content so that it can be changed into other forms

people need such as large print, braille, speech, symbols or simpler language

1.2 Provide synchronized alternatives for multimedia

1.3 Create content that can be presented in different ways (for example spoken aloud, simpler

layout, etc.) without losing information or structure

1.4 Make it easier for people with disabilities to see and hear content including separating

foreground from background

2.1 Make all functionality available from a keyboard

2.2 Provide users with disabilities enough time to read and use content

2.3 Do not create content that is known to cause seizures2.4 Provide ways to help users with disabilities navigate, find content and determine where they

are

3.1 Make text content readable and understandable

3.2 Make Web pages appear and operate in predictable ways



15/31

3.3 Help users avoid and correct mistakes that do occur

4.1 Maximize compatibility with current and future user agents, including assistive technologies

Have accessibility available on all three ends

Layout was the primary reason that css was made

Flow: browser displays of elements in order of what they were coded

Relative positioning: you position depending on where other content is on the page

Absolute positioning: precisely specifies the location of an element in the browser window.

Float property

Elements that seem to float on the right or left side of the browser

Clear property

Useful to clear or terminate a float

Values are left,right,both

Overflow property

Intended to configure the web display of element on a web page, in cases where the float doesn't fit

into an area

Can be useful to clear or terminate a float before the end of a container element.

Values are auto, hidden, and scroll

Z-index property

Modifies the stacking order of elements on a web page

Default is 0

Elements with higher index values will appear stacked on top of elements



16/31

Story boards

Done before the website

A script for your website

Designers that create it

Programmers - production team

Client

It's a communication tool

What does it need to contain?

All the things that someone would be able to put into making the website without having to ask

questions

Storyboards show the placement, where the text is on the screen (and what it is), The color, font

sizes, styles, Graphics-sizes, Audio - when it plays, user control, Video 0 when does it play, user

control, Hyperlinks - what are they? Where?, Animation, Interaction

One storyboard for every screen

Understanding

Communication - mutual communication

6 steps of planning

Learnability

Memorable

Efficient

Effective

Satisfying

Usability

Digital divide -> accessibility

Effective site

Accessibility is if the content is all there, and you can get to it

Usability is that the content itself is usable.

Ecommerce -

Electronic commerce, commonly known as e-commerce or eCommerce, or e-business consists of the

buying and selling of products or services over electronic systems such as the Internet and other

computer networks.

What kinds of activities are considered ecommerce?

E shopping

Banking online

Digital context distribution

Gaming

Advertising

The internet is but one sect of ecommerce

Other things like mail, fax, etc

Ecommerce advantages

Customer:Ease of access

Convenient

Can compare prices easily


9:06 AM



17/31

Availability

Business:

Wider customer base

Can be done with less people

More efficient

Streamline operations

Can cater for different sections of the audience

Less running costsGrowth

Have access to competitive intelligence

Ecommerce challenges

Customer:

Not getting lost

Lose people contact

Lack of technical knowledge

Barriers

Won't want to put your credit card details on line

Business:

Search engine optimisation

Keeping up to date - security, trends

Establishing a good rep

Competition

ICDT model of ecommerce

4 key areas

Info on products and services

Current and usable

Virtual information space

Establishing and maintaining relationships with the customer

Virtual communications space

Physical or digital delivery

Virtual distribution space

How to deal with money

Security is the big issue

Virtual transaction space

Entrance obvious

Make shopping cart obviousPoint out security

Categorise content in sensible ways

Make store

Relative Linking

Link examplesCollars

Yahoo!

XHTML linking to fragments

Back to TopThe anchor tag that links to the named fragment of a web page. This uses the href attribute

The element that identifies the named fragment of a web page. This requires the id attribute.

Pseudo classes and anchor element



18/31

link default state for a hyperlink

visited a hyperlink that has been visited

focus triggered when the hyperlink has focus

hover triggered when the mouse moves over the hyperlink

active triggered when the hyperlink is being clickeda:link {color:#000066;}a:visited {color:#003366;}a:focus {color:#FF0000;}

a:hover {color:#0099CC;}a:active {color:#FF0000;}

a:link { background-color: #ffffff;color: #ff0000;}a:visited { background-color: #ffffff;color: #00ff00;}a:hover { background-color: #ffffff;color: #000066;

text-decoration: none;}

Use the list-style-image property to configure the bullet"list-style-image:url(arrow.gif).

Table example Birthday ListNameBirthday

James11/08Karen4/17Sparky11/28

Example 2NameBirthdayJames11/08Karen4/17



19/31

Sparky11/28

Colspan Attribute (data is spanning 2 columns)

Birthday ListJames11/08Karen4/17

rowspan

James11/08



20/31

Java script

Main difference between Java and Java script

Javascript doesn't stand alone

Must be embedded in the html

Its also scripting

It is an object based scripting language

Can be used in html to do stuff like display message boxes

Select list navigation

Editing and validating form info

Creating new windows of various shapes and sizes

Rolling images

Current date

Calculations

Is case sensitive

Insensitive to white spaces

Ends in ;

Naming identifiers

Has to being with a letter

Syntax

DOM

Document object model

Has two main ideas of use

Every element on a web page is treated as an object

The way it looks at those elements on the web page are in a hierarchical format

Attributes - called properties

Associated methods - actions

Events - actions taken by the user

Objects are the element on the web page

Events event handlers

Click Onclick

Mouseover Onmouseover

Load Onload

Mouseout Onmouseout

Submit Onsubmit

Unload Onunload

Referencing objects: objects are identified by an object name

To indicate the location of an object within the hierarchy, you separate each level using a dot


9:04 AM



21/31

Declaring variables in javascript

Can be declared with any of these variable commands

Var variable;

Var variable = value;

Variable = value;

+ can be used for either numerical values of text strings (like normal)

If - else loops can be used!

Java functions...why am I still looking at this

Function returns values and must include a return statement

Can be used to do form validation

Using "" or null to check to determine if a form field has information

Javascript will not always be accessable, keep this in mind

Make sure this is not IMPERTIVIE



22/31

Css separates content from style

ICDT

Information Communication Distribution Transaction

If the user doesn't understand what the website is about and what they can do with it, it's pretty

crappy

Search engines use 3 different algorithms

Language processing-

Search form - user query

Database

Caller - spider - bot

Optimisation strategies

Body text

Alt tags

Captions

Meta tags

Text

Should contain keywords

Links

Links pointing to the page

Popularity

Date method in javascript (w3 schools)

Var d=new Date();

Document.write(d);

Arrays

Var I;

Var mycars = new Array();

Mycars[0] = "Saab"

Mycars[1]="Volvo"

My cars[2]="BMW"

For (i=0; i


23/31

Mobile technologies

Key ideas

Mobilize rather then minaturise

One web

Context is king

Mobile web initiative

Mobile ok

Best mobile web practices

Presentation (small size effects)

Input

Bandwidth and cost

User goals

Device limitations

The concept of one web is:

One web means making as far as reasonable, the same information and services available to users,

irrespective of the device they are using

However it doesn't mean that the exact same information is available through the same

representation

Role of context

Infrastructure context

Application context

Location context

Physical context

Designing for the web

Don't mix up your markup

Casual surfer

Repeat visitor

Urgent visitor

Know your customers

Publish the bare minimum

Choose a great domain name

Validate your markup

Test

Week 8Monday, 12 September 2011

12:05 PM



24/31

Instructional theory-

Models of instructional design-

Future of the web-

Design of instructional sites

Instruction vs information1)

Design of instructional sites

Instruction - instructing - learning - process - change in learning skills, knowledge, and thinking

Information - giving info - conveying - presentation of facts, knowledge

Philosophy of learning and teaching:

Instructive perspective

"traditional learning"

Knows it all-

Teacher - font of knowledge

Task - pour the knowledge into the learners heads

Student - blank slate

Rote learning

Constructivist perspective

Piaget - constructivist

Hands on learning

Learning from mistakes

Linking in to prior knowledge

Learner is considered active

Interaction

Teacher is the facilitator

Socio-constructivist perspective

Sharing

Negotiation knowledge

Power of discussion

Conversational (laurillard)

Zone of proximal Dev. 2pd

Why constructivism is used

Week 9Monday, 19 September 2011

9:02 AM



25/31

ADDIE model of instructional design

Dick and carey instructional model



26/31

Web 1.0 - business and static content generated by developers

Web2.0 - social generated content, collective intelligenceWeb3.0 -



27/31

Intro to www html

Survivability of networks

Internet - origins in military

hypertext

Www - research and documents

Discuss the origins of www - exam

Web server basics

Unique identifier, ip internet protocol

Invalid is greater then 256

Distributed database-

Purpose is to translate URL with IP-

DNS? - Domain name server

HTML

Syntax

Basic structure

Tables

Forms

Anchors and links

Relative absolute links

Xhrml - purpose with W3e - well formed document

Site and page design

Mutual understanding

Websites -> communication

If a website is effective, the organization has presented the intended message, user has

understood it, and can match it to the user's needs.

Briefly discuss "websites understanding

Planning your site

Two main points, communication and understanding

6 planning steps

Define the purpose of the site - have one clear purpose, that the purpose is supported by

objectives. Distinguish between purpose and objectives

1.

Identify the audience that the site was intended for. Be aware of the Audience profile.

Questions expected: what are some audience characteristics? Age, gender, occupation, goal,

interwebs usage.

2.

Plan the content: value adding, links to your audience and objective3.

Plan structure: Hierarchical: categorized content, linear: sequential content,

network(random): no clear category

4.

Plan your web page: homepages, category: transitional pages, home page, action pages,content pages. Purpose of a web page, home page should orientate the user, and give an

overview of the content, transitional: pages for further info, contact pages are forms, content

pages

5.

Week 12Monday, 3 October 2011

8:56 AM



28/31

Plane the navigation for the site: 3 click rule, where am I, where can I get to, what's this web

site about, where have I been, how can I get back, what can I do here

6.

General principles of H design

Consistency

Coherence

Shape for web pattern for Z, reads like an F

Reading patterns

Whitespace - active(planned space) and passive(accidental)

Usability

Define: the amount of effort that the user needs to use to reach their objectives.

Learnable

Memorable

Effective

Efficient

Satisfying

5 characteristics of usable interfaces

How to achieve usable design

What is H? concentric circles, means that the order of decisions you make depends on whenthe item appears, shows order of precedence or design decisions. Design decisions are

impacted by many factors

Why is it useful? - websites don't exist in isolation

Designing contextually model

Environment: physical, user environment

Users - specific target audience(audience profile, individual differences), casual web surfer

Explain why it's important: for the audience expectations about content and how to use the

site

Genre: define: theme of the content, style or specific characteristics of the website,

Response time

NavigationSecurity

Usability

Website - positioning content

Coding

Coherency

Reliability, etc

Page - consistency

Use of view process

User centred approach - audience profile, design decisions1.

Early human factors input - consider usability early in the process2.iterative design - user review it, gives feedback and allows the creator to fix it, first designs are

not perfect, cycle of user input and changes and refined.

3.

Continuous testing4.

Integrated design: thinking about what the user needs to do, and how they will do it, all the

way through.

5.

Main principles that apply to it:



29/31

Explain the term digital divide?

Economic divide (not enough money to do...whatever-

Tech is too complicated for people to use

Usability divide-

Lack of knowledge/skills/attitudes

Empowerment divide-

Refers to groups of people who are unable to take advantage of the digital age

Accessibility

Absence of alt tags (accessibility issues)

Accessibility and usability are related

What is the difference between accessibility and usability?

About designing effective, efficient interfaces for users

Usability - ease of use

About designing effective, efficient interfaces for more users in more situations

Situational limitations (enviromental stuff)

Functional limitations (attributes of the user themselves

Limitations:

Accessibility - info not there

W3c

Web accessivility(initiative (WAE)

Level A, AA, AAA

Pnong 1,2,3

Css

Separation content from style

Easier editing/updating

Re-usable - efficient

Cross-platform delivery

Creates a more consistent website

What's the advantage of css

Inline - overridence

Embedded

External

Order of precedence

Syntax

z-index box model

What are the 3 ways of implementation

What is ecommerce?

Buying and selling of goods and services using an electronic medium

Challenges a benefits to customers and businesses

Customers

Challenge:

Trust

security

Advantages:

Week 13Monday, 24 October 2011

8:57 AM



30/31

Convinience

Efficient

Price

variety

Business

Challenge:

Dealing with refunds

International lawSecurity

Cultural of heresy

More competition

Advantages:

Easier entry

Larger market

Reduced cost

Streamline business process

Competitive intelligence

ICDT modelI - Virtual information space - where business displays info about goods + services, accurate, up to

date and have usable interface

C - communication space - establish and maintain and ships with customer

D - distribution - how to deliver, timly delivery

T - Transitive

SERCO guidelines for online shops - bankeins travel

JavaScript

DOM - document object model - tree/hirachial representation of elements on a webpage

What a function does, and where does it go?

Function: block of code that does a certain function

Script all goes in the head tag

Search engines

Metatags, relevent page titles

Relevent domainAlt tags for the pics

External links

Body text

Site structure

What are main optimisation stratorgies

Text

Links

Popularity

Mobile web

Designing web pages for mobile devices, etc

Main limitations: input methods, screen size, tech available, local memory size, specs, etc

Mobile ok - website satisfying w3c guidelines

One web - same functionality and context, availble regardless of device



31/31

Mobilise rather than minaturise

Context is king - local info, users intentions

Infastructure - application

Location - physical

Other web

Web 1 Static "business card" content created by experts

Web 2 interactivity, social networking, user generated content

Web 3 semantic web, data

Documents

Web Development and Design