Sergio Panagia Blog

Image Tween with Element.crossfade for MooTools

Element.crossfade is a MooTools extension to simulate a tween for background-image element’s property.

The syntax, in this new version, is very clear:

document.id('el').crossfade('end_image.jpg');

Just remember your element position property in CSS should be expressly declared (as absolute, relative or fixed), don’t leave it blank.

Note: you can customize the fade behavior by setting tween properties

document.id('el').set('tween', {duration:5000});

These will be inherited by ‘crossfade’ animation.

DemoDownload

GeoSuggester Goes 0.4

Updates to GeoSuggester was really needed, specially from the code-cleaning point of view.
This has been one of my first plugin; so I think it’s a good practice, as a developer grows, to put some of this experience gained in his older (but still actual) projects in order to enhance code and overall quality.
Here’s a quick changelog about functionalities:

  • Added delay option for Google Maps queries;
  • Added ‘Tab” listener to perform select action;
  • Added dismiss action for clicks outside of suggest box (previously was just ‘Esc’ key)
  • Added getLongitude and getLatitude methods (as suggested from Kris)

In addition, plugin code has been cleaned up and optimized.

On some browsers (see IE) animation seems still a bit slow, stay tuned for next updates.

Check out on minisite or the Forge.

Match the harmonic: An HTML5 Demo

HTML5.armonica is another example of what you can do with new drawing technologies on the Web.

This demo has been inspired by a Splinter Cell reminds about some time ago. In order to crack a system, in the game, you had to match a given signal with a random one, generated on the fly.

In this case the objective is the same , player may modify amplitude and angular frequency with arrow keys to match the given signal (is it possible to extend the example to offset too, if you manipulate the key event listener code).

Just for a reminder, the equation of simple harmonic oscillator is:

x(t) = A cosleft(omega t + theta_0right)

Demo

Redefining innovation: free thoughts for a closing year

At the ending edge of 2010 we may say things in the Web scene are becoming clearer comparing to last years hypes.

Stop talking about “innovation” with corporates on social networks

People’s understanding that being social at any cost is rapidly becoming unfashionable, and some experts predicted a trend through a more privacy-aware use of third party web applications for their users, tired of external and unnecessary presences.

Continue reading →

Corporate Social Media: a proposito degli studenti universitari

Da un po’ di tempo mi chiedo se qualcuno si sia occupato di fare un riassunto riguardo alle attività corporate sui social media dal punto di vista dell’utilità effettiva e delle conversioni in obiettivi.

A tal proposito, Nielsen ha appena rilasciato dei dati relativi allo studio del target “College Students” riguardo il mondo delle applicazioni web.

E’ emersa la tendenza ad utilizzare i Social Network come strumento di discussione e condivisione sempre più sotto una sfera privata, tendendo ad evitare i richiami alle aziende. Paradossalmente, invece, il modo più veloce e popolare di trovare informazioni su una certa azienda ricade ancora sul classico Google:

“But that doesn’t mean they want everything to be social. Students associate Facebook and similar sites with private discussions, not with corporate marketing. When students want to learn about a company, university, government agency, or non-profit organization they turn to search engines to find that organization’s official website. They don’t look for the organization’s Facebook page.”

Fatto curioso, sembra che gli studenti vantino, tra le altre cose, un’ottima capacità nel riconoscere ed evitare i dark-patterns che propongono annunci pubblicitari “mimetizzati” tra i contenuti stessi del sito.

“[..] students have a keen eye for ads and don’t like being tricked by sites that don’t clearly differentiate between editorial and advertising.”

L’articolo completo è raggiungibile a questo link, si tratta di un’esperimento condotto su 43 studenti in 4 paesi differenti (manca l’Italia all’appello).

A few thoughts about “Simple And Usable” book by Giles Colborne

Once finished reeding “Simple And Usable” book from Giles Colborne, I finally found some time to write a few lines about that here on my pages.

Despite “User Experience” and usability are becoming a sort of buzzwords, and we can see lot of new books and magazine talking about new and 20 years-old concepts, the content of this book is not trivial: it mainly focuses upon the changes after the introduction of mass-usage of mobile applications and their consequences on the common “desktop” Web.

Although in latest years everyone expected a mobile shift, only a bit of experience (because usability is a matter of experiments) might bring a real impact on how users really use a mobile application.

Colborne talks about real facts, common new design patterns with whom we will have to deal, like design for interruption: as it was found users launch your application in any potential spare time of their days, mostly during queues. So one of the key concepts that Colborne brings is a new way of design in order to reducing noise and as example, in outdoor environments, this becomes a real delicate job.

But on this book it is possibile to find non-common thoughts too, that in a certain way doesn’t reflect the classicist way of design: an example is the delegitimization of what characterized web apps all over the “Web 2.0″ hype: Customizable User Interface; until a few years ago it seemed this was the good trend to let users decide for their own. He suggests a serious valuation about giving users this feature, considering the important distinction between mainstreams (the common-medium user) and the advanced (skilled) one.
Continue reading →

Image Tween for MooTools

In terms of web development, using classes and plugins for common operations or effects can save you a lot of time.

I would like to share a quick snippet to add an image-transition with javascript that may be used to simulate a morph on mouse-hover event.

I made a simple class so you can keep your code clean:

First, create the element container, with no content inside:

HTML

Then initialize an instance of Image Tween class, specifying the element container, the start/end image and – optionally- the link to follow on user click:

MooTools Code

>
var iw = new ImageTween(
{
	el: document.id('tweenthis'),
	startImg: 'start.jpg',
	endImg: 'end.jpg',
	href: 'http://panaghia.it'
});

Nothing else, just a bit of MooTools!

DemoDownload