Book Review: Joomla! 3 Explained

Now that I’m wrapping up my second degree, I thought I’d share a book that I had to use for one of my classes that I thought was quite excellent. This book is “Joomla! 3 Explained: Your Step-by-Step Guide” by Stephen Burge, a book that discusses how to approach Joomla! (version 3) for the first time.

For those of you who are unaware of what Joomla! even is, it’s a free, open-source content management system (or CMS) for publishing web content. And just for a brush-up of what a CMS is, a CMS is a computer application that allows for the publishing, editing, and modifying of content all organized and maintained from within a central interface. A CMS that may be more familiar to you is WordPress; Joomla! is basically a CMS that is a bit more complex than WordPress, but not quite as complicated than Drupal.

What I really enjoyed about this book was how easy it was to read it. According to the preface, the author wrote the book as if he was writing for his own father (who I assume was also a first-time Joomla! user at the time this book was written), and I feel like this writing style made everything very easy to understand and straightforward. Difficult concepts are broken down into smaller steps, and concepts that are vital for you to understand are repeated quite often throughout the book so that you are sure to remember them. For example, the author introduces the CASh workflow (stands for “Categorize”, “Add”, and “Show”), which is a critical process to understand because it’s how you approach everything you do in Joomla! from adding articles to plugins to images to menus. This workflow is reintroduced almost every time that it’s used, and by the end of the book I was able to utilize the process without ever having to reference the book. In addition to the simple text, many images are used throughout the book that show screencaps of what the author is referring to in his steps, which is exceedingly helpful for a visual learner like myself.

In fact, there are very few negative things that I have to say about this book. There are a few typos and other small mistakes here and there, but I feel that’s pretty standard for any book and it certainly does not detract from the learning experience. Also, if you’re looking for a book that goes more into the coding aspects or other technical bits of Joomla! rather than the WYSIWYG side of the CMS, you might want to check out a different book. This book is pretty basic in those regards.

So if you’re wanting to learning Joomla! for the first time like myself, I highly recommend that you check out this book!

Simple CSS3 Transitions

If any of you have take a look at my portfolio lately, you may have noticed something new. If you haven’t noticed something new, or just haven’t looked at all, I encourage you to take a look at the portfolio page now. When you hover over one of the portfolio pieces do you see how the work title fades into a different background and font color? This was made possible with the help of CSS3 transitions.

You can do TONS of things with CSS3 transitions: you can change colors, heights, widths, position, shape, opacity, and more! If used effectively (don’t oversaturate your website with them) you can make your website more dynamic, interactive, and memorable.

Here’s a simple step-by-step tutorial on how I added CSS3 transitions to my portfolio to create a simple fade effect, but it’s easy to change these attributes to fit what you need for your own project.

1. First, have your HTML elements set up: You can’t do any transitions if there’s nothing to transition! This is the setup I have for my code:
   

   ---

   <div class=”portfolio”>
   <a href=”#”><img src=”image.jpg” /><span class=”workTitle”>Work Title</span></a>
   </div>

   ---

   In case you can’t tell what’s going on, here’s the run down. I have an image (<img>) and a span tag (<span>) with the class of “workTitle” that present my portfolio piece thumbnail and my portfolio piece title. These two elements are encompassed within an anchor tag (<a>) which links the visitor to that portfolio piece’s individual page. All of this is finally encompassed within a div tag (<div>) that has the class of “portfolio”.

   Note: If you don’t know what these tags are, or what classes are, I highly recommend looking up some HTML tutorials before you continue.

    

2. Style your HTML elements: There needs to be a starting point for our HTML elements; they need to have some basic styling that will serve as their “default” state. Since we’ll be changing our work title’s background and font colors, this <span> tag MUST have these styles already set. We’re going to set the background color to aqua and the font color to a dark gray:
   

   ---

   .workTitle {
   background: rgb(116, 204, 209);
   color: rgb(51, 51, 51);
   }

   ---

    

3. Add your hover styles: We want the work title to change colors when the user hovers over the portfolio piece. This is a little bit tricky, because we want one element to change (the <span class=”workTitle”> tag) when we hover over another element (the <div class=”portfolio”> tag). Normally when you create hover-based transitions you’re changing the specific element you’re hovering over—in this example that would mean we change the <span> tag when hovering over the <span> tag specifically—but in this case that would mean the visitor HAS to hover over the work title for it to change. We want to be able to have the work title change colors even when the user is hovering over the image as well. Therefore we must target the <div class=”portfolio”> tag. In order to do that, here is the code we’ll be using:
   

   ---

   .portfolio:hover .workTitle {
   background: rgb(38, 38, 38);
   color: #FFF;
   }

   ---

   Basically we’re telling the browser that when the user hovers over the tag with the class of “portfolio” (our <div> tag), we want the background color and font color to change to these colors for the tag with the class of “workTitle” (our <span> tag).

    

4. Add your transition: Now comes the fun part, adding your transition! The transition will be affecting our work title, so we must add the CSS3 style to the <span> tag with the class of “workTitle”:
   

   ---

   .workTitle {
   background: rgb(116, 204, 209);
   color: rgb(51, 51, 51);
   transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
   }

   ---

   So what are we looking at? In order to make a transition we must call the transition property. The syntax of this property is as follows: style property > duration > timing. In this example, I am targeting the background property and I want it to change over 0.3 seconds with a timing of ease-in-out (this means it will have a slow start and slow end, speeding up in the middle). You can change these attributes to whatever makes sense for your project. You can change the duration to last for 120 seconds (I wouldn’t recommend it though) or you could change the timing to ease, linear, ease-in, ease-out, etc.

And you’re done! You now have a beautiful transition that will make your website more visually interesting. You can change most any step in this tutorial to make it work for your website, but be careful: do NOT overuse transitions! Using transitions sparingly is much more effective than using it everywhere you possibly can.

How to Mock-Up a Website in Photoshop

This week I thought I’d share a video that I had created not too long ago:

This video is a two-minute tutorial on how you can create a visual mock-up for a website using only Adobe Photoshop. When working with a client, it’s important to have visual mock-ups of your design ideas that you can share with them. I personally believe that creating designs in Photoshop is very beneficial: 1) you are able to create designs very quickly, as you can see in this tutorial; 2) your mock-up will look clean and professional; 3) it’s very easy to go back and alter elements and present the changes to your client again, assuming you use your Photoshop layers properly.

Note: This video assumes that you are already familiar with how to use Adobe Photoshop. If you do not know how to use Photoshop, I recommend that you look up some other tutorials before watching this one.

I hope you enjoy the video!