La facilité, un seul mot de passe universel ... pas génial

Vous décidé un nom d'utilisateur universel ainsi qu'un mot de passe efficace pour l'ensemble de vos services que vous utiliser. Yahou, c'est pas compliquer, un seul mot de passe à retenir.

Le problème dans ce cas, c'est qu'il deviens très facile si vous arrivez un jour sur un site malveillant d'obtenir votre mot de passe. En plus la personne aura probablement votre courriel donc elle pourra utiliser votre service de courriel et regarder des données qui peuvent parfois être très personnels.

Vous êtes coriace, vous utilisez quelques mot de passe différents

La deuxième solution consiste à utiliser différent niveau de mot de passe en ayant celui de notre courriel différent de tous. Donc si vous entrez sur un site malveillant et que vous entrez votre mot de passe de niveau 2 ou 3, vous ne donnez pas nécessairement accès à votre courriel puisque ce mot de passe est unique.

Le problème est que maintenant, vous ne vous rappelez plus lequel mot de passe que vous avez mis sur tel site donc la mémoire commence à faire défaut.

La solution ultime à votre problème

Attention : N'utilisez pas cette solution tel quel, adapté là selon vos besoins, ce n'est qu'une ligne directrice

Premièrement, vous continuez d'utiliser un nom d'utilisateur universel voire un courriel également. Ensuite, vous vous créé une formule personnel qui prend en compte les éléments suivants:

• Une majuscule
• Un chiffre que vous n'oublierai jamais de 2 ou 3 chiffre
• Un partie du nom de domaine du services que vous utilisez ou bien du nom du logiciel, de manière subtile.

Maintenant vous créez votre formule ... voici un exemple afin de bien comprendre :

Je créé un compte sur facebook, et le nom de domaine est www.facebook.com

Donc je créé ma formule personnel qui est la suivante : la première lettre du nom de domaine + un premier chiffre unique + les deux premières lettre de l'un de mes enfants mais en majuscule + un mot clé que j'aime + le deuxième chiffre unique + la dernière lettre du nom de domaine.

Voici ce que ça donnerais si mon mot clé est kiwi :

f9TRkiwi9k

Voici quelques autres exemple de la même formule sur d'autres domaine :

• www.google.com : g9TRkiwi9e
• www.msn.com : m9TRkiwi9n
• www.patrickperron.com : p9TRkiwi9n
• L'ouverture de mon windows : w9TRkiwi9s

Vous voyez il y a toujours une variante dans mes mots de passes et je n'ai qu'a me rappeler de ma formule et je ne peux pas oublier mes mots de passes.

Veuillez noter que si vous intégrez 3 lettre du nom de domaine dans votre formule, essayez de ne pas mettre tous les lettres tel quel, essayez de soustraire les positions des lettres, comme quoi un b deviendrais un a ou bien un u deviendrais un t. Aussi, attention de ne pas mettre 4 lettre du nom de domaine car certain site web comme msn.com n'ont que 3 lettres. 

Maintenant, à vos formules et surtout ne la dites surtout pas ;-)

Voici comment procéder:

1. Premièrement, ouvrez un nouveau document. Sélectionner la largeur et la hauteur de votre image. Plus votre image est grande mieux c'est. Avec une grandeur de 1000 pixels x 1000 pixels cela est très raisonnable. Essayer de ne pas trop prendre des images avec trop de détails, cela alourdi de beaucoup le site web que vous possédez.
    
2. Ensuite, ouvrez une autre image, soit de texture ou bien une photo de pierre, d'eau, de gazon, d'écorce etc. et sélectionné la partie que vous souhaitez utiliser. Utiliser les touches CTRL+C (pour copier la sélection) et retournez dans votre document initial.
    
3. Maintenant appuyez sur les touches CTRL+V (pour coller la sélection) et arranger l'image pour qu'elle occupe toute l'espace de votre image d'arrière-plan. Vous pouvez ajouter des effets, exemple: des flous, éclaircir l'image, assombrir, changer la teinte etc.
    
4. Aller dans la section Filtre(Filter) / Autres(Other) / Excentration (Offset) une petite fenêtre s'ouvrira. Assurez-vous d'avoir cochez la case Aperçu (Preview) et vous pouvez décaler votre image, soyez généreux dans le décalage.

   
   
    

5. Ensuite accepter. Prenez l'outil tampon (Clone stamp) et rebouchez la texture qui à une ligne créé par l'excentration. A noter que l'outil tampon fonctionne avec la touche ALT enfoncer pour sélectionner la partie initiale.
    
6. Une fois la ligne d'excentration disparut, recommencer à partir de la section 4 une deuxième fois et jusqu'à ce que vous ne voyez plus de ligne de démarcation. Voilà, votre arrière plan est terminé, reste à le sauvegarder en mode web et le tour est joué. Voici un exemple du résultat obtenu.

   

N.B. Pour la section Excentration, je ne suis pas sur de la traduction Française du logiciel.

