Aller au contenu | Aller au menu | Aller à la recherche
samedi 16 février 2008
Par Ombre le samedi 16 février 2008, 12 h 21
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.
vendredi 30 novembre 2007
Par Ombre le vendredi 30 novembre 2007, 14 h 44
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… 
vendredi 12 octobre 2007
Par Ombre le vendredi 12 octobre 2007, 15 h 00
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…
lundi 24 septembre 2007
Par Ombre le lundi 24 septembre 2007, 13 h 15
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.
vendredi 14 septembre 2007
Par Ombre le vendredi 14 septembre 2007, 23 h 01
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
samedi 23 juin 2007
Par Ombre le samedi 23 juin 2007, 13 h 45
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="/dotclear/images/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="/dotclear/images/testsvg/zapfino.svg" width="200" height="49">
<object type="image/png" data="/dotclear/images/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.
mercredi 9 mai 2007
Par Ombre le mercredi 9 mai 2007, 10 h 55
Des articles sur le design Web qui m'ont intéressé :
<li> de comporter des éléments de types blocs. Vraiment bien pensé. Chez Veerle.mercredi 17 janvier 2007
Par Ombre le mercredi 17 janvier 2007, 11 h 45
Suite à un billet de Pep, j'ai entrepris de traduire partiellement (parfois avec l'aide de Babelfish) les directives en vigueur depuis le 1er septembre 2006 aux Pays-Bas pour la réalisation des sites gouvernementaux. Le moins que l'on puisse dire c'est qu'ils ont une politique forte de respect des standards du Web ainsi qu'une volonté de rendre le site le plus accessible possible (personnes handicapées, agent utilisateur, etc).
lundi 27 novembre 2006
Par Ombre le lundi 27 novembre 2006, 00 h 08
La mise en page HTML peut parfois sembler très obscure pour les personnes désirant se lancer dans la réalisation de leurs site. Je vais essayer dans le présent billet de décrire étape par étape la réalisation d'une page HTML. Certains puristes s'offusqueront des termes ou des méthodes employées mais il s'agit juste de donner envie à monsieur et madame tout-le-monde l'envie de se lancer en suivant les standards et en rendant le site le plus accessible possible. Des liens seront fournis à la fin de ce billet pour celles et ceux qui veulent approfondir le sujet.