Je compte cependant reprendre un nouveau blog, dont l’adresse sera disponible sur mon nouveau site : http://www.jeremyheleine.net (sortie dans quelques jours aussi… comme par hasard ! :O ).

Article écrit par Flinx pour Pti nénuphare, le 13/02/2010 | Lien permanent | Si vous lisez cet article sur un site/blog autre que Pti nénuphare, c'est qu'il peut avoir été reproduit illégalement. Merci de le signaler alors à son auteur original via cette page.

La fonction aleatoire()

Commençons déjà par créer le début de notre fonction :

1
2
3
4

function aleatoire(minimum, maximum)
{
	return Math.round(Math.random());
}

Nous générons ici un nombre aléatoire compris entre 0 et 1 que nous arrondissons avec la méthode round(). Nous obtiendrons donc soit 0, soit 1. Ce n’est pas encore ce que nous voulons.

Nous avons un minimum à atteindre. Par exemple si nous indiquons 100 en minimum, nous aimerions bien que si la méthode random() renvoie 0, la fonction aleatoire(), elle, nous renvoie 100. Pour cela, il suffit d’ajouter le minimum au nombre généré.

1
2
3
4

function aleatoire(minimum, maximum)
{
	return Math.round(minimum + Math.random());
}

Nous obtenons donc un nombre aléatoire compris entre minimum et… minimum + 1. Ce n’est pas encore ça, même si on s’approche du résultat.
Pour atteindre le maximum, nous devons modifier le nombre aléatoire renvoyé par random(), mais pas n’importe comment évidemment. En fait, il suffit de réfléchir logiquement. En effet, si random() renvoie 1, il faut que aleatoire() renvoie la valeur de l’argument maximum. Si on oubliait le minimum, on penserait à multiplier le nombre de random() par le maximum : on obtiendrait un nombre compris entre 0 et maximum.
Cette opération qui paraît logique, nous pouvons l’utiliser pour utiliser notre minimum. Pour le moment, nous ajoutons minimum à un nombre aléatoire simple. Nous devons donc ajouter minimum à un certain nombre de sorte à atteindre le maximum si random() renvoie 1. On ne peut pas ajouter le maximum : faites l’essai avec des exemples simples, vous verrez que ça ne fonctionne pas (du tout). Si on multiplie le nombre aléatoire par le maximum, on se retrouve avec un nombre compris entre minimum et (minimum + maximum). Ça ne va pas. Mais justement, ce (minimum + maximum) ne vous donne-t-il pas une idée ? Si on multipliait par la différence qu’il y a entre le maximum et le minimum, qu’obtiendrions-nous ? La réponse est un nombre compris entre minimum et maximum.

1
2
3
4

function aleatoire(minimum, maximum)
{
	return Math.round(minimum + Math.random() * (maximum - minimum));
}

Preuve

On peut prouver avec des outils mathématiques que nous obtenons bel et bien un nombre compris entre minimum et maximum.
Soit x le nombre renvoyé par random().
Soit m le minimum voulu.
Soit M le maximum voulu.

0 ≤ x ≤ 1
⇔ 0 ≤ x(M - m) ≤ M - m
⇔ m ≤ m + x(M - m) ≤ m + (M - m)
⇔ m ≤ m + x(M - m) ≤ M

C.Q.F.D.

Article écrit par Flinx pour Pti nénuphare, le 22/11/2009 | Lien permanent | Si vous lisez cet article sur un site/blog autre que Pti nénuphare, c'est qu'il peut avoir été reproduit illégalement. Merci de le signaler alors à son auteur original via cette page.

1
2
3
4

body
{
	height: 100%;
}

Et là, on teste et c’est le drame, rien n’a changé !

