Archive for mai, 2008

Javascript et les caractaires speciaux

Si votre page est codé en utf-8 et que vous voulez utilisé des boites de dialogues tel que alert ou confirm, avec des messages accentué, vous allez vous heurté a un problème (c’était mon cas), ce qui peu aussi surprendre c’est que c’est pas toujour le cas mais si jamais vous rencontré ce probleme vous pouvez le reglé en utilisant le code octal precedé d’un antislach ou bien precisé l’encodage dans la balise d’insertion du code javascript

<script …. charset=’iso-8851-1′>

et pour les caractaires octal les voici ou vous pourez les trouvez

http://www.pjb.com.au/comp/diacritics.html

un example :

  • é : \351
  • è : \350
  • ê : \352
  • à : \340

alert(’un message \351tonant’)

et pour en savoir plus:

http://www.clagnut.com/blog/261/

Firefox 3 et Guinness

Le but est claire, entré dans le livre guiness avec le plus grand nombre de téléchargement d’un logiciel en 24 heures.

Nous voulons établir un record du monde Guinness pour le logiciel le plus téléchargé en 24 heures, et nous avons besoin de votre aide pour y parvenir !

la date sera bientôt dévoilé, et a cette heure si il y a 274 promesses d’algériens, je me demande si vous en faite partie, étant un fan de firefox comme vous j’imagine je met ce petit logo tout mignon pour vous inscrire alors n’esitez surtout pas et faite sauté le compteur ^_^

Download Day 2008

Vérification javascript à la web 2.0

Une jolie vérification en combinant du javascript avec du css n’est pas difficile et voici un exemple d’un formulaire d’inscription asser simple en utilisant des messages d’erreurs plus jolie que la légendaire boite de dialogue alert

Donc au début nous avons notre formulaire dont voici le code

<!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=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>

body{
text-align:center;
margin:auto;
margin-top: 40px;
}

#global{
text-align:center;
margin:auto;
width: 400px;
height: 300px;
}

#general_form{
text-align:left
}

.input_form{
margin: 10px;
padding: 10px;
width:auto;
}

.text_input{
float:left;
display:block;
width: 80px;
height: 20px;
text-align:left;
margin-right: 20px;
}

input{
width: 100px;
height: 20px;
font-size: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>

<body>
<div id=”global”>
<div id=”text_inscription”>Formulaire d’inscription</div>
<form id=”form1″ name=”form1″ method=”post” action=”">
<div id=”general_form”>

<div class=”input_form”>
<span class=”text_input”>username</span>
<input type=”text” name=”user” id=”user” />
<span id=”msg_user”></span>
</div>

<div class=”input_form”>
<span class=”text_input”>password</span>
<input type=”password” name=”pass1″ id=”pass1″ />
<span id=”msg_pass1″></span>
</div>

<div class=”input_form”>
<span class=”text_input”>re-password</span>
<input type=”password” name=”pass2″ id=”pass2″ />
<span id=”msg_pass2″></span>
</div>
</div>
</form>
</div>
</body>
</html>

Vous remarquerez que le tout est fait en div afin de nous simplifié la tache et nous donner plus de liberté, biensure rien n’est obligatoire, personnellement quand il s’agit d’une région ou va y’avoir manipulation je privilégie les div au table

Donc voila pour le début, maintenant avant de continué nous avons besoin de jolie icon, une pour le succss et l’autre pour le failed, plusieurs site sont là a cette effet comme iconlook ou iconfinder

Apres avoir trouvé les icons que nous allons utilisé nous pouvons nous attaquer au code JavaScript, au début on crée une fonction appeler validate() que voici

<script language=”javascript”>

// fonction de test de validités
function validate(id){

var val = document.getElementById(id).value;
var img_span = document.getElementById(’msg_’+id);

// condition de verification de la validité
if(val != “” && val.length > 4){
img_span.innerHTML = “<img src=’agt_action_success.png’ border=0 />”;
}else{
img_span.innerHTML = “<img src=’agt_action_fail.png’ border=0 />”;
}

}

</script>

et ou on va l’exécuter a chaque fois que l’utilisateur tape un caractère ce qui implique l’utilisation de l’événement onkeypress dans notre champ text

onkeypress=”validate(this.id)”

Donc au final voila le code qu’on aura

<!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=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>

body{
text-align:center;
margin:auto;
margin-top: 40px;
}

#global{
text-align:center;
margin:auto;
width: 400px;
height: 300px;
}

