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
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
WML
PDAProprietary
RSS-XML
Content
Content Management Systems
ContentDatabase
HTML
InputForms
ADA
WML
PDAProprietary
RSS-XML
You can format the samecontent for output in manydisplay formats and dataprotocols.
Content
Content Management Systems
ContentDatabase
HTML
InputForms
ADA
WML
PDAProprietary
RSS-XML
Content
1. Input Once…
…Output Many Formats
Content Management Systems
ContentDatabase
HTML
InputForms
ADA
WML
PDAProprietary
RSS-XML
Content
1a. Correct Once…
…Correct Them All
Content Management Systems
ContentDatabase
HTML
InputForms
ADA
WML
PDAProprietary
RSS-XML
Content
Separate Content from Design
Content Management Systems
ContentDatabase
HTML
InputForms
ADA
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
WML
PDAProprietary
RSS-XML
Content Design
DesignDatabase
Template
Separate Content from Design
Content Management Systems
ContentDatabase
HTML
InputForms
ADA
WML
PDAProprietary
RSS-XML
Content Design
DesignDatabase
Template
Separate Content… …from Design
Content Management Systems
ContentDatabase
HTML
InputForms
ADA
WML
PDAProprietary
RSS-XML
Content Design
DesignDatabase
Template
Separate Content… CSS
…from Design
Content Management Systems
ContentDatabase
HTML
InputForms
ADA
WML
PDAProprietary
RSS-XML
Content Design
DesignDatabase
Template
Separate Content… CSS
…from Design
Site-Wide Changes
Content Management Systems
ContentDatabase
HTML
InputForms
ADA
WML
PDAProprietary
RSS-XML
Content Design
DesignDatabase
Template
Separate Content…
DesignForm
CSS
…from Design
Site-Wide Changes
Content Management Systems
ContentDatabase
HTML
InputForms
ADA
WML
PDAProprietary
RSS-XML
Design
DesignDatabase
Template
InputForms
InputForms
InputForms
InputForms Content
DesignForms
Content Management Systems
ContentDatabase
HTML
InputForms
ADA
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
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.