moechofe (le blog de moechofe)
Des CSS tordus pour wefrag

Rechercher

Archives

Pages

Catégories

Méta

Server minecraft

Samedi 28 avril 2012 à 12:48

Bonsoir,

Cela fait depuis 4 mois que j’administre un server minecraft, nous sommes 3 joueurs réguliers et on se disait qu’il était temps de l’ouvrir un peu vers l’extérieur.

Alors voila, si vous voulez cratouiller quelques cailloux, jouer de manière simple, butter du mob et du dragon. On joue survival (pas de mega construction), avec des mobs un peu violent (mais pas trop), une carte en ligne, pas de protection (on partage tout), on triche pas.

Il y a un monde persistant et un monde temporaire que l’on recommencera si on le souhaites (dragon mort par exemple). On parle anglais.

Si vous êtes curieux, vous pouvez vous connecter via le domaine oui.la et si vous souhaitez participer, indiquez moi votre pseudo. Je n’accepterai qu’un petit nombre de joueurs.

Comment fabriquer des CSS tordus pour Wefrag

Jeudi 21 janvier 2010 à 11:22

Introduction

Tout d’abord, il faut comprendre qu’il existe un élément important qui permet de réaliser des CSS tordus comme celle que j’ai pu faire sur Nofrag et Wefrag maintenant : les articles et les commentaires possèdent une classe auto incrémentée. Il suffit de regarder les sources de la page d’accueil de son propre blog pour s’en rendre compte. La balise BODY contient une classe ARTICLEID1. Donc si chaque article et chaque commentaire ont une classe unique, il est alors possible de les cibler indépendamment. Ces classes sont déclarées dans le code du template et celui-ci n’est modifiable uniquement que par les admins de Nofrag/Wefrag. J’ai demandé historiquement sur Nofrag et récemment sur Wefrag que ces modifications soient apportées, afin de pouvoir réaliser des CSS tordus. Donc, si vous souhaitez obtenir des résultats similaires sur un autre blog que Nofrag/Wefrag assurez-vous d’abord que les articles ou commentaires soient ciblable par une classe ou par un ID unique.

Niveau requis

Sans vouloir faire le malin : c’est très dur. Je conseille au débutant qui souhaiterait s’amuser de la sorte de commencer par quelque chose de facile. Il faut connaitre un outil de dessin parfaitement (photoshop), savoir faire du découpage d’image et connaitre les contraintes de poids lié aux images sur le web, être un boss en intégration et, connaitre les limitations et les bugs de chaque navigateur afin de produire une CSS sans hack (car = le hack CSS saimal).

Principe

Après différent essai sur Nofrag, je me suis cantonné sur un principe que j’aime bien et qui reste très ouvert. Je cible les commentaires et utilise les différents types de données qui les composent pour y ajouter ou les remplacer par des images. C’est ce principe que je vais tenter d’expliquer dans cet article. Je ne suis pas un rédacteur, mes phrases sont surement très lourdes à lire et je vous prie de bien vouloir m’en excuser. Prenez le temps de lire, et soyer patient, les résultats n’arrivent pas vites.

Je vais commencer par faire une petite analyse de ce qui est proposé par Wefrag, puis expliquer les techniques utilisés une par une. Pour finir, j’expliquerais les étapes à suivre dans l’ordre.

Commençons par regarder le code source d’un commentaire :
<a class="null" name="7"></a>
<div class="comment commentnum1">
<div class="author">par <a href="http://www.wefrag.com/users/Coww">Coww</a></div>
<div class="date">20 janvier 2010 à 14:53</div>
<div id="commentbody-7" class="body"><strong>X</strong>Je comprendrai quand j’aurai posté…</div>
<div class="admin"><a onclick="quote_comment("7", "Coww");" href="javascript:;">Citer <a class="comment-edit-link" title="Modifier le commentaire" href="http://blogs.wefrag.com/moechofe/wp-admin/comment.php?action=editcomment&c=7">Éditer</a></div>
</div>

Analysons-le ligne par ligne :

A.NULL
cette balise est censé être une ancre, je doute quelle fonctionne bien, car le nom devrait commencé par une lettre, donc : ça ne sert à rien, alors OSEF. (Il est tout de même possible de l’utiliser avec le pseudo format CSS :before et :after, mais tous les navigateurs ne le comprenne pas)
DIV.COMMENT
c’est le conteneur du commentaire, un BLOCK qui contient toutes les données. C’est pratique, car on peut positionner le commentaire n’importe ou dans la page ou conserver sa position dans le flux des commentaires. (voir Positionnement et Division)
DIV.AUTHOR
c’est la donnée du nom de l’auteur avec un lien. Mieux faut la conserver.
DIV.DATE
c’est la donnée de la date du com. Perso j’en ai rien à foutre et c’est la première donnée que je sacrifie pour la remplacer par autre chose. (voir Remplacement)
DIV.BODY
c’est le corps du message et grâce à la nouveauté de Wefrag, les internautes peuvent y insérer du HTML. C’est très pratique car, on peut ensuite identifier ces balises avec le pseudo format CSS :first-child. (voir Division) pour conserver une lecture du blog, il est préférable de laisser la balise DIV.BODY suivre le flux des commentaires.
DIV.ADMIN
c’est la boite à outils qui contient les liens “Citer” et “Éditer”, on ne peut pas vraiment les déplacer mais on peut facilement s’en servir pour décorer les commentaires.

