A Joomla Blog by People Who Care

4Web Inc. creates highly customized websites using Joomla!, an extremely flexible and robust content management system, to meet our clients' online business goals and marketing objectives. Experience, honesty and ingenuity are the foundation of our approach for creating engaging, responsive and strategic online business solutions. We take being part of the Joomla community seriously so we make sure to time to share some our Joomla findings here.

 

Welcome, Gwen Ames!

4Web would like to welcome Gwen Ames, our newest addition!

Gwen is a 2009 graduate of the Marlboro College Graduate School Master's of Science in Information Technologies program.  She recently relocated to the Keene area.

"Working with Heidi and Jen is so much fun," said Gwen. "I've learned so much over the summer, and the job is interesting and challenging every day. I'm always learning something new."

Gwen specializes in CSS and Joomla template creation. 

Gwen also loves all kinds of new technology and gadgets. She is the proud owner of an iTouch and a Kindle, although she is still using a TracPhone instead of a real cell phone. But we shall keep working on her.

Joomla Ethics 101: Giving Back to the Joomla Project

Joomla is free, like free beer, like free puppies. Many of Joomla's extensions are free. You can also find a ton of free templates.

That is a wonderful, amazing thing, that you can get software that, ten years ago, would have cost well over $100,o00 -- and it's all for free.

There are plenty of people downloading Joomla and building sites with it. That's pretty much what we do at 4Web, download Joomla and customize it for our clients.

