Why I Ditched Joomla for WordPress

Posted on Aug 23, 2011 by Nate to General

When I discovered Joomla a few years ago, I thought it was the crown jewel of all open-source Content Management Systems. I couldn’t wait to learn it’s inner workings, and show everyone else how awesome it was. At the time I ignored WordPress completely. After all, all it did was blogging. I wanted something that would allow me to manage a website, blog, store, and whatever else I could imagine. Diversity was my main goal, and Joomla provided that for me.

So why did I switch?

Joomla – It’s been a few years, and other than the introduction of a few new features introduced with Joomla 1.6, It has remained the same CMS. It hasn’t included any groundbreaking features that users are looking for. URLs are still the same pain they used to be. The back-end is still just as confusing to end-users at it used to be. In the past, Joomla’s best quality was in it’s simplicity when creating a custom template. One page was all it took to create a design. Nowadays, that one file looks messy and unreadable to anyone but me.

WordPress – On the other hand, WordPress has done nothing but improve it’s feature set. With each new update, we’ve seen things like custom post types, better menu systems, user interface updates, better theme support, and much more. They’ve taken a blogging platform and made it extensible to the point where entire websites can be built around a fully customizable administrator area. Add to that the fact that the WordPress administrator interface is clean, simple, and easy to use for the average Joe, and there is already plenty of reason to make the switch.

WordPress and Joomla are both powerful content management systems, and they both have their place in the web world, but the improvements WordPress has made far outweigh the mediocre progress of Joomla.

Tags: content management systems, web design, Web Development, website usability

The Basics Part II: CSS Rounded Corners

Posted on Aug 18, 2011 by Nate to General, Web Development

If you’d like to see part one of the series you can go here: CSS Absolute Positioning.

In part 2, I’d like to go over CSS rounded corners. For ages I’ve spent time poring over websites trying to figure out what method would work best for getting me those coveted round corners in my site. The method we will be discussing today provides you with a box that is not only stretchable horizontally, but vertically as well, thus making this solution totally dynamic.

This method makes use of absolute positioning to create our edges and corners. There are quite a few variations based on what you’re trying to do with your rounded corners, but we’ll just be covering a simple box with a 1px rounded border like so:

The first thing you’re going to need are the images for each of the corners, and a one pixel image that is the same color. You can do this manually, or you can use a site like http://www.generateit.net/rounded-corner/ to generate your corners for you. I generally do the latter since everything is pre-cut and ready to go.

After you have the images, the HTML to create the box is pretty straightforward:

<div class="roundBox">
          <span class="top"> </span>
 
		 <span class="left">   </span>
		 <span class="right">   </span>
		 <span class="top-left">   </span>
		 <span class="top-right">   </span>
		 <span class="bottom-right">   </span>
		 <span class="bottom-left">   </span>
<div class="roundBoxText">
        This is some text inside the rounded box</div>
<!-- End Round Box Text --></div>
<!-- End Round Box -->

To explain the above code, we are basically creating a container “roundBox” to house the borders, and then creating the ‘s for each corner and edge of the box. This can be used as the basic html for a wide variety of rounded corner boxes.

Next, the css gets a little more inolved:

On to the css:

.roundBox {
position: relative;
padding: 4px 0px 4px 6px;
font-size: 14px;
height: 200px;
width: 200px;
text-align: center;
}
.roundBox .roundBoxText {
position: relative;
z-index: 2;
}
.roundBox .top-left, .roundBox .top-right, .roundBox .bottom-right, .roundBox .bottom-left, .roundBox .top, .roundBox .bottom, .roundBox .left, .roundBox .right {
position: absolute;
z-index: 1;
font-size: 0;
line-height: 0;
}
.roundBox .top, .roundBox .bottom {left: 3px;right: 3px; height: 3px;  }
.roundBox .left, .roundBox .right { top: 3px;bottom: 3px;width: 3px;}
.roundBox .top { top: 0; background: url(img/border.jpg) left top repeat-x;}
.roundBox .bottom {bottom: 0; background: url(img/border.jpg) left bottom repeat-x;}
.roundBox .left {left: 0; background: url(img/border.jpg) left top repeat-y;}
.roundBox .right { right: 0; background: url(img/border.jpg) right top repeat-y;}
.roundBox .top-left, .roundBox .top-right, .roundBox .bottom-right, .roundBox .bottom-left { height: 3px; width: 3px;}
.roundBox .top-left {top: 0; left: 0; background: url(img/tpl.png) left top no-repeat;}
.roundBox .top-right {top: 0;right: 0;background: url(img/tpr.png) right top no-repeat;}
.roundBox .bottom-right {bottom: 0; right: 0; background: url(img/btr.png) right bottom no-repeat;}
.roundBox .bottom-left { bottom: 0; left: 0;background: url(img/btl.png) left bottom no-repeat;}

