Choose your language / Traduction.

Chercher / Search this Blog.

samedi 16 août 2008

Quelques jours de vacances...

Bonjour chers amis :)
Vous avez du remarquer que le blog était en sommeil depuis quelques jours. J'aurais du vous en avertir. En fait, j'étais à Londres et je pensais réellement pouvoir accéder plus systématiquement à des ordinateurs pour continuer succinctement le suivi du blog. Malheureusement, ce ne fut pas le cas. Par ailleurs je dois partir encore quelques temps en Bretagne d'où le suivi ne devrait pas être meilleur (et le compteur de visites s'en ressent...). Mais bon, c'est ainsi! Par contre, pas d'inquiétude. Dès mon retour sur Paris je continuerai et amplifierai le blog autant que possible avec peut-être, j'ai bien dit peut-être... quelques surprises :) En attendant bonnes vacances (pour ce qu'il en reste) à tous et à très bientôt.

vendredi 8 août 2008

Test PC : Montjoie ! Le jeu de stratégie médiéval.


AVERTISSEMENT
: si vous êtes du genre à privilégier les belles images et les belles musiques au plaisir de jeu, changez de site ! Viiite. Ici, apanage (peut-être...) de la quarantaine assumée et de l'expérience associée, seul compte le fun. Quand bien même l'emballage ne suit pas... Bien entendu, quand le mariage du fun, des belles images et des belles musiques est là, c'est tant mieux et nous ne manquerons pas de le souligner. Par ailleurs, les test de Gen68 sont constamment "en devenir". Le test du jeu ne paraît que lorsque je considère avoir quelque chose à en dire. Mais rien n'interdit de progresser dans son jugement, d'apercevoir des choses auparavant inaperçues, de trouver ultérieurement des erreurs grossières jusque là bien cachées et je ne sais quoi d'autre... Tous les articles seront par conséquent édités plusieurs fois. Ça aussi ce doit être l'apanage de la quarantaine !

montjoieL’apanage de la quarantaine n’est pas uniquement d’appréhender les faiblesses ou les qualités d’un jeu différemment d’un jeune blanc bec (!) C’est aussi de savoir repérer les bijoux qui passent inaperçus ou presque. Aujourd’hui, je teste pour vous le jeu de stratégie Montjoie!. Il s’agit de l’adaptation sur PC d’un jeu de plateau paru en 1998 et bien connu des aficionados des soirées arrosées autour de tables couvertes de pions. L’équipe qui a développé le jeu de plateau à compris qu’il n’était pas possible (ni pratique) au commun des mortels de réunir régulièrement des joueurs. Elle a donc pensé à en développer une version informatique, en tout point semblable. Elle a le mérite d’autoriser les joutes contre une intelligence artificielle de premier plan et dont votre serviteur fait constamment les frais (même s’il est vrai que je suis une lamentable quiche en stratégie, mais ce n’est pas faute de l’aimer la stratégie!). Le jeu est distribué par la très sympathique équipe d’AGEOD. Cette dernière est reconnue pour deux principales raisons: premièrement, elle est spécialisée en wargames de haut-vol. Deuxièmement, c’est une société qui pratique un art aujourd’hui disparu dans le milieu du jeu vidéo. Attention, ouvrez bien vos esgourdes… AGEOD produit et distribue des jeux … finis ! Oui, oui vous avec bien lu. Des jeux qui fonctionnent sans patch et tout et tout. Les patchs périodiques ne sont là que pour améliorer le produit et y ajouter des fonctionnalités supplémentaires.

En quoi consiste Montjoie! ? Cette adaptation PC fonctionne en tout point de la même façon que l’original… sauf que vous buvez seul (hic)! Vous êtes face à un plateau de jeu représentant la France de la guerre de 100 ans. Elle est découpée en régions, elles-mêmes composées de villes reliées par des routes. On voit même sur le coté du plateau la pioche et la dépose des cartes déjà jouées! Votre but est simple. En tant que représentant d’une « nation » d’alors (on parlera de factions tellement elles sont petites), vous devez réunir le plus de régions possibles sous votre drapeau afin de gagner des points de prétendant justement destinés à prétendre à la souveraineté de ces territoires. Je ne parle sciemment pas de la France. Car s’il est logique que ce soit le petit royaume de France qui s’étende sur les régions, conformément au cours de l’histoire (sinon nous ne serions pas là), on peut tout à fait aller au rebours de cette dernière et jouer la victoire d’une autre faction. Les factions jouables sont la France, la Flandre, l’Angleterre, la Bretagne, la Navarre et la Bourgogne. La faction élue décidera subséquemment du niveau de jeu. Il est beaucoup plus facile de gagner avec la dotation initiale en terres du petit royaume de France qu’avec celle de la Navarre par exemple.

