Aller au contenu | Aller au menu | Aller à la recherche
Peintre, poète, photographe, dessinateur, musicien et amoureux de la Bretagne mon collègue Philippe Jacquery a ouvert son site internet[1] : « Le fil de la mémoire ».
Je vous invite à y jeter un coup d'œil, ça vaut le détour. 
[1] Et oui il est passé sur Mac 
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.
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... 
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.
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.
[1] elle fonctionne aussi dans d'autres navigateurs
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).
Malheureusement, ce logo est en anglais, dès que je trouve une version française je fais le remplacement.
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"> </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…
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…
En allant sur le site de Dsls, pour voir si une nouvelle version du plugin gallery pour Dotclear 2 était arrivée, je tombe sur ce billet.
'Tain le développement des plugins pour jquery avancent à grand pas... Pas mal de choses qui se faisaient encore en flash, se font maintenant de manière très légère et accessible en javascript avec jquery. Le résultat est époustouflant. Personnellement, j'adore le plugin Cycle.
Actuellement de plus en plus d'appareils portables et ultra portables comme les pda et les gsm propose un navigateur web intégré. Sur les modèles de marque Nokia, c'est bien souvent un navigateur basé sur le WebKit d'Apple, ce programme n'a pas l'air mauvais mais on se rabattra avec bonheur sur le navigateur Opera Mini qui connaît un succès grandissant dû à ces grandes qualités techniques (entres autres : les images sont réduites en taille en passant par un serveur chez Opera avant d'être affichée, facilitant ainsi la navigation si on a une petite connexion). Les machines d'Apple, elles, utilisent une version simplifiée de Safari, ce qui permet, vu la taille de l'écran et l'ergonomie de l'engin, de voir des pages entières « comme à la maison » et de zoomer à loisir sur la page pour afficher l'information intéressante. Pour les autres PDA et GSM, il ne fait aucun doute que Opera Mini est le meilleur navigateur. Il existe également un autre excellent navigateur : Minimo de la fondation Mozilla, mais il est toujours en version beta.
Jadis pour faire de la mise en page web on utilisait des tableaux (dans d'autres tableaux) et on calait les cellules des tableaux (pour ne pas qu'elles bougent) avec des images transparentes à la taille désirée. Cette manière était évidemment mauvaise : vous imaginez créez une mise-en-page dans votre traitement de texte préféré en créant des colonnes avec des tableaux et créant des titres manuellement en surlignant le texte et en donnant à chaque fois la taille, la couleur, etc ? Non. Vous définiriez les colonnes dans les propriétés du document et vous créeriez les style dont vous avez besoin pour vos titres, puces, etc. D'autant plus que pour changer la mise en forme de votre texte, il suffit de modifier le style et tout change dans le document.
C'est ainsi que certains ont envisagé l'utilisation de feuille style pour les pages Web et sont nées les CSS : Les feuilles de styles pour les pages html. En changeant un paramètre dans une feuille css commune à toutes les pages du site, on modifie l'aspect du site en une seule opération. Ceci fonctionnera d'autant mieux si vos pages respecte la sémantique html. La philosphie de la combinaison html+css est de séparer le contenu de la présentation.
Mais, il y a mieux (et là on s'approche du sujet de ce billet) : on peut définir une feuille de style par média :
screen : pour un écran standardprint : pour l'impressionhandheld : pour les appareils portablesprojection, etc…Exemple de code pour les pages de ce site[1] :
<style type="text/css" media="screen"> @import '/dotclear2/themes/lombre/style.css'; </style> <style type="text/css" media="handheld"> @import '/dotclear2/themes/lombre/handheld.css'; </style> <style type="text/css" media="print"> @import '/dotclear2/themes/lombre/print.css'; </style>
Vos pouvez admirer l'effet de la feuille de style print en faisant un aperçu avant impression dans votre navigateur. Tout ce qui est annexe (menu, tag, etc) a été effacé pour l'impression[2].
Opera Mini respecte complètement les standards et gère le media handheld lorsqu'il le rencontre sur les pages visitées. Il n'est donc pas nécessaire de faire une seconde version du site (quelle horreur!) : si votre site est bien construit, il suffit de lui adjoindre une deuxième feuille de style avec le bon média.
Safari aussi respecte les standars mais… À sa façon bien particulière : il utilise un sélecteur CSS3 (toujours en beta, les versions actuelles des CSS sont à 2.1). Voici le code utilisé sur ce site :
<style type="text/css" media="only screen and (max-device-width: 480px)"> @import '/dotclear2/themes/lombre/handheld.css'; </style>
Vous remarquerez que j'ai utilisé la même feuille de style pour les iBidules et les handheld. Dans un premier temps, cela restera comme ça, mais il est tout à fait possible de faire une feuille de style spécifique.
Sur les machines équipées de Windows Mobile, c'est bien souvent Internet Explorer qui est proposé. Je vous conseille grandement de passer à Opéra Mini, vous y gagnerez énormément. Pour les Nokia avec le WebKit, apparemment c'est aussi un bon navigateur mais je ne sais pas s'il reconnaît le média Handheld quand il est présent. Avec Minimo non plus je ne sais pas si cela est possible.
En créant des sites en suivant les standards et de manière sémantique, il est tout fait possible de l'adapter automatiquement avec le media désiré sans devoir créer de multiple version d'un même contenu mais en le présentant différemment suivant le media. C'est là toute la puissance des CSS. Dans le cas de l'iPhone et de l'Pod Touch, si on ne veut pas refaire un nouveau design, il suffit d'utiliser le même fichier CSS que pour le handheld, ça vous fera gagner du temps.
[1] La syntaxe particulière (et valide) de la règle @import utilisée ici permet de faire sauter la feuille de style pour IE5 Mac qui a disparu des statistiques. L'utilisation de @import par rapport à l'élement <link> permet quant à elle de désactiver les styles sur les vieux navigateurs (IE4, Netscape 4) qui ont un support partiel des CSS. Ces navigateurs verront donc le site nu, sans mise-en-page, mais il sera parfaitement utilisable (pour voir le site nu, dans Firefox allez dans le menu Affichage/Style de la page/Aucun style).
[2] Il s'agit de la feuille de style print livrée avec Dotclear2 légèrement modifiée
[3] À noter que Safari reconnaît le microformat hcard et crée un lien automatiquement sur les numéros de téléphone pour les composer d'un clic
Suite à cette très intéressante discussion sur le forum d'alsacréation, dans le texte qui suit j'ai inséré une image avec object au lieu de img. C'est un logo…
Le texte incorporé comme contenu supplémentaire apparaît si je désactive les images dans mon navigateur. Il est vrai que l'attribut alt permet la même chose avec img sauf qu'ici on n'est pas limité par la taille et on peut y mettre le contenu que l'on veut (paragraphe, titre, etc) puisque c'est de l'html classique. Voici le code :
<object type="image/png" data="/all-blogs/public/imagesdc1/parallels/parallels.png" width="113" height="75">
<p>…Le logo de l'application parallels…</p>
</object>
Un autre avantage de la balise object c'est que l'on peut encapsuler des object dans des object et générer ainsi un effet de cascade. Par exemple si l'on place un objet en svg, on peut y mettre une alternative en png au cas où le navigateur ne supporterait pas le svg et enfin le texte en html. Ce qui nous donne ceci visuellement :
Avec le code suivant :
<object type="image/svg+xml" data="/all-blogs/public/imagesdc1/testsvg/zapfino.svg" width="200" height="49">
<object type="image/png" data="/all-blogs/public/imagesdc1/testsvg/zapfino.png" width="200" height="49">
<p>Du texte en Zapfino…</p>
</object>
</object>Cet exemple est certe un peu simplet mais on pourrait très bien imaginer un graphique en tarte représentant les parts de marché des navigateurs en svg, puis le même en png et enfin le résultat sous forme de tableau html.
En plus le texte supplémentaire en html est indexé par les moteurs de recherche et lu par les personnes utilisant une synthèse vocale. Les possibilités sont immenses.
Ajout du lendemain : il semblerait que l'affichage déconne dans IE6. Boah, comme disait Laurent Denis : Encore quelques mois à attendre et on pourra proposer aux derniers utilisateurs d'IE6 un design sans CSS
. On ne devra plus se casser la tête pour ce navigateur obsolète. Bref, vous qui passez ici par hasard, il est grand temps de passer à IE7 ou mieux de passer à un navigateur plus moderne comme Firefox, Safari (beta pour le moment sur windows), Opera, etc.
« billets précédents - page 1 de 2