À quoi est dû ce problème ? De nulle part ? Un bug ? Non, pas du tout.
Il suffit de bien regarder votre document HTML pour voir l’origine du soucis. La balise body possède un parent : la balise html. Si la balise html n’a pas de hauteur spécifiée, elle prendra la hauteur que prend votre document et rien de plus, même s’il reste de la place disponible sur l’écran. La balise body, lorsque vous lui spécifiez une hauteur, se réfère à la balise html dans le cas d’un pourcentage. Que faire alors ? Donner une hauteur de 100% à la balise html, tout simplement.

1
2
3
4
5
6
7
8
9

html
{
	height: 100%;
}
 
body
{
	height: 100%;
}

Ou plus condensé :

1
2
3
4

html, body
{
	height: 100%;
}

Article écrit par Flinx pour Pti nénuphare, le 08/11/2009 | Lien permanent | Si vous lisez cet article sur un site/blog autre que Pti nénuphare, c'est qu'il peut avoir été reproduit illégalement. Merci de le signaler alors à son auteur original via cette page.

1

element.addEventListener('click', action, false);

Seulement, il vous est peut-être déjà arrivé, avec un lien notamment, d’indiquer l’événement directement en HTML :

1

<a href="#" onclick="action(); return false;">Lien</a>

Vous notez donc le return false; qui permet d’éviter que le lien ne vous conduise vers le href comme il devrait normalement le faire. Il existe d’autres façons de faire cela, comme mettre ce return false; dans la fonction elle-même et retourner ce que la fonction retourne mais ce n’est pas le sujet.

Ici, nous nous intéressons donc à la méthode addEventListener(). Si vous avez essayé de faire un return false; avec, vous avez sûrement eu une très bonne conclusion, pertinente et tout ce qu’il faut : “rah mais pourquoi ça marche pas cette merde ?!”. Et vous aurez eu raison !
En effet, si vous faites cela par exemple :

1

element.addEventListener('click', function(){action(); return false;}, false);

Ça ne fonctionne pas !
Vous pouvez en tester d’autres du même genre mais ils ne seront pas précisés ici, car mon but n’est pas de vous montrer des codes non fonctionnels…

La solution c’est d’utiliser une méthode pour annuler l’effet premier de l’événement. Cette méthode est une méthode liée à l’événement lui-même et elle se nomme preventDefault(). Vous vous dites alors comme récupérer l’événement lui-même ? C’est une simple variable passée à la fonction, rien de plus simple !
Voici un exemple :

1

element.addEventListener('click', function(evt){action(); if (evt.preventDefault) {evt.preventDefault();}}, false);

Vous pouvez également l’utiliser comme ceci :

1

element.addEventListener('click', function(evt){action(evt);}, false);

Et ajouter à la fonction action() ceci :

1
2
3
4
5

function action(evt)
{
	if (evt.preventDefault)
		evt.preventDefault();
}

Je vous conseille cette dernière méthode car plus lisible.

Et voila, avec ça, plus de problème !

Article écrit par Flinx pour Pti nénuphare, le 29/10/2009 | Lien permanent | Si vous lisez cet article sur un site/blog autre que Pti nénuphare, c'est qu'il peut avoir été reproduit illégalement. Merci de le signaler alors à son auteur original via cette page.

Le principe

Nous allons définir ce qu’il faut dans cette partie. En effet, il faut nous mettre d’accord sur les dates des saisons…
Je vais ici proposer les dates, vous pourrez les modifier facilement.
Voici donc :

• Printemps : entre le 21 mars et le 21 juin (exclus)
• Été : entre le 21 juin et le 21 septembre (exclus)
• Automne : entre le 21 septembre et le 21 décembre (exclus)
• Hiver : entre le 21 décembre et le 21 mars (exclus)

Le code

Maintenant, entrons dans le vif du sujet : le code lui-même.
Nous débuterons le script en créant quelques timestamp. En effet, nous allons créer les timestamp des limites des saisons afin de pouvoir ensuite les comparer au timestamp actuel pour vérifier dans quelle saison nous sommes.
Pour cela, nous utilisons la fonction mktime() avec 0 pour les heures, minutes et secondes, la limite vue plus haut pour le jour et le mois et enfin l’année courante pour l’année.
Cela nous donne ce code :

