Just check it : http://dev.makemepulse.com/yui_megamanv1/

Our biggest project was to work on the revamp of NRJ website platforms. We work with e-NRJ development team to made this possible. It was a huge work during 6 months and the result can be check on http://www.cheriefm.fr/

We also worked with Addiction Agency, some “old” friends from Publicis on several projects for Eurosport. We worked with them on another project for RM Gatte Fossé.

We have also work with Digitas on the new Nissan website. (FWA Site of the Day Baby )

We just finished the first part off the new Dior watches website (full Javascript with YUI… ouch ) with The Blast Machine.

And to finish this selection, a few words about our best meeting of 2008, Yohan and Olivier from Jam’s Brain. We work with them on Modepass.com (yes we are geek and we also like beauty and fashion !) and a new version will soon be launched.

To close, a few words about the future of Make Me Pulse. We have a new Senior PHP/Mysql Developper which comes at the beginning of May. To complete our team we are also hiring a talented Junior PHP/Javascript developper… so if you’are interested and near Paris (it’s better) feel free to contact us at contact_AT_makemepulse.com .

Nico & Antoine

Version 2.7.0 introduces a new StyleSheet component, graduates three components out of “beta”, improves support for the upcoming release of IE8, includes over 180 bug fixes and enhancements, and ships with more than 300 functional examples.

More information on the YUI blog.
Just waiting for a new release of the YUI 3.X now !

So here we go! To use this carousel we need YUI utilities and container.

<script src="http://yui.yahooapis.com/combo?2.6.0/build/utilities/utilities.js&amp;2.6.0/build/container/container_core-min.js" type="text/javascript"></script>

For the structure of the carousel, it’s quite similar to Bill Scott carousel

<div id="carousel" class="carouselCss">
	<img class="carousel-prev" src="images/fleche-gauche.png" alt="Previous Button" />
	<img class="carousel-next" src="images/fleche-droite.png" alt="Next Button" />
<div class="carousel-region">
<ul class="carousel-list">
	<li><a href="http://static.flickr.com/3094/2690129022_5c855274b1_m.jpg"><img src="http://static.flickr.com/3094/2690129022_5c855274b1_s.jpg" alt="" />Ducati 1</a></li>
	<li><a href="http://static.flickr.com/1358/1243480131_4f09c7d5f1_m.jpg"><img src="http://static.flickr.com/1358/1243480131_4f09c7d5f1_s.jpg" alt="" />Ducati 2</a></li>
	<li><a href="http://static.flickr.com/160/371320508_e8ed56e9a0_m.jpg"><img src="http://static.flickr.com/160/371320508_e8ed56e9a0_s.jpg" alt="" />Ducati 3</a></li>
	<li><a href="http://static.flickr.com/44/159272697_66465c97fb_m.jpg"><img src="http://static.flickr.com/44/159272697_66465c97fb_s.jpg" alt="" />Ducati 4</a></li>
	<li><a href="http://static.flickr.com/64/159220583_57449b5041_m.jpg"><img src="http://static.flickr.com/64/159220583_57449b5041_s.jpg" alt="" />Ducati 5</a></li>
	<li><a href="http://static.flickr.com/32/42953747_d0e9207270_m.jpg"><img src="http://static.flickr.com/32/42953747_d0e9207270_s.jpg" alt="" />Ducati 6</a></li>
	<li><a href="http://static.flickr.com/2393/2221413634_81d553c62b_m.jpg"><img src="http://static.flickr.com/2393/2221413634_81d553c62b_s.jpg" alt="" />Ducati 7</a></li>
	<li><a href="http://static.flickr.com/3270/2536169010_382e30a8e6_m.jpg"><img src="http://static.flickr.com/3270/2536169010_382e30a8e6_s.jpg" alt="" />Ducati 8</a></li>
</ul>
</div>
</div>

The last thing is to simply declare a new carousel object with an configuration object

Event.onAvailable("carousel", function(){
	var myCarousel = new YAHOO.mmp.Carousel("carousel", {
		width:"600px",
		height:"200px",
		picture:["75", "75"], 
		picturezoom:["150", "150"],
		picturespacer:10,
		pictureborder:5, 
		picturebordercolor:"#cccccc"
	});		
});

After the page loading you will see a simple calendar like this one :

Here is a list of this carousel feature :
- simple construction in HTML
- infinite elements in carousel
- infinite loop on the carousel’s elements
- auto hide left and right arrow when there isn’t enougth elements in the carousel
- auto zoom on mouseover
- simple configuration

For the configuration :

var myCarousel = new YAHOO.mmp.Carousel("carousel", {
	width:"600px", //width in pixel or percent, default : auto width
	height:"200px", // height in pixel or percent, default : auto height
	picture:["75", "75"], //picture size in pixel [width, height], default : 50, 50
	picturezoom:["150", "150"], //picture size in pixel on mouse over[width, height], default : 75, 75
	picturespacer:10, //space between pictures in pixel, default : 10
	pictureborder:5, //border around picture in pixel, default : 1
	picturebordercolor:"#cccccc" //border color, default : #ffffff
        animduration:0.5, //all animations duration in second, default : 0.5
        easing:YAHOO.util.Easing.easeOut // Animation easing, default : YAHOO.util.Easing.easeOut
	});

