LES FONTES
Depuis des siècles, les designers web tentent tant bien que mal d'exprimer leur créativité malgré la dictature impitoyable des familles Arial, Verdana et autres Tahoma. Mais à l'horizon pointe une lueur d'espoir. Le moment où les designers pourront enfin utilisé la fonte de leurs choix approche, sans le moindre égard aux limitations qui pullulent du côté client et, ainsi, éviter les soupirs de leurs collègues intégrateurs.

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.

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

Vers la fin des années 90, les système de gestion de contenu ont débuté leur ascension vers la popularité pour tous les sites de petite et moyenne envergure. Les boîtes de production interactive voulaient vendre des sites clef en main. Pour que le client puisse ainsi gérer entièrement sont site comme bon lui semble. Nous avons donc vu au cours des 15 dernières années, dans le cadre de notre travail, des système de gestion de contenu mal fait qui rendait le travail de mise à jours des sites ardu et pénible, et d'autre qui au contraire répondait très bien aux besoins mais qui avec la progression des technologies (intégration Web valide, sémantique, dynamisation avec JavaScript, réseaux sociaux) sont maintenant désuets. Nous avons ensuite vu l'émergence des système de gestion de contenu "libre de droit" (Typo3, Drupal, DotNetNuke, etc.) en grand nombre pour le  bonheur des clients moins fortunés. Une solution viable, solide, et robuste (tout dépendant du gestionnaire choisi) à la porté de tous ou presque.

Qu'en est-il maintenant des système de gestion de contenu ? En tant que client ou personne ayant besoin des fonctions d'un système de gestion de contenu, comment choisir la meilleure option pour nos besoin ? Est-ce que le client a réellement besoin d'un système de gestion de contenu ? Est-ce vraiment la meilleur solution pour mon site / application ? La réponse devrait être simple mais malheureusement elle ne l'est pas. Il n'existe aucune réponse parfaite qui saura répondre à tout les besoins que ce soit d'un système de gestion de contenu hyper simple au plus complexe. Pour faire un choix éclairé et qui correspond vraiment à nos besoins, je crois qu'il est important de décrire exactement les options qui s'offrent à un client pour les choix de développement d'un site ou d'une application avec système de gestion de contenu.

Il n'existe malheureusement aucune réponse généralisée qui permet de choisir une solution spécifique qui répondra à tous les cas de figures. À chaque projet sa solution. La meilleure option pour un projet donnée n'est pas nécessairement souhaitable pour un autre projet.

Développement sur mesure
Il est parfois souhaitable dans certain cas de figure, d'y aller d'une solution complètement sur mesure. On prend bien note des besoins de gestion de contenu du client et on implémente un système de gestion de contenu qui réponds exactement à ces besoins. Cette solution est optimale dans le cas de projet spécial qui nécessite une grande liberté au niveau de la logique de site ou d'application ainsi qu'au niveau graphique. L'utilisation plus ou moins intensive de "Flash" dans un site ou une application implique souvent le développement sur mesure d'un système de gestion de contenu car les système existant (pas tous mais la majorité) ont de la difficulté à bien gérer le "Flash".

Avantage

• Grande liberté au niveau de la conception de l'application et du graphisme.
• Permet d'intégrer des fonctionnalités plus complexes sans contourner un système limitatif.
• Meilleure gestion de l'intégration des fonctionnalités des réseaux sociaux (Twitter, Facebook, etc.)
• Le système peut être mieux prévu pour une future expansion des fonctionnalités.
• Permet d'optimiser les performances du site ou de l'application de façon spécifique.
• Gestion optimale de la sécurité de l'application (selon le niveau requis)

Inconvénient

• Temps et coûts de développement majoritairement plus élevés.
• Système fermé et donc connu seulement du développeur ou de l'entreprise réalisant le projet (peut devenir problématique si les personnes responsables ne sont plus disponibles pour l'expansion du système).
• On réinvente la roue pour la majorité des fonctionnalités déjà écrite et utilisé par des milliers d'utilisateurs.

Développement sur mesure avec "framework"
On utilise exactement la même démarche mentionné dans le développement sur mesure mais cette fois-ci au lieu d'effectuer le développement avec ses propres librairies, on utilise des "framework" préférablement "libre de droit" (Code Igniter, CakePHP, Django, Rails) comme base au développement du système de gestion de contenu. Ainsi, selon le "framework" utilisé on ne s'oblige pas a réinventer la roue pour développer les opérations de base d'un site ou d'une application Web.

Avantage