La ressemblance de Montjoie! PC avec Montjoie! plateau n’est pas seulement formelle. Le mécanisme du jeu est exactement le même. Au tout début, il vous est proposé de jouer des scénarii historiques, avec des règles propres légèrement différentes d’un scénario à l’autre, retraçant certains passages mémorables de la guerre de cent ans. Autre option, jouer en mode libre des variantes plus ou moins étendues du jeu de base. Pour ma part, j’ai basé ce test sur la version extrême du jeu qui est la plus complète. Elle démontre le mieux les caractéristiques du jeu car elle ajoute au jeu de base une phase de diplomatie ainsi qu’un simili mode « éliminateur » à la Burnout (!) où le dernier joueur de chaque tour est successivement éliminé.
Le jeu se joue par tours de jeu et chaque tour se décline en 10 phases consécutives. Une fois le tour terminé, toutes les phases recommencent dans le même ordre et ainsi de suite jusqu’à la fin du jeu au bout d’un nombre de tours prédéfini selon le scénario.

Une fois vos territoires initiaux établis (le jeu vous laisse une certaine flexibilité ) commence alors la succession des phases :

Phase 1 : levée d’impôt ou gain d’or. Chaque région détenue vous apporte de l’or en fonction des constructions que vous y aurez préalablement établies dans les tours précédents. Une simple garnison rapporte moins qu’un château qui lui-même rapporte moins qu’une forteresse. Châteaux et forteresses ne sont donc pas exclusivement construits à des fins défensives mais également à des fins pécuniaires. Gardez cela en tête car, encore une fois, Montjoie! est un bien fameux jeu de stratégie…

Phase 2 : diplomatie. Phase propre à la version extrême, elle permet soit d’acheter des votes auprès des autres factions, pour favoriser guerre ou paix dans la phase ultérieure de détermination du choix politique, soit d’inciter à l’attaque d’une ville en y posant une prime, soit enfin de proposer des alliances avec les autres factions, en proposant une prime qui ne sera touchée qu’en cas de respect de l’alliance, en fin de tour.

Phase 3 : détermination du choix politique. En d’autres termes, il faut y choisir la paix ou la guerre. C’est la majorité qui l’emporte d’où l’importance de pouvoir acheter des votes… En cas de paix, chaque faction ne reçoit que quatre cartes « de combats » et n’a droit qu’à une attaque contre les autres factions. En cas de guerre, le nombre de carte monte à 6 et le nombre d’attaques peut-être plus important en fonction d’autres critères.

Phase 4 : distributions des cartes. Chaque faction reçoit le nombre de cartes correspondant au choix politique majoritaire. Il n’est pas possible de décrire exhaustivement toutes les cartes du jeu dans le cadre de cet article mais retenez qu’elles sont de plusieurs sortes: cartes d’attaque ou de défenses, cartes spéciales qui permettent les coups fourrés et cartes d’influence qui permettent de se sortir des situations les plus tendues et que vous touchez en fonction de vos acquisitions territoriales et vos gains en or.

Phases 5 : achat de cartes et de construction. C’est ici qu’il faut utiliser le plus malicieusement la dotation en or dont vous disposez. Vous pouvez acheter des cartes pour compléter une dotation de base défaillante. Vous pouvez également transformer garnisons en châteaux et/ou châteaux en forteresses afin d’en augmenter la valeur défensive mais aussi, nous l’avons vu, les gains futurs.

Phase 6 : nouvel ordre des factions. Montjoie! est un jeu où l’ordre de jeu influe considérablement sur le cours des évènements. Il peut être intéressant d’être le premier à jouer pour bénéficier, par exemple, des événements aléatoires (cf. ci-dessous). Mais il peut aussi être profitable de jouer en dernier pour bénéficier de l’information sur les cartes restantes des autres factions (qui apparaît à l’écran) et jouer en conséquence. Cette phase permet de tirer l’ordre de jeu des factions de manière aléatoire, sachant que jamais une même faction ne commence deux tours de jeu consécutifs.

Phase 7 : événements aléatoires. Le jeu gère dix événements aléatoires en rapport avec l’époque pour favoriser le cas échéant la première faction du tour (exemple de la rétrocession ou de l’intervention du pape) ou, au contraire, pour pénaliser l’ensemble des joueurs (la peste!)

Phase 8 : allégeance des villes ennemies. Au début du jeu chaque faction « dispose » autour d’elle de plusieurs villes libres qu’elle peut rattacher gratuitement à sa faction, pourvu qu’elles soient reliées à vos villes par une route. C’est un moyen simple et pacifique de gagner du territoire. Attention, avec l’avancée du jeu les villes libres se font plus rares sauf quand le processus « éliminateur » se met en branle: toutes les garnisons, châteaux et forteresses des factions éliminées redeviennent libres.

Phase 9 : conquête des villes ennemies. C’est la phase majeure du jeu, mais pas forcément la plus stratégique. Ici, en fonction du choix politique et de certains autres critères, vous disposez d’un certain nombre d’attaques. Une fois une cible choisie, la manœuvre est toujours la même. Si vous êtes attaquant, vous choisissez deux cartes d’attaque. Si vous êtes défenseur, une seule. Car la deuxième est simulée par la valeur défensive de votre garnison, château ou forteresse attaquée. Dans les deux cas, vous pouvez y ajouter des cartes spéciales comme la carte « ingénieur » qui sape l’attaque ou la défense adverse. En confrontant la somme des cartes des deux cotés (points de base), on a une première idée du rapport de force. Mais c’est ici que le hasard joue son rôle. Chaque joueur tire un dé dont le tirage vient s’ajouter aux points de base. C’est celui qui a la somme cumulée la plus importante qui gagne, sauf que… vous pouvez, au dernier moment, jouer une carte qui va modifier la donne: un point d’influence, une carte « doigt de Dieu » qui multiplie par deux votre cumule de point etc. etc. Bref rien n’est joué jusqu’à la fin. Si vous avec perdu la bataille, vos cartes jouées sont gaspillées sauf à jouer une carte « retrait ». Attention donc aux attaques à venir des autres factions. Si vous avez gagné, vous récupérez vos cartes, qui ne peuvent cependant plus être jouées qu’en défense. Subtil n’est-ce pas? Et encore, je passe les cartes ambassadeurs et écorcheurs, qui mériteraient un article à elles toutes seules!

Phase 10 : gain de points de prétendant. Une fois toutes les escarmouches et autres batailles jouées, chaque faction se retrouve avec un certain nombre de régions complètes (C’est à dire dont on dispose de toutes les villes qui la composent). L’ordinateur fait le décompte de ces régions, tient compte des régions bonus (certaines régions comme Paris ou Calais sont historiquement de première importance et ceux qui les possèdent peuvent toucher de 1 à 2 points de prétendant supplémentaires pour la région) et cumule vos points de prétendant pour le tour avec les points précédents.

Cette dernière phase complétée, on revient à la première (impôt et gain d’or) dont le calcul se fait en tenant compte de la nouvelle donne en régions, garnisons, châteaux et forteresses. Et les phases se poursuivent à nouveaux… etc. etc. A la fin d’un nombre de tours prédéfinis (10 dans la variante extrême) c’est le dépositaire du plus grand nombre de points de prétendants qui gagne.

Tout dans le jeu est fait pour que le joueur sache constamment où il en est par rapport aux autres factions. L’interface, calquée sans doute sur le plateau du jeu, est un exemple de clarté. On prend plaisir à découvrir progressivement comment utiliser telle ou telle information de l’interface pour arriver à vaincre (j’ai mis un certain temps hum… pour comprendre l’importance de l’indication du nombre de cartes de chaque faction par exemple). Plusieurs vitesses de jeu vous sont proposées également. Les débutants pourront mettre sur lent le temps de comprendre comment jouent les autres factions, avant de passer en rapide quand ils auront compris les arcanes du jeu et que c’est à l’ordinateur de jouer.

Mais là où l’effort est vraiment louable, c’est que les concepteurs ont ajouté à tout cela une aide en ligne contextuelle performante. Mais aussi une véritable base de données historiques, extrêmement complète, qui recense tous les évènements et personnages du jeu. On a même droit à une frise chronologique qui matérialise le contexte historique de chaque scénario. Du grand art ! Bref, Montjoie! est non seulement un jeu vraiment profond, fun et addictif mais aussi une véritable leçon d’histoire pour qui fouillera un peu la base de données. Montjoie! est-il au jeu vidéo ce que les « Rois maudits » sont à la littérature ? Disons que le parallèle n’est pas complètement absurde…

Car il y a tout de même un « mais »… Vous souvenez-vous qu’AGEOD, qui distribue le jeu, se fait un point d’honneur de ne distribuer que des produits finis ? Je vous rassure c’est amplement le cas en ce qui concerne Montjoie!. On peut noter quelques petits bugs de temps à autre mais rien que de normal et surtout rien de rédhibitoire. Certains sur les forums spécialisés, se sont fait un plaisir d’en dénicher tous les problèmes mais en ce qui me concerne, les seuls auxquels j’ai été confronté ont eu lieu en multijoueurs. Car il y a un excellent multijoueurs sur Montjoie! qui fonctionne très bien. Pas la peine de s’étendre. Il faut juste trouver des partenaires et ça n’a rien de simple compte tenu de la petitesse de la communauté.

