Content Management Systems

2,961 views

Published on

Creation and maintenance of complex websites

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,961
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
53
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Content Management Systems

  1. 1. Content Management Systems: Creation and maintenance of complex websites Heiko Desruelle
  2. 2. Complexity of Web development p. 2
  3. 3. Webpage vs. website  Creating a webpage  HTML: Structure  CSS: Style  JavaScript: Behavior p. 3  This is only one page of your website!
  4. 4. Webpage vs. website  Creating a website  Complexity increases rapidly  Number of pages  News, contact, FAQs, products  Content types  Text, images, audio, video, documents  Features  Payment handling, multi-language support  Optimized customer reach  Search engine optimizations p. 4
  5. 5. Case study: Cisco  10 million pages, 700 content publishers  Every page has same look and feel  Logo, color scheme, fonts p. 5
  6. 6. Case study: Cisco Vakgroep Informatietechnologie – Onderzoeksgroep IBCN Text Video Images Documents  Various content types
  7. 7. Case study: Cisco p. 7  Think globally  Content available in multiple languages
  8. 8. Case study: Cisco  User management  User registration, profile management  Online orders, product support p. 8
  9. 9. How to manage this complexity? p. 9
  10. 10. Traditional approach  Option 1: Hire a team of webmasters  Webmasters bridge the gap between content authors and the website  Webmasters collect all content and wrap it in a HTML structure  Outdated approach, but still commonly used p. 10
  11. 11. Traditional approach  Option 1: Hire a team of webmasters p. 11
  12. 12. Traditional approach  Content publication requires technical know-how  Authors send their content to the webmaster  Webmaster creates appropriate HTML code  Slow and inefficient process  E.g. news services: fast publication is required  “It takes IT two weeks to post my content” p. 12
  13. 13. CMS approach  Option 2: The CMS approach  CMS = Content Management System  Specialized software to bridge the gap between content authors and the website p. 13
  14. 14. CMS approach  Option 2: The CMS approach p. 14
  15. 15. CMS approach  Allows non-technical users to instantly publish content  News reporters, bloggers, ...  Efficiently add or edit content  Don’t have to wait for webmaster’s intervention  77% of the content authors no longer needs intervention from IT department when updating website (survey Aberdeen Group)  Right person is working on the right parts  Content authors are dealing with the content  Webmasters can focus on the technical issues 15
  16. 16. Available solutions  Hundreds of CMSs available p. 16
  17. 17. Which CMS to choose?  Depends on your requirements  Usability for the expected authors  Self-sufficiency for site administrators  Development requirements  Learning curve  …  Functionality vs. complexity p. 17
  18. 18. Which CMS to choose? Vakgroep Informatietechnologie – Onderzoeksgroep IBCN p. 18 Joomla! Drupal Wordpress OpenCMS Alfresco Hippo CMS TYPO3 XOOPS
  19. 19. Which CMS to choose? Vakgroep Informatietechnologie – Onderzoeksgroep IBCN p. 19 Joomla!
  20. 20. Joomla! introduction p. 20
  21. 21. Which CMS to choose?  Award-winning CMS  Estimated to power over 50 million websites  Vodafone, Sprint USA, Yamaha, MTV Quizilla, ...  Straightforward learning curve  Many extensions  Easily add new functionality, change styling  Open source  Free to use, huge support community p. 21
  22. 22. Joomla! tutorial p. 22 1. Installation and configuration 2. Content management 3. Navigation 4. Extensions 5. Templates
  23. 23. Installation and configuration  Joomla! Version 1.5  Server requirements  Apache HTTP server  PHP  MySQL database  Don’t panic: Use the all-in-one installer  http://bitnami.org/stack/joomla p. 23
  24. 24. Installation and configuration  BitNami all-in-one installer  Includes all necessary software  Available for Windows, Mac and Linux p. 24
  25. 25. Installation and configuration  Your website with sample data  This is what visitors see  http://localhost/joomla p. 25
  26. 26. Installation and configuration  Control panel  Private access point, for administration only  Requires authentication  http://localhost/joomla/administrator 26
  27. 27. Installation and configuration  Global configuration  Website title, keywords, time/date settings, etc. 27
  28. 28. Installation and configuration  Exercise 1  Installation  Download the all-in-one Joomla installer  Install a local copy of the CMS  Configuration  Log in to the backend of your new website  Select the “General Configuration” option  Set your website’s name and description  Set the correct time zone  Apply changes p. 28
  29. 29. Joomla! tutorial p. 29 1. Installation and configuration 2. Content management 3. Navigation 4. Extensions 5. Templates
  30. 30. Content management  Article management  Create, update and remove content 30
  31. 31. Content management  Article editor  WYSIWYG editor (What You See Is What You Get)  No HTML code required 31
  32. 32. Content management  Sections and categories?  Method to organize articles 32
  33. 33. Content management  Section  First level categorization  Category  More specific categorization  Part of a section Sports Baseball Soccer Tennis Article Article Article 33
  34. 34. Content management  Article Manager  Create, publish, remove, set access rights 34
  35. 35. Content management  Exercise 2.1  Content organization  Use the “Section Manager” and “Category Manager” to create the following content hierarchy p. 35 Sports Baseball Soccer Tennis Section Categories
  36. 36. Content management  Exercise 2.2  Article creation  Go back to the control panel  Click “Add New Article” – Create an article for one of the sports categories – Publish the article on the frontpage – Save your changes  Check your website’s frontpage p. 36
  37. 37. Content management  Exercise 2.3  Article management  Navigate to the “Article Manager”  Select all sample articles and remove them  Check your website’s frontpage p. 37
  38. 38. Joomla! tutorial p. 38 1. Installation and configuration 2. Content management 3. Navigation 4. Extensions 5. Templates
  39. 39. Navigation  Menus  Enable users to navigate through content Menu Menu
  40. 40. Navigation  Menu Manager  Supports many menu types  E.g. links to articles, extensions, external URLs p. 40
  41. 41. Navigation  Menu Manager  Supports many menu types  E.g. links to articles, external URLs p. 41
  42. 42. Navigation  Exercise 3.1  Create a new menu item  In your website’s backend, click the “Menus” option  Select one of the available menus, e.g. “Main menu”  Click “New” to add a new menu item  Joomla will list all possible types of menu items  Select “Articles -> Article Layout” to create an item that links to a specific article  Specify the required parameters – The item’s title – The article that is linked to (in the right column)  Save your changes  Check your website’s frontpage Vakgroep Informatietechnologie – Onderzoeksgroep IBCN p. 42
  43. 43. Navigation  Exercise 3.2  Change the default menu item  The default menu item defines the homepage of your site, i.e. the page that is shown when you visit http://localhost/joomla  This item is marked with a star  To change the default menu item, select the menu item you’ve just created and click “Default”  Verify the changes by refreshing your homepage p. 43
  44. 44. Joomla! tutorial p. 44 1. Installation and configuration 2. Content management 3. Navigation 4. Extensions 5. Templates
  45. 45. Extensions  Joomla has an extensible core  New functionality can easily be added  Over 6000 Joomla extensions available  Forum, blog, download sections, etc.
  46. 46. Extensions Components  Main building blocks for your website  Only one component per page  E.g. articles, forum, download section, etc. Modules  Small and simple blocks of additional information  Placed around the component  E.g. latest news, list of who’s online, etc. Plugins  Run in the background  E.g. hide email addresses to prevent spam p. 46
  47. 47. Extensions  Components vs. modules Department of Information Technology – Broadband Communication Networks (IBCN)
  48. 48. Extensions  Components vs. modules Department of Information Technology – Broadband Communication Networks (IBCN)
  49. 49. Extensions  How to position modules?  http://localhost/joomla/?tp=1  Highlights where the exact positions can be found
  50. 50. Extensions  Exercise 4.1  Search and download 3rd party extensions  Open a new browser window and visit http://extensions.joomla.org  This repository contains +- 6000 Joomla extensions  Search for the RokQuickCart component, a shopping cart extension  Download the zip file (do not unpack it!) p. 50
  51. 51. Extensions  Exercise 4.2  Install new extensions  Select the “Install/Uninstall” option from the “Extensions” menu in your website’s backend – Click the “Browse” button and select one of the downloaded zip files – Click “Upload File & Install”  The extension should be installed  Repeat the previous steps for all other extensions you’ve downloaded p. 51
  52. 52. Extensions  Exercise 4.3  Configure a component  Let’s configure the new RokQuickCart component  Select the component’s name in the “Extensions” menu of your website’s backend – Edit the products’ order – Unpublish the sample DVDs – Create some new product items  Make the component accessible for visitors – Create a new menu item that links to RokQuickCart (as described in exercise 3.1)  Verify the changes to your website p. 52
  53. 53. Extensions  Exercise 4.4  Add a new module  In this exercise, we will add a login module  Select the “Module Manager” option from the “Extensions” menu in your website’s backend  Click “New”  Joomla will list all available module types  Select “Login” and edit the required parameters – The module’s title – Its position (we want it in the right column!)  Save your changes  Check your website’s frontpage p. 53
  54. 54. Joomla! tutorial p. 54 1. Installation and configuration 2. Content management 3. Extensions 4. Navigation 5. Templates
  55. 55. Templates  Templates  Brand your website, personalize its presentation  Content stays the same! 55
  56. 56. Templates  Template Manager  Lists all available styles  Installation of additional templates is possible  Same approach as other extensions p. 56
  57. 57. Templates  Template Manager  Templates often need some customization  Select one of the templates to edit its HTML and/or CSS p. 57
  58. 58. Templates  Exercise 5.1  Change the active template  Select the “Template Manager” option from the “Extensions” menu in your website’s backend  The default template is marked with a star  To change the active template, select e.g. the “beez” template and click “Default”  Verify the changes by refreshing your homepage p. 58
  59. 59. Templates  Exercise 5.2  Modify a template’s HTML and CSS  Select the “Template Manager” option from the “Extensions” menu in your website’s backend  Click the “beez” link to edit this template  Select “Edit HTML”  This will return an editor to modify the template’s HTML structure – Add a copyright notice – Remove the buttons to modify the font-size (at the top of the page)  Save your changes p. 59
  60. 60. Templates  Exercise 5.2 cont’d  Select “Edit CSS”  This will return an editor to modify the template’s stylesheets – Change the background color to black – Text alignment: Justify the text in paragraphs (i.e. “P” elements)  Save your changes p. 60
  61. 61. Templates  Exercise 5.3  Search and install 3rd party templates  Search the following repositories for a template – http://www.joomla24.com – http://www.themesbase.com/Joomla-Templates – http://www.joomlashack.com/free-joomla-templates – http://www.siteground.com/joomla-hosting/joomla15- templates  Download the zip file (do not unpack it!)  You can follow the steps described in exercise 4.2 to install this new template  Make it the default template  Customize its look and feel p. 61
  62. 62. Joomla! tutorial p. 62 Resources
  63. 63. Joomla! resources  Support, tutorials  http://docs.joomla.org  http://www.joomlatutorials.com  http://www.youtube.com/results?search_query=joomla+1.5+tu torial  http://forum.joomla.org  All-in-one installation  Available for Windows, Mac, Linux  http://bitnami.org/stack/joomla 63
  64. 64. Joomla! resources  Extension directories  http://extensions.joomla.org (~6000 extensions!)  http://www.rockettheme.com/extensions-joomla  ...  Template directories  http://www.joomla24.com  http://www.themesbase.com/Joomla-Templates  http://www.joomlashack.com/free-joomla-templates  http://www.siteground.com/joomla-hosting/joomla15-templates  ... !!! Only use Joomla! 1.5 extensions/templates 64

×