Content Management Systems

Content Management Systems:

Creation and maintenance of complex websites

Heiko Desruelle

Complexity of Web development

p. 2

Webpage vs. website

Creating a webpage HTML: Structure CSS: Style JavaScript: Behavior

p. 3

This is only one page of your website!

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

Case study: Cisco

10 million pages, 700 content publishers Every page has same look and feel

Logo, color scheme, fonts

p. 5

Case study: Cisco

Vakgroep Informatietechnologie – Onderzoeksgroep IBCN

Text Video

Images

Documents

Various content types

Case study: Cisco

p. 7

Think globally Content available in multiple languages

Case study: Cisco

User management User registration, profile management Online orders, product support

p. 8

How to manage this complexity?

p. 9

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


Option 1: Hire a team of webmasters

p. 11


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

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

CMS approach

Option 2: The CMS approach

p. 14

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

Available solutions

Hundreds of CMSs available

p. 16

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


Vakgroep Informatietechnologie – Onderzoeksgroep IBCNp. 18

Joomla!

Drupal

Wordpress

OpenCMS

Alfresco

Hippo CMS

TYPO3

XOOPS


Vakgroep Informatietechnologie – Onderzoeksgroep IBCNp. 19

Joomla!

Joomla! introduction

p. 20


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

Joomla! tutorial

p. 22

1. Installation and configuration

2. Content management

3. Navigation

4. Extensions

5. Templates

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


BitNami all-in-one installer Includes all necessary software Available for Windows, Mac and Linux

p. 24


Your website with sample data This is what visitors see

http://localhost/joomla

p. 25


Control panel Private access point, for administration only Requires authentication

http://localhost/joomla/administrator

26


Global configuration Website title, keywords, time/date settings, etc.

27


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

Joomla! tutorial

p. 29



3. Navigation

4. Extensions

5. Templates

Content management

Article management Create, update and remove content

30

Content management

Article editor WYSIWYG editor (What You See Is What You Get) No HTML code required

31

Content management

Sections and categories? Method to organize articles

32

Content management

Section First level categorization

Category More specific categorization Part of a section

Sports

Baseball

Soccer

Tennis

Article

Article

Article

33

Content management

Article Manager Create, publish, remove, set access rights

34

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

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

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

Joomla! tutorial

p. 38



3. Navigation

4. Extensions

5. Templates

Navigation

Menus Enable users to navigate through content

Menu

Menu

Navigation

Menu Manager Supports many menu types E.g. links to articles, extensions, external URLs

p. 40

Navigation

Menu Manager Supports many menu types E.g. links to articles, external URLs

p. 41

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

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

Joomla! tutorial

p. 44



3. Navigation

4. Extensions

5. Templates

Extensions

Joomla has an extensible core New functionality can easily be added

Over 6000 Joomla extensions available Forum, blog, download sections, etc.

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

Extensions

Components vs. modules

Department of Information Technology – Broadband Communication Networks (IBCN)

Extensions

Components vs. modules

Department of Information Technology – Broadband Communication Networks (IBCN)

Extensions

How to position modules? http://localhost/joomla/?tp=1

Highlights where the exact positions can be found

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

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

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

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

Joomla! tutorial

p. 54



3. Extensions

4. Navigation

5. Templates

Templates

Templates Brand your website, personalize its presentation Content stays the same!

55

Templates

Template Manager Lists all available styles

Installation of additional templates is possible Same approach as other extensions

p. 56

Templates

Template Manager Templates often need some customization Select one of the templates to edit its HTML

and/or CSS

p. 57

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

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

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

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

Joomla! tutorial

p. 62

Resources

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

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