The Painesville Party In The Park website went live last week.  PPITP is a music festival organized by the Painesville Community Improvement Corporation.  The party is the “largest free music festival” in Ohio and takes place July 16, 17 and 18.  I highly recommend attending this event.  The music schedule includes several genres.  There is bound to be something for everyone’s liking.

The website was built on the Joomla! content management system.  This setup was highly customized to present the musical information.  The following were a few of the customizations and/or challenges that were implemented.

Bands/Entertainment

A customized entertainment manager was created to allow updates to bands and other entertainers.  The manager allows for the party members to add photos, biographies, music and more.  The bands also link to sponsor and event records in other areas of the website.  When music is uploaded, the band’s information page will contain a mp3 player.  Users can now listen to various tracks from the artists who will be attending PPITP.

Sponsors

A sponsor manager was created to help give benefits to those providing support for the event.  A banner system was also incorporated to provide spotlights to sponsors.  This same banner system can also be seen in use on the Madison Perry Area Chamber of Commerce website, though with a slightly different implementation.  Custom programming was done to help intertwine the sponsors on PPITP with entertainment and event information.

Events

The greatest challenge of this project was to intertwine the event calendar with entertainment and sponsor information.  All were separate management entities.  Each entity provided it’s own display logic to properly present information.  Now, there are combined displays allowing for entertainment and sponsors to show on the event list and vice versa.

Landing Page

A landing page was implemented to help provide some basic information about the party and entice users to visit the internal contents of the site.  The landing page displays the event dates, the names of random features and several photos.  It was also built on top of the saxophone logo.  If you ask me, it looks pretty sweet.

Common Elements

The website also possesses some of the common elements that exist in my sites.

• Photo Gallery
• File Uploaders used for the Press Releases, Media,
• Personnel managers used for the volunteer sections
• Link database
• PayPal simple cart integration for Vendor checkout.
• Social networking
• … and more

Check out the website at http://www.ppitp.com.

Do you need to send newsletters, announcements, sales alerts and more? Don’t have a content management system?  Check out MailChimp.  MailChimp allows you to create and send beautiful emails easily.  I recently signed up.  My main website is not based on a CMS.  I wanted a solution I could easily implement on the site without installing a CMS.  I found MailChimp to be the perfect solution.

With MailChimp you have several account options, including a FREE option.  Everyone loves free.  The free option allows you to have up to 500 subscribers and send up to 3000 emails per month.  This is a great option for small businesses who may not have more than 500 subscribers.  If you need more subscribers or emails you can always signup for one of the other options.  They start at $30/mo.  Still an affordable option if you are currently sending snail mail to everyone.

MailChimp allows you to create and save newsletters.  If you have a newsletter format, you can create one template and port it into each newsletter.  If you do not have a newsletter template, they offer a variety of basic layouts, photos and color options to get you started.  The templates are easy to setup and edit.

Once you create your template, you can easily add and edit different textual sections through a popup text editor.  If you are familiar with Microsoft Word or any other WYSIWYG editor, then you will have no problem navigating the interface.  The interface allows for saving, drafts, deletion… all of the basic edit functions you would expect to need.

Some very useful features are within the sending functions.  You can send test emails to a variety of addresses.  MailChimp also offers advice on how to test the layout of your email for maximum compatibility with email clients.  If you are worried about the emails being marked as spam, worry no longer.  MailChimp can run tests on your newsletters, alerts… and determine if there is “spammy stuff” (technical terms) in your email.

How do you get your signup lists into the system?  To start, you can either create forms using the MailChimp interface or have a developer create a signup form and post it on your website.  The form creator is very customizable.  If you would rather have a developer create the form, there are tons of resources on how to send the parameters to your MailChimp account.  As a developer, I just created a form in MailChimp, copied the code and made some modifications that I wanted to see.  Very quick and easy.  If you already have a list, you can import different file types to automatically create your lists.  You can also directly enter each account.  Direct entry may be a bit of a pain if you have a large subscriber list.

If you are interested in MailChimp, I suggest taking a look at it.  Here are a few other features that make it a great online program.

• Create lists of subscribers.
• Create options for subscribers.  Options may consists of news, alerts, sales announcements, etc.  This helps subscribers receive information on the items they are interested in.
• Schedule campaigns.  Create your campaign and schedule it to automatically send out at a certain time and date.  If you are like me, then you write at night.  The best times to send campaigns are Tues-Thurs 10am-3pm.  This is when users are most likely to read your emails.
• Archive campaigns for viewing at a later date.
• The monkey’s mail bag is full of sticks and stones that assemble into many more useful tools.

HTML should always be used for structuring your content.  You should try to avoid using it as a means of design.  Cascading Stylesheets (CSS) are for design, not HTML.  Listed are a few of the CSS oversights I see on a common basis.

