Patrick Hansen.com

Web Designer Magazine 179 is on sale now!

A few co workers/friends of mine (Michael Salamon & Jason Bowers) along with myself are featured in the Hot 100 predictions for web trends we’ll see in 2011.

The magazine has a lot of great content in addition to the shameless plug I just mentioned:

- Main Features
Web Designer HOT 100 2011

- Rounding up the top talent, tech and trends for the year ahead
Pro File with Firstborn

- Exclusive agency tour with one of NYC’s finest creative teams
Design diary: We Love

- Chronicling the build of a brand new agency website
Whatever happened to Augmented Reality?

- Discussing the state and potential of one of web designs fallen trends

Also inside… (full list of features/reviews/previews)
- The future of web fonts – news and views
- Cool products rounded up in Webkit
- Awesome site designs showcased in the latest Lightbox
- 3D transforms with CSS and HTML
- Create content for the HTML5 canvas tag
- Create an animated navigation menu
- Multilingual WordPress blogs with qTranslate
- Build a Twitter app with jQuery Mobile
- Facebook page design with 520 Grid System
- Free CD resources

Bold WordPress Theme from Organic Themes worth £40
XML 3D Google Map worth £15 from FlashReseller.com
30 music loops and sound FX from Soundsnap worth £18
Ultrashock Breeze Effect widget for Flash/AS3
Soft Grunge Patterns Vol 2 from WeGraphics
9 eCommerce vector icons from Snap2Objects.com
AS3 Basics par 4 from Cartoon Smart worth £35
Dreamweaver CS4 Basics video from Killersites

For more info, visit:
http://www.webdesignermag.co.uk/blog/web-designer-179-on-sale/

JQTouch is a JQuery plugin for mobile web development targeting the iPhone, iPod Touch, and other mobile touch devices and utilizes WebKit. What does this mean?

This means you can add interactions, layout and styles to a website which are targeted towards multi-touch devices and follow most of the guidelines and currently defined best practices for UI/UX design in this arena. Many have already accomplished some of those angles with standard HTML and CSS which caters more towards the iPhone and mobile devices, but this adds a lot more functionality and interactivity based on JQuery right out of the box, making your website a much more robust and richer experience for mobile users.

You can view the demo on your device and check it out:

http://jqtouch.com/preview/demos/main/

Visit the site:

http://jqtouch.com/

This is part of Sencha labs, which is another framework which parallels JQTouch.

I’ve been playing around with javascript and JQuery lately and was working with some image-based buttons. This is nothing new and there are hundreds of solutions out there for this approach including the popular CSS direction. I did find some javascript solutions, but I couldn’t find any examples that were scalable and/or didn’t require several dependencies or explicit references like requiring ID’s or exact image file names and paths, which can be a hassle if you are dealing with multiple image-based buttons on a page or site.

So for whatever reason you may need a JQuery controlled image-based button, here you go.

note:
My example here is just providing a JQuery approach for image-based buttons. This can also be done quite easily using only CSS and altering the background image for the state. You would have to create a selector for each button and provide explicit height/width attributes for each button in the CSS. I would recommend using the CSS approach over the JQuery one, as it is more scalable if you decide to change the appearance of your buttons, you only have to alter the CSS and don’t need to mess with the markup.

Back to the JQuery Image-based button example:
There were several reason why I wanted to make this as generic as possible:

• Versatile Usage: Need to re-use this script across a site, different pages, even in PHP include files, and these files/pages may reside in various directories which would alter any explicitly declared image paths in the script.
• Image Type: Uncertain what type of image the buttons may be comprised of across the site: gif, jpg, png, etc.
• Number of buttons: May have several button instances and types throughout the site.
• No CSS Buttons: For some reason, the site is not using CSS based buttons

This script addresses all of those concerns with only 3 minimal requirements:

1. The obvious, must have current JQuery lib file linked to your page, and this script either in the page or in external linked js file.
   Download JQuery Here
2. Must assign the class the script references to the anchor tag for your button.
   (example: <a class=”js_uniButton” …></a> ).