#general_form{
text-align:left
}

.input_form{
margin: 10px;
padding: 10px;
width:auto;
}

.text_input{
float:left;
display:block;
width: 80px;
height: 20px;
text-align:left;
margin-right: 20px;
}

input{
width: 100px;
height: 20px;
font-size: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
</style>
<script language=”javascript”>

// fonction de test de validités
function validate(id){

var val = document.getElementById(id).value;
var img_span = document.getElementById(’msg_’+id);

// condition de verification de la validité
if(val != “” && val.length > 4){
img_span.innerHTML = “<img src=’agt_action_success.png’ border=0 />”;
}else{
img_span.innerHTML = “<img src=’agt_action_fail.png’ border=0 />”;
}

}

</script>
</head>

<body>
<div id=”global”>
<div id=”text_inscription”>Formulaire d’inscription</div>
<form id=”form1″ name=”form1″ method=”post” action=”">
<div id=”general_form”>

<div class=”input_form”>
<span class=”text_input”>username</span>
<input type=”text” name=”user” id=”user” onkeypress=”validate(this.id)” />
<span id=”msg_user”></span>
</div>

<div class=”input_form”>
<span class=”text_input”>password</span>
<input type=”password” name=”pass1″ id=”pass1″ onkeypress=”validate(this.id)”/>
<span id=”msg_pass1″></span>
</div>

<div class=”input_form”>
<span class=”text_input”>re-password</span>
<input type=”password” name=”pass2″ id=”pass2″ onkeypress=”validate(this.id)”/>
<span id=”msg_pass2″></span>
</div>
</div>
</form>
</div>
</body>

</html>

Pour voir l’exemple cliquez ici

Pour le télécharger cliquez ici

Une petite histoire de quelques liens et bonne nuit

Vous l’avez sûrement remarquer ce changement de template qui était nécessaire pour cause de la lourdeur de l’ancien qui franchement m’agacé, enfin bref passons a autres choses qui j’espère sera aussi intéressante pour vous qu’elle l’a été pour moi.

Je commence par le commencement, avant de faire quoi que ce soit j’ai besoin de mon identité d’un logo me représentant, mais malheureusement je suis un piètre designer et je ne maîtrise ni les outils ni je n’ai le talent donc comment doit je faire, naturellement je fait une recherche pour voir ce qui va y’avoir et je tombe sur ce site Top 50 Logo Design Tutorials

Ah 50 tutoriaux, je devrai être capable d’en comprendre au moins un.

Ok ok maintenant que j’ai de quoi faire mon logo je doit faire le reste, mais j’ai besoin d’une identité d’un mariage de couleur qui me conviens, bref de me distingué pas comme ce template qui ne reflète que l’idée d’être rapide d’affichage (et qui doit l’être dans mon site que je vais faire) bref donc je tombe sur ce site allgraphicdesign qui est une source d’inspiration et des articles très intéressants pour moi du moins aussi un autre sites tout aussi intéressent designmeltdown qui est l’une de mes sources d’inspiration, avec ça j’ai déjà de quoi commencer sinon de faire le tout.

Mon logo c bon et mon design aussi mais ayant surfé sur quelques sites qui m’on plus je trouve qu’ils ont de très beaux effets visuel et en plus ce n’ai pas du swf, hoho donc moi aussi je voudrai avoir ce genre d’effet de bluff que tout le monde vois comme mon site est tendance

Bien sure c’est effets sont les plus visible dans les galeries et là devinez quoi, je tombe sur une page du tonner lightbox-clones qui regroupe pas moins de 38 script tout prêt à être utilisé et qui offre même un filtre par librairies utilisé (prototype,jquery,….) ou bien par fonctions car ce qui me conviendrai le mieux serai d’alléger le plus possible ma page donc pas de superflue quoi que tout sa c’est déjà super flux, je continue je continue car être satisfait on ne l’ai jamais et là tenez vous bien je tombe sur un autre site dans une page qui regroupe une liste de tutoriaux beautyindesign rien que pour embellir la page et comme ils disent pour amélioré l’expérience utilisateur et en plus au format vidéo (je n’aime pas lire les tutoriaux).

Bien sure ce n’ai pas tout mais là je suis fatigué de cette longue histoire donc voici le reste des liens.

Créer des pages d’impression sans faire de duplicata de contenu

http://www.searchengineguide.com/stoney-degeyter/how-to-create-priter-friendly-pages-with.php

une comparaison de 9 éditeurs de texte qui vous en aurai besoin un jour ou l’autre

http://blog.webdistortion.com/2008/03/09/9-of-the-best-rich-text-editors-reviewed/

Et les outils nécessaires pour finaliser je dirai votre travail

http://sixrevisions.com/tools/20_web_development_tools/

Y’en a sûrement d’autres donc ne soyez pas avar de les partager avec nous en forme de commentaire et bonne journée

protolize

Protolize regroupe une sélection d’outils ayant pour but d’aider les designers et les développeurs, vous allez pouvoir trouvez plusieurs catégorie, allons du css, javascript et php jusqu’à inspiration, donc que vous soyez fan de programmation ou pas vous allez trouver votre bonheur, la dernière fois que j’ai vue le site il était en vente alors si vous êtes intéresser par ce site n’esitez pas quoi que c’est pas sure qu’il soit rentable mais qui sais peut être que ça deviendra un amazone des programmes pour le web.

là ya mon drama qui m’attend (my boss my hero)et juste apres un episode de battlestar galactica, alors je vous dit bonne recherche et bonne soiré

Le referencement expliquer en video

En surfant je tombe sur cette video de chez intellicore que je vous invite a voir ainsi qu’une autre vidéo qui me semble très interessente surtout pour les chefs de projet qui traite de scrum et la planification et gestion de projet


Search Engine Optimization - L’art du référencement web
envoyé par intellicore

Planification et gestion de projet informatique : SCRUM
envoyé par intellicore

Firewall pour une application web en htaccess

Cet article est une traduction d’un article du site www.0×000000.com que j’ai apprécié et qui est très utile, sans trop de bavardage commençons.
Aujourd’hui, j’ai eu le temps pour un autre coup d’œil à mon nouveau. Htaccess, et je peux vous dire que ça deviens de mieux en mieux. Je pense que c’est assez bien fait maintenant, et je suis vraiment heureux avec lui. J’ai également plusieurs questions sur la façon dont il fonctionne exactement. Donc, je poste mon dernier. Htaccess ici, en plus d’une solution sur les différentes règles mod_rewrite-je utiliser
Tout d’abord, voici ma dernière beauté:

RewriteEngine On
Options +FollowSymLinks
ServerSignature Off

RewriteCond %{REQUEST_METHOD} ^(HEAD|TRACE|DELETE|TRACK) [NC,OR]
RewriteCond %{THE_REQUEST} ^.*(\\r|\\n|%0A|%0D).* [NC,OR]

RewriteCond %{HTTP_REFERER} ^(.*)(<|>|’|%0A|%0D|%27|%3C|%3E|%00).* [NC,OR]
RewriteCond %{HTTP_COOKIE} ^.*(<|>|’|%0A|%0D|%27|%3C|%3E|%00).* [NC,OR]
RewriteCond %{REQUEST_URI} ^/(,|;|:|<|>|”>|”<|/|\\\.\.\\).{0,9999}.* [NC,OR]

RewriteCond %{HTTP_USER_AGENT} ^$ [OR]
RewriteCond %{HTTP_USER_AGENT} ^(java|curl|wget).* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^.*(winhttp|HTTrack|clshttp|archiver|loader|email|harvest|extract|grab|miner).* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^.*(libwww-perl|curl|wget|python|nikto|scan).* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^.*(<|>|’|%0A|%0D|%27|%3C|%3E|%00).* [NC,OR]

RewriteCond %{QUERY_STRING} ^.*(;|<|>|’|”|\)|%0A|%0D|%22|%27|%3C|%3E|%00).*(/\*|union|select|insert|cast|set|declare|drop|update|md5|benchmark).* [NC,OR]
RewriteCond %{QUERY_STRING} ^.*(localhost|loopback|127\.0\.0\.1).* [NC,OR]
RewriteCond %{QUERY_STRING} ^.*\.[A-Za-z0-9].* [NC,OR]
RewriteCond %{QUERY_STRING} ^.*(<|>|’|%0A|%0D|%27|%3C|%3E|%00).* [NC]

