Skip to main content

Posts

Showing posts from 2011

Flash, HTML pages, and SWFAddress

This is my solution for using Flash, SWFAddress , and HTML fall-back pages. It is more quick and dirty than “the right” solution, but it falls firmly into the “works for me” category. I use SWFObject (link) to detect and execute a Flash site and to fall back to a non-Flash site when the browser cannot handle Flash Typically, the code will look like the following: <script type="text/javascript" src="./js/swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = {}; params.menu = "false"; params.quality = "best"; params.allowfullscreen = "false"; params.wmode ="transparent"; var attributes = {}; attributes.align = "TL"; swfobject.embedSWF("website.swf", "nonflash_content", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes); </script> Extrem

Joomla: Simple Picture Slideshow

I was searching for a quick slideshow plugin to use within an article in Joomla and stumbled across one called Simple Picture Slideshow . It is extremely simple to set up.  You download the plugin from their site, install it into your Joomla backend, then find it in your plugins directory.  There are few settings to play with from having the images link to other pages and buttons for controlling the slideshow.  I went with a simple approach for Ryan Gibbons Real Estate and just had a button-less image slideshow that began automatically on page load. The beauty of  Simple Picture Slideshow  is its ease of use.  It's default directory (which you can change in the plugins settings page) is set to /images/stories .  To use it in your article, you use the following syntax: {besp} sampleimages {/besp} Where sampleimages would actually be /images/stories/sampleimages .  It will load all the images in that directory and size them to the dimensions you set on the plugins settings p

Flash - gotoAndLearn()

A fantastic site for Flash tutorials, gotoAndLearn()  has helped me quite a bit in the past, especially with some older Actionscript 2.0 projects I have undertaken.  His videos on building your own NetStream player are reason enough to visit his site and explore. His tutorial videos are well paced and well scripted.  I'm not usually one to watch video tutorials, but I found his to be just the right length and descriptive enough to help me out quite a bit. Check the site out:   http://www.gotoandlearn.com/

Common Social Media Colours and Fonts

Just a quick post listing some of the social media colours for use in your icons Facebook Blue:  #3B5998; White:  #FFFFFF; Font:   Klavika  Twitter Blue: #4099FF; White:  #FFFFFF; Font:   Pico - Alphabet LinkedIn Blue:  #0082B0; White:  #FFFFFF; Font:   Myriad Pro Bold Blogspot Orange:  #FF7419; White: #FFFFFF; Font:  Custom font (you will have to make one yourself) Tumblr Blue:  #243C54; White:  #FFFFFF; Font:   Bookman Old Style Bold Sample Icons:

User Friendly Sign Up Forms

Some quick tips for when you are creating a user sign up form on your site. To help make the process as least frustrating as possible for a visitor to the site, you need to simplify the forms in some very easy ways. Don't make the visitor enter their email address twice.  There is no need to make someone enter their email twice in the off chance that they will write it incorrectly.  Users will know right away when their email address is entered incorrectly. Don't obfuscate passwords.  Nothing annoys users more than entering a password and then having each letter be replaced by those black dots as they write in their password.  Think about useability when creating your form.  When entering passwords on a phone or other mobile device, it is very important that your user can see the letters they are typing in.   Keep it simple.  Don't ask questions you don't need answers to (ie...Mr./Mrs.) and make it quick and painless. The easier it is for a user to sign up usin

Obfuscate your email address

We all know that there are many robots out there crawling our sites look for email addresses to send spam to. We also know that we need to try and hide our email addresses to make it harder on the crawling robots. This usually involves referencing an ASCII chart to get the correct hexadecimal codes for each letter and symbol in the email address and then manually typing them into your code. So, I figured someone out there must have automated the process at least and a little bit and I was pleasantly surprised to find this site: http://www.fingerlakesbmw.org/main/flobfuscate.php They offer a nice simple script where you put in your email address and they convert it for you. Cut and paste to your code and you're done.

Zencoder - A Fantastic Online Encoding Tool

Ever run into a situation where you need to encode a bunch of different videos to a bunch of different formats? I ran into just that situation recently when I was working on www.barrydonlevy.com .  I needed to have a variety of formats for an HTML5 video site with Flash video fall-back.  I tried encoding on my own computer using one the many free online applications you can download.  Unfortunately, I wasted a lot of time with my code because I didn't realize that my encodings were not working properly with certain browsers.  Looking into the issue more, I realized it wasn't an issue with my coding, but an issue with the actually encoding program I was using and I was pointed towards Zencoder . Zencoder is an online encoding service that lets you upload your videos for encoding.  You have a slew of options to choose from and a variety of outputs to choose from.  Options range from file size and resolution to upscaling options and compression levels.  Output file types con

CSS Border Radius Generator

Thanks to the crafty work of Jacob Bijani over at www.border-radius.com , a lot of us web developers can breathe a sigh of relief when it comes to sorting out css curved borders across all supported browsers.  Let's face it, anything to make our lives easier is a good thing. Quickly enter your desired corner dimensions and watch the code get generated on the fly.

Placing Code In Your Blogspot Post

Ever wanted to post code to your Blogspot account, but ran into a mess regarding how Blogspot interprets your code sample?  Well, the solution is pretty straightforward with a bit of tinkering. First, you'll need to edit the HTML of your blog from the Design , Edit HTML tab in the administrative section of your Blogspot account. What you will need to do is add a class to the style section in the header called .postCode  which will look something like this: .postCode{  background:#FCFCFC none repeat scroll 0 0;  border:1px inset #012BB2;  height:150px;  margin:10px;  overflow:auto;  padding:6px;  text-align:left; } Then, whenever you right a new blog post, you need to make sure to select the Edit HTML tab next to the Compose button and put the following wrappers around the code: <pre class="postCode"></pre> Now, to actually get it to appear like that, you have to put your code through a bit of a translation by using this link to a Text -&g

Quick update

I've been spending the last month working on the completion of an overall brand change on my website and blogs.  The new site was supposed to be live in January, but it looks like it has been pushed off until the end of February. I've moved on to a lot of JQuery usage and will be detailing a lot of the tips and tricks that I have found so far.  Of course, I have still been dabbling in Joomla and I am always available to answer any questions people may have.