1. Dynamic Web Sites DECO 3001 Tutorial 9 – CMS Presented by Ji Soo Yoon 21 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.ppthttp://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. ppthttp://faculty.maxwell.syr.edu/jpgant/PPAEgov_Webdesign.ppt

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

3. 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

4. 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

5. Solution?

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

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

8. 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)

9. 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

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

11. Content Management Systems Content Database HTML Input Forms

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

13. 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

14. 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

15. Content Management Systems Content Database HTML Input Forms ADA Print WML PDA Proprietary RSS- XML Content

16. 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

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

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

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

20. 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

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

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

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

24. 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

25. 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

26. 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

27. 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

28. 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

29. In summary…

30. Benefits of CMS “Single source” of content Reusability of content Versioning Easier maintenance Consistency Easier authoring and publishing

31. CMS - Features Data Management Web Life-Cycle Management Web Templating Personalisation Syndication Digital Rights Management

32. Data Management Primary function of CMS Manage content on web sites Most CMSs use XML to tag the content and database connectivity

33. 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

34. Web Templating Web pages showing contents created from templates Separating content design and visual presentation of content

35. Personalisation Easier to create personalised pages for web site visitors once content is stored into CMS “Skinning” may be used for this purpose

36. Syndication Allows sharing of web content with other corporations – made possible by separating content from design Most popular: RSS (Really Simple Syndication) and XML

37. Digital Rights Management CMSs provide the background for managing the rights to your content

38. 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/

39. Appendix: Just For Your Information

40. Web Site Construction and Evaluation Process

41. Who is Involved in Web Site Design?

42. 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?

43. 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

44. 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

45. 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

46. Site Development Process Site definition and planning Information architecture Site design Site construction Site marketing Tracking, evaluation and maintenance

47. Site Production Checklist Production issues Technology Web server support Budgeting

48. 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?

49. 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?

50. 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

51. 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

52. 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

53. STEP 4: Site Construction Web site is filled with content Create database and programming components Beta test the site

54. STEP 5: Site Marketing Site should be integral part of marketing campaign and corporate communications programs. URL should appear on every piece of correspondence

55. 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

56. The End.