le p'ti labo

Reprise

riesseg — Sat, 26 Apr 2008 15:34:53 GMT

Hello World ! (phrase classique du programmeur)

Alors peut être vais-je relancer le petit labo.
Donc si des gens ont un blog digne de se nom sur canalblog qui aimerai un petit relookage bin qu'il fasse une zolie demande en commentaire (avec adresse et tout et tout).

Sinon, j'vais voir a mettre en partage les skins en version vierge. Comprennez que j'enlève les titres sur les bannières et tout ce qui à un lien direct avec le petit labo. Comme ça, chez vous, avec un logiciel comme Gimp, Tohshop ou Paint, vous pouvez adapter pour votre blog.
Bref, je vous tiens au courant pour ça.

Sinon, quoi de neuf pour moi?
Bin j'ai pas trouvé de taf cette année... Donc je me relance dans les études. J'ai réussi a me faire prendre chez MJM Graphics en alternance, dans la formation infographie. Je suis donc en recherche d'entreprise pour mon alternance.
Pis vala... s'tout.

Chô.

[PasàPas]Transformation étape2

riesseg — Wed, 05 Dec 2007 17:31:08 GMT

Occupé à d'autres affaires, j'ai du délaisser quelques temps le petit labo... je reprends et continu le pas à pas.
On va tout d'abord s'occuper du menu, qui se doit d'intégrer un peu mieux le blog. Le gris de base est tout a fait hors du coup. Je vais donc le mettre dans les tons bleus avec une ombre à droite, comme si il était glissé en dessous du content.

Etape1: le menu
Mon dégradé fait et uploader, je peux l'intégrer à mon CSS. Le menu se trouvant dans la classe leftbar, je vais la trouver. Suppression des éléments de bordure présent, et ajout du background.
L'image fais que quelques pixels de largeur et 5pixels de hauteurs. Il va donc falloir le répéter pour qu'il couvre toute la hauteur. Ensuite, la couleur la plus clair du dégradé me servira de couleur de fond pour qu'on ne voit pas le passage de l'image au menu.
Pour répeter une image tout d'abord, il faut utiliser background-repeat: repeat/no-repeat/repeat-x/repeat-y, x étant l'horizontal et y le vertical. Dans notre cas, repeat-y donc. Il faut également positionner le fond à droite. On va utiliser background-position: left/right/center/top/bottom. Dans notre cas, j'utiliserai le paramètre right bien entendu. Enfin, la couleur de fond sera la même que pour le content donc #a283e0.
Le code de mon ombre sera donc:

background:#a283e0 url('http://membres.lycos.fr/riesseg/canalblog/Noyel/images/menu.png') right repeat-y;

C'est long... Mais le résultat est au rendez vous.
On va z'y coller des 'tites bordures en haut, a gauche et en bas (mais pas droite pour donner l'impression qu'elle continue).
On l'a fait au tour d'avant... donc:
border-bottom: 1px solid #1F1F1F;
border-left: 1px solid #1F1F1F;
border-top: 1px solid #1F1F1F;

Et le tour est joué...? non, piège! Je rajoute 1px dans la largeur... donc largeur du menu+largeur du content=801px!!! Ca rentre pas dans le container qui ne fait que 800px!!! mais vous connnaissez l'astuce ^^ on réduit de 1px la largeur du menu de gauche.
width: 199px;

Ensuite, on va refaire les couleurs des titres.
Ils sont dans .navlinks .title On va remplacer le moche gris actuelle par le même bleu que le titre.
color: #6c31e0;
Et c'est tout :D
On va également mettre tout le calendrier de cette couleur. Il y'a deux élements à repérer, calendar et calendar caption qui sont respectivement le tableau en général et le titre du tableau. CB à mit le mois dans le caption. pour ca qu'il faut le changer egalement ;)
Donc même chose, remplacer le moche gris par notre bleu.
color: #6c31e0;

Enfin, les liens sont illisibles en gris clair sur bleu... donc on va les refaires.
Comme noyel c'est festif et que c'est période de cadeau, on va dire que vous voulez que les gens voient vos amis et qu'ils aillent gonfler leurs statistiques!!! Donc on va les mettre en rouge, comme le cadeau de la bannière.
Les attibuts des liens sont nombreux. Dans la feuille de style c'est tous les a:qqch...
il y'a donc:
a = ancre
a:link = Liens html
a:hover = quand on passe le curseur sur le lien
a:visited = quand on a visité le lien
a:active = quand on clic sur le lien
Les liens seront en rouge clair, les liens visités en rouge foncés, les liens survolés en blanc. et le lien actif... m'en fout :D
On aura comme code:

a:link {
color: #c71212;
text-decoration: none;
}
a:visited {
color: #900d0d;
text-decoration: none;
}
a:active {
color: #FFFF99;
text-decoration: none;
}
a:hover {
color: #FFFF99;
text-decoration: none;
}
Et vala!
Le menu de navigation est fini.

La prochaine fois, j'espere plus rapidement qu'entre l'etape1 et l'etape2, on s'occupera du content avec la feuille de houx, l'encadrement, la canne a sucre et tout.

[PasàPas]Transformation étape1

riesseg — Thu, 29 Nov 2007 16:05:00 GMT

On va faire 2étapes.
Vu que je ne supporte pas les couleurs moches de mon blog, celles pour montrer un peu les différentes partis (de toute manière, prenez 1blog au pif, vous tombez sur un truc moche ou tout est encadrer et peut être les couleurs sont toutes différentes), on va transformer un peu tout ça.
Avec plusieurs onglets, un pointant sur Apparence/Editer les fichiers/Feuille de style générale, un pointant sur votre blog (pour voir les modifs) et un pointant sur le petit labo, pour faire le pas à pas.
Tention, vous allez abuser du F5 comme jamais... Ca vous fausse vos statistique comme c'est pas permit ^^

Etape1: l'arrière plan
Il est blanc! C'est pratique et pas embettant :p Je pense que je ferai un de ces 4 un autre pas à pas avec un arrière plan fixe, et un arrière plan répétitif. un jour... peut être...
Le fond est défini dans l'élément body c'est une balise html, donc il n'y a rien devant. on laisse margin et text-align, mais on change l'attribut background-color. Comme j'espère que vous avez un tout petit peu de vocabulaire en anglais, je ne développerai pas la fonction de 70% des éléments car cela coule de source.
La valeur à mettre est une couleur en hexadécimal. Un logiciel de retouche d'image vous les donnes sans problème.

Une couleur en hexadecimal se découpe en 3nombres de 2chiffres: #RRVVBB allant de 0 à F (comptage hexadecimal: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) donc 00 c'est nul, et FF c'est pur. RR définie la quantité de rouge, VV la quantité de vert et BB la quantité de bleu.
#FF0000=rouge; #00FF00=vert; #0000FF=bleu; #000000=noir; #FFFFFF=blanc
si les deux chiffre des couleurs sont a chaque fois identique, on peut simplifier en en écrivant que 3.
#F00=rouge; #0F0=vert; #00F=bleu; #000=noir; #FFF=blanc

Dans l'exemple, il est blanc. donc il sera... #FFF.

Etape2: le container
Apparaît une fois sur la page, à un id unique donc un dièse (#) devant.
background-color: #FFF; n'oubliez jamais le point-virgule (;) à la fin. et 1 élément par ligne.
Supprimez tout se qui contient border puisqu'il n'y'en a pas.
padding est la marge interne de la div. On la laisse à zéro. D'après les normes du w3c, la largeur d'une div = width +padding + border. IE lui ne prend pas en compte la marge interne et la taille des bordures. Mais nous reglerons ce problème tout à la fin, car on optimise pour Firefox.
margin sert à mettre une distance minimal avec les blocs qui l'entoure. en mettant la valeur auto à gauche comme à droite, on centre le container.

Etape3: le content
Commençons à jouer :)
Supprimez tout se qui contient border. J'aime pas cette méthode, on va les refaire.
On affiche la bordure de gauche, de droite et d'en bas. elles auront une taille de 1px, seront de couleur #1F1F1F (repris sur la bannière avec la pipette) et seront continue.
Commençons par afficher toutes les bordures:
border-weight: 1px;
border-style: solid;
border-color: #1F1F1F;
Etant donné que la bordure s'ajoute à la largeur, si là vous allez voir le blog le content à disparu et c'est mit en bas... Ceci parce que le container faisant 800px de large, le menu 200 et le content 200+bordure de gauche+bordure de droite=202 pixels, il n'ya pas assez de place pour le mettre à côté du menu. Donc il le met en dessous. On va donc diminuer de 2pixels la largeur du content.
width: 598px;
voila qui est beaucoup mieux.
Maintenant, concernant les bordures, je ne veux pas celle du haut. Et je ne veux pas avoir trop de ligne pour définir les bordures comme c'était le cas avant. Je vais condenser l'écriture des bordures sur une seule ligne.
border: 1px solid #1F1F1F;
Ca marche aussi, mais j'ai économiser 2lignes! Maintenant, je ne vais afficher que les bordures du bas et des côtés:
border-bottom: 1px solid #1F1F1F;
border-right: 1px solid #1F1F1F;
border-left: 1px solid #1F1F1F;
Et le tour est joué !!!
On change la couleur de fond, la couleur précise du bleue récupérée à la pipette:
background-color: #a283e0;
Une fois qu'il y'aura la bannière, ce sera niquel.

