http://api.facebook.com/restserver.php?method=links.getStats&urls=google.com,google.ca

En remplaçant, bien évidemment, les URLs par les vôtres

Un(e) chargé(e) de projet en production interactive.

Le candidat (ou la candidate) sera appelé à travailler avec une équipe de programmeurs et développeurs interactif. Sa principale tâche sera d’assurer la gestion des mandats de l’entreprise (planification, production, budget et échéanciers), d’effectuer le suivi auprès des clients et d’assumer les tâches connexes à l’ouverture à la fermeture d’un projet. Ceposte est disponible sur une base contractuelle, soit un remplacement de congé de maternité d’une durée de 1 an, avec une possibilité de permanence à la fin du contrat.

REQUIS

• Expérience en agence de publicité intégrée ou en boîte de production interactive
• Sens de la planification et savoir gérer les priorités
• Aptitudes pour le service à la clientèle
• Capacité à gérer plusieurs projets à la fois
• Connaître la base du lexique interactif

Un développeur interactif (permanent et/ou pigiste)

Le candidat (ou la candidate) sera appelé à travailler sur des projets de natures diverses, notamment : des bannières ‘Rich media’, des jeux interactifs, des sites simples,
complexes ou très complexes. Il/elle côtoiera une équipe de passionnés dédiée à pousser les projets au delà des attentes des clients et devra être en mesure de participer au développement de projets seul ou en équipe.

REQUIS

• Maîtrise de Actionscript 2 et 3, HTML, CSS, XML
• Maîtrise ou compréhensions de base du OOP
• Bonne connaissance de la suite Adobe (Photoshop, Illustrator, Dreamweaver, Flash)
• Compétences PHP et CSS un atout

En espérant vous revoir bientôt chez nous!

La fondation Movember a ammassé plus de 7 millions de dollars au Canada seulement cette année.

Allors ont se dit à novembre prochain pour le mois de la moustache!

Faites-un don!

Pour plus de renseignements sur le cancer de la prostate, visitez:
www.cancer.ca

Pour plus de renseignements sur la fondation Movember, visitez:
ca.movemberfoundation.com

Encore merci Akufen pour cette belle création.

Ce projet à été réalisé pour l’agence Saint-Jacques Vallée young & Rubicam.

CSS3
Même si elle existe depuis CSS2, la propriété CSS @font-face n'a toujours pas été adoptée à grande échelle. Triste, surtout si on tient compte de la facilité d'implantation:

 
/*CSS*/
 
@font-face{
	font-family: 'laFonte';
	src: url('../laFonte.ttf');
}  
 
/*Après avoir annoncé la règle @font-face, il ne
s'agit que d'attribuer la nouvelle famille aux balises souhaitées*/
 
p {
	font-family: "laFonte",Verdana, Geneva, sans-serif;
}
 
/*fin*/
 

Si le fureteur ne supporte pas @font-face ou s'il y a un problème avec la source, la fonte suivante dans le "CSS font stack" jouera son rôle.

Cependant, deux problèmes majeur se dresse devant les utilisateur potentiel de cette façon de faire.

Premièrement, pour la plupart des fonderies rendre une de leur fonte disponible sur un serveur web constitue une violation des droits d'utilisation de celle-ci.

Deuxièmement. Le support est encore très peu convaincant. Safari 3.1 est le seul qui supporte cette propriété. Opera 10 et Firefox 3.5 devrait l'implanter, tandis qu'IE la supporte seulement si la fonte liée est une "Embedded OpenType".
Une .EOT est créée grâce au logiciel WEFT de Microsoft (ou ttf2eot pour Linux). La transformation d'une fonte dans ce format compressé ne se fait malheureusement pas toujours sans heurts. Certaines glyphes peuvent être altérées, et certaines fontes ne survivent tout simplement pas à l'opération de compression du logiciel de Microsoft. Ce qui rend cette avenue fort hasardeuse.

EN ATTENDANT
D'ici à ce que @font-face soit réellement implanté dans notre univers multi-fureteur, nous avons qu'en même à notre disposition des outils pour combler cet étonnant vide technologique... Voici deux solutions ayant fait leur preuve. SiFr est dans le décor depuis belle lurette et Cufòn est un nouveau venu fort prometteur...

