Reflectiv's blog

Black-Frames est à vendre.

Nous considérons que le temps est venu de nous séparer de Black-Frames car ce dernier ne corresponds pas à nos objectifs en terme de projets.

Ainsi nous proposons l'acquisition du nom de domaine, des images, des sources et des différents scripts au plus offrant.

Voici ce que représente Black-Frames :

• Un site développé en Django (Python) avec une base de donnée MySQL
• Actuellement plus de 1100 images (et le nombre ne cesse d'augmenter)
• Un minimum de 100 visiteurs unique par jours
• Déjà plus de 18.000 visites depuis sa sortie le 20 août 2009
• Plus de 195.000 pages vues
• Une moyenne de 130 visiteurs par jours
• Une moyenne de 10.60 pages vues par visites
• Un temps moyen passé sur le site de 4 minutes et 17 secondes
• Et 43.07% de nouvelles visites

Vous pouvez nous contacter par email ou par téléphone, pour avoir plus de détails et/ou nous faire votre offre.

Posted by Cyril Nicodème 

A quoi ressemble du beau HTML ?

J'était déjà tombé sur cet article et déjà à l'époque il m'avait beaucoup plus.

Chris Coyier, de Css-Tricks propose une mise à jour de son article parlant de la beauté du code HTML.

Voici une traduction pour les non anglophones des différents points.

• HTML5 - HTML5 et ses nouveaux éléments rendent le HTML encore plus beau que jamais.
• DOCTYPE - HTML5 a le meilleur doctype !
• Indentation - Le code est indenté de façon a montrer la relation père/fils des différents noeuds et mettre en valeur cette hiérarchie
• Charset - Déclaré en tout premier dans la partie head, avant tout contenu.
• Title - Le titre du site est simple et propre. Le but de la page apparaît en premier, suivi d'un séparateur et finis par le titre du site.
• CSS - Un seul style est utilisé (les différents types de médias sont déclarés dans la feuille de style) et appliqués uniquement aux bons navigateurs. IE 6 et les versions précédentes ont une feuille de style universelle.
• Body - ID appliqué au body afin de proposer un style unique de page sans ajouter de tags superflus.
• Javascript - jQuery est chargé depuis les serveurs Google. Un seul fichier javascript est chargé. Les scripts sont indiqués à la fin de la page.
• Chemin vers les fichiers - Les ressources chargés utilisent des chemins relatifs pour être plus efficaces. Le chemin vers des contenus est quant à lui absolu, afin de pouvoir le proposer à travers d'autres plateforme (lecteur de flux rss par exemple).
• Attribut des images - Les images possède un texte alternatif, principalement pour les personnes utilisant des navigateurs adaptés mais aussi pour la validation. Hauteur et largeur sont indiquées afin d'améliorer le rendu.
• Le contenu principal en premier - Le contenu principal de la page arrive après les éléments principaux (titres, menus, etc) mais avant les contenus secondaires (sidebar).
• Utilisation des éléments descriptif appropriés - Header, Nav, Section, Article, Aside ... toutes ces propriétés décrivent le contenu qu'elles contiennent de façon plus efficace que l'utilisation de divs.
• Hierarchie - le tag Title est réservé pour du contenu concret, et suis une hiérarchie claire.
• Description appropriée des Tags - Les listes sont marquées comme des listes, dépendants du type de liste : ordonnée, non ordonnée, et la liste de définitions
• Contenu récurrent est inclus - Les éléments qui sont utilisés dans plusieurs pages sont incluses via un traitement côté serveur.
• Classes sémantiques - Utilisation de nom, classes, ids appropriés sémantiquement : Elle décrive ce qu'elle font et pas comment ("col" au lieu de "leftbar")
• Classes - Elles sont utilisées à chaque fois qu'un style doit être appliquée plusieurs fois.
• IDs - Ils sont utilisés à chaque fois qu'un élément apparait qu'une seule fois.
• Element dynamique - Ce qui doit être dynamique est dynamique.
• Encodage des caractères - Si c'est une caractère spécial, il sera encodé.
• Liberté de rendu - Aucun point dans la page applique un style visuel et aucun ne doit le faire. Tout dans la page doit être contextuel.
• Commentaires - Les commentaires présents ne peuvent pas avoir l'air évident au premier abord, mais pourrons aider lors d'une prochaine relecture.
• Valide - Le code doit respecter les recommandations W3C. Les tags doivent être clos, les attributs requis utilisés et aucun élément ne doit être déprécié.

Posted by Cyril Nicodème 

Se protéger du Hot Linking

Le problème de publier des images intéressantes, c'est que vous risquez d'avoir d'autres personnes qui les affichent sur leur site, mais en laissant l'image sur votre serveur.

Le problème est qu'ayant l'image hébergée sur votre machine, c'est votre débit qui sera utilisé. Si l'autre site possède un important trafic, il peux tuer votre disponibilité ou en tout cas la ralentir.

Afin d'éviter que les images ne soient affichées depuis un autre site, voici un petit bout de code à mettre dans un fichier .htacess :

RewriteEngine On
#Replace ?yoursite.com/ with your blog url
RewriteCond %{HTTP_REFERER} !^http://(.+.)?yoursite.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/stealing-is-bad.jpg with your "don't hotlink" image url
RewriteRule .*.(jpe?g|gif|bmp|png)$ /images/stealing-is-bad.jpg [L]

Remplacez bien les valeurs indiquées par celle correspondant à votre configuration, et vous serez tranquilles :)

Source: http://www.pcland.info/archives/156/more-htaccess-tricks-for-you-wordpress-blog.html

Posted by Cyril Nicodème 

Useless javascript !

Deux bouts de codes javascripts, toatlement inutiles, donc totalement intéressants !!

Editer n'importe quelle page :

javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);

Cliquez ici puis éditez n'importe quoi ! :)

Effet marrant sur les images :

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200;
DI=document.images; DIL=DI.length;
function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style;
DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px";
DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}
setInterval('A()',5); void(0);

Cliquez-ici pour voir l'effet ! :)

Un tremblement de terre ?

javascript:x=2;e=document.body;e.style.position="absolute";
function rt(){e.style.top=30-(Math.floor(Math.random()*x))+"px";
e.style.left=30+(Math.floor(Math.random()*x))+"px";x+=.6;if(x>30)x=2};
setInterval("rt()",30);void(0);

Cliquez-ici pour voir l'effet !

Un mouvement à la mexicain ?

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200;
DI=document.getElementsByTagName("img"); DIL=DI.length;
function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute';
DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+ "px";
DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+" px"}R++}setInterval('A()',5);
void(0);

Cliquez-ici pour voir l'effet !

Trop inutile :p

P.S: Evitez de cliquez sur tout excepté l'édition :D

Posted by Cyril Nicodème