Prochaine migration du site
Eux, ils migrent...
Bonsoir, le site à connu une petite période d’inactivité (rapport de stage, soutenance à préparer).
J’envisage depuis quelque semaines de migrer le site vers un nom de domaine qui représenterai mon activité d’auto-entrepreneur qui va être officialisée très prochainement. Je compte donc réserver un nom de domaine pour y heberger ce blog, un portfolio, un CV, des ressources gratuites pour webmaster et pour finir tout les projets les plus saugrenus qui me viendront par la tête.
Merci encore à webdesign-tutoriaux qui m’envoie chaque jour une cinquantaine de visiteurs, je passerai m’y inscrire après la migration également.
Sinon no souci, je préparerai une petite page pour rediriger les visiteurs vers la nouvelle adresse. Attendez juste que je sois sur à 100% sur mon futur nom de domaine et mon logo. Ensuite, je lance la machine de guerre 
La génèse du geek
La génèse du geek, une histoire succulente que je ne pouvais pas m’empécher de partager
Au commencement Dieu créa le digit. Il prit ensuite huit digits pour créer un octet. Or, la mémoire était vide ; seuls les crayons et les gommes couvraient la surface du bureau. Dieu sépara alors le zéro et le un, et il vit que cela était bon. Dieu dit : « Que les données soient ! » Et il en fut ainsi.
Et Dieu dit : « Plaçons les données dans leurs lieux respectifs. » Et il créa les disquettes, les disques durs et les CD-ROM. Mais le logiciel n’existait pas encore. Alors Dieu créa les programmes ; grands et petits. Dieu leur dit : « Allez et multipliez-vous, remplissez toute la mémoire. »
Dieu dit alors : « Je créerai le programmeur. Et le programmeur créera de nouveaux programmes et gouvernera les ordinateurs, les programmes et les données. » Dieu créa le programmeur, et il le mit dans le centre de données.
Et Dieu montra au programmeur le répertoire et lui dit : « Tu peux utiliser tous les volumes et sous-répertoires, mais n’utilise pas Windows. »
Alors Dieu dit : « Il n’est pas bon que le programmeur soit seul. » Il prit un OS du corps du programmeur et il créa une créature qui regardait le programmeur, qui admirait le programmeur, qui aimait les choses faites par le programmeur. Dieu nomma la créature « Utilisateur ». Il laissa le programmeur et l’Utilisateur nus dans le DOS, et il vit que cela était bon.
Mais Bill était plus malin que toutes les créatures de Dieu. Bill dit à l’utilisateur : « Dieu t’a-t-il vraiment dit de ne pas utiliser tous les programmes ? »
L’utilisateur répondit : « Dieu a dit que nous pouvions utiliser n’importe quel programme et n’importe quel bloc de données, mais il nous a dit de ne pas utiliser Windows parce que nous pourrions mourir. »
Et Bill dit à l’utilisateur : « Comment peux-tu parler de quelque chose que tu n’as même pas essayé ? Dès que tu utiliseras Windows tu seras l’égal de Dieu. Tu seras capable de créer tout ce que tu voudras, rien qu’en touchant la souris. »
Et l’utilisateur vit que les fruits de Windows étaient meilleurs et plus faciles à utiliser. Il vit aussi que toute connaissance était inutile, puisque Windows pouvait la remplacer.
Alors l’utilisateur installa Windows dans son ordinateur ; et il dit au programmeur que cela était bon.
Le programmeur commença à chercher de nouveaux pilotes.
Alors Dieu lui dit : « Que cherches-tu ? » Le programmeur répondit : « Je cherche de nouveaux pilotes, parce que je ne peux pas les trouver dans le DOS. »
Dieu lui répondit : « Qui t’a dit que tu avais besoin de nouveaux pilotes, n’aurais-tu pas utilisé Windows par exemple ? »
Le programmeur lui répondit : « C’est Bill qui nous l’a dit. »
Alors Dieu dit à Bill : « Pour ce que tu as fait, tu seras haï par toutes les créatures et l’utilisateur sera toujours mécontent de toi. Pire encore, tu seras condamné à ne jamais vendre que Windows. »
Dieu dit encore à l’utilisateur : « Pour ce que tu as fait, Windows te trompera et consommera toutes tes ressources et tu ne pourras acheter que de mauvais programmes que tu utiliseras dans la douleur et tu seras toujours sous la tutelle du programmeur. »
Dieu dit enfin au programmeur : « Pour n’avoir pas écouté l’utilisateur, tu ne seras jamais heureux. Tous tes programmes seront farcis d’erreurs, tu crouleras sous les fiches de bugs et tu seras condamné à les corriger et à les recorriger jusqu’à la fin des temps. »
Dieu les expulsa tous du centre de données et il en bloqua la porte avec un mot de passe.
Puis Dieu se ravisa et se dit qu’il n’était pas juste que tous soient punis par la faute d’un seul.
Alors il créa la pomme pour narguer Bill, et le pingouin pour libérer les hommes.
PS : La pomme est le logo d’Apple Computer Inc. Le pingouin est le logo de Linux (logiciel libre)
La sémantique xHTML et son intérêt
Mais c’est quoi donc ?
La sémantique n’est ni une espèce de ciment, ni une petite puce suceuse de sang. La sémantique c’est le BIEN, répétez après moi : Sémantique = BIEN !!
En clair, c’est la notion de « sens » que l’on peux apporter à des balises xHTML contrairement à leur apparence de base attribuée par défaut par les navigateurs. C’est attribuer une définition claire et précise du BUT d’un élément, sans s’attarder sur les caractères futiles de leur apparence de base, qui est, très facilement paramétrable en css.
Séparer le fond de la forme !
Prenons une étude de « cas » (oui c’est le mot qui est le plus à même d’être utilisé ici.)
Dreamweaver vous emporte dans d'autres mondes.. Seul problème, personne n'a jamais rien compris aux combinaisons.
Mr X est quelqu’un de très ambitieux, il a décidé de créer son site oueb sur dreamweaver (aarghh vade retro !). Ce même monsieur X va surement se poser des questions existentielles sur l’intérêt de ces mystérieuses balises qui s’affichent toutes seules dès qu’il clique par inadvertance sur des boutons aux caractères païens tel un pauvre humain devant une relique extra-terrestre
Mais seulement, le développeur d’applications web, même s’il peut être fan de Stargate, ne compose pas son code xHTML comme il taperai l’adresse de PX-159p sur la porte des étoiles, pour lui, les symboles païens ont un sens, mais uniquement un sens, pour le développeur, c’est une… symphonie 
Comprenez que dans un théâtre, si vous représentez du Mozart, la partition (xHTML) est toujours la même, mais comprenez que l’orchestre peut avoir sa propre interprétation de l’œuvre, et donc changer totalement ses propriétés.
Les aigus, les graves, les trombones, les … triangles. C’est du css !!! (si si !)
Comparons maintenant les deux codes :
Mr X :
<span style="font-family: Verdana; color: #0033cc; font-size: small;">Il était d'usage, quand on
faisait dans une chanson semblable référence, de mentionner ce <em>titre
distinctif </em>en italiques : c'est bien le cas ici, et il est plus que
vraisemblable que les autres parties du texte qui sont également en italique
fassent référence à d'autres Loges de l'Obédience. En effet :</span>
<ul>
<li><span style="font-family: Verdana; color: #0033cc; font-size: small;"> <em>l'Etoile Flamboyante </em>(actuellement
<span><em><a href="http://www.zum-flammenden-stern.de/" target="_blank">Zum
Flammenden Stern</a></em>)</span> avait été <span> fondée en 1770 comme Loge
militaire</span></span></li>
<li><span style="font-family: Verdana; color: #0033cc; font-size: small;"> <em>la
Concorde </em>(actuellement <a href="http://www.zur-eintracht.de/" target="_blank">Zur
Eintracht</a>) avait été fondée en 1754</span></li>
<li><em><span style="font-family: Verdana; color: #0033cc; font-size: small;">zu den drei Seraphim</span></em><span style="font-family: Verdana; color: #0033cc; font-size: small;"><em> </em>(aux
Trois Séraphins), fondée en 1774 sous le titre <em>Friedrich zu den drei
Seraphim </em>(dont fut membre Wilhelm Friedrich Ernst <a href="http://musicmac.ifrance.com/docs/bachwfe.html" target="_blank"> Bach</a>), et qui est mentionnée dans <a href="http://www.nio.uos.de/lit/gb_text.php?autor=Richter%2C+J.P.F.&werk=Palingenesien" target="_blank"><em>Palingenesien</em></a></span>
<span style="font-family: Verdana; color: #0033cc; font-size: small;"> de Jean-Paul Richter, existe toujours.</span></li>
</ul>
Code… imbuvable, du moins pour des êtres humains normalement constitués. Croyez moi ou pas… ce code existe bel et bien sur internet.
Et, (roulements de tambour), voici le même texte, avec la même apparence, tel qu’il devrait être codé :
xHTML :
<ul>
<li>l'Etoile Flamboyante (actuellement Zum Flammenden Stern) avait été fondée en 1770 comme Loge militaire</li>
<li>la Concorde (actuellement Zur Eintracht) avait été fondée en 1754</li>
<li>zu den drei Seraphim (aux Trois Séraphins), fondée en 1774 sous le titre Friedrich zu den drei Seraphim (dont fut membre Wilhelm Friedrich Ernst Bach), et qui est mentionnée dans Palingenesien de Jean-Paul Richter, existe toujours.</li>
</ul>
CSS :
color: #0033cc;
font-family: Verdana;
}
li {
font-style: italic;
}
Ceci n'est pas le vrai CSS
C’est un peu plus clair vous ne trouvez pas ? J’avoue mes crimes, j’ai par pure flemme omis de rajouter les liens mais de toute manière la différence est flagrante. Mais dieu que c’est beau ! On arrive à lire le code !
Et dire que tout cela à été réalisé seulement en se souciant un peu du fait qu’une balise à UN intéret et un seul, tandis que le css ne s’occupe QUE de la partie graphique.
Maitre, je veux suivre la voie !
Pas de problème jeune padawan ! Il suffit juste de suivre ces quelques règles simples :
<p>Contient des paragraphes.
<h1> <h2> … <h6> Titres de différents niveaux. <h1> étant le niveau supérieur.
<ul> <li> Liste à puces non ordonnée.
<ol> <li> Liste à puce ordonnée (numérotée)
<strong> Forte insistance sur des mots. (correspond au « gras »)
<em> Insistance moyenne. (italique)
et… c’est tout ! Enfin presque, le css est la bien sur pour donner à votre texte du STYLE. Et quand aux autres balises je vous invite à vous rendre sur ce tutoriel
D’ailleurs, avant de vous laisser j’aurais deux ou trois points sur lesquels insister :
- Cette liste est une liste ordonnée (ol / li). Vous voyez, ça rentre…
- Le nom des balises, TOUJOURS en minuscule non de dieu !
- Les balises <font> <marquee> <strike> et <center> c’est le MAL ! (et bien d’autres..)
- Notepad++ est ton ami.
Yes, we can !
Je pense que j’ai été assez clair… entre Stargate SG1, Mozart et la sémantique vous avez surement retenu le maximum de cet article, d’ailleurs comme je suis un grand sadique JE L’AI FAIT EXPRES !! (c’est tellement bon la vengeance).
Voyez à quel point c’est douloureux pour un développeur de voir des codes illisibles ou tout est mélangé au texte ! Des font-face des font-size, du span par ici des div par la, des titres en balises <b>, de la mise en page en tableaux, des br en pagaille… Alors, non de dieu ! Allez au plus simple, ADOPTEZ le css, un enfant de 7 ans devrait être capable de lire votre code source sans remarquer les balises..
C’était le coup de gueule du Mardi soir
Centrer un bloc en CSS
Allez, ce matin, j’attaque quelque chose de souvent demandé et Oh combien utile ! Le … centrage en CSS !
Le code xHTML :
Créez votre page de la manière habituelle, notepad++, on utilise squelettor pour générer un squelette de page xHTML avec ses dtd et compagnie et on lie enfin notre page « index.html » à un notre feuille de style pour le moment, vide.
Voila, en théorie il ne vous reste plus qu’a ajouter votre contenu entre les balises body, MAIS pour le centrage « intelligent » il vous faudra créer tout d’abord une boite de contenu qui sera centrée dans votre body. En pratique cela devrait donner dans l’arborescence : body > div ‘id’=contenu.
Concrètement, l’astuce est de centrer une div avec des marges extérieures et de pouvoir donner au bloc de contenu le style que l’on souhaite sans altérer le style du body qui sera donc également modifiable en css.
Le code CSS :
Centrer une boite de largeur « fixe »
Nous allons commencer par un exemple pratique, disons que vous avez besoin de centrer votre contenu de manière à ce qu’il ai une double bordure extérieure, une largeur fixe de 650 pixels et une marge interne de 15 pixels pour que le texte soit présenté de manière agréable.
background-color: #EAF2FA;
border: 5px double #1E90FF;
margin-left: auto;
margin-right: auto;
padding: 15px;
width: 650px;
}
Centrer une boite « elastique »
Cette div s’adaptera automatiquement a la largeur de l’écran et occupera donc 80% de l’espace du body en largeur, les marges retranchant automatiquement 10% à gauche et à droite de l’écran.
margin-left: 10%;
margin-right: 10%;
}
Pratique non ?
Le traitement croisé avec Photoshop
En photo argentique, il existe un traitement chimique pour chaque support (film, papier…) et, bien sûr, les fabricants recommandent d’utiliser les produits qui leur sont spécifiquement destinés.
La créativité découlant bien souvent de la transgression, des photographes ont délibérément développé des films dans des bains prévus pour le papier. Le résultat est assez particulier et, bien imprévisible, il est souvent plaisant.
Le traitement croisé produit des couleurs décalées et sursaturées, des hautes lumières brulées, des noirs profonds et un contraste élevé. Avec Photoshop nous contrôlons mieux ces effets car nous pouvons jouer sur les couches chromatiques, d’où des résultats saisissants.
En avant la musique !
Le fichier de travail sera une image disponible sur deviantart Urban Imp, pour la télécharger, cliquez sur le bouton « download » situé sur la gauche de l’écran sur deviantart.
Ouvrez Photoshop, insérez y votre image haute résolution fraichement téléchargée et buvez un bon verre d’eau fraiche avant quand même…
1 – Augmenter le contraste
L'effet de traitement croisé réussit mieux avec des images très contrastées et très saturées. Ouvrez l'image et choisissez Image > Réglages > Niveaux. Tirez le point blanc vers la gauche et le point noir vers la droite afin d'augmenter le contraste global.
2 – Saturer les couleurs
Choisissez ensuite Image > Réglages > Teinte/Saturation et tirez le curseur Saturation vers la droite jusqu'à ce que les couleurs soient assez vives.
3 – Feel the power of the Lab side…
Il faut changer le mode de couleurs. Pour cela nous sommes obligés de dupliquer l'image (image>Dupliquer). Pour cette copie, choisissez Image>Mode>Couleurs>Lab. Ouvrez ensuite la palette couche.
4 – En flou gaussien, tu sera
Cliquez sur la couche "a" et choisissez Filtre>Atténuation>Flou gaussien. Appliquez donc un rayon de 6 pixels.
5 – Couche « a », suite et fin
Choisissez Image>Réglages>Niveaux, puis tirez le Point noir vers la droite jusqu'a la valeur 77 (ou rentrez la valeur directement dans le champ de gauche)
6 – Enfin la dernière couche !
Cliquez sur la couche "b", choisissez Image>Réglages>Niveaux, puis tirez le point noir vers la droite jusqu'a la valeur 76. Mettez le point gris (gamma) à 1,40.
7 – L’étape qui aurai pu être la dernière…
Cliquez sur la couche Lab et selectionnez tout (Ctrl+A). Choisissez Edition>Copier pour copier tout le calque arrière plan avec ses couches intactes. Ce dupli de l'image peut être fermé sans l'enregistrer. Retournez à l'image originale. Maintenant collez le calque issu de l'image ou nous avons travaillé en mode Lab et mettez le calque copié en mode incrustation dans la palette Calques pour obtenir l'effet de traitement croisé. Pour intensifier l'effet vous pouvez copier ce nouveau calque et jouer avec la transparence/Niveaux de celui-ci pour ajuster votre création.
8 – L’étape qui aurai pu être l’avant dernière
Merci de votre attention, et … maintenant il est temps pour moi de me retirer, ce tutoriel m’a demandé un certain temps de rédaction 
.
Si vous êtes friands de ce genre d’effets et que vous manquez d’inspiration, je vous recommande chaudement le site deviantart.com ou des « stockphotos » sont disponibles pour y puiser vos modèles.
Exemples :
- Zombie Hunter by ~sawnico
- The Arch by ~sawnico (utilisé dans ce tutorial)
- Courtney by ~sawnico