sIFR (Scalable Inman Flash Replacement)
L'idée de base est simple. Intégrer la fonte souhaitée dans un SWF ayant un champ texte dynamique à l'intérieur. Puis, grâce au javascript, localiser les textes à remplacer, les mesurer et les "lire". Ensuite, créer des objets Flash de même taille, contenant le même texte et les placer à la même position que le texte remplacé.

L'implantation est relativement facile: Il faut créer un SWF, importer un fichier javascript et écrire une ligne de code javascript pour chaque type de balise/class/id que l'on veut remplacer qui pourrait bien ressembler à ceci:

sIFR.replaceElement("h1", named({sFlashSrc: "./vandenkeere.swf", sColor: "#000"}));

Cependant, il est nécéssaire de faire un peu de lecture afin de comprendre l'interaction entre le javascript, le SWF et le CSS.

Les avantages sont nombreux :

• Textes sélectionnables et disponibles pour les engins de recherche.
• Fontes nettes et précise.
• Textes sujets aux CSS et à certains effets Flash (dropshadow, anti-aliasing, etc...).
• Reconnaissance et soulignement automatique des liens.
• Plusieurs "add-ons" dont un pour JQuery.
• Totalement légal du point de vue des fonderies.

Il y a qu'en même quelques désavantages :

• Requiert le Javascript activé ainsi que FlashPlayer 6+ pour fonctionner.
• Étant un outils très malléable - le "font-tuning" surtout - SiFR peut devenir très complexe et source de frustration dans des projets complexes où se côtoient divers "frameworks" Javascript et/ou des feuilles de style tentaculaire.

D'ailleurs, les concepteurs suggèrent d'utiliser sIFR avec parcimonie. Si vous confinez l'outil à des endroit rare et bien choisie, l'intégration ne sera que plus aisée.

Cufòn
L'avenir est rose et simple pour cet héritier de Typeface. Grâce à un générateur disponible gratuitement, on peut convertir une fontes en fichier .js qui nous permettra de reproduire en SVG les glyphes souhaitées.

Tout aussi simple d'implantation que sIFR, voir même plus, Cufòn requiert peu de chose. On créer le fichier de fonte dans le générateur en 2-3 cliques, on importe le fichier de fonte ainsi que le fichier Javascript Cufòn dans le "header" de la page. Puis, on remplace le contenu des balise désiré en appelant une méthode portant le nom judicieux de... replace() !

 
<script type="text/javascript"src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/funky.font.js"></script>
<script type="text/javascript"> Cufon.replace('h1'); </script>
 

Les avantages :

• Seul le Javascript est nécéssaire
• Coté CSS, les images créées sont identiques aux glyphes remplacées.
• Supporté par la quasi-totalité des fureteurs: FireFox 1.5+, Safari 3+, Opera 9.5+, Chrome et IE 6/7/8, ce dernier requiert une ligne Javascript de plus en fin de page pour palier à sa lenteur d'affichage, mais rien de majeur.
• Communauté florissante et motivé à amélioré le concept.

Malheureusement, Cufòn est encore loin d'être parfait :

• Sélection du texte impossible.. une image reste une image.
• Problème avec quelques vieilles fontes PostScript Mac.
• Fidélité de transitions entre glyphes et images SVG pas toujours parfaite, mais toujours correct.
• Encore quelques zones grises du point de vue légal. Mais les discussions vont bon train semble-t-il.
• Problème avec certains sélecteurs CSS spécialisés.

Cufòn n'offre rien de plus qu'un simple remplacement d'image du point de vue de l'accessibilité, cependant, si les changement de titre sont fréquents, ce dernier reste une alternative à ne pas négliger...

En terminant, si les titres en fontes particulières sont votre pain quotidien, prendre quelques heures pour maitriser sIFR parait être un excellent investissement qui ne ferait qu'améliorer le référencement de vos créations.

Sinon, Cufòn reste une alternative simple qui reste qu'en même plus aisée que d'avoir à changer les images de vos titres dans Photoshop à chaque changement de virgule!

