Au programme:

- Gestion de l’hebergement (30%)

- Création du script (10%)

- Design complet (30%)

- référencement (1%)

-Lancement, génération de trafic (0%)

le site du nom de El castor sortira normalement d’ici a noel.

Suite à cet article et devant l’intêret commun, je me suis penché sur une adaptation d’un menu dock en ajax pour wordpress. Je vous propose de visualiser le résultat final à cette url.Pour l’exemple, j’ai utilisé le thème par défault de wordpress mais il va de soit que l’on peut l’insèrer dans n’importe quel thème et également modifier à loisir les icônes du menu.

Si certain sont interessés par la démarche, je pourrais éventuellement faire un tutos pour l’intègrer à votre thème vous même.

Après pas mal d’heures de compréhension et de recherche, j’ai enfin terminé mon premier thème Worpress. J’ai beaucoup travaillé sur le CMS xoops et je dois reconnaitre que cela m’a apporté une expérience qu’il n’était pas négligeable d’avoir pour s’atteler à un design pour un blog tel que wordpress.

Que peut on dire de cette nouvelle expérience ?

Tout d’abord commençons par analyser l’arborescence d’un thème Worpress face à un thème xoops. Dès le premier regard on s’aperçoit de suite que Worpress n’utilise aucun fichier html dans sa structure alors que xoops lui en utilise. La totalité des fichiers de thème pour Worpress sont codés en php, Il est donc conseillé pour quelqu’un qui comme moi n’a aucune connaissance en php de partir sur un thème de base de Worpress afin d’être certain de ne pas faire des erreurs de scripts lors de la conception.

L’architecture d’un thème Wordpress:

Un thème pour wordpress n’utilise aucun tableau alors que xoops en utilise encore dans son architecture, il est donc fortement préconisé si l’on veut se lancer dans la création de thème de se documenter sur les Pages Web sans tableau où d’avoir une base solide en matière de css (Merci Jer !!!) afin de mener à bien votre projet !!!!

Mise en page d’un thème:

Alors là ce sera très court puisque tout tient en un seul mot : css !!!
En effet toute la mise en page des blocs et des images se fait exclusivement à partir du fichier de style, les pages dynamiques ne servant qu’à définir les blocs.

Méthode de travail:

Il n’y a pas de méthode de travail particulière. Tout est une question d’organisation et de méthodologie. Pour ma part voici en quelques mots la méthode que j’ai utilisé.
   J’ai tout d’abord reconstitué, à l’aide d’un thème de base de Worpress et d’un screenshot, le template avec mon éditeur graphique. De cette façon j’ai eu un aperçu précis de ce que pouvait être un template sous wordpress. A partir de là, j’ai créé mon propre template que j’ai découpé.
La phase suivante a été de modifier la structure du thème en utilisant le fichier de style afin de redéfinir blocs, colonnes et leurs propriétés (hauteur, largeur etc…).
La dernière phase consistait à réimplanter les images de mon thème dans les propriétés css des blocs.

S’il fallait faire une synthèse:

Je dirais que la route qui mène à la réalisation finale est pavée de div, padding, margin, et autres mais que cela constitue à terme une expérience enrichissante en matière de Design. L’aboutissement d’un thème ne se fait pas en une paire d’heures et l’on ne compte plus les valeurs entrées, effacées, modifiés afin d’arriver à un résultat probant. Il faut s’armer de patience et recommencer encore et encore sa mise en page. Comparativement à xoops, un thème wordpress est beaucoup moins “lourd” et bien mieux structuré. Cela reste néanmoins une tache ardue pour un profane de vouloir créér son propre thème.

1/  Vas sur un site qui traduit ton mot de passe usuel en md5 ou sha1

exemple: http://www.igalaxie.com

2/Découvre le chemin physique de ton serveur.

En effet, bien que ton url ressemble a http://www.monsite.com

l’url pour accéder à ton ftp est totalement diférente et varis d’un hebergeur a un autre.