Depuis longtemps je cherche un moyen de créer ma propre web radio mais sans aucun résultat. Dernièrement j'ai fait la découverte d'un site web permettant de créer sa propre web radio gratuitement ... Radionomy.com.

Si vous ne connaissez pas encore ce site web, alors je vous suggère d'allez y faire un tour. Il est réellement très complet et vous permettra vous aussi d'avoir votre radio en ligne.

Alors retrouvons-nous sur la page des fans de Mordu de la pêche sur Facebook

Pour votre information, Friend's Value est rendu à 24 000 utilisateurs inscris et 2500 personnes y vont à chaque jour. Ce chiffre ne cesse d'augmenter et j'espère atteindre les 100 000 personnes par jours. Le jeu n'est agé que de 5 semaines. Bonne visites ;-).

Digsby permet aussi de rester en contact avec votre messagerie et vos réseaux sociaux comme Facebook, Twitter ou MySpace.

Si vous en avez marre d'avoir 3 ou 4 programme de messagerie, utilisé Digsby. Petit détails, il n'est pas encore disponible en français.

Tous les tutoriaux seront refait sur ce site. Il sont maintenant plus clair à lire pour vous tous. Les anciens liens fonctionnent toujours mais sont redirigé vers ce site web.

Si vous avez des liens vers nubiumgraphik, vous seriez généreux de le changer pour patrickperron.com.

Merci a tous.

Voici un exemple de ce que cela peux donner, je vous conseils de ne pas utiliser ce script si vous avez utilisé des "CSS Reset". Et n'utilisez pas une tag "DIV" général en "CSS" appliquant la position "relative" à tous

Voici le code javascript de ce Preloader.

 
 
// Vous pouvez changer la vitesse (speed) (1 == tres rapide)
// Vous pouvez changer la qualité de la transition (1 == best)
// Plus la transition est de qualité, plus la rapidité ralenti et doit être augmenté
var speed = 10;
var transition = 10;
 
// Dimensions du preloader en GIF animé
var GIFpreloadLargeur = 20;
var GIFpreloadHauteur = 20;
 
var timer= 0;
var opaciT = 100; 
 
function opacity()
{
    opaciT = opaciT - transition;
 
    var object = document.getElementById("preloader").style;
    object.opacity = (opaciT / 100);
    object.MozOpacity = (opaciT / 100);
    object.KhtmlOpacity = (opaciT / 100);
    object.filter = "alpha(opacity=" + opaciT + ")"; 
 
	if (opaciT <= 0)
	{
		document.getElementById("preloader").style.visibility="hidden";
		clearInterval(timer);
	}
 
}
 
function preload()
{
	if (document.getElementById)
	{
		document.getElementById("preloadIMG").style.visibility="hidden";
		timer = setInterval("opacity()",speed);
	}
 
	else
	{
	   	if (document.layers)
		{
			document.preloadIMG.visibility = "hidden";
			timer = setInterval("opacity()",speed);
	    }
	        else
		{
			document.all.preloadIMG.style.visibility = "hidden";
			timer = setInterval("opacity()",speed);
		}
	}
}
 
// GÉNÉRER LE CSS POUR LE PRELOADER
var myCSS;
myCSS = "
<style type=\"text/css\">";
 
myCSS += "html, body { height:auto; margin:0px; padding:0px;}";
 
myCSS += "#preloader {";
myCSS += "position:fixed;";
myCSS += "background-color:white;";
myCSS += "width:100%;";
myCSS += "height:100%; ";
myCSS += "display:block;";
myCSS += "z-index:100000;";
myCSS += "}";
 
myCSS += "#preloadIMG {";
myCSS += "position:absolute;";
myCSS += "left:50%;";
myCSS += "width:" + GIFpreloadLargeur + "px;";
myCSS += "height:" + GIFpreloadHauteur + "px;";
myCSS += "margin-left:-" + (GIFpreloadLargeur / 2) + "px;";
myCSS += "top:150px;";
myCSS += "}";
 
myCSS += "</style>
 
";
 
// ÉCRITURE DES CSS
window.document.write(myCSS);
 
// ÉXÉCUTION
window.onload = function() { preload(); }
 

Maintenant, veuillez insérer ce code juste après la tag BODY. Prenez notes que l"image du preload doit être mise sur votre serveur et que la source doit être changé tout dépendant de l"edroit ou se trouve votre image.

 
<div id="preloader">
<div id="preloadIMG"><img src="loading.gif" alt="" /></div>
</div>
 

Voilà, maintenant vous possédez un preloader très chic pour vos pages web lourdes.

Voici un exemple de ces bulles

Qu'est-ce qu'un cadavre exquis graphiqueC'est une composition graphique qui se suit et qu'on ne sait jamais qu'est-ce qu'on aura. ?

Voici à quoi l'image PNG pour la création de cette bulle d'information ressemble. Cet aperçu à directement été pris dans photoshop.

