Blog

>Blog
Blog 2017-11-21T20:08:04+00:00
Développement Web
Référencement
Logiciels

gnop

Matériel

Signaler les dangers du web

Categories: Veille Technologique|Tags: , , |

Sur internet, les dangers et délits sont omniprésents comme dans la vraie vie, pour cette raison il existe une plateforme officielle pour contrôler ce qui se passe sur la toile française.
Elle se nomme PHAROS (Plateforme d’Harmonisation, d’Analyse, de Recoupement et d’Orientation des Signalements) et permet aux internautes de pouvoir signaler un contenu ou un comportement illicite via un simple formulaire anonyme : www.internet-signalement.gouv.fr. (suite…)

Nostalgie du web d’antan

Categories: Veille Technologique|Tags: , , |

Qui ne serait pas intéressé de voir ou revoir internet comme il était il y a dix ans afin de contempler sa progression ?

Le site web.archive.org permet ce miracle en archivant régulièrement des snapshots des sites web depuis 1996, soit 6 ans après la création d’internet.
Vous remarquerez que la mise en page est restée la même, seules les images non reliées au fichier css ont disparus.

Maintenant au tour de l’arroseur arrosé, le site Archive.org en 2007 : https://web.archive.org/web/19970126045828/http://www.archive.org/

Au tour de mon site, sa première version en 2010 : https://web.archive.org/web/20101231094206/http://www.montrezvous.net/

Si vous connaissez des sites qui ont fortement changé depuis tout ce temps, n’hésitez pas à le signaler en commentaire !

Contrôles de formulaires en HTML5

Categories: Développement Web|Tags: , , , , , , , |

Depuis le HTML5, le contrôle des formulaires est possible directement dans l’input html grâce à l’attribut pattern et à sa valeur sous la forme d’une regex.

Une regex est une expression régulière, autrement dit un filtre de contrôle de texte très puissant vérifiant la validité d’une information.

Avant le HTML5, le contrôle des formulaires devait se faire en JavaScript et son utilisation était moins pratique.

L’attribut pattern est compatible sur les navigateurs :

  • Firefox 4+
  • Chrome 5+
  • Opera 9.6+
  • Internet explorer 10+

Pour les navigateurs n’acceptant pas cet attribut, ce dernier est simplement ignoré, d’où la nécessité de faire un contrôle en PHP. Par mesure de sécurité ce contrôle est nécessaire.

Description d’un champ de formulaire en HTML5

<input type="text" pattern="regex" title="Aide de saisie">

Dans ce champ, l’attribut pattern peut accepter une regex et l’attribut title permet d’afficher une infobulle avec une indication sur le format du champ attendu.
L’avantage du contrôle de formulaire est de mettre en évidence un champ mal rempli afin d’obliger l’utilisateur à le corriger.

Voilà ce qui se passe quand un champ nécessitant une adresse e-mail est mal rempli :

formulaire-pattern-errone

Et lorsque l’e-mail est valide :

formulaire pattern valideAinsi dès que l’utilisateur quitte le champ de saisie, il peut savoir si son information est invalide.

Avantage de l’attribut pattern face à l’attribut type

Vous avez dû remarquer que les nouvelles valeurs de l’attribut type de l’HTML5nous permettent de contrôler les valeurs des champs.
À savoir les types de contrôle : tel, URL, email et number.
Je trouve l’initiative très bonne, mais par exemple le type URL ne prend que le format http://monsite.com.
Or on ne peut pas modifier son comportement pour que l’URL soit de la forme www.monsite.com ou monsite.com
Ce souci est malheureusement présent sur tous les types cités ci-dessus. C’est par besoin de souplesse que mon choix se tourne vers l’attribut Pattern.

Principe d’écriture des regex

Écrire une regex n’a rien d’une partie de plaisir : cela nécessite une rigueur extrême, car le moindre caractère a son importance.
Pour cette raison, je vous mettrai une liste de regex pratiques un peu plus loin dans cet article.
Tout d’abord, il faut savoir qu’une regex écrite en JavaScript et sous la forme HTML5 ne s’annonce pas pareil :

  • En javascript: ^regex$ avec ^ au début et se terminant par $
  • En HTML5: pattern= »regex »

 

Il faut aussi savoir que l’on va se servir de la table de caractère Unicode afin d’autoriser certains éventails de caractères autorisés :

