U N R A V E L I N G C M S

W E B D E S I G N

P R E S E N T E D B Y K A R I N C A R L S O N , M O U S

Joomla!

Karin Carlson, MOUS karincarlson.net karincarlson@mts.net (204) 774-5757 cell: 997-3297

What This Presentation Covers

Overview and History of Joomla!

Big Concepts

Installation and Setup

HTML vs. Joomla!

Templates

Modules

Sections, Categories and Menus

Pictures

Users

Plugins and Extensions

Backing Up

Upgrading

Demos on all of the above, plus: adding content and users

using a calendar

subscribing to RSS feed

social networking buttons

two live sites: one empty and one populated, to demo content addition and manipulation

Questions, of course

T H I S P R E S E N T A T I O N W I L L B E A V A I L A B L E E L E C T R O N I C A L L Y L A T E R , S O D O N ’ T K I L L

Y O U R S E L F M A K I N G N O T E S .

S I T B A C K R E L A X A N D E N J O Y T H E R I D E !

Hang on – here we go!

W H A T ’ S J O O M L A ! A L L A B O U T , A N Y W A Y

Overview of Joomla!

Overview of Joomla!

Joomla is a free and open source content management system (CMS) for publishing content

Content is stored in a MySQL database

Menus and links pull content according to how it’s “filed” in the database by Categories & Sections

Overview of Joomla!

Joomla is written in PHP

Uses object-oriented programming (OOP) techniques and software design patterns

Includes features such as page caching, RSS feeds, printable versions of pages, news flashes, blogs, polls, search, and support for language internationalization.

O R , H O W T H E D E V E L O P E R S T O O K T H E I R T O Y S A N D M A D E T H E I R O W N C O M P A N Y …

History

History of Joomla!

Was Mambo (another open source CMS)

The developers claimed (among other things) that their company, Miro International, “included provisions that violated core open sources values”

Developers created OpenSourceMatters.org

History of Joomla!

On September 1, 2005 the new name, “Joomla!,” was announced.

It is the Romanized spelling of the Swahili word jumla meaning “all together” or “as a whole.”

Within its first year of release, Joomla had been downloaded 2.5 million times.

W H Y S H O U L D I C O N S I D E R A C O N T E N T M A N A G E M E N T S Y S T E M ?

G I V E M E T H E B I G P I C T U R E , T E A C H

Why go with a CMS

Why Joomla!

Users can interact with the site Easy to create polls,

calendars, search, etc.

Users can add content themselves Users are given certain

permissions to add or edit information in the site

Optional log in the “front door” as well as administrative “back door”

Why Joomla!

Lots of cool built-in functions pdf/print/email buttons

social networking share

RSS feed

etc.

Easy to expand functionality with free (or cheap) plug-ins / extensions

Over 6,000 free and commercial extensions and plug-ins are available

And I don’t need to know web stuff, right?

You will need some basic HTML and CSS knowledge, even if you use a WYSIWYG editor

Basic HTML tags like <p>, <img>, <a> and how they work

Understand what a “class” and “id” are and how to use them in HTML

Understand how to find the formatting you want to adjust in CSS to change things like header height, colors, and text attributes

You will especially need CSS if you want to change the template or create your own

T R A D I T I O N A L W E B P A G E S V S . C O N T E N T M A N A G E M E N T S Y S T E M

HTML vs. Joomla!

HTML Joomla!

Need an editor, usually dedicated software, to create and edit pages, especially for WYSIWYG interface

Individual pages contain the page text

Can edit content with any Internet Browser (FireFox, Opera, Internet Explorer, etc.)

Content is stored in a database

HTML vs. Joomla!

HTML Joomla!

One HTML page for every page in the website

Content the same every time you visit the page

Menus & links call content according to sections & categories

Content changes according to articles submitted

HTML vs. Joomla!

HTML Joomla!

The main (or home) page is called “index.html”

Contains all the text shown on the first / home page of the website

index.php describes where the content goes by describing where the module positions go

Doesn’t contain webpage text

HTML vs. Joomla!

HTML index.html Code Example

index.php Code Example

H O W C O N T E N T I S O R G A N I Z E D A N D C A L L E D I N J O O M L A !

Sections, Categories & Menus

Content vs. Web Pages

Terminology is different:

HTML = “web page”

Joomla! = “content” and “articles”

Joomla content organized in the database by assigning each article to a Category, which is assigned a Section

Sections and Categories

Section

Category

Article

Article

Article

Category

Article

Article

Sections and Categories

Communication

Announcements

Meeting Rescheduled

Picnic this Saturday

Communicator Community

News

Menus

Menus control which content is shown on the page

There is a Main Menu, and you can create your own additional menus

Some menus can be hidden from users unless they are logged into the site

Menu Manager

Example menu choices are:

Display all items in a Category as List or Blog

Display all Categories in a Section as List or Blog

Display one article

Can be used for custom HTML

Example is Communication link in main menu