Cliquez içi pour télécharger la vrai image

Maintenant, voici le code pour créé cette bulle d'information

Le code HTML

 
 
<a href="votreDestination" class="info">Le nom de votre lien
<span>La description de votre lien avec un maximum de 130
caractère dans ce cas si</span></a>
 

Le code CSS

 
 
a.info {
    position:relative; /* Très important */
    background:none; /* Important pour le fonctionnement sur IE */
    z-index:10;
}
 
a.info:hover {
    z-index:20;
}
 
a.info span {
    display:none;
}
 
a.info:hover span { /*la tag SPAN apparaitra avec l'effet hover*/
    display:block;
    position:absolute;
    top:18px;
    left:10px;
 
    /* Éléments pour positionner le texte dans la bulle */
    /* Vous pouvez aussi utiliser le padding:24px 8px 5px 25px; */
    padding-left:25px;
    padding-top:24px;
    padding-bottom:5px;
    padding-right:8px;
    width:205px;
    height:45px;
 
    /* Style du character dans la bulle */
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-style:italic;
    font-size:10px;
    color:#999999;
    text-decoration:none;
    text-align:justify;
}
 
/* Pour avoir un beau background de bulle avec PNG transparent*/
a.info:hover>span {
background-image:url(images/bgInfo.png);
}
 
a.info:hover span {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/bgInfo.png",
sizingMethod="crop");
}
 

Voilà, j'espère qu'avec ce tutoriel vous serez en mesure de créé cet effet de bulle à la 2.0. Si vous avez des questions, n'hésitez pas à les poser sur notre forum. Bonne chance !

Je suppose qu’un fichier xhtml à été créé ainsi qu’un fichier CSS et que celui-ci à été attaché de la manière d’un @import ou d’un link.

Commençons d’abord par le « body » de la page XHTML :

Premièrement, coder de manière claire et simple. Utilisez une structure en DIV. Voici à votre gauche un aperçu typique d’un site web très simple :

Le tout sera dans une div général nommé « container » et vous remarquerez que je n’utiliserai pas les majuscules pour nommer mes tags. Sur le plan, les majuscules ont été utilisées seulement pour une meilleure visibilité.

Bon maintenant voici le code XHTML de ce petit design :

 
<div id="myContainer">
<div id="header"></div>
<div id="middle">
<div id="left"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
 

Bien entendu, ce code se retrouve dans la tag BODY. Ensuite commençons le truc que j’utilise pour accélérer votre travail. Copier le code à l’intérieur de votre tag body et collez-le dans votre fichier CSS. Voici ce que ça donne:

 
<div id="myContainer">
<div id="header"></div>
<div id="middle">
<div id="left"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
 

Maintenant (en utilisant Dreamweaver) utilisez la fonction de recherche (ou CTRL-F). Recherchez les codes suivants

 
<div id="
 

Et remplacez-les par les symboles #. Ensuite recherchez les codes suivants :

 
 
">
 

Et remplacez-les par les accolades ouvertes et fermé { }. Pour le reste vous pouvez rechercher les tags div de fermeture et les remplacer par rien. Cela vous donnera ceci :

 
 
#myContainer {}
 
   #header {}
 
   #middle {}
      #left {}
      #content {}
 
   #footer {}
 

Finalement, il ne vous reste qu’à mettre vos largeurs et hauteurs et autres propriétés de vos tags DIV. Personnellement, j’ajoute une ligne de commentaire au-dessus de chaque ligne concernant mes sections (header, middle, footer). Voici le code que vous obtiendrez :

 
 
#myContainer {
width:760px;
height:auto;
}
 
/* HEADER */
   #header {
   width:760px;
   height:250px;
   background-color:#666;
   }
 
/* MIDDLE */
   #middle {
   width:760px;
   height:500px;
   }
      #left {
	  width:160px;
	  height:500px;
	  background-color:#ccc;
	  float:left;
	  }
      #content {
	  width:600px;
	  height:500px;
	  background-color:#fff;
	  float:left;
	  }
 
/* FOOTER */
   #footer {
   width:760px;
   height:70px;
   background-color:#000;
   }
 

Pour le reste du code, vous l’insérer à l’intérieur de vos tags et indentez votre code comme celui de votre XHTML, vous verrez, ce truc accélèrera votre vitesse d’exécution.

Si vous regardez bien l'image à droite, vous verrez 2 bouton additionnels sur le coin de la fenêtre, l'un permet d'envoyer immédiatement la fenêtre sur l'autre moniteur et l'autre permet d'étirer la fenêtre sur les 2 moniteurs. Aussi, si vous abbaissez la fenêtre, elle dessendra sur la barre de navigation de l'écran utilisé. Donc pour ceux qui on une carte ATI, utilisez UltraMon.

Ceux qui ne sont pas inscrit à Google Sitemaps, hé bien qu’attendez-vous, inscrivez-vous !