This CSS looks very complicated, but is actually quite simple. In the first part, we are setting the general width and height of the box, and setting a few styling things like font size. The most important part of this is the position: relative. Building upon our previous post where we dealt with absolute positioning, this is necessary in order for the borders to be contained inside the container.

Next we are going to set each of the corners to position: absolute;, and give them a lower z-index than the content div (this isn’t necessary for this example, but you may have large borders that go under text in your own work). We then take each corner and edge and set them to their appropriate positions. For example, top-left would end up with top:0 and left:0;. For the edges, you will notice that the positions are not 0. This is done to keep the repeating edges from overlapping the corners.

And there you have it, a box with rounded corners with compatibility for all major browsers. This solution is great because it doesn’t require javascript, or any CSS hacks to work. It is just plain HTML and CSS. I do apologize to the HTML purists out there who don’t like the extra markup in their code, but it is my opinion that the tradeoff for universal support is well worth it.

See the live demo below, or download the source files:
Demo
Source Code

Tags: CSS, html, Web Development, website design

Absolute Positioning CSS Elements: The Basics

Posted on Jul 22, 2011 by Nate to Web Design, Web Development

When first learning to write HTML and CSS, creating  a compatible, functional, great-looking website can be a daunting task. Many early developers are stuck with hours upon hours of troubleshooting, trying to figure out that one small piece of CSS that is causing their page to to look like a garbage dump. That’s why, in this series of posts, we’ll be going back to the basics and looking at some simple CSS methods you can use to crate great designs with as little hassle as possible.

The first item we are going to look at is absolute positioning. Let’s assume you have a box like below that you want to place some objects in, but they are not going to be sitting side-by-side like usual. Instead, you want them to be layered on top of each other, and you want them spread out in different corners of the container.

The first rule when placing objects inside of a container is to give the container a style of “position:relative”. If this is not done, then the absolute elements we will place later will ignore this container, and will find the next highest div that is static and all of your positioning will be wrong.

Next, we can place any elements we please inside this container. By setting the elements to “position: absolute;”, we are essentially releasing it from any boundaries that existed. It can now overlap and move freely within (or outside of) the boundaries of the container through the use of top, right, bottom, and left properties.

Being able to move these elements anywhere on the page is great, but what about overlapping? Let’s say I want to add another div in the center of the box that would overlap the other boxes:

Now we have an overlaying box! There’s only one problem, it’s not showing over the other boxes. This is where z-index comes in.

By setting the z-index to ’1′, we are essentially telling the block to show above the other blocks whose default value is still ’0′.  So far we’ve seen that all of these blocks can be positioned inside of the container, but what if we want our blocks to show outside the boundaries of the container? we can give our blocks a negative position, just as easily:

By simply creating a negative position on the element, it will cause the element to move outside the bounds of your container. This can be used in a variety of ways on your website to create very interesting results.

And those are the basics of absolute positioning. Stay tuned for part 2 where we discuss some more basics of CSS.

Tags: basics, CSS, Web Development

Remove XML Elements using PHP Quick and Painless

Posted on Feb 27, 2011 by Rich to Web Development

Let’s just begin by stating that XML is not my forte. Ok, with that out the way lets get on with it. So recently my challenge was to grab a file from a 3rd party server that was CSV. No harm no foul right? well not when the 3rd party site had to be connected from a secure FTP. So after rummaging around the web I found (phpseclib0.2.1a) which worked great to connect and download the CSV file I needed. Then I took that CSV (because let’s face it – nobody really likes CSV) and converted it into XML.

