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 [email protected] (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 [email protected] (204) 774-5757 cell: 997-3297