Web

Les techniques du Web

Fil des billets - Fil des commentaires

CSS et césure

Comme le fait remarquer Franck, il est désormais possible d’autoriser les césures (au niveau CSS) dans les dernières versions des navigateurs.

Les césures, dans le monde de l’imprimé, doivent être exceptionnelles car elles cassent la lecture, c’est pour ça qu’elle ne sont autorisées que sur des petites ou moyennes justifications (largeurs) et toujours sur du texte justifié, jamais sur du texte en drapeau (à gauche ou à droite) et jamais sur du texte centré. Ces règles devraient aussi naturellement s’appliquer sur les médias web mais, malheureusement, j’ai l’impression que beaucoup de personnes vont sauter sur la nouveauté et que l’on va trouver pas mal de sites web avec du texte aligné à gauche avec césure. :-/

Masquer et afficher des éléments HTML avec jQuery

Une petite page de test qui masque des éléments sans les masquer : ils sont envoyés en dehors de la page, ce qui devrait améliorer l’accessibilité pour les personnes aveugles. Si javascript est désactivé tout est déployé. Je vous laisse découvrir le code source de la page dans votre navigateur… :-)

Pour l’adapter au menu de votre blog doclear2, il faut faire une sélection sur #blognav h2 et travailler avec des liens sur ceux-ci (de préférence mettre le code javascript dans un fichier externe).

Cette page est une adaptation du tutoriel d’alsacréations pour créer un menu accordéon.

Le site d'Europeana : la honte !

L’Europe va lancer sa propre bibliothèque virtuelle pour contrer google : Europeana. Problème, énorme problème : le site est mis en page avec des tableaux, comme dans les années 90, sans respecter les standards et en ne tenant pas compte de l’accessibilité. C’est ça qu’ils appellent la culture pour tous ?

J’espère que c’est juste la version de développement qui est comme ça et que la finale sera réalisée dans les règles de l’art… :-(

Mise-à-jour du 20/11/20088 : finalement c’est pas si mal…

La version finale utilise bien les techniques modernes de mise-en-page web, s’il y a encore un petit couac par-ci par-là, on peut dire que c’est satisfaisant. J’ai quand même encore certains doutes sur l’accessibilité.

P.S. : le site est très lent en ce moment… Forcément, si tous les européens des 27 pays se précipitent pour visiter. :-)

CoolIris

L’autre jour, en discutant de choses et d’autres avec Audrey, elle m’a fait découvrir une extension amusante pour Firefox [1] : CoolIris. Cette extension ouvre une fenêtre en plein écran en présentant divers contenus d’une façon assez originale, les galeries photos, les vidéos youtube, etc, sont plaqués sur un mur en 3D que l’on peut faire défiler, zoomer… C’est assez bluffant. Plutôt qu’un long discours, je vous renvoie vers son billet sur le site de Compétence Mac.

Cerise sur le gâteau, elle reconnaît automatiquement le flux rss des galeries de Dotclear : une fois sur la page d’une galerie, on clique sur l’icône illuminée, et… C’est parti. :-)

Notes

[1] elle fonctionne aussi dans d’autres navigateurs

Télécharger Firefox

Pour mes lecteurs qui utiliseraient encore Internet Explorer (et rien que pour eux), un logo placé au-dessus du module de recherche vous proposera de télécharger Firefox (ce navigateur est très loin devant IE en ce qui concerne les possibilités, la sécurité et le confort d'utilisation).

Téléchargez Firefox

Malheureusement, ce logo est en anglais, dès que je trouve une version française je fais le remplacement.

Les microformats et le spam

Connaissez-vous les microformats ? Les microformats sont ces petit bouts d'informations dissimulés dans nos pages web. Les plus connus sont les formats hCard (carte de visite, basé sur le format vcard) et hcalendar (annotation calendrier). Tout cela est incorporé de manière totalement transparente et valide, grâce à une idée ingénieuse : l'utilisation des classes css pour identifier les données.

Exemple de carte de visite (avec l'aide de hcard creator) :

	<div id="hcard-jean-dupont" class="vcard">
		<p class="fn n">
		  <span class="given-name">Jean</span>
		  <span class="family-name">Dupont</span>
		</p>
	 <p class="org">Café</p>
	 <p><a class="email" src="mailto:email@exemple.com">email@exemple.com</a></p>
	 <p class="adr">
	  <span class="street-address">1, Grand Place</span><br />
	  <span class="postal-code">1000</span>
	  <span class="locality">Bruxelles</span><br />
	  <span class="country-name">Belgique</span>
	 </p>
	</div>


Si le navigateur (via un plugin ou nativement) détecte la présence de la hcard, il va vous proposer de la sauvegarder dans votre carnet d'adresse.

Problème, encore une fois : l'adresse courriel est en clair, du pain bénit pour les robots spammeurs… La solution consiste à décomposer l'adresse en plusieurs éléments dissociés et les rassembler grâce à javascript. Ici nous utiliserons un script de Julien Royer. Voici le code html adapté :

	<div id="hcard-jean-dupont" class="vcard">
		<p class="fn n">
		  <span class="given-name">Jean</span>
		  <span class="family-name">Dupont</span>
		</p>
	 <p class="org">Café</p>
	 <p><span class="email"><span class="p">&nbsp;</span> <span class="u">email</span>(arobase)<span class="h">example</span>(point)<span class="d">com</span></span></p>
	 <p class="adr">
	  <span class="street-address">1, Grand Place</span><br />
	  <span class="postal-code">1000</span>
	  <span class="locality">Bruxelles</span><br />
	  <span class="country-name">Belgique</span>
	 </p>
	</div>


Et voilà le résultat final. Plus de problèmes de spam.

Par contre je me pose une question sur ces microformats, en particulier les cartes de visite : n'y aura-t-il pas un jour des robots collecteur qui vont parcourir le web pour collecter ces fameuses vcard ? Et quel usage en feront-ils ? Vu que ce genre d'informations n'étaient jusqu'à présent pas normalisée, il était quasiment impossible de collecter automatiquement ces données… De toutes façons, il faut toujours faire très attention quand on met des infos personnelles sur le net… À bon entendeur… ;-)

Belgacom annonce le 20 Mbits d'ici peu !!!

Selon la Libre Belgique, Patrick Delcoigne aurait annoncé pour bientôt une ligne à 20 Mbits (garantie) parée pour la télé haute définition. Il était temps ! On va pouvoir enfin rattraper un peu le retard sur nos voisins français, reste plus qu'à les suivre au niveau tarif.

En vue de l'avènement de la télévision haute définition, Belgacom a annoncé mercredi qu'il s'apprête à faire passer la vitesse de connexion sur son réseau de 4,6 à 20 Mégabits par seconde (Mbps) (LLB du 11/11).

J'attends l'annonce officielle avec impatience…

- page 1 de 2