1
2
3
4
5
6

<?php
$printemps = mktime(0, 0, 0, 3, 21, date('Y'));
$ete = mktime(0, 0, 0, 6, 21, date('Y'));
$automne = mktime(0, 0, 0, 9, 21, date('Y'));
$hiver = mktime(0, 0, 0, 12, 21, date('Y'));
?>

Ensuite, nous allons simplement créer une condition pour savoir dans quelle saison nous nous situons. Pour le savoir, il suffit de récupérer le timestamp actuel avec time() puis de le comparer aux timestamp créés.
Ainsi, par exemple, pour savoir si nous sommes en été, il suffit de vérifier si le timestamp actuel est supérieur ou égal à celui du 21 juin et s’il est inférieur à celui du 21 septembre.

Attention cependant, le cas de l’hiver est spécial. En effet, l’hiver apparaît à partir du 21 décembre, mais est présent au début de l’année également ! Je vais d’abord vous montrer le code. Si vous ne comprenez pas, ne vous inquiétez pas, je commente le cas de l’hiver juste après.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
$printemps = mktime(0, 0, 0, 3, 21, date('Y'));
$ete = mktime(0, 0, 0, 6, 21, date('Y'));
$automne = mktime(0, 0, 0, 9, 21, date('Y'));
$hiver = mktime(0, 0, 0, 12, 21, date('Y'));
$actuel = time();
 
if ($actuel >= $hiver or $actuel < $printemps) // Hiver
{
	// Styles appliqués en hiver
}
elseif ($actuel >= $printemps and $actuel < $ete) // Printemps
{
	// Styles appliqués au printemps
}
elseif ($actuel >= $ete and $actuel < $automne) // Été
{
	// Styles appliqués en été
}
elseif ($actuel >= $automne and $actuel < $hiver) // Automne
{
	// Styles appliqués en automne
}
?>

Nous retrouvons au début nos timestamp créés et celui actuel, rien de spécial.
Viennent ensuite les conditions. Comme vous pouvez le voir pour le printemps, l’été et l’automne, il n’y a rien de spécial : on vérifie comme je l’avais dit si le timestamp est compris dans les limites de la saison.
Cependant, la condition pour l’hiver est légèrement différente… Heureusement elle n’est pas plus compliquée que les autres. En effet, nous vérifions simplement si le timestamp actuel est plus supérieur ou égal à celui du commencement de l’hiver de l’année courante. Ainsi, la condition renverra vrai si nous nous situons entre le 21 décembre et la fin de l’année. Nous vérifions ensuite si nous nous trouvons avant le commencement du printemps. Avec or, seule l’une des conditions a besoin d’être remplie, donc il nous faut être au début ou à la fin de l’année pour obtenir l’hiver.

Voila pour ce tutoriel, si vous rencontrez des problèmes avec le script, n’hésitez pas.

Article écrit par Flinx pour Pti nénuphare, le 19/09/2009 | Lien permanent | Si vous lisez cet article sur un site/blog autre que Pti nénuphare, c'est qu'il peut avoir été reproduit illégalement. Merci de le signaler alors à son auteur original via cette page.

C’est donc avec Kakolio que je développe Pixelics depuis plusieurs mois déjà.
Sur Pixelics, vous pourrez donc parler de développement web et de graphisme en exposant vos soucis par exemple, ou encore en parlant de l’actualité de ces domaines, etc., le tout dans un forum entièrement créé par nous-mêmes.
De plus, un module de commandes est présent, via lequel vous pourrez commander une réalisation graphique, un script ou même un site complet.

Bref, n’attendez plus, c’est par là que ça se passe : Pixelics !

