Blog des Webmasters et Bloggueurs

Archive pour la catégorie 'Astuces'

Mai 10
15

Interdire le copier-coller dans un formulaire

Il est parfois très utile d’empêcher son visiteur de faire un simple copier/coller dans un formulaire HTML pour le forcer à saisir correctement le code de confirmation. Pour cela rien de plus simple, pas besoin d’énormément de code, juste 3 attributs html à connaitre (oncut, oncopy, onpast)

  • oncopy=’return false;’ : gère l’action « copier le contenu du champ », le ‘return false’ permet d’empêcher la copie
  • oncut=’return false;’ : gère l’action « couper le contenu du champ », le ‘return false’ permet d’empêcher de couper
  • onpast=’return false;’ : gère l’action « coller le contenu de son presse-papier dans un champ », le ‘return false’ permet d’empêcher de couper

Code pour empêcher le copier/coller

<label>Adresse e-mail :</label><input name="email" type="text" oncopy="return false;"/>
<label>Confirmation de l'adresse e-mail :</label><input name="emailconfirm" type="text" onpast="return false;"/>
Jan 10
07

Eviter le Hot-Linking

Une technique qui consiste à se faire détourner de la bande passante et à payer pour les autres sur les hébergements où le trafic est payant s’appelle le hot-linking … mais qu’est ce que c’est exactement ?

Cette technique consiste à voler une image en vue de l’intégrer directement sur un site internet et à partir de son url direct, consommant ainsi de votre précieuse bande passante. Quand le site est petit … cela n’a trop de conséquence, en revanche si votre site fait l’affront à un gros site qui hot-link de votre contenu … bonjour les dégâts.

Voici du code à mettre dans votre fichier .htaccess et qui vous premettra d’éviter ce genre de pratique

# Interdit les hotlinks
# Autorisé à partir d’un accès direct
RewriteCond %{HTTP_REFERER} !^$
# Autorisé à partir de mon domaine {mondomaine}
RewriteCond %{HTTP_REFERER} !^http://(www\.)?{mondomaine}\.com/.*$ [NC]
# Autorisé à partir de la traduction Google
RewriteCond %{HTTP_REFERER} !^http://translate\.google\..*(www\.)?{mondomaine}\.com.*$ [NC]
# Autorisé à partir de la traduction Google
RewriteCond %{HTTP_REFERER} !^http://translate\.googleusercontent\..*(www\.)?{mondomaine}\.com.*$ [NC]
# Autorisé à partir de la recherche de GG images
RewriteCond %{HTTP_REFERER} !^http://.*\.gstatic.com\..*/.*$ [NC]
# Autorisé à partir du cache de Google
RewriteCond %{HTTP_REFERER} !^http://64\.233\.(167|183)\.104.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://66\.102\.9\.104.*$ [NC]
# Autorisé à partir de la recherche d’images de Google
RewriteCond %{HTTP_REFERER} !^http://images\.google\..*/.*$ [NC]
# Autorisé à partir du cache de Yahoo
RewriteCond %{HTTP_REFERER} !^http://72\.30\.186\.56.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://216\.109\.(117|125)\.(130|135).*$ [NC]
# Autorisé à partir de la recherche de Yahoo
RewriteCond %{HTTP_REFERER} !^http://.*\.search\.yahoo\.com/.*$ [NC]
# Autorisé à partir de la traduction Yahoo et Altavista
RewriteCond %{HTTP_REFERER} !^http://babelfish\.(yahoo|altavista)\.com/.*(www\.)?{mondomaine}\.com.*$ [NC]
# Autorisé à partir de la recherche d’images de MSN
RewriteCond %{HTTP_REFERER} !^http://search\.msn\..*/.*$ [NC]
# Autorisé à partir du cache de MSN
RewriteCond %{HTTP_REFERER} !^http://cc\.msnscache\.com/.*$ [NC]
# Autorisé à partir de la recherche de Lycos
RewriteCond %{HTTP_REFERER} !^http://vachercher\.lycos\.fr/.*$ [NC]
# Autorisé à partir de la recherche de Ask
RewriteCond %{HTTP_REFERER} !^http://.*\.ask\.com/.*$ [NC]
# Autorisé à partir de la recherche de Gigablast
RewriteCond %{HTTP_REFERER} !^http://.*\.beta\.gigablast\.com/.*$ [NC]
# Autorisé à partir de la recherche de Picsearch
RewriteCond %{HTTP_REFERER} !^http://.*\.picsearch\..*/.*$ [NC]