Le problème n’est pas là. Il résiderait plutôt dans le fait que l’équipe qui développe le jeu est… amateur! Et oui cela peut sembler incroyable lorsque l’on voit la qualité du produit mais Pascal Bernard, game designer du petit studio Tchounga Games à l’origine de Montjoie!, ne travaille qu’avec un graphiste et un programmeur. C’est ce qui explique les difficultés du studio à suivre Montjoie! comme le ferait un grand studio professionnel. Néanmoins, ce type de structure réduite compense un suivi à la fréquence aléatoire par un produit entièrement fonctionnel à sa sortie ce qui, encore une fois, devient rare. Sachant que l’équipe travaille dors et déjà sur une version PC de la suite de Montjoie!, Renaissance (dont le titre dit l’essentiel à lui tout seul) on peut espérer que les ajouts de cette nouvelle version du moteur seront transposés sous forme de patchs additifs (et non correctifs) à Montjoie ! Toujours est-il que Montjoie! est un produit fini, parfaitement jouable, fruit du travail d’une équipe de passionnés et dont le suivi est assuré par ces même passionnés. Et ça, ça mérite le plus grand respect!

Les plus :
  • Jeu de statégie profonde.
  • Interface vraiment très propre.
  • Musique bien choisies.
  • Très instructif.
  • Se joue en une heure ou deux.
  • Pas besoin d'adversaires vu la qualité de l'IA.
  • Il y a quand même un mutlijoueurs au cas où...
  • Peu de bugs, enfin beaucoup moins que la grande majorité des jeux.
  • Il y a une démo ici.
Les moins :
  • Peu de joueurs pour le multijoueurs.
  • Uniquement téléchargeable ici.
  • bof... autre chose? Je crois pas!
La note Gén68 (Pouët Pouëëëët... ) : 9/10

Si cet article vous a plu ou vous a apporté quelque chose, ou au contraire si vous ne l'avez pas apprécié et que son contenu puisse être complété, merci de laisser un commentaire. C'est par l'intermédiaire de vos interventions que ce blog s'améliorera.

jeudi 7 août 2008

Appel à la population...


En ces temps de jeux olympiques, où il est bien connu que l'important est de participer, et afin d'achalander le blog Génération 68 et jeux Vidéo, je propose aux personnes intéressées de faire paraître leurs tests ou autres articles concernant les jeux vidéo ou Blogger sur http://generation68.blogspot.com/.
En effet, je ne peux me permettre de tester seul une myriade de jeux. Je me les paie moi même et ma bourse est loin d'être sans fond. Ce serait même l'inverse :) Par ailleurs, je ne peux pas non plus proposer un éventail de tutoriels Blogger suffisant seul.
Bien entendu, il va sans dire que l'article sera à votre nom ou pseudo, votre adresse mail ou votre url site / blog le cas échéant. Bref, il ne fera aucun doute que l'article sera votre.
Par contre, je précise que je tiens tout de même à une certaine tenue formelle des articles. Ça c'est ma part de boulot. Mais elle implique que je doive relire et éventuellement modifier votre article original pour l'uniformiser au titre. A partir de là, soit vous me faite confiance, soit vous avez droit à un retour de l'article modifié avant parution. C'est selon.
Les articles en anglais sont acceptés pourvu que je me sente capable de les traduire.
English written reviews are accepted as long as I m able to translate it.
Apprentis testeurs, pamphlétaires, amoureux "casual" ou "hardgamer" de jeux vidéo et tous les autres, soyez les bienvenus.
Pour proposer votre participation, il vous suffit de laisser un commentaire à cet article.

Tutoriel : ajout d'une section dans un entête, mise en oeuvre.


Au fur et à mesure de la construction de ce blog, je me propose, à l'aide de quelques didacticiels, de vous faire partager la façon dont j'ai procédé pour le concevoir.
  
Aujourd'hui je vous propose la mise en pratique de mon tutoriel sur le partage de l'entête. Ça tombe bien car vous avez du remarquer qu'il était légèrement ardu... Je vais donc essayer de simplifier les choses en créant, pas à pas avec vous, une nouvelle section dans mon entête. En effet, rappelez-vous. Après avoir crée ma bannière, je me suis rendu compte qu'il me restait de la place en hauteur pour une section supplémentaire dans mon entête. Comme j'ai supprimé ma navbar (si vous voulez savoir comment, direction commentaire), les visiteurs de mon blog n'ont plus la possibilité de faire de recherche. La boucle est bouclée! Je vais mettre un lien de recherche dans ma nouvelle section. (Merci à Rodney et Amanda pour la partie sur le widget Lien de recherche).