RewriteRule ^(.*)$ access_log.php

Tout d’abord, nous défissions la configuration de base de façon à utiliser le module mod_rewrite d’Apache.
RewriteEngine On
Options +FollowSymLinks
Ensuite, notre première règle de base est de désactiver le serveur de signature, qui peut être utile afin de stoper bannière saisir:
ServerSignature Off

je utiliser 2 flags différent, à savoir:
NC - Not Case sensitive
OR - Yep, OR!
La première règle est fondée sur REQUEST_METHOD. La je choisie avec quel méthode mon client va être autorisé a se connecté ou pas accepter ou refusé, donc ici nous allons refusé les méthodes : HEAD ,TRACE ,DELETE et TRACK

RewriteCond %{REQUEST_METHOD} ^(HEAD|TRACE|DELETE|TRACK) [NC,OR]

THE_REQUEST est la totalité de l’url que le client envoie a notre serveur afin d’avoir sa page, et afin d’évité d’avoir 2 requête ou 2 header http et pallié les failles de type http splitter ou l’injection CRLF comme on l’appelait auparavant.

RewriteCond %{THE_REQUEST} ^.*(\\r|\\n|%0A|%0D).* [NC,OR]

HTTP_REFERER peut contenir des caractères qui peuvent utilisé pour un test de pénétration d’une application web ou peu contenir des virus a payload
Donc bloquer tout les caractères qui ne se présenteront pas dans une requête légitime et empêcher que quelque chose de malicieux soit exécuté

