L’anniversaire IMF à gérer, le design de Rock and Troll à refondre, une sciatique à soigner, les amis à soutenir, pas le temps, je n’ai pas le temps de maintenir Thèmes du Net à jour en ce moment.

Désolée, je reviendrai bientôt.

Les alertes de mise à jour fonctionnent bien sur WordPress. Le panneau d’administration de mon blog ouvert, il était difficile de la manquer, annoncée non seulement par WP mais également par mon super plugin WordPress Automatic Upgrade qui me permet de faire les mises à jour en 2 minutes et qu’il faut absolument que je vous traduise un jour !

Bon, une 2.6.3 est donc arrivée aujourd’hui et pour les détails, je vous invite à aller consulter WordPress francophone.

Dans le script d’annuaire FreeGlobes, les formulaires, que ce soit celui de contact ou ceux des soumissions de sites, sont réalisés à l’aide de tableaux. Or si l’on suit les recommandations du W3C (World Wide Web Consortium, qui s’occupe depuis 1994 de promouvoir les “standards du Web”), les tableaux ne devraient être utilisés que pour formater des données tabulaires et non pour une mise en page.

Selon le W3C, “Outre le fait que cela va à l’encontre de la sémantique du HTML, cela pose d’autres problèmes résidant principalement dans la difficulté de lire ou d’afficher le code des tableaux dans certains contextes (problèmes d’accessibilité, limite des dimensions des navigateurs, …)“.

Je vous propose donc ici un formulaire de contact sans tableaux, réalisé uniquement grâce à notre feuille de style et parfaitement valide.

Les balises à notre disposition :

• fieldset : cette balide permet de regrouper des champs de saisie et rend les documents plus accessibles.
• legend : elle permet de donner un titre à un “fieldset”. Nous ne l’utiliserons pas ici mais nous la retenons pour les formulaires de soumission.
• label : étiquette du champ (nom, email, etc.)
• input : champ de texte

C’est tout ce dont nous avons besoin.

Le code de notre formulaire qui était à l’origine :

<form action="index.php?do=contact" method="post">
	<table>
		<tr>
			<td valign="top">
				<{$lang.email}> :
			</td>
			<td>
				<input type="text" name="email" value="<{$email}>" />
			</td>
		</tr>
		<tr>
			<td valign="top">
				<{$lang.subject}> :
			</td>
			<td>
				<input type="text" name="subject" value="<{$subject}>" />
			</td>
		</tr>
		<tr>
			<td valign="top">
				<{$lang.body}> :
			</td>
			<td>
				<textarea name="body" rows="10" cols="43" ><{$body}></textarea>
			</td>
		</tr>
		<{if $CONFIG.use_antibot}>
			<tr>
				<td>
					<{$lang.security_code}> :
				</td>
				<td>
					<img src="<{$CONFIG.site_url}>/antibot.php" style="border: 0px;" alt="Anti-bot" /><br />
					<input type="text" name="antibotcode" value="" alt="" />
				</td>
			</tr>
		<{/if}>
		<tr>
			<td>
				<input type="hidden" name="action" value="send" />
				<input type="submit" value="OK" />
			</td>
		</tr>
	</table>
</form>

va devenir le suivant :

<form action="index.php?do=contact" method="post">
      <p>Les champs * sont obligatoires</p>
      <fieldset>
              <ul>
                  <li>
                      <label for="email"><{$lang.email}>* :</label>
                      <input id="email" type="text" name="email" value="<{$email}>" />
                  </li>
                  <li>
                      <label for="subject"><{$lang.subject}>* :</label>
                      <input id="subject" type="text" name="subject" value="<{$subject}>" />
                  </li>
                  <li>
                      <label for="body">Message* :</label>
                      <textarea name="body" rows="10" cols="43" ><{$body}></textarea>
                  </li>

                  <{if $CONFIG.use_antibot}>
                  <li>
                      <label for="antibot">&amp;nbsp;</label>
                      <img src="<{$CONFIG.site_url}>/antibot.php" style="border: 0px;" alt="Anti-bot" /></li>
                  <li><label for="message">&amp;nbsp;</label>
                      Recopier le code de sécurité ci-dessous*</li>
                  <li>
                      <label for="antibotcode">&amp;nbsp;</label>
                      <input id="antibotcode"  type="text" name="antibotcode" value="" alt="" />
                  </li>
                  <{/if}>

                  <li>
                      <label for="action">&amp;nbsp;</label>
                      <input type="hidden" name="action" value="send" />
                      <input type="submit" value="Envoyer" />
                  </li>
              </ul>
      </fieldset>
