This is a great update for this component.

You can now control the player also when it’s set as background!

Give it a try!

As most of you know there are new features in CSS3 that let you animate HTML elements using just CSS.

Using CSS3 “transition” you can control which property to apply, the duration of the transition, the transition timing and the transition delay.
The transition considers also the “transform” parameter specified in the CSS class.

Actually jQuery .animate() method doesn’t consider the CSS3 support and it applies the animation using javascript.

That’s why I realized the mb.CSSAnimate() simple method that uses CSS3 instead of javascript to animate HTML elements; it provides a callback function fired once the transition ends as jquery.animate() does and it fallback to jquery.anomate() if “transition” is not supported by the browser.

Why should we consider to use CSS3 instead of javascript to animate HTML elements?

Well… First CSS3 animation use less CPU than javascript; the UX is smoothness (especially on mobile devices); on iOs is hardware accelerated; you can animate also background color, rotation, scale, skew or any of the CSS properties available that the default .animate() method doesn’t provide.

What happens if the browser doesn’t support CSS3 using mb.CSSAnimate()?

Actually the mb.CSSAnimate() method has a fallback to the jquery.animate() one; of course if you were animating a “transform: rotate()” property you’ll lose it .

How can I use specific prefixed CSS property with mb.CSSAnimate()?

To use specific browsers property with mb.CSSAnimate you just need to remove the prefix from the property.
For example if you want to animate the “-webkit-transform: rotare(180deg); -moz-transform: rotare(180deg); -o-transform: rotare(180deg); -ms-transform: rotare(180deg)” property here is how you should call the method:

$(myObj).CSSAnimate({"transform": "rotate(180deg)"},1500,"ease-out", "all", callback);

Some useful links:

When can I use CSS3 Transitions?: http://caniuse.com/css-transitions;
MDN transition: https://developer.mozilla.org/en/CSS/transition
CSS 3 Transitions: http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
Understanding CSS3 Transitions: http://www.alistapart.com/articles/understanding-css3-transitions/

Take a look at the demo:
http://pupunzi.github.com/jquery.mb.CSSAnimate/demo.html

Download:
https://github.com/downloads/pupunzi/jquery.mb.CSSAnimate/jquery.mb.CSSAnimate.1.0.zip

I’ll add documentation and a component page soon.

The jQuery mb.components family is growing up and a new tool to zoom images has been added.

I hope you like it and you enjoy it!

Here is the component page where you’ll find links to the demo page, to the download file and to the doc page:

http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-zoomify/

Of course you do, as all of us.

As a creative and graphic designer I’m always looking around for inspiration and one of the best way for me is to collect images that stimulate my creativity.
Of course if you just collect images without organizing them this method suddenly become just chaotic, losing its utility. So, the problem is how to organize this material?
You can create folders on your computer where to put your images… But there’s not a simple way to add tags, associate images to a specific project, find them…
You can use one of the powerful image managers available either online or as client App… but this way you need to download the image, add it to the App, organize them…, and anyway this method doesn’t allow an easy way to include organically your collection into a project or a presentation…

That’s why we decide to improve Licorize creating an easy way to get images from the web.

Licorize 2.0 makes collecting photos easier than never.
You can now open the webpage where you found interesting images, open the Licorize bookmarker window (available as plugin for Firefox, Chrome and Safari or as bookmarklet for all the others), click on any image you want to add to your collection and that’s all!

Images will be automatically added to your strip; the strip can be associated to a public or private project, you can add as many TAGS as you need; you can make a public or a private booklet viewable by everyone from everywhere….

Videos

As for images you can collect videos; in that case, if you are on a Vimeo or Youtube page and you use Licorize, it automatically detects the video and suggests you a Video strip type with the actual URL embedded. If the video is embedded on a generic page you can get it by clicking on it once the Licorize window is active; the strip switches automatically to the Video type and the game is done.
Here is a short video cast by Pietro explaining how to collect images and videos for a specific project:

