vendredi 21 janvier 2011

Comment stimuler sa créativité

Rendez vous compte qu'hier soir j'ai eu une illumination, et oui ! Alors que ma créativité est au plus bas dans cette période de stress professionnel, j'ai réussi à la retrouver, elle qui était si présente jadis. Bon je vous vois enjoué, j'en fais surement un peut trop. N'empêche que voici une astuce qui saura surement trouver son public.

Tout d'abords c'est assez rageant lorsque l'on fait un métier créatif de voir que l'on a pas toujours la maitrise de notre créativité. Elle vient au grès du vent ou de son bon vouloir. Le processus créatif est quelque chose qui nous échappe. Ce n'est pas une compétence facile à apprivoiser et elle ne répond pas toujours aux mêmes logiques que la connaissances. Bref on ne sort pas une idée comme on sort une citation de Baudelaire :)

Le processus créatif repose dans le subconscient ( je ne suis pas expert, mais si il y en a un ici qu'ils s'expriment ). On peut essayer de former une idée à partir de concepts que nous avons déjà aperçu et en touillant bien fort pour voir ce qu'il en ressort. Pour ma part il s'agit bien (trop) souvent d'idées chimériques.  Bref le processus normal de créativité est un peu comme une roulette russe, on ne sait jamais sur quoi l'on va tomber, des bonnes idées, des mauvaises, des clones d'autres idées.

Alors ou je veux en venir ?  Et bien, si la créativité est de l'ordre de l'inconscient, alors il faut aller chercher ses idées... dans l'inconscience. Qu'est ce que cela veut dire ? Non, je ne vous inciterai pas à vous rendre ivre, ni même de travailler sous exta. Je me veux le promoteur d'une méthode plus douce : le sommeil.

Ou plutôt l'avant sommeil, parce que une fois que l'on dors on est bien loin de nos soucis de travail ^^ Cette phase ou l'on se sent partir est l'instant clé. C'est le moment ou votre pensée laisse inconsciemment place à une réalité que vous avez imaginé. Essayer pendant cet instant de lutter, de vous raccrocher à la réalité et pensez à l'idée en question que vous aimeriez avoir. Jamais vos idées ne vous auront parut si apparente, si accessible, et même si crédible. Et elles le sont ! Si vous n'y parvenez pas directement, pensez au contexte, imaginez les éléments qui gravitent autours puis attaquez vous à ce que vous devez créer. Vous verrez que dans votre imaginaire cette part inexistante dans le réel l'est dans votre subconscient. Prenez toujours de quoi noter à proximité de votre oreiller, un bloc note, pour ma part mon iphone fait bien l'affaire même si je sais qu'a terme il m'aura grillé le cerveau.

Alors oui, c'est la tout le secret. Tout ça pour ça ? Me direz vous. Tentez l'expérience et vous verrez que ce simple principe a de la valeur. N'hésitez pas à me faire vos retours, à me traiter de charlatan si vous le souhaitez ^^ Je vous souhaites à tous de bonne séances de sommeil créatif.

lundi 17 janvier 2011

Animer un décor avec un travelling en html et javascript (jquery)

Vous avez déjà pensé à réaliser un travelling pour votre site, mais l'idée vous à paru trop complexe, trop gourmande en ressource, ou bien vous vous sentiez obligé de passer par flash? Que néni ! Réaliser un travelling en plein écran c'est facile ! Et cela se prête à plein d'utilisations possible. Que ce soit comme animation d'arrière plan, ou dans le cadre d'une interactivité poussée, il est aujourd'hui aisée de faire un travelling avec Javascript.

J'utilise personnellement la librairie Jquery, qui permet d'animer des éléments du DOM avec une simplicité déconcertante. Mais alors, comment fait on ? C'est le sujet de ce micro tutoriel.

Pour bien faire il faut créer une structure basique pour son site avec quelques balises div. Les div sont des conteneurs qui par défaut se positionnent les un en dessous des autres. Ici il n'est point question de se prendre la tête avec le placement de ces div. Il n'y en a que deux ! Le premier div est en fait un conteneur global, c'est à l'intérieur de celui-ci que va se produire l'animation du travelling. Son rôle est de créer une zone de visibilité (ici égale a la taille totale de la fenêtre).
Voici son style css : 

position:absolute; /* le bloc aura une position fixe */
width:100%; /* il occupera toute la largeur de la fenêtre*/
height:100%; /* ainsi que toute sa hauteur */
overflow:hidden; /* tout ce qui dépassera les dimension de la fenêtre sera masqué, et il n'y aura pas d'ascenseur */

