Articles taggués ‘css’
 
16 juin
2009

Benjamin Brossier
Benjamin Brossier

un commentaire
Categories: Web design

Check my Colours teste les couleurs de votre site

checkcolours

Check my Colours est un petit service en ligne qui permet de tester l’accessibilité de son site Internet en termes de couleurs. Grâce à ce service, vous pouvez vérifier si le niveau de contraste entre le fond du site et le texte est assez suffisant pour les déficients visuels, ce type d’accessibilité étant important à prendre en compte pour certain type de site.

Le site est très simple d’utilisation. Sur la page d’accueil, vous avez un champ à renseigner : l’adresse du site internet à tester. Vous validez et le résultat s’affiche, accompagné d’un rapport détaillé.
Chaque ligne du rapport se réfère à un élément du site, il compare la couleur du background (fond) et du texte en vous montrant et vous informant si cela respect le contraste, la différence de luminosité et la différence de couleur.

Une petite copie écran et ça sera plus clair :

checkcolours_test1

Le test de Check my Colours pourra souvent considérer que deux valeurs sont trop proches en termes de couleur (le gris et le noir), alors que sur votre site, cela vous paraît pourtant lisible. C’est un test à ne pas forcément prendre au pied de la lettre car il est très poussé, l’humain a aussi son mot à dire. ;)
Par contre, cet outil a un réel intérêt et s’avère très pratique pour vérifier que, sur votre site, il n’y a pas de texte sur un fond de même couleur. Vous pourriez passer à côté de cette erreur si cet emplacement est destiné à une image et, le jour où votre image est inaccessible, le texte de remplacement sera illisible !

À noter que tous les tests pratiqués sur le site sont basés sur des algorithmes suggérés par le World Wide Web Consortium (W3C).

 
02 juin
2009

François-Xavier Flandin
François-Xavier Flandin

Aucun commentaire
Categories: Technologies

Tout est possible en CSS

Comme tout intégrateur xhtml/css le sait, tout est possible en CSS, mais parfois c’est assez bluffant.

Pour rappel, le CSS est un langage qui permet de décrire la présentation des pages Web. Cela permet de mettre un élément d’une page plutôt à tel endroit ou tel autre, de lui donner telle couleur, telle police, telle taille …

Le lien sur lequel je suis arrivé ce matin est un très bel exemple des extraordinaires possibilités du CSS. Homer Simpson a été dessiné à partir du langage CSS : http://www.romancortes.com/blog/homer-css/ et c’est encore plus impressionnant quand on va voir l’animation de construction : http://nedbatchelder.com/blog/200805/css_homer_animated.html

Je sais, c’est une vieille réalisation, mais quand même !

 
31 mar
2009

Benjamin Brossier
Benjamin Brossier

Aucun commentaire
Categories: Web design

Testez vos connaissances sur les standards Web!

alsacreationquizz

Alsacréations, le site de référence pour l’information et l’apprentissage des standards Web propose maintenant sur son site de tester ses connaissances.

Allez faire un tour et essayez donc de remonter le niveau des internautes sur le sujet du Web et de XHTML, CSS, DOM (JavaScript), PHP, MySQL, l’accessibilité du Web…

Après les 10 questions à choix multiple qui vous seront posées dans les différents quizz, vous accéderez à la page de résultats où votre total sera calculé et les mauvaises réponses expliquées, comme Alsacréations le fait toujours si bien!

Encore une idée originale d’apprendre ou d’approfondir les bases du Web!

Alors, vous avez des bonnes notes ?

 
30 mar
2009

Benjamin Brossier
Benjamin Brossier

Aucun commentaire
Categories: Web design

Formater les feuilles de style CSS

styleneat1

Styleneat est un petit service en ligne sympa et efficace pour éviter de vous arracher les cheveux à reprendre votre feuille de style CSS ou celle de quelqu’un d’autre, qui serait mal organisée ou carrément illisible.

Styleneat propose plusieurs possibilités : soit vous copiez/collez votre CSS directement dans le site, soit vous uploadez la feuille de style depuis votre ordinateur ou vous en indiquez l’url.

Ensuite, vous choisissez le mode de formatage de la feuille de style finale : vous pouvez réorganiser les propriétés par ordre alphabétique, organiser les liens, gérer les propriétés sur une ou plusieurs lignes, etc.

Enfin, il vous suffira de sauvegarder votre nouvelle feuille CSS toute belle, toute propre. Toutes ses propriétés seront indentées comme il faut pour que vous puissiez vous y retrouver plus facilement.

Aller en haut