If you already use Licorize than you just have to try this new feature (and all the other explained here: http://blog.licorize.com/2011/09/07/licorize-2-0-bookmark-presentations-rssflipboard-integration-maps-location-handling-and-more).

If you are not using Licorize…
What are you waiting for? Start today!

“Hunt for customers on the web and duel with other agencies.
Live the life of a talented and cursed visionary creative.”

This was the last think we had to do before the Adslife game’s launch.
Adslife is a web based game, pure HTML, where you compete with others using your creativity instead of guns.
All your winning works are visible on your Adslife public page and your masterpieces will be placed at the Adslife Museum of Modern Advertising.

So take a look and play with your creativity!

Visit Adslife now!

For reviewers: Here you can find the press kit and all what you need for your Adslife review:

http://adslifegame.com/applications/adslife/site/adslife-presskit.jsp

This is a horrible hack that works beautifully (’till next Apple iOs update).

It was a while that we where looking for a background audio solution for our Adslife browser game when played on iPad or other iOs devices. Apple’s policy about audio and video autoplay in iOs browser is to deny this feature.
After several failed attempts I figured out a simple hack that makes it possible to call  directly the source URL of audio files and play them on the HTML page load.
I first noticed that Safari on iOs plays automatically a mp3 file (or even mp4: videos!) if it is directly called as a URL.
Then, why not include a hidden iframe in the page pointing to the audio file to load and play it once the page and iframe are loaded?

It works!
Once you load the page, just after buffering the mp3, the audio starts playing!

Here is the javascript code:

var isiOs = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i));

function bgAudio(opt){
if (isiOs){

var ifr=document.createElement("iframe");
ifr.setAttribute('src', opt.mp3);
ifr.setAttribute('id', "bgAudio");
ifr.setAttribute('width', '0');
ifr.setAttribute('height', '0');
ifr.setAttribute('scrolling', 'no');
ifr.style.border="0px";
document.body.appendChild(ifr)

} else{

var audio=document.createElement("audio");
audio.setAttribute("id","bgAudio");
var mp3Source= document.createElement("source");
mp3Source.setAttribute('src', opt.mp3);
var oggSource=document.createElement("source");
oggSource.setAttribute('src', opt.ogg);

audio.style.display="none";

audio.appendChild(mp3Source);
audio.appendChild(oggSource);

document.body.appendChild(audio);

audio.load();
audio.volume=0.6;
audio.play();
}
}
window.onload = function() {
bgAudio({mp3:"http://dl.dropbox.com/u/1976976/segreteria.mp3", ogg:"http://dl.dropbox.com/u/1976976/segreteria.ogg"});
};

function stopBgndAudio(){
var el= document.getElementById("bgAudio");
document.body.removeChild(el);
}

And here is a demo page.

Actually I tested it on iOs 4.3.5 but I’m quite sure it works on previous versions too.
This hack does not solve the other limitation imposed by Apple on all iOs devices: Play two audios at once .
We can’t have everything in this life…

Hope this is helpful – and that you’ll play Adslife

I’m glad to announce that Adslife is now available as beta release

Why should you play this game?

Well, first of all this is something different from games you use to play;
It is all realized using HTML and Javascript (jquery) and you’ll not believe it;
You compete with other players all around the world not with guns but with beauty!
You can work as  barman if you are desperate;
Your masterpieces can be exposed to the Adslife Museum!
You can become a referral for other bids;

You can… Just start play and you will discover Adslife’s world.

If you don’t understand what Adslife is: http://adslifegame.com/applications/adslife/site/adslife-introduction.jsp
If you want to see how to make your bid: http://adslifegame.com/applications/adslife/site/adslife-videos.jsp

Enjoy the game and help us making a better web!

We made a short video of some steps of our new game production: Adslife.

It’s an HTML5/javascript web based game with a long play life duration philosophy (here the blog post).

Are you curios? Go Here

jquery.mb.extruder has been updated to version 2.3

This release fixes several bugs and introduce a new parameter to control the open on mouseover behaviour: “autoOpenTime” (0= do not open onmouseover – value in milliseconds)

Go to the component page or see the demo

I’m glad to announce that the new pupunzi.com site is out!

I really liked the site as it was before, and as it happens with all the changes,  I’m feeling both sad and happy… But everything must change with time.
This new site gets advantage of all the new HTML5 features (it works great with  “modern” browsers including IE9) and gives the idea of what it’s possible to do with the new web technology generation.

Previous path to components and sections are preserved to maintain all the trackback links unchanged; the graphic is completely new and striking; there are sounds ( you can turn off)  that automatically turn off once the page looses focus; there are tree more jquery plugins published and whaiting for you:

1. jquery.mb.bgndGallery
2. jquery.mb.miniAudioPlayer
3. jquery.mb.valueSlider

Take a look and let me know your impressions.

http://pupunzi.com