dynamic web sites deco 3001 tutorial 9 – cms presented by ji soo yoon 21 may 2004 slides adopted...

Dynamic Web SitesDECO 3001 Tutorial 9 – CMS

Presented by Ji Soo Yoon21 May 2004

Slides adopted from http://www.ksu.edu/dia/projects/cm/, http://webdesign.about.com/library/weekly/aa021802a.htm, http://aifia.org/files/cms0303.ppt, http://www.psu.edu/webconference/Web2003/Web2003Materials/CmsJohansen.ppt, http://faculty.maxwell.syr.edu/jpgant/PPAEgov_Webdesign.ppt

Consider Business as Usual…

Pagen

Page3

Page2

Page1

HomePage

Templates

Static HTML - Tidy

Adding more pages…

Page1

Page3

Page2

Page1

HomePage

Pagen

Pagen

Pagen

Pagen

Pagen

Pagen

Pagen

Pagen Page

n

Pagen

Pagen

Static HTML - SpaghettiTemplates

Even more pages…

Page1

Page3

Page2

Page1

HomePage

Pagen

Pagen

Pagen

Pagen

Pagen

Pagen

Pagen

Pagen Page

n

Pagen

Pagen

Page1

Page3

Page2

Page1

Pagen

Pagen

Pagen

Pagen

Pagen

Pagen Page

n

Pagen

Pagen

Static HTML - HeartburnTemplates

Solution?

Content Management Systems

ContentDatabase

Our story starts with a database…

Content Management Systems

ContentDatabase

Our story starts with a database…

Welcome, welcome, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blah

…to which we add content

Content Management Systems

ContentDatabase

Our story starts with a database…

Department of Something…

Welcome, welcome, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blah

…to which we add content…and more content (including design elements)

Content Management Systems

ContentDatabase

Our story starts with a database…

• This Way• That Way

• Home

Department of Something…

Welcome, welcome, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blah

…to which we add content…and more content (including design elements)

…and (maybe) navigation tools

Content Management Systems

ContentDatabase

InputForms

Use forms to enter and edit the storyinto the database.

Content Management Systems

ContentDatabase

HTML

InputForms

Content Management Systems

ContentDatabase

HTML

InputForms

• This Way• That Way

• Home

Department of Something…

Welcome, welcome, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blahblah, blah, blah, blah, blah

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

| This Way | That WayHome

Department of Something…

Welcome, welcome, blah blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah , blah, blah, blah, blah, blah

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

Department of Something…

Welcome, welcome, blah blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah , blah, blah, blah, blah, blah

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Content

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

You can format the samecontent for output in manydisplay formats and dataprotocols.

Content

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Content

1. Input Once…

…Output Many Formats

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Content

1a. Correct Once…

…Correct Them All

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Content

Separate Content from Design

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Template&

CSS

Template&

CSS

Template&

CSS

WMLTemplate

TemplateHTML

ClippingCSS

TemplateXMLCSS

Content

DesignSeparate Content from Design

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Content Design

DesignDatabase

Template

Separate Content from Design

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Content Design

DesignDatabase

Template

Separate Content… …from Design

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Content Design

DesignDatabase

Template

Separate Content… CSS

…from Design

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Content Design

DesignDatabase

Template

Separate Content… CSS

…from Design

Site-Wide Changes

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Content Design

DesignDatabase

Template

Separate Content…

DesignForm

CSS

…from Design

Site-Wide Changes

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Design

DesignDatabase

Template

InputForms

InputForms

InputForms

InputForms Content

DesignForms

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Design

DesignDatabase

Template

InputForms

InputForms

InputForms

InputForms Content

Expert

Staff

Faculty

User-drivenFAQ

Syndicated NewsDesignForms

Content Management Systems

ContentDatabase

HTML

InputForms

ADA

Print

WML

PDAProprietary

RSS-XML

Design

DesignDatabase

Template

2. Delegate Content Creation

You work on SITE DESIGN& Management

InputForms

InputForms

InputForms

InputForms Content

Expert

Staff

Faculty

User-drivenFAQ

Syndicated NewsDesignForms

In summary…

Benefits of CMS

“Single source” of content

Reusability of content Versioning Easier maintenance Consistency Easier authoring and

publishing

CMS - Features

Data Management Web Life-Cycle Management Web Templating Personalisation Syndication Digital Rights Management

Data Management

Primary function of CMS Manage content on web sites Most CMSs use XML to tag the

content and database connectivity

Web Life-Cycle Management

Ability for content managers to approve and validate content prior to publishing on the web

Content managers can also control when and where the content goes online and removed from the web

Web Templating

Web pages showing contents created from templates

Separating content design and visual presentation of content

Personalisation

Easier to create personalised pages for web site visitors once content is stored into CMS

“Skinning” may be used for this purpose

Syndication

Allows sharing of web content with other corporations – made possible by separating content from design

Most popular: RSS (Really Simple Syndication) and XML

Digital Rights Management

CMSs provide the background for managing the rights to your content

Resources

Books Content Management Bible

http://www.amazon.com/exec/obidos/ASIN/076454862X/theasilomarin-20

Managing Enterprise Content http://www.managingenterprisecontent.com/

On the Web CMSWatch http://www.cmswatch.com/ Metadata & Taxonomies for a More Flexible Information Architecture

http://www.asis.org/Conferences/Summit2002/IA_Summit_031602.ppt Smarter Content Publishing

http://www.digital-web.com/features/feature_2002-08.shtml Ontology Development and Relationship Modeling for Enterprises and

Enterprise Websites, Brett Lider (IA Summit 2003) Email Lists

IA CMS http://groups.yahoo.com/group/ia-cms/ CMS List http://www.cms-list.org/

Appendix:Just For Your Information

Web Site Construction and Evaluation Process

Who is Involved in Web Site Design?

Key Questions for Planning Site

What is the mission of your organization? How will creating a Web site support your

mission? What are your immediate goals for the site? What are your long-term goals for the site? What Web-related strategies will you use to

achieve those goals? How will you measure the success of your

site?

What Are Your Goals?

Make a short statement about your goals including strategies for designing the Web site length of design, construction and evaluation

periods measures used to evaluate the success of plans for long-term editorial management and

technical maintenance Remember

on-going dynamic process

Know Your Audience

Identify potential visitors of your Web site site must meet their needs and expectations well designed site should meet a range of skills

and interests Users include

Web surfers Novice and occasional users Expert and frequent users International users Physically challenged

Additional Steps

Design Critiques Identify other Web

sites to use as models

See design from the user’s point of view

Each team member brings a list of favorite sites and shares with group

Content Inventory Assess the content

needed for site Hardest and most

time consuming part of project

Start early

Site Development Process

Site definition and planning Information architecture Site design Site construction Site marketing Tracking, evaluation and maintenance

Site Production Checklist

Production issues Technology Web server support Budgeting

Production Issues

What are the purpose and goals for the site? Who is the target audience for the site, and what do

they want? Will your site production team be composed of in-

house people, outside contractor, or a mix of the two?

Who will manage the process? Who are your primary content experts? Who will be the liaison to any outside contractors? Who will function as the Webmaster?

Technology

What browsers and operating systems should your site support?

What is the network bandwidth of average site visitors?

What advanced features will be used? How will readers reach the support

personnel? How will you handle database support? What type of A/V content will be used?

Additional Factors

Web Server Support In-house or outsource Domain name Site traffic constraints 24/7 support &

maintenance Stats on use Database coordination

Budgeting Salaries and benefits HW/SW Staff training Outsourcing fees Ongoing support

Webmaster Server and technical Database

New content and updates

STEP 2: Information Architecture

Focus - Detail the content and organization of the Web site Inventory all existing content Describe what new content is required Define the organizational structure of the site

Build a small prototype Used to test site navigation and user interface See how site looks and how navigation interface

supports information design

STEP 3: Site Design

Create and approve page design and overall design standards

Commission illustrations, photography and graphics

Develop content Conduct programming, database

design, and data entry

STEP 4: Site Construction

Web site is filled with content Create database and programming

components Beta test the site

STEP 5: Site Marketing

Site should be integral part of marketing campaign and corporate communications programs.

URL should appear on every piece of correspondence

STEP 6: Tracking, Evaluation, and Maintenance

Record information about site visitors to determine how many visitors over a given time how many pages were requested for viewing appeal of pages and their format

Maintenance Update site Develop new content

The End.