Maxime Millet

Un sitemap pour blogotext

10/08/2013 | |

Voilà un petit code pour faire un sitemap des articles de blogotext, ce code marche pour les nouvelles version seulement car quand j'ai mis le mien à jour j'ai du refaire le code.

<?php
header('Content-Type: text/html; charset=UTF-8');
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">\n";
?>
<url>
<loc>http://localhost</loc>
<lastmod><?php echo date('Y-m-d'); ?></lastmod>
<changefreq>always</changefreq>
<priority>1.0</priority>
</url>
<?php
$GLOBALS['BT_ROOT_PATH'] = '';
error_reporting(-1);
$begin = microtime(TRUE);
require_once 'config/user.php';
require_once 'config/prefs.php';
require_once 'inc/lang.php';
require_once 'inc/conf.php';
require_once 'inc/them.php';
require_once 'inc/fich.php';
require_once 'inc/html.php';
require_once 'inc/form.php';
require_once 'inc/comm.php';
require_once 'inc/conv.php';
require_once 'inc/util.php';
require_once 'inc/veri.php';
require_once 'inc/jasc.php';
require_once 'inc/sqli.php';
$GLOBALS['db_handle'] = open_base($GLOBALS['db_location']);
$query = "SELECT bt_date,bt_id,bt_title,bt_link FROM articles WHERE bt_date <= ".date('YmdHis')." AND bt_statut=1 ORDER BY bt_date DESC";
$liste=liste_elements($query, array(), 'articles');
foreach ($liste as $billet)
{
$item = '<url>'."\n";
$item .= ' <loc>'.$billet['bt_link'].'</loc>'."\n";
$item .= " <lastmod>$billet[annee]-$billet[mois]-$billet[jour]</lastmod>\n";
$item .= ' <changefreq>yearly</changefreq>'."\n";
$item .= ' <priority>0.8</priority>'."\n";
$item .= '</url>'."\n";
echo $item;
}
?>
</urlset>

Utiliser du TeX sur son site

25/06/2013 | Commentaires fermés |

J'ai il y a quelques semaines cherché un moyen pour afficher des caractères TeX sur des pages web. Pourquoi ? Ça me semble plus joli et plus compréhensible que les formules classiques, sqrt(a^2+a^2) par exemple.

Pour cela j'ai trouvé deux solutions viables qui peuvent toujours servir à d'autres : un script cgi et une lib javascript, chacun à ses avantages et ses inconvénients je vais donc vite fait vous présenter les deux.

MimeTeX, un script CGI tex2gif
Créé en 2002 par John Forkosh ce petit script sous licence GPL permet de convertir le code TeX en image gif sans que latex soit installé sur votre serveur ça peut donc tourner sur un hébergement mutualisé sans problème (testé chez ovh) de plus vous pouvez très bien le compiler vous même ou utiliser les versions déjà compilées par l'auteur (dispo ici).
Pour que ça fonctionne il ne faut pas oublier de le transférer en mode binaire et d'activer les CGI sur le serveur, pour apache il faut ajouter ceci :
Options +ExecCGI
AddHandler cgi-script .cgi
Du coup la racine carrée de a²+b² est tout de suite plus jolie :sqrt(a^2+b^2) ou encore le moment d'une force moment d'une force
TeX en javascript avec MathJax
MathJax est une lib qui permet d'utiliser soit du TeX soit MathML (de l'xml) et donne en rendu du texte. En revanche il est plus le lourd que le script cgi mais il permet :
  • de copier les formules avec un simple clique droit
  • de personnaliser les formules avec du css

Ça donne donc ceci : \[ \sqrt(a^2+b^2) \] \[ \left(\overrightarrow{AB} \wedge \vec{F}\right) \cdot \vec d \]

C'est ici que ça se passe : MathJax


Bon après le choix du script dépend de ce que l'on veut faire, pour un site avec beaucoup de formules ou pour faire des présentations mathjax convient le mieux car plus agréable mais si c'est pour quelques formules par page le script cgi suffit ;-)