</form>

ce qui donne :

Ce n’est pas très joli mais tout à fait fonctionnel. Il ne nous reste qu’à appliquer quelques styles CSS pour rendre tout ceci agréable à l’oeil :

/*---- notre formulaire sera entouré d'un liseré, son contenu sera à 10px au moins des bords ----*/
#content form {
padding:10px;
border:1px dotted #ccc;
}
/*---- conteneur regroupant les champs ----*/
#content fieldset {
margin: 0;
padding: 0;
}
#content fieldset ul {
padding: 1em 1em 0 1em;
list-style: none;
}
#content fieldset li {
padding-bottom: 1em;
list-style: none;
}
#content fieldset.submit {
border-style: none;
}
/*---- étiquettes ou labels des champs ----*/
#content label {
display:block;
font-weight:bold;
color:#444;
margin:5px 0;
float: left;
width: 5em;
}
/*---- champs de texte ----*/
#content input {
padding: 2px;
margin: 2px;
border :1px dotted #ccc;
font:90% Verdana;
color:#666;
}
/*---- zone de texte (message) ----*/
#content textarea {
padding:4px;
font:90% Verdana;
border:1px solid #eee;
height:200px;
display:block;
color:#777;
}

Résultat :

Vous pouvez retrouver toutes les ressources en ligne pour la construction de ce thème sur cette page.

Le design de notre page d’accueil est maintenant bien avancé et si vous regardez votre annuaire en cours, vous verrez que les pages faisant appel au fichier sites.html sont pratiquement terminées.

Finissons-en avec cette série de pages : Nouveautés, Top Rank, Top Hits, Top Votes, Tag (la page qui s’affiche après une recherche par tag), Résultat de recherche.

Si vous ouvrez chaque page concernée dans Fresh, vous voyez que le titre se présente de cette façon :

<div id="message" style="text-align: center;"><{Titre de la page}></div>

Remplacez ce code dans votre thème Dum-Dum par :

<h2><{Titre de la page}></h2>

Voici le style de la balise h2 du contenu du site dans notre fichier style.css :

#content h2 {
color: #8D6649;			//couleur de caractère
font-family: "Trebuchet MS";	//police de caractère
font-size: 19px;			//taille de caractère
font-weight: normal;		//texte normal
font-variant: normal;		//police normale
text-align:center;			//centrage du texte
margin-bottom :1em ;			//marge de 1em sous le titre
}

C’est mon côté tatillon, mais en même temps il y a une explication. La balise “H” est utilisée pour les titres et le chiffre qui suit (de 1 à 6) indique la signification de ce titre dans la page. Il est donc logique de l’utiliser dans ce cas-là.

Remarque : pour une structure correcte de nos pages, nous devrions utiliser le balisage suivant :

<h1>Titre du site</h1>
<h2>Description du site</h2>
<h3>Titre des pages et des blocs dans la colonne latérale</h3>

Mais ce balisage ne peut pas être utilisé avec FreeGlobes car le titre des plugins fait appel à la balise h2 codée en dur dans les extensions. Nous utiliserons donc la structure suivante :

<h1>Titre du site</h1>
<h2>Description du site, Titre des pages et des blocs dans la colonne latérale</h2>

Voilà, normalement vos pages Nouveautés, Top Rank, Top Votes, Top Hits, Recherche par tag et Résultats de recherche devraient être terminées.

D’autres pages sont faciles à finir et nous allons les faire de suite, histoire de s’en débarrasser.

Catégories (allcats.html)
Remplacez :

<div id="message" style="text-align: center;">
<{$lang.allcats}>
</div>
<br />

par

<h2><{$lang.allcats}></h2>

Recherches (keywords.html)
Remplacez :

<div id="message" style="text-align: center;">
<{$lang.top_search}>
</div>
<br />