Bien sûr cette analyse n’est surement pas très claire, c’est pour ça que je vais maintenant expliquer les différentes techniques qui permettent d’utiliser et transformer ces données pour en faire autre chose.

Masquage

Technique la plus simple, si quelque chose m’ennuie : je le cache, avec DISPLAY:NONE. Je fais ça avec la DIV.DATE le titre du blog et d’autre chose.

Remplacement

Il n’est pas complètement possible de faire du remplacement sur Wefrag, car il est nécessaire d’avoir deux éléments HTML imbriqués pour le faire correctement. Exemple : <a><span>Texte à remplacer</span></a>.

Cette technique permet de remplacer du texte par une image de substitution. Idéalement on ajoute une image de fond a la balise <a> et on masque le <span> avec la technique décrite au-dessus. On obtient alors un joli bouton.Cette technique est limitée par le faite que l’élément <a>< doit avoir une taille fixe. Idéalement la taille de l’image de fond, mais pas nécessairement. Voici un exemple : <a style="display: block; width: 20px; height: 20px; background: url(monimage.png);"><span style="display: none;">Texte</span></a>
Sur Wefrag, on n’a pas les deux éléments imbriqués (vérifier dans le code source), on ne peut donc pas masquer les textes :

  • soit, on fait avec,
  • soit, on choisit une couleur de texte et de fond identique,
  • soit, on décale le texte avec letter-spacing, text-indent et autres propriétés obscures de CSS. (google le fait très bien)

Positionement

C’est de loin la technique la plus compliquée, elle permet de positionner les différentes données du commentaire afin de foutre le bordel dans le flux.

Imaginons que vous souhaitiez entourer les commentaires par une bordure fraichement réalisée avec photoshop :

  • soit, vous découpez une grande image, et la mettez en fond de la balise DIV.COMMENT. Cela vous obligera à bloquer la taille des commentaires avec width et height, mais vous obligera aussi d’abuser de la technique de Niquage décrite plus bas pour éviter que les contenues des commentaires ne débordent de votre jolie cadre.
  • soit, vous découpez plusieurs images (haut, bas, gauche, droite) ou (coin haut-gauche et coin bas-droite, coin haut-droite, coin bas-gauche) ou (…) Et vous allez devoir jongler avec les différentes données des commentaires. L’avantage c’est que le commentaire peut ne plus être limité en taille (selon le découpage). Exemple : utilisez DIV.AUTHOR pour faire du remplacement du coin haut-gauche, utilisez DIV.DATE pour le coin haut-droite, DIV.BODY pour le coin bas-gauche et enfin DIV.ADMIN pour le coin bas-droite. Vous ne disposez sur Wefrag que de 4 balises de données, alors qu’il y en avait 5 sur Nofrag.

Pour bien comprendre ce charabia, il faut commencer par maitriser le remplacement et faire un schéma ou maquette de ce que vous voulez obtenir sur papier. Il ne faut pas oublier que vous êtes bloqué par l’HTML et que vous ne pouvez pas le modifier. Plusieurs fois j’ai dû revoir mes prétentions à la baisse à cause de ça.

Cet exemple est un piège ; il est plus facile et sera plus pratique pour les internautes, de ne pas faire de cadre qui entour les commentaires.

Mais je vais directement vous donnez l’astuce magique qui permet de tout positionner n’importe ou. Exemple :
<div style="position: relative; width: 100px; height: 100px;"><div></div></div>

C’est tout simplement un DIV dans un DIV, mais l’astuce c’est que le deuxième DIV est positionné au même endroit et a exactement la même taille que le premier DIV. Vous pouvez le vérifiez en ajoutant du texte entre les deux balises et à l’intérieur du deuxième DIV. Exemple :
<div style="position: relative; width: 100px; height: 100px;">TEST<div style="position: absolute; top: 0px; left: 0px; width: 100px; height: 100px;">TEST</div></div>

Les deux mots TEST seront complètement superposés.

Cette magie est obtenue grâce à POSITION:RELATIVE cela permet d’indiquer a tous les éléments enfants que leurs parents est ce DIV en question. Si on ne fait pas ça, alors le parent sera la balise BODY. Grâce à ce petit truc : on est capable d’afficher une image par-dessus une image, et ainsi de jouer avec la transparence. Autre chose, concernant le positionnement, attention aux mélanges PADDING, MARGIN avec des éléments de taille fixe. C’est pratiquement tout le temps la merde dès que l’on teste sous IE, et c’est encore plus vrai si on utilise FLOAT:LEFT. Cela est dû à la difficulté qu’on les navigateurs à rendre les éléments DISPLAY:BLOCK et DISPLAY:INLINE mais cet article ne suffirait pas à expliquer ce phénomène.