Centrer plusieurs blocs horizontalement quand on ne connait pas leur taille en CSS (responsive design)

09/02/2013 | Aucun commentaire |

Quel webmaster ne s'est pas amusé un jour où l'autre à essayer de centrer plusieurs blocs horizontalement ? A mon humble avis aucun ou du moins très peu ;-) .

Je vous propose aujourd'hui une solution responsive (qui s'adapte à la résolution des visiteurs)...

Bloc 1

Oh !

Un jolie bloc !!

Bloc 2

Ce bloc n'a pas de largeur définie.

Bloc 3

Le bloc 3


Ce sont ces blocs que je souhaite centrer. Très simple, il me suffit d'appliquer des marges automatiques à son conteneur (margin-left:auto; margin-right:auto;) ! Eh bien non, ce n'est pas possible. En effet, pour utiliser ces marges le conteneur doit avoir une taille définie, mais je ne connais pas la taille de mes blocs donc si j'applique ces marges le conteneur sera lui centré mais pas mes blocs.

La solution que je vous propose ci-dessous est d'utiliser display:inline-block sur vos blocs ce qui permet de les afficher sur la même ligne et de leur appliquer des styles habituellement réservés aux éléments de type inline.

Ainsi, plus besoin de flottante pour afficher des blocs sur la même ligne. Pour centrer vos blocs il suffit de centrer le texte dans le conteneur en utilisant text-align:center; . Si le conteneur est plus petit que la taille totale des blocs alors une nouvelle ligne sera créée et les blocs seront également centrés, cette solution s'adapte donc à la résolution du visiteur, c'est du responsive design.

Bloc 1

Oh !

Un jolie bloc !!

Bloc 2

Ce bloc n'a pas de largeur définie.

Bloc 3

Le bloc 3


Pour centrer les blocs verticalement entre eux, il suffit d'utiliser vertcial-align:middle; qui est une propriété réservée aux éléments inline et du coup fonctionnant sur les inline-block.

Le code CSS

#conteneur
{
/* Placez le style du conteneur ici, seul al ligne ci-dessous est nescessaire. */
text-align:center;
}
.bloc
{
display:inline-block; /* Pour que la magie opere */
text-align:left; /* Pour retablir l'alignement du texte apres c'est à vous de voir */
vertical-align:middle; /* Pour centrer verticalement nos blocs */
}

Le code HTML

<div id="conteneur">
<div class="bloc">
<h3>Bloc 1</h3>
<p>Oh !</p>
<p>Un jolie bloc !!</p>
</div>
<div class="bloc">
<h3>Bloc 2</h3>
<p>Ce bloc n'a pas de largeur définie.</p>
<p>Pourtant, il se centre bien !</p>
</div>
<div class="bloc">
<h3>Bloc 3</h3>
<p>Le bloc 3</p>
</div>
</div>

J'ai utilisé des div mais ça marche très bien avec des listes aussi ! N'hésitez pas à jeter un coup d'oeil sur le page d'exemples, c'est parfois plus simple à comprendre quand c'est visuel.

Avertir ses visiteurs qu'ils sont infectés par softonic, conduit.com, babylon, lo.st... bonne idée ?

27/12/2012 | 1 commentaire |

En regardant la provenance de mes visiteurs, je me suis aperçu que pas mal d'entre eux arrivaient grâce à des moteurs de recherche bidons du genre conduit.com, softonic ou encore babylon mais il y en a encore pleins d'autres...

Ces moteurs sont en général utilisés à l'insu de l'utilisateur car il s'agit de malwares ayant infectés l'ordinateur après l'installation d'un logiciel ou d'une barre d'outils à la con et même en changeant la configuration du navigateur rien n'y fait, ils sont toujours là !