Etape 1) Entrez dans l'administration de votre site (identifiant, mot de passe), puis cliquer sur l'onglet "Modifier le code HMTL" pour entrer dans le code du modèle de votre blog. Encore une fois, avant toute modification, il vaut mieux sauver votre modèle initial comme je vous l'ai déjà indiqué ici. Une fois la sauvegarde effectuée, chercher le code suivant :   

 <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Génération 68 et Jeux Vidéo (en-tête)' type='Header'/>
</b:section>
<div id='header-right'>
<b:section class='header' id='header-right-top' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
</b:section>
</div>
<div id='header-right-bottom'>
<b:section class='header' id='header-right-bottom-section' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Choose your language / Traduction.' type='HTML'/>
</b:section>
</div>
</div>

Comme nous l'avons déjà vu, il s'agit du code qui créé effectivement nos sections. J'ai isolé en orange le code qui fabrique la section où se trouve mon widget Google traduction (regardez mon entête pour le visualiser). Comme le lien de recherche est aussi un widget, je vais simplement copier cette partie de code et la coller juste avant la dernière balise </div> avant de la modifier comme suit:

<div id='header-right-down'>
<b:section class='header' id='header-right-down-section'showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='Chercher / Search this Blog.' type='HTML'/>
</b:section>
</div>    

J'ai tout d'abord modifié le nom de la section bien sûr de 'header-right-bottom' à 'header-right-down'. Dans un deuxième temps, j'ai changé son identifiant de 'header-right-bottom-section' à 'header-right-down-section'. Il faut ensuite changer l'identifiant du widget que l'on y mettra de HTML1 (identifiant du widget traducteur) à HTML2 (identifiant du widget recherche que nous allons créer ultérieurement). Enfin, on laisse bien entendu le type à HTML, puisque nous allons y mettre aussi du code HTML  pour définir le widget Lien de recherche.

Etape 2) Maintenant que nous avons créé notre nouvelle section (nom: header-right-down, identifiant: header-right-down-section), il faut coder son aspect. En ce qui me concerne, je veux que ma section Lien de recherche apparaisse exactement de la même façon que mes deux autres sections. C'est à dire sur fond orange avec un liseré orange clair. Là encore, je vais faire un simple "copier" d'un code précédent et le coller avec quelques modifications:

cherchez le code:

#header-right-bottom-section {
padding: 0 5px 10px;
}

#header-right-bottom {
width: 40%;
height: 116px%;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}

#header-right-bottom ul {
margin: 0;
padding: 5px;
}

#header-right-bottom ul li {
display: inline;
padding: 5px;
}
... copier / coller le juste en dessous puis remplacez-y tous les bottom par down (ou ce que vous aurez choisi bien sûr):

#header-right-down-section {
padding: 0 5px 10px;
}

#header-right-down {
width: 40%;
height: 116px%;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}

#header-right-down ul {
margin: 0;
padding: 5px;
}

#header-right-down ul li {
display: inline;
padding: 5px;
}


Enregistrez votre modèle et le tour est joué. La troisième section figure bien avec le même formatage que les précédentes. Par soucis d'uniformité, j'ai disposé mes trois sections, qui sont l'une sur l'autre à droite de ma bannière, de manière à ce qu'elles recouvrent verticalement l'intégralité de la hauteur de ma bannière. Celle-ci fait 350 pixels de haut. J'ai donc paramétré chaque section à 116 pixels de hauteur (350/3). Blogger se débrouille tout seul pour ajuster le tout et je suis assez satisfait du résultat. Dorénavant, il ne me reste plus qu'à travailler les couleurs de cet entête et j'en aurais fini au moins partiellement.
Si cet article vous a plu ou vous a apporté quelque chose, ou au contraire si vous ne l'avez pas apprécié et que son contenu puisse être complété, merci de laisser un commentaire. C'est par l'intermédiaire de vos interventions que ce blog s'améliorera.

mardi 5 août 2008

Tutoriel : aligner des widgets avec une table.



Au fur et à mesure de la construction de ce blog, je me propose, à l'aide de quelques didacticiels, de vous faire partager la façon dont j'ai procédé pour le concevoir.


