tag:blogger.com,1999:blog-20400403683526569142024-02-18T19:31:52.027-08:00PlebFromVarUn recueil de nouveautés, d'information sur de nouvelles technologies, nouvelles normes, sur les tablettes ou sur de nouveaux concepts, très souvent proche de la documentation électronique, de son contenu et des contenants ou de son utilisation.
En d'autres termes tout ce qui peut m'interpeler et j'espère, vous interpeller. Pierre Lebailly ....du Var....Pierre Lebaillyhttp://www.blogger.com/profile/00463405209340303027noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-2040040368352656914.post-35453754012709381982012-08-03T11:01:00.001-07:002012-08-03T11:01:23.067-07:00Tu fais quoi pendant les vacances....?<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;" trbidi="on">
<b><i>Et bien en fait... :</i></b>
<br />
<br />
Et bien en fait je n'ai pas de vacance cette année...<br />
Bon je ne vais pas me plaindre...<br />
<br />
Mais généralement le temps des vacances, je me choisi 4 ou 5 livres...(je suis toujours d'un tempérament optimiste)...et j'en lis un sûr ...deux peut-être...<br />
<br />
Alors cette année changement de stratégie...<br />
<br />
je ne choisi qu'un seul livre...et pas n'importe quoi...un livre plein de suspens...d'émotions...d'images...<br />
<br />
de coup de théâtres...nous croyons des choses...et finalement nous en apprenons d'autres.<br />
<br />
En fait il s'agit de<br />
<br />
<div style="text-align: center;">
<img src="http://www.usabilis.com/upload/images/ergonomie-interfaces-edition-5(1).jpg" />
</div>
<br />
<div style="text-align: center;">
<a href="http://www.usabilis.com/ouvrage/ergonomie-interface.htm" target="_blank">Ergonomie-Interface - 5ème Edition</a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
et en fait je voulais juste tirer mon chapeau à <b><i>Jean-François Nogier</i></b>, pour ce très bel ouvrage, instructif et sûrement un outil de travail de tous les jours, toujours sous le coude....<br />
<br /></div>
<div>
Bonne vacances....</div>
</div>
<div style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<span style="color: #b45f06; font-size: large;"><b><u><br /></u></b></span><br />
<br />
<br /></div>
<br />
<br /></div>
</div>Pierre Lebaillyhttp://www.blogger.com/profile/00463405209340303027noreply@blogger.com0tag:blogger.com,1999:blog-2040040368352656914.post-6056405932312708522012-06-27T05:25:00.000-07:002012-06-27T05:25:10.870-07:00Mockup ou pas mockup ?<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;" trbidi="on">
<b><i>La problématique :</i></b>
<br />
Pour bon nombre d'entre nous, ils devient indispensable de réaliser rapidement des maquettes logicielles et bonne facture pour valider les orientations ergonomique...mais comment faire ?<br />
<ul style="text-align: left;">
<li><span style="background-color: white;">Les dessiner à la main ?</span></li>
<li><span style="background-color: white;">Utiliser des écrans existants ?</span></li>
<li><span style="background-color: white;">Utiliser une charte graphique ?</span></li>
<li><span style="background-color: white;">Utiliser un outil de mockup ?</span></li>
</ul>
<br />
<b><i>Ce que vous ne trouverez pas dans cet article :</i></b><br />
L'idée du billet n'est pas de faire une liste exhaustive des tous les outils de Mockup d'interface logiciel du marché, tout d'abord parce qu'il en existe un certains nombre et que d'autres articles ont déjà fait ce travail de "benchmark"<span style="background-color: white;">. Vous trouverez cependant un certain nombre d'outils en fin d'article via liens.</span><br />
<br />
<b style="background-color: white;"><i><span style="background-color: white;">Mais alors en quoi consiste l'article ?</span></i></b><br />
Et bien c'est simple, il s'agit d'expliquer une (ma) démarche qui en très peu de temps peu permettre d'arriver à un produit d'interface sur lequel vos clients ou vous même pouvez vous projeter sur l'avenir de votre logiciel...<br />
<br />
<b style="background-color: white;"><i><span style="background-color: white;">Qu'est le mockup ?</span></i></b><br />
<span style="background-color: white;"><span style="background-color: white;">Le mockup (Littéralement : Maquette) n'est pas un terme dédié à l'informatique, cependant, il est devenu très usité ces dernières années depuis que des logiciels permettent de réaliser des maquettes réalistes des interfaces homme machine.</span></span><br />
<span style="background-color: white;"><span style="background-color: white;"><br /></span></span><br />
Définition Wikipédia <a href="http://fr.wikipedia.org/wiki/Mock-up" target="_blank">Mock-up</a> : <span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;">En </span><a href="http://fr.wikipedia.org/wiki/Informatique" style="background-color: white; background-image: none; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="Informatique">informatique</a><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;">, le terme </span><b style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;">mock-up</b><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;"> (qui vient du même mot </span><a href="http://fr.wikipedia.org/wiki/Anglais" style="background-color: white; background-image: none; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="Anglais">anglais</a><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;"> qui signifie une </span><a href="http://fr.wikipedia.org/wiki/Maquette" style="background-color: white; background-image: none; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="Maquette">maquette</a><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;"> à l'échelle 1:1) désigne un </span><a href="http://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype" style="background-color: white; background-image: none; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="Programmation orientée prototype">prototype</a><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;"> d'</span><a href="http://fr.wikipedia.org/wiki/Interface_utilisateur" style="background-color: white; background-image: none; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="Interface utilisateur">interface utilisateur</a><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;">. Un mock-up a ainsi pour rôle de présenter les idées sur l'utilisation d'un </span><a href="http://fr.wikipedia.org/wiki/Logiciel" style="background-color: white; background-image: none; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="Logiciel">logiciel</a><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;">.</span><br />
<span style="background-color: white;"><br /></span><br />
<b style="background-color: white;"><i><span style="background-color: white;">Le premier contact est...</span></i></b><br />
Tout d'abord il est "primordial" de prendre comme postulat que le premier contact avec l'outil informatique est le regard. Ce postulat est d'ailleurs avéré pour bien d'autres sujets, votre premier contact et première impression avec une voiture est le regard, avec une tablette tel l'iPad également etc...<br />
<br />
Vous aurez donc beau essayer d'expliquer la future interface d'un logiciel, ses fonctionnalités ou son ergonomie par des mots, un schéma valant mieux qu'un long discours, sans support de type maquette votre cause est perdue d'avance. Il faut donc réaliser une maquette...donc oui au mockup<br />
<br />
<b style="background-color: white;"><i><span style="background-color: white;">Second postulat...</span></i></b>
<br />
Le second postulat est qu'en phase de d'analyse ou de définition, votre maquette va bouger et évoluer un certain nombre de fois de manière itérative...incrémentale, elle va s'affiner au fur et à mesure...<br />
<br />
Il est donc préférable d'opter pour un outil informatique permettant les changements. Il est donc à éviter de les faire à la main, hormis lors de la première réunion d'expression de besoin, et également éviter de les faire avec un outil de dessin d'images de type bitmap tel photoshop ou mspaint.<br />
<br />
<b style="background-color: white;"><i><span style="background-color: white;">A faire...</span></i></b>
<br />
Il faut en effet privilégier l'outil à base de "calques", l'outil permettant d'être neutre dans son graphisme et l'outil permettant un minimum d'interactivité par des liens hypertextes par exemple.<br />
<br />
<u>Les outils que je déconseille donc sont : </u><br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: white;">MsPaint, pour des images bitmap</span></li>
<li><span style="background-color: white;">MsVisio, pour sa non neutralité dans l'interface, il oblige a dessiner des écrans de type windows !</span></li>
<li><span style="background-color: white;">et enfin MSPowerPoint qui ne contient pas de </span><span style="background-color: white;">bibliothèque</span><span style="background-color: white;"> d'éléments natif d'interfaces homme machine tel les boutons, les onglets etc...</span></li>
</ul>
<br />
<u>Les outils que je conseille sont donc : </u><br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: white;">Pencil : simple, gratuit, un peu complexe dans la gestion des </span><span style="background-color: white;">bibliothèques d'objets. Contient cependant une librairie "Sketchy GUI" donnant l'impression d'un dessin à la main. Il permet en autres :</span></li>
<ul>
<li>D'aligner automatiquement les objets entre eux,</li>
<li>Interconnecter les objets à des pages pour une animation</li>
<li>Utiliser un style "main levée"
Sketchy GUI,</li>
<li>Réaliser différents type d'export pour les présentations</li>
<li>...</li>
</ul>
</ul>
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPNhVDvlKEL9SkVTQ4d0yDExPXQGiwt30JaJtxdY6UFaH_VJ3V6Yr4NbzSpjgGcQ5-_zYB__vcsGHJK1T7bXif8121iUwJIPAcu6WB9jrB4HleIWN5OA52wtjNBMnctd9afiKQlSe9YQ4/s1600/pencil.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPNhVDvlKEL9SkVTQ4d0yDExPXQGiwt30JaJtxdY6UFaH_VJ3V6Yr4NbzSpjgGcQ5-_zYB__vcsGHJK1T7bXif8121iUwJIPAcu6WB9jrB4HleIWN5OA52wtjNBMnctd9afiKQlSe9YQ4/s320/pencil.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Copie d'écran PENCIL - "Skectching Composant" - <a href="http://pencil.evolus.vn/" style="background-color: white;" target="_blank">Pencil</a></td></tr>
</tbody></table>
<br />
Certes, il n'a probablement pas toutes les fonctionnalités de <a href="http://www.balsamiq.com/" target="_blank">Balsamiq</a>, mais je vous assure qu'a part travailler dans une web agency, Pencil est un sérieux concurrent si on les compare d'un point de vue rapport qualité / prix et répondra je le pense en majorité à vos besoins de maquette...</div>
<div style="text-align: left;" trbidi="on">
<br /></div>
<div style="text-align: left;" trbidi="on">
Petite information, Pencil bien que disponible en version WEB propose une version StandAlone et surtout des bibliothèques à télécharger et importer dans Pencil....<br /><b style="background-color: white;"><i><span style="background-color: white;"><br /></span></i></b></div>
<div style="text-align: left;" trbidi="on">
<b style="background-color: white;"><i><span style="background-color: white;">Et après ...</span></i></b></div>
<div style="text-align: left;" trbidi="on">
<span style="background-color: white;">Une fois la partie présentation réalisée et validée, il peut être intéressant de réaliser la structure de votre application. Je parle exclusivement dans ce cas d'application WEB ou technologie WEB. Dans ce cas, je vous conseille un petit outil réalisé par les équipes à l'origine du projet "Eclipse". Eclipse étant le céléèbre outil de développement Java.</span></div>
<div style="text-align: left;" trbidi="on">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: left;" trbidi="on">
<span style="background-color: white;">L'outil dont j'aimerai vous parlé est : </span><a href="http://maqetta.org/" target="_blank">Maqetta</a></div>
<div style="text-align: left;" trbidi="on">
<br /></div>
<div style="text-align: left;" trbidi="on">
Bien sûr nous pourrions imaginer réaliser la maquette dès le début dans cet outil, mais il me parait un peu trop rigide dans le dessin des écrans, dans la mesure où il ne propose pas de réels objets "Sketch" mais propose de les construire.</div>
<div style="text-align: left;" trbidi="on">
<br /></div>
<div style="text-align: left;" trbidi="on">
Cependant, Maqetta propose une mise en place de la structure HTML de manière très puissante avec notamment : </div>
<div style="text-align: left;" trbidi="on">
<ul style="text-align: left;">
<li><span style="background-color: white;">Des ajouts par simples glisser/déposer d'objets disponibles dans une bibliothèque,</span></li>
<li><span style="background-color: white;">Un accès à un nombre important de propriété par objets (de la taille à la couleur en passant par l'évènement..)</span></li>
<li><span style="background-color: white; font-family: inherit;">Une large bibliothèque : </span><span style="background-color: white; color: #131313; font-family: inherit; line-height: 17px; text-align: -webkit-auto;">Dojo Containers</span><span style="background-color: white; color: #131313; font-family: inherit; line-height: 17px; text-align: -webkit-auto;">, </span><span style="background-color: white; color: #131313; font-family: inherit; line-height: 17px; text-align: -webkit-auto;">Dojo Controls</span><span style="background-color: white; color: #131313; font-family: inherit; line-height: 17px; text-align: -webkit-auto;">, </span><span style="background-color: white; color: #131313; font-family: inherit; line-height: 17px; text-align: -webkit-auto;">HTML</span><span style="background-color: white; color: #131313; font-family: inherit; line-height: 17px; text-align: -webkit-auto;">, </span><span style="background-color: white; color: #131313; font-family: inherit; line-height: 17px; text-align: -webkit-auto;">Dojox Mobile, Jquery UI, Yahoo UI...</span></li>
</ul>
</div>
<div style="text-align: left;" trbidi="on">
<span style="background-color: white;">Les points positifs de cet outil, des possibilités extrêmement large qui en font un vrai outil de développement WEB pour la partie structure de page.</span></div>
<div style="text-align: left;" trbidi="on">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: left;" trbidi="on">
<span style="background-color: white;">Et si point négatifs ils y avait, il faut être de la partie pour l'utiliser, car il est nécessaire de lancer un script MS-DOS qui exécute un serveur WEB... (et oui là j'ai perdu quel lecteur...désolé...)</span></div>
<div style="text-align: left;" trbidi="on">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: left;" trbidi="on">
<span style="background-color: white;">et oui enfin j'oubliai, lors de mon utilisation de Maqetta j'ai eu une erreur sur le fichier projet, et là impossible de récupérer le projet.</span></div>
<div style="text-align: left;" trbidi="on">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: left;" trbidi="on">
<span style="background-color: white;">Cela n'en fait pas moins un outil promu à un bel avenir sachant que je n'ai du utiliser que 5% de ses capacités...</span></div>
<div style="text-align: left;" trbidi="on">
<br /></div>
<div style="text-align: left;" trbidi="on">
<br /></div>
<div style="text-align: left;" trbidi="on">
<b style="background-color: white;"><i><span style="background-color: white;">Donc pour finir ...</span></i></b></div>
<div style="text-align: left;" trbidi="on">
<ul style="text-align: left;">
<li><span style="background-color: white;">Les Mockup : <b>OUI</b></span></li>
<li><span style="background-color: white;">L'outil idéal : <b>PENCIL</b></span></li>
<li><span style="background-color: white;">et pour la suite : <b>Maqetta</b></span></li>
</ul>
</div>
<div style="text-align: left;" trbidi="on">
Bonne maquette....</div>
<div style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<span style="color: #b45f06; font-size: large;"><b><u><br /></u></b></span><br />
<br />
<br /></div>
<br />
<br /></div>
</div>Pierre Lebaillyhttp://www.blogger.com/profile/00463405209340303027noreply@blogger.com0tag:blogger.com,1999:blog-2040040368352656914.post-58109750461817314652012-03-23T06:04:00.000-07:002012-03-26T02:31:27.351-07:00Documation 2012 - Rencontre avec Patick Hofmann<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h2 style="text-align: left;">
<span style="font-size: large;">Documation</span></h2>
<h3 style="text-align: left;">
<span style="font-size: small;"><br />Présentation</span></h3>
Le salon documation comme certains le savent déjà et <b><i>LE</i></b> salon français réservé à la documation électronique, connu internationalement.<br />
<h3 style="text-align: left;">
<span style="font-size: small;"><br />Objet</span></h3>
Il traite en autres sujets de :<br />
<br />
<ul style="text-align: left;">
<li>la dématérialisation, </li>
<li>la numérisation, </li>
<li>la gestion électronique,</li>
<li>la gestion de la traduction,</li>
<li>la représentation de l'information (Illustration 3D notamment)</li>
<li>l'archivage</li>
<li>la
sécurisation de l'accès à l'information</li>
</ul>
et bien d'autres sujets souvent liés à la gestion de l'information et son accès plutôt qu'à la création de l'information.<br />
<br />
<h3 style="text-align: left;">
<span style="font-size: small;">Nouveauté</span></h3>
Et cette année enfin on parle de la documentation technique ! De sa création, sa segmentation, et sa représentation (Illustration)<br />
<h2 style="text-align: left;">
<span style="font-size: large;"><br /></span></h2>
<h2 style="text-align: left;">
<span style="font-size: large;">Ma rencontre</span></h2>
Dans cet article je ne vais pas vous parler du salon en lui même, des ses statistiques visiteurs, ni même des sociétés ou éditeurs présents ils feront leur publicité aux-mêmes via le site de <a href="http://www.documation.fr/" target="_blank">Documation</a>.<br />
<br />
Je vais vous parler d'un sujet qui m'a plus qu’intéressé et interpellé via une rencontre professionnelle d'une grande richesse....<br />
<h3 style="text-align: left;">
<span style="font-size: small;">Le sujet : Icônes et des images : comment améliorer leur facilité d'utilisation graphique dans nos informations ?</span></h3>
Cette KeyNote a été menée par un expert en la matière : <b><u>Patrick HOFMANN</u></b> (User Experience Designer chez Google)<br />
<br />
<h3>
<span style="font-size: small;">Son parcours</span></h3>
<br />
Tour à tour rédacteur technique, puis dessinateur il est actuellement
responsable du design icônographique chez ....excusez moi du peu : GOOGLE pour
le projet GoogleMaps. Pour résumer, c'est le <b>Monsieur </b>Icônes de GoogleMaps...et croyez moi ce n'est pas si simple qu'il en parait, lisez la suite...<br />
<br />
<h3 style="text-align: left;">
<span style="font-size: small;">Son constat - sa KeyNote</span></h3>
Le constat que fait Patrick H. suite à des études, est à la fois évident et effarent : nous n'interprétons pas les
icônes de la même manière...bien sûr nous nous en doutions...mais les preuves ci-après nous amènent à penser qu'il faut être vigilant au début et dans la durée.<br />
<br />
Nos interprétations sont différentes pour diverses raisons :<br />
<br />
<ul style="text-align: left;">
<li>de culture</li>
<li>de nationalité,</li>
<li>de religion</li>
<li>....mais le plus surprenant et finalement le plus intéressant, en raison de l'âge des utilisateurs...</li>
</ul>
<br />
Si nous devions retenir une phrase ce serait celle-ci : nos icônes vieillissent avec nous...<br />
<br />
<h3 style="text-align: left;">
<span style="font-size: small;">L'étude</span></h3>
<br />
Notre expert en la matière s'est en effet, amusé à réaliser un test au près d'enfants de 5
à 10 ans en leur demandant quelles icônes représenteraient le mieux pour eux certaines actions ou thèmes telle que<br />
<br />
<br />
<ul style="text-align: left;">
<li>Enregistrer, </li>
<li>Musique, </li>
<li>Vidéo, </li>
<li>Allumer/Éteindre</li>
<li>etc.</li>
</ul>
<br />
<br />
<h3 style="text-align: left;">
<span style="font-size: small;">Le résultat de l'étude</span></h3>
<br />
Les réponses sont sans appel : pour<br />
<br />
<b><u>Vidéo :</u></b> les petites têtes blondes n'ont
pas reconnu l'icône représentant un morceau de bobine de film super8 ils n'ont d'ailleurs aucune idée de ce que cela représente....et oui nous sommes à l'air du numérique...<br />
<br />
<u><b>Allumer/Éteindre :</b></u> bien qu'il existe des interrupteurs type levier ou bouton, partout dans notre
vie, là ne fut pas leur réponse en termes d'icône. Ils ont majoritairement choisi cette célèbre icône représentant un cercle fendu d'une barre verticale disponible sur toutes nos télécommandes voire nos
téléphones...que cela représente-t-il pour eux...rien !! nous parlerons dans ce
cas d'une "learn icon" ...inutile de traduire (je m'excuse pour la
loie francaise !...mais la aussi vivons avec notre temps.).<br />
Mais d'ailleurs d'où vient cette représentation, car en effet, si il est communément admis que le radio bouton vient des anciennes radio avec des boutons physiques ronds qui ne permettaient de ne sélectionner qu'un bouton à la fois et faisaient remonter le bouton enfoncé lors de la pression sur un autre bouton, d'où vient cette représentation du marche/arrêt...?<br />
Cette représentation est tellement universelle, qu'une célèbre marque de cigarette la utilisé dans son principe de cigarette convertible. Il est utiliser à la fois dans le ON de cONvertible, mais aussi est surtout sur le filtre. L'icone est en effet placée à l'endroit où la pression doit être exercée pour passer en mode menthol...ne chercher pas une fois en mode menthol, impossible d'arrêter avec une nouvelle pression ;-)<br />
<br />
<b><u>Sauvegarder </u></b>: autre exemple de "learned icon" la "sauvegarde". Ils ont
tous choisi la disquette comme icône représentant la sauvegarde...et oui regardez bien elle est dans tous ou presque
tous nos logiciels...mais ils n'ont jamais vu de disquette !!! ...<br />
pire ils y voient
une porte de garage ;-)<br />
<br />
<br />
<h2 style="text-align: left;">
<span style="font-size: large;">Conclusion</span></h2>
<br />
Les exemples sont pléthores et je pense qu'il serait même possible d'en écrire un
livre !!<br />
<br />
Alors si nous devions résumer le sujet de cette KeyNoet, il est à retenir que les icônes doivent<br />
<br />
<ul style="text-align: left;">
<li>être simples, </li>
<li>dessiner à taille réelle, </li>
<li>directement compréhensibles sans être olbigé de les lires, </li>
<li>adaptées pour les
enfants de 7 à 97 ans, </li>
<li>uni-sexe, </li>
<li>uni-religion, </li>
<li>uni-nationnalité...</li>
<li>bref <b><u>universelles </u></b>!</li>
</ul>
<br />
<br />
et enfin son conseil le plus pragmatique, le plus judicieux et le plus sûr : il faut tester ses icônes le plus vite possible dans différentes situations de la vie (pas uniquement devant l'écran)...car n'oubliez pas vous voyez
avec vos yeux qui eux ne sont pas universels...<br />
<br />
PS : Thanks Patrick, a very interesting and professional KeyNote ;-)<br />
<br />
La conférence en image : <br />
<a href="http://www.documation.tv/ct-2012-google-34.html" target="_blank">Icônes et des images : comment améliorer leur facilité d'utilisation graphique dans nos informations ?</a></div>Pierre Lebaillyhttp://www.blogger.com/profile/00463405209340303027noreply@blogger.com1tag:blogger.com,1999:blog-2040040368352656914.post-15281349346917362192012-03-16T10:15:00.000-07:002012-03-16T10:15:01.186-07:00ePub et HTML5 et CSS3, le trio gagnant<div dir="ltr" style="text-align: left;" trbidi="on">
Dans l'article précédent je mettais en avant le nouveau format des livres électroniques : ePub.<br />
<br />
Cet article sera court mais je le pense permettra d'évoquer toutes les possibilités offertes par l'ensemble de ces technologies, à savoir ePub + HTML5 + CSS3.<br />
<br />
Je ne présenterai pas ce qu'est HTML5 et CSS3, d'autres l'on fait et la littérature est très riche. Peut être un résumé simple :<br />
<br />
HTML5+CSS3+Javascript est la combinaison gagnante des applications mobiles non développées en langage natif à savoir Objectif C pour l'iPad, l'iPhone et l'iPod ou encore Java pour les plate-formes Android. Bien il existait des sites Web en HTML5+CSS3 avant le portage sur les tablettes, pour comme vous pouvez le savoir, ou l'apprendre, combattre le monopole de Flash dans les applications Web demandant plus d'ergonomie et d’interactivité que de simples sites textuels.<br />
<br />
Donc, HTML5+CSS3 permet de faire des WebApp, et si on pousse le bouchon un peu plus simple, ePub est basé sur du XHTML, il s'agit donc d'un mini-site web...donc il est possible d'y ajouter de l'ergonomie et de l’interactivité via HTML5 et CSS3. cf : le dernier paragraphe de l’article précédent : <a href="http://plebfromvar.blogspot.com/2012/02/epub-le-format-dexcellence-des-livres.html" target="_blank">ici</a>.<br />
<br />
En résumé dans un livre ePub en HTM5 CSS3, il est possible d'avoir<br />
<br />
<ul style="text-align: left;">
<li>Une interactivité maximale sur des images,</li>
<li>Créer des carrousels dans le livre,</li>
<li>Afficher des pop-up,</li>
<li>Renseigner des formulaires,</li>
<li>voire ajouter un moteur de recherche intelligente (multi-critères)</li>
<li>et bien d'autres choses encore, ou seule l'imagination est la limite.</li>
</ul>
<br />
Pour imaginer toutes les possibilités offerte par ces formats, il suffit de regarder la vidéo du dernier livre de la société <a href="http://www.walrus-books.com/" target="_blank">WALRUS-BOOK</a>, spécialisé dans la réalisation de livre numérique interactif...<br />
<br />
Bonne projection...<br />
<br />
<br />
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="180" src="http://www.youtube.com/embed/IDImz2EveQA" width="280"></iframe>
</div>
</div>Pierre Lebaillyhttp://www.blogger.com/profile/00463405209340303027noreply@blogger.com6tag:blogger.com,1999:blog-2040040368352656914.post-15452833787295471942012-02-20T03:05:00.000-08:002012-02-20T06:06:02.705-08:00ePub le format d'excellence des livres électroniques<div dir="ltr" style="text-align: left;" trbidi="on">
Aujourd'hui nous allons faire un tour du côté du format ePub de <span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;"> </span><a href="http://idpf.org/" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" target="_blank" title="International Digital Publishing Forum">International Digital Publishing Forum</a><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;"> </span><span style="background-color: white; text-align: -webkit-auto;">- IDPF</span><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;">.</span><br />
<br />
<b>Qu'est ePub ? </b><br />
Pour faire simple, ePub est <b><u>LE </u></b>format des livres électroniques de demain.<br />
<div>
<br /></div>
<div>
Créé en 2007, le format ePub est assez récent, mais ses possibilités sont tels qu'il devient un incontournable dans le monde du livre électronique, qu'il s'agisse de romans ou encore de livres techniques.</div>
<div>
<br /></div>
<div>
<b>Dans le détail de quoi s'agit-il ?</b></div>
<div>
Dans le détail c'est assez simple. Il s'agit d'une structure de fichiers XHTML et répertoires, standardisés, qui une fois compressée dans un fichier "zip" et téléchargée sur une tablette (iPad ou Android) permet de lire n'importe quel type de document ou livre.</div>
<div>
<br /></div>
<div>
<b>Qu'offre-t-il de plus qu'un fichier PDF <span style="font-size: xx-small;">(1)</span>?</b></div>
<div>
De prime abord, peu de différence : </div>
<div>
<ul style="text-align: left;">
<li>Il possède une table des matières - le PDF aussi</li>
<li>Il est possible de chercher un mot en particulier - le PDF aussi</li>
<li>Il permet d'utiliser des styles recherchés de mise en forme - le PDF aussi </li>
</ul>
</div>
<div>
<b>Alors pourquoi choisir ePub et non PDF ?</b><br />
Pour deux raisons majeures :<br />
<br />
<ul style="text-align: left;">
<li>La principal raison est son ouverture. Le projet ePub est open source. En ce sens que les spécifications de réalisations d'un livre au format ePub sont disponibles sur Internet.
<a href="http://idpf.org/epub/30">Spécifications ePub 3.0</a> et utilisables par tous.</li>
<li>La seconde est sa compatibilité. Le format ePub du fait de son ouverture, peut et pourra être lu sur n'importe quel type d'appareil, du PC de bureau à la tablette en passant par le smartphone, sans aucune installation...enfin presque. En effet, sur les PC il est nécessaire d'installer une extension ou un reader. Sur les tablettes, par contre, les liseuses installée par défaut tel iBooks permettent de lire ce type de livre.</li>
</ul>
<div>
Une très grande différence réside aussi et surtout dans le format. La simplicité du XHTML et surtout le recul de plus de 20 ans d'utilisation de son petit frère HTML dans le monde WEB, en font un format plus que stable et maîtrisé. De plus, partant de ce principe que le fonds est contenu dans des fichiers HTML et que l'appareil se charge de l'affichage, cela donne accès à un livre complètement adapté au support. Il est en effet possible de modifier la taille des polices de caractères pour une meilleure lecture, le support se charge alors de recalculer en direct les numéros de page de la table des matières.</div>
<div>
<br /></div>
<div>
Ce type de lecture n'est pas possible avec le format PDF, de fait, un PDF réalisé pour une lecture sur ordinateur, peut bien sûr être lu sur tablette, à ceci prêt que le lecteur sera en permanence dans l'obligation de zoomer/dézoomer pour lire son document. Rendant la lecture plus que désagréable.</div>
<div>
<br /></div>
<br />
<b>L'epub de demain ?</b><br />
L'ePub de demain est déjà accessible. Il s'agit d'un livre "Enrichi". En effet, la dernière version de ePUB, la 3.0, intègre les spécifications HTML5, CSS3. De fait, la frontière entre livre et application culturelle tend à disparaître.<br />
<br />
Cela signifie que le livre n'est plus simplement un amas d'information, mais qu'il devient un outil interactif d'apprentissage pour lecteur, il devient notamment possible :<br />
<br />
<ul style="text-align: left;">
<li>d'afficher des images vectoriel (SVG <span style="font-size: xx-small;">(2)</span>) utilise pour des schémas,</li>
<li>d'afficher des images bitmap (photographie),</li>
<li>de zoomer sur ces images indépendamment du texte (fonctionnalité de la liseuse),</li>
<li>d'afficher de la video,</li>
<li>d'afficher de la 3D interactive,</li>
<li>et surtout d'afficher de formulaire ou mini jeu en HTML5, avec notamment des fonctionnalités de "glisser/déplacer, permettant au lecteur de vérifier ses connaissances.</li>
</ul>
<div>
Des tests ont d'ailleurs été fait en implémentant des librairies riches javascript tel que "jQUERYUI" : <a href="http://www.sunbi.co.jp/wp-content/uploads/jQuery_20110310.epub" target="_blank">Test ePub avec JQuery UI</a></div>
<div>
<br /></div>
<b>Process de fabrication impacté ?</b><br />
Dans le monde industriel, les process de fabrication sont fortement impactés. En effet, là où il était nécessaire d'avoir deux processus de transformation pour éditer une version Web d'un document et sa version PDF, avec le format ePub, un seul processus suffit, le support d'affichage se chargeant de l'adaptation.<br />
<br />
<b>Les liseuses</b><br />
Sur tablette, la meilleur est sans conteste <b>iBOOKS,</b><br />
Sur PC, deux plug-in sont intéressants : <a href="http://en.wikipedia.org/wiki/EPUBReader" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: none; background-origin: initial; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" target="_blank" title="EPUBReader">EPUBReader</a> pour FireFox et <a href="http://readium.org/" target="_blank">Readium</a> (tout nouveau) pour Chrome.<br />
<br />
<b>Outils de création</b><br />
L'outil que j'affectionne particulièrement pour sa simplcité est <a href="http://code.google.com/p/sigil/" target="_blank">Sigil</a>. Avec quelques petits bugs malheuresuement si le contenu devient complexe techniquement (jQuery, jQueryUI)<br />
<br />
Apple a bien senti le potentiel de ce format (ou type de format), en étant parmi les premiers à permettre de les lire. Depuis peu, il propose d'ailleurs gratuitement un outil de création de livres "Riches" : <a href="http://www.apple.com/ibooks-author/" target="_blank">ibooks-author</a>. Bien que l'extension des fichiers soit .iBooks...il ne s'agit que de livre .ePub donc au final un fichier "zip".<br />
<b><br /></b><br />
<div style="text-align: center;">
<b><i>Quelques Videos :</i></b></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="180" src="http://www.youtube.com/embed/vvGrFZdSDww" width="280"></iframe>
</div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="180" src="http://www.youtube.com/embed/U8IA-1AHDjI" width="280"></iframe>
</div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="180" src="http://www.youtube.com/embed/vWPXap0OCp4" width="280"></iframe>
</div>
</div>
<span style="font-size: xx-small;"><br /></span><br />
<br />
<div style="text-align: center;">
<b><i>Quelques Liens :</i></b></div>
<div style="text-align: center;">
<a href="http://en.wikipedia.org/wiki/EPUB">http://en.wikipedia.org/wiki/EPUB</a></div>
<div style="text-align: center;">
<span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;"> </span><a href="http://idpf.org/" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" target="_blank" title="International Digital Publishing Forum">International Digital Publishing Forum</a><br />
<br /></div>
<br />
<span style="font-size: xx-small;">(1) </span>PDF : Portable Document Format<br />
<span style="font-size: xx-small;">(2)</span> SVG : Scalable Vector Graphics</div>Pierre Lebaillyhttp://www.blogger.com/profile/00463405209340303027noreply@blogger.com1tag:blogger.com,1999:blog-2040040368352656914.post-35219251482977192492012-02-16T10:12:00.000-08:002012-02-16T10:25:36.524-08:00Une nouvelle ergonomie de lecture sur tablette...iPad<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxmhcdVtjL-lLx8I7eKM6dhpMrJ6jTY9iXBeAF-xiAUhWDuPMgwG3b4-RuWh8kkXglztFqw6FQZ13ThtkBp8QSldQu5ky3k2sF1DdbNSa0ez1hHZkD19CX2xkH_foeYmTg2DNb6v3T3QM/s1600/KAIST-illus2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify;"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxmhcdVtjL-lLx8I7eKM6dhpMrJ6jTY9iXBeAF-xiAUhWDuPMgwG3b4-RuWh8kkXglztFqw6FQZ13ThtkBp8QSldQu5ky3k2sF1DdbNSa0ez1hHZkD19CX2xkH_foeYmTg2DNb6v3T3QM/s200/KAIST-illus2.png" width="200" /></a><br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Le nombre d'ouvrages électroniques ne cesse d'augmenter. Bon nombre
d'articles détaillent déjà la capacité des liseuses d'eBook.<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Mais le terme eBook est aussi bien utilisé pour qualifier les fichiers
PDF (Portable Document Format- Adobe) sur tablette, que de simples reproductions de livres nouvellement entrés dans le domaine public.<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">La liseuse iBook sort bien évidemment du lot avec se version 2 en
proposant entre autres la possibilité d'intégrer de la vidéo, des images, ainsi
que des structures 3D. Ceci fera l'objet d'un prochain article...<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Pour le moment je souhaiterai me pencher sur les
nouvelles possibilités ergonomiques étudiées et proposées par l'institut
supérieur coréen des sciences et technologie<a href="http://www.kaist.edu/english/01_about/06_news_01.php?req_P=bv&req_BIDX=10&req_BNM=ed_news&pt=17&req_VI=3578" target="_blank"><span style="color: blue;"> (KOREA
Advanced Institute of Science and Technology - KAIST)</span></a><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Cet institut a su créer un ensemble de fonctionnalités ergonomiques de lecture via de la reconnaissances de gestes proches de nos gestes naturels de lecture de
magazine.</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Nous arrivons à un niveau de lecture quasi identique à la lecture de
magazine papier tant en termes de fluidité que d'atmosphère. En effet
l'utilisation de l'outil est tellement proche de la réalité que l'outil se fait
oublier au profit de la lecture. Les possibilités offertes par cette ergonomie
sont notamment :</span></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: inherit;">Le page à page intuitif,<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: inherit;">L'effet de feuilleter sans
réellement tourner les pages<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: inherit;">Garder la page en cours de
lecture tout en avançant, pour accéder notamment à une annexe<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: inherit;">Passer rapidement, 2,3 ou 4
page selon le nombre de doigts utilisés dans le mouvement de slide<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: inherit;">...</span></li>
</ul>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Ces comportements nous paraissent si évidents que l'on se demande
pourquoi ils ne sont pas encore appliqués dans les liseuses disponibles sur le
marché<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Parce qu'une vidéo vaut mieux qu'un grand discours un petit tour par ici...</span><span style="font-family: 'Times New Roman', serif; font-size: medium;"><o:p></o:p></span></div>
<br />
<div style="text-align: center;">
<object height="240" width="426"><param name="movie" value="http://www.youtube.com/v/rVyBwz1-AiE&hl=en_US&feature=player_embedded&version=3">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowScriptAccess" value="always">
</param>
<embed src="http://www.youtube.com/v/rVyBwz1-AiE&hl=en_US&feature=player_embedded&version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="426" height="240"></embed></object>
</div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: justify;">
<br /></div>
vous permettra d'appréhender cette nouvelle, ou future nouvelle façon de lire sur vos tablettes...reste à savoir quand...<br />
<br /></div>Pierre Lebaillyhttp://www.blogger.com/profile/00463405209340303027noreply@blogger.com0tag:blogger.com,1999:blog-2040040368352656914.post-55600401517637538942012-02-12T09:00:00.000-08:002012-02-17T00:34:55.835-08:00WebGL...le futur de la 3D en ligne ?<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<b><i>La problématique :</i></b>
<br />
L'intégration d'animation 3D dans un site ou une documentation est une réelle difficulté.<br />
<br />
Ce n'est pas qu'il soit techniquement difficile de le faire...le problème se situe au niveau de l'outil.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_25WU7AGes-hCB7B-kZL8PMFHxHqlWMrz7C-Be_nTcfBBRdumV4uZBmXdPJxbAGvyUiovFCNeGipdqjs3xwNEo50avE5Zcxjbwu7eeXMan9WInoO8RBnLy5Wno5oYVLW0eaXiewZu08A/s1600/3D-Human-Beta.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_25WU7AGes-hCB7B-kZL8PMFHxHqlWMrz7C-Be_nTcfBBRdumV4uZBmXdPJxbAGvyUiovFCNeGipdqjs3xwNEo50avE5Zcxjbwu7eeXMan9WInoO8RBnLy5Wno5oYVLW0eaXiewZu08A/s320/3D-Human-Beta.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Projet 3D - Human - <a href="http://www.biodigitalhuman.com/" style="font-size: medium;">Biodigitalhuman.com</a></td></tr>
</tbody></table>
En effet, il est quasiment indispensable de faire un choix "éditeur" et donc d'avoir toutes les animations 3D dans un logiciel dans un format propriétaire. Et le plus souvent, ce choix implique non seulement l'élaboration d'une documentation intégrant de la 3D mais également la visualisation dans la documentation finale. Il est en effet souvent voir toujours nécessaire d'utiliser le plug-in de l'éditeur nécessaire à la visualisation de l'animation ou de l'objet 3D.<br />
<br />
<b><i>La solution :</i></b><br />
La solution ? Il en existe peut être une, il s'agit de la technologie <b>WebGL</b>.<br />
<br />
Mais qu'est <a href="http://fr.wikipedia.org/wiki/WebGL" target="_blank">WebGL</a> (Wikipedia)<br />
<blockquote class="tr_bq">
<span style="background-color: white;"><b style="font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto;">WebGL</b><span style="font-family: sans-serif; font-size: 13px; line-height: 19px;"> est une spécification d'</span><a href="http://fr.wikipedia.org/wiki/Moteur_3D" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="Moteur 3D">affichage 3D</a><span style="font-family: sans-serif; font-size: 13px; line-height: 19px;"> pour les </span><a href="http://fr.wikipedia.org/wiki/Navigateur_web" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="Navigateur web">navigateurs web</a><span style="font-family: sans-serif; font-size: 13px; line-height: 19px;">, créée par le </span><a href="http://fr.wikipedia.org/wiki/Khronos_Group" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="Khronos Group">Khronos Group</a><span style="font-family: sans-serif; font-size: 13px; line-height: 19px;">. Elle permet d'utiliser le standard </span><a href="http://fr.wikipedia.org/wiki/OpenGL" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="OpenGL">OpenGL</a><span style="font-family: sans-serif; font-size: 13px; line-height: 19px;">depuis le code </span><a href="http://fr.wikipedia.org/wiki/JavaScript" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="JavaScript">JavaScript</a><span style="font-family: sans-serif; font-size: 13px; line-height: 19px;"> d'une </span><a href="http://fr.wikipedia.org/wiki/Page_web" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="Page web">page web</a><span style="font-family: sans-serif; font-size: 13px; line-height: 19px;">. C'est une technologie permettant le </span><a href="http://fr.wikipedia.org/wiki/Web3D" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; color: #0b0080; font-family: sans-serif; font-size: 13px; line-height: 19px; text-align: -webkit-auto; text-decoration: none;" title="Web3D">Web3D</a><span style="font-family: sans-serif; font-size: 13px; line-height: 19px;"> tout en exploitant les accélérations matérielles 3D à l'aide des pilotes OpenGL de la carte graphique.</span></span></blockquote>
En d'autres termes :<br />
<ul style="text-align: left;">
<li>plus besoin de plug-in, intégration parfaite de la 3D dans la page</li>
<li>utilisation possible de la 3D sur PC ou tablette, ou iPAD sans modification du modèle</li>
</ul>
Gageons, que dans avenir proche, des outils des dessins 3D exporteront facilement dans le format WebGL.<br />
<br />
<b><i>le revers de la médaille : </i></b><br />
Partant de solution "open source", en code javascript, donc non compilé, il est facile de faire du "reverse engineering" (rétroingénierie).<br />
Mais posons nous les questions suivantes :<br />
<ol style="text-align: left;">
<li>Le modèle d'une documentation de type formation est-il suffisamment détaillé au niveau du nombre de facettes, de la taille des pièces pour faire la rétroconception ?</li>
<li>Les produits éditeurs sont-ils à l'abri de développement d'outil de retroingénierie ? </li>
</ol>
Dans la section suivante, un certain nombre d'exemple nous permet d'entrevoir le bel avenir de cette technologie...<br />
<br />
<div style="text-align: center;">
<b style="text-align: left;"><i>Quelques liens : (UTILISER FireFox ou Chrome)</i></b>
<br />
<div style="text-align: left;">
<b><i><br /></i></b></div>
<b><u><span style="color: #b45f06; font-size: large;">Les meilleurs pour le début !</span></u></b><br />
<a href="http://www.zygotebody.com/">http://www.zygotebody.com/</a><br />
Les zones sont interactives !!<br />
<a href="http://www.biodigitalhuman.com/">http://www.biodigitalhuman.com/</a><br />
Zones interactives, Arborescence, pop-info et son...que manque-t-il ?<br />
<br />
<b style="text-align: left;"><i>Le reste : </i></b><br />
<a href="http://www.ibiblio.org/e-notes/webgl/deflate/phalanges.html">http://www.ibiblio.org/e-notes/webgl/deflate/phalanges.html</a><br />
<a href="http://www.spacegoo.com/helico/">http://www.spacegoo.com/helico/</a><br />
<a href="http://veditor.plopbyte.net/">http://veditor.plopbyte.net/</a><br />
(utilisation souris en cliquant sur la voiture, et roulette)<br />
<a href="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/google/shiny-teapot/index.html">https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/google/shiny-teapot/index.html</a><br />
(utilisation souris en cliquant sur la théière)
<br />
<a href="http://people.mozilla.com/%7Esicking/webgl/ray.html">http://people.mozilla.com/~sicking/webgl/ray.html</a><br />
<a href="http://mrdoob.com/lab/javascript/webgl/kinect/">http://mrdoob.com/lab/javascript/webgl/kinect/</a><br />
Très joli!<br />
<a href="http://madebyevan.com/webgl-water/">http://madebyevan.com/webgl-water/</a><br />
Pas mal<br />
<br />
<b style="text-align: left;"><i>D'autres exemples : </i></b>
<br />
d'autres exemples par ici : <a href="http://www.chromeexperiments.com/webgl">http://www.chromeexperiments.com/webgl</a><br />
<br />
<br /></div>
<br />
<br /></div>
</div>Pierre Lebaillyhttp://www.blogger.com/profile/00463405209340303027noreply@blogger.com0tag:blogger.com,1999:blog-2040040368352656914.post-87362161391953458972012-02-10T03:07:00.000-08:002012-02-17T00:34:45.435-08:00Traduction en ligne...quelques désastres<div dir="ltr" style="text-align: left;" trbidi="on">
Utilisateur de longue date de Reverso, j'ai dernièrement été très surpris pour ne pas dire déçu de la traduction de certaines phrase alors que nous étions en séance d'anglais avec mon fils aîné...<br />
<br />
Aussi voici le résultat de la traduction d'une phrase simple, tirée d'un livre électronique anglais sur <a href="http://www.oxfordowl.co.uk/FindBook" target="_blank">http://www.oxfordowl.co.uk/FindBook</a> (super site soit dit en passant)<br />
<br />
La phrase parle d'une voiture en panne coincée au milieu de la route :<br />
<br />
<div style="text-align: center;">
<b><i>One car had broken down and was stuck in the middle of the road. </i></b></div>
<div style="text-align: left;">
<b><i><br /></i></b></div>
<div style="text-align: left;">
Les résultats de traduction sont éloquents et pour certains très mauvais. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
</div>
<div>
<a href="http://translate.google.com/" target="_blank">http://translate.google.com</a> <b><i><u><span style="color: orange;">ma note 8,5/10</span></u></i></b></div>
<ul>
<li><span class="hps" style="background-color: white; color: #333333; font-family: inherit; text-align: -webkit-auto;">Une</span><span style="background-color: white; color: #333333; font-family: inherit; text-align: -webkit-auto;"> </span><span class="hps" style="background-color: white; color: #333333; font-family: inherit; text-align: -webkit-auto;">voiture était en panne</span><span style="background-color: white; color: #333333; font-family: inherit; text-align: -webkit-auto;"> </span><span class="hps" style="background-color: white; color: #333333; font-family: inherit; text-align: -webkit-auto;">et a été</span><span style="background-color: white; color: #333333; font-family: inherit; text-align: -webkit-auto;"> </span><span class="hps" style="background-color: white; color: #333333; font-family: inherit; text-align: -webkit-auto;">coincé dans le</span><span style="background-color: white; color: #333333; font-family: inherit; text-align: -webkit-auto;"> </span><span class="hps" style="background-color: white; color: #333333; font-family: inherit; text-align: -webkit-auto;">milieu de la route</span><span style="background-color: white; color: #333333; font-family: inherit; text-align: -webkit-auto;">. </span></li>
<ul>
<li><span style="background-color: white; color: #333333; font-family: inherit; text-align: -webkit-auto;">(dommage pour le "Dans le milieu", au lieu de "au milieu")</span></li>
</ul>
</ul>
<br />
<div style="text-align: left;">
<a href="http://fr.babelfish.yahoo.com/" target="_blank">http://fr.babelfish.yahoo.com</a>: <b><i><u><span style="color: orange;">ma note 8/10</span></u></i></b></div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="background-color: white;"><span style="font-family: inherit;">Une voiture avait été en panne et a été coincée au milieu de la route.</span></span>
</li>
</ul>
<br />
<div style="text-align: left;">
<a href="http://www.systranet.fr/" target="_blank">http://www.systranet.fr</a> <b><i><u><span style="color: orange;">ma note 8/10</span></u></i></b></div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>Une voiture avait été en panne et a été coincée au milieu de la route. </li>
</ul>
<br />
<div style="text-align: left;">
<a href="http://www.worldlingo.com/" target="_blank">http://www.worldlingo.com</a> <b><i><u><span style="color: orange;">ma note 8/10</span></u></i></b></div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>Une voiture avait été en panne et a été coincée au milieu de la route.</li>
</ul>
<div style="text-align: -webkit-auto;">
<a href="http://www.microsofttranslator.com/" target="_blank">http://www.microsofttranslator.com</a> <b style="text-align: left;"><i><u><span style="color: orange;">ma note 8/10</span></u></i></b></div>
<ul style="text-align: left;">
<li><span style="background-color: white; font-family: inherit; text-align: -webkit-auto;">Une voiture était en panne et était coincée dans le milieu de la route.</span><span style="font-family: inherit; text-align: -webkit-auto;"> </span></li>
</ul>
<div style="text-align: -webkit-auto;">
<a href="http://www.reverso.net/">http://www.reverso.net</a> <b style="text-align: left;"><i><u><span style="color: orange;">ma note 3/10</span></u></i></b></div>
<div style="text-align: -webkit-auto;">
<ul style="text-align: left;">
<li>Une voiture avait détruit et a été collée au milieu de la route.</li>
</ul>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Jusqu'à ce jour j'utilisais beaucoup de le dernier produit car très agréable au niveau de l'ergonomie et pas mal de suggestions sur des traductions ambiguës, mais là je crois qu'il est temps de changer !!</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
et vous quel est votre traducteur en ligne préféré ?</div>
<div style="text-align: left;">
<br /></div>
</div>
</div>Pierre Lebaillyhttp://www.blogger.com/profile/00463405209340303027noreply@blogger.com3tag:blogger.com,1999:blog-2040040368352656914.post-24578298336845425102012-02-08T09:53:00.000-08:002012-02-17T00:34:23.192-08:00Cortonna 3D - Ipad et Android ?<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: inherit;">Dans ce premier billet je vous parlerai de 3D...</span><br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">En effet revenant du salon imagina de Monaco principalement dédié à la 3D,
le sujet me paraissait naturel.<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Dans ce salon professionnel, certes un peu petit, la 3D était à la fête de
la maquette d'un Airbus A380 au catalogue de pièce 3D d'un moteur, en passant
par des prototypes d'hélicoptère sur iPad<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Le sujet du jour sera donc le viewer Cortona 3D sur iPad, un simple plus
moins permettra de se faire une idée du produit, en tout cas ce que nous
pouvons en attendre à ce jour :<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><b><i>J'aime : </i></b><o:p></o:p></span></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: inherit;">Ergonomie<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: inherit;">L'ergonomie du produit est
très étudiée, sur un style épuré, rien n'est en trop.<o:p></o:p></span></li>
</ul>
<li class="MsoNormal"><span style="font-family: inherit;">Utilisation<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: inherit;">L'utilisation en devient
simple et intuitive de part l'ergonomie du produit. En 30s montre en main
il est facile d'utiliser le produit<o:p></o:p></span></li>
</ul>
<li class="MsoNormal"><span style="font-family: inherit;">L'ouverture<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: inherit;">Il est facile d'importer des
animations faites avec les outils de dessin de Cortona dans le viewer
iPad. Cette fonctionnalité n'est disponible que dans la version payante<o:p></o:p></span></li>
</ul>
</ul>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><b><i>Je n’aime pas : </i></b><o:p></o:p></span></div>
<ul type="disc">
<li class="MsoNormal"><span style="font-family: inherit;">Ergonomie<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: inherit;">Les couleurs de l'arborescence
de pièces sont en peu trop "flashi"<o:p></o:p></span></li>
</ul>
<li class="MsoNormal"><span style="font-family: inherit;">Utilisation<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: inherit;">Dépendant des nouveaux modes
d'utilisation des tablettes, à savoir, n'afficher qu'une seule info à
l'instant t, il est indispensable d'éviter les "taps" (click
sur PC), aussi, le passage du tableau de nomenclature à la vue 3D, vis et
versa, ainsi que le passage à la vue 2D est "lourd". Il est en
effet nécessaire de "taper" sur un menu, pour avoir une liste
déroulante, puis choisir sa vue. Il me semble qu'une icône parlante pour
chaque vue, ou l'utilisation de mouvements multipoints auraient pu être
utilisées.<o:p></o:p></span></li>
</ul>
<li class="MsoNormal"><span style="font-family: inherit;">L'ouverture<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal"><span style="font-family: inherit;">C'est là que le bât blesse,
pour le moment. En effet, Cortona viewer iPad est à l'image de ce
qu'était Acrobat Reader d'Adobe au moment de sa diffusion, c'est à dire
un viewer. Il ne peut être intégré à une application "app"
tablette de plus haut niveau. Le SDK Apple est attendu avec impatiente
pour pouvoir intégrer le viewer 3D dans une application "designée"
pour les clients. (sortie théorique fin février...)<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: inherit;">A quand la version sous Android ?</span></li>
</ul>
</ul>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><b><i>Résumé :</i></b><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Il s'agit d'un très bon produit qui s'oriente parfaitement dans une
stratégie industrielle cohérente avec la version PC, là où certains concurrents
ont une stratégie produit différente entre la version PC plutôt pro et la
version iPad plutôt communautaire. </span></div>
<div class="MsoNormal">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal">
<div style="text-align: center;">
<o:p><b><i><span style="font-family: inherit;">Les liens : </span></i></b></o:p></div>
</div>
<div class="MsoNormal">
<div style="text-align: center;">
<o:p><span style="font-family: inherit;"><a href="http://www.cortona3d.com/Products/Viewer/Cortona3D-Viewer-for-iOS.aspx">http://www.cortona3d.com/Products/Viewer/Cortona3D-Viewer-for-iOS.aspx</a>
</span></o:p></div>
</div>
<div class="MsoNormal">
<br /></div>
</div>
</div>Pierre Lebaillyhttp://www.blogger.com/profile/00463405209340303027noreply@blogger.com0tag:blogger.com,1999:blog-2040040368352656914.post-3148890747967365532012-02-06T09:14:00.002-08:002012-02-17T00:34:34.091-08:00Introduction<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: inherit;">Nombre d'enseignants ou de politicien finissent leur carrière par l'écriture d'un livre. Ils y racontent soit leur vie professionnelle et partagent ainsi leurs émotions, leurs sentiments, voire un regard personnel sur autrui...</span><br />
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;">Et bien il n'est pas l'heure pour moi de "finir" ma carrière par l''écriture d'un livre, mais il est temps de "partager"</span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;">Partager quoi ? Oh, il ne s'agit pas de partager ma vie professionnelle, car bien que très riche, je ne suis pas certain de vous intéresser...</span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;">Je vais donc partager avec vous un certain mes émotions, mes sentiments sur un bon nombre de sujets. Sujets qui seront toujours proches de mon violon-ding : l'informatique...</span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;">Non je ne parlerai pas de la dernière version du SDK Java, n'y de celle de PHP, mais plutôt des nouveautés, concept, produits, qui peuvent modifier vos habitudes dans vos vies professionnelles ou personnelles.</span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;">Un genre de "pot pourri"...</span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;">Bonne lecture....</span></div>
</div>
</div>Pierre Lebaillyhttp://www.blogger.com/profile/00463405209340303027noreply@blogger.com0