par

<h2><{$lang.top_search}></h2>

Profitez-en aussi pour remplacer dans cette page et dans toutes celles où vous trouverez ce code (qui correspond à la pagination au cas où le nombre de sites affichés nécessiterait plusieurs pages) :

<div style="text-align: center;">
<{$pagenav}>
</div>

par

<div class="pagenav"><{$pagenav}></div>

Vous définirez la nouvelle classe .pagenav dans votre style.css ainsi :

.pagenav {
text-align :center ;	//centrage du texte
margin :1.5em 0 ;	//marge au-dessus et au-dessous de la navigation par page
}

Résultats de recherche par formulaire (recherche.html)
Remplacez :

<div id="message" style="text-align: center;">
<{$total_results}>&amp;amp;nbsp;<{$resultsfor}>&amp;amp;nbsp;
<h1><{$searched_expr}></h1>
</div>
<br />

par

<h2><{$total_results}>&amp;amp;nbsp;<{$resultsfor}>&amp;amp;nbsp;<{$searched_expr}></h2>

Recherche par tag (tag.html)
Remplacez :

<div id="contenu">
<div id="tag" style="text-align: center;">
<{$sites|@count}> <{$lang.sites_for_this_tag}> : <h1 style="display: inline; font-size: 14px;"><{$tag}></h1>
</div>
<br />
<br />
<{include file="sites.html"}>
</div>

par

<h2><{$sites|@count}> <{$lang.sites_for_this_tag}> : <{$tag}></h2>
<{include file="sites.html"}>

Contact (contact.html)
Après <{include file=”header.html” }>

Ajoutez :

<h2>Contactez-nous</h2>

Le formulaire est défini dans notre style.css par :

#content form {
padding:10px;
border:1px dotted #ccc;
}
#content label {
display:block;
font-weight:bold;
color:#444;
margin:5px 0;
}
#content input {
padding: 2px;
margin: 2px;
border :1px dotted #ccc;
font:90% Verdana;
color:#666;
}
#content textarea {
padding:4px;
font:90% Verdana;
border:1px solid #eee;
height:200px;
display:block;
color:#777;
}

Ces attributs s’appliquant également aux formulaires de soumission de sites et à la page boost.html, on verra à faire quelques modifications spécifiques à ces derniers.

Soumissions fermées (submission_closed.html)
Remplacez :

<br />
<div style="text-align: center;">
<p style="color: red; font-size: 14px;"><{$lang.submission_closed}></p> <{$lang.submission_closed_help}>
</div>
<br />

par

<h2><{$lang.submission_closed}></h2>
<p><{$lang.submission_closed_help}></p>

Confirmation de soumission (confirmation.html)
Remplacez :

<div id="message">
<{$message}>
</div>

par

<p><{$message}></p>

La page d’erreur 404 (404.html)
Remplacez :

<br />
<div align="center">
<font-size=5; color="red;"><{$lang.error404}></font><br /> <{$lang.error404_help}></div>

par

<h2><{$lang.error404}></h2>
<p><{$lang.error404_help}></p>

En ce qui concerne cette dernière, pour que l’internaute tombe dessus s’il fait une erreur sur votre site, il faut ajouter dans votre fichier .htaccess à la racine de votre annuaire :

ErrorDocument 404 http://adresse-de-votre-site/index.php?do=404

Voilà, je ne crois pas avoir oublié grand-chose mais si c’était le cas, n’hésitez pas à le signaler dans les commentaires.

La prochaine fois, nous nous occuperons des pages de soumission des sites.

Bonne journée à tous

Ressources en ligne sur cette page

Maintenant que nous avons notre template, une bonne partie du travail est faite. Il reste à traiter le contenu des pages de notre annuaire mais il s’agit somme toute de fignolage.

Dans notre fichier header.html, on trouve à la fin cette ligne :

<div id="content">  (notez que la balise est refermée dans le fichier footer.html)

Il s’agit du conteneur de contenu dont il va falloir ajuster la position et les dimensions dans notre fichier style.css, en tenant compte du fait que l’on n’a plus qu’une seule colonne latérale et de la largeur de celle-ci.