Voici un petit script en php, à copier coller dans un fichier nommé info.php et placer a la racine de ton ftp.

<?php
print getcwd();
?>

une fois sur ton ftp, vas sur l’url ww.monsite.com/info.php et tu verras le chemin physique de ton serveur.

3/créé un fichier nommé .htaccess (exactement .htaccess, sinon ca marche pas ;)) avec ce code dedans.

AuthUserFile chemin physique de ton serveur/nom du repertoire ou tu vas cacher le mot de passe/.htpassword
AuthGroupFile /dev/null
AuthName ByPassword
AuthType Basic
<limit GET POST>
require valid-user
</Limit>

le script .htaccess est à placer direct a la racine du dossier a protéger.

4/.htpassword

Maintenant on va creer un fichier nommé .htpassword qui va contenir ton mot de passe version md5 ou sha1

retourne au petit 1/ et recopie le resultat renvoyer par le site proposé direct dans le fichier.

exemple  dieudelunivers:a1aRet0SgPp$ch847lhdgq/pa/6BhY0A8

enregistre le, et place le dans un dossier quelconque. la ou on l’attends pas mais surtout pas dans le dossier protéger!!! 

pense a préciser le chemin de ce dossier dans le .htaccess sinon ca marche pas

voila ton dossier est protégé! Attention tout de même, un mot de passe style “maman” n’est pas trés sécurisé hein essaye plutot un mot de passe style RtF58OPl1 .

Pour accéder a ton dossier proteger en md5 ou sha1; il suffit de pointer son url dans ton navigateur et de rentrer ton nom d’utilisateur (dans notre exemple dieudelunivers et ton mot de passe normal avant d’etre crypter en md5 ou sha1.

Qu’est ce que interface.js ?

C’est un script en ajax qui vous permettra d’utiliser un menu dock sur votre site

Exemple sur vistaide:

Pour commencer télécharger ce script ajax avec les images et le interface.js et jquery.js
attention: ce tutoriel et pour un thème sur une base du gabari morphogénésis

1ére étape appel du script.

ouvrer votre théme.html avec votre éditeur favoris et inserer ces deux lignes entre <head> et </head>

<script type="text/javascript" src="<{xoAppUrl /jseffects/jquery.js}>"></script>

<script type="text/javascript" src="<{xoAppUrl /jseffects/interface.js}>"></script>

2éme étapes css du script.

ouvrez votre style.css de votre théme avec votre éditeur ou bloc note et ajouter ces lignes :

/* dock - top */

.dock {

 position: relative;

 height: 50px;

 text-align: center;

 background: url(images/dock-bg2.gif);

 background-repeat: repeat-x;

}

.dock-container {

 position: absolute;

 height: 50px;

 background: url(images/dock-bg2.gif);

 padding-left: 20px;

}

a.dock-item {

 display: block;

 width: 40px;

 color: #000;

 position: absolute;

 top: 0px;

 text-align: center;

 text-decoration: none;

 font: bold 12px Arial, Helvetica, sans-serif;

}

.dock-item img {

 border: none;

 margin: 5px 10px 0px;

 width: 100%;

}

.dock-item span {

 display: none;

 padding-left: 20px;

}

3éme étapes modification du globalnav.html .

créer un nouveau fichier globalnav.html avec votre éditeur et ajouter ces lignes :

<!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>css Dock Menu</title>

</head>

<body>

<!–top dock –>

<div class=”dock” id=”dock”>

  <div class=”dock-container”>

  <!– menu en mode anonyme –>

   <a class=”dock-item” href=”<{xoAppUrl}>”><

img src="<{xoAppUrl /}>images/home.png" alt="Retour a l'accueil" />

<span>Accueil</span></a>

<{if !$xoops_isuser}>

   <a class="dock-item" href="<{xoAppUrl modules/news/}>">

<img src="<{xoAppUrl /}>images/news.png" alt="Articles,astuces,tutoriaux" />

<span>Articles</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/weblinks/}>">