Ma question est, est-ce qu'avertir le visiteur que son ordinateur est probablement infecté et lui proposer une aide à la désinfection (en lui donnant un lien le permettant, en l'envoyant sur un forum etc) est une bonne idée ? Mon idée, serait de faire comme microsoft avec IE6 Countdown afin d'avoir un réseau de sites web avertissant l'utilisateur.

J'attends vos avis ;-)

Changer l'apparence des boutons radios uniquement avec du CSS

15/12/2012 | Commentaires fermés |

Exemple de boutons radiosAvec le CSS, c'est cool, on peut tout customiser... eh bien non, c'est faux ! du moins pour certains élements on ne peut pas directement modifier leur apparence sans passer par la ruse. C'est le cas des boutons radios (ou inputs radios) et après avoir fais plusieurs recherches sur comment les personnaliser je dois vous avouer que je n'ai rien trouvé de bien concret c'est pour quoi j'ai décidé de partager avec vous la solution que j'ai trouvé et qui n'utilise pas de scripts tiers.

Démo disponible ici

Pour commencer, ma solution n'est surement pas compatible avec les anciens navigateurs et tant pis, il faut plutôt inviter l'utilisateur à se mettre à jour plutôt que de faire des hacks spécialement pour eux. Cependant elle ne devrait pas rendre vos boutons radios infonctionnels.

Le code HTML

Pour l'HTML je n'ai qu'une chose à vous dire, comme je l'ai dis en intro il n'est pas possible de changer l'apparence de ces inputs directement, vous devrez obligatoirement leur donner un label même si celui-ci reste vide.

<input type="radio" name="genre" value="homme" id="genre_femme">
<label for="genre_femme">Une femme</label>
<input type="radio" name="genre" value="femme" id="genre_homme">
<label for="genre_homme">Un homme</label>
<input type="radio" name="genre" value="dieu" id="genre_dieu" disabled>
<label for="genre_dieu">Un dieu</label>
<input type="radio" name="genre" value="robot" id="genre_robot">
<label for="genre_robot">Un robot</label>

Maintenant que nous avons notre code html, nous allons attaquer le CSS dont je vais vous proposer deux façons de faire, la première où vos boutons seront des images et la seconde où vos boutons seront 100% CSS.

Le CSS

Parmis les nouveautés du css3 se trouvent les selecteurs :not() et :checked qui permettent d'intergargir sur l'élement en fonction de son état. Ces propriétés étant nouvelles, elles ne se pas reconnues par les anciens navigateurs donc notre customisation ne fonctionnera pas. Nous devons tout d'abord désactiver le style par défaut de l'input.

input[type="radio"]:not(:checked),input[type="radio"]:checked{display:none;}

Il faut maintenant associer le input avec le label en utilisant input[type="radio"]+label .

Des boutons radios avec des images

Il vous faut au moins 3 images pour: l'état décoché, l'état coché, l'état désactivé et une quatrième éventuellement pour rendre plus design qui correspond à l'état hover.

input[type="radio"] + label /* quand le bouton est décoché */
{
display:block;
background-image:url(decoche.png);
background-repeat:no-repeat;
min-width:16px;
padding-left:20px;
min-height:16px;
}
    Ce code est tout con, voici deux petites explications :
  • min-width et min-height doivent correspondre à la taille de votre image.
  • padding-left permet de décaler le texte vers la gauche afin que notre image ne soit pas recouverte, il faut mettre la taille de la longueur de votre image plus une marge.
input[type="radio"] + label:hover /* faculfatif mais plus sympa */
{
background-image:url(hover.png);
}
input[type="radio"]:checked + label /* quand le bouton est coché */
{
background-image:url(coche.png);
}
input[type="radio"]:disabled + label /* quand le bouton est désactivé */
{
background-image:url(media/images/boutons-radios/desactive.png);}

Remarque : on aurait aussi pu utiliser des sprites afin d'avoir qu'un seul fichier.

Des boutons radios 100% CSS