Dans un article précédent, je vous parlais de la façon de partager un entête pour y inclure, entre autres choses, des widgets. Entre temps, j'ai été confronté à un nouveau problème. Il s'est avéré que je ne voulais pas mettre dans chaque section un seul mais bien plusieurs widgets. Or, sans précaution c'est à dire en copiant / collant simplement les codes des widgets l'un après l'autre, on s'aperçoit qu'ils apparaissent l'un au-dessus de l'autre au lieu de profiter de l'espace horizontal offert par les sections crées.Voici ce que ça donnait concrètement:




Bien évidemment il n'y a rien de satisfaisant dans cette mauvaise occupation de l'espace. J'ai donc cherché une solution pour aligner les widgets. Celle que j'ai trouvé consiste simplement à créer une table HTML. En voici le code:
 <table>
<tbody>
<tr>
<td>
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=fr&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js"></script>
</td>

<td>
<a href="http://technorati.com/faves?sub=addfavbtn&amp;add=http://generation68.blogspot.com"><img alt="Add to Technorati Favorites" src="http://static.technorati.com/pix/fave/tech-fav-1.png"/></a>
</td>

<td>
<script language="JavaScript" src="http://www.blogcatalog.com/rate-button.js.php?id=4442672" type="text/javascript"></script>

<noscript><a href="http://www.blogcatalog.com" title="Blog Directory, Find A Blog, Submit A Blog, Search For The Best Blogs"><br/>Blog Catalog Blog Directory<br/></a></noscript>
</td>
</tr>
</tbody>
</table>


Je vous ai indiqué en orange le code de la table elle-même, et en jaune vif le code de mes widgets. Il vous suffit donc de remplacer ces derniers par les codes des widgets qui vous intéressent plus directement. Attention à ne pas oublier la balise <tbody></tbody>. C'est l'erreur que j'ai faite avec pour conséquence un affichage défectueux, et j'ai malheureusement mis du temps à le comprendre. Avec l'espoir que ce petit truc vous serve :) 


Si cet article vous a plu ou vous a apporté quelque chose, ou au contraire si vous ne l'avez pas apprécié et que son contenu puisse être complété, merci de laisser un commentaire. C'est par l'intermédiaire de vos interventions que ce blog s'améliorera.

dimanche 3 août 2008

Génération68 et Jeux Vidéo: la bannière enfin là! Donnez votre avis.





engrenage
Vous l'avez sans doute déjà remarqué étant donné que c'est un peu le but de la manœuvre, j'ai passé mon samedi après midi à fabriquer avec mon vieux Painter 5 la bannière du haut. J'ai besoin de votre avis. Non pas pour la modifier complètement car je n'en aurais pas le courage dans l'immédiat, mais sur les quelques éléments y figurant, la façon dont ils apparaissent etc. etc. Bon je rigole un peu là, car si vous la détestez, il faut me le dire aussi. Si je me rend compte que c'est général, il faudra bien que je fasse quelque chose !!!
Une chose intéressante tout de même. Suite à une négligence de ma part, vous remarquerez que la bannière dépasse très largement en hauteur les deux widgets de droite. Il me reste donc une place juste en dessous du widget Google traduction. J'en profiterai certainement pour ajouter une nouvelle section comme dans le tutoriel précédent dans lequel je mettrai sans doute le widget de recherche vu que j'ai fait disparaître la navbar où l'option figurait d'office.

Si cet article vous a plu ou vous a apporté quelque chose, ou au contraire si vous ne l'avez pas apprécié et que son contenu puisse être complété, merci de laisser un commentaire. C'est par l'intermédiaire de vos interventions que ce blog s'améliorera.

samedi 2 août 2008

Tutoriel: partager un entête pour y insérer widgets et menu.



Au fur et à mesure de la construction de ce blog, je me propose,
à l'aide de quelques didacticiels, de vous faire partager la façon dont j'ai procédé pour le concevoir.