Lien vers sIFR.
Lien vers Cufòn.

Vous verrez, l'essayer c'est l'adopter!

DÉMO
TÉLÉCHARGER

SWFAddress d'Asual

SWFAddress est une combinaison de techniques permettant, à travers des classes Javascript et Actionscript, le deep-linking (la possibilité d’accéder à des sections ou des pages directement à partir de la barre d’adresse du fureteur) dans des sites programmés en Flash. Cette technique, en plus de permettre l’utilisation de signets et des boutons Suivant et Précédent du fureteur, est une des meilleures solutions afin d’optimiser son site pour les moteurs de recherche.

Afin d’utiliser SWFAddress, il suffit d’intégrer l’outil dans le HTML de la façon suivante :

<script type="text/javascript" src="library/swfobject.js"></script>
<script type="text/javascript" src="library/swfaddress.js"></script>
<script type="text/javascript">
	var flashvars = {};
	var params = {};
	var attributes = {id:"flashMovie"};
	swfobject.embedSWF("navigationExample.swf", "alternateContent", "100%", "100%", "9.0.124", false, flashvars, params, attributes);
</script>
 

UTILISATION DE SWFADDRESS

L’intégration dans Flash s’effectue ensuite comme suit :

private function init() :void{
	SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange, false, 0, true);
 
	//Exemple de changement de page, mais une page ‘’/’’ est reçue par défaut au départ de l’application
	SWFAddress.setValue(‘’page1’’);
}
 
private function handleChange(evt:SWFAddressEvent):void{
	var laSection:String = evt.value; 
 
	//La seule information obtenue est un string, une condition doit donc être programmée
	switch(laSection){
		case ‘’X’’ :
			//opération afin de changer de section
			//Changer le titre de la page (défini manuellement)
			//Vérifier si c’est la section demandée n’existe pas, etc…
	}
}
 

SWFAddress présente aussi plusieurs outils pour, par exemple :

