Mozilla moved to version 4 from 3.6 almost a year ago on March 22, 2011. Not even a year has passed and just a few days ago, Mozilla has released its 2 digit browser version. This version is intended to make updates and extension management easier on the end-user. Version 3.6 will lose support in April leaving 10 as the only currently supported version. Some other major highlights in Firefox 10 include:

• CSS 3D Transforms are now supported.
• The new HTML5 <bdi> element, bi-directional isolation, allowing isolation of parts of text with a different directionality has been implemented.
• Updates to Canvas, DOM3 Events, DOM4, JavaScript, Full Screen API, Page Visibility API, SVG, and WebGL.
• You may now specify a fragment of “top” for the href attribute to create a link to the top of the page. This used to work, then went away for a while, and now it’s back, for compatibility with the HTML5 specification.
• The console object has two new methods, console.time() and console.timeEnd(), which can be used to set timers on a page.
• Handling of the position property on elements inside positioned <table> elements has been fixed.
• In the past, when element.setAttribute() parsed integers, it would report an error if the integer included any non-numeric characters (for example “42foo”). Now it correctly truncates this as the number 42, in accordance with the specification.
• Minor interface changes.

*These snippets have been pulled from the Mozilla website*

• Firefox Releases on Wiki
• MDN Overview: Firefox 10
• MDN Overview: Firefox 9
• MDN Overview: Firefox 8
• MDN Overview: Firefox 7
• MDN Overview: Firefox 6
• MDN Overview: Firefox 5
• MDN Overview: Firefox 4

Here is a timeline of support status and release dates of Firefox in the past year. Firefox has had several releases as a result of adopting a rapid release development cycle

A while back, John Scaramuzzo came around the office asking employees to clear out any e-mails we could afford to lose in Outlook.  When disk space is low, it can be difficult and time consuming to filter through thousands of e-mails determining what to keep and what not to keep.

Using a feature of Adobe Acrobat (I have version 9 installed) I was able to backup all those e-mails into a single indexed PDF.  If you keep your Outlook mailbox organized by folder, this will turn out even more nifty after converting to a PDF.  Right click on a mail folder and notice there are 2 options regarding Adobe PDFs.  Converting will create a new PDF and appending will add the emails and the folder structure into a PDF which can be saved to the local machine.  This does NOT remove the emails from Outlook and needed to be deleted manually.

Click to Enlarge

After a certain point, the PDF document will start to respond slowly after a certain size is reached.  The best solution I’ve come up with is to organize the PDFs by year.  Remembering the relative year to a project or development period isn’t too difficult and Adobe contains a search feature to find information quickly.  A ticket number or relative project phrase usually works removing any need for digging around.   Anytime my outlook folders start to look full, I can append all the contents to the current year’s PDF and free up the space in Outlook. Below is a screenshot of what my Sent Items folder looks like in 2011′s PDF.

Click to Enlarge

If your mailbox does not already have a folder structure, it might be a good idea to set some up.  Organization never hurts!

Problem:
We recently had an issue with some images on an iPad or iPhone web page where the orientation was displaying incorrectly. However, when previewing the page on a desktop the orientation was correct.

After several tests, we realized it wasn’t coming from the web code, but was an issue with the camera. The camera software was encoding it at a certain direction for mobile devices incorrectly. A normal desktop computer wouldn’t recognize the encoding, since it doesn’t have a gyroscope.

Solution:
To fix the issue we used our image editing software to manually rotate the image to the correct orientation, saved it out and replaced the existing one. This would then remove the camera’s encoding and preview correctly on any browser. You don’t need any specific image editing software, if you happen to run into this issue.

I dug around the web today for tutorials on making personalized jQuery plug-ins.  A plug-in is much more easily deployed onto a site than customized code, which may require editing or customization between sites.  Using a plugin, we have a much simpler means of calling a script using common syntax:  $(‘something’).doThis();

In the past, I’ve developed scripts to work within the $(document).ready() jQuery function.  Events and methods that were nested within usually had a variable targeting a class or ID on the DOM that manipulated that element accordingly.

Document Ready Scripting Examples:

$(document).ready(function(){
   var button= '.myButton';
   $(button).click(function(){
      alert('You clicked a button.');
    });
 });

This simple example will result in any page element with class myButton result in a message box once clicked.  While this is a simple example, more complicated scripts might be developed as a plug-in instead for increased portability without affecting functionality.  This practice also makes your code re-useable and easy to integrate between projects and other plugins. In terms of syntax, it is also much simpler for front-end developers to use a line of code such as the one below.

Plug-in Scripting Example:

$(‘.myButton’).makeButtonAlert(‘You clicked a button.’);

Documentation on Plugin Development

Having never developed a plugin, I had to look over a few tutorials to get a grasp on the needed syntax.  Here is a list of some of the better tutorials and documentation I came across:

• jQuery – Plug-in Authoring  (More technical approach)
• CodeProject – Creating A Simple jQuery Plugin
• SitePoint – How to Develop a jQuery Plugin
• My First jQuery Plugin
• A Really Simple jQuery Plugin
• Signs of a Poorly Written Plugin