Dans Fresh, le design est fluide et varie de 760px à 1200px en largeur, les colonnes latérales gauche et droite font 170 px de largeur d’où les valeurs suivantes :

#content {
margin:0 200px 0 200px;  // #content doit être à 200px des bords gauche et droit
padding:20px 0 0 20px;   // le contenu doit être à 20px des bords haut et gauche
}

ce qui donne :

(#content est bordé de rouge et son contenu de bleu pour repérage)

Dans Dum-Dum, le site fait 760px de large et la largeur de la colonne latérale droite est de 223px. On va donc donner les valeurs suivantes au #content :

#content {
margin:0 240px 0 0;        // #content doit être à 240px du bord droit
padding:20px 0 0 20px;     // le contenu doit être à 20px des bords haut et gauche
}

ce qui donne :

Ceci étant réglé, examinons le code d’un fichier essentiel dans le répertoire de notre thème qui se nomme main.html. Il permet de définir quel contenu doit être affiché selon que la page appelée est l’accueil ou une catégorie.

<{include file="header.html" }>   //toutes les pages incluent l'en-tête du site
<div style="text-align: center;">                //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<{if isset($smarty.get.dir) }>                     // si l'on est dans une catégorie
<h1 style="text-align: center; font-size: 14px;">     //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<{$way_to_cat}>                        // on affiche le chemin de cette catégorie
</h1>
<br />
<{/if}>
<{include file="categories_alternate.html"}>                    //on inclut la liste des catégories
<hr style="background-color: #CCC; color: #CCC; border: 0px; height: 1px;" />     //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<br />
</div>
<{if !$smarty.get.dir}>                                    //si la page affichée n'est pas une catégorie
<div style="text-align: center;">                   //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<p style="border-bottom: 1px dashed #ccc;">     //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<{$lang.newsites}>                        //on affiche le titre Nouveautés
</p>
</div>
<br />
<{/if}>
<{if isset($nosite)}>                                    //s'il n'y a aucun site inscrit
<div id="message" style="text-align: center;">      //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<p>
<{$lang.nositeincat}>                    //on affiche le message "Il n'y a pas encore de site dans cette catégorie"
</p>
</div>
<{else}>                                        //sinon (s'il y a au moins 1 site)
<{include file="sites.html"}>                            //on affiche la liste des sites
<{include file="pages.html"}>                            //on affiche la pagination s'il y a plusieurs pages
<{/if}>
<{include file="footer.html"}>                // toutes les pages incluent le pied de page du site

Remarque : quand je signale que le code est mauvais parce qu’il ne devrait jamais y avoir d’attributs de style en dehors des feuilles de styles, ça ne veut pas dire que je condamne qui que ce soit de le faire. On fait ce qu’on peut parfois

Occupons-nous d’abord de la page d’accueil.

Le contenu de la page d’accueil standard fait appel à deux autres fichiers :

• categories-alternate.html => liste des catégories
• sites.html => liste des sites inscrits en fonction des critères demandés

Si on laisse les styles de fresh, voici ce qu’on obtient :

Bon, ce n’est déjà pas si mal. Juste quelques petits changements de couleurs et d’images pour rendre les choses un peu plus dans le style du thème et ce sera très joli. Tiens, j’ai toujours rêvé d’inclure Garfield dans un thème, les couleurs s’y prêtent on dirait

Ressources en ligne sur cette page

Donc ça y est, vous avez trouvé un design sur la toile pour votre annuaire mais manque de bol, il n’est pas adapté à FreeGlobes mais à un autre script. Qu’à cela ne tienne, la transposition n’est pas si compliquée.

Exemple avec le thème Dum-Dum réalisé pour WordPress par Gaby, un thème à deux colonnes très bonbon acidulé et dont la traduction française est accessible sur Thèmes du Net.

Première chose à faire, télécharger le thème Dum-Dum et le décompresser. Vous allez voir en ouvrant le répertoire décompressé que l’arborescence d’un thème WordPress est relativement similaire à celle de FreeGlobes.

Dans le répertoire des thèmes de VOTRE FreeGlobes, créez un nouveau dossier que vous appellerez, par exemple, dum-dum-fg. Copiez-y tous les fichiers et répertoires du thème Fresh.