Le principe est le même sauf qu'on va maintenant utiliser le selecteur :before.

input[type="radio"]+label
{
display:block;
margin:2px;/* c'est plus aéré avec une marge !*/
}
input[type="radio"]+label:before
{
content:"";/* pour que le bouton soit visible*/
display:inline-block;
width:1em;
height:1em;
background-color:#000;
border:2px solid #C60;
border-radius:55px;
}
input[type="radio"]+label:hover:before /*Bouton hover*/
{
background-color:#F60;
}
input[type="radio"]:checked+label:before/*Bouton coché*/
{
background-color:#FC0;
}
input[type="radio"]:disabled+label:before/*Bouton désactivé*/
{
background-color:#999;
border:2px solid #333;
}

Voilà ! On aurait pu faire mieux parce que là c'est pas très joli avec les nouvelles propriétés du css3 comme les dégradés, les transitions, les ombres...

Rediriger tout un site vers le sous domaine www

09/08/2012 | |

Rediriger une page dont l'url ne contient pas le sous domaine www est une question souvent posée sur les forums de webmastering, c'est souvent histoire d'avoir des liens plus esthétique et pour éviter des problèmes de duplicate-content.

La solution à placer à la racine du site dans un fichier htaccess (Apache) :

RewriteEngine on
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(.*) http://www.example.com/$1 [QSA,L,R=301]

Et la solution pour Nginx, il faut placer le code suivant en haut du vHost (pas encore testé).

server {
server_name exemple.com;
rewrite ^(.*) http://www.exemple.com$1 permanent;
}

Et voilà !

Redirection 301 sans paramètres (Query_String)

22/07/2012 | |

Lorsque l'on change l'adresse d'une page (que ce soit le nom ou le chemin) de manière définitive il faut créer une redirection 301.

Cette redirection est "propre", elle va permettre aux moteurs de recherche de garder la réputation de l'ancienne page (si le thème du contenu est le même bien sur) et ne sera pas compté comme du duplicate-content. Ils peuvent quand même mettre quelques semaines pour effectuer le changement de l'adresse dans leur index...

Une redirection 301 est très simple à mettre en place, il suffit d'utiliser la directive RedirectPermanent d'apache comme ci-dessous.

RedirectPermanent /fruit-pomme.html http://www.exemple.com/fruits/pomme.html

Jusque là pas de problème, c'est assez facile. Maintenant si vous souhaitez faire une redirection dont l'ancienne contient des paramètres d'url (des GET ou Query String) celles-ci vont être automatiquement transférées avec la nouvelle adresse.

RedirectPermanent /fruit.html?fruit=pomme http://www.exemple.com/fruits/pomme.html

Dans le cas ci-dessus, le visiteur ne sera pas redirigé vers /fruits/pomme.html mais vers /fruits/pomme.html?fruit=pomme . J'ai trouvé deux solutions pour résoudre ce problème, la première consiste à ajouter un ? à la fin de la nouvelle adresse, les paramètres ne seront pas transférées comme ci-dessous :

RedirectPermanent /fruit.html?fruit=pomme http://www.exemple.com/fruits/pomme.html?

La deuxième solution consiste à faire la redirection dans l'ancienne page avec PHP et grâce à la fonction header().

<?php header("HTTP/1.1 301 Moved Permanently");
header("Location: http://www.exemple.com/fruits/pomme.html"); ?>

SyndExport : classe PHP pour parser des flux ATOM et RSS

09/07/2012 | |

SyndExport 1.0SyndExport est ma classe PHP maison pour parser un flux RSS ou un flux ATOM. Il existe déjà des parsers qui sont surement plus puissants que le mien, mais pour mes usages, ils sont trop lourds. SyndExport permet d'extraire les informations du flux (comme le titre, la description, le lien etc) et les items afin de les exporter en tableau PHP ou en JSON pour intérargir directement avec vos objets javascript.

