Tuto - le p'ti labo

« juillet 2008
dim	lun	mar	mer	jeu	ven	sam
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

05 décembre 2007

[PasàPas]Transformation étape2

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.

Posté par riesseg à 18:31 - Tuto - Commentaires [1] - Rétroliens [0] - Permalien [#]

29 novembre 2007

[PasàPas]Transformation étape1

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 ;)

Posté par riesseg à 17:05 - Tuto - Commentaires [6] - Rétroliens [0] - Permalien [#]

28 novembre 2007

[PasàPas]Découpage

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...

Posté par riesseg à 21:29 - Tuto - Commentaires [1] - Rétroliens [0] - Permalien [#]

26 novembre 2007

[PasàPas]Le skin

'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!

Posté par riesseg à 23:53 - Tuto - Commentaires [3] - Rétroliens [0] - Permalien [#]

16 novembre 2007

[Tuto6b]Menu de navigation Droite

Et zou, quoi y s'passe du côté de ma barre de droite? on y trouve tous les autres blocs.
photo, liste des membres, contact par mail, liste des amis, flux RSS et liste des fils d'actualités.

La photo de l'auteur:

<CBOwner>
<BlogOwnerPictureURL>
<div class="image">
<a href="<$BlogOwnerProfileURL$>"><img src="<$BlogOwnerPictureURL$>" border="0" /></a>
</div>
</BlogOwnerPictureURL>
</CBOwner>

Une div image pour pouvoir positionner la photo tranquillou, et un lien bête vers la page de l'auteur (<$BlogOwnerProfileURL$>). L'image est bien entendu celle de Paramètre/Profil Public/Votre image de présentation. On lui supprime les bords en ajoutant le code de style dans la balise, mais on aurait pu (du) le faire dans la classe image tant qu'a faire.

La liste des auteurs:

<div class="title">Auteurs</div>
<ul>
<CBMembers>
<li><a href="<$BlogMemberProfileURL$>"><$BlogMemberAuthorNickName$></a></li>
</CBMembers>
</ul>

On parcours la base de donnée des membres du blogs (<CBMembers>) et on ajoute un lien vers le profil avec le nom du membre adéquat.

Le mail:

<div class="item">
<script type="text/javascript">

</script>
</div>

Une chouette petite classe item. Cette classe permet de gérer le texte et l'affichage des informations. Si vous ajoutez quelque chose, genre liens, ou commentaire perso, veillez à les mettre dans une div item, et non pas forcément un paragraphe. La div item à un espace au dessus et en dessous à la base ce qui évite également les sauts de ligne en html (<br />).
Après, dans note petite div, on trouve un script qui affiche le liens pour envoyer un courrier à l'adresse indiqué dans votre profil (<$BlogOwnerNoSpamEmailLink$>). L'utilisation du javascript permet de passer outre les robots qui parcours le net pour recueillir des adresses mail et envoyer des spams (courriel indésirables).

La liste des amis:

On va chercher dans votre base de donnée tous les Liens enregistrés sur la page Contenu/Lien d'amis. CB affiche cette liste d'amis sous forme de liste. Pratique étant donné que l'on peut diviser les liens en catégories.
De fait, chaque nouvelle catégorie(<$BlogFriendLinkCategoryName$>) donne lieu à la création d'une nouvelle liste. Ensuite dans les lignes de la liste, on mets un lien(<$BlogFriendLinkURL$>) vers un ami avec comme texte le champ Nom du site (<$BlogFriendLinkName$>). On fait tous les amis de la même catégorie, quand il n'yen a pus on ferme la liste et on passe à la catégorie suivante.

Le Flux RSS:

<BlogSiteFeed>
<div class="item">
<a href="<$BlogSiteFeedURL$>" title="Syndiquez ce blog">Version XML</a>
</div>
</BlogSiteFeed>

J'ai expliqué ici à quoi servait le flux RSS. Et bien ceci en est le code. <$BlogSiteFeedURL$> pointe vers http://votreblog.canalblog.com/rss.xml. Vous remarquerez qu'il se trouve dans une div item ;-)

La liste des fils d'actualités:

Permet d'afficher les X derniers titres de message d'un blog. Les blogs voulu sont ajouter dans Outils/Syndication, le nombre de message est fixé juste après avoir entré l'adresse du site ou du flux rss.
<$BlogFeedTitle$> est le nom du site (repris grace a l'information dans le <title></title> du <head> du site.
<$BlogFeedURL$> est l'adresse du flux rss.
<$BlogFeedHeadLines$> sont en fait les X derniers liens vers les articles du bloc concernés.

et voila.
Vous avez dans les tutos 6a et 6b le code de tous les blocs de CB. Très utile quand on est apssé en mode avancé et qu'on veut pas se battre avec le code de CB pour les retrouver.

Posté par riesseg à 23:58 - Tuto - Commentaires [1] - Rétroliens [0] - Permalien [#]

15 novembre 2007

[Tuto6a]Menu de navigations Gauche

Vi, je suis un peu fatigué, donc je ferai le second demain :-)
Donc au menu dans cette barre de navigation:
- la classe navlinks,
- la classe title,
- Calendrier, archives, categories, album photo, derniers messages, derniers commentaires.

Donc la class navlinks sert a la mise en forme de tout ce qui est dans le menu. Nénanmoins, on peut échapper a ce formatage en mettant du contenu hors de cette div. Elle a comme classe fille title qui se retrouve utilisée... pour tous les titres du menu... des blocs quoi. Mais elle sert également à définir le style des listes en appliquant un style à .navlinks ul et .navlinks li. Pourquoi je laisse .navlinks devant? Car si on mettait une liste dans un billet par exemple, le billet ne contenant pas la div navlinks, la liste ne prendrai pas le même style que celui des menus.
Enfin, nous avons .item pour ce qui n'est pas une liste.

Ensuite, le code des blocs commentés:
- le calendrier:

Généré automatiquement par CB, il affiche le calendrier dans une div avec id="calendar". Cette div comporte un tableau (table), portant en titre le mois en cours (caption), en titre de colonnes les jours de la semaine (th) puis les jours numérotés chacun dans une case individuelle (td) et sur plusieurs lignes (tr).
Au final, le code ressemble à cela:

<div id="calendar">
<table>
<caption> <a href ="lien vers mois précédent"><< </a>Mois Année </caption>
<tr> <th>dim</th><th>lun</th><th>mar</th><th>mer</th><th>jeu</th><th>ven</th><th>sam</th> </tr>
<tr><td> </td><td> </td><td> </td><td> </td><td>1 </td><td>2 </td><td>3 </td></tr><tr><td>4 </td><td>5 </td><td>6 </td><td>7 </td><td>8 </td><td>9 </td><td>10 </td></tr>
<tr><td>11 </td><td>12 </td><td>13 </td><td>14 </td><td>15 </td><td>16 </td><td>17 </td></tr><tr><td>18 </td><td>19 </td><td>20 </td><td>21 </td><td>22 </td><td>23 </td><td>24 </td></tr>
<tr><td>25 </td><td>26 </td><td>27 </td><td>28 </td><td>29 </td><td>30 </td><td> </td></tr>
</table>
</div>

-les catégories:

Une liste qui se génére automatiquement. CB repère les balises et va chercher dans la base de donnée les informations pour pouvoir implémenter la liste.

- les archives:

<ul>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<li><a href="<$BlogArchiveFileName$>">Toutes les archives</a></li>
</ul>

Même méthode de remplacement. <$BlogArchiveFilmName> indique la page http://pseudo.canalblog.com/archives/index.html.

- album photo:

<ul>
<CBAlbum>
<li>
   <a href="<$BlogAlbumURL$>">
   <img src="<$BlogAlbumCoverURL$>" width="75" height="75" alt="<$BlogAlbumTitle$>" /></a><br />
   <a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a>
</li>
</CBAlbum>
</ul>

et bien... je pense que vous commencez à comprendre. trouver les balises, aller faire une recherche dans la base de donnée...
On met le lien sur une image, le lien sur le titre de l'album en dessous, et voila. Si il y'a plusieurs album, on recommence à la balise <CBAlbum>.
Pis quand y'en a pus, on passe </CBAlbum> et on ferme la liste.

- Derniers Messages:

Bis repetitas. une liste des X derniers messages.

- Derniers commentaires:

Toujours tout pareil. un lien vers le com avec le titre du com en texte, puis le lien vers le billet avec le titre du billet en texte.

Vous constatez que le code est relativement simple. Si vous êtes en mode avancé et que vous voules les ajouter, il vous suffit d'un p'tit copié/collé. Vous pouvez modifier à loisir après... Mais ne touchez JAMAIS aux balises <CB[qqch]></CB[qqch]>. Elles sont très importantes, c'est sur elles que reposent tout le système du blog.

Valaaaa.

Posté par riesseg à 00:06 - Tuto - Commentaires [1] - Rétroliens [0] - Permalien [#]

13 novembre 2007

[Tuto5]header et bannière à la loupe

Le header:

Je vous ai déjà parlé des fonctions des meta et link, donc je vais expliquer les balises de CB. On les reconnait facilement grace au dollar ($) en premier caractère. La raison d'être de ces balises et de permettre la gestion automatique du blog. Grace à l'interface de modérateur, vous saisissez pas mal de champs. C'est ici qu'ils servent. Aller, je vous explique tout:
<$BlogPageTitle$> : Paramètres/Options Générales champ: Titre du blog:
<$BlogEncoding$> et <$BlogLanguage$> : Lors de la création du compte champ: Votre pays :
<$BlogDescription$> : Paramètres/Options Générales champ: Description courte : description affichée sur les moteurs de recherche et annuaires.
<$BlogKeywords$> : Paramètres/Options Générales champ: Mots Clés (séparez chaque mot par une virgule) : Permet le référencement du blog dans les moteurs de recherche.
<$BlogSiteFeedURL$> : Paramètres/Syndication et publicité champ: Publier les derniers messages au format RSS :

<$BlogEditURIURL$> : Mystère et boule de gomme...

<$BlogCSSURL$> : gérer automatiquement par Canalblog. se trouve dans un dossier du dossier http://votreBlog.canalblog.com/style/.

Valaaaaa. Vous savez maintenant a quoi correspond quoi dans le header. On va passer à la bannière.

topbar-logo et logolink sont à mettre en rapport avec Apparence/Style Général du blog/Barre du titre du blog: , car la div prend comme taille la taille de l'image. Cela permet d'avoir la bannière cliquable. Donc vous comprenez directement que <$BlogURL$> est l'adresse de votre blog, que vous défénissez lors de la création du blog.
topbar est à mettre en relation avec Apparence/Titre du blog /

eeeeeeeeeeeeeeeeeet... Bin voila, rapide et facile, on vient de voir les relations entre les balises CB et les paramètres du blog. On est encore loin des modifications du blog proprement dite... Mais avant de jouer aux sorciers, il faut connaître les ingrédients !

digère ça petit scarabé...

PS: désolé pour les couleurs un peu bizarre des fois... j'ai encore quelques petits problèmes avec CB... ...

Posté par riesseg à 22:12 - Tuto - Commentaires [1] - Rétroliens [0] - Permalien [#]

12 novembre 2007

[Tuto4]L'architecture du blog grace au code

Pour pouvoir modifier le design d'un blog, il faut regarder comment celui-ci est architecturé. Pour le blog, c'est facile. En règle général, il suit certaines normes sans lesquels les utilisateurs deviennent vite perdu. Néanmoins, pour ceux qui aiment sortir du lot, cela peut être un véritable bonheur...

Le blog se divise en 6grosses parties.

Le container: <div id="container">...</div>
Il contient tout le site. Vous constaterez alors qu'il porte bien son nom.

Deux petites choses a signaler:
Le fait de donner une id a notre div, c'est du CSS. J'en parle depuis le début, il fallait bien qu'il arrive.
On a deux possibilités en CSS, les classes (class) et les identifiants (id) La grande différence est qu'un id est UNIQUE sur la page, et une classe peut être affichée plusieurs fois. On les distingues dans la feuilles de style par un point (.) pour les classes et un dièse (#) pour les id.
Ca c'était pour la premiere petite chose, maintenant la seconde: si vous travailez votre site et rajoutez des classes ou id, veillez à toujours leur mettre un nom cohérant et simple. Cela permettra a n'importe qui de ne pas se perdre dans le code par la suite.

Pour en revenir au container, il permet de définir où se placera le blog. A savoir par défaut au centre, avec une largeur de 800px. On peut après facilement le déplacer, le mettre plus ou moins large, lui mettre une bordure ou pas, changer sa couleur etc, etc...

La bannière: <div id="topbar-logo">...</div> et <div id="topbar"> ...</div>
Oui, pour la bannière, il y'a 2 div. C'est pour simplifier la vie. topbar-logo est active quand vous mettez une image dans la bannière. Sinon, c'est topbar qui est actif. On peut après bien sur décider d'afficher les deux. Pratique pour avoir une image qui peut changer souvent sans avoir a devoir se casser trop la tête avec un logiciel de retouche.

Le menu gauche: <div id="leftbar">... </div>
Il contient les "blocs" comme les appelle CB. A part ça, rien de spécial à dire. Elle est positionné à gauche... Et si vous touchez le CSS, faites que ce soit toujours le cas. Sinon, hé bien créez un nouvel id spécifique.

Le contenu: <div id="content">...</div>
Hé bien c'est dans cette div que s'affichent tous vos billets tout simplement.

Le menu de droite: <div id="rightbar">...</div>
Comme pour leftbar, mais à droite. même remarque sur l'importance du nom/position.

Le pied de page: <div class="clear"> </div>
Un blog n'en a pas... Mais la classe clear au final a cette fonction... Si vous voulez en rajoutez un, retravaillez cette classe. Je n'en sais pas beaucoup plus sur le pourquoi du comment de sa présence ici... Mais c'est comme ça que je l'expliquerai en tout cas...

Voila, vous avez les 6 grosses boites du blog. C'est avec ça qu'on va s'amuser maintenant.
La chose et maintenant clair entre nous.
Prochaine étape:
header et bannière à la loupe

Posté par riesseg à 22:14 - Tuto - Commentaires [0] - Rétroliens [0] - Permalien [#]

10 novembre 2007

Tuto3b: les balises html (suite)

23h, c'est mon heure... minuit aussi... 'fin bref.
Passons maintenant en revue les balises utilisées par CB, pis p'tet une ou deux autres.

<div>: la balise div sert a représenter un layer (calque) ou une boite.
Dans cette boite, on peut y mettre n'importe quoi. texte, liens, images... elle n'a pas de propriété en soit. Mais osn utilisation devient géniale quand elle est associée au CSS. Alors on peut définir la largeur, la hauteur, couleur de fond, de la police... En concret, la bannière, les menus, le corps ou même les messages de CB sont contenus dans une div. Comme ça qu'on arrive a les placer n'importe ou, et à mettre n'importe quoi dedans.

<a url="">texte</a>: Le lien ! on met une url entre les quotes (") et un texte pour le liens... on clique sur le texte et on se retrouve à la dite url.

<h1>texte </h1>: balise de titre. y'en a jusqu'a <h6>. Elles ont des propriété de base, à savoir une taille, un espace au dessus et en dessous. Mais on peut les modifier à loisir. sur CB, ils n'utilisent que h1, h2 et h3. h1 pour le titre du blog dans la bannière, h2 pour la description dans la bannière et la date dans le billet, h3 pour le titre du billet.

<ul>
<li>liste1</li>

<li>liste2</li>
</ul> : on les trouve toujours ensemble: la liste ! ul pour indiquer le début et la fin d'un niveau (car on peut imbriquer plusieurs listes les unes dans les autres) et li définie le texte de la liste. Vous les connaissez bien, ils font les menus de CB, les listes de vos amis bloggeurs... et celles de vos billets

<img url="" alt="" />: une image. le liens vers l'image entre les quotes de l'url, et la description de celle ci entre ceux de l'alt. La description n'est pas obligatoire et bien souvent est ignorée. Mais pour les personnes mal voyantes, ou les gens qui naviguent en texte cela est primordial... sinon ils ne savent pas ce que montre l'image...

<p>texte</p>: la balise te paragraphe. Avec un p'tit espace avant et après, totalement paramétrable par la suite en CSS. Utilisé pour tout le texte de vos billets.

Et hummmm... on a fait le tour de toutes les balises html utilisées sur CB.
Prochaine étape:
- description de l'architecture du blog grace au code

Posté par riesseg à 00:16 - Tuto - Commentaires [0] - Rétroliens [0] - Permalien [#]

08 novembre 2007

Tuto3a: les balises html +MAJ

Je commence par la maj.
On m'a signalé qu'un des fichiers n'était pas accessible... Il l'est de nouveau, je viens de le re-uploader.

Ensuite, bin suite du tuto: les balises.
on a déjà vu les balises <html>, <head> et <body>.

Voyons un peu les autres.
2 grandes parties: les balises du <head> et les balises du <body>.
Le <head> servant à identifier une page web, on ne peut pas y mettre n'importe quoi. Voyons voir ce que CB y met, ce que l'on peut ajouter...

CB:

Je ne parlerai pas des balises avec un $ dedans... on y viendra plus tard.
Alors, norme xhtml: une balise qui n'encapsule pas de texte doit contenir un slash à la fin.
Mais si il y'a encapsulation, il n'y'a pas besoin de ce slash. ce que j'appelle encapsulation (ca ne doit pas etre le terme exact), c'est le fait de mettre quelque chose entre... pas très clair... demonstration:
<title><$BlogPageTitle$></title> >> il y'a quelque chose dedans. donc on a <title> [un truc] </title>
<meta name="Keywords" content="<$BlogKeywords$>" /> >> il n'ya rien... donc <meta [parametres] />

vala pour ça. Ensuite, on a 3 élements: le title, les meta et les link.
title >> titre (oui, faut être un minimum bilingue)
meta >> informations sur la page
link >> lien vers d'autre pages

Explications:

<title></title> titre du blog. Il s'affiche sur l'onglet, dans la barre du navigateur...
<meta http-equiv="Content-Type" content="text/html; charset=<$BlogEncoding$>" /> encodage de la page web. Si c'est des caracteres chinois, un alphabet cyrillique ou arabe etc, etc...
<meta http-equiv="content-language" content="<$BlogLanguage$>" /> langue du blog
<meta name="Description" content="<$BlogDescription$>" /> description du blog
<meta name="Keywords" content="<$BlogKeywords$>" /> mots clefs, pour les moteurs de recherche
<BlogSiteFeed>
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$BlogSiteFeedURL$>" /> lien RSS
</BlogSiteFeed>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$BlogEditURIURL$>" /> lien RSD
<link rel="stylesheet" href="<$BlogCSSURL$>" type="text/css" /> lien CSS

Vous devinez que les balises de CB servent a remplacer automatiquement le contenu par les parametres rentrés à droite à gauche. Ca sera le Tuto4.
Ensuite, dans le head, on peut mettre également le Javascript, l'auteur, le logiciel utilisé, la date de création... ... Tout ce qui informe du contenu de la page web.
Je ne développe pas plus, car une recherche sur votre moteur de recherche favoris le fera mieux que moi.

Posté par riesseg à 23:03 - Tuto - Commentaires [0] - Rétroliens [0] - Permalien [#]

« Accueil 1 2 Page suivante »

le p'ti labo

Testons le CSS sur canalblog Mode avancé, détail du code, explications et tutos. C'est tout ce que j'essaye de faire sur mon blog. Création de p'tits skins sympa aussi.