<img src="<{xoAppUrl /}>images/links.png" alt="annuaire lien en dur” />

<span>annuaire</span></a>

<a class=”dock-item” href=”<{xoAppUrl modules/xoopspoll/}>”>

<img src="<{xoAppUrl /}>images/polls.png" alt="Sondage" />

<span>Sondage</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/xfguestbook/}>">

<img src="<{xoAppUrl /}>images/guestbook.png" alt="livre d'or" />

<span>Livre d'or </span></a>

   	  <a class="dock-item" href="<{xoAppUrl backend.php}>">

<img src="<{xoAppUrl /}>images/rss.png" alt="rss" />

<span>RSS</span></a>

 <a class="dock-item" href="<{xoAppUrl modules/contact/}>">

<img src="<{xoAppUrl /}>images/contact.png" alt="Nous contactez" />

<span>Contact</span></a>

 <{else}>

 <!-- menu en mode enregistré -->

   	  <a class="dock-item" href="<{xoAppUrl modules/news/}>">

<img src="<{xoAppUrl /}>images/news.png" alt="Articles,astuces,tutoriaux" />

<span>Articles</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/newbb/}>">

<img src="<{xoAppUrl /}>images/forum.png" alt="Forum" />

<span>Forum</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/extgallery/}>">

<img src="<{xoAppUrl /}>images/wallpaper.png" alt="fond d'écran" />

<span>Fond d'écran</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/wfdownloads/}>">

<img src="<{xoAppUrl /}>images/download.png" alt="télèchargement" />

<span>Télèchargement</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/weblinks/}>">

<img src="<{xoAppUrl /}>images/links.png" alt="annuaire lien en dur” />

<span>annuaire</span></a>

<a class=”dock-item” href=”<{xoAppUrl modules/xoopspoll/}>”>

<img src="<{xoAppUrl /}>images/polls.png" alt="Sondage" />

<span>Sondage</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/xfguestbook/}>">

<img src="<{xoAppUrl /}>images/guestbook.png" alt="livre d'or" />

<span>Livre d'or </span></a>

   <a class="dock-item" href="<{xoAppUrl modules/sitemap/}>">

<img src="<{xoAppUrl /}>images/sitemap.png" alt="Plan du site" />

<span>Site map</span></a>

   <a class="dock-item" href="<{xoAppUrl chat/flashchat.php}>">

<img src="<{xoAppUrl /}>images/chat.png" alt="t'chatez en direct" />

<span>T'chat</span></a>

   	  <a class="dock-item" href="<{xoAppUrl backend.php}>">

<img src="<{xoAppUrl /}>images/rss.png" alt="rss" />

<span>RSS</span></a>

  	  <a class="dock-item" href="<{xoAppUrl modules/contact/}>">

<img src="<{xoAppUrl /}>images/contact.png" alt="Nous contactez" />

<span>Contact</span></a>

   <{if $xoops_isadmin}>

   <!-- lien supplémentaire si je suis administrateur -->

<a class="dock-item" href="<{xoAppUrl modules/istats}>">

<img src="<{xoAppUrl /}>images/stats.png" alt="statistiques" />

<span>stats</span></a>

<a class="dock-item" href="<{xoAppUrl modules/myReferer}>">

<img src="<{xoAppUrl /}>images/referer.png" alt="Administration" />

<span>referants</span></a>

  <a class="dock-item" href="<{xoAppUrl admin.php}>">

<img src="<{xoAppUrl /}>images/admin.png" alt="Administration" />

<span>Admin</span></a>

  <{/if}>

  <{/if}>

  </div>

</div>

<!--dock menu JS options -->

<script type="text/javascript">

$(document).ready(

 	function()

 	{

 		$('#dock').Fisheye(

 			{

 				maxWidth: 50,

 				items: 'a',

 				itemsText: 'span',

 				container: '.dock-container',

 				itemWidth: 40,

 				proximity: 90,

 				halign : 'center'

 			}

 		)

}

 );