Ok?! so what right?

Well the data that is coming in a hodge-podge of information which I didn’t really need. I only needed a certain part of the XML file. So what was i suppose to do?

After a bunch of trial and error, internet help and so on and so forth, here is the solution I came up with:

First let’s just assume that your XML file looks something like this:

<data>
	<row>
    	<id>00001</id>
      	<some_name>Some Name 1</some_name>
      	<category>1</category>
	</row>
    <row>
    	<id>00002</id>
      	<some_name>Some Name 2</some_name>
      	<category>2</category>
	</row>
    <row>
    	<id>00003</id>
      	<some_name>Some Name 3</some_name>
      	<category>1</category>
	</row>
    <row>
    	<id>00004</id>
      	<some_name>Some Name 4</some_name>
      	<category>2</category>
	</row>
<data>

Now in this example lets assume that do_you_need_me = 0 (meaning you DON’T need it) and obviously do_you_need_me = 1 (meaning you DO need it) .

There is alot of information out there some that might work, some that might not work. This is how i was able to deal with this and have it work.

This code will irrerate through the XML file and select EVERYTHING that is NOT a category of 1 (category = 1) and delete those from the XML file and of course saves the XML file again.

Here is the complete function that I used to make this happen.

$file_xml = "/path/to/your/xml/file.xml";
$data = simplexml_load_file($file_xml);
$data_count	= count($data->row);
for($i = 0; $i < $data_count; $i++)
{
	if($data->row[$i]->category == "1")
    {
        unset($data->row[$i]);
    }
    else
    {
		// I just like keeping the else in here. just in case.		
    }
}
file_put_contents($file_xml, $data->saveXML());

Quick Synopsis

I have left the comments that I tested with in there so you can test if you want, just make sure you comment out unset($data->row[$i]);

So $file_xml is self explanitory.
we then loop through the XML file and if the current rows do_you_need_me != 1 then we go ahead and delete the record. Be mindful on the size of your XML file. If its too large a file, I would maybe suggest taking “file_put_contents($file_xml, $data->saveXML());” and moving it under the “unset($data->row[$i]);” to save the file after every run.

If you are running this through a cron, first check if your server allows you to override the time with “set_time_limit(0);” if they dont, then you might want to move that “file_put_contents($file_xml, $data->saveXML());” as explained above and run the cron a couple times in a row just to be certain that all the information you need has been parsed.

If you have anything to add or comment about please do so. If there is an easier way to handle this, I would love to know.

Tags: php, Web Development, XML

What jQuery Can’t Do

Posted on Feb 24, 2011 by Joey to General, Web Design, Web Development

Computers – and their programmers – speak a language all their own. The pages that we load when we are searching for information, products, or entertainment are the faces of the pages, but what lies beneath is the code, or the foundation, of the site. While we don’t see this, per se, it allows for websites to be interactive. jQuery is a tool that allows you to build webpages with Javascript faster and easier. You can add animations to your site, create drop-down menus, drag-and-drop features, and much more. jQuery is a tremendously useful tool – but what can’t you do with this Javascript library?

There is quite a lot that you can’t do with jQuery, and this is not indicative of a design flaw or an inferior product. In fact, many programmers regard jQuery as an excellent tool and first-rate Javascript library. The limitations come, then, from jQuery’s boundaries. It is simply not designed to do everything as Javascript is. Instead, it is designed to be a short cut for some Javascript functions. The goal is to make building a website faster and easier. Many designers like it because they don’t have to know the language inside and out before they create a page and that it uses far less code than Javascript.

As an example, jQuery itself doesn’t allow the concatenation function, but you can still join two or more strings because Javascript has that functionality. Addy Osmani describes Javascript as art: “Your keyboard becomes your brush and the browser becomes your canvas…jQuery provides a proverbial ‘Paint by Numbers’ tool for us.” Under jQuery is Javascript, “it’s a big pile of Javascript that draws a curtain between you and Javascript.” As such, it makes certain functions easier, but doesn’t let you do everything you can with Javascript.

