Co42002 mt4 week 2
This presentation is the property of its rightful owner.
Sponsored Links
1 / 58

CO42002 MT4 Week 2 PowerPoint PPT Presentation


  • 48 Views
  • Uploaded on
  • Presentation posted in: General

CO42002 MT4 Week 2. WWW Architecture, WebDAV, graphics, bandwidth & web design practice. This week. Underlying Principles & Practice Web Distributed Authoring and Versioning (WebDAV) Managing your content Web Architecture Bitmap and Vector Graphics

Download Presentation

CO42002 MT4 Week 2

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Co42002 mt4 week 2

CO42002 MT4 Week 2

WWW Architecture, WebDAV, graphics, bandwidth & web design practice


This week

This week

  • Underlying Principles & Practice

    • Web Distributed Authoring and Versioning (WebDAV)

    • Managing your content

    • Web Architecture

  • Bitmap and Vector Graphics

  • Bandwidth implications for human-centred web design


Last week free multimedia

Last week: Free Multimedia

  • What will your future careers in multimedia depend on?

    • Your ability to create new media solutions, at a cost-effective price profitably?

    • Your ability to create digital media components that generate revenue?

    • Your ability to add value in embedding digital media in ICT solutions?

    • Your ability to pick up technical skills


Contentious introduction 2 as a web developer i will

Contentious introduction #2 As a web developer I will…

  • Handle 2 or 3 clients’ websites a month,

    • updating them with new material,

    • using the latest web design tools

    • to create a really distinctive look?

  • Spend most of my times doing pitches and sitting in meetings trying to figure out what the client wants?

  • Co-ordinate a group of other people

    • graphics designers, programmers, database people,

    • to make sure each site makes more money than it costs?

  • Have 2-3 hours per client to do prototypes until the client is happy and/or runs out of money?


Co42002 mt4 week 2

Unit 2 Architecture for WWW, WebDAV, Vector Graphics, Bandwidth & Web Design

1 Fireworks

2 Underlying Principles

& practice

Tutorial

3 Web Graphics

Standards

4 Appropriateness

of Images

5 Web Design


1 tutorial fireworks overview

1. Tutorial: Fireworks Overview

  • A graphics tool that started with the web, instead of print

  • As with any new tool:

    • Look for interface similarities, and monitor

    • Use the tutorial files to take you through the basics

      • http://www.macromedia.com/support/fireworks/documentation/fwmx_tutorials/


Possible problems

Possible problems

  • Fonts didn’t look exactly the same on my machine – perhaps using a narrower Arial font?

  • Transparency didn’t look quite the same either! But close!

  • Before next week complete the second of the two tutorials

  • If you are interested look at further tutorials

    • http://www.macromedia.com/support/fireworks/tutorial_index.html but not required for coursework

    • http://www.macromedia.com/desdev/mobile/articles/palmos_template.html describes using FW for Palm design


Co42002 mt4 week 2

Unit 2 Architecture for WWW, WebDAV, Vector Graphics, Bandwidth & Web Design

1 Fireworks

2 Underlying principles

& practice

Version Control

WebDAV

Content Mgmt

&

Hcie2003

casestudy

3 Web Graphics

Standards

5 Web Design

Web Architecture

4 Appropriateness

of Images


2 file dis organisation from personal experience

2. File (dis)organisation. (From personal experience!)

  • Work

  • C:/teaching/modules/co42002

    • Development area, then passed to

  • H:/teaching/modules/co42002

    • For system backup and access from home

  • C:/public_html/modules/co42002

    • Cache for supply to the website when ready for release

  • Website:

  • H:/public_html/modules/co42002

    • What you, the customer, sees

  • Home

  • C:/teaching/modules/co42002

    • Because there are never enough hours in the working day

Lecture Theatre

And WebCT

Laptop


Version control

X

X+A

X+A

X+B

X+B

X

Version Control

  • When things get difficult, poor version control leads to loss of work –

  • We desire X+A+B but we get X+A only (X= original work, A= A’s changes, B= B’s changes).

Developer A

Master Copy

X

All of Developer B’s work has been destroyed!!

Developer B


Webdav

