January 4, 2012 at 11:40CaptainDash : Site Of The Day

Voici un projet sur lequel j’ai travaillé suite à un tweet de Nicolas Rouyer qui a réalisé un superbe design inspiré par l’univers graphique des comics américains.

CaptainDash.com a été développé en HTML/CSS/JS et a été élu Site Of The Day par Awwwards.

 

Written by Rémi.T under Coding.
Add a comment »

June 14, 2011 at 22:34Les sites élastiques, c’est fantastique !

Depuis janvier dernier, je travaille avec l’Agence Modulo. Une petite équipe, pleine d’idées et d’ambitions.

J’ai déjà réalisé de beaux projets, dont deux en marque blanche dont je ne peux pas vraiment parler (?) : une petite application Flash, et un site wordpress.

Mais vendredi dernier, c’est un autre projet que nous avons mis en ligne, le site du Festival de Saintes :

Il s’agit de mon premier “site élastique” : un site qui s’adapte à toutes les tailles d’écrans. Aussi agréable à lire sur ordinateur, tablette ou smartphone. Réalisé à grand coups de media queries CSS3 et de réflexions ergonomiques.

Cette technique, apparemment simple, cache en fait un bon nombre de problèmes techniques et ergonomiques. En effet, il faut faire avec le tronc commun des spécifications du W3C implémentées par les appareils, et arriver à fournir une expérience utilisateur cohérente et adaptée à tous les formats.

J’avais entendu parler des media queries il y a longtemps, mais c’est Quentin (toki-woki) qui m’a permis d’ouvrir les yeux sur cet univers merveilleux.

Aujourd’hui avec l’apparition massive d’appareils connectés j’ai du mal à imaginer mes futurs projets autrement qu’en “élastique”. Même si, comme toute technologie, il faudra l’utiliser à bon escient.

Sur cette lancée, j’ai finalisé et intégré un nouveau design pour mon site/page remitoffoli.com :

N’hésitez pas à me donner votre avis sur le sujet et sur les deux sites web. :)

Note : penser à redesigner le blog.

Written by Rémi.T under Coding.
Tags: , .
1 comment »

November 2, 2010 at 12:03[AS3] Truncate a TextField with a maxLines

Here is a snippet to set a maximum lines to a TextField and truncate the end of the text with a “…” :

function truncate(textfield:TextField, maxLines:int):void
{
	// the alternative text
	var alt:String = "...";

	// if the text displayed has more lines than wished
	if (textfield.numLines > maxLines)
	{
		// index of the last char of the last line to display
		var char:int = textfield.getLineOffset(maxLines) - 1;

		// remove the length of the alternative text
		char -= alt.length;

		// get the last non space char index
		char = textfield.text.substring(0, char + 1).search(/\S\s*$/);

		// set the new text into the textfield
		textfield.text = textfield.text.substring(0, char) + alt;
	}
}

Using TextFieldAutoSize.LEFT and this code :

truncate(titleTxt, 1);
descTxt.y = titleTxt.height;
truncate(descTxt, 3);

You get this result :

Written by Rémi.T under Coding.
Tags: , .
3 comments »