engrenageLe pitch:
Maintenant que nous savons insérer du code HTML dans un message sans qu'il ne soit interprété inopportunément, nous allons pouvoir passer à quelque chose de beaucoup plus sérieux. Je pense que nous avons ou allons tous être confronté au problème suivant. A force de poser les uns sous les autres les widgets et autres éléments de page, on finit par être confronté à certains enjeux de visibilité. Que faut-il mettre en premier dans ce fameux "coin d'or" haut gauche, celui qui attire les yeux de nos si chers visiteurs? Les anciens articles? Les liens d'abonnement? Le widget de traduction si important pour étendre l'impact géographique du blog?... Question difficile n'est ce pas? Sans qu'elle ne représente la panacée, une première solution serait de profiter un peu plus de notre entête (ou header). En effet, plutôt que de le laisser sans autre rôle que celui d'afficher titre et description du blog, pourquoi ne pas le partitionner et y inclure les éléments de page qui nous volent une si précieuse place sur la page principale? Je tiens à souligner que je me suis très largement inspiré des articles de Blogger au bout du doigt et de Blogger Buster pour cet article. Je n'en revendique pas la paternité. Simplement, à l'usage je me suis confronté à un certain nombre de faits ou problèmes qui m'ont poussé à "entrer un peu plus dans le code" que les articles initiaux peut-être. Et je vous en propose donc ici un condensé / développé en quelque sorte.
La soluce:
Etape 1: lorsque l'on modifie le code du template dans la mesure où nous allons le faire (et même dans une moindre mesure...), il faut toujours songer à sauver le template initiale en cas de problème. Draft Blogger vous offre cette opportunité. Allez sur http://draft.blogger.com/ et dans le tableau de bord, cliquez sur "Paramètres". Dans l'onglet "Général", tout en haut une option d'exportation du blog sous format Atom vous est proposée:
outils du blog
Il suffit alors d'exporter votre blog (son flux RSS en fait) sur votre disque dur. On peut alors commencer à travailler plus sereinement...
exporter le blog


Etape 2: accédez au code HTML de votre page en cliquant sur "Tableau de bord", Mise en page", et "Modifier le code HTML". Blogger ne propose pas d'éditeur de texte digne de ce nom pour cette fenêtre. On y trouve notamment pas d'option de recherche/remplacement. Je vous suggère donc de copier l'intégralité de votre code dans Bloc-note / Notepad pour le modifier plus aisément.

Chercher maintenant le code suivant qui sera légèrement différent dans votre cas, ne serait-ce qu'en raison du titre du blog:



<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Génération 68 et Jeux Vidéo (en-tête)' type='Header'/>

</b:section>

</div>



Ce code est celui du "Header-Wrapper", c'est à dire le container de votre entête. En l'examinant quelque peu, on voit qu'il y a une balise <b:section></b:section> qui indique que, pour le moment, notre entête ne comporte qu'une seule place, une seule "section". Elle contient le titre et la description (la petite phrase juste en dessous du titre) de votre blog. Le but fondamental de notre manœuvre est de créer d'autres sections pour y insérer nos autres éléments de page.

Encore une fois et dans la mesure du possible, il faut conserver le code initial en cas de problème (on ne prend jamais trop de précaution). Mais il faut tout de même le désactiver pour ne pas qu'il entre en conflit avec le nouveau code que nous allons introduire. Le plus simple pour désactiver un code est de le transformer en commentaire. De cette manière, l'interpréteur saura qu'il ne doit pas traiter cette partie de code. En HTML, le commentaire est compris entre les "balises" <!-- et -->. Ajoutez ces balises juste devant et derrière le code précédent:



<!--
<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Génération 68 et Jeux Vidéo (en-tête)' type='Header'/>

</b:section>

</div>

-->


Etape 3: on peut maintenant inclure le code de notre container à trois emplacements. Un pour le titre te la description, deux pour les widgets. Voici le code à coller "à la place" du code précédent, c'est à dire juste au -dessous ou au-dessus puisque nous l'avons conservé en commentaire:
<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Génération 68 et Jeux Vidéo (en-tête)' type='Header'/>

</b:section>

<div id='header-right'>

<b:section class='header' id='header-right-top' showaddelement='yes'>

<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>

</b:section>

</div>

<div id='header-right-bottom'>

<b:section class='header' id='header-right-bottom-section' showaddelement='yes'>

<b:widget id='HTML1' locked='false' title='Choose your language / Traduction.' type='HTML'/>

</b:section>

</div>

</div>



A vous, bien entendu, de modifier le titre du blog. Comme convenu, on remarque que ce code crée deux sections en plus de la première. Une section "header-right" qui sera en haut à droite et une section "header-right-bottom" qui sera en bas à droite. Nous voila avec nos trois sections, juste ce qu'il nous fallait.
Etape 4: Une autre partie de code est à modifier. En ce qui me concerne, mon entête initial, très simple, ne contenait qu'un #header sans autre section. J'ai donc du chercher cette portion de code et la mettre en commentaire comme ci-dessous:
<!--

#header {

padding-top:0px;

padding-$endSide:0px;

padding-bottom:0px;

padding-$startSide:0px;

margin-top:0px;

margin-$endSide:0px;

margin-bottom:0px;

margin-$startSide:0px;

border-bottom:dotted 1px $bordercolor;

background:$descbgcolor;

}

-->


Mais en ce qui vous concerne, votre entête peut être plus élaboré. Par conséquent, vous devez faire la même manœuvre que celle du #header POUR VOS #header-wrapper et #header-inner éventuels: mettez tout en commentaire. Si on désactive une partie du code, il faut la remplacer par une autre. Voici le code à introduire que j'ai quelque peu personnalisé pour mon blog:
#header-wrapper {

