<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>bertrandkeller &#187; interface</title>
	<atom:link href="http://www.bertrandkeller.info/tag/interface/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bertrandkeller.info</link>
	<description>Veille sur les systèmes de gestion de contenu</description>
	<lastBuildDate>Tue, 07 Feb 2012 08:06:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>La séparation structure/présentation/comportement est morte</title>
		<link>http://www.bertrandkeller.info/2012/01/30/2972-la-separation-structurepresentationcomportement-est-morte/</link>
		<comments>http://www.bertrandkeller.info/2012/01/30/2972-la-separation-structurepresentationcomportement-est-morte/#comments</comments>
		<pubDate>Mon, 30 Jan 2012 11:59:19 +0000</pubDate>
		<dc:creator>bertrand keller</dc:creator>
				<category><![CDATA[CSS + HTML]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.bertrandkeller.info/?p=2972</guid>
		<description><![CDATA[Titre provocateur, certes, mais il ne s&#8217;agit que de la traduction d&#8217;un article de Kevin Dees, progaming jedi de son état. Pour lui, le concept de couches indépendantes (HTML/CSS/JS) est désormais morte avec l&#8217;apparition de possibilité d&#8217;animation en CSS3 ou encore d&#8217;éléments de typage en HTML. L&#8217;apparition du concept de séparation Durant la première guerre [...]]]></description>
			<content:encoded><![CDATA[<p>Titre provocateur, certes, mais il ne s&#8217;agit que de la traduction d&#8217;un article de Kevin Dees, progaming jedi de son état. Pour lui, le concept de couches indépendantes (HTML/CSS/JS) est désormais morte avec l&#8217;apparition de possibilité d&#8217;animation en CSS3 ou encore d&#8217;éléments de typage en HTML.</p>
<h3>L&#8217;apparition du concept de séparation</h3>
<div class="center"><img src="http://i.imgur.com/8i6MJ.jpg" alt="image" /></div>
<p>Durant la première guerre des navigateurs (dans les 90&#8242;s), face aux problèmes d&#8217;interopérabilités et d&#8217;homogénéités du code des sites web, le W3C s&#8217;est mobilisé afin de définir des standards. Pour gagner la bataille, il a défendu les technologies comme CSS et xHTML qui concernent pour l&#8217;une la présentation et pour l&#8217;autre la structure. c&#8217;est actuellement de cette manière qu&#8217;on code les sites.</p>
<p>Dans les années 2000, cette idée de &laquo;&nbsp;séparation&nbsp;&raquo; s&#8217;est affirmée dans la rédaction de la spécification xHTML 2. L&#8217;idée était de défendre une pureté fonctionnelle entre la structure (HTML), la présentation (CSS) et le comportement (JS). Sauf que&#8230;</p>
<h3>Les couches ne sont pas vraiment séparées</h3>
<p>Quand, on rédige une feuille CSS, on dispose de comportement comme :hover (changement de propriété au survol de la souris) ou encore :before &#38; :after (ajout d&#8217;un élément dans le document avant ou après une zone de contenu).</p>
<p>Il s&#8217;agit donc d&#8217;1 élément de comportement &#38; de 2 éléments de structure présents dans la CSS =&gt; <strong>la séparation n&#8217;est pas stricte</strong>.</p>
<p>Comment cela ce fait-il que les couches ne soient pas séparées ? Tout simplement parce que les constructeurs de navigateurs l&#8217;ont décidé, ce n&#8217;est pas (plus) un objectif. Ils pensent que cela n&#8217;a pas lieu d&#8217;être. Et les spécifications le prouvent ; xHTML 2 est morte.</p>
<h3>La divergence</h3>
<p>Prenons l&#8217;exemple d&#8217;un lien avec un effet visuel lors du survol de la souris. Vous avez le choix entre passer par la CSS pour un effet :hover et/ou utiliser une petite pincée de JavaScript pour la gestion d&#8217;un comportement plus complexe.</p>
<p>Avec un changement de couleur géré en CSS et un effet (une opacité par exemple) en JavaScript, le comportement du lien est spécifié dans deux couches différentes : c&#8217;est ce qu&#8217;on appelle la &laquo;&nbsp;divergence&nbsp;&raquo;. Ce lieu de gestion subtile de l&#8217;effet de survol par deux couches différentes.</p>
<div class="center"><img src="http://i.imgur.com/bk3Me.jpg" alt="image" /></div>
<p>Avec la logique de &laquo;&nbsp;séparation&nbsp;&raquo;, on est dans le noir&#38;blanc ; avec la logique de &laquo;&nbsp;divergence&nbsp;&raquo;, il y a du noir&#38;blanc mais aussi un peu de gris.</p>
<p>L&#8217;intégration n&#8217;est pas la collage grossier de différentes couches mais plutôt l&#8217;emboîtement subtile de plusieurs technologies (ce qui définit, à mon avis, le principe de l&#8217;artisanat).</p>
<h3>Conclusion</h3>
<p>L&#8217;idée de &laquo;&nbsp;séparation&nbsp;&raquo; a été indispensable pour la défense des standards du web. Cette idée a permis de passer outre les soupes de tags (HTML), les CSS ou JavaScript en lignes. Cependant, l&#8217;expérience montre qu&#8217;il existe des zones de chevauchements entre ces couches ; qu&#8217;on peut nommer &laquo;&nbsp;Divergence&nbsp;&raquo;.</p>
<p>Si on doit encore défendre les standards avec fougue, il est réaliste d&#8217;accepter ce concept de &laquo;&nbsp;divergence&nbsp;&raquo;. Accepter la tournure prise par les technologies du web, c&#8217;est aussi comprendre pourquoi un intégrateur n&#8217;arrive à exprimer ses difficultés, pourquoi il faut avoir codé pour les comprendre&#8230;</p>
<p>Encore une fois le métier d&#8217;intégrateur n&#8217;est pas simple. Il faut de l&#8217;expérience et de la rigueur pour dompter la &laquo;&nbsp;divergence&nbsp;&raquo;. Après quelques années, il sera compétent pour faire de la conception d&#8217;interfaces à partir de ces principes. C&#8217;est pour cette raison qu&#8217;il doit <a href="http://www.bertrandkeller.info/2012/01/12/2919-pourquoi-lintegrateur-doit-devenir-concepteur/">devenir concepteur</a>.</p>
<p>Je vous laisse lire l&#8217;article en anglais, bien plus complet que celui-ci : <a href="http://thinkvitamin.com/design/the-separation-of-structure-presentation-and-behavior-is-dead/">The separation of structure, presentation and behavior is dead</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bertrandkeller.info/2012/01/30/2972-la-separation-structurepresentationcomportement-est-morte/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Une école pour artisan/intégrateur</title>
		<link>http://www.bertrandkeller.info/2012/01/27/2966-une-ecole-pour-artisan-integrateur/</link>
		<comments>http://www.bertrandkeller.info/2012/01/27/2966-une-ecole-pour-artisan-integrateur/#comments</comments>
		<pubDate>Fri, 27 Jan 2012 14:58:40 +0000</pubDate>
		<dc:creator>bertrand keller</dc:creator>
				<category><![CDATA[entreprise 2.0]]></category>
		<category><![CDATA[accessibilité]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[referencement]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.bertrandkeller.info/?p=2966</guid>
		<description><![CDATA[Suite à la rédaction de mes deux billets précédents sur le métier d&#8217;intégrateur web, ma pensée a évolué pour arriver à la conclusion que si les travailleurs du web devraient tous savoir intégrer et que notre métier d&#8217;intégrateur est dévalorisé ; il fallait certainement prendre le parti d&#8217;un organisme de formation. Une idée simple A [...]]]></description>
			<content:encoded><![CDATA[<p>Suite à la rédaction de mes deux billets précédents sur le métier d&#8217;intégrateur web, ma pensée a évolué pour arriver à la conclusion que si les travailleurs du web devraient tous savoir intégrer et que notre métier d&#8217;intégrateur est dévalorisé ; il fallait certainement prendre le parti d&#8217;un organisme de formation.</p>
<h3>Une idée simple</h3>
<p>A la maison de l&#8217;outil à Troyes, on peut y visiter une succession de vitrines présentant les outils relatifs à un métier. Dans mon cas, je me suis imaginé gimp à la place du marteau, textmate à la place de l&#8217;établi ou encore l&#8217;explorateur de fichier en guise de ceinture pour ranger les clous.</p>
<p>Et puis je suis tombé sur cette phrase :</p>
<blockquote cite="http://www.framablog.org/index.php/post/2012/01/19/nuit-code"><p>Travailler sur des systèmes abstraits de grande envergure nécessite d’avoir l’ensemble dudit système en tête. Quelqu’un a un jour comparé ce processus à la construction d’une maison faite en cristal précieux. Dès que quelqu’un vous distrait, l’édifice s’écroule et se brise en mille morceaux.</p>
</blockquote>
<p>J&#8217;ai regardé mon code, je me suis relevé et je me suis dit : &laquo;&nbsp;en fait, je suis quoi, un orfèvre ? un calligraphe ?&nbsp;&raquo;. Et pensant à un reportage sur les cathédrales diffusés il y a quelques semaines, l&#8217;idée m&#8217;est revenue qu&#8217;on pouvait effectivement nous cataloguer comme des artisans.</p>
<p>Ils étaient bien payés, respectés, valorisés.</p>
<p>On sait que l&#8217;artisanat était composé de corporations, de confréries ; la formation de apprentis passait par le compagnonnage ; on y respectait des maîtres (une autorité).</p>
<h3>Un centre de formation</h3>
<p>Pourquoi pas alors reproduire ce principe de maître/apprenti ? C&#8217;est une idée, bien entendu, il faudrait le faire à la sauce web et technologie numérique.</p>
<p>Sans y coller le côté pompeux de titres, grades, etc ; on pourrait imaginer, plutôt que d&#8217;attendre qu&#8217;un cursus professionnel se mette en place, établir un principe d&#8217;apprentissage à partir de niveaux de maîtrise.</p>
<p>Sur des périodes diverses, 2 jours, 3 jours, 2 semaines ; proposer des types de sites (des oeuvres) à réaliser sous l&#8217;assistance d&#8217;un maître (oui, qu&#8217;il faudra trouver des maîtres de la force). Contrairement au milieu d&#8217;apprentissage habituel d&#8217;agence dans lequel on joue avec le temps ; l&#8217;accent serait cette fois mis sur l&#8217;excellence, c&#8217;est-à-dire la mise en pratique de notions comme l&#8217;accessibilité, le référencement, la maintenabilité, l&#8217;interopérabilité&#8230;</p>
<p>Ce serait un moyen de réfléchir aux méthodologies de travail idéales pour la fabrique de sites web. Cela permettrait de sensibiliser certains, de perfectionner d&#8217;autres ou encore de se lancer dans des projets de recherche&#8230; tout est permis.</p>
<p>Je vous propose l&#8217;idée pour ceux que ça intéresse. Je réfléchis très sérieusement à me lancer dans la formation et à animer ce genre de lieu. Je me dis que plutôt que d&#8217;avoir une équipe de développeurs qui développent, avec un telle considération, on pourrait plutôt avoir des équipes dans lesquelles les intervenants seraient réellement mis en valeur pour leurs compétences.</p>
<p>A suivre&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bertrandkeller.info/2012/01/27/2966-une-ecole-pour-artisan-integrateur/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Pourquoi l&#8217;intégrateur doit devenir concepteur ?</title>
		<link>http://www.bertrandkeller.info/2012/01/12/2919-pourquoi-lintegrateur-doit-devenir-concepteur/</link>
		<comments>http://www.bertrandkeller.info/2012/01/12/2919-pourquoi-lintegrateur-doit-devenir-concepteur/#comments</comments>
		<pubDate>Thu, 12 Jan 2012 10:18:38 +0000</pubDate>
		<dc:creator>bertrand keller</dc:creator>
				<category><![CDATA[entreprise 2.0]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[management]]></category>

		<guid isPermaLink="false">http://www.bertrandkeller.info/?p=2919</guid>
		<description><![CDATA[Je vais m&#8217;intéresser au schéma classique de l&#8217;organisation que beaucoup connaisse mais qui ne constitue pas le seul et unique modèle. Je vais tenter de démontrer que le principe de séparation des métiers par pôle avec des chefs de projets (non technique) au milieu ne peut pas fonctionner (dans un cadre d&#8217;évolutions techniques permanentes). Le [...]<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2010/02/17/2163-introduction-a-la-gestion-de-projet-avec-eric-di-pol/' rel='bookmark' title='Introduction à la Gestion de Projet avec Eric Di Pol'>Introduction à la Gestion de Projet avec Eric Di Pol</a></li>
<li><a href='http://www.bertrandkeller.info/2008/03/20/138-pourquoi-le-microblogging-entreprise/' rel='bookmark' title='Pourquoi le micro blogging ?'>Pourquoi le micro blogging ?</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Je vais m&#8217;intéresser au schéma classique de l&#8217;organisation que beaucoup connaisse mais qui ne constitue pas le seul et unique modèle. Je vais tenter de démontrer que le principe de séparation des métiers par pôle avec des chefs de projets (non technique) au milieu ne peut pas fonctionner (dans un cadre d&#8217;évolutions techniques permanentes).</p>
<h3>Le principe d&#8217;organisation</h3>
<p>Dans une agence, voire dans beaucoup de sociétés françaises, on ne sait pas trop comment organiser les projets. Alors quand on est submergé et qu&#8217;on n&#8217;a pas envie de gérer le quotidien, on engage une personne pour gérer tous les à côtés ; selon moi, une sorte de super secrétaire de luxe mais en plus cher (je ne me moque pas je l&#8217;ai fait et c&#8217;est horrible).</p>
<p>Avec son poste de gestionnaire des &laquo;&nbsp;projets&nbsp;&raquo;, le chef de projet se trouve confronter aux pôles techniques avec lesquels il a du mal à discuter. Son rôle est de suivre l&#8217;évolution du projet (budget et planning) tout en faisant l&#8217;interface avec un client ; pour cela on lui donne le pouvoir d&#8217;arbitrer. Son manque de connaissance du métier dans lequel il travaille fait qu&#8217;il oublie de noter des choses, n&#8217;anticipe pas suffisamment, ne rend pas compréhensible sa demande, devient contradictoire&#8230;</p>
<p>Au final, les produits livrés sont d&#8217;une qualité insuffisante, arrivent dans des délais non conformes, les projets ne sont pas rentables ; On tente de comprendre pourquoi le système ne fonctionne pas.</p>
<h3>L&#8217;analyse des déficiences du système</h3>
<p>Suite à de grandes réunions, entretiens (&#8230;), les managers arrivent à deux conclusions :</p>
<ol>
<li>Les chefs de projets ne connaissent pas suffisamment la technique</li>
<li>Les pôles techniques ne sont pas assez impliqués en amont</li>
</ol>
<h3>La solution appliquée</h3>
<p>Comme les chefs de projets ne peuvent pas devenir technicien et que les chef de projets techniques sont chers, on choisit d&#8217;appliquer la deuxième option. Hors, la deuxième option ne peut pas marcher à cause de la première.</p>
<p>En effet, dans une organisation par pôle technique, chaque pôle est défini par une expertise technique que justement ne possède pas le pôle des chefs de projets. Dans le cas où on demande d&#8217;impliquer les pôles techniques plus en amont, le chef de projets se retrouve dans une situation où il n&#8217;a plus de légitimité car les pôles experts deviennent plus compétents que lui pour prendre les décisions.</p>
<p>Si le chef de projets veut, de manière naturelle, conserver de l&#8217;importance, il devra s&#8217;arranger pour ne pas intégrer les pôles techniques trop en amont. D&#8217;autant plus que quand on est chef de projets, on est chef.</p>
<p>Dans une agence web, alors même que tout le monde peut être d&#8217;accord sur le fait qu&#8217;un intégrateur ne peut pas gérer des principes d&#8217;accessibilité et de qualité s&#8217;il n&#8217;est pas sollicité en amont, on ne fera pas appel à ce même intégrateur car il va ralentir la conception de projet avec ses processus et rentrer de ce fait en confrontation direct avec les besoins du chef de projets.</p>
<p>On arrive donc toujours à la même conclusion, les chefs de projets sont incompétents dans leur domaine technique. Comme ils n&#8217;ont pas de statut d&#8217;autorité qui les légitimise, ils n&#8217;appliqueront pas la solution 2, pour ne pas perdre la face.</p>
<h3>Les points d&#8217;achoppement en agence web</h3>
<p>Pour en avoir été témoin de la situation, se met en place une guerre de tranchée très dure entre les chefs de projets et les intégrateurs. Elle est entretenue par deux oppositions</p>
<ol>
<li>Les chefs de projets n&#8217;informent pas suffisamment les intégrateurs en amont / les intégrateurs sont réfractaires à exécuter les tâches</li>
<li>Les chefs de projets ne progressent pas techniquement, alors que les intégrateurs le font constamment / les intégrateurs demandent aux chefs de projets d&#8217;avoir des connaissances dans un périmètre qui n&#8217;est pas le leur</li>
</ol>
<p>Les systèmes d&#8217;opposition font rarement avancer les choses. Pour moi le système n&#8217;est pas bon. Pour des raisons très simples :</p>
<ol>
<li>Les entreprises ont des domaines de compétences, des métiers ; il est normal de maîtriser le métier de l&#8217;entreprise dans laquelle on travaille pour la faire fonctionner ; ce n&#8217;est pas le cas des chefs de projets</li>
<li>On confond souvent expertise et compétence ; pas besoin d&#8217;être expert comptable pour gérer un budget, pas besoin d&#8217;être chargé d&#8217;opération pour gérer un planning, pas besoin d&#8217;être chef de projets pour discuter avec un client</li>
</ol>
<h3>Le système qui marche</h3>
<p>Le problème réel du système d&#8217;opposition est qu&#8217;alors que l&#8217;évolution naturelle de l&#8217;intégrateur est d&#8217;améliorer ses compétences en conception, de devenir responsable interface (voir l&#8217;explosion des offres d&#8217;embauche des concepteurs UX aux US), le chef de projets, pour conserver son statut, va bloquer la monté en compétence de l&#8217;intégrateur.</p>
<p>Pour moi, il est évident que la personne qui connait le mieux les principes de réalisation dans un domaine est le plus a même de pouvoir les concevoir (les interfaces dans notre cas). Hors ce n&#8217;est pas ce qu&#8217;on met en place dans certaines agences et c&#8217;est pour cette raison que la qualité reste moyenne.</p>
<p>Je pense qu&#8217;il est indispensable de passer à plus de transparence et donner plus de responsabilités à des équipes projets. Relire des articles comme <a href="http://www.bertrandkeller.info/2011/10/24/2833-la-culture-de-la-conception-web-la-transparence/">La culture de la conception web, la transparence</a> ou <a href="http://www.bertrandkeller.info/2008/12/24/301-trois-regles-de-management-piochees-chez-favi/">Trois règles de management piochées chez Favi</a>.</p>
<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2010/02/17/2163-introduction-a-la-gestion-de-projet-avec-eric-di-pol/' rel='bookmark' title='Introduction à la Gestion de Projet avec Eric Di Pol'>Introduction à la Gestion de Projet avec Eric Di Pol</a></li>
<li><a href='http://www.bertrandkeller.info/2008/03/20/138-pourquoi-le-microblogging-entreprise/' rel='bookmark' title='Pourquoi le micro blogging ?'>Pourquoi le micro blogging ?</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://www.bertrandkeller.info/2012/01/12/2919-pourquoi-lintegrateur-doit-devenir-concepteur/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Les pages animées au scroll vertical, deux plugins jQuery</title>
		<link>http://www.bertrandkeller.info/2012/01/03/2908-les-pages-animees-au-scroll-vertical-deux-plugins-jquery/</link>
		<comments>http://www.bertrandkeller.info/2012/01/03/2908-les-pages-animees-au-scroll-vertical-deux-plugins-jquery/#comments</comments>
		<pubDate>Tue, 03 Jan 2012 08:20:32 +0000</pubDate>
		<dc:creator>bertrand keller</dc:creator>
				<category><![CDATA[CSS + HTML]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.bertrandkeller.info/?p=2908</guid>
		<description><![CDATA[Est-ce que vous connaissez ces fameuses pages avec animations à chaque scroll vers le bas ? Ces types de pages sont relativement nouvelles dans la mesure où ce sont les nouvelles propriétés CSS3 qui permettent de provoquer les animations dans votre navigateur (à moindre frais). La génèse Une des première dans le genre (à ma [...]<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2009/11/24/1569-jquery-5-nouveaux-plugins-de-novembre/' rel='bookmark' title='jQuery : 5 nouveaux plugins de novembre'>jQuery : 5 nouveaux plugins de novembre</a></li>
<li><a href='http://www.bertrandkeller.info/2009/10/20/1370-jquery-accessible-ria-fonctionnalite-jquery-accessibles/' rel='bookmark' title='jQuery Accessible RIA : fonctionnalités jQuery accessibles'>jQuery Accessible RIA : fonctionnalités jQuery accessibles</a></li>
<li><a href='http://www.bertrandkeller.info/2010/01/21/1790-galerie-image-avec-bxgllery-sous-jquery/' rel='bookmark' title='Galerie d&#8217;images avec bxGallery sous jQuery'>Galerie d&#8217;images avec bxGallery sous jQuery</a></li>
<li><a href='http://www.bertrandkeller.info/2010/02/01/2076-colorbox-plugin-lightbox-pour-jquery/' rel='bookmark' title='ColorBox, plugin lightbox pour jquery'>ColorBox, plugin lightbox pour jquery</a></li>
<li><a href='http://www.bertrandkeller.info/2009/03/27/387-jquery-plugin-aria/' rel='bookmark' title='jQuery : plugin ARIA'>jQuery : plugin ARIA</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Est-ce que vous connaissez ces fameuses pages avec animations à chaque scroll vers le bas ? Ces types de pages sont relativement nouvelles dans la mesure où ce sont les nouvelles propriétés CSS3 qui permettent de provoquer les animations dans votre navigateur (à moindre frais).</p>
<h3>La génèse</h3>
<p>Une des première dans le genre (à ma connaissance) fut bien évidemment &laquo;&nbsp;Ben the bodyguard&nbsp;&raquo;, dont voici la vidéo :</p>
<div class="center"><iframe width="535" height="302" src="http://www.youtube.com/embed/SYhaFi77jdM" frameborder="0"></iframe></div>
<p>On se servira de ce genre de présentation pour mettre en avant un contenu scénarisé avec des étapes bien déterminées.</p>
<h3>Le principe</h3>
<p>Techniquement, comment cela marche-t-il ? On met en place une grande page, avec un décor statique (fond) et des éléments animés. On place dans cette page des ancres, comme autant d&#8217;éléments de votre scénario : étape 1, étape 2, étape 3&#8230; Puis à chaque ancre, on associe une animation (ou plusieurs animations).</p>
<p>Donc pendant que vous descendez dans la page, votre navigateur détecte des bornes (ancres), à chaque borne une fonction permet d&#8217;activer un événement. Visitez la page de <a href="http://www.google.com/green/the-big-picture.html">Google green &#8211; Better web. Better for the environment.</a>.</p>
<h3>Les plugins</h3>
<p>Je vous propose de regarder deux plugins jQuery</p>
<p><strong>1. jQuery waypoints :</strong><br />
Un plugin qui permet de détecter l&#8217;activation d&#8217;ancres et de pouvoir lancer un événément JavaScript de son choix. Peut-être utile pour du scroll infini, la détection de bas de page&#8230;<br />
<a href="http://imakewebthings.github.com/jquery-waypoints/">jQuery Waypoints</a></p>
<p><strong>2. jQuery scrollorama :</strong><br />
Un peu plus fin, il pointe directement un élément et permet d&#8217;appliquer un événement d&#8217;animation sur cet élément. Il semble plus destiné à des effets visuels.<br />
<a href="http://johnpolacek.github.com/scrollorama/">jQuery scrollorama</a></p>
<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2009/11/24/1569-jquery-5-nouveaux-plugins-de-novembre/' rel='bookmark' title='jQuery : 5 nouveaux plugins de novembre'>jQuery : 5 nouveaux plugins de novembre</a></li>
<li><a href='http://www.bertrandkeller.info/2009/10/20/1370-jquery-accessible-ria-fonctionnalite-jquery-accessibles/' rel='bookmark' title='jQuery Accessible RIA : fonctionnalités jQuery accessibles'>jQuery Accessible RIA : fonctionnalités jQuery accessibles</a></li>
<li><a href='http://www.bertrandkeller.info/2010/01/21/1790-galerie-image-avec-bxgllery-sous-jquery/' rel='bookmark' title='Galerie d&#8217;images avec bxGallery sous jQuery'>Galerie d&#8217;images avec bxGallery sous jQuery</a></li>
<li><a href='http://www.bertrandkeller.info/2010/02/01/2076-colorbox-plugin-lightbox-pour-jquery/' rel='bookmark' title='ColorBox, plugin lightbox pour jquery'>ColorBox, plugin lightbox pour jquery</a></li>
<li><a href='http://www.bertrandkeller.info/2009/03/27/387-jquery-plugin-aria/' rel='bookmark' title='jQuery : plugin ARIA'>jQuery : plugin ARIA</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://www.bertrandkeller.info/2012/01/03/2908-les-pages-animees-au-scroll-vertical-deux-plugins-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Une méthodologie pour le responsive design</title>
		<link>http://www.bertrandkeller.info/2011/07/12/2779-une-methodologie-pour-le-responsive-design/</link>
		<comments>http://www.bertrandkeller.info/2011/07/12/2779-une-methodologie-pour-le-responsive-design/#comments</comments>
		<pubDate>Tue, 12 Jul 2011 09:33:21 +0000</pubDate>
		<dc:creator>bertrand keller</dc:creator>
				<category><![CDATA[CSS + HTML]]></category>
		<category><![CDATA[ergonomie]]></category>
		<category><![CDATA[interface]]></category>

		<guid isPermaLink="false">http://www.bertrandkeller.info/?p=2779</guid>
		<description><![CDATA[Méthodologie présentée par Ethan Marcotte à la conférence &#171;&#160;An Event Apart&#160;&#187; à Boston. Concernant les sites d&#8217;informations Un journal papier comporte les informations relatives à une journée. Ces informations perdent de la valeur avec le temps. Ainsi, les lecteurs ont tendance à se tourner de plus en plus vers les applications mobiles pour avoir des [...]<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2010/03/15/2238-5-astuces-pour-la-conception-dinterfaces-mobiles/' rel='bookmark' title='5 astuces pour la conception d&#8217;interfaces mobiles'>5 astuces pour la conception d&#8217;interfaces mobiles</a></li>
<li><a href='http://www.bertrandkeller.info/2009/04/03/395-creer-une-version-mobile-de-son-site/' rel='bookmark' title='TYPO3 : créer une version mobile de son site'>TYPO3 : créer une version mobile de son site</a></li>
<li><a href='http://www.bertrandkeller.info/2009/06/25/713-comment-ruiner-un-design-web/' rel='bookmark' title='Comment ruiner un design Web'>Comment ruiner un design Web</a></li>
<li><a href='http://www.bertrandkeller.info/2010/02/01/2076-colorbox-plugin-lightbox-pour-jquery/' rel='bookmark' title='ColorBox, plugin lightbox pour jquery'>ColorBox, plugin lightbox pour jquery</a></li>
<li><a href='http://www.bertrandkeller.info/2010/08/27/2549-trousse-a-outils-pour-commencer-html5/' rel='bookmark' title='Trousse à outils pour commencer HTML5'>Trousse à outils pour commencer HTML5</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Méthodologie présentée par Ethan Marcotte à la conférence &laquo;&nbsp;An Event Apart&nbsp;&raquo; à Boston.</p>
<h3>Concernant les sites d&#8217;informations</h3>
<p>Un journal papier comporte les informations relatives à une journée. Ces informations perdent de la valeur avec le temps. Ainsi, les lecteurs ont tendance à se tourner de plus en plus vers les applications mobiles pour avoir des informations fraîches.<br />
Le besoin d&#8217;interface &laquo;&nbsp;responsive&nbsp;&raquo; se fait sentir.</p>
<p>Les trois ingrédients d&#8217;un graphisme adaptable sont :</p>
<ul>
<li>Une grille flexible</li>
<li>Des images/media flexibles</li>
<li>Des media queries</li>
</ul>
<p>Cependant ces trois éléments se rapportent à la structure ; la structure n&#8217;est constitue pas la conception. La conception est un rapport entre la forme et le contenu.</p>
<p>Comment peut on se pencher sur des sites adaptables ?</p>
<h3>Travailler adaptable</h3>
<p>Le travail de production se résume souvent à une succession de tâches. Une après l&#8217;autre de manière linéaire.<br />
Pour un site adaptable, la procédure ne peut pas être similaire étant donnée la multiplicité des supports de visualisation (mobile, tablette&#8230;). Le process doit être différent.</p>
<p>Pour le site du Boston Globe, la phase de conception a été ponctuée de nombreuses questions de la part des développeurs à propos de la manière de naviguer : à quoi ça sert ? comment le contenu s&#8217;adapte ? Si je navigue au doigt ?&#8230; Un travail collaboratif.<br />
L&#8217;équipe s&#8217;est principalement penchée sur la question de l&#8217;affichage sur mobile : importance des zones et contenus affichés&#8230;</p>
<p>En anglais dans le texte : <strong>Mobile First</strong></p>
<h3>Mobile First</h3>
<p>Pourquoi le mobile avant tout ?</p>
<ul>
<li>Le trafic a explosé</li>
<li>Nouvelles manière de naviguer</li>
<li>Ecran étroit oblige à aller à l&#8217;essentiel</li>
</ul>
<p>La question de contexte de pose-t-elle vraiment ? A-t-on de réelles volontés différentes sur un mobile ou sur un ordinateur de bureau ? A vrai dire, pas forcément, la question de contexte peut être (presque) éludée.</p>
<p>En effet, sur un ordinateur de bureau, les utilisateurs cliquent sur certaines zones d&#8217;un site tout simplement parce qu&#8217;ils sont perdus.<br />
Sur un mobile, on s&#8217;approprie directement le contenu, tout est là.</p>
<p>Le contenu va déterminer ce que la conception doit mettre en valeur. La vision &laquo;&nbsp;mobile first&nbsp;&raquo; est une façon  de simplifier l&#8217;expérience à son maximum.</p>
<h3>Maquettage</h3>
<p>Une étape à ne pas négliger est certainement celle du maquettage afin de pouvoir apprécier ses idées. Utiliser les dernières techniques de redimensionnement automatique des contenus.</p>
<p>Vérifier le résultat de son travail.. Comment le contenu s&#8217;adapte ? Comment un élément peut être mis en valeur ?<br />
Tester, vérifier, refaire, répéter, et corriger.</p>
<h3>La fondation flexible</h3>
<p>L&#8217;orientation graphisme adaptable permet d&#8217;affiner les points bloquants d&#8217;une page. Cela signifie surtout, moins de code à écrire et une meilleure conformité.<br />
Le web mobile permet de discuter de l&#8217;ajout d&#8217;éléments de manière progressive. Ce qui signifie une meilleur intégration au projet pour chacun.</p>
<p>Les choix d&#8217;un concepteur en chef se rapproche d&#8217;une certaine forme de tyrannie. Ses décisions pour une conception adaptable pourraient ne pas correspondre aux attentes des utilisateurs.<br />
S&#8217;orienter vers la conception adaptable c&#8217;est en grande partie laisser à une équipe la possibilité de l&#8217;expérimentation.</p>
<p>Lire <a href="http://www.lukew.com/ff/entry.asp?1314">An Event Apart: The Responsive Designer’s Workflow</a>.</p>
<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2010/03/15/2238-5-astuces-pour-la-conception-dinterfaces-mobiles/' rel='bookmark' title='5 astuces pour la conception d&#8217;interfaces mobiles'>5 astuces pour la conception d&#8217;interfaces mobiles</a></li>
<li><a href='http://www.bertrandkeller.info/2009/04/03/395-creer-une-version-mobile-de-son-site/' rel='bookmark' title='TYPO3 : créer une version mobile de son site'>TYPO3 : créer une version mobile de son site</a></li>
<li><a href='http://www.bertrandkeller.info/2009/06/25/713-comment-ruiner-un-design-web/' rel='bookmark' title='Comment ruiner un design Web'>Comment ruiner un design Web</a></li>
<li><a href='http://www.bertrandkeller.info/2010/02/01/2076-colorbox-plugin-lightbox-pour-jquery/' rel='bookmark' title='ColorBox, plugin lightbox pour jquery'>ColorBox, plugin lightbox pour jquery</a></li>
<li><a href='http://www.bertrandkeller.info/2010/08/27/2549-trousse-a-outils-pour-commencer-html5/' rel='bookmark' title='Trousse à outils pour commencer HTML5'>Trousse à outils pour commencer HTML5</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://www.bertrandkeller.info/2011/07/12/2779-une-methodologie-pour-le-responsive-design/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Comment les visiteurs jugent votre site : 6 facteurs liés à l’intuition et aux émotions</title>
		<link>http://www.bertrandkeller.info/2011/05/11/2761-comment-les-visiteurs-jugent-votre-site-6-facteurs-lies-a-l%e2%80%99intuition-et-aux-emotions/</link>
		<comments>http://www.bertrandkeller.info/2011/05/11/2761-comment-les-visiteurs-jugent-votre-site-6-facteurs-lies-a-l%e2%80%99intuition-et-aux-emotions/#comments</comments>
		<pubDate>Wed, 11 May 2011 14:33:08 +0000</pubDate>
		<dc:creator>bertrand keller</dc:creator>
				<category><![CDATA[CSS + HTML]]></category>
		<category><![CDATA[interface]]></category>

		<guid isPermaLink="false">http://www.bertrandkeller.info/?p=2761</guid>
		<description><![CDATA[Facteurs qui génèrent des émotions positives : La simplicité Découverte progressive des fonctionnalités Vitesse Libellé et organisation des éléments Lisibilité Beauté, esthétique Ce qui est marrant, c&#8217;est que depuis que je fais du web, on commence toujours par le dernier critère ; et encore c&#8217;est un assez subjectif. Lire Comment les visiteurs jugent votre site [...]<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2009/03/24/381-magento-seo-optimiser-le-referencement-de-votre-site-e-commerce/' rel='bookmark' title='Magento SEO &#8211; optimisez le référencement de votre site E-commerce'>Magento SEO &#8211; optimisez le référencement de votre site E-commerce</a></li>
<li><a href='http://www.bertrandkeller.info/2010/03/30/2285-8-outils-pour-tester-laccessibilite-de-votre-site/' rel='bookmark' title='8 outils pour tester l&#8217;accessibilité de votre site'>8 outils pour tester l&#8217;accessibilité de votre site</a></li>
<li><a href='http://www.bertrandkeller.info/2010/03/23/2264-plugin-jsplumb-diagrammes-avec-elements-html-lies/' rel='bookmark' title='Plugin jsPlumb, diagrammes avec éléments HTML liés'>Plugin jsPlumb, diagrammes avec éléments HTML liés</a></li>
<li><a href='http://www.bertrandkeller.info/2009/06/25/713-comment-ruiner-un-design-web/' rel='bookmark' title='Comment ruiner un design Web'>Comment ruiner un design Web</a></li>
<li><a href='http://www.bertrandkeller.info/2009/01/22/319-ava-7-patterns-des-fonds-pour-site-web/' rel='bookmark' title='Ava 7 Patterns : des fonds de page pour site web'>Ava 7 Patterns : des fonds de page pour site web</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Facteurs qui génèrent des émotions positives :</p>
<ol>
<li>La simplicité</li>
<li>Découverte progressive des fonctionnalités</li>
<li>Vitesse</li>
<li>Libellé et organisation des éléments</li>
<li>Lisibilité</li>
<li>Beauté, esthétique</li>
</ol>
<p>Ce qui est marrant, c&#8217;est que depuis que je fais du web, on commence toujours par le dernier critère ; et encore c&#8217;est un assez subjectif.</p>
<p>Lire <a href="http://www.adviso.ca/blog/2011/04/29/facteurs-intuition-emotions-web/">Comment les visiteurs jugent votre site : 6 facteurs liés à l’intuition et aux émotions</a></p>
<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2009/03/24/381-magento-seo-optimiser-le-referencement-de-votre-site-e-commerce/' rel='bookmark' title='Magento SEO &#8211; optimisez le référencement de votre site E-commerce'>Magento SEO &#8211; optimisez le référencement de votre site E-commerce</a></li>
<li><a href='http://www.bertrandkeller.info/2010/03/30/2285-8-outils-pour-tester-laccessibilite-de-votre-site/' rel='bookmark' title='8 outils pour tester l&#8217;accessibilité de votre site'>8 outils pour tester l&#8217;accessibilité de votre site</a></li>
<li><a href='http://www.bertrandkeller.info/2010/03/23/2264-plugin-jsplumb-diagrammes-avec-elements-html-lies/' rel='bookmark' title='Plugin jsPlumb, diagrammes avec éléments HTML liés'>Plugin jsPlumb, diagrammes avec éléments HTML liés</a></li>
<li><a href='http://www.bertrandkeller.info/2009/06/25/713-comment-ruiner-un-design-web/' rel='bookmark' title='Comment ruiner un design Web'>Comment ruiner un design Web</a></li>
<li><a href='http://www.bertrandkeller.info/2009/01/22/319-ava-7-patterns-des-fonds-pour-site-web/' rel='bookmark' title='Ava 7 Patterns : des fonds de page pour site web'>Ava 7 Patterns : des fonds de page pour site web</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://www.bertrandkeller.info/2011/05/11/2761-comment-les-visiteurs-jugent-votre-site-6-facteurs-lies-a-l%e2%80%99intuition-et-aux-emotions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Le partage d&#8217;idées participe aux conceptions innovantes</title>
		<link>http://www.bertrandkeller.info/2011/05/09/2756-le-partage-didees-participe-aux-conceptions-innovantes/</link>
		<comments>http://www.bertrandkeller.info/2011/05/09/2756-le-partage-didees-participe-aux-conceptions-innovantes/#comments</comments>
		<pubDate>Mon, 09 May 2011 20:24:57 +0000</pubDate>
		<dc:creator>bertrand keller</dc:creator>
				<category><![CDATA[accessibilité]]></category>
		<category><![CDATA[ergonomie]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.bertrandkeller.info/?p=2756</guid>
		<description><![CDATA[Je traduis librement le titre de cet article : Homepage Optimization: How sharing ideas can lead to more diverse radical redesigns. On y apprend qu&#8217;un petit challenge de refonte d&#8217;une page d&#8217;accueil a révélé de vraie bonnes idées. Le site exemple Le site pris pour exemple présente un logo trop petit, une navigation peu claire, [...]<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2010/03/01/2203-typo3-les-avancees-apres-le-t3uxw09/' rel='bookmark' title='TYPO3 : les avancées après le T3UXW09'>TYPO3 : les avancées après le T3UXW09</a></li>
<li><a href='http://www.bertrandkeller.info/2010/04/26/2394-whitehouse-gov-l-amaison-blanche-participe-au-developpement-de-drupal/' rel='bookmark' title='WhiteHouse.gov : la maison blanche participe au développement de Drupal'>WhiteHouse.gov : la maison blanche participe au développement de Drupal</a></li>
<li><a href='http://www.bertrandkeller.info/2011/01/03/2686-un-framework-mobile-mb-ile/' rel='bookmark' title='Un FrameWork mobile, mb.ile'>Un FrameWork mobile, mb.ile</a></li>
<li><a href='http://www.bertrandkeller.info/2007/11/28/103-un-calendrier-partage-dans-thunderbird/' rel='bookmark' title='Un calendrier partagé dans Thunderbird'>Un calendrier partagé dans Thunderbird</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Je traduis librement le titre de cet article : <a href="http://www.marketingexperiments.com/blog/internet-marketing-strategy/homepage-optimization-brainstorming-radical.html" title="Homepage Optimization: How sharing ideas can lead to more diverse radical redesigns">Homepage Optimization: How sharing ideas can lead to more diverse radical redesigns</a>. On y apprend qu&#8217;un petit challenge de refonte d&#8217;une page d&#8217;accueil a révélé de vraie bonnes idées.</p>
<h3>Le site exemple</h3>
<p>Le site pris pour exemple présente un logo trop petit, une navigation peu claire, un colonnage trop constant&#8230; des objectifs non affirmés (tient ça me rappelle des trucs).</p>
<h3>Les propositions</h3>
<p>Quelles sont les propositions des différents groupes, faites pour cette page d&#8217;accueil :</p>
<ul>
<li>Devenir membre
</li><li>Appel au don
</li><li>Proposition d&#8217;un jeu pour se familiariser avec le produit
</li><li>Navigation explicative sur les objectifs du site
</li></ul>
<h3>La conclusion</h3>
<p>La proposition de différentes idées pour la refonte de cette page a permis de dégager de réels parti pris. Même si on ne peut pas se réduire à penser que chaque idée est une bonne idée ou que le cumul de toutes les idées peut favoriser l&#8217;optimisation de cette page ; le dialogue a été très porteur.</p>
<p>D&#8217;ailleurs bien plus que quand une seule personne se charge de la conception.</p>
<blockquote><p>If one person in charge of this page only relied on their own ideas, we may not [be] able to achieve the highest level of success,”</p>
</blockquote>
<p>Il est fort probable que la refonte d&#8217;une page laissée à une seule personne ne permette pas d&#8217;atteindre un succès optimal. Le web est collaboratif, il est possible que la conception des sites doivent l&#8217;être aussi.</p>
<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2010/03/01/2203-typo3-les-avancees-apres-le-t3uxw09/' rel='bookmark' title='TYPO3 : les avancées après le T3UXW09'>TYPO3 : les avancées après le T3UXW09</a></li>
<li><a href='http://www.bertrandkeller.info/2010/04/26/2394-whitehouse-gov-l-amaison-blanche-participe-au-developpement-de-drupal/' rel='bookmark' title='WhiteHouse.gov : la maison blanche participe au développement de Drupal'>WhiteHouse.gov : la maison blanche participe au développement de Drupal</a></li>
<li><a href='http://www.bertrandkeller.info/2011/01/03/2686-un-framework-mobile-mb-ile/' rel='bookmark' title='Un FrameWork mobile, mb.ile'>Un FrameWork mobile, mb.ile</a></li>
<li><a href='http://www.bertrandkeller.info/2007/11/28/103-un-calendrier-partage-dans-thunderbird/' rel='bookmark' title='Un calendrier partagé dans Thunderbird'>Un calendrier partagé dans Thunderbird</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://www.bertrandkeller.info/2011/05/09/2756-le-partage-didees-participe-aux-conceptions-innovantes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>L&#8217;âge du JavaScript est arrivée</title>
		<link>http://www.bertrandkeller.info/2011/04/15/2738-lage-du-javascript-est-arrivee/</link>
		<comments>http://www.bertrandkeller.info/2011/04/15/2738-lage-du-javascript-est-arrivee/#comments</comments>
		<pubDate>Fri, 15 Apr 2011 10:18:43 +0000</pubDate>
		<dc:creator>bertrand keller</dc:creator>
				<category><![CDATA[intelligence économique]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.bertrandkeller.info/?p=2738</guid>
		<description><![CDATA[Traduction de l&#8217;article de Mike Driscoll : Node.js and the JavaScript age. Il y a trois mois, nous avons décidé de refondre le FrameWork que nous utilisions pour notre tableau de bord ; tout à été refait du côté client grâce à node.js. Ce choix a été dirigé face après la constatation que la structure [...]<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2009/12/10/1664-dygraphs-javascript-visualization-library/' rel='bookmark' title='dygraphs JavaScript Visualization Library'>dygraphs JavaScript Visualization Library</a></li>
<li><a href='http://www.bertrandkeller.info/2009/10/12/1300-graphiques-charts-avec-javascript/' rel='bookmark' title='Graphiques (Charts) avec JavaScript'>Graphiques (Charts) avec JavaScript</a></li>
<li><a href='http://www.bertrandkeller.info/2009/12/18/1692-easy-un-framework-csshtmljavascript/' rel='bookmark' title='Easy, un FrameWork CSS/HTML/JavaScript'>Easy, un FrameWork CSS/HTML/JavaScript</a></li>
<li><a href='http://www.bertrandkeller.info/2009/09/25/1206-15-carrousels-dimages-en-javascript/' rel='bookmark' title='15 Carrousels d&#8217;images en Javascript'>15 Carrousels d&#8217;images en Javascript</a></li>
<li><a href='http://www.bertrandkeller.info/2009/02/12/341-insertion-de-date-en-javascript-avec-raccourci-clavier/' rel='bookmark' title='Calendrier d&#8217;insertion de date en JavaScript avec raccourci clavier'>Calendrier d&#8217;insertion de date en JavaScript avec raccourci clavier</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Traduction de l&#8217;article de Mike Driscoll : <a href="http://metamarketsgroup.com/blog/node-js-and-the-javascript-age/">Node.js and the JavaScript age</a>.</p>
<p>Il y a trois mois, nous avons décidé de refondre le FrameWork que nous utilisions pour notre tableau de bord ; tout à été refait du côté client grâce à node.js.</p>
<p>Ce choix a été dirigé face après la constatation que la structure LAMP (Linux-Apache-MySQL-PHP) était morte. Depuis une vingtaine d&#8217;années que cette structure existe, beaucoup de virages ont déjà été réalisés concernant les contenus, les protocoles, les serveurs ou encore les clients.</p>
<p><strong>Nous pouvons dégager, d&#8217;ailleurs, trois âges du web :</strong></p>
<h3>1991-1999 : l&#8217;âge du HTML</h3>
<p>La vision originale de Tim Berners-Lee du web fut celle d&#8217;une grande bibliothèque en ligne. Le web était défini comme un corpus de documents statiques, codés en dur, en grande partie formatés par le niveau de rendu des navigateurs clients.</p>
<p>Pour résumer, nous avions des documents statiques disponibles pour des clients statiques. </p>
<h3>2000-2009 : l&#8217;âge LAMP</h3>
<p>La période LAMP fut très lié à celui des bases de données. La conception du web n&#8217;était plus orienté sur les documents, mais plutôt sur les principes LAMP, ou similaire. C&#8217;est-à-dire, une série de gabarit HTML intégrant des données provenant d&#8217;une base de données.</p>
<p>Nous avions bien un contenu dynamique, mais toujours un client statique.</p>
<h3>2010-?? : l&#8217;âge du JavasScript</h3>
<p>Dans cette troisième décennie nous entrons dans l&#8217;ère du flux. La page web n&#8217;est plus une page. Le modèle basé sur l&#8217;objet document existe toujours, mais plus en tant que structure (fixe). Le DOM (arbre structurelle d&#8217;une page) est chargé dans la mémoire du navigateur et une partie de celui-ci peut être modifié à l&#8217;aide de JavaScript.</p>
<p>L&#8217;architecture LAMP est morte en raison dans la mesure où, désormais, peu d&#8217;applications proposent d&#8217;actualiser l&#8217;ensemble d&#8217;un page en réponse à un événement (demande utilisateur minime) ; il suffit d&#8217;actualiser une partie du DOM grâce à JavaScript.</p>
<p>Nous passons de l&#8217;âge du document (HTML), à celui de l&#8217;affichage d&#8217;un gabarit (LAMP), pour arriver à celui de l&#8217;envoie de données. Le rôle principal du server est de passer d&#8217;une application vers un client (JavaScript), en passant par un formatage de données (JSON), et insérer ce contenu dans le document, ou plutôt le DOM.</p>
<p>Le deuxième rôle du serveur est d&#8217;être à l&#8217;écoute des événements côté client (édition, message…) et de renvoyer une réponse correspondante.</p>
<p>Node.js correspond aux demandes qu&#8217;on peut faire à un serveur en 2010. Il est asynchrone et très rapide. Il utilise HTTP 1.1, garde les connections ouvertes, il peut gérer des centaines de connections.</p>
<p>Les données deviennent de simples paquets, JSON semble s&#8217;imposer pour leur transfert. Il s&#8217;agit d&#8217;un format géré nativement par node.js.
</p><p>Le JavaScript nous rapproche du web qui ne se résume plus à la grande bibliothèque numérique, mais plutôt à un système nerveux numérique. </p>
<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2009/12/10/1664-dygraphs-javascript-visualization-library/' rel='bookmark' title='dygraphs JavaScript Visualization Library'>dygraphs JavaScript Visualization Library</a></li>
<li><a href='http://www.bertrandkeller.info/2009/10/12/1300-graphiques-charts-avec-javascript/' rel='bookmark' title='Graphiques (Charts) avec JavaScript'>Graphiques (Charts) avec JavaScript</a></li>
<li><a href='http://www.bertrandkeller.info/2009/12/18/1692-easy-un-framework-csshtmljavascript/' rel='bookmark' title='Easy, un FrameWork CSS/HTML/JavaScript'>Easy, un FrameWork CSS/HTML/JavaScript</a></li>
<li><a href='http://www.bertrandkeller.info/2009/09/25/1206-15-carrousels-dimages-en-javascript/' rel='bookmark' title='15 Carrousels d&#8217;images en Javascript'>15 Carrousels d&#8217;images en Javascript</a></li>
<li><a href='http://www.bertrandkeller.info/2009/02/12/341-insertion-de-date-en-javascript-avec-raccourci-clavier/' rel='bookmark' title='Calendrier d&#8217;insertion de date en JavaScript avec raccourci clavier'>Calendrier d&#8217;insertion de date en JavaScript avec raccourci clavier</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://www.bertrandkeller.info/2011/04/15/2738-lage-du-javascript-est-arrivee/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Un FrameWork mobile, mb.ile</title>
		<link>http://www.bertrandkeller.info/2011/01/03/2686-un-framework-mobile-mb-ile/</link>
		<comments>http://www.bertrandkeller.info/2011/01/03/2686-un-framework-mobile-mb-ile/#comments</comments>
		<pubDate>Mon, 03 Jan 2011 15:27:24 +0000</pubDate>
		<dc:creator>bertrand keller</dc:creator>
				<category><![CDATA[CSS + HTML]]></category>
		<category><![CDATA[ergonomie]]></category>
		<category><![CDATA[extensions]]></category>
		<category><![CDATA[interface]]></category>

		<guid isPermaLink="false">http://www.bertrandkeller.info/?p=2686</guid>
		<description><![CDATA[Pour le développement d&#8217;interfaces web destinée au mobile, on connaît plusieurs librairies JavaScript très poussée. Par exemple jQuery Mobile propose des exemples de fonctionnalités qu&#8217;il est possible d&#8217;intégrer à son site. Sur ce site, le graphisme (présenté) ressemble fortement à celui d&#8217;une application native ; néanmoins, il est possible de le personnaliser selon ses besoins [...]<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2009/04/03/395-creer-une-version-mobile-de-son-site/' rel='bookmark' title='TYPO3 : créer une version mobile de son site'>TYPO3 : créer une version mobile de son site</a></li>
<li><a href='http://www.bertrandkeller.info/2010/01/28/1800-openfaces-un-framework-ajax/' rel='bookmark' title='OpenFaces, un FrameWork ajax'>OpenFaces, un FrameWork ajax</a></li>
<li><a href='http://www.bertrandkeller.info/2010/04/06/2298-instant-blueprint-framework-css-express/' rel='bookmark' title='Instant Blueprint, FrameWork CSS express'>Instant Blueprint, FrameWork CSS express</a></li>
<li><a href='http://www.bertrandkeller.info/2009/12/18/1692-easy-un-framework-csshtmljavascript/' rel='bookmark' title='Easy, un FrameWork CSS/HTML/JavaScript'>Easy, un FrameWork CSS/HTML/JavaScript</a></li>
<li><a href='http://www.bertrandkeller.info/2009/11/19/1542-css-framework-scaffold-pour-le-developpement-rapide/' rel='bookmark' title='CSS FrameWork : Scaffold pour le développement rapide'>CSS FrameWork : Scaffold pour le développement rapide</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Pour le développement d&#8217;interfaces web destinée au mobile, on connaît plusieurs librairies JavaScript très poussée. Par exemple <a href="http://jquerymobile.com">jQuery Mobile</a> propose des exemples de fonctionnalités qu&#8217;il est possible d&#8217;intégrer à son site. Sur ce site, le graphisme (présenté) ressemble fortement à celui d&#8217;une application native ; néanmoins, il est possible de le personnaliser selon ses besoins et, voire, de réutiliser des fonctions pour un site web, dit classique.</p>
<p>Le FrameWork mb.ile permet aussi de mettre en forme des applications pour le mobile. Si on fait un tour sur les pages proposées, on trouve des exemples d&#8217;intégration très intéressants : <a href="http://pupunzi.com/#welcome.html" title="exemple mb.ile">mb.ile</a>.</p>
<ul>
<li><a href="http://pupunzi.com/#mb.components/mb._menu/menu.html" title="exemple mb.menu">Menu</a> &#8211; menu déroulants, big menu, menu recherche avancée&#8230;</li>
<li><a href="http://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html" title="exemple YTPlayer">Video player</a> &#8211; lecteur vidéo en fond de zone de contenu</li>
<li><a href="http://pupunzi.com/#mb.components/mb.verticalSlider/verticalSlider.html" title="exemple Menu mb.verticalSlider">Vertical slider</a> &#8211; menu déroulant vertical de style carrousel</li>
<li><a href="http://pupunzi.com/#mb.components/mb.extruder/extruder.html" title="exemple Menu mb.extruder">Extruder</a> &#8211; menu latéral fixe, rétractable</li>
</ul>
<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2009/04/03/395-creer-une-version-mobile-de-son-site/' rel='bookmark' title='TYPO3 : créer une version mobile de son site'>TYPO3 : créer une version mobile de son site</a></li>
<li><a href='http://www.bertrandkeller.info/2010/01/28/1800-openfaces-un-framework-ajax/' rel='bookmark' title='OpenFaces, un FrameWork ajax'>OpenFaces, un FrameWork ajax</a></li>
<li><a href='http://www.bertrandkeller.info/2010/04/06/2298-instant-blueprint-framework-css-express/' rel='bookmark' title='Instant Blueprint, FrameWork CSS express'>Instant Blueprint, FrameWork CSS express</a></li>
<li><a href='http://www.bertrandkeller.info/2009/12/18/1692-easy-un-framework-csshtmljavascript/' rel='bookmark' title='Easy, un FrameWork CSS/HTML/JavaScript'>Easy, un FrameWork CSS/HTML/JavaScript</a></li>
<li><a href='http://www.bertrandkeller.info/2009/11/19/1542-css-framework-scaffold-pour-le-developpement-rapide/' rel='bookmark' title='CSS FrameWork : Scaffold pour le développement rapide'>CSS FrameWork : Scaffold pour le développement rapide</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://www.bertrandkeller.info/2011/01/03/2686-un-framework-mobile-mb-ile/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Appliquer l&#8217;expérience Agile à l&#8217;UX</title>
		<link>http://www.bertrandkeller.info/2010/12/09/2681-appliquer-lexperience-agile-a-lux/</link>
		<comments>http://www.bertrandkeller.info/2010/12/09/2681-appliquer-lexperience-agile-a-lux/#comments</comments>
		<pubDate>Thu, 09 Dec 2010 18:19:37 +0000</pubDate>
		<dc:creator>bertrand keller</dc:creator>
				<category><![CDATA[création numérique]]></category>
		<category><![CDATA[ergonomie]]></category>
		<category><![CDATA[interface]]></category>

		<guid isPermaLink="false">http://www.bertrandkeller.info/?p=2681</guid>
		<description><![CDATA[Traduction de : Getting Agile with User Experience Research L&#8217;expérience utilisateur s&#8217;attarde sur la recherche, la planification, la conception, et les tests. La méthode agile cherche la rédaction d&#8217;un meilleur code. Comment appliquer la méthode Agile à l&#8217;expérience utilisateur. Quelles sont les différences : Ces deux pratiques sont très proches et ne doivent être confondues. [...]<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2011/05/02/2750-agile-carousel-insertion-de-donnees-en-json/' rel='bookmark' title='Agile Carousel, insertion de données en JSON'>Agile Carousel, insertion de données en JSON</a></li>
<li><a href='http://www.bertrandkeller.info/2009/05/05/538-typo3-la-conception-agile/' rel='bookmark' title='TYPO3 : la conception agile'>TYPO3 : la conception agile</a></li>
<li><a href='http://www.bertrandkeller.info/2010/03/24/2269-appliquer-les-regles-apportees-par-les-frameworks-css/' rel='bookmark' title='Appliquer les règles apportées par les FrameWorks CSS'>Appliquer les règles apportées par les FrameWorks CSS</a></li>
<li><a href='http://www.bertrandkeller.info/2010/03/12/2235-lexperience-utilisateur-aux-orties-preferer-lobjectif-utilisateur/' rel='bookmark' title='L&#8217;expérience utilisateur aux orties, préférer l&#8217;objectif utilisateur'>L&#8217;expérience utilisateur aux orties, préférer l&#8217;objectif utilisateur</a></li>
<li><a href='http://www.bertrandkeller.info/2009/10/16/1352-strategie-pour-l%e2%80%99accessibilite-web/' rel='bookmark' title='Stratégie pour l’accessibilité web'>Stratégie pour l’accessibilité web</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<h3>Traduction de :</h3>
<p><a href="http://www.spotlessinteractive.com/articles/usability-research/getting-agile-with-user-experience-planning.php" title="Getting Agile with User Experience Research">Getting Agile with User Experience Research</a></p>
<p><strong>L&#8217;expérience utilisateur s&#8217;attarde sur la recherche, la planification, la conception, et les tests. La méthode agile cherche la rédaction d&#8217;un meilleur code. Comment appliquer la méthode Agile à l&#8217;expérience utilisateur.</strong></p>
<h3>Quelles sont les différences :</h3>
<p>Ces deux pratiques sont très proches et ne doivent être confondues. Ne pas se méprendre entre les méthodes comme celle du scrum (point éclair régulier) et celle de la conception orientée utilisateur (user-centred design). Avec l&#8217;UCD (user-centred design), les résultats d&#8217;un étape enrichissent directement la prochaine (étape) ; pour la méthode Agile, l&#8217;objectif est de créer un ensemble de briques (de code fonctionnel) pour ensuite les assembler : d&#8217;abord créer les feuilles de l&#8217;arbre pour ensuite les assembler aux branches.</p>
<h3>Comment intégrer l&#8217;expérience utilisateur à un sprint de la méthode Agile ?</h3>
<p>De manière générale, l&#8217;attrait pour la méthode Agile se révèle plutôt chez un concepteur UX que chez un chercheur en expérience utilisateur. La conception se rapporte à la réalisation de maquette (wireframe), de plans de sites et parfois de prototypes. La recherche s&#8217;applique à l&#8217;étude des pré-requis, à l&#8217;étude utilisateur, aux personas, aux scénarios et aux tests. Difficile de relier la recherche et la méthode Agile. La principe appliqué et partir d&#8217;un &laquo;&nbsp;Sprint 0&#8243;, qui démarre par la recherche et la conception (1 mois).</p>
<p>1 mois ? Fichtre, c&#8217;est pas très important. Ainsi, on part le plus souvent d&#8217;idée préconçues, et des avis de ses collègues. La majorité des structures partent d&#8217;un FrameWork Agile pour leur intranet et continue le travail sur l&#8217;UX en parallèle. La réalisation est facilité par le fait que les concepteurs sont aussi les utilisateurs finaux.</p>
<h3>Comment qu&#8217;on fait, pour poursuivre la recherche durant la réalisation ?</h3>
<p>On imagine très ben la conception s&#8217;intégrer à chaque sprint, mais pour la recherche ? En effet, souvent la recherche se place dans une opposition face à un fonctionnement existant.</p>
<p><strong>Voici quelques exemples :</strong></p>
<ol>
<li>Tester avec un minimum de fonctionnalités, ou se focaliser uniquement sur le développement du sprint en question. Les sessions n&#8217;ont donc pas besoin d&#8217;être trop longues et les tests peuvent être réalisés avec plus de personnes.</li>
<li>A d&#8217;autres moments, tester l&#8217;ensemble du site, pour vérifier la cohérence générale, pour voir la modification des variables (de test)&gt;</li>
<li>Au final, la méthode RITE (Rapid Iterative Testing and Evaluation) s&#8217;adapte à chaque éventualité.</li>
</ol>
<p>La recherche représente une opportunité de parler avec les personnes qui vont utiliser le produit.</p>
<p><strong>L&#8217;utiliser pour :</strong></p>
<ol>
<li>Découvrir des besoins</li>
<li>Tester une nouveauté face un existant</li>
</ol>
<p>Comment je fais pour appliquer des tests à des sprint court ?Un sprint d&#8217;une semaine commence, souvent, un mardi, ainsi, les délivrables peuvent être prêts pour le vendredi. Les tests sont effectués le lundi matin, les résultats sont disponibles le lundi après-midi pour la revue.</p>
<p>L&#8217;équipe peut, de cette manière, faire le point sur les &laquo;&nbsp;issues&nbsp;&raquo; et les planifier pour le sprint suivant. Le responsable UX peut conseiller les problématiques de conception et proposer des mock-ups pour couvrir les manques dans le processus (suite à l&#8217;abandon de fonctionnalités lors du sprint).</p>
<p>Il est même envisageable de placer des besoins lors du test et créer des cas avec des nouveaux personas. Celà aide grandement à mettre en valeur les différents comportements parmi les utilisateurs du produit.</p>
<h3>Merci, comment je fais ?</h3>
<p>Un manière de faire est d&#8217;anticiper chaque délivrable tels que les objectifs business, les personas, les scénarios, et les revoir sans cesse de manière itérative.</p>
<p>Tant que le responsable UX reste malgré tout humain et peut se tromper dans ses choix, cette approche vous encourage à insister sur les éléments (réellement) importants. Les gens préfèrent parfois donner une réponse à un problème plutôt que de le résoudre durablement.</p>
<p>Cela arrive aux projets bancaires dans la création d&#8217;un tableau de bord à l&#8217;usage de quatre secteurs d&#8217;investissement. Au départ l&#8217;équipe projet furent sollicité à propos d&#8217;un processus générique, quelques personas rudimentaires et quelques maquettes. Les utilisateurs furent eux questionnés et les indicateurs à afficher furent revus. Après trois semaines et trois conceptions successives (itératives), la banque en sélectionna un seul. L&#8217;équipe de développement présenta un bandeau d&#8217;outils catégorisés par étape du cycle de vie.</p>
<h3>Qu&#8217;est-ce que cela signifie ?</h3>
<p>L&#8217;expérience utilisateur et la méthode Agile ont beaucoup à apprendre l&#8217;une de l&#8217;autre.</p>
<p>D&#8217;un point de vue expérience utilisateur, quand vous lancer une équipe sur un développement, en leur présentant des recherches préalables ; elles ont pleinement connaissances du contexte des évolution et leur utilité. Poursuivre les recherches durant la réalisation permet de garder l&#8217;équipe soucieuse des besoins des utilisateurs finaux.</p>
<p>D&#8217;un point de vue Agile, il n&#8217;y a pas de raison que la recherche et la planification se soit pas intégrée au sprint, afin de vérifier que la correspondance des fonctionnalités avec les considérations business, techniques, de conception. Les livraisons peuvent être dépendantes de réalités par rapport au besoin, aux spécification plutôt qu&#8217;être juste du code qui marche.</p>
<p>La recherche UX peut s&#8217;intégrer à un sprint aussi petit soit-il, pour assurer des tests aussi bien globaux que sur de petites fonctions.</p>
<h2>Articles similaires :</h2><ol>
<li><a href='http://www.bertrandkeller.info/2011/05/02/2750-agile-carousel-insertion-de-donnees-en-json/' rel='bookmark' title='Agile Carousel, insertion de données en JSON'>Agile Carousel, insertion de données en JSON</a></li>
<li><a href='http://www.bertrandkeller.info/2009/05/05/538-typo3-la-conception-agile/' rel='bookmark' title='TYPO3 : la conception agile'>TYPO3 : la conception agile</a></li>
<li><a href='http://www.bertrandkeller.info/2010/03/24/2269-appliquer-les-regles-apportees-par-les-frameworks-css/' rel='bookmark' title='Appliquer les règles apportées par les FrameWorks CSS'>Appliquer les règles apportées par les FrameWorks CSS</a></li>
<li><a href='http://www.bertrandkeller.info/2010/03/12/2235-lexperience-utilisateur-aux-orties-preferer-lobjectif-utilisateur/' rel='bookmark' title='L&#8217;expérience utilisateur aux orties, préférer l&#8217;objectif utilisateur'>L&#8217;expérience utilisateur aux orties, préférer l&#8217;objectif utilisateur</a></li>
<li><a href='http://www.bertrandkeller.info/2009/10/16/1352-strategie-pour-l%e2%80%99accessibilite-web/' rel='bookmark' title='Stratégie pour l’accessibilité web'>Stratégie pour l’accessibilité web</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://www.bertrandkeller.info/2010/12/09/2681-appliquer-lexperience-agile-a-lux/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