Article écrit par Flinx pour Pti nénuphare, le 09/09/2009 | Lien permanent | Si vous lisez cet article sur un site/blog autre que Pti nénuphare, c'est qu'il peut avoir été reproduit illégalement. Merci de le signaler alors à son auteur original via cette page.

Première méthode : ne rien changer

Ça c’est plutôt pas mal. En effet, lu sur cet article (j’y reprend d’ailleurs les moyens de contournement, mais que j’aurai testé seulement et que je juge les mieux), des calculs tendent à prouver que Hadopi sera totalement inefficace.
En effet, si on résume : le nombre d’utilisateur de P2P (utilisé légalement ou pas) est trop important pour que Hadopi puisse suivre. Avec 10 000 mails par jour, vous recevrez un mail tous les 16 mois. Étant donné qu’Hadopi revient à 0 tous les 6 mois, vous êtes tranquille.

Deuxième méthode : contester

Sachant que la contestation est inutile dans cette loi, où est l’utilité ? Tout simplement les bombarder de mails. Si tout le monde fait ça, ils seront surchargés et ça ne sera pas plus mal.
Évidemment, rien ne vous empêche de répondre 2 ou 3 fois par mail que vous recevez, et même plus si vous voulez.
Encore plus évident : rien ne vous empêche non plus de les bombarder de mails, même en ayant rien reçu… :-°

Bon tout ça, c’est bien beau, ça veut dire que Hadopi ne sert à rien (on n’en doutait pas d’ailleurs). Mais en faisant cela, vous recevrez peut-être des mails quand même… C’est embêtant ça encombre la boîte de réception. C’est pourquoi dans un prochain article nous verrons comment la contourner véritablement et là, vous verrez que les créateurs de cette loi n’ont vraiment pas réfléchi (bon en même temps quand on voit qui c’est…).

Article écrit par Flinx pour Pti nénuphare, le 29/05/2009 | Lien permanent | Si vous lisez cet article sur un site/blog autre que Pti nénuphare, c'est qu'il peut avoir été reproduit illégalement. Merci de le signaler alors à son auteur original via cette page.

HADOPI, c’est quoi ?

Une loi liberticide qui amène le début du contrôle de l’État sur internet. En effet, voici ce que cette loi prévoit :

• 10 000 mails par jours
• 3 000 lettres recommandées par jour
• 1 000 coupures de l’accès à internet par jour
• le tout sans possibilité de contestation et sans intervention de la justice
• aucune présomption d’innocence ; alors que pour d’autres délits et crimes on doit prouver votre culpabilité, pour HADOPI, vous devrez prouver votre innocence
• un logiciel espion payant que vous serez quasiment obligé d’installer pour “prouver votre bonne foi” en cas de fausse accusation
• une liste blanche : si vous vous connectez sur des bornes Wifi d’accès public, vous ne serez autorisé à consulter que les sites autorisés par le gouvernement

Voila pour les principaux points de cette loi qui porte atteinte à nos libertés.
Dans un prochain article nous verrons comment contourner cette loi.

Article écrit par Flinx pour Pti nénuphare, le 24/05/2009 | Lien permanent | Si vous lisez cet article sur un site/blog autre que Pti nénuphare, c'est qu'il peut avoir été reproduit illégalement. Merci de le signaler alors à son auteur original via cette page.

La technique actuelle : multiplication des div

La technique que l’on utilise actuellement consiste à multiplier les div. Elle n’est pas compliquée en soi mais nécessite tout de même l’utilisation de plusieurs div avec un minimum de un div par coin (qui contiendra une image de fond représentant ce coin arrondi) plus un div de contenu.

Il existe aussi une autre méthode qui consiste à utiliser les tableaux. Il faut savoir que cette technique est à exclure car à l’heure actuelle, on préfère n’utiliser les tableaux que dans des cas où on en a réellement besoin (pour créer un véritable tableau justement) : pour la mise en page, le CSS doit être préféré.

