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.

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.

Le plugin Custom Field Template permet d’ajouter cette fonctionnalité.

Pour effectuer une requête de posts portant sur plusieurs de ces champs, par exemple afficher à l’accueil les pages :

• ayant pour modèle de page (_wp_page_template)  “page-product.php”,
• dont l’option “tplname_featured” est “product_pushs“,
• en les triant par la valeur de  ”tplname_featured_order”,

Il faut utiliser le paramètre “meta_query“ dans la méthode WP_Query :

$products = new WP_Query(array(
	'post_type' => 'page',
	'meta_key' => 'tplname_featured_order',
	'orderby' => 'meta_value',
	'meta_query' => array(
		array(
			'key' => '_wp_page_template',
			'value' => 'page-product.php'
		),
		array(
			'key' => 'tplname_featured',
			'value' => 'product_pushs'
		),
	),
));
while ( $products -> have_posts() ) : $products -> the_post();
	...
	echo $post->post_title;
	...
endwhile;

Les plus

• Le format (n’en déplaise à Steve) idéal pour transporter la tablette dans une poche intérieure de manteau et la tenir à une main. J’adore pouvoir lire un ebook ou un pdf avec assez de confort tout en restant “on the go”. Lire des emails avec l’application Gmail est aussi un vrai bonheur.
• Android (j’étais sur iPhone depuis plus d’un an) qui permet un contrôle plus avancé que sur iOS (un explorateur de fichiers ! On avait pas vu ça depuis… l’arrivée de l’iPhone -__-). Mais il y a un petit bémol (voir plus bas).
• Adobe AIR et Flash Player, étant développeur AS3 que demander de mieux ?
• L’autonomie qui m’étonne beaucoup, la batterie semble avoir été bien choisie !

Les moins

• La perception générale d’un manque de fluidité, très loin de l’iPhone/iPad (il m’a fallu une semaine pour m’habituer à la courbe d’easing utilisée pour les scrollers). C’est d’autant plus rageant qu’il semble bien s’agir d’une perception et non d’un problème de puissance.
• Le bémol de la gestion de fichiers : la connectique iPad-like (pourquoi pas du micro USB ?!?) et Samsung Kies, le crapware de synchronisation livré avec la tablette (qui n’imite pas iTunes, mais parodie le bureau de MacOS : WTF?). Et il est impossible (sans hack dont je n’aurais pas encore eu vent) de brancher simplement la Galaxy Tab sur un ordinateur comme clé USB sans Kies !?! (je ne sais pas encore si cela va me desservir quand je vais vouloir débugger du AIR sur la tablette).
  
• Le manque d’applications de qualité sur l’Android Market. Apple a réussi sa stratégie. Beaucoup de développeurs d’applications mobiles se concentrent sur iOS. Malgré le portage de certains blockbusters comme Angry birds, on ne trouve pas d’applications comme FlipBoard ou The Photo Cookbook qui donnent tout son sens à l’iPad.
• La réflexion ergonomique générale pas aussi aboutie que celle d’Apple.
• L’appareil photo, qui n’est pas exceptionnel, et qui ne fait pas bien la mise au point de près (problème pour “scanner” des feuille pour les ajouter dans Evernote).

Hors catégorie

Une mention spéciale pour le Flash Player. Étant flasheur, je suis très content de pouvoir tester des sites en flash. Mais l’expérience n’est vraiment pas la même que sur le bureau. Par exemple lire une vidéo en flash peut dépanner, mais j’ai pris l’habitude de lancer les vidéos youtube avec le lecteur vidéo pour éviter la désynchronisation du son et de l’image… J’attends avec impatience la nouvelle classe StageVideo.

Conclusion

Je suis vraiment ravi dans l’ensemble. J’adore Swype, Awsome Drop, les échanges de fichiers entre les applications. Je redécouvre Evernote.

Et depuis une semaine, j’ai laissé mon iPhone à la maison et inséré ma carte SIM dans la Galaxy Tab, il fait tout à fait l’affaire même s’il faut toujours penser à prendre son kit main libre sans lequel on n’a droit qu’au mode haut-parleurs.

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 :

Par exemple, insérez ce code dans un snippet :

$$(Description=ValeurA,ValeurB,ValeurC)

Et au moment de son utilisation, vous obtiendrez une popup permettant de choisir la valeur à insérer :