• Grande liberté au niveau de la conception de l'application et du graphisme.
• Permet d'intégrer des fonctionnalités plus complexes sans contourner un système limitatif.
• Meilleure gestion de l'intégration des fonctionnalités des réseaux sociaux (Twitter, Facebook, etc.)
• Tirer profit d'une base d'usager ayant développé des fonctions similaires avec le même "framework".
• Permet au client de passer le flambeau du développement à d'autre développeur ou entreprise qui maîtrise ce "framework".
• Permet d'optimiser les performances du site ou de l'application de façon spécifique avec les outils du "framework".
• Gestion optimale de la sécurité de l'application (selon le niveau requis)

Inconvénient

• Temps et coûts de développement majoritairement plus élevés.
• Système semi-fermé qui contient une bonne partie de développement effectué par le développeur ou l'entreprise qui  a produit le site ou l'application.
• On réinvente la roue pour une partie des fonctionnalités déjà écrite et utilisé par des milliers d'utilisateurs.

Système de gestion de contenu propriétaire
Développer par des entreprises ou des développeurs (Expression Engine, K3 Soft) qui veulent généraliser les opérations courantes d'un système de gestion de contenu et ensuite revendre leur solution pour tirer profit de leur temps de développement et ainsi offrir des solutions clé en mains. Ces solutions répondent aux besoins typiques généralisés pour la pluspart des applications ou site : gestion des pages, gestion du contenu textuel, gestion des menus, gestions des éléments médias, gestions du style graphique des pages, forum, envoie de courriel de masse, wiki, blog, etc... Les prix vont souvent varier selon l'entreprise et les fonctions requisent.

Avantage

• Prêt à utiliser directement après l'installation / configuration.
• Facilite les opérations de gestion de contenu typique.
• Support de l'entreprise pour l'utilisation et les problèmes avec le produit.
• Temps de développement et coût réduit, seulement l'intégration du graphisme est à faire.

Inconvénient

• Selon les systèmes de gestion de contenu, il y a limitation au niveau graphique pour respecter les guides du système.
• Selon le système, difficile voir impossible d'implémenter des fonctionnalités qui sortent des généralités implémenter par celui-ci. (lorsque c'est possible, devient souvent plus long à implémenter que pour une solution sur mesure).
• Compte tenu du nombre de personnes qui supporte le développement du système, tendance à être désuet après 1 ou 2 années.
• Difficile d'optimiser les performances de l'application ou du site si le site ou l'application éprouve des problèmes de performances.
• Outre l'entreprise ou le développeur vendeur du système, personne ne connait le système en place. (peut devenir problématique si les personnes responsables ne sont plus disponibles pour l'expansion du système).
• Gestion souvent inexistante des fonctionnalités des réseaux sociaux (Twitter, Facebook, etc.).

Système de gestion de contenu "libre de droits"
Ces systèmes utilisent exactement la même approche qu'au point précédant mais cette fois-ci le développement est effectué par la communauté. Ont applique encore une fois une généralisation des fonctionnalités requisent par un système de gestion de contenu . Les systèmes sont donc développer par des milliers de développeur qui tente au fil du temps de développer le meilleur système possible.

Avantage

• Prêt à utiliser directement après l'installation / configuration.
• Facilite les opérations de gestion de contenu typique.
• Tirer profit d'une base d'usager utilisant déjà ce système, une communauté active autour du produit.
• Permet au client de passer le flambeau du développement à d'autre développeur ou entreprise qui maîtrise ce système de gestion de contenu.
• Temps de développement et coût réduit, seulement l'intégration du graphisme est à faire.
• Tirer profit des extensions du système développé par la communauté pour des fonctionnalités qui sortent du cadre générique du système de gestion de contenu.
• Système testé par des milliers d'utilisateurs ce qui donne majoritairement un produit robuste et stable.

Inconvénient

• Selon les systèmes de gestion de contenu, il y a limitation au niveau graphique pour respecter les guides du système.
• Selon le système, il est légèrement plus long d'implémenter des fonctionnalités qui sortent des généralités implémenté par celui-ci. (lorsque cette fonctionnalité n'est pas disponible dans la communauté).
• Difficile d'optimiser les performances de l'application ou du site si le site ou l'application éprouve des problèmes de performances.
• Gestion souvent inexistante des fonctionnalités des réseaux sociaux (Twitter, Facebook, etc.). Il y a cependant amélioration de ce côté.

Chacune des solutions comporte ses avantages et ses inconvénients. Il est donc important d'évaluer la meilleure solution en tenant compte premièrement du budget pour le site ou l'application, et ensuite déterminer exactement les fonctionnalités requises. Ensuite, une personne qualifiée pourra vous diriger dans la bonne voie pour tirer maximum à court et long terme de votre solution. Il n'existe pas de solution parfaite, seulement des solutions adaptées.