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/

Depuis le temps que je suis sous Google Chrome (et je ne pense pas en changer pour Firefox 4) , je n’avais pas encore pris le temps de bien rechercher des plug-in pratiques et utiles pour le WebDesign.
C’est donc un peu par hasard, que j’ai trouvé Résolution test. Ce plug développé par Ben BeckFord permet tout simplement de redimensionner le navigateur chrome  pour tester l’affichage de votre site.

Les fonctions de l’extension :

• redimensionne chrome suivant une liste de résolutions pré enregistrées
• ouvre un nouvelle fenêtre pour chaque résolution choisie
• possibilité d’ajouter, de modifier et de supprimer des résolutions
• permet d’afficher Google Browser Size en transparence (bon google Browser Size est toujours fait avec paint)
• et un page d’option pour régler le tout

Si le plug in vous rend vraiment service, je rappelle qu’il est sous licence  »beer Ware » : il est possible de faire un don au créateur afin qu’il puisse se payer un bière !!

Le lien vers l’extension

Si comme moi vous aimez les « freebies » et autres fichiers gratuits , alors ce site est pour vous.
Le principe, proposer chaque jour un nouveau document photoshop psd gratuit.
A noter que certains fichiers sont proposés en « premium » avec un prix allant de 3 à 5 euros payable via paypal.

http://365psd.com/

Tout est dans le titre ! Au hasard de mes recherches sur les CSS3 et les dégradés, j’ai trouvé ce générateur.
Il permet de

• générer un dégradé multipoint comme dans photoshop ou illustrator, directement depuis le site
• avoir une aperçu du rendu y compris pour Internet Explorer
• générer le code correspondant pour ne plus avoir qu’à faire un copier/coller dans votre feuille de style

L’interface est (trop)  sobre et efficace. Pour le fan de css3 (et les autres aussi d’ailleurs) je ne peux que vous le conseiller.
http://www.colorzilla.com/gradient-editor/

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

Selon Mashable, Twitter devrait très prochainement mettre en place un bouton « Tweet » permettant de partager sur Twitter un billet,une info … et de savoir combien de personnes ont retweetter cette info. D’après les informations obtenues par Mashable, il suffira d’ajouter « une seule ligne de code » dans vos pages afin de mettre en œuvre la fonctionnalité :

<script src=''http://platform.twitter.com/widgets.js'' type=''text/javascript''>
</script>
<a href=''http://twitter.com/share''>Tweet</a>

Pour le moment, le code est fonctionnel, mais seulement quelques comptes ont la possibilité de l’utiliser.

Ce bouton sera disponible dans 3 formats :

• 110×20
• 55×20
• 55×63

Alors, comment vas réagir la communauté à cette annonce.L’adoption de ce bouton sera t elle massive, et au détriment de ce que propose déjà Tweetmeme.

Avec l’arrivée du Html 5 et des Css version 3, le vieux problème de compatibilité entre les navigateurs revient sur le devant de la scène.
En effet, on aurait pu penser que ces nouveaux standards donneraient lieu à un meilleur respect des standards de la part des navigateurs. Mais c’est loin d’être le cas, très loin. Alors, pour le web designer, c’est une nouvelle source de soucis (chaque navigateur avec sa feuille de style, etc ).
Et c’est à ce moment qu’intervient http://html5readiness.com/ , ce site reprend les informations du fameux http://caniuse.com/, mais là où caniuse.com présente ses informations de manières assez austères, html5readiness.com fait l’effort d’être très graphique. Aprés, est il aussi pratique que caniuse.com ?

Le Lien :
http://html5readiness.com

Depuis quelques années, les résolutions d’écrans les plus exotiques ont fait leur apparition sur le marché. En effet, il est loin le temps ou il y avait le 1280×1024 pour les « initiés » et le 1024×768 pour le reste du monde et le tout bien sur en 4/3.
Mais aujourd’hui ce n’est plus du tout le cas : 16/9, 16/10, 21/9 … et autant de tests d’affichages de pages pour les webdesigner.
Et c’est la ou browize nous viens en aide, au menu :

• Redimensionner le navigateur (sauf chrome) en direct
• Fonctionne sans plug in
• 7 tailles de navigateurs par défaut
• Dimensions personnalisables

l’adresse du service en ligne : http://www.browize.com/

J’ai toujours aimé les outils m’aidant à trouver et choisir des couleurs pour constituer de belles palettes de couleur.Je dois avouer que depuis l’arrivée de Kuler je n’ai plus trop cherché de nouvelles applications de ce genre.

Mais je viens de trouver une web-application un peu différente :
Le choix des couleurs se fait sur une sorte de diamant (d’où le titre)  le tout dans une interface assez sympathique.

Après test, je ne suis pas sûre que choisir des couleurs en 3d apporte quelque chose, en tout cas l’application est bien réalisée.

http://www.colorotate.org/