Beaucoup plus complet que la version précédente, ce nouveau site Web a également pour but de présenter Le Tas De Sable, structure de recherches artistiques et culturelles autour des Arts de la Marionnette, d’accompagnement des jeunes artistes et lieu de formation. Puisque l’objectif était de rester le plus fidèle possible à la mise en page qui m’avait été soumise, j’ai du relever quelques défis techniques comme par exemple l’intégration d’un texte dans un cercle ou encore une galerie animée devant être entièrement administrable (visible sur la page d’accueil). Par ailleurs, c’est à partir du plugin jQuery ‘droppy’ que j’ai créé le menu déroulant (peu banal avec ses trois niveaux), le plus dur étant finalement de le rendre fonctionnel sous ce #?!!&é’ navigateur qu’est IE6, malheureusement encore très répandu… Mission accomplie ! Concernant la mise à jour du contenu, les actualités figurant en page d’accueil ainsi que les galeries photos sont entièrement administrables, tout comme l’espace pro ou encore la page liens.

La compagnie peut donc librement et très facilement ajouter ou modifier du contenu sur son site, et ce en toute autonomie. Le Tas De Sable / Ches Panses Vertes souhaitait que cette nouvelle version soit impérativement en ligne avant leur départ pour l’édition 2009 du festival d’Avignon. C’est chose faite depuis mardi dernier ! Je vous laisse le découvrir à l’adresse suivante : http://www.letasdesable-cpv.org/

Il est possible en CSS de cacher celle-ci très facilement :

a:focus{
outline: none;
}

Grâce à cette simple déclaration dans votre feuille de style, cette bordure disgracieuse n’apparaîtra plus lors du clic sur tous les liens de votre page Web.

J’insiste néanmoins sur l’importance de cette bordure en terme d’accessibilité. En effet, celle-ci est bien utile pour toutes les personnes parcourant une page Internet à l’aide de la touche Tab de leur clavier car elle leur permet de savoir quel lien à l’attention (un appui sur la touche Entrée étant l’équivalent d’un clic de souris sur le lien).

Aussi, si vous souhaitez supprimer cette bordure sur les liens tout en ayant un contenu accessible, je vous conseille de définir la pseudo-classe : focus sur vos liens afin de toujours indiquer à l’internaute quel est celui qui reçoit le focus. On pourrait par exemple souhaiter en contrepartie de la disparition de la bordure, un simple changement de couleur, à définir selon le design de vos pages :

a:focus{
outline: none;
color: green;
}

Dernière précision : attention à placer cette déclaration dans votre feuille de style CSS après toutes celles concernant la mise en forme de vos liens. L’ordre suivant devrait toujours être respecté : a:link, a:visited, a:hover, a:active, a:focus

Lors de l’intégration d’une page Web pour un projet en cours de réalisation, j’ai été confronté à un problème de superposition d’un div par dessus un menu déroulant (balise <select>) dans Internet Explorer 6.

En effectuant quelques recherches sur Internet, j’ai constaté que ce bug était connu de Microsoft et expliqué dans ce document : Gestion des plans d’affichage sous Internet Explorer. On y apprend entre autre, que la balise <select> est un élément dit ‘Windowed’, c’est à dire qu’elle se superpose toujours aux éléments dits ‘Windowless‘ dont la balise <div> fait partie (comme la plupart des balises HTML), et ce, quel que soit le z-index attribué à l’élément div. Ainsi, même en définissant un z-index à mon div, supérieur à celui appliqué au formulaire contenant le menu déroulant, le problème persistait.

Dans ce même document, on apprend également que la balise <iframe> est une des seules balises à tenir compte du z-index des éléments Windowed. Ainsi, en insérant une iframe dans le div devant figurer au dessus du menu déroulant, le problème serait résolu.

L’iframe n’étant présente que pour corriger un bug d’affichage, il s’agit désormais de la rendre invisible. Ci-dessous le style CSS (simplifié) permettant d’y parvenir :

form{
z-index: 100;
}

div{
position: relative;
z-index: 200;
}

div iframe{
display:block;
position:absolute;
top:0;
left:0;
z-index:-1;/*Placer l'iframe en arrière-plan du div*/
filter:mask();/*Cacher l'iframe dans IE6*/
}

Enfin, ce problème n’existant que sous Internet Explorer version 6 et antérieures, vous pourriez choisir de n’insérer l’iframe que si l’internaute utilise ce type de navigateur. Pas besoin pour cela d’une fonction javaScript pour connaître le navigateur utilisé, les commentaires conditionnels conviendront parfaitement :

<div>
<!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>

Ici, l’iframe ne sera insérée dans le div que sur Internet Explorer version 6.5 et antérieures.

Une nouvelle version Bêta sera bientôt disponible sur le site de Microsoft, elle devrait être très proche de la version finale prévue avant la fin de l’année 2008.

L’excellent Firefox prend des parts de marché, Internet Explorer doit répliquer vite et bien

« Vite et bien« , le « bien » à son importance, en effet Internet Explorer 6, le navigateur le plus pourri mauvais de toute l’histoire des navigateurs à démontré de l’importance de la qualité d’un navigateur (respect des standards web, des webmasters, des internautes), il a permis la naissance du concurrent Firefox.

Internet Explorer 7 a réglé de nombreux soucis de la version 6, mais pêche encore très régulièrement dans l’application des standards web, il reste un navigateur de qualité très moyenne, il a donc permis à Firefox d’atteindre 30 % de part de marché en Europe.

Internet Explorer 8 sera donc, selon ses développeurs, respectueux des standards Web, en tout cas je l’espère …