Astuces de Webmaster

A tester : CrossBrowserTesting.com

CrossBrowserTesting.com propose une approche différente en offrant la possibilité de tester ses sites non seulement sur tous les navigateurs du marché, y compris les plus confidentiels ou les versions les plus récentes comme IE8, mais également sur toutes les versions de tous les systèmes d’exploitation, Windows (incluant Windows 7), Mac OS et Linux, le tout quelque soit votre machine, et sans rien installer à part une machine virtuelle Java, normalement déjà présente sur votre PC.

(source : presse-citron.net)

Microsoft vient de sortir un outil à suivre : SuperPreview

Il permet pour l’instant de comparer les différences de rendus entre les différentes version d’Internet Explorer mais déclare ajouter bientôt les navigateurs concurrents.

Limites vues par Raphaël d’Alsacreations :

Microsoft a déjà fait part de certaines limitations :
• Les filtres et transitions ne sont pas disponibles sur le moteur IE6, ce qui ne permet pas de traiter les PNG transparents avec DXImageTransform.
• Les éléments positionnés via fixed peuvent ne pas être affichés correctement.
• Les tags object, embed et applet peuvent ne pas être affichés avec les bonnes dimensions si IE8 n’est pas installé.
• Les pages vues avec le moteur d’IE6 et utilisant JavaScript pour modifier leur contenu pourraient… ne pas s’afficher comme dans l’IE6 original, car le script sera interprété comme il le serait dans IE7 ou IE8.
Ajoutons à cela que les fonctionnalités sont tout de même très en-deçà de celles proposées par Firebug et ses équivalents pour Safari et Chrome – dans l’état actuel du développement. Télécharger 250 Mo si les comportements ne sont pas garantis comme dans les versions authentiques, cela reste discutable. La licence de cette beta expirera le 1er octobre 2009.

(source : http://www.alsacreations.com/actu/lire/685-microsoft-expression-web-superpreview.html

A suivre donc

Alsacreations est un très bon site que vous connaissez probablement.

Je vous conseille comme à moi-même d’aller régulièrement faire un petit quizz au hasard, on apprend toujours quelque chose, c’est ça qui est bon

Ici : http://www.alsacreations.com/quiz/

Petit instantané (on verra l’évolution au fil du temps )
Moyenne Joueurs
XHTML débutant 5.9 1155
XHTML moyen 5.6 596
XHTML difficile 4.5 610
XHTML difficile (bis) 4.9 442
CSS débutant 9.1 886
CSS moyen 4.7 604
CSS difficile 3.3 446
JS / DOM débutant 6.3 305
JS / DOM moyen 4.7 204
JS / DOM difficile 3.4 207
Accessibilité 7.3 260
PHP débutant 8 799
PHP moyen 5.9 655
PHP difficile 5.6 634
PHP difficile (bis) 2.9 459

On en a tous rêvé en secret, on l’avait à peu près découvert en regardant les sources Javascript de Google Maps, il faut maintenant se rendre à l’évidence, on ne peut pas se passer de Minify, un projet déposé sur Google Code.

Vous qui rêviez de rassembler tous vos scripts JQuery en un seul fichier..

http://code.google.com/p/minify/

L’idée ? transformer ça :

<script type= »text/javascript » src= »/_lib/_action/montre2.js »></script>
<script type= »text/javascript » src= »/javascript/prototype.js »></script>
<script type= »text/javascript » src= »/javascript/scriptaculous.js »></script>
<script type= »text/javascript » src= »/javascript/jscalendar/calendar.js »></script>
<script type= »text/javascript » src= »/javascript/jscalendar/lang/calendar-fr.js »></script>

<script type= »text/javascript » src= »/javascript/jscalendar/calendar-setup.js »></script>
<script type= »text/javascript » src= »/javascript/jquery-1.2.3.js »></script>
<script type= »text/javascript » src= »/javascript/jquery.form.js »></script>
<script type= »text/javascript » src= »/javascript/ficheProduit.js »></script>
<script type= »text/javascript » src= »/javascript/resa.js »></script>

en ça :

<script type= »text/javascript » src= »/min/?f=javascript/jquery-1.2.6.min.js,javascript/jquery.scrollTo.js,javascript/player/carousel_behavior.js,javascript/jquery.hoverIntent.min.js,javascript/superfish.js,javascript/jquery.bgiframe.min.js,javascript/jquery.reflect.js,javascript/jquery.form.js »></script>

ce petit bout de code PHP rassemble tous les scripts en un seul, retire les espaces qui ne servent à rien, ce qui compresse un petit peu le tout et vous met ça à disposition.

L’idée c’est qu’au lieu d’une dizaine de requête, vous n’en avez plus qu’une, ce qui allège considérablement les échanges et les temps de téléchargement..

Il suffit d’ailleurs de voir leur exemple : 98KBytes au départ, 29KBytes à l’arrivée.. et moins de questions / réponses entre le navigateur et le serveur.

Et ça marche aussi avec les fichiers CSS

Pour les perfectionnistes, on a là une bonne bible de tout ce qu’on peut faire pour optimiser le chargement des pages : http://developer.yahoo.com/performance/rules.html

Qu’attendez-vous ?

Je vais ajouter mon exemple personnel un peu plus tard mais en attendant et pour ceux qui en ont besoin, voici un modèle tout à fait extensible où les 3 colonnes sont de même largeur quelque soit le contenu :
http://www.pixy.cz/blogg/clanky/css-3col-layout/

Vous avez peut-être déjà eu ce problème, bien connu des vieux loups, voici deux ressources intéressantes au sujet de la transparence des PNG sous Internet Explorer 6 :
http://www.twinhelix.com/css/iepngfix/
http://esprit-creatif.blog.mongenie.com/index.php?idblogp=406297a

Si vous êtes comme moi et que c’est chaque fois une galère d’arriver à calibrer vos modèles, un très bon site vous proposera quelques bases de mises en page à récupérer et à personnaliser.

Vous y trouverez des 2 ou 3 colonnes standards, extensibles bien entendu.

Tout est là : http://www.code-sucks.com/css%20layouts/faux-css-layouts/

En très court, très simple : il faut comprendre que d’après les normes du W3C, le width est censé représenter la largeur du bloc de texte, et le padding la marge entre la bordure et le bloc de texte. On aurait donc une largeur de bloc = width + padding.

Dans la réalité, ceci fonctionne avec Firefox, mais pas avec Internet Explorer.

Voici donc un hack très facile à mettre en pratique, pour un bloc dont on veut que la largeur constatée (width + padding) soit à 160px :

width: 160px; /* pour ie */
padding-left: 10px;
voice-family: "\"}\"";
voice-family:inherit;
width: 150px; /* pour les respectueux des standards */

Voici la source qui ne semble plus être disponible actuellement sur le site OpenWeb.eu.org : Gérer les modèles de boîte standard et Microsoft