width: 1200px;

border: 1px solid #000000;

margin:0 auto 10px;

border:1px solid $bordercolor;

clear: both;

word-wrap: break-word;

overflow: hidden;

background:$pagetitlebgcolor

}



#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}



#header {

width: 58%;

float: left;

margin: 5px;

border: 1px solid $pagetitlebgcolor;

text-align: center;

color:$pagetitlecolor;

}



#header-right {

width: 40%;

float: right;

border: 1px solid $bordercolor;

color: $pagetitlecolor;

margin: 5px;



}

#header-right-top {

padding: 0 5px 10px;

}



#header-right a {
 color:#000000;
}
           
a:hover {
 color:$titlecolor;
}

a img {
  border-width: 0;
}



#header-right-bottom-section {

padding: 0 5px 10px;

}



#header-right ul {

margin: 0;

padding: 5px;

}



#header-right ul li {

display: inline;

padding: 5px;

}



#header-right-bottom {

width: 40%;

float: right;

border: 1px solid $bordercolor;

color: $pagetitlecolor;

margin: 5px;

}



#header-right-bottom ul {

margin: 0;

padding: 5px;

}



#header-right-bottom ul li {

display: inline;

padding: 5px;

}




Les modifications que j'ai apportées sont de plusieurs ordres. Attention, je n'ai pas vu le résultat sous plusieurs configurations. Par conséquent, je ne garantis rien quant-à la façon dont la chose apparaît sur l'écran de vos visiteurs. Le plus simple est d'essayer chez des amis avec différentes résolutions, différents navigateur... J'ai d'abord fixé la taille du container à 1200 pixel. Je dois dire que certains préconisent de ne pas dépasser 950 pixels. Je n'ai pas encore bien compris pourquoi... Pour ce qui est des tailles relatives des sections, j'ai adopté le système de pourcentage plus adapté à mon sens. Le header titre et description à 58 %. Les deux autres à 40%. Par ailleurs, j'ai fait en sorte que les cadres entourant le header titre et description ne soit plus apparent en leur appliquant la couleur du fond. Par contre j'ai laissé un liseré pour les sections widgets de droite. Enfin, j'ai ajouté le petit code suivant (déjà présent juste au-dessus, ne l'ajoutez pas) qui me permet de faire apparaître le menu de la section droite haute en noir:
#header-right a {
 color:#000000;
}
           
a:hover {
 color:$titlecolor;
}

a img {
  border-width: 0;
}




pour ce résultat non finalisé:



menu


Bien. Jusque là je n'ai pas ajouté grand chose au tutoriel de base. Simplement à l'usage, vous remarquez peut-être que vos nouvelles sections ne se comporteront peut-être pas comme vous le souhaiteriez vraiment. En général ce que l'on vous propose c'est de mettre un lien de recherche dans l'une des sections et un menu dans l'autre. Le menu ne pose pas de problème, comme nous le verrons, et le lien de recherche est un widget "étroit". Mais dans mon cas, c'est le widget de traduction Goggle que je veux y mettre. Malheureusement ce widget est "épais" et pose un gros problème de décalage si on le met, tel qu'il est, en haut. Seule solution que j'ai trouvé jusqu'à aujourd'hui, mettre le menu en haut et le widget Google en bas. Alors tout va bien:



sections


C'est bien gentil tout ça mais comment fait-on pour mettre tout ça dans nos toutes nouvelles section?
Etape 6: Allez depuis votre tableau de bord sur la mise en page de votre blog. Et là, surprise! Les trois sections de votre nouvel entête sont présents dans la mise en page (même si tout est un peu mélangé...). Ils sont donc modifiables interactivement:



éléments de pages


A partir de là, rien de plus simple. Pour le menu, il suffit de placer une "Liste de liens" dans l'emplacement du haut (dans le cas d'un deuxième widget "épais"). Comme par magie, les liens se disposeront en ligne et non l'un sur l'autre. Pour le widget Google traduction, il suffit d'y mettre tout à fait conventionnellement un élément "HTML / Javascript" et d'y copier ce code. A autre widget, autre code bien sûr...



Et voila. pour voir mon résultat, il vous suffit de regarder l'entête de mon blog. A vous de personnaliser vos couleurs, vos widgets et même pourquoi pas le nombre de vos sections etc.etc.
Si cet article vous a plu ou vous a apporté quelque chose, ou au contraire si vous ne l'avez pas apprécié et que son contenu puisse être complété, merci de laisser un commentaire. C'est par l'intermédiaire de vos interventions que ce blog s'améliorera.