content management systems
DESCRIPTION
Creation and maintenance of complex websitesTRANSCRIPT
![Page 1: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/1.jpg)
Content Management Systems:
Creation and maintenance of complex websites
Heiko Desruelle
![Page 2: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/2.jpg)
Complexity of Web development
p. 2
![Page 3: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/3.jpg)
Webpage vs. website
Creating a webpage HTML: Structure CSS: Style JavaScript: Behavior
p. 3
This is only one page of your website!
![Page 4: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/4.jpg)
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
![Page 5: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/5.jpg)
Case study: Cisco
10 million pages, 700 content publishers Every page has same look and feel
Logo, color scheme, fonts
p. 5
![Page 6: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/6.jpg)
Case study: Cisco
Vakgroep Informatietechnologie – Onderzoeksgroep IBCN
Text Video
Images
Documents
Various content types
![Page 7: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/7.jpg)
Case study: Cisco
p. 7
Think globally Content available in multiple languages
![Page 8: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/8.jpg)
Case study: Cisco
User management User registration, profile management Online orders, product support
p. 8
![Page 9: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/9.jpg)
How to manage this complexity?
p. 9
![Page 10: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/10.jpg)
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
![Page 11: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/11.jpg)
Traditional approach
Option 1: Hire a team of webmasters
p. 11
![Page 12: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/12.jpg)
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
![Page 13: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/13.jpg)
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
![Page 14: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/14.jpg)
CMS approach
Option 2: The CMS approach
p. 14
![Page 15: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/15.jpg)
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
![Page 16: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/16.jpg)
Available solutions
Hundreds of CMSs available
p. 16
![Page 17: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/17.jpg)
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
![Page 18: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/18.jpg)
Which CMS to choose?
Vakgroep Informatietechnologie – Onderzoeksgroep IBCNp. 18
Joomla!
Drupal
Wordpress
OpenCMS
Alfresco
Hippo CMS
TYPO3
XOOPS
![Page 19: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/19.jpg)
Which CMS to choose?
Vakgroep Informatietechnologie – Onderzoeksgroep IBCNp. 19
Joomla!
![Page 20: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/20.jpg)
Joomla! introduction
p. 20
![Page 21: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/21.jpg)
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
![Page 22: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/22.jpg)
Joomla! tutorial
p. 22
1. Installation and configuration
2. Content management
3. Navigation
4. Extensions
5. Templates
![Page 23: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/23.jpg)
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
![Page 24: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/24.jpg)
Installation and configuration
BitNami all-in-one installer Includes all necessary software Available for Windows, Mac and Linux
p. 24
![Page 25: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/25.jpg)
Installation and configuration
Your website with sample data This is what visitors see
http://localhost/joomla
p. 25
![Page 26: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/26.jpg)
Installation and configuration
Control panel Private access point, for administration only Requires authentication
http://localhost/joomla/administrator
26
![Page 27: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/27.jpg)
Installation and configuration
Global configuration Website title, keywords, time/date settings, etc.
27
![Page 28: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/28.jpg)
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
![Page 29: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/29.jpg)
Joomla! tutorial
p. 29
1. Installation and configuration
2. Content management
3. Navigation
4. Extensions
5. Templates
![Page 30: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/30.jpg)
Content management
Article management Create, update and remove content
30
![Page 31: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/31.jpg)
Content management
Article editor WYSIWYG editor (What You See Is What You Get) No HTML code required
31
![Page 32: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/32.jpg)
Content management
Sections and categories? Method to organize articles
32
![Page 33: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/33.jpg)
Content management
Section First level categorization
Category More specific categorization Part of a section
Sports
Baseball
Soccer
Tennis
Article
Article
Article
33
![Page 34: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/34.jpg)
Content management
Article Manager Create, publish, remove, set access rights
34
![Page 35: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/35.jpg)
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
![Page 36: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/36.jpg)
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
![Page 37: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/37.jpg)
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
![Page 38: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/38.jpg)
Joomla! tutorial
p. 38
1. Installation and configuration
2. Content management
3. Navigation
4. Extensions
5. Templates
![Page 39: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/39.jpg)
Navigation
Menus Enable users to navigate through content
Menu
Menu
![Page 40: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/40.jpg)
Navigation
Menu Manager Supports many menu types E.g. links to articles, extensions, external URLs
p. 40
![Page 41: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/41.jpg)
Navigation
Menu Manager Supports many menu types E.g. links to articles, external URLs
p. 41
![Page 42: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/42.jpg)
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
![Page 43: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/43.jpg)
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
![Page 44: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/44.jpg)
Joomla! tutorial
p. 44
1. Installation and configuration
2. Content management
3. Navigation
4. Extensions
5. Templates
![Page 45: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/45.jpg)
Extensions
Joomla has an extensible core New functionality can easily be added
Over 6000 Joomla extensions available Forum, blog, download sections, etc.
![Page 46: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/46.jpg)
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
![Page 47: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/47.jpg)
Extensions
Components vs. modules
Department of Information Technology – Broadband Communication Networks (IBCN)
![Page 48: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/48.jpg)
Extensions
Components vs. modules
Department of Information Technology – Broadband Communication Networks (IBCN)
![Page 49: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/49.jpg)
Extensions
How to position modules? http://localhost/joomla/?tp=1
Highlights where the exact positions can be found
![Page 50: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/50.jpg)
Extensions
Exercise 4.1 Search and download 3rd party extensions
Open a new browser window and visithttp://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
![Page 51: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/51.jpg)
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
![Page 52: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/52.jpg)
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
![Page 53: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/53.jpg)
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
![Page 54: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/54.jpg)
Joomla! tutorial
p. 54
1. Installation and configuration
2. Content management
3. Extensions
4. Navigation
5. Templates
![Page 55: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/55.jpg)
Templates
Templates Brand your website, personalize its presentation Content stays the same!
55
![Page 56: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/56.jpg)
Templates
Template Manager Lists all available styles
Installation of additional templates is possible Same approach as other extensions
p. 56
![Page 57: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/57.jpg)
Templates
Template Manager Templates often need some customization Select one of the templates to edit its HTML
and/or CSS
p. 57
![Page 58: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/58.jpg)
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
![Page 59: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/59.jpg)
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
![Page 60: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/60.jpg)
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
![Page 61: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/61.jpg)
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
![Page 62: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/62.jpg)
Joomla! tutorial
p. 62
Resources
![Page 63: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/63.jpg)
Joomla! resources
Support, tutorials http://docs.joomla.org http://www.joomlatutorials.com http://www.youtube.com/results?
search_query=joomla+1.5+tutorial http://forum.joomla.org
All-in-one installation Available for Windows, Mac, Linux http://bitnami.org/stack/joomla
63
![Page 64: Content Management Systems](https://reader036.vdocument.in/reader036/viewer/2022062418/554c8f33b4c905df3c8b5aea/html5/thumbnails/64.jpg)
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