C O N T E N T S E P A R A T E F R O M F O R M A T T I N G

C O M E S I N T O G L O R Y

Templates

Web “pages” = index.php + database

Style of site = template + image files

Joomla! sites do not have static pages, except for the index.php which describes the location of the content but not the content itself

Template controls the look of the site (fonts, colors, layout)

Update the look and feel of your site instantly by replacing template

Won’t affect the content stored in the

Templates can be designed adhering to web standards for usability = fast uploads and accessible

Separation of Content and Formatting

What’s in a Template?

Folders:

CSS

HTML

images

js (javascript)

styles (css files)

component.php

index.php

favicon.ico

templateDetails.xml

templateDetails.xml

A list of all files used in the template: php, css, xml, images, positions, colors

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_thumbnail.png</filename>

<filename>params.ini</filename>

<filename>images/mw_shadow_blue_r.png</filename>

<filename>images/spacer.png</filename>

<filename>css/index.html</filename>

<filename>css/template.css</filename>

<filename>css/template_rtl.css</filename>

<filename>css/editor.css</filename>

<filename>css/ieonly.css</filename>

Obtaining Templates

Joomla! comes with pre-installed templates you can tweak and design

Many templates are open source, free, or at low cost

Careful to get well designed templates that adhere to web standards such as: no tables

CSS for all formatting (classes and ids)

minimum of script requirements (javascript)

other helpful features such as text enlarge buttons

Careful to have well designed and commented CSS files or you will lose your mind finding the code you need

J A P U R I T Y T E M P L A T E A S U S E D I N

H T T P : / / U U W I N N I P E G . M B . C A

H T T P : / / U U W I N N I P E G . M B . C A / ? T P = 1

Module Positions

Modules

Modules are containers for content

Every template defines module “positions”

Tip: You can see the module positions by typing “?tp=1” after your URL

Changing templates will move some content as certain positions move

Not all templates have the same positions

Some module positions (like breadcrumbs, header, footer) are standard in all templates

japurity Module Positions

japurity Module Positions

Module positions Component isn’t a module

position. It containts site content /articles.

Index.php Example

Divs are placeholders for the modules. Their size and position are defined in the CSS file(s) – the “id”

is the name of their style.

Module Manager

H O W T O I N S T A L L J O O M L A ! O N Y O U R W E B S I T E

T H I S I S A N O V E R V I E W . F O R I N D E P T H I N S T R U C T I O N S P L E A S E S E E :

h t t p : / / d o c s . j o o m l a . o r g / J o o m l a _ I n s t a l l a t i o n

Installation

What’s Involved

Download the latest stable version of Joomla! at: http://help.joomla.org/content/category/15/99/132/

Set up your server (if you have your own server): functioning web server (Apache or IIS)

MySQL database

server side scripting language PHP

Or install using Web Host tool such as Fantastico through your website host

Good to find a host that supports Joomla! so you can use their tools

Joomla! Installation

Upgrade links

Current Installations

Joomla! Installation

Domain and Directory

S T U F F T O D O T O G E T Y O U R S I T E U P A N D R U N N I N G

After You Install

General Setup

Choose and install a WYSIWYG editor

Add users and set their permissions

Add modules

Add Content

Add Categories

Add Sections in the Categories

Add articles

Add menus to call the articles

General Setup

Global Configuration Settings

Back door: Global Settings

Global Site Meta Description and Meta tags

WYSIWYG editor default

Offline message

Timeout

SEO-friendly URL settings

Setup details are stored in configuration.php file

Search-Engine Friendly URLs

/index.php?option=com_content&view=article&id=122:volunteer-resource-committee&catid=3:committees&Itemid=87

becomes: /get-involved/committees/122-volunteer-resource-committee

Steps:

1. Rename htaccess.txt to .htaccess (root directory)

2. Choose Yes for “Use Apache mod_rewrite”

3. Global Configuration, Site manager, Search Engine Friendly URLs, Yes

W H O C A N D O W H A T , B A T M A N

D E T A I L S A B O U T W H O C A N D O W H A T A R E H E R E :

h t t p : / / h e l p . j o o m l a . o r g / c o n t e n t / v i e w / 2 2 8 / 1 5 3 /1 / 0 /

Users

User Manager and Permissions

Set up users with passwords and permissions

Can set up sign-in and account creation through front door

I got a lot of spam this way and don’t recommend it

Can set up default user permissions

User Manager and Permissions

Backend:

Super Admin (that’s you)

Admin

Manager

Front end:

Publisher

Editor

Author

G E T T I N G O R G A N I Z E D

Pictures, Media Manager

Uploading Pictures through Site

Use the Media Manager (back door) through your browser

Upload files one by one

Slow, but can be done from anywhere

Can upload files one by one while adding an article

either front end or back end

through your browser

Slow, but can be done from anywhere

Uploading Using FTP

“FTP” = File Transfer Protocol

Drag files (pictures, pdfs, whatever) from your computer to server