• Ouvrir des liens externes
• Reculer dans l’historique
• Monter de niveau hiérarchique (section1/section1-1 vers section1/)
• Changer le titre de la page (dans quel cas SWFAddress doit être déclaré sous la balise dans le html.

Note : SWFAddress, quand il est utilisé adéquatement, remplace et surclasse le moteur d’indexation des fichiers swf des moteurs de recherche populaires tels que Google, c’est pourquoi il est important d’inclure un fichier robots.txt afin d’empêcher ceux-ci d’indexer automatiquement les fichiers gérés par SWFAddress ou le NavigationManager.
Exemple de fichier robots.txt :

Sitemap: http://www.asual.com/sitemap.xml
User-agent: *
Disallow: /*.swf*
 

 
 
NAVIGATIONMANGER

Le mandat de SWFAddress est de permettre le deep-linking et cet objectif est atteint. Toutefois, des mécanismes personnalisés doivent être mis en place afin d’en régir le fonctionnement ainsi que les cas d’exception. Que faites-vous si vous voulez que la description des sections soit chargée à l’externe, passer à la section suivante, assigner des descriptions aux sections, obtenir les infos de son parent ou encore que vous désirez savoir à quel niveau hiérarchique se trouve la section courante? Vous devrez programmer vos propres mécanismes ou utiliser le NavigationManager.

Propriétés et méthodes publiques

Structure du NavigationManager de QuatreCentQuatre

 
<script type="text/javascript" src="library/swfobject.js"></script>
<script type="text/javascript" src="library/swfaddress.js"></script>
<script type="text/javascript">
	var flashvars = {};
	var params = {};
	var attributes = {id:"flashMovie"};
	swfobject.embedSWF("navigationExample.swf", "alternateContent", "100%", "100%", "9.0.124", false, flashvars, params, attributes);
</script>
 

Le NavigationManager fonctionne selon un schéma XML qui peut être défini manuellement ou chargé à l’externe, voici un exemple de la structure du XML requis.

 
<response>
	<header>
	</header>
	<body>
<page>
			<item type="default">
				<description>Section 1</description>
				<tag>section1</tag>
				<ressource>sectionclasses.Section1</ressource>
				<subitems>
					<item type="normal">
						<description>Ceci est la section 1.1</description>
						<tag>section1-1</tag>
						<ressource>sectionclasses.Section1_1</ressource>
					</item>
					<item type="normal">
						<description>Ceci est la section 1.2</description>
						<tag>section1-2</tag>
						<ressource>sectionclasses.Section1_2</ressource>
					</item>
				</subitems>
			</item>
			< item type="notfound">
				<description>Section  not found</description>
				<tag>sectionnotfound</tag>
				<ressource>sectionclasses.Section1</ressource>
			</ item>
		</page>
	</body>
</response>
 

Les informations d’une section doivent se retrouver à l’intérieur d’une balise <item> et doivent se situer à l’intérieur du node <page> qui sert de conteneur aux informations de la navigation.

Les informations à retrouver sont les suivantes :

• L’attribut type qui peut valoir normal au default. Une valeur default indique que cette section est celle qui sera chargée par défaut lors de l’initialisation du système (au lieu de « / »)
• La balise tag, qui sera utilisée comme identifiant dans la barre d’addresse et pour google analytics.
• La balise description, qui est une valeur qui peut servir, par exemple, à nommer le bouton qui mènera à la section ou encore au titre de la page si la propriété useDescriptionAsTitle a une valeur de true.
• La balise ressource, que vous pourrez utiliser afin de spécifier à quelle ressource (classe, fichier swf ou lien externe) la section est liée.
• Une balise subitems optionnelle qui contiendra des nodes items qui seront considérés les enfants de l’item courant.

Notez qu’un deuxième node de structure similaire mais d’un type notfound peut être placé à la racine de l’arbre afin de régir la section utilisée lorsqu’une page reçue n’est pas définie dans le XML. Si ce node facultatif n’est pas défini, la page par défaut sera utilisée.

UTILISATION DU NAVIGATION MANAGER

L’intégration dans Flash est simple :

 
private function init() :void{
	NavigationManager.instance.addEventListener(NavigationManagerEvent.SECTION_CHANGED, handleSectionChanged, false, 0, true);
	NavigationManager.instance.addEventListener(NavigationManagerEvent.MENU_XML_LOAD_COMPLETE,
		handleMenuLoadComplete, false, 0, true);
	NavigationManager.instance.loadMenuXML(new URLRequest(‘’menu.xml’’));
}
 
private function handleSectionChanged (evt: NavigationManagerEvent):void{
	//Référence vers la section courante
	var laSection:SectionData = evt.section;
	//ou
	var laSection2:SectionData =NavigationManager.instance.getCurrentSection();
	//On pourrait créer une section à partir de la ressource :
	var sectionClass:Class = getDefinitionByName(e.section.ressource) as Class;
	var currentSection <img src='http://blog.quatrecentquatre.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> isplayObject = new sectionClass() as SectionObject
	addChild(currentSection);
} 
 
private function handleMenuLoadComplete (evt: NavigationManagerEvent):void{
	//Effectue les operations afin de créer le menu
	var iterator:ISubSectionIterator = NavigationManager.instance.sectionsList;
	var length:int = iterator.numSubSections;
	for (var i:int = 0; i < length; i++) {
		var laSection:SectionData = iterator.getSubSectionAt(i);
	}
}
 

Comme on peut le constater, il peut être pratique d’écouter sur l’événement MENU_XML_LOAD_COMPLETE afin de savoir si le XML est chargé alors que l’événement SECTION_CHANGED est utile afin de savoir quand une section a changé. Notez que l’événement SECTION_CHANGED ne sera jamais diffusé avant que la fin du chargement du XML externe ou avant l’assignation manuelle du XML à travers la fonction NavigationManager.instance. sectionsList. setMenuStructure().


PRATIQUES À ADOPTER

• Dans les items associée à une section (un bouton de menu par exemple) implémentez une propriété qui entreposera une référence vers le SectionData de la section qu’ils représentent afin de faciliter l’utilisation du système. En plus, l’espace mémoire requis sera plus petit qu’une valeur textuelle de son chemin enregistrée dans un String.
• Si vous avez plus d’un menu pour la navigation, vous pouvez les englober dans des nodes à la racine du groupe qui serviront ni plus ni moins de conteneurs aux sous-sections qu’ils contiendront. Pour y accéder individuellement lors de la création dynamique des menus, vous pouvez utiliser la fonction NavigationManager.instance.sectionsList.getSectionByTag(‘’conteneur X’’) à partir duquel vous pourrez accéder à ses enfants. De plus, la structure dans Google Analytics n’en sera que plus claire étant donné que la section sera identifée comme suit : conteneurX/sectionY

 
 
BIBLIOGRAPHIE
SWFAddress Bad Practices
http://www.asual.com/blog/swfaddress/2007/05/18/swfaddress-bad-practices.html
SWFAddress and robots.txt
http://www.asual.com/blog/swfaddress/2008/11/25/swfaddress-and-robots-txt.html

Télécharger la version 1.0 du NavigationManager:
LIEN

Lors du développement d’un site Flash à fichiers multiples, une problématique apparait très rapidement dans le processus de développement : La réutilisation des même éléments (graphiques, classes, composants) dans plusieurs des fichiers du site. Le problème vient entre autre du fait que chaque fichier  SWF a une librairie de graphique, composant, et classes unique. De ce fait, si on veut utiliser le même graphique dans deux fichiers SWF, ont doit donc recopier les mêmes éléments qu’on désire réutilisable dans toutes les librairies nécessaires. Cela implique une redondance des éléments et donc une multiplication du poids des fichiers.

Avant  l’arrivé de Flash CS4 et de l’ActionScript 3, il n’y avait pas beaucoup de solution pour contourner le problème. Ont pouvait utiliser un fichier exclude.xml au même endroit que notre fichier FLA pour définir les classes qui ne devait pas être compilé  dans le fichier SWF. Ainsi on pouvait exclure les classes qui étaient dupliqué à travers plusieurs fichiers SWF de l’application. Le problème était qu’on devait quand même recopier les éléments graphiques dans chacun des ces fichiers FLA pour ne pas avoir des erreurs de compilation sur des éléments inexistant dans la librairie.

Depuis la sortie de la suite CS4, il est maintenant possible d’intégrer des librairies externes pour la compilation directement à partir de l’IDE de Flash. Il est donc maintenant possible de créer une librairie d’élément (graphique, composant, classes) qu’on désirer partager à travers plusieurs fichiers mais qui ne seront pas compiler (injecter) dans le fichier final d’un SWF donné. L’arrivée des modules élimine donc la redondance de poids avec la réplication des éléments partagés dans plusieurs librairies des fichiers FLA.

Pour créer une application multi fichiers avec module, ont doit donc commencer par créer le module en tant que tel et ensuite ce module est charger en premier par le fichier principal (celui qui s’occupe du chargement des fichiers subséquents) et ensuite procède au chargement des sections ou sous-section de l’application. Dès que le module est chargé, les sections et sous-sections ont directement accès aux ressources de celui-ci. Le module doit cependant être chargé de façon à ce que « l’Application Domain » soit le même que le fichier principale pour que les ressources soient accessible.

Exemple de création

• On crée un fichier “module.fla” dans lequel on inclut tout les éléments (graphiques, composants, classes, etc...) à partager
• On exporte ce fichier en “module.swc”
• On compile ce fichier en ”module.swf”
• Pour tous les fichiers FLA qui doivent utiliser ces éléments, inclure le SWC dans les paramètres de publication sous l’onglet “External Library Path”
• Dans votre fichier principal, charger le fichier “module.swf” en premier lieu, et ensuite procéder au chargement des sections et sous-section selon le besoin

En mode développement, on peut bien tester les sections et sous-sections en chargeant directement le module dans ces fichiers avant toute exécution du code pour pouvoir bien tester les fonctionnalités. Lors de la mise en ligne, on retire tout simplement le chargement du module dans les sections et sous-sections. C'est présentement la meilleure solution pour le travail en multi fichiers.