Voici une version améliorée du snippet for qui montre bien l’usage et les possibilités offertes par les arguments dynamiques :

for (var $$(Iterations=i):int = $$(StartAt=0); $$(Iterations) < $$(Count=n); $$(Iterations)++) $(CSLB){
    $(EntryPoint)
}

Avec tout ça, j’ai amélioré mon snippet perso. Il permet d’insérer des séparateurs comme décrits dans les conventions de codage d’Adobe. Et c’est un bon exemple d’arguments non obligatoire (une virgule après l’espace, et des espaces après chaque valeur) :

//--------------------------------------------------------------------------
//
//  $$(IsOverriden=,Overriden )$$(Access=,Public ,Private ,Protected )$$(IsStatic=,Class )$$(Type=Properties,Methods,Constants)
//
//--------------------------------------------------------------------------
$(EntryPoint)

Dernière chose : tout ceci fonctionne aussi avec les templates de fichiers.

Enjoy :)

var value:Number = getNumber("id") || DEFAULT_VALUE;

Mais, ceci revient à vérifier si Boolean(getNumber(“id”)) est true ou false et d’associer la première ou seconde valeur. Et si la valeur retournée est NaN ou 0, la condition ne sera pas remplie et la valeur par défaut sera attribuée.

Pour éviter ce souci, il suffit d’utiliser la méthode globale isNaN() :

// récupération de la valeur
 var value:Number = getNumber("id");
// attribution de valeur par défaut
if (isNaN(value)) value = DEFAULT_VALUE;
 

On doit souvent reprendre des sources créées ou modifiées par des freelances. Aujourd’hui je suis tombé sur une aberration de plus. Il s’agit d’un code récent (moins d’une semaine) et d’un freelance qui travaille avec l’agence depuis longtemps (pas faute d’avoir prévenu les responsables de son manque de… logique).

Je vous laisse apprécier une de ses œuvres. Et pour ceux (ou celui) qui suit mon blog, je vous invite à corriger ces 3 lignes d’aberrations dans les commentaires :

 carnet._londres.gotoAndStop(carnet._londres.currentFrame);
 carnet._bresil.gotoAndStop(carnet._bresil.currentFrame);
 carnet._bangkok.gotoAndStop(carnet._bangkok.currentFrame);

Enjoy

J’observe tous les jours le manque crucial d’un outil puissant d’estimation de temps pour simplifier la prise de décisions dans la gestion de projet. J’ai donc décidé développer une nouvelle application inspirée de mes lectures sur les méthodes “À Gilles”, et de mon expérience en agence web. Voici la première version (encore en béta) de cette solution révolutionnaire : L’Estimator.

N’hésitez pas à faire vos retours dans les commentaires de cet article.

Lessrain a lancé il y a un moment un nouveau site pour RedBull : SoapBox Racer (dans la lignée du Flight Lab).

Grâce aux outils cités précédemment, on peut voir que le site utilise les classes/librairies suivantes :

• MacMouseWhell - http://blog.pixelbreaker.com/flash/as30-mousewheel-on-mac-os-x/
• Box2d - http://box2dflash.sourceforge.net/
• Tweener - http://code.google.com/p/tweener/
• AS3CoreLib - http://code.google.com/p/as3corelib/
• JPGEncoder revisité par Thibault Imbert – http://www.bytearray.org/?p=775
• Base64 Encoder – http://dynamicflash.com/goodies/base64/
• Plusieurs classes de Polygonal.de – http://lab.polygonal.de/
• Papervision3d - http://code.google.com/p/papervision3d/
• PureMVC - http://puremvc.org/

L’organisation des packages est très intéressante :

• com.lessrain.as3lib – pour ce qui semble être le framework interne.
• com.lessrain.projects.redbull.shared – pour ce qui semble être l’ensemble des classes partagées sur les différents projets du client.
• com.lessrain.projects.redbull.soapbox - pour le classes spécifiques au projet.

Conclusion, le mélange Papervision3d/Box2d revient très souvent, les autres moteurs sont rarement utilisés pour des site alliant physique 2d et rendu 3D (comme pour 14-7.com). Une autre chose intéressante à retenir : l’utilisation de PureMVC, que l’on retrouve dans de nombreux site tout autour du monde (ex : EnergyLab de HelloEnjoy).