3. The up and over images MUST have the same file name and be the same file type, but the over image must be appended with “_hover“. (example: MyImage.gif and MyImage_hover.gif)

I’m a novice using JQuery with only a couple months experience, so if there is a better way, then feel free to let me know. A friend of mine helped me write the image URL caching function, which ensures the image URL only gets called once.

Below is an example of the script with detailed comments and extra line breaks for easier readability.

Click here to VIEW the demo

Click here to DOWNLOAD the demo

note:
This needs to be within a doc ready function either in the page or in external js file:
$(document).ready(function()
// insert script here
});

//*************** JQeury Universal Image Button ***************
function getHoverPath (imgPath) {
//split imgPath after each '/' and create array to path directories and file name
var srcPathArray = imgPath.split('/');
//find image file name get length of srcPathArray and retrieve last item which is the image file ex: "images/buttons/IMG.gif"
var imgFile = srcPathArray[srcPathArray.length-1];
//image file name array split at "." to get:[fileName, ext]
var imgArray = imgFile.split('.');
//img name (first item in imgArray)
var imgName = imgArray[0];
//image ext (second item in imgArray)
var imgExt = imgArray[1];
//image src path
var srcPath = imgPath.split(imgFile , 1);
// concatenate path and add "_hover" to image file name
return srcPath + imgName+'_hover.'+ imgExt;
};
// get hover button array
var hoveredButtons = new Array();
 
$('.js_uniButton').mouseover (function() {
$this = $(this);
//get image path of this instance
var imgPath = $this.children('img').attr('src');
//cache img path url on initial mouseover
if (typeof(hoveredButtons[ imgPath ]) == 'undefined') {
hoveredButtons[ imgPath ] = getHoverPath( imgPath );
//console.log('cache image path ' + imgPath + ' and hover path ' + hoveredButtons[ imgPath ]);
 }
$this.children('img').attr('src' , hoveredButtons[ imgPath ]);
 
//mouseout actions
$this.mouseout(function() {
//define this handler
var $this = $(this), handler = arguments.callee;
 
//unbind mouseout handler
$this.unbind('mouseout', handler);
 
// on mouseout, swap current image with original image path
$this.children('img').attr('src' , imgPath);
});
});

It was announced late last year that Flash can run on the iPhone. This was of course, as an application using a special iPhone conversion plugin for your Flash application, and still isn’t as optimal as creating an app directly in Cocoa or local iPhone OS platform.

A developer named Tobey Schneider ( @tobeytailor ) has release an early version of Gordon, an open source Flash runtime written purely in JavaScript.

This means you can run a SWF in the browser (Safari).

Check demos here:

http://paulirish.com/work/gordon/demos/

(Yes, the swf’s demo’ed run on the iPhone via Safari)

You can view details and the source here:

http://github.com/tobeytailor/gordon

This is just an early version of Gordon which has some limitations, I’m not sure on its capabilities to run Action Script, so complex flash apps/sites may experience issues. It appears that it will play a SWF or simple animation based on the demos, but I haven’t seen anything really complex yet. This does however, open up a big door not only for Flash on iPhones, but other ways to run Flash on various devices that support Javascript and not Flash… or is that only an iPhone?

As Flash matured into CS4 and soon to be CS5, AS3 and Object Oriented Programming is becoming a standard. Great if you’re a developer with that type of background, but what if you’re a designer or a newbie with minimal development knowledge and you want to start getting creative? You can still deal with the timeline if you want, but that is very restrictive and limiting. That’s where HYPE comes in!

What is Hype?
“HYPE is a creative coding framework built on top of ActionScript 3. A major goal of HYPE is to allow newcomers to Flash and ActionScript to creatively play and express themselves while they are learning how to program.”

Learn more about Hype here:

http://hype.joshuadavis.com/

This comes from the talented artist, designer, and technologist Joshua Davis.

My friend Juan Sanchez, has already been playing around with it along with Degrafa, a Declarative Graphics Framework that he is a part of. Originally, it was used primarily with Flex, but now they are getting it more AS3 based and allowing to be used with Flash as well.

You can check some of his experiments at: