Dynamic Web Sites DECO 3001 Tutorial 9 – CMS Presented by Ji Soo Yoon 21 May 2004 Slides adopted from ppt, ppthttp://faculty.maxwell.syr.edu/jpgant/PPAEgov_Webdesign.ppt

Consider Business as Usual… Page n Page 3 Page 2 Page 1 Home Page Templates Static HTML - Tidy

Adding more pages… Page 1 Page 3 Page 2 Page 1 Home Page n Page n Page n Page n Page n Page n Page n Page n Page n Page n Page n Static HTML - Spaghetti Templates

Even more pages… Page 1 Page 3 Page 2 Page 1 Home Page n Page n Page n Page n Page n Page n Page n Page n Page n Page n Page n Page 1 Page 3 Page 2 Page 1 Page n Page n Page n Page n Page n Page n Page n Page n Page n Static HTML - Heartburn Templates

Solution?

Content Management Systems Content Database Our story starts with a database…

Content Management Systems Content Database Our story starts with a database… Welcome, welcome, blah blah, blah, blah, blah, blah …to which we add content

Content Management Systems Content Database Our story starts with a database… Department of Something… Welcome, welcome, blah blah, blah, blah, blah, blah …to which we add content …and more content (including design elements)

Content Management Systems Content Database Our story starts with a database… This Way That Way Home Department of Something… Welcome, welcome, blah blah, blah, blah, blah, blah …to which we add content …and more content (including design elements) …and (maybe) navigation tools

Content Management Systems Content Database Input Forms Use forms to enter and edit the story into the database.

Content Management Systems Content Database HTML Input Forms

Content Management Systems Content Database HTML Input Forms This Way That Way Home Department of Something… Welcome, welcome, blah blah, blah, blah, blah, blah

Content Management Systems Content Database HTML Input Forms ADA | This Way | That Way Home 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 Content Database HTML Input Forms 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 Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML Content

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML You can format the same content for output in many display formats and data protocols. Content

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML Content 1. Input Once… …Output Many Formats

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML Content 1 a. Correct Once… …Correct Them All

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML Content Separate Content from Design

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML Template & CSS Template & CSS Template & CSS WML Template HTML Clipping CSS Template XML CSS Content Design Separate Content from Design

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML ContentDesign Database Template Separate Content from Design

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML ContentDesign Database Template Separate Content……from Design

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML ContentDesign Database Template Separate Content… CSS …from Design

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML ContentDesign Database Template Separate Content… CSS …from Design Site-Wide Changes

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML ContentDesign Database Template Separate Content… Design Form CSS …from Design Site-Wide Changes

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML Design Database Template Input Forms Input Forms Input Forms Input Forms Content Design Forms

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML Design Database Template Input Forms Input Forms Input Forms Input Forms Content Expert Staff Faculty User-driven FAQ Syndicated News Design Forms

Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML Design Database Template 2. Delegate Content Creation You work on SITE DESIGN & Management Input Forms Input Forms Input Forms Input Forms Content Expert Staff Faculty User-driven FAQ Syndicated News Design Forms

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 20  Managing Enterprise Content On the Web  CMSWatch  Metadata & Taxonomies for a More Flexible Information Architecture  Smarter Content Publishing  Ontology Development and Relationship Modeling for Enterprises and Enterprise Websites, Brett Lider (IA Summit 2003) Lists  IA CMS  CMS List

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.