Division

C’est une nouveauté et une bonne surprise sur Wefrag. Wordpress autorise le HTML dans les commentaires et le pseudo format CSS :first-child permettra de cibler une balise en particulier (la première trouvé) et grâce à la technique de positionnement expliqué ci-dessus, de placer le contenu de cette balise n’importe ou sur la page. (voir http://blogs.wefrag.com/moechofe/2010/01/20/lemmings/) Exemple :
#comments div.body b:first-child {position:absolute;top:0px;left:0px;}

Ceci placera toutes les premières balises <B> de tous les commentaires en haut à gauche de la page, les uns sur les autres.

Sprite CSS

Cette technique qui à un nom à la con, permet de regrouper plusieurs images sur une seul, cela réduit le poids des images (ou pas), harmonise les palettes de couleurs (GIF et PNG) et améliore le chargement de la page (1 images ou lieu de 300).

Mixer avec la technique du remplacement et en utilisant background-position: 0px -20px et background-repeat: no-repeat : on est capable de faire apparaitre n’importe quelle portion de notre unique image. C’est très pratique avec les A:HOVER par exemple, qui permettra d’obtenir un roll-over sans chargement d’image supplémentaire.

Niquage

Je n’ai pas trouvé de meilleur nom pour cette technique d’enculé. Exemple : #comments div.body p, #comments div.body br {display:none;} : empêchera tout simplement les retours à la ligne.

On peut appliquer cette technique sur les IMG, OBJECT ou EMBED. Bref, toutes les balises contenues dans le DIV.BODY des commentaires qui pourraient compromettre l’affichage de la CSS.

Comment faire

La première chose à faire est un dessin de ce que vous voulez faire et analyser la faisabilité à partir des données des commentaires. Rappel : 4 DIV contenu dans 1 DIV. Il faudra aussi surement modifier le template de votre blog pour choisir le plus simple et celui qui contient les fameuses classes incrémentales. Personnellement j’utilise une petite CSS qui va écraser celle de Wordpress et

ainsi me donner carte blanche.

Je travaille sur une copie locale, fonction “Enregistrer” de mon navigateur.
Je stocke ma CSS sur un serveur externe, je n’ai pas testé la capacité de Wordpress, mais je suis sûr qu’il y a une limite. J’utilise l’instruction CSS @import url(URL) avec l’URL de mes CSS.

J’utilise aussi un langage de script pour générer les CSS automatiquement à partir de fonctions mathématiques. Cela me permet de gagner du temps. Pour ma part j’utilise REBOL, mais PERL, PYTHON ou BASH font parfaitement l’affaire.

Lemmings

lemmings-makingoff-editeur-winlemJ’ai commencé par trouver une version gratuite à laquelle je pouvais jouer facilement, j’ai même trouvé un éditeur. J’en m’en suis servi pour construire la scène que j’ai ajustée avec photoshop.

lemmings-makingoff-emulation-amigaJ’ai aussi utilisé un émulateur Amiga et fait une collection incroyable de screenshot afin d’avoir les sprites des lemmings dans toutes les positions. Toujours avec photoshop j’ai complété ma scène.

La transcription en CSS a été la plus galère de toutes, à cause d’un mauvais calcul au départ (j’avais oublié de faire répéter mon image) j’ai du faire des calculs que j’ai foiré, et j’ai fini part prendre une calculette.

lemmings-makingoff-scene-construction-1lemmings-makingoff-scene-construction-2lemmings-makingoff-sprite-positioning-1lemmings-makingoff-sprite-positioning-2

Conclusion

C’est une rapide approche des choses que j’ai expérimentée avec les blogs Nofrag/Wefrag et il vous faudra beaucoup d’autres sources externes, tutoriels et documents divers. Je suis prêt à expliquer plus de choses si vous le souhaitez.

Une partie de lemmings sur Wefrag

Mercredi 20 janvier 2010 à 14:51

Comment jouer

Lâchez un comm.
Inscrivez une lettre entre les balises HTML GRAS : <b> et </b>. Exemple :
<b>L</b>
Voici ma contribution.
Un lemming apparaitra sur la surface du jeu criant la lettre ajoutée entre les balises GRAS.
Attention: Seule la première lettre inscrite entre les premières balises GRAS apparaita sur la surface du jeu. Le reste du commentaire sera affiché dans l’historique de communication.

Seules les premières 528 contributions seront affichées. Retrouvez Une partie de soldat sur les blogs de nofrag. Nécessite un navigateur supportant la propriété CSS first-child.