Tags: jQuery, Web Development

THAT Agency Launches Distinctive Palm Beach Properties

Posted on Feb 26, 2010 by Michelle to Projects

THAT Agency captured the allure and sophistication of Palm Beach when designing and developing a online presence for a brother-sister real estate team, with the innovative website www.distinctivepalmbeachproperties.com.  The website is based around the 960-grid system in principle, creating a clean, Web 2.0 look and feel.  The muted color scheme of the white with steely gray, allows the magnificent imagery of the Island of Palm Beach to tell its own story.

In addition to the sophisticated design, the website is backed by a content management system, allowing the client complete control over their website’s content and imagery.  The website is also integrated with two different MLS’, allowing the website visitor complete access to all listings found on the island.  With a plethora of ways to search the website, each visitor is sure to find what they are looking for.

Tags: web design, Web Development

THAT Agency Launches Make A Change Today

Posted on Jan 29, 2010 by Michelle to Projects

THAT Agency was contracted to develop the website for Make A Change Today.  In addition to website development, THAT Agency was also asked to perform an indepth analysis of the client competitor websites, and develop a strategy for on-site optimization.

The Make A Change Today website was built around a content management system (CMS), allowing the client complete control over their website’s content and imagery.  Additionally, the website consists of three lenghtly videos, that THAT Agency converted into flash movies, that stream in, allowing for maximum page load, while the video begins playing.

Tags: content management systems, Web Development

THAT Agency Launches Ask Aztec

Posted on Jan 11, 2010 by Bill to Projects

The goal of the website for Aztec Acquisitions was to establish a professional and trustworthy appearance.  During THAT Agency’s discovery process, Aztec Acquisitions was asked to deliver a list of adjectives for use during the design process. THAT Agency turned this exercise around, and utilized the powerful words as a design feature within the header of each page.  THAT Agency took advantage of the primitive nature of the logo and term “Aztec”, to create a color palette that was simplistic, yet added variations and subtle graphical interests with the use of gradients.  With a distinct call-to-action color, each visitor to the site is sure to know where they are, and where they need to go.

In addition to the creative design, the Ask Aztec website is backed by a full Content Management System (CMS) that allows Aztec Acquisitions to have full control of the site.  An additional feature of the website is the system, THAT Agency created, in which a site visitor could elect to receive FREE information via email on a set daily, weekly or monthly interval.

Tags: content management systems, web design, Web Development

THAT Agency creates a new website for The American Graduate School in Paris

Posted on Dec 15, 2009 by Michelle to Projects

THAT Agency partnered with The American Graduate School in Paris to not only update their website’s look and feel, but to increase their online reach by expanding into untouched search markets.  The website design was constructed around the 960 grid system, which resulted in clean, educational design worthy of any University.

The American Graduate School in Paris requested the website be integrated with the robust and stable Joomla platform.  Utilizing the custom templates and menus, THAT Agency’s developers were able to bring to reality, the vision of both the school and the designers.  By creating custom modules, the Graduate School has the versatility to manage and update their site themselves, while still maintaining the uniformity the designers set in place.

In addition to designing and developing a beautiful website, THAT Agency was contracted by the American Graduate School in Paris for regular maintenance, as well as ongoing marketing efforts, including: search engine optimization, pay per click management and social media marketing.

Tags: Joomla, web design, Web Development

THAT Agency Launches Website for American Eagle Packaging

Posted on Oct 10, 2009 by Bill to Projects

THAT Agency designed and developmed American Eagle Packaging’s online presence from scratch.  Never having a space online, required that THAT Agency create not only an aesthetically pleasing site, but also one that was fully-optimized for search engines.

The clean, corporate website was designed utilizing web 2.0 standards of large fonts and clean spacing.  The smooth animated navigational dropdowns were created using jQuery, and the home page features animation via an animated .gif.  The website is backed and completely customizable via a content management system (CMS), allowing American Eagle to have complete control over their website and the content and images therein.

Tags: content management systems, web design, Web Development