Une nouvelle technique : border-radius

Le CSS 3 nous apporte une nouvelle fonctionnalité : border-radius. Cette fonctionnalité n’est pour le moment présente que du côté de Firefox et Safari et peut être utilisée via 2 propriétés : -moz-border-radius et -webkit-border-radius.

Voici un exemple d’utilisation de ces propriétés.

1

<div id="arrondis">Ce div possède des coins arrondis que vous pourrez voir avec Firefox ou Safari.</div>

Et le CSS qui va avec :

1
2
3
4
5
6
7
8
9
10

#arrondis
{
	padding: 5px;
	background-color: #1781EE;
	color: #FFFFFF;
	text-align: center;
	border: 1px solid #1E67B4;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

Ce qui donne ceci :

Vous pouvez aussi choisir de n’arrondir que tel ou tel coin. Pour cela, il faut utiliser les propriétés suivantes :

• Coin supérieur gauche : -moz-border-radius-topleft et -webkit-border-top-left-radius
• Coin supérieur droit : -moz-border-radius-topright et -webkit-border-top-right-radius
• Coin inférieur gauche : -moz-border-radius-bottomleft et -webkit-border-bottom-left-radius
• Coin inférieur droit : -moz-border-radius-bottomright et -webkit-border-bottom-right-radius

Petites précisions

Vous l’aurez peut-être deviné : border-radius possède quelques limites. En effet, son utilisation est parfaite pour le cas que nous venons de voir, mais si vous utilisez des dégradés arrondis ou tout autre style qui n’est pas présent dans les fonctionnalités de bordure de CSS, il vous faudra utiliser des div et des images de fond.

Autre petite précision : vous n’êtes pas obligé d’utiliser une bordure avec border pour utiliser border-radius. En effet, si aucune bordure n’est spécifiée mais qu’un border-radius est présent, le bloc sera quand même arrondi, mais sans bordure, comme vous le vouliez.

Article écrit par Flinx pour Pti nénuphare, le 12/04/2009 | Lien permanent | Si vous lisez cet article sur un site/blog autre que Pti nénuphare, c'est qu'il peut avoir été reproduit illégalement. Merci de le signaler alors à son auteur original via cette page.

Le XSS, qu’est-ce que c’est ?

XSS est l’abréviation de Cross Site Scripting, X symbolisant la croix (cross en anglais), pour différencier l’abréviation de celle du CSS.
Attaquer un site en utilisant une faille de type XSS signifie injecter du code dans ses pages. Par exemple, dans le cas d’un forum, si les messages affichés ne sont pas sécurisés, l’attaquant peut envoyer n’importe quel code XHTML.
Ainsi, on peut afficher du code JavaScript malveillant sur le site, mais pas seulement. Par exemple, une balise meta peut très bien vous faire rediriger vers un autre site.

L’intérêt pour l’attaquant d’une faille de type XSS est donc de rediriger vers un autre site, de récupérer certaines données (aussi bien sur le site que sur l’ordinateur de celui qui visite innocemment le site), mais aussi de pouvoir exécuter certaines actions sous l’identité du site, etc.

Comment se protéger des attaques de type XSS ?

Pour être tranquille, vous pouvez utiliser la fonction htmlspecialchars() sur les variables que vous affichez et dont la valeur dépend de ce qu’un utilisateur a entré (encore une fois, l’exemple simple d’un membre postant sur un forum).
Cette fonction va simplement encoder les caractères spéciaux XHTML. Ainsi, si l’utilisateur a voulu utiliser une balise script ou autre, la balise s’affichera telle quelle, son contenu ne sera pas exécuté.

Article écrit par Flinx pour Pti nénuphare, le 28/03/2009 | Lien permanent | Si vous lisez cet article sur un site/blog autre que Pti nénuphare, c'est qu'il peut avoir été reproduit illégalement. Merci de le signaler alors à son auteur original via cette page.