RewriteCond %{HTTP_REFERER} ^(.*)(<|>|’|%0A|%0D|%27|%3C|%3E|%00).* [NC,OR]

HTTP_COOKIE c’est la même chose que pour HTTP_REFFERER et ou des caractères ou des payload peuvent être chargé dans des cookies
RewriteCond %{HTTP_COOKIE} ^.*(<|>|’|%0A|%0D|%27|%3C|%3E|%00).* [NC,OR]

REQUEST_URI est importante pour la protection d’un serveur, surtout contre les attaques de BufferOverflow ou bien ……
RewriteCond %{REQUEST_URI} ^/(,|;|:|<|>|”>|”<|/|\\\.\.\\).{0,9999}.* [NC,OR]

Cet ensemble de règles va filtré certaines signatures de navigateurs qui vont nous économisé notre bande passante et éviter de voir s’enflammer notre fichier de log pour rien et contrecarré les plans des pirates les moins expérimenter ….

RewriteCond %{HTTP_USER_AGENT} ^$ [OR]
RewriteCond %{HTTP_USER_AGENT} ^(java|curl|wget).* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^.*(winhttp|HTTrack|clshttp|archiver|loader|email|harvest|extract|grab|miner).* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^.*(libwww-perl|curl|wget|python|nikto|scan).* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^.*(<|>|’|%0A|%0D|%27|%3C|%3E|%00).* [NC,OR]