Dans le répertoire images de votre nouveau dum-dum-fg pour FreeGlobes, copiez toutes les images du répertoire images du thème Dum-Dum de WordPress. Beaucoup d’ “images” et de “dum-dum” dans cette phrase, j’espère que vous n’êtes pas perdus.

Voilà, c’est tout pour la préparation. Que vous soyez en ligne ou en local, pensez à modifier le thème actif de votre annuaire à l’aide du plugin adéquat pour voir les modifications que vous effectuerez au fur et à mesure.

Comparaison des fichiers style.css de Fresh pour FreeGlobes et Dum-Dum pour WordPress :

Feuille de style originale de Fresh (commentée)
Feuille de style originale de Dum-Dum

Dans un premier temps, occupons-nous du template, c’est à dire ce qui est commun à toutes les pages du site. Sont concernés les fichiers de FreeGlobes header.html et footer.html et style.css bien sûr.

Le but du jeu : passer de ça

à ça

La plus simple manière de procéder à mon avis est de coller le plus possible à la feuille de style de Fresh, et non de tenter d’y intégrer les “div” et “class” de la feuille de style du thème WordPress. Ca vous évitera bien des erreurs et des oublis, car certains styles sont figés dans FreeGlobes, notamment au niveau des plugins.

La seule grosse différence entre Fresh et Dum-Dum finalement, c’est la disparition de la colonne latérale gauche dans ce dernier. Tous deux ont un en-tête, une navigation horizontale, une colonne latérale droite et un pied de page. C’est donc relativement simple à adapter.

Design global : voir la feuille de style
Le innerwrapper est ici inutile, autant ne pas s’en encombrer.

Dans header.html, supprimer <div id=”innerwrapper”> ainsi que l’avant-dernier </div> dans footer.html.

En-tête : #header

Par comparaison avec la feuille de style du thème pour WordPress, supprimez dans la feuille de style ce qui ne sert à rien : #header h2 a (la description n’est pas un lien), #header input, #header input:hover, #header input:focus, #header form (pas de formulaire dans cet en-tête).

Dans header.html, on sort la navigation horizontale du header donc on ferme le header par un </div> et on retire celui qui se trouve après </ul>.

Navigation horizontale : ici on va utiliser les classes du thème Dum-Dum .menu1 et .menu2 à la place de #header nav et #header subnav (voir Navigation horizontale dans la feuille de style)

On supprime tous les #header #nav, #header #subnav de style.css.
Dans header.html, on remplace juste <ul id=”nav”> par
<div class="menu1">
<div class="menu2">
<ul>
sans oublier de fermer les balises :
</ul>
</div> <!-- fermeture de .menu2 -->
</div> <!-- fermeture de .menu1 -->
Colonne latérale gauche : elle disparait dans Dum-Dum donc on va transporter le contenu de “sidebar” dans sidebarright. Dans header.html, remplacer <div id=”sidebar”> par <div id=”sidebarright”>, supprimer la balise de fermeture </div> de “l’ex sidebar” ainsi que le <div id=”sidebarright”> qui suit. On se retrouve avec une seule colonne latérale droite.

Colonne latérale droite : #sidebarright.
On lui attribue les styles de la .sidebar de wordpress et dans header.html, on attribue les nouvelles classes en fonction de l’image de fond qu’on désire et c’est là qu’il faut faire très attention à conserver les titres en h2 et les listes en .subnav.

Pied de page : il n’est pas très compliqué à transposer, il suffit de comparer les feuilles de style de chaque thème et le fichier footer.html de Fresh et footer.php de Dum-Dum pour s’apercevoir qu’ils sont très similaires : #footer correspond à .footer, #footer-infos à .footertext.

Ressources en ligne sur cette page

Dans tous les cas, si vous avez un problème, commencez par vérifier que toute balise ouverte est bien fermée et au bon endroit.

WordPress 2.7 est proche de sa sortie selon les développeurs. Afin de contenter le maximum de personnes, l’équipe a décidé de les questionner sur leurs préférences. Un premier sondage a été réalisé sur la navigation dans la colonne latérale gauche, nouvelle organisation du tableau de bord plébiscitée par les utilisateurs.