Inline Styles

Most of the third party components I use contain inline styles.  This is where the stylesheet attributes are coded directly into the HTML tags.  This makes layouts harder to change as you have to touch all of the style attributes rather than editing one file.  It also adds more markup to your HTML file.  More markup means search engines have more code to digest than content, which can potentially hurt your ranking.  I end up going through the third party components and creating my own design friendly views.  This can be a pain, but someone has to do it.  So, when developing a web program for others, try to use standards and focus on content not design.  Your system will be much more portable and beneficial to it’s users.

The Overflow Problem

The overflow problem occurs when you are floating items.  Normally, in a column based layout you will wrap the columns in a div tag or some other tag that suits your needs.  The main div will contain a background color or image.  As the columns automatically populate, they overflow the main div.  This means if there is a height on the main div, the columns flow outside and the div does not automatically resize.  Some people will use the following code to solve this problem.

<br style=”clear”/>

This is perfectly valid. However, it integrates the content structure with the design.  This may cause issues when trying to apply a new, css based layout.  It also adds extra markup, which bloats your code.  The better way to solve the overflow problem is to apply the following style to the div wrapper:

overflow: hidden

This tells the wrapper to automatically flow with the floated elements.  Therefore, solving the problem without any extra HTML markup.  Wooo!

Browser Compatibility

It is extremely difficult to get most designs to render properly on all browsers.  Your main stylesheet will render on most browsers other than Internet Explorer (IE).  Many designers include one stylesheet for all browsers.  They either do not test in IE or the site worked in IE and they did not test other, more standards compliant browsers.  In almost every design project I have worked on, I have had to include IE only stylesheets.  This can be done with conditional comments.

<!–[if IE 7]> <link href=”ie7only.css” rel=”stylesheet” type=”text/css”> <![endif]–>

<!–[if gte IE 6]> <link href=”ieonly.css” rel=”stylesheet” type=”text/css”> <![endif]–>

Conditional comments are ready by IE.  Above, the first checks for IE version 7 and if it is present then the ie7only.css file is used.  The second checks for anything greater than IE version 6 and then renders the appropriate stylesheet.

You could then use a normal stylesheet for most major browsers and add modifications to that stylesheet in an IE only file.  Then, pull the IE file when necessary.

Conclusion

These were just some things I ran into this week between third party websites and client redesigns.  Hopefully, a designer or developer out there finds this useful.

I was recently working on some file upload programs.  I found a few file uploaders that could easily be integrated.  Though, none were very user friendly.  What I wanted was a very easy, point and click uploader.  One similar to the basic form file upload where you click the browse button and search the computer.  Every file uploader I looked into was much more advanced.  They would give users a broad range of file upload and edit capabilities.  In my experience, the more easy to use a program is, the more your customers will appreciate it.  Finally, I ran into a solution that worked.  In A Flash Uploader by Verner Studio was the perfect solution.  It is a small Flash generated file uploader which runs on PHP.  The script is highly customizable.  Though, as with most free versions, it does display the In A Flash logo.  I was able to install and configure the uploader within minutes.  The really nice feature, is that you can tell it what script to process after the upload.  So, I went ahead and created several different scripts to handle different upload types – music, images, etc.  This way my systems could properly modify the files and organize them.  If you are looking for an easy to use uploader, then I highly recommend In A Flash.  It will give you a easy to use interface, plus some of the following benefits:

• Progress bar – See the progress of the file as it uploads.
• Ability to limit file uploads to specified file extensions.
• Ability to customize text and colors
• Ability to customize the call back script
• Easy debugging capabilities
• Did I mention it was easy to install and, most importantly,  use?

I have only run into one small bug.  When uploading large files – 5MB or more – the upload progress bar does not show up.  It shows the uploading text, so you know it is in progress, however you do not get the percentages.  This may be a configuration issue on my end, but I am not sure yet.

If you are looking for a file uploader, be sure to check out In A Flash.

I was reading Online Marketing Inside Out last night.  Chapter 4 is about search engine optimization (SEO). The author brings up a very good point about ads vs SEO, which I have also experienced.  In many cases, a client will come to me and ask if I can help them with SEO.  I say yes and provide a site analysis.  In a site analysis, I provide information on the code structure, design stucture, keywords, content, links, meta tags and other items that affect SEO.  When I present the site analysis, sometimes I hear “Well what about Google Ads.  Can I not just use Google Ads to raise my ranking?”  The answer is yes and no. Read the rest of this entry