Etape4: la bannière
La logique aurai voulu que je commence par la bannière... mais vu que dans la feuille de style, le content est avant la bannière bin j'ai fais dans cette ordre.
Dans un premier temps, on enlève le texte (titre du blog et description). C'est vraiment simple. Trouvez l'élément #topbar et son attribut display qui est block. changez le en none.
display: none;
Ensuite, passons à l'élément #topbar-logo.
on passe son display à block.
display: block;
En regardant les propriétés de l'image, je vois qu'elle fait 183pixels de haut.
height: 183px;
Maintenant, on lui met l'image. Comme pour la bordure, il y'a 2 façons. En distinguants tous les éléments ou en mettant tout sur une ligne. je vous montre les deux.
background-image: url('http://membres.lycos.fr/riesseg/canalblog/Noyel/images/banniere.jpg');
background-repeat: none;
background-color: #FFF;
ou

background: #FFF url('http://membres.lycos.fr/riesseg/canalblog/Noyel/images/banniere.jpg') no-repeat;

on peut répété un arrière-plan sur la longueur (repeat-x) ou sur la hauteur (repeat-y). de fait, si vous avez un fond dégradé uniforme, vous enregistrez l'image sur une largeur de 1px et vous répétez le fond grace au CSS. L'image sera ainsi de très petite taille et très rapide à s'afficher.
Enfin, on met le lien. C'est relativement bien fait ce système, je l'aime beaucoup.
L'élément div .logolink a permet de redéfinir la balise du lien (<a>) compris dans la classe logolink. Il faut lui mettre la même taille que la bannière (183px) pour qu'elle couvre l'image (car la largeur est 100%).
height: 183px;

Voila, a part la couleur et l'ajustement des articles, vous devez être exactement comme ceci (si vous êtes parti du skin gris).
Ne vous en faites pas pour les couleurs du texte, on y viendra la prochaine fois. cette étape est déjà longue, j'ai pas voulu la faire trop longue. Donc un conseil, jusqu'a la fin du prochain tuto, gardez votre ancien modèle ;)

[PasàPas]Découpage

riesseg — Wed, 28 Nov 2007 20:29:00 GMT

Let's go.
Bon on va pas attaquer la mise en page de suite. C'est pas que ca prenne spécialement de temps ou autre. Je l'ai sauvegarder sur mon disque dur le CSS pour l'installation. Mais c'est que je ne sais pas trop comment expliquer le truc encore...

Mais bon, hier j'ai pas eu le temps de venir (pis j'ai essayé de me coucher avant 1h du mat) et donc aujourd'hui, on passe à la suite.

