Notre logo fait parution sur le home page du site http://logooftheday.com/ .

Encore merci Akufen pour cette belle création.

Dans notre dernier post nous vous avons démontré comment utiliser le NavigationManager. Voici un petit démo qui vous aidera à figurer les propriétés d'un SectionData retourné par le système.

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

DÉMO
TÉLÉCHARGER

Le NavigationManager de QuatreCentQuatre est une enveloppe ou un Proxy qui sert à titre d’interface à la classe SWFAddress de Asual afin de mieux contrôler son comportement et d’en étendre les fonctionnalités.

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

 
 
Étant donné que le NavigationManager est une enveloppe à SWFAddress, les classes de ce dernier seront requises et l’intégration Javascript s’effectuera de la même façon.
 
 

 
<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

Eh oui! À la suite d’un an de colocation dans les bureaux d’Akufen, QuatreCentQuatre à décidé de se trouver un nouveau chez soi.  Ce fut une année prospère et les deux entreprises comptent maintenant plusieurs nouveaux visages. Or, les pièces et corridors ayant atteint leur pleine capacité d’occupation, nous en étions presque à attendre l’été afin d’installer des bureaux sur la terrasse.

Vendredi prochain nous déménagerons au 3437 boul. St-Laurent, tout juste au dessus du nouveau restaurant « La commission des liqueurs ».  Un beau 2600 pieds carré afin de s’installer sans peur de manquer d’espace.

Nous aimerions sincèrement remercier Akufen pour l’espace qu’ils nous ont alloué durant cette première année d’activité, ce fut un sacré bon coup de pouce.  Leur énergie (débordante) nous manquera à coup sûr.

En espérant que vous serez présent lors de notre pendaison de crémaillère, ce sera le temps d’inaugurer le foyer et le jacuzzi.

Dans le créneau, quand une équipe de programmation se met à travailler de concert sur un projet, la gestion des fichiers et de leur version peut devenir un vrai casse-tête.  C'est pourquoi des outils tels que les cvs ainsi que les svn sont apparus sur le marché; ceux-ci permettent de gérer / consolider  les fichiers / versions de fichiers d'une équipe et tout celà sur un serveur en ligne (le but étant aussi d'avoir accès aux dits documents peu importe où l'on se trouve).  Nul besoin de dire que, du moins chez nous, on ne s'en passerait plus.