QUERY_STRING est probablement la plus importante de tous étant donné qu’avec on va pouvoir prévenir des attaques de type sql injection ou xss ou remote shell injection .

RewriteCond %{QUERY_STRING} ^.*(;|<|>|’|”|\)|%0A|%0D|%22|%27|%3C|%3E|%00).*(/\*|union|select|insert|cast|set|declare|drop|update|md5|benchmark).* [NC,OR]
RewriteCond %{QUERY_STRING} ^.*(localhost|loopback|127\.0\.0\.1).* [NC,OR]
RewriteCond %{QUERY_STRING} ^.*\.[A-Za-z0-9].* [NC,OR]
RewriteCond %{QUERY_STRING} ^.*(<|>|’|%0A|%0D|%27|%3C|%3E|%00).* [NC]
Finalement dans le ca ou une de c’est règles s’avère être juste on redirige vers un fichier qui va récolter les informations du suspect.

RewriteRule ^(.*)$ access_log.php
Donc j’espère que ce fichier vous sera utile afin d’assurer une meilleur sécurité……
Fin

Donc c’était ma traduction plus ou moins juste, je vous conseil fortement de lire l’article d’origine et aussi de faire un tour su le net pour lire sur le module mod_rewrite d’apache afin d’avoir une meilleur compréhension et n’hésitez pas a partager avec nous votre expérience dans ce domaine, aussi je tien a rappeler que la plupart de c’est attaques vous pouvez les voir sur WebGoat, une derniere chose, j’utilise cette config dans mes projets et jusqu’ici je n’ai pas de problemes (j’utilise zend framework) et meme coté url rewriting mais j’ai pas pu l’utilisé avec wordpress donc si quelqu’un arrive a le faire sa serai sympa de laisser un commentaire pour dire comment.
Article d’origine : http://www.0×000000.com/index.php?i=567

Sql injection

Hum Hum, donc je disais que les sites ce font trop hacker de nos jours, au point de ce dire mais quand mon site va ce faire hacker et surtout comment, cette ambiance de terreur qui règne sur le web ne semble pas s’estompé avec le temps, alors je décide de voir a quel point il est difficile de hacker un site, je me rend compte qu’il y a plusieurs manières de faire l’une d’elle et celle dont nous allons parler étant le SQL injection, hum hum donc SQL pour le langage et injection vous l’aurai deviner parce qu’il s’injecte parement mais il s’injecte ouuuuuuuu, un petit récapitulatif pour les gens qui ne connaisse pas.

Le langage SQL est utilisé pour traiter des donner, et il utilise une approche asser simple et compréhensible qui d’ailleurs sans vous rendre compte vous utilisé la même approche chaque jour, exemple : je veux me rappeler d’une fille avec qui vous êtes sortie vous aller vous connecter a votre mémoire vous aller sélectionner la fille après le jour de votre rendez vous après l’endroit ou vous avez aimer la regarder et après l’image après dans votre esprit, donc là ce que vous venez de faire est tout simplement une requête a votre cerveau, le langage SQL utilise le même système d’approche, on va pas faire un cour de SQL et si vous voulez l’apprendre ce n’ai pas les cours qui manque, on va juste voir une simple requête comment elle est constituer.

Supposant que nous avons une base de données dont le nom est HUM et dans cette base une table qui a comme nom FEMME et dans cette table nous avons des colonnes qui sont (nom,prenom,tel,adresse,beaute) donc récapitulons, nous avons la base HUM qui comporte la table FEMME avec les colonnes qu’on a vue, ok ok, par exemple je voudrai une requête SQL pour afficher ce qu’il y a dans la table FEMME, la première chose est bien sure de ce connecter a la base HUM après j’exécute m’a requête qui est