RewriteCond %{HTTP_USER_AGENT} !^Googlebot [NC]
RewriteCond %{HTTP_USER_AGENT} !^Googlebot-Image [NC]
RewriteCond %{HTTP_USER_AGENT} !^Googlebot-Mobile [NC]
RewriteCond %{HTTP_USER_AGENT} !^Msnbot [NC]
RewriteCond %{HTTP_USER_AGENT} !^Slurp [NC]
RewriteCond %{HTTP_USER_AGENT} !^Mediapartners-Google [NC]

# Redirection vers le fichier nohotlink en fonction du type de fichier
RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://{site-de-destination}/hotlink.$1 [NC,R,L]

Remplacer {mondomaine} par votre domaine, l’extension si besoin et {site-de-destination} vers un espace perso Free par exemple ou autre …

Voilà une petite astuce, qui, à mon avis vous rendra bien service !

Oct 09
18

Rendre son site compatible avec Internet Explorer 8

Internet est en constante évolution et les navigateurs aussi, preuve en est avec la version 8 d’internet explorer qui pose quelques soucis de compatibilité quand on est webmaster d’un site internet

Voici une petite astuce « temporaire » qui vous permettra de repousser vos corrections de compatibilité. Cette astuce consiste tout bêtement à dire à Internet Explorer 8 d’émuler le comportement d’Internet Explorer 7

Pour ce faire il faut utiliser cette balise :

<meta http-equiv= »X-UA-Compatible » content= »IE=EmulateIE7″ />

Comme c’est une balise Meta, elle se place dans la partie Head de votre page internet

Notez bien qu’il serait quand même bon de rendre votre site compatible Internet Explorer 8 et que cette astuce n’est qu’à utiliser temporairement

Oct 09
06

PunyPNG : un smushit like qui compresse vos images

Il est toujours bon d’économiser quelques octets par ci par là afin d’économiser sur vos hébergements limités en quantité de trafic. Pour ce faire, au même titre que Smushit, PunyPNG est un service de compression d’images en ligne qui est plus efficace que ses autres compères.

punypng

Comme on peut le voir sur cette image, le service promet des gains de l’ordre de 40% en taille mais sans perdre en qualité.

Il est aussi capable de compresser les GIF et PNG transparents qui sont bien souvent mal optimisés, vous faisant facilement gagner 10 % en poids.

Le service est bien entendu gratuit et se trouve à cette adresse

Sep 09
03

Google : laisse mon site en Français !

Google : ami de nos chers visiteurs propose gentillement à nos internautes de traduire le site dans leur langue. Pour des raisons qui vous sont propres, voici une petite astuce qui vous permettra de dire à Google de ne pas traduire la page de façon automatique ou bien alors par le biais de Google Traduction

Pour empêcher Google de gâcher la langue de Molière, il faut juste rajouter la balise META suivante : <meta name= »google » value= »notranslate »>

Cette META est valable pour toute la page, si vous ne voulez protéger uniquement qu’une section : <span class= »notranslate »></span>

Juil 09
28

Pensez à modifier vos liens FeedBurner