WebDAV

  • We therefore needed sophisticated tools for larger development teams

  • WebDAV http://www.webdav.org/

    • An ongoing project to build this kind of sophisticated functionality.

    • Adds "Distributed Authoring and Versioning" into the WWW

  • In Dreamweaver MX onwards

    • “WebDAV in Dreamweaver 8 now supports digest authentication and SSL for secure file transfer and offers improved connectivity with a wider array of servers.”


Webdav cont

WebDAV (cont)

  • Needs to be installed on server

  • Dreamweaver MX allows you to specify what tools your server supports:

    • a WebDAV-compliant solution

    • or a proprietary solution like Microsoft SourceSafe

  • Therefore WebDAV is only part of an overall solution

    • Requires tools, standards, processes and user trust and procedural compliance

    • Have you ever trusted Microsoft Briefcase?

    • Have you ever lost a file and had inadequate backups, or overwritten a newer version?


Version control subset of configuration management

Version Control: subset of Configuration Management

  • Software Configuration Management (SCM) is a bigger discipline covering why changes need to be made – Change Control (CC), as opposed to what version has which changes (Version Control - VC)

  • “(Web) Content Management” (WCM) can be seen as part of the SCM solution, but more to do with delivering the correct content for a user’s needs – matching profiles

  • SCM can be seen as convergence of VC, CC, WCM

  • IEEE standards, BCS Specialist Group

  • Web Content Management (aka Enterprise Content Management) is big business - $10b pa


Who can afford wcm

Who can afford WCM?

  • All Fortune Global 500 companies turn over $13b, so $10m on a WCM solution is <0.1% of turnover!

    • The following is an edited quotation from the Fortune Global500 2005 table which describes the ranking (by turnover) of companies and their profits – both expressed in $m. See http://money.cnn.com/magazines/fortune/global500/2006/full_list/ for current list

  • Audience Participation: Where’s Microsoft in this table?


Hcie2003 case study instant website for picky users