You can download the source code and samples here or see examples here.
This carousel has been test successfully on IE 6/7, FF3.X and Safari 3.X

The list of changes includes the following :

- Refactored JavaScript implementation
- New SWFAddress.swc AS3 component
- New CS4 based Splash screen sample
- New Digg API sample
- New up() method for easier deep linking path navigation
- New XSS protection that doesn’t affect special characters
- Support for Internet Explorer 8
- Support for custom HTTP status messages in the SEO sample
- Improved title handling
- Improved unload event handling for IE
- Updated Rails sample
- Fixed getBaseURL() for AS3
- Fixed Safari 2.0-2.0.3 support
- Build-in fix for the Firefox 3/Mac OSX blinking effect
- Additional onLoad fix for application/xml content type
- Fixed optional options parameter for the popup method
- Cross platform build script
- Various optimizations

Very soon the same API will become available for Silverlight and a jQuery plugin is coming.

Check It !
Download It !

Good job made by the Yui Team !
Just waiting the new version 3.

 http://yuiblog.com/blog/2008/10/01/yui-260/

After a long reflexion, we decide to open this blog to new contributors. So if you want to post something on developement (PHP, Javascript, AS, Android, Flex, Air, Processing, …….) sometimes but you don’t want to have your own blog, you can become a contributor here to submit your articles !
If you are interested, send us a mail to antoine.ughetto _AT_ gmail.com

I will test all of that really soon, seems to be great !

More info on http://yuiblog.com/blog/2008/02/20/yui-250-released/ and more tests here in the next days !
Congratulations to the Yui Team

This site is really interactive and remember us one of our experimentation with the Yahoo Maps API and Reuters news feed that we made one year ago (Blog post) Check it!

Yahoo blog post

First we will create a simple calendar :

YAHOO.namespace("example.calendar");YAHOO.example.calendar.init = function() {
      var today = new Date();
      YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", {
            navigator:true,
            multi_select:true,
            maxdate: (today.getMonth()+1)+"/"+today.getDate()+"/"+today.getFullYear()});YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);

This will create a simple calendar.
If we want to select a week, there is an easy way to select the cell of the clicked date and then to navigate throw parent nodes.

This method will get the selected date. We will go to the TR parent to get all the td nodes. With this solution and with the getDateByCellId we can get the first date of the week and the last. We then just have to execute the select function on this range.

var customClick = function(e, cal) {
    YAHOO.example.calendar.cal1.deselectAll();
    var elem = YAHOO.util.Event.getTarget(e);
    while (elem.tagName != "TR") {
          elem = elem.parentNode;    
    }
 
    td_tochange = elem.getElementsByTagName("td");
    var date_start = YAHOO.example.calendar.cal1.toDate(YAHOO.example.calendar.cal1.getDateByCellId(td_tochange[0].id));
    var date_end = YAHOO.example.calendar.cal1.toDate(YAHOO.example.calendar.cal1.getDateByCellId(td_tochange[td_tochange.length-1].id));
    var date_range = (date_start.getMonth()+1)+'/'+date_start.getDate()+"/"+date_start.getFullYear()+"-"+(date_end.getMonth()+1)+'/'+date_end.getDate()+"/"+date_end.getFullYear();
    if(!YAHOO.util.Dom.hasClass(td_tochange[0], "selected")){
 	YAHOO.example.calendar.cal1.select(date_range);
    }else{
 	YAHOO.example.calendar.cal1.deselect(date_range)
    }
 YAHOO.example.calendar.cal1.render();
};

To enable the custom clik function we need to use the domEventMap on the calendar

YAHOO.example.calendar.cal1.domEventMap = {};
YAHOO.example.calendar.cal1.domEventMap[YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABLE] = [
 	{tag:null, event:"click", handler: customClick, scope:YAHOO.example.calendar.cal1, correct:false }
 	];

You can simply check the result here and view the source code !

Tidy is a binding for the Tidy HTML clean and repair utility which allows you to not only clean and otherwise manipulate HTML documents, but also traverse the document tree.

We user the tidy_parse_file() and a simple recursive function to display a treeview like this :

Check it

In one hour I’ve found a solution and made it. I’ve create a new textarea with the Iframe editor content. So you can edit your content in the Iframe Editor or in the new textarea. The original textarea is safe !

Check It�

Check It

One of this component, the RTE (alias Rich Text Editor) is very interesting and powerfull… so i wanted to test it. I don’t have much idea on what to do with it… After few minutes ( ) I decided to make a RTE with a Yahoo Maps plugin (YUI team has made one with FlickR). Because I’m not a flash dev, i try to implement the Yahoo Maps Ajax API… but doesn’t work with the new YUI 2.0.3 so, i decided to use the Yahoo Maps Flash API!
The YUI RTE is still in beta, so lots of feature� has some problem to work as I want . In fact, Embed are correctly rendered when they are in the textarea as default value but if we had them with the execCommand, they are not rendered.
So I had a small code in the editor-beta.js which rewrite a new iframe to render the embed (that’s not the good way but don’ t have more time to find a better solution). This experimentation seems to work on Firefox but I don’t know on other browser…

Check It

More informations on the YUI blog

(PS for yahoo : If you need a web developer, i’ll be happy towork with you)