Suite à la réintégration de Feedburner dans Google, les urls des flux gérés par Feedburner avaient déjà changé mais cette fois-ci en proposant une redirection 301 des anciennes urls vers les nouvelles. Le but du jeu était une migration en douceur maintenant que celle-ci est estimée comme bien avancée, nous rappelons juste aux retardataires de changer leurs urls pas encore modifées (celle avec http://feeds2.feedburner.com/) par http://feeds.feedburner.com

Vous ne perdrez plus ainsi des abonnés à vos flux.

Juil 09
24

Une liste de plugins Firefox pour Webmaster / Développeur

Toujours à la recherche d’outils intéressants pour vos développements, je vous fais part d’une liste de plugins que l’on utilise chez Devclic pour gérer Forum-Webmaster au quotidien.

Nous trouvons tout d’abord un plugin essentiel pour tout débugger, j’ai nommé Firebug.

firebug

Firebug est l’ami indispensable pour la création de sites internet, il permet d’inspecter son code HTML et ses feuilles de style CSS à la recherche d’erreurs potentielles. La fonction permettant de voir la taille du bloc est vraiment très utile puisqu’elle nous permet d’inspecter réellement chaque élément. Cette extension est une aide précieuse et vous permettra d’économiser énormément de temps.

Une fois le design du site fini, il faut tester l’intégration graphique du site. Pour cela, on utilise Colorzilla.

colorzilla-eyedropper1

Colorzilla est une extension toute simple et pourtant très complète. Elle vient se loger dans le coin inférieur gauche de votre navigateur. Un simple click suffit à l’activer. Ensuite, elle vous donnera le code RGB de n’importe quelle couleur se trouvant sous votre curseur. Cela fonctionne même pour les images !

En plus de vous donner la couleur, elle se permet de vous donner l’élément HTML sur lequel vous vous trouvez dans le but de vérifier que vous pointiez bien la bonne partie du site web.

Voilà notre site avec des couleurs bien intégrées.

Que se passe-t-il quand un utilisateur n’a pas Javascript d’activé sur son navigateur ? Pour cela, nous utiliseront la Web Developper Toolbar.

La Web Developper Toolbar s’intègre juste en dessous de votre barre de navigation Firefox. Elle permet d’activer et désactiver d’un simple clic tous les éléments de la page web. Javascript, Cookies, CSS, images, etc. Elle permet également de tester, toujours aussi simplement, le design de vos pages sur les principales résolutions des ordinateurs du marché. Autre fonction utile : la désactivation du cache de votre navigateur qui permet de vérifier que votre site est réellement conforme à votre code puisque tous les éléments sont rechargés / chargés, peu importe s’ils existent en cache.

Enfin, il faut optimiser son site pour qu’il puisse tenir au mieux la charge et être accessible le plus rapidement possible pour le confort de navigation de l’utilisateur. Dans ce but, une extension à Firebug, YSlow de Yahoo est nécessaire.

yslow

Tout aussi simple à utiliser que Firebug, elle se lance d’un simple clic et vous donne un résumé des différentes actions à effectuer (tel que l’emplacement des fichiers CSS et JavaScripts sur votre page web) pour optimiser au mieux le chargement de votre site.

firebug-result2

Smushit

smushit-extensionSmushit est une extension précieuse qui vous fera économise du poids sur vos images en enlevant tout ce qui est inutile. On arrive à obtenir des résultats assez impressionnants, de plus l’extension vous livre les images toutes préparées … que demander de plus ?

En espérant que ces plugins vous permettent d’économiser du précieux temps, de vous améliorer car en inspectant ce que le voisin fait … on peut aussi s’améliorer. Pour rappel, toutes ces extensions Firefox sont entièrement gratuites.

Bon développement et en cas de soucis, nous sommes là pour vous aider

Et vous qu’utilisez-vous en plus ?

Ils en parlent aussi : Korben

Juil 09
20

Des formulaires de contact très facilement

Vous vous êtes certainement déjà pas mal cassé la tête sur un formulaire de contact et en plus cela fait perdre inutilement du temps car au final c’est toujours la même chôse alors Super Simple Contact Form Maker viendra vous apporter son aide précieuse puisque ce service gratuit permet de générer son propre formulaire de contact en PHP / HTML

super-simple-contact

Cela se passe en 3 étapes : la première consiste à mettre l’adresse e-mail où le formulaire de contact devra être reçu. La deuxième étape consiste à choisir les champs à renseigner par le visiteur, vous pouvez choisir une validation de celui-ci par javascript. La troisième étape est celle qui va vous permettre de choisir un message de remerciement à adresser à votre visiteur.
Quand tout est configuré, il faut le télécharger et transformer le fichier au format .txt en .php sinon votre formulaire ne fonctionnera pas.

Autrement dit : un script simple et assez complet !

Site Officiel

Juil 09
13

Tester votre site internet sur plusieurs résolutions avec ViewLikeUS

ViewLikeUS vous permettra de vérifier si votre cher site internet sera agréable à la navigation sur plusieurs résolutions : de 800 X 600 jusque 1920 X 1200.

Ce service est entièrement gratuit et vous permet même de tester votre site internet sous une plateforme iPhone ou bien Wii browser

viewlikeus

Pour vous servir de ce service, direction ViewLikeUs

Juil 09
12

Robothumb : générateur de screenshots

Besoin de miniatures pour votre site internet afin de par exemple présenter vos références ? Robothumb vous viendra en aide et gratuitement

Son utilisation est très simple : vous utilisez une balise img dans laquelle vous mettez le src avec pour valeur : http://www.robothumb.com/src/?url=[url]&size=[size]&alt=[alt]. Vous aurez ainsi une belle capture du site mis dans le paramètre url

Exemple :

http://www.robothumb.com/src/?url=http://www.forum-webmaster.com

Ce service est entièrement gratuit, n’hésitez pas à offrir un petit lien à l’auteur, cela ne vous coutera rien

<a href="http://www.robothumb.com">Screenshots par Robothumb</a>

Plus de précisions à cette adresse


Votre statut : Invité
Vous devez être membre pour participer.
 
 
 
 
 
 
 
 
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2017 - Tous droits réservés

creation site internet strasbourg