HCIE2003 Case Study: instant website - for picky users

  • A site to be created with

    • zero resources,

    • short timescale

  • www.hcie2003.org

    • (now http://www.bcs-hci.org.uk/hcie2003/ImportantDates.htm )

    • website for a 60-person academic conference

  • Unfortunately the audience are

    • the UK’s HCI lecturers and usability experts

    • No time for design documentation, consultations with client etc

  • Decided to use the new version of Dreamweaver and exploit templates, CSS etc


Lifecycle

Lifecycle

  • A 2-page Word document and a programme in Excel

    • Save as HTML

    • “Clean up Word HTML” command (but in DW3 this had a number of bugs)

    • Chop into manageable amounts for each page

  • Begin to plan the links

  • Begin to create a template

    • Try to avoid individually styling words and paragraphs, use CSS instead

  • Update pages and structure in line with “comments”

  • Then afterwards, keep it linked to ongoing initiatives


Initial scoping reusable prototype

Initial scoping – reusable prototype

  • Accessibility: minimal use of graphics and use ALT text properly

  • <img src=“…” alt="6th HCI Educators Workshop: Effective Teaching and Training in HCI banner with British HCI Group logo”>

  • Initially menu of six links from main page, plus text links


Final front page

Final front page

  • Finally, 8 links in menu

  • All other pages use the DW template

  • Problems?

    • Main page still doesn’t use template and so is out of date!

    • Redefined <body> to use Arial, but forgot to do it in template!


Configuration management

Configuration Management

  • Keep a list of bugs and requests along with dates of notification and resolving

  • Find the document that is the master data and get used to uploading changes from there

    • Numerous versions of the timetable prepared in Excel

    • Wait until timetable is reasonably finalised, before you spend time making the table look “pretty”

  • What follows took about an hour:

  • But what happens if

    • “the morning structure is changed to have an extra session”

    • “the long session to be split into two shorter sessions”


Conclusions in 2003

Conclusions in 2003

  • Dreamweaver MX is a jolt when you are used to version 2/3, less so from version 4

  • The right hand side of the screen has a lot of detailed things and access speed will come with practice

  • You can create a reasonably structured site (if you really have to) without documentation but it might be a bit easier with!

  • What similar conclusions will you reach when you use MX2004, Studio8, Studio9 etc


Assessment

Assessment

  • Coursework requires 25-30 hours, asked you in week 1 to “block out the time in weeks 4-7”.

  • Next week you will find out the exact requirements

  • Produce a web-site to demonstrate your authoring capabilities and to explain/educate about 3D technology standards for the web

    • Very short demonstrations – should take 2 minutes to view the site

    • You are trying to “fire the imagination” of users

    • Pragmatic, tight documentation

  • Due on Thursday 29th March, but plan to finish Fri 23rd!


Quick break

Quick break

  • Clear your minds!

  • Come back soon


So what is web architecture

So what is Web Architecture?

  • A set of fundamental principles that influence all W3 activity

  • Not the same as

    • Information Architecture

    • Computer Systems Architecture

  • www.w3.org/TR/webarch/summary.html

    • There are a lot of principles, constraints and practice issues on the next five slides

    • Highlighted a few for discussion


Webarch summary 1 of 5

WebArch Summary 1 of 5

  • Principle 2 Global Identifiers. Global naming leads to global network effects.

  • practice, 2.1 Identify with URIs. To benefit from and increase the value of the World Wide Web, agents should provide URIs as identifiers for resources.

  • constraint, 2.2 URIs Identify a Single Resource. Assign distinct URIs to distinct resources.

  • practice, 2.3.1 Avoiding URI aliases. A URI owner SHOULD NOT associate arbitrarily different URIs with the same resource.

  • practice, 2.3.1 Consistent URI usage. An agent that receives a URI SHOULD refer to the associated resource using the same URI, character-by-character.

  • practice, 2.4 Reuse URI schemes. A specification SHOULD reuse an existing URI scheme (rather than create a new one) when it provides the desired properties of identifiers and their relation to resources.


Webarch summary 2 of 5

WebArch Summary 2 of 5

  • practice, 2.5 URI opacity. Agents making use of URIs SHOULD NOT attempt to infer properties of the referenced resource.

  • practice, 3.2 Reuse representation formats. New protocols created for the Web SHOULD transmit representations as octet streams typed by Internet media types.

  • constraint, 3.3 Data-metadata inconsistency. Agents MUST NOT ignore message metadata without the consent of the user.

  • practice, 3.3 Metadata association. Server managers SHOULD allow representation creators to control the metadata associated with their representations.

  • principle, 3.4 Safe retrieval. Agents do not incur obligations by retrieving a representation.

  • practice, 3.5 Available representation. A URI owner SHOULD provide representations of the resource it identifies.

  • principle, 3.5 Reference does not imply dereference. An application developer or specification author SHOULD NOT require networked retrieval of representations each time they are referenced.


Webarch summary 3 of 5

WebArch Summary 3 of 5

  • practice, 3.5.1 Consistent representation. A URI owner SHOULD provide representations of the identified resource consistently and predictably.

  • practice, 4.2.1Version information. A data format specification SHOULD provide for version information.

  • practice, 4.2.2 Namespace policy. An XML format specification SHOULD include information about change policies for XML namespaces.

  • practice, 4.2.3 Extensibility mechanisms. A specification SHOULD provide mechanisms that allow any party to create extensions.

  • practice, 4.2.3 Extensibility conformance. Extensibility MUST NOT interfere with conformance to the original specification.

  • practice, 4.2.3 Unknown extensions. A specification SHOULD specify agent behavior in the face of unrecognized extensions.

  • practice, 4.3 Separation of content, presentation, interaction. A specification SHOULD allow authors to separate content from both presentation and interaction concerns.


Webarch summary 4 of 5

WebArch Summary 4 of 5

  • practice, 4.4 Link identification. A specification SHOULD provide ways to identify links to other resources, including to secondary resources (via fragment identifiers).

  • practice, 4.4 Web linking. A specification SHOULD allow Web-wide linking, not just internal document linking.

  • practice, 4.4 Generic URIs. A specification SHOULD allow content authors to use URIs without constraining them to a limited set of URI schemes.

  • practice, 4.4 Hypertext links. A data format SHOULD incorporate hypertext links if hypertext is the expected user interface paradigm.

  • practice, 4.5.3 Namespace adoption. A specification that establishes an XML vocabulary SHOULD place all element names and global attribute names in a namespace.

  • practice, 4.5.4 Namespace documents. The owner of an XML namespace name SHOULD make available material intended for people to read and material optimized for software agents in order to meet the needs of those who will use the namespace vocabulary.


Webarch summary 5 of 5

WebArch Summary 5 of 5

  • constraint, 4.5.5 QNames Indistinguishable from URIs. Do not allow both QNames and URIs in attribute values or element content where they are indistinguishable.

  • practice, 4.5.5 QName Mapping. A specification in which QNames serve as resource identifiers MUST provide a mapping to URIs.

  • practice, 4.5.7 XML and "text/*“. In general, a representation provider SHOULD NOT assign Internet media types beginning with "text/" to XML representations.

  • practice, 4.5.7 XML and character encodings. In general, a representation provider SHOULD NOT specify the character encoding for XML data in protocol headers since the data is self-describing.

  • principle, 5.1 Orthogonality. Orthogonal abstractions benefit from orthogonal specifications.

  • principle, 5.3 Error recovery. Agents that recover from error by making a choice without the user's consent are not acting on the user's behalf.


Co42002 mt4 week 2

Unit 2 Architecture for WWW, WebDAV, Vector Graphics, Bandwidth & Web Design

1 Fireworks

2 Underlying principles

& practice

Tutorial

3 Web Graphics

Standards

SVG

GIF

4 Appropriateness

of Images

JPEG

PNG

5 Web Design

Information

Architecture

Methodology

Profile Users

Platforms

Basic Mistakes


3 web graphics standards

3. Web Graphics Standards

  • Poole & Bradley Chapter 3

    • Parsing: Why differentiate between animated and still graphics – all web graphics are delivered over time and the user sees the screen change?

  • England & Finney Chapter 8

    • A more traditional and detailed examination of graphics themselves, their production. (Much you will have tackled in level 3)


Web graphics the basics gif

Web graphics - the basics: GIF

  • GIF – a patented format (due to LZW) US patent 4,558,302

    • www.unisys.com/about__unisys/lzw

    • Basic patent due to expire 1994, but www.gnu.org/philosophy/gif.html cites patents until 2006

    • “For each registered copy of a program that uses the LZW compression technology, the developer is to pay 1.5% of the sale price of the program to CompuServe, or $0.15, whichever is greater” (http://lpf.ai.mit.edu/Patents/Gif/Gif.html )

  • What’s the big fuss? Photoshop Elements should now be $1 cheaper!


Co42002 mt4 week 2

JPEG

  • Lossy (though that can be scaled)

  • 24 bit colour – great for photos

  • Progressive file loading – an animation effect (bit like interlaced GIF)

  • But no transparency – need to use tricks with backgrounds

  • But patent problems re-emerge – who’s accurate?

    • http://swpat.ffii.org/patents/effects/jpeg/index.en.html

    • http://www.boingboing.net/2006/05/30/jpeg_patent_invalida.html

    • http://en.wikipedia.org/wiki/JPEG#Potential_patent_issues


Co42002 mt4 week 2

PNG

  • Patent–free alternative to GIF

  • Advantages:

    • Supports 24 bit colour

    • Lossless compression

    • Can contain transparency or an alpha channel gradients

    • Can be progressive (interlaced for low-resolution loading)

  • Disadvantages

    • Not yet supported by all browsers

    • Can be large


Svg scalable vector graphics

SVG – Scalable Vector Graphics

  • Now a reality in commercial products

    • Supplies much-needed functionality

    • …and XML

  • For animated as well as still images

  • Can be consumed regardless of vision. Some advantages suggested at

    • wwws.sun.com/software/xml/developers/svg/

    • www.adobe.com/svg/

  • SVG parsing in Flash explained at

    • www.macromedia.com/devnet/flash/articles/parse_svg.html


Co42002 mt4 week 2

Unit 2 Architecture for WWW, WebDAV, Vector Graphics, Bandwidth & Web Design

1 Fireworks

2 2 Underlying principles

& practice

3 Web Graphics

Standards

Fake Logo

Transparency

Scalability

Placeholders/

Image Maps

4 Appropriateness

of Images

5 Web Design


4 appropriate images quality and time

4. Appropriate Images: quality and time

  • What do we mean by appropriate?

    • Culturally acceptable?

    • A moving target (fashion, technical advances)

    • Scalable output

      • Quality v bandwidth trade-off

  • Download delays remain damaging

    • How long would you wait?

    • Does this change if you are:

      • At home, work, university?

      • On a mobile phone at 15p per minute?

  • Limited colour ranges

    • B&W or 16-grey – PDA, mobile phone

    • 256 or 4096 colours – next generation PDA/phone

    • Web-safe palettes (216)

  • Restricted palette can be damaging to brand identity

    • see FakeLogo for an example


Transparency

Transparency

  • Annoying stray pixels around the edge of the logo

  • Caused by anti-aliasing against background colour

  • Can make the work look shoddy, amateurish.

  • You can waste hours painting out each pixel

  • Either require a consistent background colour as part of brand identity, and anti-alias against this

  • Or use rectangular logos!


Placeholders

Placeholders

  • A 2-colour outline “Low Src” graphic will ensure that when the image loads, the screen doesn’t change size.

    • Width and height can also be set in the <IMG> tag

    • <IMG SRC=“file” width=“xx” height=“yy” LOWSRC=“low-res file”>

    • Set these in Dreamweaver’s properties

  • The transition, from low-res to final graphic, is also effectively part of your screen’s “animation”


Co42002 mt4 week 2

Unit 2 Architecture for WWW, WebDAV, Vector Graphics, Bandwidth & Web Design

1 Fireworks

2 2 Underlying principles

& practice

3 Web Graphics

Standards

4 Appropriateness

of Images

5 Web Design

Information

Architecture

Methodology

Profile Users

Platforms

Design Guidelines


Web design considerations

Web Design Considerations

  • Need some sort of structured framework – eg PACT, Scenarios, ISO 13407

  • Fundamental dichotomy: “match content to the users” or “design for universal access”?

  • Avoid the basic mistakes

    • Basic accessibility requirements defined in http://webxact.watchfire.com/ (formerly “Bobby”)

    • Poorly titled, or untitled pages

    • Pages that give no indication if they are current


Project specification

Project Specification

  • Target User

    • Not just “people like you”…or your manager or the client

  • Profile Assumptions - are you already limiting access to the site?

  • Race

  • Culture

  • Impairment

  • Language

  • Religion

  • Reading Age

  • Connection Speed

  • Plug-ins

  • Screen-size

  • Can you think of any others?


Examples of hardware platform constraints

Examples of hardware/platform constraints

  • PC

    • Mac

    • PDA

    • TV

    • Unix

  • OS

    • W9x, NT, XP

    • Others

  • Hardware

    • Soundcard

    • Midi

    • Colour Resolution

  • Screen size

    • 1024 x 768

    • 800 x 600

    • 640 x 480 ...

    • 160 x 120


Project specification1

Project Specification

  • Connection Speed

    • GSM Mobile: 9.6-14.4 kbs

    • GPRS (up to) 53.6 kbs

    • EDGE 200kbs+

    • 3G 384kbs

    • Modem 33-56kbs - typically 4-5kB/s

    • Cable Modem/DSL 0.5-10mbs(but can be capped and choked)

    • Satellite Feed ?kbs

    • Network T1, T3, SuperJanet

  • But remember the speed will be that of the weakest link in the chain!!


Web usage statistics sources but use with caution

Web Usage Statistics – Sources(but use with caution)

http://www.w3schools.com/browsers/browsers_stats.asp

http://www.macromedia.com/shockwave/download/activex/flash/ieWin32400.htm

http://www.websiteoptimization.com/bw/

http://www.upsdell.com/BrowserNews/stat_trends.htm

http://www.thecounter.com/stats/


Bandwidth

Bandwidth

  • On a good day you might just get these speeds for each element you download


Bandwidth1

Bandwidth

  • Remember that users have to

    • Start plug-ins - eg Java

    • Swap applications to/from hard disk

  • And may have to download … or not even be allowed to install …

    • ActiveX files

    • Xtras, fonts etc

    • New versions of plug-ins


Bandwidth2

Bandwidth

  • Server-end capacity is finite as well (and often charged e.g. trigger more than 100MB a month and your ISP charges you more!

  • Routers and links have finite throughput as well

  • Push v Pull technology

    • Push still at early stages

    • Internet Radio appliances appearing

  • To speed up downloads, and to avoid out of date images, don’t duplicate graphics files in each folder - have each only once on a site


Design guidelines

Design Guidelines

  • Define and locate content

    • assume growth

    • locate external links cautiously

  • Page Titles - create them at the time

  • “Last-changed on” dates - a rod for your own back, or a vital affirmation to the reader?

  • Allow, even prompt for, feedback

  • In the last twelve months contribution has become ubiquitous on websites


Design guidelines1

Design Guidelines

  • HTML Compatibility

    • does not exist - trust but verify!

  • Layout and Flow

    • Multimedia always requires management of the user’s “temporal experience”

  • Backgrounds & other colour combinations

    • Vision issues – “colour-blindness”

      • http://www.bbc.co.uk/education/betsie/inverse/tech.html

    • Does content still stand out?


Design guidelines2

Design Guidelines

  • Text

    • Think “advertising”, not “literature”

    • “Big enough” font but avoid scrolling

    • Break conventions at your peril

  • Graphics

    • ALT text for every image (or ALT=“” for shims)

      • See debate at http://www.cs.tut.fi/~jkorpela/html/alt.html#empty

    • “Less is More”

    • Image-maps only work with those who can read maps (or interpret the semiotics)!


Design guidelines3

Design Guidelines

  • CSS – change the styles only in one location for the whole site

  • Frames

    • Present usability & accessibility problems and have been replaced by <DIV> layers

    • At least keep duplicate site for the frame-less

  • Test scripts – what do you test and when?

  • Check what print-outs will look like – in fact, ensure that users can print out (ie don’t suppress menu-bar)

  • Maintenance schedule for the site


Scenario

Scenario

  • A Computing IT agency wants to develop a web-site, and use this to corner the market in fresh graduates with up to date skills in demand by industry

    • Who are the users?

    • How would you research them?

    • What techniques would you use?


Navigation information architecture

Navigation & Information Architecture

  • Basic Issues (think of real-life)

    • What can I do here?

    • Where am I?

    • Where was I?

    • How did I get here?

    • Where can I go?

    • How do I get out of here?

    • Will I be able to get back here if I change my mind?

  • More advanced: How do I accomplish what I want to?


Navigation information architecture1

Navigation & Information Architecture

  • Information Structure

    • Dewey Decimal

    • Book/Record Shops - alphabetic/category

  • How do you organise your books/CDs?

  • Linked items in the mind of the owner

  • Can we design for serendipity?

  • Familiarity breeds contempt? Or Jakob’s law “most people spend most time on other sites”


References

References

  • England, E & Finney, A (2002) Managing Multimedia Book 2 Technical Issues, Addison Wesley 0-201-72899-0

  • Poole, C & Bradley, J (2003) Developer’s Digital Media Reference: New Tools, New Methods, Focal Press 0-240-80501-1

  • Lazar, J. (2001) User-centred Web Development, Jones & Bartlett

  • Tay Vaughan pp 384-7 496-505

  • www.WebPagesThatSuck.com

  • .Net Magazine


Co42002 mt4 week 2

Tutorial

Unit 2 Architecture for WWW, WebDAV, Vector Graphics, Bandwidth & Web Design

1 Fireworks

2 2 Underlying principles

& practice

Version Control

WebDAV

Content Mgmt & Hcie2003

Casestudy

3 Web Graphics

Standards

Fake Logo

Transparency

Scalability

Placeholders/

Image Maps

Web Architecture

SVG

5 Web Design

GIF

4 Appropriateness

of Images

PNG

JPEG

Information

Architecture

Methodology

Profile Users

Platforms

Design Guidelines


Summary now you understand

Summary - Now You Understand...

  • Some underlying principles about how the web is and will be

  • A bit about graphics!

  • Bandwidth & baseline platform / browser limitations on web design

  • Basic user-centred web design guidelines (& limitations)

  • Basics of web design

  • And so will be able to develop appropriate site and information architectures, and create a better web-site


  • Login