Secure Sockets Layer (SSL) is the magic that encrypts your data between a clients computer and your website.  This way no pirate types can pull it out of the ether and use it for malicious purposes.  I was working on a project a few days ago and ran into some issues with SSL.   After struggling with the hosting provider, we finally finished the certificate install.  It took a while because one of their automated systems botched the transfer process.  Then, a technician had to manually install the certificate.  It is odd. I am a programmer who much prefers manual processes rather than automated processes anyway.  But that is for another entry.  Anyways, the SSL was installed but did not appear to be working.  Hmmmm…

I looked into the issue and realized that the site was using iframes.  Uh-oh.  First of all, iframes are horrid.  Honestly, try integrating by parsing xml or some other file if you can.  Unfortunately, the third party website being used only allows for iframe integration of this module.  There are other ways to do it but they were even worse.  So, I figured out the issue was with the iframes.  What I did not understand was that I could not find a blog entry that properly discussed a solution.  All anyone said was “you can’t do it, so don’t” or provided solutions that did not work.  But ah-ha.  I found a solution that works fairly well.  It is a work around, but it works.  The site is primarily an informational site with a small store front.  Therefore, you can limit the pages where the iframe appears to the informational pages and remove it from the store front.  Then when someone is using the store front, you force the page to display via SSL.   The code solution follows.

//First I made sure to check and see if the page was the one that needed SSL.
//If SSL was not turned on I redirected to the SSL page
//Of course, you would have your own unique way of determining the page.
//Joomla! uses the $option variable while other CMS's use different identifiers
if ($page == 'needs-ssl' && $_SERVER["HTTPS"] != "on") {
$newurl = "https://" . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
header("Location: $newurl");
exit();


//Run through this if the page does not need SSL but SSL is on.
//This helps eliminate some wierd things that happen when the SSL was on and iframes were used
//You could probably leave the SSL on. But like I said, sometimes wierd things would happen.
}elseif($page != 'needs-ssl' && $_SERVER["HTTPS"] == "on"){
$newurl = "http://" . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
header("Location: $newurl");
exit();
}


Then I just checked to make sure the page was not the store front when displaying the iframe. Problem solved.

By the way, the solutions that claim to work by installing the blank.html file and using javascript to reset the iframe do not work.  It still causes issues with the SSL because iframes are not secure.  You can pull information from another site via some scripting language, process it till your fingers turn blue, and then create the output.  But pulling information actively through a third party website is seen as a security risk and rightfully so – yet another topic for another day.

I was working on a project today and needed to pull module parameters into a script I was creating.  After doing a lot of searching online for blog and forum posts I was unable to find a solution.  Then I scavenged through the Joomla! documentation on information for the module classes, hoping to stumble upon a solution.  I was relieved when I decided to do another Google search and stumbled upon 2 solutions that I merged to help meet my needs.  Hopefully, this will help someone else out there.

This is what I did to get my script to pull parameters for a specific module position.


//Import the module helper
jimport( 'joomla.application.module.helper' );


//Pull the module position you are looking for

//I believe JModuleHelper::getModule('module-name') also works for a single module

//Of course replace module-name with the position of your modules

$module = JModuleHelper::getModules( 'module-name' );


//Initialize the output var
$moduleOutput = "";


//Cycle through each published module
foreach($module as $thisModule){


//Make sure it prints xhtml
$attribs['style'] = 'xhtml';


//Render the output
$moduleOutput .= JModuleHelper::renderModule($thisModule,$attribs);


}
//Print the output
print $moduleOutput;


“To know yet to think that one does not know is best; Not to know yet to think that one knows will lead to difficulty.” ~ Lao Tzu

In my travels, I have experienced many professionals who, I must unfortunately say, are not professionals. Many developers will pick up a toolkit such as Dreamweaver or Microsoft FrontPage, learn the toolkit and then call themselves a developer. Because they now have the title of Web Developer, customers approach them for development work. Makes sense. However, they generally have none of the skills to develop a website. Most of these developers have only a basic understanding of mathematics, programming theory and code structure. These skills are pivotal in developing portable, functional applications. Someone without an understanding of recursion (a programming concept) is going to take a hundred lines of code to write what recursion can do in ten lines of code. With out a proper understanding of programming theory, such as Object Oriented Programming, a developer will not be able to build modern applications. Search Engine Optimization is one of the most common misunderstood concepts I run into. I can not begin to count how many times I have heard “All you need to do for search engine optimization is put links on your website and apply for Google AdWords.” This is completely mistaken. There is much, much more to Search Engine Optimization than most people think and it starts with writing minimal code and focusing on content generation. If you are a developer ask yourself, “Do I know the necessary theory, mathematics and code to be a good developer?”. If you are a client ask your developer “Why should I hire you? What skills can you provide me with that most developers can not offer?”

Read the rest of this entry