Le type de flux (rss ou atom) peut être détecté automatiquement si vous ne le connaissez pas.

Télécharger la version 1.1

Documentation

Vous devez vous assurer que votre serveur PHP supporte l'API SimpleXML.

Documentation SyndExport

Site web de SyndExport

Licence Creative Commons BY-SA 3.0

Script de coloration syntaxique pour votre site

02/06/2012 | |

Lorsque l'on souhaite ajouter des bouts de code ou des exemples sur son site, c'est toujours plus agréable d'avoir un code coloré ! :-)

Jusqu'à maintenant, j'utilisais SyntaxHighlighter parce qu'il était disponible pour plusieurs langages mais en contrepartie il était assez lourd, il fallait inclure le core du script, jquery, son css plus les langages que je voulais colorer... Donc je suis passé à Highlight qui est bien plus léger et tout aussi simple ! Il fonctionne même sans jQuery, il suffit d'inclure un seul fichier javascript et le css pour les couleurs, c'est magique et je gagne un temps fou dans le chargement de mes pages !

En voici une petite démo :


<?php
// fonction mangeur de frites
function getPatateBox()
{
$nbrFrites = rand(15, 25);
$nbrPatates = rand(1, 5);
return array($nbrFrites, $nbrPatates);
}
$patatebox = getPatateBox();
echo "Vous avez $patatebox[0] frites dans votre patateBox !\n";
echo 'Vos frites ont été faites par '.$patatebox[1].' patates !';
?>

Il détecte même automatiquement le langage utilisé ! Bref le top ! Voici le site de son éditeur où vous pouvez le télécharger gratuitement et ici pour voir les différents thèmes qui sont proposés ;).

Javascript compteur de caractères textarea (minimum et maximum)

10/05/2012 | Commentaires fermés |

Il est souvent utile de limiter une textarea en lui indiquant un nombre maximum de caractères à ne pas dépasser soit par une fonction javascript, soit grâce à maxlength="nombre" pour une description par exemple. Cependant, il est aussi utile de donner un minimum de caractères car si votre description fait 20 caractères, je doute qu'elle soit très précise mais je ne voudrais pas douter de vous... ;)

C'est ce que fait le script ci-dessous, il donne un minimum de caractères ainsi qu'un maximum pour que le formulaire soit validé.

var total=0;
var mini=150;
var maxi=600;
function actionlimite(){
if(total < mini || total > maxi)
{
alert("Votre description utilise "+total+" caractères alors qu'elle doit en faire entre "+mini+" et "+maxi+" caractères !");
return false;
}
else{
return true;
}
}
function limite(textarea){
total = textarea.value.length;
}

Ici les limites du nombre de caractères est > 150 et < 600, elles sont définies par les variables mini et maxi.

<form name="description" onSubmit="return actionlimite();">
<textarea name="description" onKeyUp="limite(this);" ></textarea>
<input name="valider" type="submit" value="Envoyer">
</form>

Nous allons d'abords nous intéresser à la ligne 2. Comme vous pouvez le comprendre l'attribut onKeyUp va appeler la fonction limite() à chaque fois qu'une touche est relachée et donc mettre à jour la variable total. Cette fonction prend en paramètre this qui est le pointeur sur la ressource donc ici notre textarea.

Dans la ligne 1, l'attribut onSubmit va lancer la fonction actionlimite() avant de valider le formulaire. Si la fonction retourne true alors c'est que le nombre de caractères est suffisant, le formulaire est dans ce cas envoyé, sinon, elle retourne false et le formulaire n'est pas envoyé.

Bonus : un compteur

Comme je vous ai déjà donné le début de mon code je vais aussi vous donner le compteur :D.

Pour cela il vous suffit de rajouter la ligne ci-dessous dans la fonction limite() :

document.getElementById('compteur').innerHTML = total+" Caractère(s)";

Et n'oubliez pas de d'ajouter <span id="compteur"></span> dans votre page ;).

Démonstration du code