Caractères unicode regex

Voici la boite à outils permettant d’améliorer le filtre:

[0-9] : Les caractères allant de « 0 » à « 9 » autrement dit un chiffre.

[a-zA-Z] : De « a » à « z » et  de « A » à « Z »

[a-zA-ZÀ-ÿ] : De « a » à « z » et  de « A » à « Z » et « À » à « ÿ » bref tous les mots

[\(-\+] : Ça marche aussi avec les caractères spéciaux (en bleu). Pour les utiliser, il faut placer un antislash avant, et ça se lit : De « ( » à « + »

[^0-9] : Tous les caractères sauf ceux entre « 0 » et « 9 »

ICI|LA : Le pipe | correspond à un ‘ou’, et ça se lit ICI ou LA.

U{2,4} : Limite d’occurence min et max du caractère, lisez « UU ou « UUU » ou « UUUU »

BA.ON : Le « . » remplace n’importe quel caractère, lisez: BAtON ou BALON ou BAcON…

Je vais m’arrêter là sur le principe de la création des regex.
Il y a des livres entiers qui traitent de ce sujet, si vous souhaitez en savoir plus, n’hésitez pas à chercher ici sur le Net.

Liste de regex utiles

Vous avez lu jusque ici, bravo !
Il est maintenant temps de découvrir la vraie puissance des regex, en vous montrant les filtres que j’utilise pour contrôler les formulaires :

Tests de type

Nombres entiers

[0-9]+

Nombres réels

[-+]?[0-9]+(\.[0-9]+)?

Chiffre avec virgule flottante

[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?

Date au format jj/mm/aaaa avec aaaa compris entre 1900 et 2099

(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/](19|20)\d\d

Booléen

true|false|0|1

Tests au format administratif

Code postal au format 31 100 ou 31100

([A-Z]+[A-Z]?\-)?[0-9]{1,2} ?[0-9]{3}

Téléphone au format 04.00.00.00.00 ou 0400000000

(01|02|03|04|05|06|07|08|09)[ \.\-]?[0-9]{2}[ \.\-]?[0-9]{2}[ \.\-]?[0-9]{2}[ \.\-]?[0-9]{2}

Sécurité sociale au format 1 85 11 18 148 410 26

[12][ \.\-]?[0-9]{2}[ \.\-]?(0[1-9]|[1][0-2])[ \.\-]?([0-9]{2}|2A|2B)[ \.\-]?[0-9]{3}[ \.\-]?[0-9]{3}[ \.\-]?[0-9]{2}

TVA Entra-communautaire au format FR 02 254 254 254

[A-Z]{2}[ \.\-]?[0-9]{2}[ \.\-]?[0-9]{3}[ \.\-]?[0-9]{3}[ \.\-]?[0-9]{3}

Siren au format 451 789 356

[0-9]{3}[ \.\-]?[0-9]{3}[ \.\-]?[0-9]{3}

Siret au format 254 851 369 54218

[0-9]{3}[ \.\-]?[0-9]{3}[ \.\-]?[0-9]{3}[ \.\-]?[0-9]{5}

Code APE au format 52.4Z

[0-9]{2}[ \.\-]?[0-9]{1} ?[a-zA-Z]

Tests de type liés à internet

Adresse e-mail au format contact@montrezvous.net

[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([_\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})

Adresse IP au format 192.168.12.1

(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)

Nom de domaine au format montrezvous.net

([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}

URL http ou https ou FTP avec protocole, avec ou sans login/mdp/numéro de port au format http://www.montrezvous.net ou ftp://moi:mdp@ftp.montrezvous.net:21

(((ht|f)tp(s?))\:\/\/)?(([a-zA-Z0-9]+([@\-\.]?[a-zA-Z0-9]+)*)(\:[a-zA-Z0-9\-\.]+)?@)?(www.|ftp.|[a-zA-Z]+.)?[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,})(\:[0-9]+)

Couleur hexadécimale au format #0AF422 ou #0af422

#[0-9A-Fa-f]{6}

J’espère que cette initiation aux regex ne vous a pas trop rebuté.
N’hésitez pas à commenter si vous souhaitez apporter des précisions ou si vous avez trouvé une erreur dans mes regex.

Les adresses emails jetables

Categories: Référencement SEO|Tags: , , |

Aujourd’hui je vous propose une astuce afin de protéger votre vie privée et éviter de recevoir les SPAM sur votre boite email principale.
Les adresses de messageries sont des valeurs sûres pour les entreprises, car il s’agit d’un moyen de communication direct qui ne se modifie presque pas dans le temps, un peu comme un numéro de téléphone ou un lieu de résidence. (suite…)

Configuration du plugin flash Player en mode global

Categories: Logiciels|Tags: , , , |

Ce plugin pour navigateur créé en 2008, est largement utilisé afin de lire des fichiers flash (extension .swf)
Sa configuration est simple à prendre en main en ce qui concerne l’autorisation d’accès du plugin à votre matériel.
La configuration site par site s’appelle en mode local, la configuration à appliquer par défaut s’appelle en mode global.

(suite…)

Besoin de formater: les bons réflexes

Categories: Matériel|Tags: , , |

On a tous eu besoin un jour ou l’autre de formater son ordinateur, que cela soit pour le décontaminer d’un virus trop résistant ou pour nettoyer complètement le système.

Avant de formater, certains bon réflexes doivent être appliqués afin de ne pas avoir de surprises. Voici les étapes que je vous recommande afin de vous simplifier la tâche: (suite…)

Imprimantes: la polémique

Categories: Matériel|Tags: , , |

De quelle polémique s’agit-il? Certains constructeurs d’imprimantes ont depuis longtemps l’habitude de brider les matériels qu’ils vendent afin de forcer leurs clients à la consommation.

Ils s’y prennent de plusieurs façons, le bridage des imprimantes et le bridage des cartouches d’encre: (suite…)

Configurer firefox

Categories: Logiciels|Tags: , , |

Le navigateur web Firefox est paramétrable via Outils<Options, ça tous le monde le sait et inutile de le rappeler, mais il y a une autre façon de configurer Firefox, plus poussée mais aussi plus risquée si on le configure mal. (suite…)

Microdata en pratique

Categories: Référencement SEO|Tags: , , , |

Depuis l’arrivée du HTML5, on peut insérer dans le texte HTML des microdata en vu d’expliquer aux moteurs de recherches le sens du texte de nos pages.

Dans cet article je vais vous expliquer comment fonctionne les microdata, les utiliser dans votre code et voir comment Google interprète votre texte.

Les microdata ou microdonnées ou « rich snippets » sont destinés uniquement aux moteurs de recherches afin de compléter les balises meta utilisés pour décrire une page. (suite…)

Les sites de référence

Categories: Veille Technologique|Tags: |

Sur internet, rare sont les sites créateur de contenu nouveaux et fiables à 100%, de nombreux sites sont fiables mais font que retranscrire l’information avec plus ou moins de détails.

Les liens cités ci-dessous sont gratuits car l’accès à l’information n’a pas de prix. (suite…)

Suivi du référencement d’un site officiel

Categories: Référencement SEO|Tags: |

Je viens d’apercevoir la création d’un site de formation pour les développeurs web très prometteur au niveau du référencement.

Le but est de voir depuis le début l’avancé du référencement d’un site officiel sponsorisé par de lourds acteurs du web: W3C, Google, Adobe, FaceBook, Hp, Microsoft, Nokia, Mozilla et Opera, rien que ça !! (suite…)

Smiley

Categories: Veille Technologique|Tags: |

Nés à l’époque de la forte utilisation du client de messagerie MSN, l’écriture sur clavier était le standard incontournable afin de communiquer, que ce soit par sms, mail ou chat. (suite…)

Google hacking

Categories: Référencement SEO|Tags: , , |

Le Google hacking est une façon experte d’utiliser Google. Il s’agit d’une technique légale et très puissante, qui vous permettra d’obtenir des informations d’une précision inégalée.

On peut utiliser Google comme un utilisateur lambda ou comme un utilisateur averti avec le formulaire de recherche avancé: dans cet article, je vais vous montrer comment l’utiliser de façon experte. (suite…)

Entretenir son ordinateur

Categories: Matériel|

Avoir un ordinateur bien entretenu permet de l’utiliser plus longtemps, ça coule de sens mais encore faut-il avoir les bons réflexes adopter régulièrement, je vais vous citer quelques méthodes et astuces afin de préserver plus longtemps votre ordinateur. (suite…)