</script>

</body>

4éme étape transfert sur votre ftp.

Envoyer les images du dossier vers le dossier images qui ce situe a la racine de votre site.
Transférer les fichier jquery.js et interface.js dans le dossier jseffects qui ce trouve a la racine de votre site(si vous n’utilisez aucun package jseffects créer un dossier jseffects a la racine de votre site xoops).
Remplacer le fichier globalnav.html par celui que vous venez de créer (ce fichier ce trouve dans le répértoire de votre théme).
Transferer votre style.css modifier dans le répertoir de votre théme.
Transferer le fichier théme.html par celui que vous avez modifier dans le répertoir de votre théme.
Vous pouvez voir un exemple en action sur mon site vistaide

Si vous désirez mettre en avant vos wallpaper merci de mettre un lien vers la wallpaper dans un commentaire

J’agrémenterais plus ma galerie quand j’en aurais le temps .

Et surtout prochainement, une galerie des templates et thème de design creation

pour le moment voici la premiere galerie de wallpaper

Ainsi, vous pouvez maintenant afficher dans vos profils de forums une jolie signature au design soigné qui affiche le dernier ticket du blog ! (mise à jour automatique)

La voici :

Pour l’afficher dans la signature de vos forums préférés, rien de plus simple : il suffit juste d’entrer ce BBcode :

[url=http://design-creation.info][img]http://design-creation.info/sign.png[/img][/url]

Pour pouvez bien évidament également l’entrer dans vos sites, blogs si vous le souhaitez

Le code HTML :

<a href=”http://design-creation.info”><img src=”http://design-creation.info/sign.png” height=”77″ width=”400″ /></a>

Et voilà, votre sign’ est prête !

En anglais cela représente le “bac a sable”, en clair c’est quand notre amis google se prends pour un dieu et balance ton site a la page 501 pour l’expression clé que tu travailles depuis prets de 8 ans.

Pour faire simple, tu as trop optimisé ton site, google ta pris la main dans le sac, et te met une grosse pénalité dans les dents.

• Comment rentrer en sandbox ?

- trop de lien de qualité mediocre pointant vers le site (un partenariat avec des sites, en bas de pages sur 5000 pages non référencés par exemple)
- trop de lien mediocre d’un coup d’un seul (inscription gratuite a 1000 annuaires trop mal référencé, avec les mêmes descriptions… )
- trop de lien pas naturel (annuaire, footer …)
- densité de mots clé trop importante mettre (on accepte sur une page avec beaucoup de texte 5% comme densité environ)

- tes mots clés sont sans rapport avec ton contenu
- google penses que ton site n’est pas pertinent pour tes mtos clés (nombre page vu)
……

d’ailleur il serait interressant de voir l’impact de google analytic sur la sandbox, mais tout le monde se refuse de croire que google est si mechant )
cela peu toucher tous les sites! les nouveaux sont plus touchés, mais les vieux et même les poids lourds peuvent eux aussi etre punis! et c’est là qu’il faut en profiter pour se faufiller comme un diable…

• les effets de la sandbox sur le référencement:

on ne disparait presque totalement de google! (en clair, tu ne trouve plus ton site avec tes mots clé, uniquement avec le nom du ndd et encore :() sinon si tu disparais totalement c’est un blacklistage! et la tu es dans la caca jusqu’au cou!
en revanche, on perds un positionnement sur les divers mots clés et expressions.
par exemple je suis d’habitude entre la 11eme place et la 19eme place sur un mot clé trés concurentiels rapportant entre 1000 et 3000 visiteurs par jours. aprés la sandbox, je suis en page 51! du jours au lendemain!

• comment prevenir la sandbox :

- on reconnait que la sandbox arrive par une augmentation consequente du nombre de visiteurs sur certains mots clés.

dès lors que tes mots clés passent de la 195eme place a la 2nd du jours au lendemain, ATTENTION! travaille tes mots clés! travaille tes backlinks de qualité avec ce mots clés en accroche, et surtout essaye de garder au maximum les visiteurs que google envoi sur tes pages!!!!

• comment soigner la sandbox et sauver son référencement:

ben en faisant marche arriere. mais ca marche pas toujours.

ou alors en attendant. la sandbox peut duré de maniere indeterminé:
3 mois, 6 mois, 1 an, ou plus. Mais! si tu opte pour l’attente! sache que lorsque tu en sortiras, si as continué a optimisé ton classement serra meilleur que jamais!!! Enfin si tu en sors lol

il existe un autre moyen, beaucoup moins facile.
apparenté un peu a de l’entourloupe.

1/ repérer pourquoi on est entré en sandbox.
2/ acheter un ndd tout neuf, un hebergement tout neuf, sur un nouveau serveur de preference avec une nouvelle ip)
3/ transferer son site sandboxé ( b ) sur le ndd tout neuf ( c )
4/ faire une redirection 301 de chaque page de b vers C
5/ modifier tout ses bl vers le nouveau domaine
6/ demander a google une indexation trés rapide du site en question
7/ prier trés fort.

Le plus simple et rapide est tout de même faire marche arriere

1/ analyse des raison pour lesquelles on est rentré en sandbox

2/ réparer nos erreurs

3/demander a google de reindexé le site rapidos dans la console webmaster

4/ attendre quelques semaines / mois

Bon courage!

PS: je n’ais pas la science infuse en référencement, ceci est la retranscription de dizaine de page de lecture, de dizaine d’heure de travail… la solution avec le ndd de remplacement est extremement risqué! si vous vous faites prendre, c’est à vos risque et péril. Je ne pourrais bien sur aps etre tenu responsable, aprés tout c’est votre travail pas le mien

La sandbox est un passage difficile dans la vie d’un site interrnet, il faut s’armer de patiente

Une page HTML ne se compose pas seulement de portions de code et de tableaux mais elle requiert également le respect de certaines normes afin d’être lisible dans son intégralité par la plupart des navigateurs.

D’une manière générale les erreurs proviennent de façon récurente du codage des caractères accentués. Par exemples des lettres telle que À ou é. Voici donc les quelques principes à retenir pour mieux coder vos pages.

Tout d’abord il faut savoir que tout les caractères accentués et autres sont considérés comme des caractères spéciaux dans le language HTML et seront donc toujours marqués par le signe perluette & au début et par un point virgule ; à la fin.
On peut dès lors différencier quatres types d’accent:

-l’accents grave ( ` ) grave;
-l’accent aigu ( ´ ) acute;
-le trema ( ¨ ) uml;
-l’accent circonflexe ( ^ ) circ;.
On trouve également la cédille ( ¸ ) cedil;

De cette mainière le caractère à s’écrira donc & agrave; dans une page html.

Il est important d’utiliser ces caractères au moins dans l’entête du document pour que le résumé et le titre de chaque page soient affichés correctement dans les moteurs de recherche.

Pour être entièrement en conformité avec les normes du W3C il faut toujours utiliser les syntaxes décritent ci-après.

(more…)

Contrairement à la plus part de celles-ci, elle ne permet pas d’ajouter des fonctions au naviguateur mais elle agit directement sur les pages webs que vous visionnez grâce à des modifications en Javascript. Il devient donc possible de supprimmer ou ajouter du contenu…

De très nombreux scripts sont mis à disponibilité des utilisateurs.

Vous pouvez les trouver sur plusieurs sites mais le plus célèbre reste userscripts.org .

Pour vous donner quelques exemples, voici une faible portion de toutes les possibilités :

- Télécharger vos vidéos préférées sur google, youtube, dailymotion…

- Modifier des fonctionnalités sur Ebay

- Désactiver l’affichage de certaines publicités

et j’en passe !

L’utilisation est très simple, une fois l’extension installée il suffit de choisir votre script et de cliquer sur le bouton installer.

Liens utiles :

Installer Greasemonkey

Installer des scripts