SELECT nom,prénom,tel,adresse,beaute FROM femme ;
Donc avec cette requête j’aurai tout les enregistrements de la table mais cette table peut avoir plusieurs lignes genre

Nom Prénom tél. Adresse beauté
Kichigai Chichi 0213 2145639 Street 15 hoem5 Belle
chiva cami 0213 1545548 Street 08 hoem5 Moche
melin liu 0213 5145639 Street 10 hoem5 Tres mmmm

Donc là j’ai une table avec 3 lignes, je voudrai sélectionner la ligne ou le numéro de tel est 0213 1545548 donc la 2 eme, en sql ça va se traduire par

SELECT nom,prenom,tel,adresse,beaute FROM HUM.femme WHERE tel = 0213 1545548

Et ça va me retournée la ligne numero 2, en general ce genre de chose comme le numero de tel est transmis par url genre www.domain….com/index.php?tel=0213 1545548

Personnellement quand je vois ce genre d’url ce qui me vien a l’esprit c’est sa ‘+and+1=0—
Ou bien +and+1=0—ceci pour tester si ce site comporte un filtre ou non, et a ma grande surprise beaucoup de site n’ont comporte pas, et si vous chercher sur gougle SQL injection vous aller trouver une multitude d’article qui explique comment utiliser ce moyen pour extraire des données de la base en injection une requête a travers l’url et vous ne vous fatiguerai même pas a tenter et retenter plus 10 emes de fois et dans plusieurs pages potentiellement vulnérable pour trouver la fenêtre d’entré pour avoir le numéro de la jolie femme qui est dans notre cas chichi, donc si vous voulez faire un site et si vous voulez récupérer des info de votre url n’oublier pas de filtrer le contenu car qui sais peut etre que je serai de passage hahahaha.

Quelques lieus qui j’espere vous serons utiles sinon google est votre amis

http://www.unixwiz.net/techtips/sql-injection.html

http://www.security-hacks.com/2007/05/18/top-15-free-sql-injection-scanners

je republie cette article ici afin de faire une suite qui n’est ul autre que comment se protéger, du moins de la plupart des tentatives

source: Medblog

Piwik l’aternative a google analytics

Google Anatycs est l’un des meilleur system de statistique gratuit que j’ai utilisé, et voila piwik qui n’a pour ambition rien d’autre que d’obtenir une place dans nos cœur surtout dans la partie qu’occupe Google Analytics, comme vous pouvez le lire sur le site piwik c’est google analytics version open source.

Maintenant pourquoi choisir piwik au lieu de Google Analytics, pour ces 3 raisons :

  • · Piwik est bâtie sur un system de plugin que vous pourrez enlever ou ajouter selon votre besoin ainsi qu’une possibilité de programmer votre propre plugin
  • Les données de vos statistiques sont chez vous, donc vous en faite ce que vous voulez et vous avez la possibilité des les exploités autre part que sur votre site à travers un system de flux
  • Une interface aussi riche et facile d’accès que celle de· Google analytics

Ce qui manque a piwik pour être une alternative a Google Analytics c’est la gestion d’une compagne de pub mais la possibilité de faire c’est propres plugin peu régler le problème a condition de savoir le faire.

Photoshop a l’honneur

Comme vous devez le savoir ma tendance est au courbes dans tout que ça soit sur le web ou autre part mais restons sur le web pour le moment du moins ^_^, donc voici un liste qui me semble très intéressent et qui propose pas moins de 45 tutoriels afin d’avoir un meilleur résultat question navigation, et tout les amoureux du aqua style serons servie

Un autre site que je tien a présenté et qui est psd2cssonline et comme vous l’aurez deviné il a pour but de convertir votre fichier Photoshop en forme de page html en utilisant une page de style CSS bien sure dans certaines limites, et pour savoir jusqu’ou le site peut aller vous avez une liste de tutoriels sur le site qui vous propose des conseils afin d’avoir un résultat utilisable

Page suivante »