C’est maintenant les emplacements du formulaire de recherche et du menu de favoris comprenant un bouton “Ajouter un nouvel article” (nouvelle fonctionnalité) qui sont mis au vote, ainsi que la forme que doit prendre l’horodatage d’un article publié, non publié ou programmé.

Ce second sondage - en anglais - est accessible sur cette page, mais dépêchez-vous si vous êtes intéressés, le premier sondage n’a été ouvert que trois jours et celui-ci a été mis en place le 28 septembre.

La version 2.7 de WordPress devrait être dans les bacs en novembre 2008.

Le thème pour FreeGlobes Rockinweb 2.0, adapté d’après le thème pour WordPress de Cory Miller, arrive dans sa nouvelle version. Il est désormais compatible avec la dernière mise à jour en date du script FreeGlobes que vous pouvez trouver sur le site officiel.

Ce qui a changé dans le thème :

Pour simplifier les modifications du thème, les fichiers concernant la navigation horizontale et les colonnes latérales ont été séparés du fichier header.html. Vous les trouverez désormais dans les fichiers menu.html, l-sidebar.html et r-sidebar.html pour la navigation horizontale, la colonne latérale interne et la colonne latérale externe respectivement.

Le lien vers “Accueil” se trouve maintenant dans le menu horizontal.

Le terme “Catégorie(s)” du menu horizontal et de la colonne latérale a été remplacé “en dur” par “Catégories”. Il est en effet rare qu’un annuaire n’ait qu’une seule catégorie et ces ( ) me choquaient.

Le conteneur de tags ne s’affiche que si le Tag Cloud est activé. Auparavant, la boite jaune était visible même sans tags.

Ce thème ayant été revu pour fonctionner avec la dernière version de FreeGlobes du 27 juillet 2008, il contient le boost site par Allopass.

Pour utiliser ce thème, merci de respecter les liens vers Cory Miller, le designer, et FreeGlobes, pour la conception du script. Le lien vers Thèmes du Net n’est pas obligatoire, ça dépend de votre conception du travail et du partage sur internet. En revanche, il DOIT IMPERATIVEMENT être supprimé si vous utilisez le design pour un site adulte.

Les designs de Thèmes du Net sont fournis sans publicité, inutile donc de perdre du temps à rechercher un éventuel piège, il n’y en a aucun. Ils sont réalisés directement sur la base du thème Fresh inclus dans le package d’origine.

Démo du thème
Télécharger le thème (.pkg.gz) : Rockinweb-fg 2.0 (135)

N’hésitez pas à laissez un commentaire si vous avez le moindre problème.

Il ne se passe quasiment pas un jour sans que libretto et le blogueur masqué ne nous fasse profiter de leur travail. A la recherche permanente des thèmes WordPress les plus somptueux et dans l’air du temps, c’est 5 nouveaux thèmes traduits en français qui nous sont proposés et intégrés dans la galerie de Thèmes du Net aujourd’hui.

Je vous invite donc à aller découvrir sans plus tarder ces 5 nouveaux thèmes de toute beauté qui conviendront à bien des contenus de blogs.

Timeless

Furry Family

Floral Belle

Royal Blue

Red Passion

Abonnée Alice, je suis attentivement les nouvelles du fournisseur d’accès internet via la communauté d’utilisateurs AliceBox News. Au passage, pour les personnes intéressées, j’ai installé le flux RSS de leurs articles dans la colonne latérale de Thèmes du Net.

Dernier article en date très intéressant, AliceBox News a mis en place le recensement d’une certaine catégorie d’abonnés.

En effet, il semble que les internautes qui utilisent un modem de marque Sagem d’un certain type sous certains systèmes d’exploitation - Windows Vista, Windows XP SP3 - ne peuvent se connecter en WiFi.

La communauté va donc établir une liste de ces abonnés qui sera remontée auprès des services d’Alice et, après des vérifications minutieuses, ils se verront probablement proposer un échange de modem par le fournisseur d’accès internet.

Pour toute information, merci de consulter l’article sur le portail AliceBox News.

Pour ma part, je ne suis pas concernée, utilisant un Pirelli