We also make sure we give back to the Joomla project. To date, we here at 4Web have:

  • founded Joomla User Group New England and actively participate in it
  • With the significant help of the user group, organized and ran two Joomla Day New England events (and we're organizing a third now)
  • Written articles for community.joomla.org
  • Participated in the Joomla forums

What have you done to give back to the Joomla project? There are so many ways you can participate.

Anyone can do these at any time

There is always work to be done in these areas at the Joomla project, and anyone can assist according to their ability level.

  • Assist answering questions in the Joomla Forum. Make a goal to answer at least two questions for every question you ask.
  • Help write Joomla documentation at the wiki. From the wiki home page: You don't need to join the Documentation Working Group to help us improve the documentation. Just register on this wiki and get started. Feel free to fix any errors you find; take a look in the Cookie jar; or consider helping out in one of our mini-projects.

Join the Bug Squad

The Joomla Bug Squad (JBS) is the group that tests for bugs and squashes them when found. JBS is very active now with Joomla 1.6 in its beta state.

Speak languages other than English?

The translation team can use your help if you do.

Form a Joomla User Group

Google Groups Mailing Lists

Follow discussions of Joomla development and the Bug Squad.

Social Networking for Joomla

Joomla Ethics 101: If an extension costs money, pay for it.

Ok kids, time for some fun ethics tips for working within an open source community.

We do live in an open source world. Lots of stuff is free. Joomla is free. Many extensions and templates are free. Tutorials are free. Some training videos are free.

But there are lots of things that cost money, too.

If an extension costs money, pay for it.

If an extension developer charges $20 for their extension, PAY FOR IT.

Do you think the extension developer spent $20 of time to create that item? I can assure you, they did not. Many developers spend thousands of dollars of time to create cheap extensions for you. They also do many hours of support, in many cases for that single $20 fee.

Think about how much time that extension saves you, how it makes your client happy, how it solves the problem you needed solved. What's that worth? I can almost guarantee you it's more than $20. It's probably even more than $200.

If you go somewhere and download that extension for free, THAT IS STEALING. There is no difference between downloading a paid extension for free and walking into your local store and walking out with an item that you did not pay for.

Integrating Dreamweaver CS5 and Joomla 1.5 OR Joomla 1.6

Recently, Adobe released Dreamweaver CS5. One of its major new features is the ability to integrate with the CMS of your choice. They seem to push Drupal, Joomla, and Wordpress in particular, but in theory, it works with any CMS.

I have been very skeptical of this integration from the beginning, because Joomla manages its files very differently than Drupal or Wordpress.

We all know that God kills a kitten when you edit Joomla’s core code. (Right? Right???) You are supposed to make a template override if you need to change something, leaving the core intact, so that your updates won’t get overwritten when you upgrade the site to its next version.

So, it seemed to me that this Dreamweaver/Joomla integration was nothing but trouble.

First off, though, an explanation of how to set this up, in a few "easy" steps.

  1. Install Joomla somewhere.
    • You can install Joomla locally on your machine, using MAMP, XAMPP, or WAMP. This is what I did, for testing purposes.
    • You can also install Joomla on a web host and hook up to it from there.
    • Make sure Joomla is running correctly, regardless of where you run it. If Joomla isn't running correctly, Dreamweaver isn't about to help you.
  2. Open up Dreamweaver CS5. You can download a 30 day free trial from the Adobe site if you'd like to give this a try.
  3. Go to Site - New Site.

Note that the Site definition dialog box is quite a bit different in Dreamweaver CS5! The basic/advanced options are now gone. I like this version much better because it's much simpler.

Under the "Site" tab, there are only two items to define, and these are the only two items that must be defined to create a Dreamweaver site. Give the site a name (like Joomla 1.6 test), and define the local site folder. Since I am working with WAMP locally on my PC, this path becomes C:\wamp\www (because I've installed Joomla directly in the www folder).

4. Now go to the Servers tab, just under Site:

Click the + item at the lower left of the window (red square above)

This will pull up this dialog box:

Under the Basic tab, for a Joomla site installed locally on WAMP on a PC (see how much qualification I am putting into this? If your setup is different, you're going to need to enter different information), complete the screen as shown:

  • Server name: localhost
  • Connect using: Local/Network
  • Server folder: c:\wamp\www (this is the same as your local folder)
  • Web URL: http://localhost/

Now switch to the Advanced tab. Complete the dropdown as shown:

Change the testing server dropdown to PHP/MySQL, since that is what Joomla is running.

Save everything. Your new site should load.

The above image shows the Files panel on the right side of the screen in Dreamweaver. If you don't see this, you can get it by gonig to the Window menu item and choosing Files (or F8).

5. Double-click on index.php from the Files panel, as shown above. You should see absolutely nothing. Yes, this is the index.php at the root of the site. Do NOT open a template index.php page, or any other page on the site -- it WILL NOT WORK CORRECTLY. You can certainly use PHP to edit those pages (see note above regarding dead kittens and core Joomla files, you've been warned), but you can't work with them in this context.

At the top of the page, in the red box, see where it says something about discovering dynamic files? Click the link for Discover.

6. The message about Discover changes to this message:

So click the Live View link.

I've installed Joomla 1.6, but you can use Joomla 1.5 if you wish. Procedures are exactly the same.

You are now working in Live View. Use control-click on PC (Mac use command-click) to actually click the links and go to other pages. If you do a regular click of the links, you can select items.

Let's say you select the word Joomla! in the main content area. The CSS panel will update with the latest information, as shown below:

Dreamweaver sorts through several stylesheets to display exactly the styles that apply to this particular heading. Using Dreamweaver's tools, you could now edit these colors, fonts, or whatever other aspect of this heading you'd like to change.

But what file are we editing? That's not really clear from this view.

Note at the top of the page, there are a bunch of files listed. I've outlined them in the red box. If you click the double arrow (at the end of the red box), you'll see even more files. Some of them have the same names. This is every single file that goes into displaying Joomla's home page. In fact, by my count, there are 140 files for Joomla 1.6 that make up this very simple home page. There are no extensions installed! This is just Joomla's sample data that we're looking at!

Now, how on earth do you get through 140 files to figure out which one you can change?

Fortunately, Dreamweaver has provided us with a filter to change these files. That's the little funnel icon just after the double arrows.

You can limit the kinds of file types to display by selecting which extensions you want. .css is CSS, .js is Javascript, .otf has to do with fonts and font substitution, and .php is a PHP file. You can also choose Custom Filter to look for a specific file.

You can switch off everything except .css and you'll see just the stylesheets that apply to this page.

Using the custom filter, you could tell it to look for index.php -- that would be the template page for this site. In this case, the page is running the Beez 2.0 template, and it would load its index.php file, since that's the template that's in use here.

So what is this amazing new Dreamweaver feature good for?

So glad you asked.

Joomla-Dreamweaver integration is GREAT if:

  • You want to edit an EXISTING Joomla template within the context of Joomla. Perhaps you don't know CSS very well, or you just like Dreamweaver's productivity tools.
  • You know that the ONLY files you should edit are index.php (the template HTML file) and the CSS files associated with this template.
  • Maybe you're a bit confused by the CSS and what you should edit. Dreamweaver does a nice job of pulling out the relevant declarations that you can edit to change something.
  • For those of you who like Artisteer, this might be a godsend for you. You didn't know enough HTML/CSS to create your own Joomla template in the first place, and now you want to change the way something looks but you can't figure out the CSS to make the change. Dreamweaver may be the perfect solution for you.

Joomla-Dreamweaver integration is AN ABSOLUTE NIGHTMARE if:

  • You think you can use this to edit any random PHP file in Joomla's structure. Do not do this. Kittens. Cute, cuddly kittens. Or, possibly worse, you could blow up the whole site, and you would be very unhappy about that.
  • You are easily overwhelmed by long lists of file names, many with the same names, and you just are paralyzed by fear about what you can touch. That's probably a good reaction.

Joomla-Dreamweaver integration DOES NOT DO:

  • THIS DOES NOT CONVERT YOUR HTML WEB PAGE TO A JOOMLA TEMPLATE. There are a bunch of steps to creating a custom Joomla template. If you want to learn how to do this, watch my Lynda.com videos on the topic of template creation.
  • THIS DOES NOT PUT THE JOOMLA CODES IN YOUR HTML DOCUMENT. See bullet #1 above.
  • You are using Dreamweaver as the way to view your Joomla site. If you've done more than 5 hours of web development, you know it's not uncommon that sites look different in different browsers. Dreamweaver is acting as the browser in this case. Just because it looks great in Dreamweaver DOES NOT reflect on how good/bad it looks in IE 7 (ugh), Safari (dear God), or IE 6 (Nooooooooo!!!!). You must still do browser testing, and if you wind up with some kind of weird Safari bug (which seems to be the bane of my existence), I'm not sure Dreamweaver will help you out much. Yes, Dreamweaver does now integrate with Adobe BrowserLab. But still. Test in real browsers.

You mean, I still have to learn hand-coded HTML and CSS to do my best template work in Joomla?

Yes. Yes, you do.

Would you recommend using Dreamweaver and Joomla together?

I have actually been using Dreamweaver and Joomla together for 5 years. But I use Dreamweaver as a CODE EDITOR, not in Design View. Dreamweaver is a productivity tool for me. I've used it for 10 years, and it's what I know.

If I was just getting into the Joomla business now, I would probably NOT go with Dreamweaver. I'd probably use a tool like KompoZer or any one of a zillion code editors.

For Joomla and Dreamweaver, the only real reason to integrate these two would be if you do not know CSS and you'd like a nice comfy familiar tool like Dreamweaver to work with instead of that rugged WYSIWYG-free Joomla interface. If you are a one-person shop, it's unlikely you'll be in this situation. But if you're in a multi-person work environment, say you have a designer who codes the HTML/CSS, but knows NOTHING about PHP. Dreamweaver and Joomla might make a great way for this person to work on the CSS, once the engineers have taken the original HTML design and turned it into a Joomla template. In that case, this might be useful.

But the truth of the matter is this. If you want to do custom work with a CMS in 2010, you have got to get your hands dirty and get into the HTML and CSS. You might be able to skip knowing the PHP, but you can't get out of knowing HTML and CSS. Or you stick to canned templates. There is not a lot of in-between, and this Dreamweaver/Joomla integration is not going to save you from that reality.