A l'intérieur nous y trouverons un autre div, celui qui contiendra directement l'image de background. C'est ce div qui sera animé et qui donnera l'impression de travelling.
style css : 

position: relative /* nécessaire pour que l'animation fonctionne */

A l'intérieur de ce div, nous insérerons notre image, avec la balise img. L'image que vous placerez devra avoir une longueur conséquente (la mienne fait 2560 de long soit le double de ma largeur d'écran).

Voila rien de plus pour les éléments, si on récapitule nous avons 2 blocs et une image. Chacun étant imbriqué dans l'autre ce qui nous donne quelque chose comme ceci : 

div
div
img
/div
/div

Voila, je vous conseille également de mettre ce style à votre body{
margin:0;
padding:0;
}
Cela évitera qu'il y ai des bordures noires sur les cotés de votre navigateur.



Maintenant place à l'animation !

L'animation va se faire grâce à un tout petit script Jquery. Je vous conseille de jeter un coup d'oeil à cette librairie javascript qui recèle de petites astuces bien sympa.

Dans un premier temps, il faut bien sur que vous télécharger le .js de jquery, et que vous le rangier bien soigneusement non loin de votre page html pour pouvoir y accéder avec la balise script type="text/javascript" src="js/jquery-1.4.4.js"

Voici ensuite le code javascript qui fera bouger votre décors ( à taper à l'intérieur de balise script bien sur ) : 

$(document).ready(function(){
jQuery.fx.interval = 20;

$('#bkgd').animate({
   left: '-=100%'
}, 2000);
});

Ahhh qu'est ce que cela veut dire (pour les non initiés ;p )

jQuery.fx.interval = 20; /* question de performances, je limite le nombre d'images par secondes à 50 img/sec (1000/20 = 50)*/

$('#bkgd').animate est la méthode qui permet d'animer en Jquery, ici nous allons demandé à notre bloc div contenant l'image, et dont la propriété id est égale à "bkgd" de translater vers la gauche, l'équivalent de la largeur de la fenêtre du navigateur : left: '-=100%' en 2 secondes.



Voilà alors bien sur, cette explication n'est que le décriptif de toute cette opération, et il se peut que vous ne réussissiez pas à faire un travelling fonctionnel avec ça, sinon c'est que vous êtes bon et tant mieux pour vous :p

Je vous invite donc à jeter un coup d'oeil aux sources, et à vous rendre compte par vous même du type de rendu que l'on peut obtenir. Bon courage

jeudi 6 janvier 2011

Informatique Client Léger, Riche ou Lourd?

A qui s'adresse cet article? Aux débutants en programmation ou ceux qui se posent la question de ce qu'est ce charabia à propos des clients léger, lourd ou je ne sais quoi...

L'informatique évolue constamment les pratiques qui en découlent aussi. Hier l'informatique ne passait que par les lignes de commandes, puis sont apparues les première interfaces graphiques qui ont décuplés le potentiel de l'outil  l'informatique. Sont apparuent avec les nouveaux usages de cet outil les notions d'ergonomie et d'esthétique. Des notions sur lesquelles je ne m'attarderai pas. En effet pour ce billet je vais plutôt aborder le coté fonctionnel de l'informatique. Au cours de la conception d'un projet informatique plusieurs notions reviennent fréquemment. Les technologies employées, les langages, et les infrastructures. C'est sur cette dernière notion que je vais m'attarder. 

On peut distinguer 3 types d'infrastructures, les clients dit "Lourds" qui sont des logiciels dont tous les services s'exécutent sur le poste client. Les clients "Riches" qui, eux s'exécutent sur le poste client mais dont une partie du fonctionnement est déporté sur un serveur distant. Et enfin les clients "Légers" qui sont eux entièrement déporté sur le serveur, l'interface n'est pas stockée sur le poste client et le rendu de l'application est généré en fonction des données qu'envoi le serveur.

Voici brièvement les 3 grands types d'infrastructures possibles. Alors, pour mon application, quel type d'infrastructure dois-je adopter? Comme vous avez pu le constater, il n'y a pas d'infrastructure surclassant les autres. Tous est affaire de besoins, et ce sont ces besoins que nous allons étudier en détails.

Le Client Lourd 

Si votre application ne nécessite pas de connexion à un serveur distant, c'est qu'à priori elle se suffit à elle même. Contrairement à un lecteur de flux RSS votre application ne nécessite pas de mise a jour fréquentes. Dans ce cas là le Client Lourd est tout indiqué. Avec le client Lourd vous aurez l'avantage de pouvoir faire une application mieux intégrée à l'OS, à condition de bien choisir son framework. Bien souvent il vous faudra choisir entre portabilité et intégration au système/ performances. Les application natives tirent mieux parti de la puissance de calcul de la machine. Qu'est ce que cela signifie? Si votre application nécessite une puissance de calcul importante, pour lire ou encoder une vidéo par exemple, ou afficher des modèles 3D, vous vous tournerez plutôt vers les librairies de votre OS. Le langage le plus utilisé dans ce cas est le C/C++. Si la puissance vous importe peu, et que la portabilité de votre application est primordiale ce sera dans ce cas peut être vers JAVA que vous vous orienteriez, quoique le couple Qt/C++ soit aussi une solution intéressante.

Autodesk Maya,  developpé en Qt/C++


Si votre application nécessite une connexion à un serveur, pour afficher du contenu en ligne, les données d'un compte bancaire, ou tout autres action qui nécessite que l'information soit centralisé sur des serveurs. Dans ce cas 2 choix s'offrent à vous : Le Client Riche et le Client Léger.

Le Client Riche

Le Client Riche est en fait un client lourd, auquel on à greffé des capacités à se connecter, à chercher de l'information sur un réseau. Cela permet d'une part de rendre l'affichage des informations dynamique, mais aussi, dans certains cas d'alléger le traitement fait sur le poste client. En effet le serveur peut exécuter des traitements à la place du poste client. Dans le traitement des données par exemple, on aura tendance à déporter des calculs sur le serveur et à n'envoyer que le résultat au poste client. Cette infrastructure à l'avantage de repousser l'obsolescence du matériel des postes client, vu qu'on leur demande moins de puissance, tout en conservant un look & feel en accord avec le système d'exploitation de la machine. De plus cela permet toujours de demander au poste client d'exécuter des calculs lourds, comme des rendus 3D, ou des animations. Le client Riche s'impose donc lorsque l'on a un besoin de connectivité et de puissance et que l'on souhaite stocker des données sur le poste client.

Reeder pour mac


Le Client Léger

Enfin le Client Léger quand à lui dispose de l'extreme avantage ( pour le concepteur et le mainteneur ) de ne rien stocker sur le poste client. Concrètement quels avantages cela apporte t'il ? Simplement dans la question des mises à jours de l'application cela est un énorme avantage. En effet la mise a jour se fait de manière totalement transparente, vu que l'interface est téléchargée depuis le serveur à chaque lancement. Le client léger s'impose donc lorsque l'on a la nécessité de mettre à jours fréquemment l'application, tant dans son fond, que dans sa forme. Le désavantage de cette solution est que pour l'instant les composants de l'application ne permettent pas d'obtenir les mêmes rendus que les composants natifs du poste client. Du moins on est limité aux capacité du web ou des frameworks RIA. Le plus souvent, l'application est isolée dans une fenêtre de navigateur, mais certaines solution, comme Adobe Air permettent d'obtenir une application indépendante du navigateur et plus ou moins "maquillée" comme une application native.

De nombreux frameworks existent pour faire du client léger, je ne vous citerai que GWT (Google Web Toolkit, permet de créer des interfaces renduent en HTML en codant en JAVA) et Adobe Flex ( Détournement de la technologie Flash pour faire des interfaces en ligne avec une intégration de la vidéo et des animations que le HTML ne permet pas ). Vu que le client léger n'a pas accès aux données du poste client par mesure de sécurité ( ce que l'on appelle "sandbox" ), il n'est pas possible de stocker directement ou de lire des informations en local. Tous est déporté sur le serveur. Il existe grâce à Air un moyen de porter des applications créées avec les technologies du web sur le poste client. On peut ainsi repousser ces limites du clients léger en stockant en local, mais au final on perd l'intérêt du client léger pour revenir vers du client riche. Enfin il vous reste l'option de passer par la méthode traditionnelle, à savoir le HTML + CSS + Javascript, qui permet elle aussi de créer des applications (certes de moindre importance, car le type de code ne permet pas une bonne maintenance sur les gros projets),  à la manière d'un site web.

Application faite avec Ext-GWT

Pour faire le point voici une infographie très parlante de Camille Roux permettant de faire le point sur les différentes technologies en matière d'interfaces selon l'axe que nous avons abordé.



J'espère qu'au final ce billet aura éclairé vos lanternes. Je pense dans un futur plus ou moins certain me pencher sur la création d'un article ou je détaillerai les différentes technologies pour chacune de ces infrastructures. N'hésitez pas à laisser vos avis si vous pensez que je me suis lamentablement gouré sur un point ^^ Bonne continuation.