Maintenant et depuis quelques temps on sent monter un nouveau concurrent sous le nom de Git.  Initialement créé par Linus Torvalds pour le système d'exploitation Linux, les utilitaires pour l'utiliser sur la plateforme Windows sont encore limités (c'est ce qui nous avait désintéressé quand Julien nous avais parlé du produit) ou en version pré-beta, mais il est certain que des solutions plus stables sont au coin de la rue.  Pour nous c'est la rapidité du système qui nous intéresse et c'est pourquoi nous avons entrepris les recherches d'un hébergeur supportant celui-ci.  Il faut dire que notre fournisseur actuel éprouvait souvent des problèmes de connection, des ralentissement et que, étrangement, nous étions rendu à un point où ajouter un utilisateur nous coutait le double du prix total actuel... ouan.

Tout ceci est derrière nous depuis que nous avons transféré nos données (tout en procédant à des copies de sauvegarde, juste pour être certain) sur les serveurs de http://repositoryhosting.com/.  En fait ce ne sont pas vraiment leur serveurs mais plutôt les datacenters EC2 de Amazon desquels la rubustesse semble maintenant excellente.  Le service propose un seul plan: 6$/mois pour un nombre illimité de repositories avec gestion de projet Trac, un nombre illimité d'utilisateurs, 2go d'espace et le choix d'utiliser Git ou bien Svn selon le projet.  En plus, il n'en coûte qu'un dollar par giga octet supplémentaire.  Amen!

Est-ce moi ou, peu importe les moyens que l’on cherche pour se changer les idées ces temps-ci, on ne peut s’empêcher d’entendre parler de la crise économique diffusée par nos charmants voisins d’en dessous. Je reste encore étonné quand ma coiffeuse, la préposée chez Archambault ou même le vendeur chez Fido décide, au lieu d’établir la conversation avec une remarque sur la température, de me fournir un update sur le taux de change ou bien sur la valeur de la dette nationale américaine. Même au cinéma, dans le nouveau film de James Bond, on passe des craques sur la valeur du dollar américain en spécifiant, lors d’un échange d’argent, qu’il est effectué en euros plutôt qu’en USD « qui n’a plus la valeur qu’il avait avant» (dit à peu près dans ces mots, l’homme devant moi siphonnait le fond de son gallon de Coke alors j’entendais plus ou moins). Bref, on en vient qu’à se demander si l’instabilité économique qui nous menace est la nouvelle sensation forte ou même pire, le nouveau « y fait beau dehors »!

Il est certain qu’on s’inquiète tous un peu en s’interrogeant à quel niveau la dépression nous affectera et, en tant que nouveaux entrepreneurs en développement web, on se demande à quel point notre entreprise sera touchée par la situation qui, dit-on, sera modérément similaire ici. Une bonne partie de notre clientèle étant des agences de publicité montréalaises, on peut croire que leur sort sera en partie garant du notre et c’est pourquoi des communiqués comme celui-ci qui énumèrent des recherches stipulant une baisse des dépenses publicitaires en général, mais surtout dans les réseaux n’ayant pas une portée nationale ne peuvent, à première vue, que faire sonner un signal d’alarme. Si on calcule qu’environ 85% des campagnes publicitaires sur lesquelles nous travaillons sont ciblées pour le Québec, c’est le début de la fin… Bon, nous somme au Canada, la situation économique est et sera moins désastreuse qu’aux États-Unis nous assure-t-on. De plus, le Québec est un marché plus ciblé que dans le reste du pays, ça crée ainsi une espèce de « microclimat » national j’imagine? Toutefois, la plus grosse différence est que, à l’instar des prédictions de ces recherches qui visent les médias traditionnels, nous avons la chance d’être des spécialistes du web, c’est même pourquoi j’écris cet article avec le sourire plutôt que des plis plein le front.

Rappelons-nous, il n’y a pas si longtemps que les campagnes web ont droit, parfois, à une déclinaison réellement adaptée à ce médium et pas simplement une vulgaire version « low-rez » de la pub télé en version gif animée 16 couleurs, 15x15px, 20ko maximum. Depuis plus de deux ans, les dépenses en publicité sur internet augmentent d’au moins 15% par année et, avant la crise économique, PriceWaterHouseCoopers prédisait que, au Canada plus qu’ailleurs, cette proportion augmenterait pour atteindre et surpasser 20% d’expansion par année. Bien sûr aujourd’hui les chiffres sont plus conservateurs et dans ce communiqué de l’IAB du Canada, on parle plutôt d’un taux de croissance aux environs de 15%. Je ne sais pas pour vous, mais 15% sur un budget estimé à 1.5 milliard pour 2008, je trouve que ça fait quand même beaucoup de sous… En somme, on nous assure que les grandes entreprises gardent confiance et comprennent maintenant mieux certains des avantages des campagnes en ligne tels que la possibilité d’obtenir des chiffres sur l’efficacité de leurs campagnes quasi instantanément ou même de les géo-socio cibler avec une précision jusqu’à aujourd’hui inégalée. Ce sont ces outils, aidés de l’arrivée en trombe de produits numériques sur mobile et autres supports non conventionnels qui me convainquent que, malgré tout ce que pourra me dire ma coiffeuse, je sent que nous sommes au bon endroit au bon moment!

Après lecture du blog d’Espresso Interactif nous nous sommes rendu compte que depuis déjà 10 jours nous aurions pu nous laisser pousser la moustache pour une bonne raison : le cancer de la prostate.  Pas que cela devrais nous concerner immédiatement, mais qui sais, nous devrions penser à notre prostate autant qu’à nos REER.

C’est pour cela que nous vous proposons de tous porter la moustache pour le mois de novembre.

Quelques bonnes raisons :

• Pour notre prostate.
• Nous supportons le cancer du sein à chaque année, pourquoi pas un cancer qui nous concernes.
• Nous serions tous élégant avec une belle moustache.