Plugin Breakdown

Here is the same script re-written as a plug-in to jQuery and can be either appended to the end of the jQuery Library or included as a separate JS file.

 //Opening and closing the script is only slightly different in syntax:
 (function($){

     //Create your jQuery method name here (makeButton).
     //Notice we take in a variable "input" which is passed by the makeButtonAlert() 
     //call so that different messages can easily be used in the message box.
     $.fn.makeButtonAlert = function(input) {
       //Using the each function, we iterate all instances of the selector on the DOM.
        return this.each(function(){
        //At this point of the script, 'this' refers to the elements on the DOM you are iterating. 

             //Plugins can make use of a method for storing information -- this is properly named .data().
             $(this).data('message',input);
            //Just like the .css() or .html() functions, you use a second parameter to set the value.             

             //Plugins also have their own method of attaching events, using the .bind() method. The first parameter in quotations is the JS event, the second is the function you tie that event to.
             $(this).bind("click", events.click);
             //You may 'chain' the bind command on one selector to attach multiple events. The methods triggered by these events are coded below in the events object.

        }); //Closing for .each() method
      }; //Closing for $.fn.makeButton
      var events = {
         //Set up the events object with a method that gets fired when the 'bound' selector gets clicked.
         click: function(){
            alert($(this).data('message'));
         }
      }; //Closing for events object

 })(jQuery); //Closing for plugin

The Easy Part…

Now, you’re free to use your customized plugin in other projects using:

$(‘.button’).makeButtonAlert(‘You clicked a button’).
$(‘input[type="button"]).makeButtonAlert(‘You clicked a button with a different selector.’);
$(‘#message-button’).makeButtonAlert(‘You clicked another button’);

With the development of user-friendly Content Management Systems, we now see many people using these tools to edit their own websites. Often times, this includes adding images to your page, and almost always you will want to work within a certain image size constraint so that the images will fit better into the layout of your site. Here are some simple guidelines to follow to ensure that your images are appropriate for the web and a easy tutorial on how to crop images to a specific size using Photoshop.

Have an image you want to use on the web? Check it’s size. If you are trying to use an image for a header banner graphic that spans the entire width (or close to it) of the website you will probably need more than 500 pixels. In Photoshop the easiest way to do this is to go to Image > Image Size and check there. No matter what the resolution is set at in this box, the number of pixels in an image stays the same (unless you modify the size while in this box). For web, 72 pixels/inch is always used but even if your image is currently set at a resolution of 300 pixels/inch the Width and Height under Pixel Dimensions will stay the same so you can at least know this and see if you have enough pixels in your image for the spot on your website you want to use the image for.

The absolute easiest way to crop an image and get it pixel perfect height and width is to use the crop tool in Photoshop. With your image open, select the crop tool from the tool panel (of you can use Ctrl+C on your keyboard). Once the tool is selected you will notice you have Crop Tool specific settings in the top bar. This is where the magic happens. If you know you have to create and image that is exactly 200 pixels by 300 pixels you can enter this in the bar. Just use “px” after your size to denote that you want to crop to pixels (as opposed to inches or centimeters) and make sure that your resolution is set to 72 pixels/inch (also called dpi). 72 dpi is the image resolution that is always used for the web because this is the standard resolution for computer screens.

Once you have the appropriate values entered in, all you have to do is click and drag your crop tool over your image to select the portion of the image you would like to crop and resize, then just double-click to finalize. One thing to keep in mind is watch the clarity of your image. If after make your cropping and the image seems to “pixelate” (it will zoom in a bit and get fuzzy) this means that your image was smaller than the size you chose to crop to and you have lost image quality. You may want to crop differently if possible, or use another image.

Once you are content with your selection the best way to save an image is to go to File > Save for Web and Devices. A box will pop up that will allow you to select what file format you want to use and how much you want it to compress the image (this will make the file size smaller to allow for quicker loading times). My go-to is usually a .JPG with a image quality of about 70. This will make the image a bit smaller without sacrificing quality. For larger images you may want to go a bit lower, but keep an eye on the image quality. If my image is already a bit low-quality I will save it with a quality of 100. I only use .PNG if parts of my image are transparent and .GIF is used for flat color graphics that need to be a small file size. Using .GIF for many images will mean a large sacrifice in quality. The preview window will show you exactly what your image will look like when it is output. This will help you double check image size and file size in advance, so take advantage of it. It’s better to consider things now rather than put your image up on your site only to notice then that it is the wrong size or has an issue with the image quality.

Hopefully this guide will give you a few tips or help you understand the tools a bit better if you are trying to prepare images for your site or even just check the sizing of images for you pass them on to someone else to use for a specific purpose.

We launched another great site for ITW Texwipe at http://www.texwipe.com! This site seamlessly blends the functionality of Hannon Hill’s CMS (the Products, Industries and Technical Data menus) with a full-featured ecommerce store (the Buy Texwipe menu), with shared navigation and design. This is the first project that integrated both products at the same time and, thanks to hard work by pretty much everyone on the software dev team at one point or another. 

BEFORE

AFTER

Other interesting features of the site:

• Ability to “hide” pages from different geographical regions, based on the “region” selection of the visitor in the footer.

• Transition of transactional applications from old system to new
• Email verification required to place order

The jQuery library has a collection of methods built for animating and manipulating the DOM.  These effects implement styling changes to produce transitions like fading or element movement.  The full list of methods are available on the jQuery website.

jQuery also contains a nifty method, animate.  Animate allows you to make a timed transition from one style to another.  This comes is handy when other effects methods don’t quite behave or lack needed functionality.

Consider the two snippets:

1: $(‘h1′).fadeOut(1000);
2: $(‘h1′).animate({opacity:’-=1′},1000);

Both perform the same transition, and in one second, the selected element transitions to being transparent.  However, the fadeOut method has a feature that sets the element’s display attribute to none when opacity reaches zero.  This especially becomes an issue if you need the element that fades out to maintain its structure in a template.

The animate method is also capable of manipulating multiple styles in one method.  If we needed to make an element slide on the page while coming into view from being transparent, this can also be done with a single line, separating multiple style changes by a comma.

$(‘h1′).animate({opacity:’+=1′,marginLeft:’+=15px’  },1000);

Relatively and absolutely positioned elements can make use of the left/top CSS styles, but should be used to what works within your template and layout.

Animate and jQuery effect method’s all support callback functions which makes movement order easy.  The snippet below will result in the same animation, but the left margins are not animated until the transparency becomes fully visible.  These can be nested within one another to avoid using setTimeout and setInterval coding.

$(‘h1′).animate({opacity:’+=1′},1000,function(){
$(this).animate({marginLeft:’+=15px’},1000);
});

During recent projects, integrating fonts for the right look and feel has shown to be troublesome for Internet Explorer. After implementing a font file into a CSS file, Internet Explorer 9 would provide the following error and not show the embedded font:

CSS3114
@font-face failed OpenType embedding permission check. Permission must be Installable.

This error is listed on MSDN and states that:

 The font-face does not have permissions to install with the current webpage.

And to fix:

Obtain the correct permission or licenses for embedding the font.

The only help this really provided was narrowing my search results.  Luckily, I found a nifty program that can be run from the command prompt to correct this error in IE9.  Be aware however, as stated on the publishers download page:

Changing the embedding value does not give you license to distribute the fonts. You should only change this setting if you are the font creator, or something like that. Use at your own risk.

Download embed.exe

Program Useage:

1. Download the executable and move to the desktop with a copy of the font file.
   (Alternatively, you can drop this in your Windows/system32 directory)
2. Pull up a command prompt window.
3. Navigate to the desktop within the prompt
4. Execute by typing: embed.exe fontfilename.ttf
5. Viola, your font should be ready to use in IE9.

More on Font Embedding from MSDN »

As a software development project manager at Beacon, I’m also proud to say that I’m both an NPR and data geek, so I was elated to hear a story this week that united all of my passions:  Google Searches Are A Window Into Our Culture.  The tool “Google Correlate” is actually a fascinating window into how people are searching for not only one specific term, but an entire web of other related (or maybe not-so-related) terms.

The political example given in the story was somewhat predicable (Democrats– veggie-loving, fitness buffs; Republicans– meat-loving, weight-loss program participants), but my own searches turned up some interesting results on Google Correlate.  I am just starting work on a new website redesign for a well-known business school and was wondering what kind of associations I’d find if using terms related to that school (thinking I might be able to use this information with regard to site design and features).  Here’s the terms I tried:

• business school– while many of the U.S.’s top business schools are listed, I was surprised to see the appearance of “art schools” and “art colleges” as correlating terms.  Wonder if my client has considered cross-promotion with this demographic?  Could a more “artsy” site design have benefits in this area?
• management school– like the “art” association listed above, I was suprized to find “hospital association” as a correlation with “management school.”  Perhaps another marketing opportunity here?  Would a site feature that included possible hospital careers be helpful to these visitors?
• mba school– oddly, this was a much more common search term in Utah than any other state.  Not sure how we can leverage this, but I’m sure we’ll bat it around for a while!

Also, don’t miss the comic book on the Google Correlate site – fun!  The most important point that the comic book emphasizes and bears repeating here– “Remember:  Correlation is not causation.”  Google doesn’t attempt to explain the correlation between terms, just show it to us in a manner for us to interpret and leverage.  Happy correlating!

Flash is officially not being supported on mobile devices anymore. It’s a good thing for performance and battery life. It also opens up the door for more interesting ways of introducing techniques and effects to your audience.

So, that brings up the question on what people and clients ask. Should we update our site to be mobile friendly? In a short answer yes for the best reach of audience. The amount of people using mobile devices is growing and continues to do so at an astounding rate.

Here at Beacon, we have a team of professionals that can update your Flash site or Flash elements with cross browser and mobile device friendly code. Your site will feel more refined and can even be implemented to work with our great Cascade Server (CMS system). Staying ahead of the curve and keeping your site fresh will keep the visitors and customers coming back for more.