Faster for lots of files (for images and downloadable files, for example)

FileZilla is good, stable, and free http://filezilla-project.org

FileZilla

Image File Paths

File path for images:

public_html/images

M_images (buttons and other interface)

stories – all article pictures – main/top level folder (Section images have to be here)

article_pics – main folder for articles – create subfolders is a good idea

food, fruit – example folders

A D D I N G F U N C T I O N A L I T Y A N D C O O L F A C T O R T O Y O U R S I T E

N o t e : S o m e i n f o r m a t i o n i n t h i s s e c t i o n w a s g l e a n e d f r o m t h e e x c e l l e n t p a g e a t

t i b e t a n g e e k s . c o m :

h t t p : / / w w w . t i b e t a n g e e k s . c o m / t e c h n o l o g i e s / w eb _ d e v e l o p m e n t / c m s / j o o m l a / j o o m l a _ e x t e n s i o n

s _ m o d u l e s _ c o m p o n e n t s _ p l u g i n s _ w h a t . h t m l

Extensions

Extensions and Plug Ins

“Extensions” are programs that add functionality to a Joomla! site such as forms, calendars, and podcasting, WYSIWYG editor, etc.

Many are cheap or free.

http://extensions.joomla.org/

Joomla extensions fall into three categories:

components

modules

plug-ins

Extensions

There is considerable overlap among categories of extensions.

Joomla extensions can contain any mix of modules, components, and plug-ins.

One extension developer may decide to do some task, such as displaying a site map, with a component; another may use a module.

Extension Manager

Most plugins and additional components are uploaded in their “zipped” state

(filename.zip)

Uploaded through the Extension Manager

Components

Components are essentially what you see in the "main" portion of the page.

Joomla is designed to load and run exactly one component for each page generated.

Consequently, Joomla's core content management functionality is itself a component.

Components

Use: The content of a page. It

may even be a full application (Say, a form with some programming behind it that puts info in a database).

Examples: An article

A list of articles

A site map

Upload pictures or videos

Custom form/application

Modules

Modules complement the content contained in a component.

They are not intended to be the main substance of a page.

Modules

Use:

Modules typically make up the elements of a sidebar or content menus.

Joomla also supports content modules, which involve no programming and can be displayed alongside coded components.

Examples:

A widget on the page, like a poll or a calendar.

Menus are modules.

Plug-ins

A plug-in is a piece of code that is used throughout the site.

Often work on both the data that users send to Joomla and the data that Joomla sends to users.

Example: WYSIWYG editor that accepts data from users as they edit the text and that passes data to Joomla as well.

Plug-ins can focus on either the front end or the back end (such as an online shopping cart).

Plug-ins

Use:

To format the output of a component or module when a page is built.

Could also be used to extend the results found in a core component. For example, you enter a search term in the module, and it displays the results in a component.

Examples:

keyword highlighting

article comment boxes

JavaScript-based HTML editors.

Plugin Manager

Comparison Chart

Component Module Plug-In

Display: The content area of a page

The "periphery" of a page: Sidebar, header, footer, etc.

Anywhere

Accept Input? Yes – can accept all kinds of input, from article submissions, to user comments in a forum.

None, or minimal – read-only (such as the Who’s Online module) or accepts only minimal input (such as the Polls module).

None, or minimal.

# on one page? Only one Multiple Multiple

Examples: An article A list of articles A site map Upload pictures or videos Custom form/application

A widget on the page, like a poll or a calendar. Menus are modules.

keyword highlighting article comment boxes JavaScript-based HTML editors.

Comparison Chart

Component Module Plug-In

Filename begins with: com_ mod_ mos_ or bot_ (used to be called “mambots”

Configure and Manager Components menu → <component name>

Extensions menu → Module Manager

Depends on the plug-in – check its documentation.

Access (how to display on your website)

Link a menu item to it: Menus → Menu Manager Select menu you want to use Click New button Components will be listed in the node tree. Click the component name and proceed as for adding any menu item.

With position defined in template.

With position defined in template.

Backing Up

Backing Up

Back up the following: MySQL database

Files and Folders for images, downloads, etc.

Can use Web Host tools or FTP

If your site is big, you may need to use the Web Host’s tools to back up the MySQL database, and your FTP tool to copy the rest of the site.

Choose Backup Choose MySQL Databases

Backing Up MySQL Database

Click on the database name

Save the file to your computer

Backing Up MySQL Database

T O A V O I D H A C K I N G A N D O T H E R D I S A S T E R S

Upgrading

Upgrading to Newest Version

Needs to be done regularly to avoid hacking

You can sign up with Joomla.org for regular emails alerting you to updates

Keep backups of your database and files in case you made changes that get lost when updating

Choose Installation Keep Restore Info

Upgrading to Newest version

A N Y Q U E S T I O N S ?

Thanks for Coming!

Karin Carlson, MOUS karincarlson.net karincarlson@mts.net (204) 774-5757 cell: 997-3297