Vous souhaitez connaître le niveau de compatibilité de votre navigateur web. Et les différents sites listant les balises html 5 sont parfois très beau mais peu pratique http://html5readiness.com/ . D’autres sont plus complets, mais  en général, ces sites se contentent de lister les balises sous forme de tableaux.
Mis en place par Niels Leenheer la site http://html5test.com/ teste pour vous la compatibilité Html5 de votre navigateur. Le site vous fournis un résultat sur 400 points, sachant que le meilleur résultat est pour le moment détenu par Google chromium qui obtient 293 points. Le plus mauvais résultat c’est (forcement) Internet Explorer 6 avec … 17 points.

le test passe en revue les différents éléments du Html 5 tel que :

• Le Canvas
• Le support de l’audio et de la video
• Les éléments de formulaires
• La géolocalisation
• Le Support WebGL

Le lien pour faire le test html 5 :  http://html5test.com/

J’utilise depuis quelque temps pour le création de sites un générateur de grilles. Pour faire simple, j’utilise un service web sur lequel je règle les paramètres de ma grille et le site génère un fichier zip contenant :

• un fichier html contenant quelques balises <div> à titre d’exemple

<div class="container clearfix">
		<div class="grid_12">
			<h1>12</h1>
		</div>

• un fichier css contenant la définition des colonnes

/*
 & Columns : 12
 & Gutter %: 20%
 & MinWidth: 960px
 & MaxWidth: 1080px
 */
.grid_1 { width: 6.6666666666667%; }
.grid_2 { width: 15%; }
.grid_3 { width: 23.333333333333%; }

Oui, je sais l’arrondi à la 13e décimale pour la largeur, ce n’est pas ce que l’on a fait de plus élégant.

Ces colonnes sont tout de suite utilisables, il suffit d’attribuer une classe aux balises <div>, par exemple grid_12 (pour avoir une largeur équivalente à 12 colonnes).
Ce générateur de grille, Tiny Fluid Grid est inspiré du fameux 1kb CSS grid. Mais Tiny Fluid Grid a l’avantage de proposer l’option largeur minimum et maximum ainsi qu’une prévisualisation de rendu de la grille.

http://www.tinyfluidgrid.com/

Envie de tester, d’apprendre, d’approfondir ses connaissances en CSS3, alors css3 maker est fait pour vous.

Au menu de ce générateur :

• Border-Radius
• Gradient
• Css Transform
• Css Tansition
• Text Shadow
• Box Shadow

Et pour chacune des propriétés css, css3Maker nous informe de la compatibilité des navigateurs. Une information plutôt importante, sachant que tous les navigateurs ne gèrent pas de la même façon ,et c’est rien de la dire …

Pour le tester, le lien ici  : http://www.css3maker.com/

Pour palier à ce soucis, Rui Zhang, web-designer indépendant, propose un framework css qui ne se contente pas de faire la mise à zéro des éléments html comme le fait la feuille de style d’Eric Meyer. Mais ce framework permet aussi de ré-écrire les règles de bases pour la typo, les tables, les titres …

Le framework est disponible dans deux formats, soit non compressé pour les développeurs, soit compressé et dans ce cas la feuille de style ne dépasse pas les 2,5 Ko.

Le lien vers toucan css reset

Le but du CSS reset est de mettre à zéro différentes valeurs d’éléments html d’une page afin de rendre l’affichage  du site, le plus cohérent possible entre les différents navigateurs.

Une technique classique mais fortement déconseillé consiste à utiliser le sélecteur universel (*). En effet, cette technique mettra toutes les valeurs à zéro,  ce qui n’est pas le but de la manœuvre.

Exemple de mauvaise utilisation :

* {
    margin: 0;
    padding: 0;
}

Après quelques recherches sur le web, je suis tombé sur cette page ou Eric Meyer nous propose une feuille de style de remise à zéro assez complète. Cette feuille de style est très souvent citée dans les articles traitant de la mise à zéro des CSS

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Malgré tout, cette solution n’est pas parfaite et si vous décidez d’utiliser cette technique, il vous faudra une bonne connaissance des feuilles de style.

Il permet de :

• comparer les fichiers .psd couche par couche.
• comparer les styles associés aux couches.

Son fonctionnement est extrêmement simple, deux colonnes, on choisit un fichier pour la colonne de gauche, un pour la colonne de droite… et magie, les différences sont mises en avant.
Il dispose d’options de filtrages pour n’afficher que les différences ou que les couches identiques. Il est aussi possible de zoomer sur une partie du fichier psd.
Pour résumé, c’est un peu le winmerge de Photoshop

Le logiciel est disponible gratuitement pour Windows ici : http://pixelnovel.com/comparepsd

Les possibilités offertes par les fichiers .htaccess du serveur Apache sont souvent mal ou trop peu connues.

J’ai trouvé un peu par hasard (sur Twitter) un générateur de .htaccess.
Ce site japonais, mais traduit en anglais, vous permet de configurer toutes sortes de choses, en ayant au fur et à mesure le code du .htaccess qui apparait:

• Gestion des Accès et droits aux répertoires
• Création d’une authentification via .htaccess
• Gestion des pages d’erreurs en fonction du type d’erreur
• Création de directives de redirections
• Gestion des restrictions d’accès

Personnellement, j’ai trouvé ce site bien pratique pour la génération de fichiers .htpasswd (fichiers de mots de passes associés au .htaccess).

http://www.htaccesseditor.com/en.shtml

J’avais déjà évoqué dans un précédent billet, un outil d’optimisation du temps de chargement d’un site internet.
C’est sur l’excellent site W3 Avenue que j’ai eu la chance de dénicher cette application en ligne permettant d »analyser le chargement d’une site internet.
Load Impact permet donc d’avoir une vue plus complète des fichiers chargés à l’affichage de votre site. L’analyse est plus complète (à mon avis) qu’avec pingdom.
A noter que Load Impact propose aussi une version payante mais bien plus complète.

Uptime Robot est un service entièrement gratuit de monitoring de sites internet. Permettant de suivre jusqu’à 50 sites, le service vous envoie une alerte par e-mail ou par sms, fonction que je n’ai pas encore eu l’occasion de tester.
Le service supporte le protocole Http et Https, ce qui est assez rare dans ce genre de service gratuit.
Si vous aussi vous voulez vous inscrire et découvrir le service, c’est par ici Uptime Robot