Vous vous souvenez de l'image que j'ai faite. C'est a quelques petits détails prêt ce à quoi va ressembler le blog. Cette technique a comme bel avantage de certe prendre du temps à réaliser, mais une fois fait, c'est super rapide de le mettre en place (m'a fallut 1petite heure pour modifier le CSS).

Il ne faut pas perdre de vue le profil général du blog. En schématisant le truc, on obtient ceci:

On va donc découper l'image en conséquence.

Sur mon ordi, j'ai tout fait par calque. je commence par enlever la feuille de houx, le titre et le texte et je sors la bannière. jpg ou png, pas d'importance vu qu'il n'ya pas de transparence (car je sauve avec le fond blanc. j'aime pas, mais vu que le png est encore mal supporté par IE...) en isolant la feuille de houx, et la canne de sucre je les sauvegarde cette fois en png. pis flute à IE!!! z'avez qu'a prendre firefox, na!

Ensuite et bien je relève également la couleur de fond du content (donc le bleu) et la couleur des bordures.

Ce qu'on va faire ensuite, c'est mettre l'image de bannière en bannière (logique, hein?) puis mettre les bordures à droite et à gauche du content. Car le menu, comme je l'ai dit dans le billet précédent sera intégrer à part. Rapport a ce que le menu ne s'étire pas sur toute la hauteur, et j'aime pas ça.
Les bordures de largeur 1px seront de la même couleur que celle de l'image, ce qui rendra la transition totalement invisible. De même pour la couleur du contenu, qui sera la même que dans la bannière. donc on ne saura pas vraiment ou se finit la bannière et ou commence le content. Bien sur dans l'exemple c'est très simple. car la finition de l'image coïncide avec la finition de la bannière. Mais pour le bamboo ou chez mamina, la tecnique est autre. on fini réellement l'image dans le content.

Donc maintenant, vous avez les images individuelles. il vous suffit de cliquer sur le liens, puis clic droit/enregistrer sous... pour que vous l'acquériez. Mais comme le CSS travail avec les adresses url, vous pourrez aussi bien les laisser sur mon ftp. c'est vous qui voyez.

fin!

Mais je vais faire encore un truc... je vais modifié mon blog pour que vous voyez bien ou se finissent les partis.
Ca n'a aucun rapport avec le tuto, c'est un bonus pour comprendre l'architecture. Je fais ça dans l'instant.

Tiens c'est marrant quand même... quand je fais un truc bien moche, avec pleins de couleurs et des bordures partout, on dirait un blog d'un gars lambda...

[PasàPas]Le skin

riesseg — Mon, 26 Nov 2007 22:53:50 GMT

'tin! j'étais à la conclusion du message, pis en voulant regarder la version de FF que j'avais, il a recharger mon onglet et j'ai tout perdu mon super texte... j'suis deg, je dois recommencer....

Bon, bin je recommence.... mais en plus rapide, y'aura moins de blabla, na!
Après une bonne heure de recherche et de méditation, j'ai fini par trouver quoi faire. Vous avez vu un peu mes travaux, et vous savez que ce que je cherche avec les modèles de blog, c'est tout d'abord cassé les formes et ne pas mettre des cadres partout. Car les cadres, c'est pas naturels. C'est comme la ville... Et la ville, c'est nul! (oui, je suis un gars de la campagne au fait ^^) Donc après avoir hésiter à prendre le thème de la forêt, puis le banzaï (car les branches, les racines et les feuilles apportent naturellement de l'élégance et obligent presque à ne pas rester cloisonner) je me suis diriger vers... NOYEL !!!(oui, je ne dis pas noël mais noyel...) Car c'est bientôt, donc j'suis sur que tout le monde va vouloir transformer son p'tit jardin secret en truc noyelant.
Vec mon coupain Gimp, on est arrivé à ceci:

[- cliquez pour voir le skin noyel -]

Alors, vous en pensez quoi? C'est simple, élégant quand même... on abandonne déjà l'idée du gros cadre/bannière mais on reste quand même dans l'univers blogiens car bien délimiter. J'avais pas trop envie de me casser la tête (j'ai encore peu de fan. Quand j'aurai pleins d'élèves, je ferai des trucs aux tis oignons).
D'ailleurs, vous remarquez l'absence du menu vertical. Je ne savais pas comment l'intégrer... donc en fait, il sera juste accolé. C'est pas un skin ultime, désolé :-)
J'aurai aimé faire comme dans les autres skins, mais ça demande des p'tits manipulations que j'ai pas envie d'aborder maintenant. On va essayer de faire un skin ou on ne va rien ajouter au contenu. On le changera pour pouvoir afficher le titre au dessus de la date, et la date à tous les messages. Mais c'est tout.

heuuuuuuu.... blablablablabla (je me relis)

Mouais, donc au programme:
découpage de l'image, quoi va où, transformation de l'affichage, transformation du blog via le CSS, adaptation à IE.

Pourquoi adaptation à IE?
Car IE ne gère pas bien le CSS. Microsoft ne pense pas que quand on à le navigateur le plus utilisé au monde, on se doit de le rendre compatibles avec les lois qui régissent internet. Car oui, il y'a des lois qui régissent le web. Elles sont mise en place par le w3c. Ca concerne l'utilisation des langages dynamiques (PHP, Java, Ajax...), statiques (HTML) et l'affichage (CSS, Javascript). Pis sûrement d'autres choses. Tous les autres opérateurs se débrouille pour être un maximum compatible à tout ça, sauf IE.

ingrédients pour ce pas à pas:
- Firefox 2 (2.0.0.8, ou 2.0.0.9 les derniers majs)
- la web developper bar (moi je m'en passe plus. pouvoir modifier le CSS directement sur le navigateur, c'est magique)
- un blog de test (on a autant de blog qu'on veut, autant en profiter)
- un nouveau modèle, 1colonne à gauche
- un accès régulier au p'tit labo pour voir les pas à pas
- un peu de courage
- les fichiers images que je vous fournirai au fur et à mesure

heu... vouala, je crois que c'est à peut prêt tout...
J'aimerai bien que les personnes qui suivent le pas à pas se fasse connaître.
Postez donc un message pour dire que vous êtes paré, que ce mes explications sont clair/pas clair...
Si vous avez un problème, une question, mettez le lien vers le blog ou vous faites mumuse (d'ou l'importance du blog de test ;-)

Demain (la prochaine fois plutot), on attaquera. Vous aurez les images découpées et l'explication du découpage.

See ya!