helene-marcy.net : webdesign

Une bonne adresse pour ceux qui veulent mieux utiliser Blogger

2011-02-27T00:26:00.000+01:00

Je ne publie quasiment plus dans ces pages. Non que je ne fasse plus de webdesign, même si j'en fais moins, mais les outils se sont tellement améliorés qu'il n'est plus nécessaire de maîtriser les arcanes du code html ou la CSS pour construire de jolies pages. La plupart des plate-formes offrent maintenant une palette d'outils avec des modèles tout prêts, faciles à personnaliser sans toucher au code.

De temps en temps, on a quand même besoin, pour pousser plus loin la personnalisation, de recourir à quelques astuces, ou tout simplement de savoir où se trouve la fonctionnalité qu'on cherche. Mes trucs pour Blogger vous apprendra presque tout !

Garonne : une belle initiative toulousaine

2009-06-26T11:52:00.006+02:00

Je n'avais pas vu passer l'info, je l'ai captée grâce aux panneaux d'affichage installés dans la principale artère piétonne de Toulouse : la ville s'est dotée d'une typographie spécifique, baptisée "Garonne", et fruit d'un travail pédagogique de l'Ecole des Beaux-Arts, avec un dessinateur de caractères. Cette police sera réservée à la communication de la ville, et constituera le coeur de son identité graphique.

Extrait du site pampatype, du dessinateur typographique Alejandro Lo Celso

Vous noterez que parmi les symboles associés, on trouve la croix occitane ;-)

Une initiative remarquable, en terme de stratégie de communication comme pour le mode de réalisation du projet. Pour en savoir plus :

des explications sur Merci Georges,
un article de La Dépêche du Midi,
la typographie complète sur le site d'Alejandro Lo Celso.

Et en plus, elle est belle !

La machine à remonter le temps du web

2009-06-09T23:38:00.003+02:00

Pas nouveau et bien connu, mais je me le remets ici pour le retrouver facilement quand j'en aurai besoin, Internet Archive vous propose de revoir les pages de certains sites web telles qu'elles s'affichaient il y a quelques mois ou quelques années.

Le fonctionnement est inégal, et parfois décevant, mais l'outil permet parfois de retrouver, par utilité ou sentimentalisme, de vieilles pages qui peuvent apparaître bien cocasses.

S'il y en a encore qui débutent en html...

2009-04-15T19:19:00.002+02:00

... et même pour les autres qui cherchent un aide mémoire, deux docs faciles à consulter :

- le cours de Luc Brun, de l'Ensicaen
- l'initiation au HTML de Marc Bloch, Université de Strasbourg, qui semble cependant un peu plus ancien.

Un joli générateur de nuages de mots

2008-08-20T00:59:00.007+02:00

L'original sur Wordle

Découvert grâce à The Generator Blog, Wordle permet de générer et personnaliser un nuage de mot basé sur n'importe quel blog, texte, ou encore compte Delicious.
Les mots ne sont pas cliquables, donc ça ne sert à rien, sauf à représenter les occurrences les plus fréquentes dans un corpus donné, et, à mon avis, c'est esthétique...

Modules de sondages : pas si simple !

2008-07-12T15:19:00.000+02:00

Bon, me voilà partie dans l'exploration des modules de sondages.

En principe, il y en a un dans les widgets Blogger de la version xml... mais il ne fonctionne pas. Bon.
Celui de ProSondage fonctionnait sur un site de partage de code, avec l'avantage d'être en français, avec un design simple et discret. Pas de chance, une fois déposé dans un module de gadget Blogger, ça ne fonctionne pas non plus.

SmileyCat a fait un sympathique comparatif de services de sondages pour les blogs. J'ai utilisé celui qu'il recommande, Vizu. Bon, ça fonctionne, mais j'ai des bugs sur les caractères spéciaux en français que je ne peux pas corriger... J'aurais bien essayé BlogFlux... mais leur service de création de compte utilisateur est en panne...

Si vous connaissez des solutions qui marchent, vos commentaires sont les bienvenus :-)

Plein de nouveau à propos de Blogger

2008-07-12T01:07:00.004+02:00

Pendant que je m'endors tranquillement sur mes compétences techniques... sans doute essentiellement parce que j'en sais assez pour utiliser les services qui m'intéressent en matière de blog notamment, heureusement, d'autres prennnent plus qu'efficacement le relais...

En cherchant à comprendre pourquoi le module de sondage de Blogger ne fonctionnait pas (problème connu selon Blogger itself, donc on attend tranquillement que le bug soit circonscrit et corrigé), j'ai découvert plusieurs blogs très intéressants pour ceux qui souhaitent améliorer leurs compétences techniques en matière de blogging.

La centaine de choses que vous n'avez pas trouvée ici, notamment concernant la plate-forme Blogger, vous la trouverez peut-être sur ces autres blogs, toujours à l'affût des nouveautés et ma foi bien documentés. Citons d'abord Le Journal du Blog, où tout bloggeur peut apprendre à mieux blogger. Quelques billets à propos de Blogger :

une présentation de Blogger, en deux billets : introduction et personnalisation, impeccable pour ceux qui débutent sur la plate-forme
pour ceux qui cherchent des thèmes graphiques pour Blogger, deux billets : des thèmes pour Blogger et de nombreux thèmes gratuits pour Blogger
et un billet de présentation des nouveautés Blogger.

Damospace, lui-même utilisateur de Blogger, poste régulièrement des billets sur les fonctionnalités de l'outil. C'est grâce à lui que j'ai découvert, et que j'ai décidé d'utiliser immédiatement Blogger in Draft, la plate-forme "laboratoire" de Blogger, vers laquelle tout utilisateur peut migrer pour tester en avant première les nouvelles fonctionnalités.

Par exemple, sympa, mais vous ne le verrez pas ici car je ne suis pas sous un modèle xml pour ce blog, la possibilité d'afficher le formulaire de commentaire sous le billet, et non plus dans une pop-up séparée. Une astuce expliquée sur Blogger au bout du doigt, dont le titre dit tout...

Tout cela est en français. Pour les anglophones, on peut aussi bien sûr lire l'information à la source sur le blog officiel Blogger in Draft.

Plus personne ne peut dire qu'il ne sait pas tout ce qu'il faut savoir sur Blogger. Ceci dit, s'il vous reste des questions, vous pouvez toujours me les poser en commentaire : si je sais, je vous répondrai avec plaisir (et même si je ne sais pas d'ailleurs :-).

Une blogroll dynamique

2008-06-21T12:55:00.011+02:00

Petit à petit, je transfère mes blogs sur la version xml de Blogger. Parce qu'elle s'enrichit sans cesse, et qu'on trouve de plus en plus de gadgets compatibles, notamment bien sûr au sein des autres services de Google.

Ma dernière découverte en date : les fonctionnalités du lecteur de flux RSS Google Reader. Pour mémoire, Google Reader permet de s'abonner aux flux RSS de ses blogs et sites préférés, et de les ranger par thèmes, au moyens de tags qui jouent le rôle de répertoires ou de catégories. Je l'utilise notamment pour lire les blogs de mes amies tricoteuses dans le monde entier, et quelques blogs de "bouquineurs" assidus.

On peut rendre publique tout ou partie de sa sélection, via les tags justement (voir le menu "Paramètres / tags" de Google Reader. Et là, magique, on peut récupérer automatiquement :

une page publique restituant les flux associés au tag (ma page "tricot et crochet")
bien sûr, un lien à envoyer par mail à ses amis via un message automatique de Reader

mais surtout, deux gadgets très intéressants pour les bloggeurs, qui s'intègrent dans n'importe quelle plate-forme de blog, et en un clic pour ceux qui utilisent Blogger (depuis le temps qu'on attendait des fonctionnalités "sans couture" entre les applis Google et Blogger ) :

Un minilecteur de flux RSS à implémenter dans sa page web ou son blog pour restituer les titres des derniers billets parus sur les blogs auxquels on est abonné, à personnaliser selon différents codes couleur proposés par Google Reader, ou via sa feuille de style en choisissant la couleur "aucune".

Une blogroll automatique, classée par ordre alphabétique, qui permet de restituer dans son blog la liste de tous ceux qu'on lit régulièrement.

La magie du truc, c'est que la liste se met à jour automatiquement en fonction de ce qu'on ajoute ou retire de son Reader au fil du temps : plus besoin de copier/coller plusieurs fois le même code pour le mettre dans son Reader et dans la liste de lecture qu'on veut partager sur son blog, tout se fait en une seule fois, et là encore en un clic si on on utilise la petite appli JavaScript "s'abonner en surfant" proposée dans "Paramètres / Extras" que j'ai pour ma part glissée dans ma barre personnelle Firefox.

Ainsi, je découvre un nouveau blog de tricot qui me plaît, et hop, je l'intègre simultanément dans mon Google Reader et dans la blogroll de mon blog "de fil en aiguille", pour partager ma trouvaille avec mes lecteurs.

Une petite astuce : il arrive que les caractères spéciaux soient mal retranscrits (apostrophe, &, certains accents...) dans les titres des fils RSS, ce qui vous donne des noms de blogs remplis de caractères barbares avec des & et des #, assez peu élégants. Pour y remédier, il suffit d'aller dans Google Reader "gérer mes abonnement" et de corriger les titres concernés via le lien "renommer". Vos corrections s'implémentent simultanément dans votre Google Reader et dans la blogroll.

De toute beauté...

2008-05-08T19:57:00.004+02:00

Découvert grâce à Valclair,le splendide site consacré à Camille Claudel permet de s'informer sur l'artiste et de découvrir ses oeuvres, le tout dans un graphisme épuré que j'aime particulièrement.

Une balade virtuelle à faire, juste pour le plaisir donc... Un seul regret dans l'ergonomie, la gestion des sous menus oblige sans cesse à repasser par une page de liste pour naviguer d'une oeuvre à l'autre.

Et pour les amateurs de Camille Claudel, j'en profite pour signaler l'exposition en cours au Musée Rodin.

Les outils de recherche photographique d'Idée

2007-12-16T00:25:00.000+01:00

Avec du rouge uniquement....

... puis en ajoutant du vert.

Découvert via Libé, le Multicolour Search Lab d'Idée permet de rechercher des photos selon leurs couleurs. La recherche se met à jour automatiquement à chaque ajout ou retrait d'une couleur choisie dans la palette. Beau... et intéressant par exemple lorsqu'on recherche une série de photos pour illustrer une page web dans les couleurs d'un logo ou d'une charte graphique.

Idée propose deux autres outils de recherche photographique.
BYO Search Lab permet de trouver des photos qui ressemblent à une autre, qu'on peut uploader depuis son PC ou pointer d'une url. Le résultat est plus ou moins pertinent selon la photo choisie comme référence, et la recherche se base davantage sur la similitude des couleurs que des formes ou des objets représentés. Mais le résultat peut être assez spectaculaire.

Plus classique en apparence, le Visual Search Lab propose de combiner des tags pour rechercher des photos... mais aussi de rassembler toutes les photos portant les mêmes tags que celle qu'on a sélectionnée dans la mosaïque.

Toutes les photos sont extraites d'Alamy, une base de photos payantes, dont certaines sont libres de droits, une fois qu'on a payé l'image de base. L'outil s'adresse donc plutôt à des designers professionnels. Jérôme, dans son blog NiouMedia, fait à juste titre remarquer que c'est dommage de ne pas utiliser une base de photos entièrement gratuite, à l'instar de Flickr Color Selectr, ou de retrievr, qui sont me semble-t-il moins sophistiqués, même s'ils ne manquent pas d'intérêt. Mais en commentaire du billet, Idéeinc indique travailler sur des outils pour Flickr : on devrait donc bientôt pouvoir bénéficier à la fois de la sophistication des outils d'Idéeinc et des photos gratuites de Flickr, si toutefois l'outil permet de pointer sur celles qui sont sous licence Creative Commons.

A suivre donc.

Le lip dub de Sofrecom

2007-12-11T17:28:00.000+01:00

Lip-dub-sofrecom
envoyé par sofrecom

Pubeurs, marketeurs... et veilleurs, même combat : la mode est au Lip Dub, inaugurée dans le groupe par nos collègues de SoundTribes.

Petit jeu :

trouver le personnage commun entre les deux vidéos
identifier ma pomme
deviner qui est mon chef
voter pour celui qui peut commencer une carrière dans le show-bizz

Ou alors, plus sérieux (quoique) : s'informer sur le phénomène du Lip Dub via le dossier de Newzy.

Times et webdesign

2007-10-03T20:32:00.000+02:00

Après la lecture de l'excellent papier dont j'ai déjà parlé, j'ai eu envie d'utiliser le Times dans un design de site.

Et puis, au cours de ma navigation d'aujourd'hui, je suis retombée sur Espaces Temps.net, dont je trouve le design superbe depuis le début... et qui utilise le Times.

Pas si ringard, finalement. Qu'en pensez-vous ?

Couleur encore...

2007-08-27T02:32:00.000+02:00

Un petit schéma intéressant et pratique de l'harmonie des couleurs sur Test Couleur.
Dans la même rubrique, quelques infos sur la signification des principales couleurs.
Et si le coeur vous en dit, vous pouvez aussi faire le test, amusant et original.

Mais que fait la police ?

2007-08-06T20:19:00.000+02:00

Le choix d'une typographie est un acte important : il en va de l'impression produite par le document, de l'envie qu'aura le lecteur de plonger dans vos contenus, et de la lisibilité effective de vos titres et textes.

J'ai le souvenir d'heures passées dans les catalogues de polices, qu'on appelle aussi fontes, en référence aux caractères de plomb de l'imprimerie traditionnelle, pour choisir les typographies d'une brochure, d'une revue professionnelle, ou de la communication d'une marque. Je reste très sensible aux polices utilisées dans la presse, comme à l'image véhiculée par celles de la publicité.

Le web nous coupe un peu les ailes, même si le choix des polices standards que tout le monde peut lire s'est élargi depuis les débuts du web. Il reste le travail des bandeaux, bannières et logos, travaillés en images, où l'on peut utiliser des typographies plus personnelles. Et le web en revanche nous donne accès à des centaines de polices gratuites. Il en sort de nouvelles tous les mois, l'art typographique continuant de passionner les graphistes.

Ne pas oublier cependant qu'en la matière, l'abondance de biens nuit : pour qu'un document ou une page web soit élégant, lisible, et qu'on en repère bien la structure, on ne doit pas utiliser plus de 2 polices dans un même document. Les règles formelles préconisent les "sans serif", c'est à dire les typos droites, sans "patins" comme l'Arial ou l'Helvetica, pour les titres, car elles sont plus lisibles en grosses lettres, et les "serif", comme le Times ou le Garamond, pour les textes courants. Mais on peut transiger, sans oublier de jouer subtilement sur les tailles, les graisses, les espacements et les couleurs. Sur le web, et pour tous les documents qui se lisent à l'écran, éviter en revanche l'italique, mal restitué et souvent illisible.

Mais foin de bavardage : voici plutôt la liste de quelques sites où l'on trouve des polices gratuites, et la plupart du temps libres de droits, au moins pour vos pages personnelles. La consultation de la rubrique "Free fonts" de Smashing Magazine vous permettra d'en découvrir régulièrement de nouvelles.

Dafont.com propose plus de 7 000 polices en libre téléchargement
urbanfonts en annonce 8 000, et propose également un blog intéressant (pour anglophones), qui m'a notamment permis de découvrir cet excellent post sur la manière de renouveler le look d'une vieille typo en utilisant, via les CSS, les espacements et les bordures, ou encore celui-là, le tout sur le blog 3.7 designs
FontShop propose gratuitement quelques unes de ses polices en téléchargement gratuit, pour les utilisateurs qui s'enregistrent (gratuitement aussi)
exljbris dessine des (belles) fontes et les offre gratuitement sur son blog
Vitaly Friedman a sélectionné pour nous les 25 meilleures polices gratuites

Pour faire sa culture, on peut utilement consulter la sélection des "100 meilleures polices de tous les temps", avec le pdf téléchargeable de FontShop. Bon, ça cause Allemand, mais pour regarder des polices, pas besoin de comprendre ,-)

Photos libres de droit

2007-08-05T16:24:00.002+02:00

The Red Door, by porah, via stock.xchng

Construire une bannière ou illustrer un site web nécessite de belles photos. Lorsqu'on travaille en amateur et souvent gratuitement, on est d'autant plus friand de ressources gratuites. On trouve de plus en plus de belles photos libres de droits sur le web.

Grâce à Smashing Magazine, je viens de découvrir un chouette moteur de recherche spécialisé, PicFindr, qui remonte entre autres les photos de deux sites particulièrement riches et que j'utilise régulièrement, morgueFile et stock.xchng. On peut bien sûr également browser les photos déposées sur Flickr en licence Creative Commons.

Plus généralistes (elles ne permettent pas forcément de filtrer les images libres de droits), les extensions Firefox proposées sur Mycroft Project facilitent cependant la recherche : il suffit de choisir son outil dans la barre d'extension pour rechercher directement des images, voire lancer des recherches spécifiques à l"intérieur de sites spécialisés en photographie.

Couleurs : quelles tendances cette année ?

2007-07-17T20:56:00.000+02:00

Les couleurs de la mode n'influencent pas que les vêtements, et l'on voit bien que les couleurs dominantes au sein des pages web, si elles correspondent évidemment à des "catégories de sites", comme on dirait des "catégories de produits", suivent aussi la mode...

Pour être à la pointe de la tendance, on peut se référer aux gammes présentées sur le site du Comité Français de la Couleur (dommage que les reproductions soient si petites et d'aussi médiocre qualité...), et au commentaire qu'en fait son secrétaire général Dominique Cuvellier sur Ladidom.

Affichage par libellés : ça bugue sur Blogger

2007-07-01T23:53:00.001+02:00

Je viens de m'apercevoir que l'affichage des messages par libellés (ou catégories si vous utilisez les liens figurant dans ma barre de menu) n'affiche que les 20 derniers messages portant le libellé en question. Je viens de vérifier : c'est un problème connu par les équipes de Blogger, spécifique aux templates "classiques". Lorsqu'on passe sous les nouveaux templates, le souci disparait (mais pour ce qui me concerne, la nouvelle formule pose d'autres soucis, et ne me permet pas de gérer ma mise en page comme je le souhaite).

Espérons que les équipes de développement auront à coeur de mettre la fonctionnalité à niveau même pour les utilisateurs ayant conservé les templates classiques !

Design et couleurs

2007-07-01T03:45:00.000+02:00

Comment n'y avais-je pas pensé plus tôt ? Ce n'est pourtant pas faute d'avoir manipulé pendant pas mal d'année les nuanciers Pantone, superbes éventails colorés qui sont une vraie bible en agence de communication... Mais je n'avais jamais eu l'idée d'aller visiter leur site web.
Il faut surtout s'inscrire dans l'espace MonPantone, pour accéder aux palettes de la saison, et à une série de tutoriels gratuits, dont une grande partie en pdf extraits de Before and After Magazine, qu'il faut également consulter.

Comment construire une bannière web, utiliser ses initiales pour se créer un logo, choisir ses typographies, créer un rapport attractif, ou une présentation simple et claire : c'est un échantillon des titres alléchants auxquels on accède gratuitement. Les documents sont de belle qualité, très orientés "couleur" évidemment, et... en anglais.

Intégrer un flux RSS dans une page HTML

2007-07-01T01:01:00.000+02:00

Les exploitations du RSS sont multiples. En tant que webmaster, il peut être intéressant d'intégrer un flux RSS dans une page HTML : on récupère ainsi un contenu qui se met à jour automatiquement à chaque nouvelle publication par la source. En langage de pro, ça s'appelle de la syndication de contenus.

A quoi ça sert ?
Deux exemples d'application...

A incruster dans ma page "Hobbies" les titres des derniers messages publiés sur les blogs que j'ai designé pour mes amies
A récupérer dans la page d'accueil de l'Association Mar-Lodj le dernier billet d'actualité du blog, et les deux dernières photos uploadées dans Flickr

... mais vous allez en trouver bien d'autres ! Attention cependant aux droits d'auteurs sur les contenus que vous utilisez : ne syndiquez que des contenus dont vous êtes l'auteur, ou pour lesquels vous avez une autorisation expresse de l'auteur. Si vous republiez les flux de Libé sur votre site sans leur en parler, pas certain qu'ils soient très contents... et légalement, vous serez en tort.

Comment procéder ?
Pour le codeur du dimanche que je suis, pas question de se lancer dans des choses compliquées. Je vous propose d'utiliser une méthode simple pour intégrer un flux dans une page statique en bon vieux HTML de base. Pour se faire, il va falloir utiliser un outil de conversion du flux RSS en code HTML. Il existe pour cela des outils en Javascript prêts à l'emploi, ou quasiment : un peu de paramétrage est parfois nécessaire, et surtout, il faut choisir le bon convertisseur en fonction du flux que vous souhaitez intégrer. Je vous livre mes expériences personnelles.

Outils gratuits :

BlinkBits ne gère pas les accents (donc inutilisable pour des contenus en français), ni les photos (impossible de récupérer un flux provenant de Flickr par exemple).
RSS-to-Javascript est l'outil que j'utilise dans mes blogs. La signature de la source reste discrète, il récupère les flux Atom et RSS, textes ou images. Il est conseillé de récupérer le texte brut, et de gérer la mise en forme via la feuille de style (CSS) du site de destination. Il suffit de suivre les instructions du site, et de copier / coller le code obtenu dans sa page HTML.

Outil payant :

Jawfish offre différentes possibilités de filtrage et mixage de flus RSS, qu'on peut explorer via une offre d'essai.

Pour tout savoir sur le RSS :

RSS Specifications vous explique tout sur le RSS, et fournit des liens vers une série d'outils, gratuits ou payants, pour gérer des flux RSS. En revanche, si vous avez besoin d'icônes pour identifier vos flux RSS, préférer Feed Icons, qui fournit un kit complet de l'icône désormais quasiment officielle des flux RSS, personnalisable via Photoshop.

A glisser dans son lecteur RSS...

2007-06-08T23:17:00.000+02:00

C'est le commentaire de Sébastien Bouyssou qui m'a suggéré l'idée de ce petit florilège des blogs et sites à consulter régulièrement pour rester au courant de l'innovation en matière de TIC. Forcément incomplet, mais je pourrai l'enrichir au fil du temps... bien que l'idée de faire très synthétique me séduise aussi. Forcément partial, mais je le revendique. Et uniquement en français, parce que finalement, c'est de moins en moins une limite, les "gaulois", comme dirait Monsieur Billaut, sont de plus en plus au fait de ce qui se fait de nouveau et d'intéressant. Et si dans mon métier je suis bien obligée de pratiquer l'anglais, dans mes activités privées, je peux bien faire un peu de militantisme en faveur de la langue de Molière !

Voici donc de saines lectures, qu'on peut pratiquer au quotidien, et sur lesquelles je ne me permettrai aucun commentaire, il faut absolument cliquer sur les liens : cette première liste est quasiment incontournable.

Abonnez-vous au Théâtre National de Chaillot

2007-06-08T21:56:00.000+02:00

J'ai eu l'oeil attiré cette semaine par cette affiche, sur les colonnes Morris parisiennes (en réalité, l'affiche est positionnée verticalement). J'ai bien aimé l'idée graphique de fusionner une feuille et une bouche, encore plus évidente lorsqu'on bascule le visuel, mais sans doute plus intrigante à la verticale.

Du coup, je suis allée jeter un oeil sur le site web. Même si ce n'est plus très à la mode de choisir une couleur spécifique pour chaque rubrique, j'aime bien. C'est un bon point de repère pour l'internaute, et je trouve amusant le clignotement provoqué par le passage de la souris sur les différents items de menu. Facile à réaliser avec une CSS, et plus sympa qu'une animation flash.

En parlant de flash, on peut aussi aller voir la présentation de l'installation d-boîte (lire au préalable la présentation sur le site du théâtre), et l'initiative amusante d'enregistrer les séquences des "spect-acteurs" pour les diffuser sur Internet pendant 24 heures.

Tester son blog sur différents navigateurs

2007-06-04T16:05:00.001+02:00

Tous les navigateurs n'interprêtent pas le code HTML, et surtout les feuilles de style (CSS) de la même manière. Il est donc souhaitable de tester le rendu de ses pages dans différents navigateurs, afin de vérifier que tout s'affiche bien comme vous le souhaitez, quels que soient la machine et le navigateur de vos visiteurs.

Les webmestres professionnels disposent de ce qu'on appelle une plate-forme de tests, c'est à dire une série de machines sous différents systèmes d'exploitation et différents navigateurs. Pour le particulier, il est souvent difficile de faire cohabiter différentes versions de navigateurs sur une même machine. Et depuis IE7, il n'est plus possible d'avoir plusieurs versions du navigateur de Microsoft sur le même ordinateur. Pourtant, c'est celui qui nécessite le plus de tests, car il ne respecte pas strictement les spécifications du W3C, alors que Firefox est en général compatible avec les standards du web.

JP Blog nous sauve la mise en nous présentant Browsershots. De quoi tester sa CSS dans tous les sens, et plus d'excuse pour ne pas travailler comme un vrai pro !
Même principe pour IeCapture, que je connaissais déjà, qui ne traite qu'IE7 et Safari.

Comme les temps de réponse sont assez longs dans ces services de test (gestion d'une file d'attente), vous pouvez lancer votre requête, bookmarquer la page, et revenir chercher votre résultat le lendemain.

Tous les outils pour bien blogger

2007-06-04T15:03:00.001+02:00

Hum, je ne suis pas forcément d'accord avec la liste des services de blog proposés, puisqu'il manque Blogger, que j'utilise, mais ce papier de Moovement.com a le mérite de faire un inventaire assez exhaustif de tout ce qui va autour d'un blog. Il ne suffit plus en effet de choisir une plate-forme et de poster son premier message, il faut faire vivre, et les "add-on" deviennent alors de précieux alliés...

Intégrer un diaporama Flickr dans une page web

2007-06-03T23:44:00.001+02:00

Created with Paul's flickrSLiDR.

Bon, j'imagine que tout le monde avait déjà fait ça, sauf moi !

Juste pour ne pas oublier, tout est expliqué dans le blog de Paul Stamatiou.

Edit du 14 février 2011
En réponse au commentaire de "Anonyme" : désormais, les outils permettant de récupérer un diaporama sont directement intégrés dans Flickr. Il suffit de procéder en 3 temps :
1. Mettre toutes les photos qu'on souhaite voir dans le diaporama dans le même "set" Flickr
2. Se placer dans le set Flickr, cliquer sur le bouton "slideshow" (en haut à gauche de la page), et une fois dans le slideshow, cliquer sur "Share", puis sur le bouton "copy to clipboard" de "Grab the embed html"
3. coller le code ainsi obtenu dans la page html, et sauvegarder.

En principe, ça marche impec ;-)

Je veux un nouveau menu...

2007-05-30T04:04:00.000+02:00

Pour changer de CSS Max Design, une collection de petits menus sympathiques et colorés, en CSS bien sûr, dans la CSS Library de DynamicDrive.

Smashing magazine : des ressources pour le webdesign

2007-05-30T03:14:00.001+02:00

Grâce au PresseCitron, sur lequel au passage on peut aussi trouver pas mal d'informations intéressantes en matière de webdesign, j'ai découvert Smashing magazine. Les catégories parlent toutes seules :

... et je suis plutôt d'accord avec leurs partis-pris graphiques. Dommage que la pub soit si polluante sur leur site...

Tutoriels en vidéo : créer son blog sur Blogger

2007-05-30T01:33:00.000+02:00

C'est une utilisation de plus en plus répandue des services d'hébergement de vidéos comme YouTube ou DailyMotion : proposer des tutoriels dans différents domaines, réalisés par des professionnels ou des amateurs.
Celui-ci est directement réalisé par l'équipe de Blogger, et il explique comment créer son blog en quelques minutes.
Le commentateur parle tellement calmement et distinctement que même avec un niveau d'anglais très moyen, on comprend parfaitement.

J'aime bien cette idée d'utiliser le partage de vidéo pour partager ses connaissances... finalement, je vais peut-être ressortir ma webcam du placard...

Afficher les derniers commentaires dans Blogger

2007-05-28T01:49:00.000+02:00

3couleurs a créé un widget pour afficher les derniers commentaires de vos visiteurs dans la barre latérale de votre blog Blogger. Il suffit d'entrer ses paramètres dans le formulaire, et de cliquer sur le bouton "Ajouter à mon blog".

Attention, ça ne fonctionne que si vous avez effectué la mise à niveau de votre modèle de blog dans la nouvelle version (ce que je n'ai pas fait, pour des raisons de préservation de ma CSS), et il faudra vous identifier pour valider la mise en place du nouveau module.

Fred Cavazza : on devrait le lire tous les jours...

2007-05-28T00:11:00.001+02:00

Le web bouge à toute vitesse... et moi je n'ai plus guère le temps d'écrire ici. Je ne suis pas certaine de voir tout ce qui se passe... même si bien sûr je suis de près une bonne part de l'actu en la matière : ça fait partie de mon job. Mais je ne code plus beaucoup, même si je viens de faire quelques mises à jour ici même, et que je vois bien sûr les plate-formes évoluer, ne serait-ce que celle de Blogger, que j'utilise pour ce blog.

Mais autant aller lire Fred Cavazza, lui se tient au courant de tout, et il restitue, assez lisiblement pour les gens qui s'intéressent un peu à la technique, la plupart des initiatives intéressantes, en français s'il vous plaît. Son CV parle pour lui, il a travaillé avec des gens dont le professionnalisme ne fait aucun doute (SQLI et WCube sont par exemples des références dans leurs domaines). Alors, même si je lui referais bien son design (ce n'est pas une blague, Monsieur Cavazza, si vous arrivez jusqu'ici, et que ce que je fais vous plaît, ce serait un honneur et un plaisir de vous offrir une CSS toute neuve... même si j'imagine bien que vous devez avoir moult amis bien plus professionnels que moi en la matière), ses contenus sont quasi irréprochables. J'y apprends toujours des choses, et je m'en sers même parfois dans mon travail pour éclaircir certains sujets, c'est dire !

Créer un nuage de tags sur Blogger

2007-05-26T00:31:00.000+02:00

Blogger a récemment évolué, et la nouvelle version offre de multiples fonctionnalités pour personnaliser son blog, récupérer des contenus en provenance d'autres sites, et intégrer tout un tas de "widgets" ou "gadgets" pour agrémenter l'utilisation du blog, pour son auteur comme pour ses lecteurs.

Pour certaines fonctionnalités, il était temps : implémenter des catégories par exemple relevait d'un déploiement d'astuces, dont aucune n'était véritablement fiable d'ailleurs. Maintenant, c'est tout simple : il suffit de les saisir en bas de sa fenêtre de création de message. Dans l'interface en français, ça s'appelle des "libellés" (pas encore trouvé le moyen de les faire s'appeler autrement dans l'affichage public). En anglais, ce sont des "tags", qu'on peut traduire par "étiquettes" ou "mots clefs". Et la mode en matière d'affichage des tags, c'est le nuage de tags (tag cloud). Popularisé par Flickr, il permet de visualiser les étiquettes en faisant varier la taille et la graisse du mot en fonction de sa fréquence d'utilisation pour étiqueter les messages, photos, ou divers objets numériques (Wikipedia explique ça très bien).

Dans Blogger, pas de fonctionnalité native pour obtenir ce type de représentation, mais Narrow Street semble avoir trouvé la solution... et surtout il l'explique. Je n'ai pas encore testé, mais je ne vais pas tarder.

Quant à Blogger, il lui manque encore un annuaire des gadgets développés par les internautes, qui permettrait aux moins technophiles d'entre nous de récupérer très simplement le code développé par d'autres pour implémenter de petites fonctionnalités parfois bien pratiques, ou simplement sympathiques. Aurais-je mal cherché ? Si vous connaissez l'adresse, ce je suis preneuse !

Le blog photos de Dino

2007-05-01T21:26:00.000+02:00

Dino a ouvert un blog pour y déposer ses tests photographiques avec son premier appareil numérique, un reflex Pentax dont il est assez content. Et moi, je me suis chargée du design du blog "Shooting with a Pentax K10D".

Un moteur de recherche dans votre blog

2007-04-28T00:55:00.001+02:00

Si, par un tour de passe-passe que je n'expliquerai pas ici (sauf si on me le demande), vous avez fait disparaître la barre Blogger en haut de votre page, peut-être regrettez-vous cependant de ne pas avoir de moteur de recherche interne à votre blog. En réalité, le code est trivial :

<div class='widget-content'>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' type='text'/>
<input id='search-btn' type='submit' value='chercher'/>
</form>
</div>

Il n'y a plus qu'à copier / coller à l'emplacement de votre choix.

On peut aussi personnaliser :

le libellé du bouton de recherche en ligne 4 :
<input id='search-btn' type='submit' value='texte de votre bouton de reherche'/>
la taille du champ de saisie en la précisant en ligne 3 :
<input id='search-box' name='q' size='indiquer une taille en chiffre' type='text'/>
le texte par défaut du champ de recherche, en ligne 3 :
<input id='search-box' name='q' type='text' value='texte à afficher dans le champ de recherche' onfocus='this.value=""'/>
son look via sa feuille de style.

Nouveau design pour "ma ville rose"

2007-04-23T16:20:00.000+02:00

Je n'avais plus beaucoup de temps pour designer des sites ces derniers mois. A la faveur de quelques jours de congé, j'en ai profité pour rénover de fond en comble les pages où je dépose mes photos de Toulouse. J'ai transformé le site en blog, plus adapté et plus facile à mettre à jour, et je me suis bien amusée pour créer l'habillage graphique. Voici donc le tout nouveau blog "ma ville rose". Qu'en pensez-vous ?

Ordonner ses flux RSS dans Blogger

2007-03-15T01:44:00.000+01:00

3couleurs est toujours au courant de ce qu'il faut faire...
Je ne recopie pas, rendez-vous chez lui, et suivez les instructions !

Optimiser son blog

2007-01-20T20:47:00.000+01:00

Est-il possible d'améliorer son blog à la fois pour les internautes et pour les moteurs de recherche ? Olivier Duffez répond "oui", et reprend sur Web Rank Info, 25 conseils traduits de l'anglais.

J'adhère assez, et m'efforce de les appliquer autant que faire se peut... Et vous ?

Utiliser l'API Google Maps : tutoriel en français

2007-01-20T20:31:00.001+01:00

JDN Développeurs a eu la bonne idée de créer un tutoriel pour l'API Google Maps, qui permet à tout webmestre d'insérer dans ses pages les cartes de Google, en y intégrant ses propres "points d'intérêt" : parcours d'un voyage, lieu d'où a été prise une photo, bonne adresse de restau que vous souhaitez partager avec vos lecteurs, lieu d'une manifestation culturelle que vous recommandez, tout ou presque est possible avec l'API Google.
Elle nécessite cependant une petite prise en main... et des connaissances en JavaScript.
Un bon tuto n'est donc pas superflu pour démarrer sans perdre trop de temps !

Standards du web : en savoir plus

2007-01-20T20:06:00.000+01:00

JDN Développeurs propose une intéressante interview de Håkon Wium Lie, directeur technique d'Opera, et premier spécificateur des CSS. J'en retiens 3 points essentiels, inconttournables pour tout webdesigner qui se respecte :

"Le concept de cascade a été introduit pour autoriser plusieurs sources - navigateur, utilisateur et auteur - à influer sur la présentation des documents."

Ce concept réduit l'influence de l'auteur sur le rendu graphique de ses pages, notamment au profit de l'utilisateur, qui peut modifier les paramètres de visualisation. Si les utilisateurs courants le font rarement, cette faculté est précieuse pour les handicapés, et donc indispensable pour l'accessibilité des sites. Cela rend aussi incontournable l'usage d'une bonne structure du code HTML. Un bon truc pour vérifier que vos pages supportent l'application d'une autre feuille de style, et qu'elles sont bien structurées ? Supprimez le lien vers la feuille de style, et regardez vos pages sans feuille de style. Si elles restent compréhensibles et navigables, alors, c'est tout bon. Sinon, il n'y a plus qu'à reprendre le code HTML et la structure du document.

"Flash est un obstacle à l'acceptation des standards du Web"

Code propriétaire et fonctionnalités graphiques appréciées des designers limitent en effet l'utilisation des standards du W3C. Mais l'utilisation de ce logiciel pour créer des pages web limite leur accessibilité et pas seulement aux handicapés. Il reste des utilisateurs qui désactivent les plug-ins ou qui ne savent pas les mettre à jour. Et l'utilisation du Flash reste un obstacle à un bon référencement des pages par les moteurs de recherche.

"A l'heure actuelle, il y a quatre spécifications très importantes : HTML, CSS, JavaScript et DOM."

Les webmasters savent donc quoi mettre dans leurs signets... voire sur leur table de chevet !

Leçons de photographie

2006-12-24T05:37:00.000+01:00

Crédit photo : www.roswitha-schacht.de

Morguefile, dont est extraite cette photo, ne se contente pas d'être une ressource précieuse pour les webdesigners qui cherchent de belles images. On y trouve aussi des leçons de photographie. Pour anglophones, mais très intéressantes. J'espère avoir l'occasion de vous montrer bientôt les résultats obtenus en tentant de les appliquer.

Quand l'art et le webdesign se rejoignent...

2006-12-12T19:25:00.000+01:00

Deux manifestations s'intéressent de près à l'art sur Internet : la journée d'étude organisée par la BnF sur le Net-Art, qui s'interroge notamment sur la conservation des oeuvres, et le festival italien P.E.A.M (Pescara Electronic Artists Meeting) 2006, dédié à l’art contemporain électronique.
On aimerait voir un peu plus d'images sur les sites de organisateurs, mais heureusement, Ecrans nous dit tout, sur le colloque de la BnF, et sur le PEAM.

Pikeo ou Flickr ? Le match est lancé...

2006-12-09T14:24:00.000+01:00

Pikeo est le nouveau service de stockage de photos proposé par Orange, basé en particulier sur le taggage géographique des photos, qui permet non seulement de savoir où une photo a été prise, mais aussi de browser les photos via une carte ou des tags géographiques. Belle interface, et pas mal de fonctionnalités, mais encore en version bêta, avec tout ce que ça comporte de choses perfectibles. Comme c'est gratuit, ça vaut la peine de tester.

Au delà d'un simple match d'audience, le débat entre Pikeo et Flickr, c'est le choix des interfaces, et donc de l'usabilité du système.

Flickr est en AJAX, et utilise l'API Yahoo Maps pour le taggage géographique, qui semble connaître un certain succès (selon InternetActu, plus d'un million de photos ont été géotaggées par les utilisateurs 24h après l'ouverture de Flickr Map). Comme toujours dans Flickr, c'est le point d'entrée dans la fonctionnalité qui n'est pas évident à trouver. Le tutoriel, une petite vidéo commentée, est en revanche très explicite. Et l'utilisation assez simple, basée sur l'organiseur de photos, auquel un onglet "map" a été ajouté. L'intérêt est notamment de pouvoir placer d'un seul clic plusieurs photos sur le même point de la carte, très pratique lorsqu'on a organisé ses photos en "sets". Et comme toujours en AJAX, modifier ce qu'on a fait est toujours très simple.

Pikeo est en Flash. Personnellement, je trouve l'interface plus jolie, et la fonction cartographique plus simple à appréhender. Le point fort : une fois qu'on a positionné une marque sur la carte, elle est automatiquement associée à toutes les photos qui porteront le même tag géographique, et le nom qu'on a créé pour la marque est visible lorsqu'on passe la souris dessus. Par contre, les modifications sont plus délicates, il y a encore quelques bugs sur ce point. Et le gros point faible, c'est la lenteur.

Du côté des cartes, elles sont correctes sur l'Europe, et munie d'une interface de recherche par nom qui facilite le géotaggage (naviguer directement dans la carte n'est jamais simple si on ne connaît pas parfaitement les lieux).

In fine, je dirai qu'en l'état actuel des choses, l'intégration des données géographiques est meilleure dans Pikeo, tandis que la gestion "classique" est sans doute plus riche dans Flickr.
A suivre, puisque les deux évolueront.

Pour ceux qui veulent voir la tête des créateurs de Pikéo, ils sont en vidéo : Céline chez Rodrigo, et Vincent chez M. Billaut.

Bien concevoir son site web

2006-12-09T13:16:00.000+01:00

Blog, site ou application web, même combat : le design et donc l'ergonomie sont essentiels. Le message se répand de plus en plus, et les blogs spécialisés sur cette thématique sont de plus en plus riches. Ergologique.com est particulièrement bien fait. On y tourve notamment des conseils sur le choix des typographies, avec de nombreux renvois vers d'autres expertises sur le sujet. Esthétique, image, mais aussi lisibilité, le choix typographique est d'importance. J'en profite pour rappeler les coordonnées d'une des plus riches "boîte à polices" du web : DaFont.

Designs libres de droits

2006-12-01T16:38:00.000+01:00

Si vous ne vous sentez pas l'âme d'un designer, mais que vous souhaitez une chouette présentation pour un blog ou un site personnel, vous pouvez plonger dans OSWD. Plus de 1600 designs téléchargeables gratuitement (images, feuille de style CSS et gabarit HTML) vous y attendent. Il y en a pour tous les goùts, et selon moi, beaucoup de bon goût.
C'est donc aussi une source d'inspiration pour les designers, en herbe ou professionnels, qui souhaitent se renouveler.

La symbolique des couleurs

2006-08-03T20:03:00.000+02:00

J'ai déjà parlé de la couleur dans le webdesign. Souvent, je dirais presque toujours, les couleurs d'un site sont choisies en fonction des couleurs du logo de la marque qu'il met en scène.

Sur Ladidom, Philippe Fagot, consultant spécialisé dans la couleur et membre du Comité français de la couleur, donne une intéressante interview sur le sens des couleurs, à prendre en compte bien sûr lorsqu'on choisit son logo. A l'heure de la mondialisation, ce n'est pas forcément simple, car le sens peut changer d'un pays à l'autre. Et surtout, je trouve son analyse des couleurs comme "peintures de guerre" alors qu'on assiste à la résurgence des nationalismes, notamment dans le sport, tout à fait intéressante.

Pour d'autres ressources sur les couleurs, on peut aussi aller voir les rubriques "Livres" et "Liens" du Centre Français de la Couleur

Utiliser Flickr comme banque d'images pour votre blog

2006-07-09T18:24:00.000+02:00

Ring of Fire, originally uploaded by code poet.

J'ai déjà parlé de Flickr, et des applications dérivées de ses APIs. Parmi ses nombreuses fonctionnalités, Flickr permet de créer directement un billet dans n'importe quel blog depuis son interface, en y intégrant une photo sélectionnée dans Flickr (parmi celles qui sont en licence Creative Commons, c'est plus correct).

Pour commencer, il faut paramétrer l'accès à son blog, en confiant ses identifiants et mots de passe à Flickr qui les stocke dans votre compte. Le système fonctionne sans souci avec Blogger, et propose entre autres Typepad, Movable Type, Live Journal, et Word Press. Si vous gérez plusieurs blogs depuis la même plate-forme, il faudra choisir celui ou ceux vers lesquels vous voulez poster.

Ensuite, vous pouvez choisir un layout standard proposé par Flickr pour la mise en forme du billet, ou customiser la CSS : quelques allers/retours entre celle du blog et celle de Flickr sont parfois nécessaires pour s'ajuster précisément à vos souhaits, mais ça fonctionne. L'intérêt, c'est qu'il est possible de définir un layout spécifique pour chaque blog.

Ensuite, il suffit de composer son billet directement depuis Flickr, en cliquant sur le bouton "Blog this" au dessus de la photo que vous voulez insérer (fonctionne si le propriétaire des photos a autorisé la fonction). Choisir le cas échéant le blog vers lequel vous voulez publier, rédigez, relisez, et postez directement depuis Flickr, qui vous proposera ensuite un lien direct pour afficher votre blog.

Le tour est joué, sans jamais passer par l'interface de votre blog, ni faire de laborieux copier/coller d'url pour insérer la photo. Je trouve ça assez pratique, ça ouvre pas mal de perspectives, et me confirme dans l'idée qu'il est intéressant d'utiliser Flickr comme une banque d'image pour illustrer des blogs, personnels ou professionnels, toujours en prenant garde à respecter le droit d'auteur, cela va de soi !

Les Passions, orchestre baroque de Montauban

2006-06-29T02:51:00.000+02:00

Encore une co-production, avec Vincent Langlard cette fois, pour le site de l'orchestre "Les Passions".

J'ai préparé le design cet hiver, mais la mise au point et le remplissage d'un site professionnel prennent du temps, et le site est vraiment opérationnel depuis seulement quelques jours. On peut y écouter des extraits musicaux, faire connaissance avec l'orchestre et ses musiciens, et bien sûr voir le programme des concerts, réserver et s'abonner.

Etiqueter la planète...

2006-06-29T01:05:00.001+02:00

tagzaniapaste
Mes étiquettes sur Tagzania

En ce moment, je m'intéresse à la cartographie, et je teste différents outils, utiles ou simplement amusants. Beaucoup sont des "mashups", c'est à dire des applications composites utilisant les APIs offertes par des acteurs comme Google, Yahoo! ou eBay pour construire d'autres cartes ou services. Par exemple, gvisit permet de positionner sur une carte les visiteurs d'un site web. Les résultats concernant mon propre blog me laissent un peu sceptique, mais bon.

Je n'ai pas encore terminé mon premier mashup avec l'API de Google Maps, actuellement la plus utilisée : il faut coder en JavaScript, certes rien de très sorcier... mais je répugnais jusque là à me plonger dans ce langage... et la doc de Google est faite pour des gens qui le maîtrisent. Donc, je patauge pas mal, et ça va prendre un peu de temps. Pour le moment le résultat obtenu fonctionne, mais ne me satisfait pas. Et puis, pas de chance, je fais ma première carte sur Londres... et le géocodage à l'adresse, nouvellement implémenté dans l'API Google, ne fonctionne pas pour le Royaume Uni. Moralité : il faut récupérer la latitude et la longitude de chaque point pour créer sa table de référence, un vrai bonheur. J'aurai sûrement l'occasion de vous en reparler.

Les outils proposés par Tagzania, qui est lui-même un mashup de Google Maps, sont donc les bienvenus pour tous ceux qui ne veulent pas coder et géocoder. L'outil de recherche permet de centrer la carte directement sur le point qui vous intéresse, ou de s'en approcher avant un repérage plus fin via un plan ou une vue satellite. Ensuite, il suffit de cliquer sur le point pour positionner un marqueur, et de compléter la fenêtre latérale avec un titre, un commentaire facultatif, des liens éventuels, et des "tags" ou mots-clefs, obligatoires ceux-là : ils permettent ensuite de classifer et repérer facilement les lieux étiquetés.

La carte ci-dessus représente, à peu de choses près, les lieux de Londres que j'ai photographiés et/ou commentés dans le mini site "Five Days in London", et permet de renvoyer de liens vers les pages correspondantes. Pas totalement satisfaisant non plus, mais c'est rapide et facile à utiliser.

Il me reste a saisir encore bien des subtilités avant de proposer une navigation cartographique intéressante... A suivre donc !

L'harmonie des couleurs

2006-06-04T20:12:00.000+02:00

Construire des harmonies de couleur efficaces, agéables à l'oeil, signifiantes pour l'internaute, conformes à l'esprit de la marque ou du site que l'on crée, est l'un des points clefs du webdesign.

A ce titre, le guide "L'harmonie des couleurs" intéressera tous les webmestres. Il propose plus de 1400 combinaisons, sans oublier de nous donner la signification des couleurs et l'effet qu'elles produisent, seules ou en combinaison, sur celui qui les regarde.

Passionnant... et très utile ! Je ne manquerai pas de mettre en pratique pour mes prochains sites... et au passage, je me fais une meilleure idée de l'effet produit par les pages que l'ai déjà créées... et je ne changerai pas le design de ces pages, par exemple. Parce-que le jaune est la couleur de la joie, de l'optimisme et de la spontanéité, tandis que le gris représente le détachement et la neutralité. Tout indiqué pour un site "pro-am", qui veut à la fois "sans façons", mais également digne de la confiance de ses lecteurs, non ??

Update 2007 :
Bon, j'ai quand même troqué mon jaune pour du rouge, "enthousiasme et passion", ce qui n'est pas mal non plus... et surtout pour le plaisir d'utiliser les photo de Roswitha Schacht, qui m'ont particulièrement séduite dans les tonalités rouges.

Mininova labs renouvelle l'ergonomie

2006-05-19T03:15:00.000+02:00

Bon, le design de Mininova labs ressemble à du web 0.0 si je puis me permettre ce mauvais jeu de mots... Mais on y trouve quelques idées intéressantes pour renouveler l'ergonomie de ses pages web. J'aime bien les no click links, a priori exploitables sur n'importe quelle page avec quelques lignes de Javascript, et qui peuvent en outre avoir un intérêt d'accessibilité. La ToDoList est furieusement web 2.0, mais nécessite l'utilisation d'une base de données pour conserver les items créés. Quant au passclick, ce pourrait bien être une excellente solution pour soulager définitivement sa mémoire de ces séquences de lettres absconses... ou cesser enfin d'utiliser des mots de passe tellement basiques que même votre petit neveu de 10 ans saurait les découvrir en quelques minutes.

Art contemporain au Palazzo Grassi

2006-04-28T13:45:00.000+02:00

Le Palazzo Grassi de Venise vient d'ouvrir au public, où il présente les collections personnelles de François Pinault. Un endroit que je ne manquerai pas de visiter lorsque je passerai par Venise, sans doute un jour prochain...
En attendant, on aurait aimé une petite visite virtuelle sur le site internet du Palazzo. Il y a juste quatre petites photos des oeuvres de l'exposition en cours " Were are we going ?". Par contre, j'aime bien le design très simple du site... et je remarque que je ne suis pas la seule à utiliser des photos grand format en fond d'écran pour installer l'ambiance visuelle... On notera au passage, jolie subtilité, que le logo du site est en défonce, et laisse apparaître la photo au travers de ses lettres

Connaissez-vous le BillautShow ?

2006-04-21T14:32:00.000+02:00

Jean-Michel Billaut, si j'ai bien tout compris, est le fondateur de l'Atelier BNP-Paribas, bien connu de tous ceux qui s"intéressent au web et aux nouvelles technologies, et dont la qualité des analyses n'est plus à mettre en doute.

Monsieur Billaut a également un blog. Sous le titre anodin et répétitif "Connaissez-vous Machin ?", il propose les interviews vidéo d'entrepreneurs innovants. Il y en a beaucoup plus qu'on ne le croit généralement en France, et on se demande pourquoi les médias n'en parlent pas… C'est sans doute pour ça que les audiences du blog de Monsieur Billaut augmentent régulièrement : c'est l'un des endroits les plus efficaces et les moins "prises de tête" pour être au courant de ce qui se passe dans les nouvelles technos comme dans les nouvelles idées. La sobriété de ses interviews y est sans doute pour beaucoup. Monsieur Billaut ne se prend pas pour le journaliste blasé qui sait déjà tout sur le sujet et cherche comment "coincer" son interlocuteur pour faire un peu de spectacle. Il pose des questions simples, qui permettent à ses invités de nous apprendre vraiment quelque chose.

Au passage, Jean-Michel Billaut en profite pour tester vpod.tv, la nouvelle plate-forme vidéo à la portée de tous, qui ouvre en mai prochain. Ça a l'air pas mal, et j'avoue que ça me ferait plaisir qu'une start-up française atteigne et dépasse le succès de YouTube. En tous cas, Rodrigo Sepulveda Schulz l'a promis, il y aura une interface multilingue, dont le français. Pas besoin de se bagarrer avec le vocabulaire, on pourra se concentrer sur l'action : télécharger ses vidéos, et les partager avec qui on veut. A vos caméras… et tâchez de faire aussi intéressant que Monsieur Billaut !

Ecole de Plongée Toulousaine

2006-04-07T00:41:00.000+02:00

Pas beaucoup de temps pour designer des sites en ce moment... Voici tout de même le dernier né, qui est en réalité une co-production avec Dino. La photo ci-dessus est celle que vous ne verrez jamais en entier, bien qu'elle soit présente... derrière toutes les pages. Et pour découvrir les fonds marins, vous pouvez aller vous inscrire à l'Ecole de Plongée Toulousaine. A mon avis, les plus chouettes photos sont dans la page "Programmes". Comme toutes les photos du site, elles proviennent de stock.xchng, une banque d'images pour la plupart libres de droits.

Flickr et compagnie...

2006-03-31T01:04:00.000+02:00

Présenter Flickr est j'imagine totalement superflu : le site a un tel succès que tout le monde asurément le connaît. Mi février, il enregistrait sa 10 000 000 ème photo. Je me demande combien il y en a aujourd'hui, sa progression semblant exponentielle...
Ce qui est peut-être moins connu, en tous cas des internautes français, ce sont toutes les applications dérivées, qui s'appuient sur l'API de Flickr. Il y en a deux que j'affectionne tout particulièrement.
Picklr, pour son esthétique, totalement gratuite, mais tout à fait réussie. Comme le laisse entrevoir la copie d'écran ci-dessus, il suffit de "piquer" une couleur dans la palette centrale pour que s'affiche une sélection de photos extraites de Flickr où cette couleur est dominante. Chaque petite vignette est un lien vers la photo originale, qu'on ouvre dans une pop-up d'un simple clic.
Fastr est un jeu, auquel on peut jouer en français, anglais, allemand ou espagnol. Il s'agit de découvrir le "tag" ou mot-clef commun à toutes les photos extraites de Flickr qui s'affichent sur l'écran, le tout en temps limité, et en concours avec les joueurs connectés simultanément (si vous êtes seul, l'application se fait un plaisir de jouer avec vous). Idiot ? En fait, on se laisse facilement prendre au jeu... et c'est encore plus amusant lorsqu'on joue dans une langue étrangère.

Comme il faut rendre à César ce qui lui appartient, j'ai découvert ces applications sur le blog Webmonkey, dans un article intitulé "Ten best Flickr mashups". Mashups ? ce sont toutes les applications construites en combinant plusieurs API web 2.0. Encore le web 2.0 ? Je sais, je sacrifie moi aussi aux modes du moment... Mais au delà de la mode et du "buzz" parfois un peu excessif, il se passe malgré tout des choses très intéressantes dans ce nouveau périmètre du web. Il est donc probable que je vous en parle encore prochainement...

Catégories : A voir - Innovation

Pandora, toute la musique que j'aime

2006-03-03T00:04:00.000+01:00

Est-ce que je vous assomme avec une définition du web 2.0 ? Non. Après tout, il y en a des dizaines sur Internet, il suffit de taper le mot clef dans Google, ou d'aller sur le site d'O'Reilly pour tout savoir, ou presque, sur ce nouveau concept à la mode, qui fait couler beaucoup d'encre dans les médias spécialisés.

Pandora est une application "web 2.0", et à mon avis une des meilleures. Elle permet à chaque internaute de se construire, gratuitement et sans publicité ni blabla entre les morceaux, une radio basée sur sa musique préférée. Il suffit d'entrer le nom d'un artiste, d'un album ou d'une chanson, et Pandora vous propose un programme constitué de musiques ayant les mêmes caractéristiques que celle que vous avez définie en point d'entrée. Vous y retrouvez bien sûr des morceaux de l'artiste que vous avez choisi, mais aussi des tas d'autres, très connus ou pas du tout, ce qui permet de faire des découvertes inédites : le plus grand charme sans doute de Pandora .
Vous pouvez infléchir le programme en notant au fur et à mesure les morceaux que vous aimez ou que vous n'aimez pas, et conserver vos préférés dans une liste de favoris, ou encore les acheter, sur iTunes ou Amazon.com, grâce aux liens directs fournis pour chaque morceau.

Rien ne vous empêche de définir plusieurs radios, pour changer de style selon l'humeur du moment, et l'éventail plus ou moins large de vos goûts.
Moi, j'ai commencé par entrer Radiohead, qui est sans doute mon groupe préféré, et c'est le programme que je préfère écouter. Je vous invite, il suffit de cliquer sur le lien ! Et si vous aimez, ne manquez pas de m'envoyer les liens vers les stations que vous aurez créées !

Si ce service est excellent, c'est qu'il est basé sur un véritable travail de fond, à la fois pour analyser la musique et construire la base de données de départ, puis pour l'enrichir en permanence de nouveaux artistes.
Son modèle économique est également exemplaire du web 2.0 : vous pouvez utiliser le service gratuitement, en acceptant de voir une partie de votre écran occupée par de la pub (souvent iTunes, et souvent assez belles d'ailleurs), ou souscrire un abonnement payant ($36 par an) si vous êtes allergique à toute publicité. Vos achats sur iTunes ou Amazon.com permettent également de financer le service, qui perçoit alors une commission.
On leur souhaite longue vie, non ??

Update : au hasard d'une autre recherche, je viens de tomber sur le très beau site "EspacesTemps.net", qui consacrait, quelques jours après ce message, une brève à Pandora : Un objet de recherche dans la boîte.

CSS 2, pratique du design web

2006-02-24T17:00:00.000+01:00

Raphaël Goetter, webmestre du site Alsacréations, qui fait partie des sites de référence en français sur les CSS, a sorti son livre : CSS2, Pratique du design web. Et je l'ai acheté, sur la base de plusieurs motivations, telles que : apprendre encore sur les CSS, avoir un bouquin de référence en français, arrêter de répondre à toutes les questions de mon homme qui débute en CSS et qui me perturbe quand je réfléchis à la meilleure manière de coder tel ou tel document, ou encore permettre à l'auteur, dont j'ai abondamment utilisé les conseils et tutoriaux, de toucher quelques droits d'auteur ma foi bien mérités.
Et après lecture ? Je pense que c'est un excellent bouquin pour les débutants en CSS2, et tous les webmestres qui ont trop longtemps travaillé avec des frames, des tableaux, et des logiciels graphiques comme Dreamweaver ou FrontPage, et qui veulent se mettre à faire du code propre, respectueux des standards et accessibles au plus grand nombre d'internautes, y compris ceux qui sont handicapés. Raphaël Goetter pose clairement le sujet. Le rappel des règles de base du HTML est loin d'être inutile, et la progression pédagogique pour s'approprier le fonctionnement des CSS plutôt bonne. L'ensemble du bouquin permet de se jeter à l'eau, et un peu plus.

Pour ma part, j'y ai enfin compris clairement la technique des "portes coulissantes", utile notamment pour faire de chouettes menus avec des images, et comment intégrer des contenus dans des cadres graphiques sympatiques s'adaptant à la longueur du texte.

En revanche, je déplore l'absence d'explication sur les DTD (Document Type Definition), ces quelques lignes de code barbares en tête de toute page HTML, qui sont un vrai casse-tête chinois pour les débutants : à quoi ça sert, lequel choisir, quelles incidences cela a-t-il sur le comportement des navigateurs et les contraintes de codage ??? J'ai mis du temps avant de savoir répondre (en gros) à ces questions, et surtout à décider quel(s) DTD utiliser pour mes besoins propres, en fonction du type de site développés.
J'aurais bien vu aussi un petit chapitre sur les outils du développeur. Pas évident là non plus de choisir avec quoi écrire son code et ses feuilles de style (je donne quelques réponses à cette question cruciale dans les pages de ce blog).

Bref, une bonne base, mais qui mériterait d'être complétée... et qui ne me dispense pas encore tout à fait de répondre aux questions de mon homme... Encore un effort, Raphaël !

Benjamin Laible vous invite dans son petit monde

2006-02-17T21:22:00.000+01:00

J'aime bien le site de Benjamin Laible. Les images floutées sont chaleureuses, la mise en page est sobre et claire, et l'utilisation du flash est discrète : jouez donc avec la tasse de café de la bannière, ou laissez-là se vider puis se remplir toute seule durant votre consultation des pages. Un clin d'oeil au nombre de tasses qui seront nécessaires pour soutenir le graphiste durant la création de votre futur design de site ?

Concevoir des sites qui marchent

2006-02-10T18:07:00.000+01:00

C'est le propos du blog de Ben Hunt, Web Design from scratch. Ancien web designer et développeur, il se consacre désormais au conseil et à l'analyse de sites. Ses activités professionnelles sont présentées sur le site Scratchmedia. Dans son blog, il rappelle la vocation du design web (mettre l'information en valeur et permettre sa bonne consultation par les internautes), et un certain nombre de techniques de base. Il analyse aussi les tendances du design actuel (dans la rubrique "Graphic Design" en particulier) : une démarche intéressante qui démontre notamment qu'on s'achemine vers de plus en plus de simplicité, de pureté, de dépouillement dans le design de pages web. Pas seulement parce que c'est plus beau. Surtout parce que c'est plus efficace !
A suivre.

Visitez Le Louvre

2006-02-03T18:13:00.000+01:00

Nos musées nationaux, les expositions qu'ils organisent, et désormais leurs sites web, sont de plus en plus, et de plus en plus visiblement, "soutenus" - c'est à dire financés - par des entreprises privées, qui en profitent pour se faire leur publicité.

En tant que fan de musées et de belles pages web, je ne peux que me réjouir du nouvel élan que cela a donné à nos musées, dont les locaux, les activités et la présentation se sont dynamisés, pour être désormais à un niveau de qualité comparable à celui des plus grands pays du monde. Cela s'impose pour un pays qui est encore en 2005 la première destination touristique mondiale (voir le papier de France 3, qui reprend les éléments que j'ai lus dans la presse ces derniers jours).

En tant que citoyenne, je m'interroge. Certes, l'art a toujours vécu grâce au mécénat. Mais est-il normal que l'entretien et la présentation de notre patrimoine national soit dépendant d'intérêts privés ? Je n'ai pas de réponse à cette question, et je ne sais pas dans quelle mesure les entreprises influencent ou non les choix qui sont faits, en matière d'expositions notamment. Et peut-être mes inquiétudes sont-elles sans fondement.

En tant que visiteuse, je trouve que la présence des mécènes est de plus en plus visible, et cela me gêne, accentuant cette impression d'un monde entièrement marchandisé et régi par des intérêts purement commerciaux...

En attendant, les pages du Louvre sont assez réussies. Claires et lumineuses, elles donnent envie de venir visiter. L'information est plutôt bien présentée, et facilement accessible, ce qui n'est pas forcément simple lorsqu'elle est foisonnante. L'ambiance, spécifique, est cependant cohérente avec les brochures du musée. Et même si ça n'a rien à voir avec le webdesign (quoique... tout ce qui éduque l'oeil à la beauté y contribue certainement), je pense qu'il ne faudra pas manquer la rétrospective Ingres, du 24 février au 15 mai 2006. En tous cas, je vais me débrouiller pour y aller !

Les éditeurs de tissus présentent de belles pages web

2006-01-27T14:13:00.000+01:00

J'aime en particulier leurs pages d'accueil. Celle de Rubelli met bien en valeur les étoffes et les décors qu'il propose. On pourrait encore améliorer le design de cette page, dont la caractéristique intéressante est la pureté (et je n'aime pas les pages intérieures, qui ne sont pas cohérentes avec cette page d'accueil), mais l'idée de mise en page est intéressante.
Plus coloré et sophistiqué, le site de Boussac-Fadini donne aussi envie de décorer sa maison... ou de recommencer le design de son site...

Expériences sonores interactives avec Sonoises

2006-01-20T01:16:00.000+01:00

Vous l'aurez peut-être remarqué, j'aime les expériences interactives. Sonoises nous propose d'explorer le son, et de mixer l'expérience visuelle et l'expérience sonore. Dans l'image que j'ai captée, il s'agit de régler l'intensité et la balance du son en dessinant un motif (le gribouillis rouge), qui sera reproduit en boucle une fois la souris relâchée.

Il y a quatre ou cinq expériences différentes à découvrir, plus ou moins interactives, dont le mode d'emploi est parfois mystérieux au premier abord... mais c'est aussi le côté sympathique que cette découverte un peu hasardeuse...

Pour ceux d'entre vous qui envisageraient de me confier le design de leur site web, je me dois de préciser qu'il s'agit bien ici de web expérimental, et non d'un modèle à suivre pour présenter ses activités : dans ce cas, il ne s'agit pas de perdre ses visiteurs dans une visite aléatoire, mais au contraire de faciliter la navigation, et de permettre à l'internaute d'appréhender immédiatement le contenu du site.

Web Developper simplifie le débuggage

2006-01-13T21:49:00.000+01:00

Web Developper est une extension Firefox bien pratique pour valider, corriger, débugger ses pages web. On y trouvera notamment une série de liens vers les outils de validation du W3C, et la possibilité de remonter différentes informations sur les objets de la page.
Les fonctionnalités les plus intéressantes, comme le souligne Xavier Borderie dans JDN développeurs, grâce à qui j'ai découvert cet outil, sont celles qui permettent, en temps réel et dans son navigateur préféré, de modifier la feuille de style, sans altérer pour autant sa feuille originale : très pratique pour tester une modification de couleur, ou pour identifier un bug, en supprimant pas à pas les lignes de codes susceptibles de générer l'erreur.
Dans le même esprit, la possibilité d'encadrer différents éléments, tels que les blocs, permet de contrôler par exemple leur bonne imbrication et de vérifier ainsi son flux HTML... ou d'incompréhensibles décalages d'affichage. On gagnera notamment beaucoup de temps dans l'application des excellents principes de débuggage CSS proposés par Alsacréations pour régler tous les problèmes de décalages d'éléments.
Dans un premier temps, la barre apparaît presque trop riche. Mais quelques manipulations rapides, et sans risque puisqu'on n'altère pas son code source, permettent de se faire une bonne idée de ses possibilités. En outre, télécharger l'application dans sa langue préférée facilite sa prise en main : choisissez donc la version "Localized" (il faut descendre un peu dans la page pour trouver le lien), qui identifiera automatiquement la langue dans laquelle vous travaillez.

Vert...

2006-01-06T19:32:00.000+01:00

Et si vous voulez en savoir plus sur cet excellent bouquin, vous pouvez consulter mon blog "Lire"... Bonne année, bonnes lectures, bon webdesign !!

Finissons l'année en musique avec les Arts Florissants

2005-12-30T14:58:00.000+01:00

Sur le site des Arts Florissants, l'ensemble baroque de William Christie, le baroque flamboie. Extraits musicaux jubilatoires à chaque page, magnifique mise en page en Flash (décidément, je suis obligée de reconnaître que cette technologie, quand elle est bien utilisée, produit un effet magique), avec une couleur différente pour chaque rubrique, bref, un agréable moment de rêve musical à s'offrir sans modération en cette période de fête !
Terminez bien l'année, et rendez-vous en 2006, pour de nouvelles balades en image, couleur et musique sur le web.

Rouge...

2005-12-23T22:04:00.000+01:00

Le site officiel du Dalai Lama : un peu de sagesse sur le web

2005-12-16T16:13:00.000+01:00

Un design impeccable et une belle couleur jaune vous accueillent sur le site web du Dalai Lama, sur lequel vous trouverez une biographie, les missions, interventions du Dalai Lama, et même une galerie photograhique.

Pour s'informer ou méditer où qu'on soit sur la planète...

Tout savoir sur la couleur avec pourpre.com

2005-12-09T22:39:00.000+01:00

La couleur est un élément clef du webdesign : pourpre.com vous l'explique : comment nous percevons les couleurs, comment on les indexe pour les repérer, comment on les modélise...
Pour passer à l'application pratique, quelques outils aideront les webmestres à construire des accords de couleur, ou à calibrer leur écran pour optimiser le rendu des couleurs.
Les littéraires ne sont pas oubliés : la rubrique "langue" rassemble des expressions faisant appel à la couleur, et "chroma" est un dictionnaire des noms de couleur assorti d'échantillons, pour savoir définitivement ce qu'est le bleu caeruleum ou le vert Véronèse...
Des jeux, des liens et une bibliographie complètent le tout... et le site est enrichi très régulièrement : si vous êtes fans, vous pourrez même vous abonner à son fil RSS.

Tiens, il manque cependant les références d'un très chouette bouquin que j'ai acheté récemment sur le même sujet : "Couleur, le guide le plus complet", de Tom Fraser et Adam Bank. Une petite merveille colorée, dont le papier satiné a un toucher extraordinairement sensuel... Un truc qui manque sur le web, non ?
Raison de plus pour y manier la couleur avec maestria !

Entr'acte sur cinematicfilm

2005-12-02T21:14:00.000+01:00

cinematic(film) propose plus de 1000 films, soit 60 heures de vidéo en streaming. De l'art expérimental essentiellement. J'adore la page d'accueil toute blanche, les liens incorporés au texte pour naviguer dans le site, et la visualisation au hasard, qui fait bien sûr tout le charme de l'expérience. Cependant, on peut aussi voir les vidéos les plus regardées (mais je déteste ce principe d'auto-renforcement de la popularité qui enferme et appauvrit), ou rechercher par auteur ou nom de film, simplement en utilisant la fonctionnalité "Rechercher dans la page" de son navigateur.

Vous pouvez ainsi aller voir "The catalogue" de Chris Oakley, qui propose une vision cauchemardesque de "l'intelligence ambiante", terminologie utilisée pour nommer le monde peuplé d'objets communicants qui se profile à grands pas. Pour ne pas finir écoeuré à tout jamais, il faut après ça lire le papier d'InternetActu.net "L'avenir appartient à RFID", qui présente d'autres facettes de ce futur pas si futuriste...

Blogs : 10 erreurs à ne pas commettre

2005-11-25T20:47:00.000+01:00

Jakob Nielsen est considéré comme une référence, et son site useit.com regorge de conseils pour une meilleure "usabilité" du web, néologisme inélégant que je traduis par "ergonomie". Il attache une importance particulière, et justifiée, au repérage de l'information. Puisque les blogs sont à la mode, et que nous sommes sur un blog, allons voir quelles sont les 10 erreurs les plus fréquentes en matière de blogs. Voici une traduction libre du texte anglais :

Pas de biographie de l'auteur
Pas de photo de l'auteur
Titre des articles non descriptifs
Liens qui ne disent pas où ils mènent
Anciens articles les plus lus "enterrés"
Le calendrier pour seule navigation
Fréquence de publication irrégulière (vous aurez, au passage, noté qu'ici c'est chaque vendredi... parfois un peu tard, mais mes journées de travail sont souvent longues)
Mélange de genres
Oublier qu'on écrit pour son futur patron
Avoir un nom de domaine appartenant à la plate-forme de blog (c'est je crois la seule des dix que je commette... il faudra que je songe à y remédier !)

Et vous, où en êtes-vous sur votre blog ?

Visitez la Fondation Cartier

2005-11-18T22:03:00.000+01:00

Le site de la Fondation Cartier pour l'Art Contemporain est sans doute le seul que je retiendrai ici au sein du palmarès des Clics d'Or 2005. A cause du bâtiment de Jean Nouvel qui se métamorphose au fil des changements de lumière. A cause du catalogue des expositions (j'aime bien celle de JP Gaultier). A cause du Jardin Theatrum Botanicum. A cause du fond blanc, de la fluidité des diaporamas, de l'utilisation de la technologie Flash au service d'une navigation innovante... mais sous-titrée, pour ne pas perdre l'utilisateur dans les méandres de ses pages. Une visite à faire, avant, après, ou à la place d'une visite sur place lorsqu'on n'habite pas Paris.

Entrez dans les 99 rooms

2005-11-11T00:33:00.000+01:00

99rooms.com propose un parcours interactif et insolite. Pour naviguer entre les 99 pièces de l'étrange labyrinthe, il faut dans chaque image trouver le "sésame" qui vous ouvrira l'écran suivant : un jeu d'intuition et d'observation qui oblige à se concentrer sur l'image. Dépaysement garanti. Ambiance underground. Une expérience à faire. Vous pouvez même apporter votre soutien financier si vous voulez.

Notepad2, le bloc note simple et intelligent

2005-11-04T02:41:00.000+01:00

J'ai découvert Notepad2 grâce à l'excellent site Framasoft, qui promeut avec intelligence et efficacité de bons logiciels libres, notamment en rédigeant ou traduisant des tutoriels qui permettent de les utiliser vraiment.

Personnellement, je suis une adepte du codage HTML au bloc note. Quand on débute, ça étonne et ça effraie. A l'usage, on s'aperçoit que c'est sans doute la meilleure méthode pour avoir un code propre. Grâce à la "coloration syntaxique" de Notepad2, on repère facilement son code, qu'on peut par ailleurs structurer et indenter à sa guise. L'application étant paramétrable, j'ai notamment choisi de surligner en jaune tous mes commentaires de code, ce qui me permet d'identifier très facilement la structure de mes pages : les corrections et mise à jour de pages sont ainsi beaucoup plus rapides et faciles à faire.

L'application Notepad2 est à télécharger directement sur flo's freeware, le site de l'éditeur, mais je vous conseille vivement de lire la note de Framasoft avant de l'installer.

Et si vous voulez vérifier, nettoyer, corriger votre code, HTML Tidy le fera pour vous bien mieux que n'importe quelle relecture ! C'est fou comme des fois un seul caractère de code peut tout changer.

WebAngel a changé son graphisme

2005-10-28T02:37:00.000+02:00

J'aimais bien le précédent, mais je crois que je préfère celui-ci... WebAngel est une webagency, qui propose également des tutoriels sympathiques pour Photoshop. On peut aussi browser le portfolio et les liens... même si le design que je préfère reste celui de leur propre site !

Kenzo défile chez vous

2005-10-21T01:30:00.000+02:00

Les sites web des couturiers et des parfumeurs font partie des plus sophistiqués sur le plan du design. Nous sommes loin des critères d'accessiblité, car ils font appel aux technologies Flash ou Shockwave, nécessitent la plupart du temps un accès haut débit pour s'afficher correctement, et un processeur récent pour gérer simultanément images animées et musique.
Cependant, il faut avouer que certains sont bluffants. Cette saison, parmi ceux que j'ai eu le temps de regarder, les défilés Kenzo sont les plus séduisants.

TopStyle simplifie le codage des CSS

2005-10-14T00:35:00.000+02:00

Grâce à ce logiciel, l'écriture des feuilles de style CSS est facilitée, la syntaxe est vérifiée, et vous pouvez voir dans le volet de bas de page le résultat graphique de chaque style que vous encodez. La version pro propose des options complémentaires et des modèles, mais la version Lite est téléchargeable gratuitement sur le site de Bradbury Software, l'éditeur du logiciel.
Rapidement, on ne peut plus s'en passer ! Et pour tout vous dire, je code mes pages uniquement avec TopStyle et un bloc note amélioré, dont je vous parlerai prochainement. Simple, gratuit, et efficace !!

Gilles Vidal virtualise le réel

2005-10-07T22:55:00.000+02:00

On pourrait dire aussi "Gilles Vidal réalise le virtuel"... mais foin de jeux de mots ! Cet infographiste de la région toulousaine s'est fait une spécialité des panoramas sphériques ou à 360°, qui permettent à l'internaute de se situer "au coeur du panorama". Ludique pour se faire une idée d'un site touristique, mais aussi intéressant pour représenter différents lieux à vocation plus commerciale, et permettre une préfiguration alléchante de la visite. J'ai ainsi eu l'occasion de travailler avec lui pour la réalisation d'une visite virtuelle des Thermes de Cauterets, qui permet au futur curiste de se faire une bonne idée des lieux avant de s'engager sur la réservation de son séjour.
Je vous invite à visiter son portfolio, riche en belles images et en reportages d'actualité, mais aussi le site web du World Heritage Tour, qui a distingué la visite virtuelle de Venise proposée par Gilles Vidal, et qui s'attache à nous mobiliser pour sauvegarder les sites inscrits au patrimoine mondial de l'Unesco, dont nous sommes collectivement responsables.

Tutoriels Photoshop sur Bugalood.be

2005-09-30T21:13:00.000+02:00

Photoshop s'avère vite indispensable pour travailler proprement les images. L'application est néanmoins assez déroutante lorsqu'on débute : pas grand chose à voir avec les outils bureautiques auxquels nous sommes accoutumés.
Bugalood.be propose quelques tutoriels intéressants (et en français) pour démarrer avec Photoshop. J'aime bien aussi celui consacré à la fusion d'images grâce à l'utilisation des calques, dont je me suis servi pour réaliser la bannière de mon site "Escapade sur la Côte d'Azur" : il suffit de suivre les instructions pas à pas.

Mise à jour juin 2007 : il semble que le site Bugalood.be n'existe plus ! Concernant les masques de fusion, une technique vraiment pratique, Le Site du Zéro propose une explication claire. Pour le reste... on peut aller piocher dans les listes de PhotoshopPlus.

Alison Shaw : un monde très coloré

2005-09-23T19:26:00.000+02:00

J'aime le design du site d'Alison Shaw (même si la navigation est un peu lente à cause du rafraichissement intégral de chaque page lorqu'on veut agrandir une miniature), et j'aime aussi ses photos. Travail rigoureux des lignes, des couleurs, de la lumière, pour un rendu très graphique et très personnel.

Mediabox : LA documentation CSS

2005-09-16T20:57:00.000+02:00

Mediabox est selon moi l'outil de référence en français pour le code CSS. Pour chaque élément, on trouve :

une explication
un exemple
un tableau de compatibilité pour les différents navigateurs

Le tout est réalisé sur un site Wiki, et d'excellente qualité : rien d'étonnant à cela, lorsqu'on sait que Raphaël Goetter, l'auteur du site Alsacréations, fait partie des contributeurs.
Une petite précision toutefois : il s'agit bien d'une base de référence, et non d'une méthode d'apprentissage. Pour s'initier, il vaut mieux justement commencer par les tutoriels d'Alsacréations.

m+nature, atelier de style

2005-09-09T23:15:00.000+02:00

Atelier de style et de photos, de magnifiques photos culinaires notamment, m+nature utilise le Flash pour nous présenter ses réalisations. Bon, je ne suis pas certaine que ça respecte tous les standards du web en matière d'accessibilité, mais c'est splendide !

PD Photos : des photos libres de droit

2005-09-02T17:26:00.000+02:00

Pour illustrer un site ou un blog, il est parfois utile de recourir à une banque d'images. PD Photos propose des photos la plupart du temps libre de droit, pour un usage non commercial. On y trouve notamment des paysages américains, et des scènes de la vie quotidienne.

CSS Max Design : menus et autres astuces

2005-08-12T20:23:00.000+02:00

Je dois beaucoup aux tutoriels de Max Design, qui m'ont permis de comprendre comment utiliser les CSS pour réaliser des menus impeccables, et gérer correctement le "float", c'est à dire le positionnement d'éléments les uns par rapport aux autres, sans utiliser de tableaux.
Une démarche "step by step" toujours illustrée d'exemples concrets, que l'on peut copier en l'état ou adapter à sa guise, complétée par une série de trucs et astuces pour une meilleure ergonomie ou pour "fixer" les bugs de certains navigateurs. A bookmarker impérativement lui aussi.

Kusama, ou l'art jubilatoire

2005-08-05T18:50:00.000+02:00

J'aime le Musée des Abattoirs, pour son architecture, et pour la diversité des oeuvres qu'on peut y voir au fil des différentes expositions. J'ai adoré en son temps celle de Yayoi Kusama. Dans la salle illustrée en ouverture du mini site web créé pour l'occasion, je me suis assise par terre, et j'ai observé les enfants qui entraient. Ils riaient, couraient, s'arrêtaient parfois ébahis, s'approchaient des ballons pour les toucher mais hésitaient... Leur comportement illustrait exactement l'euphorie étonnée que je ressentais. L'effet produit ne peut bien sûr être le même sur le web, mais le site est tout de même assez sympa.

La NASA met ses photos à disposition

2005-07-29T20:11:00.000+02:00

Je ne sais pas combien d'images, fixes ou animées compte la médiathèque de la NASA... un nombre impressionnant en tous cas, et il vaut mieux savoir ce que l'on cherche avant de commencer... sauf si on a le temps de s'offrir un splendide voyage spatial sur le web. Toutes les photos sont libres de droits, et quasiment pour tous usages (bien lire les "use guidelines" qui sont très claires). Assez chic non ?

Panoram'art, le portfolio d'Hervé Santucq

2005-07-22T02:23:00.000+02:00

Beaucoup de photographes choisissent le fond noir. Il est exact qu'il magnifie les photos. Celles d'Hervé Santucq le sont de toute façon, et j'aime assez la manière dont il présente ses galeries : c'est à la fois très esthétique, et très "navigable", ce qui n'est pas toujours le cas, car l'exercice est difficile...

CSS Zen Garden : pour être bluffé !

2005-07-15T03:14:00.000+02:00

CSS Zen Garden a pour propos de démontrer "la beauté de la conception CSS". Le principe est simple : le même code de base HTML, et des dizaines de designs différents, tous compatibles avec les standards du web... et qui n'ont en apparence rien de commun.
Un émerveillement sans cesse renouvelé, car l'usage de la CSS se répand, et de plus en plus de webdesigner viennent contribuer à cette belle démonstration. Vous pouvez télécharger leurs feuilles de style pour vous inspirer. Et si vous êtes ou devenez un grand de la CSS, vous pourrez aussi jouer : toutes les règles sont expliquées sur chaque page du site.
On y trouve aussi un lien vers Mezzoblue, qui comporte une liste de liens plus abondantes que je ne saurai jamais en faire sur les meilleures ressources CSS du web.

Don't Click it !

2005-07-08T22:07:00.000+02:00

Une expérience intéressante, pour les anglophones : une interface de site web dans laquelle il ne faut pas cliquer. En fait, le travail expérimental d'un étudiant en communication, découvert grâce à l'excellent site Internet Actu, en français celui là, et vers lequel j'ai déjà du poser des liens : c'est l'un des lieux les plus avancés de réflexion sur l'Internet que je connaisse, et on n'est jamais déçu par la qualité des articles, la profondeur du travail de réflexion, et la mise en perspective...

Mais revenons à "Don't Click It!" : le travail est intéressant, et ouvre des pistes de réflexion en matière d'ergonomie du web, et des interfaces informatiques en général. Mais l'expérience est aussi très fun, et à mon avis il faut visiter tout le site, sans oublier aucune page, et en faisant toutes les expériences proposées, pour bien saisir l'intérêt et les limites du projet.

Amusez-vous bien, laissez vos commentaires sur le site en question (une expérience incontournable), et revenez me dire ce que vous en pensez !

Alsacréations : bien commencer avec les CSS

2005-07-01T02:46:00.000+02:00

Le principe de la CSS (Cascading Style Sheet, ou feuille de style en cascade), c'est tout simplement de séparer la forme et le fond. D'un côté, la page HTML, ou XHTML, qui comporte la structure du document et son contenu, et de l'autre, la feuille de style CSS donc, qui contient toutes les indications de mise en forme : polices, couleurs, disposition des différents éléments dans la page, etc. Le principe est très intéressant à deux titres :
- il allège le code de la page et du site web, car une seule feuille de style peut être utilisée pour l'ensemble des pages,
- il permet de modifier intégralement le design d'un site sans refaire toutes les pages, mais en changeant simplement sa feuille de style.
Le tout permet de construire des pages web légères, qui s'affichent rapidement, et proprement dans la plupart des navigateurs, sous réserve de respecter les standards, qui garantissement également une bonne accessibilité des sites, y compris pour les personnes ayant des difficultés visuelles.

Pour bien commencer avec la CSS, je vous conseille les pages d'Alsacréations. D'abord, elles sont en français, ce qui n'est pas très fréquent pour des tutoriels de qualité en matière de webdesign. Ensuite, elles sont plutôt belles. Mais surtout, Raphaël Goetter est un vrai spécialiste des CSS2, (il a publié un ouvrage chez Eyrolles sur le sujet), et il est assez doué pour la pédagogie. Enfin, ce qui ne gâte rien, il est généreux, et partage avec toute la communauté du web ses connaissances et ses "secrets de fabrication". Un site à conserver dans ses bookmarks !

NetWizz, Jungle Blog

2005-06-24T02:13:00.000+02:00

Les blogs fleurissent partout sur le web... J'aime assez le design de NetWizz, plutôt soigné et assez original. Pour le contenu, comme beaucoup de blogs, NetWizz parle... des blogs, et plus généralement de l'internet.

Google Search: More, more, more

2005-06-17T15:06:00.002+02:00

Savez-vous tout ce que Google peut faire pour vous ? C'est impressionnant... En première instance, on pourrait même se perdre dans toutes ces fonctionnalités, en se demandant quel rapport elles ont les unes avec les autres, et surtout à quoi elles peuvent bien nous être personnellement utiles... C'est la question que je me pose pour tenter de présenter intelligemment mes résultats de tests au cours de ma veille prospective... Mais rien ne vous empêche de faire la même chose, et de trouver mille et une utilisations pratiques aux outils de Google. Allez, je vous donne au moins le lien vers la page qui les présente tous, ou presque (il manque GMail, qui n'est encore qu'en test), sur le site américain parce que c'est l'offre la plus complète actuellement.

Google Search: More, more, more

NandreNet : un site très blanc

2005-06-10T02:59:00.000+02:00

Il y a eu la mode des sites sur fond noir, puis celle des sites très blancs... J'aime assez la sobriété de celui-ci, qui présente les travaux de Nandre, plasticienne.

Ergonomie : quelques références

2005-06-03T23:32:00.000+02:00

Chez les concepteurs, on appelle aussi ça "usabilité", un néologisme franglais s'il en est !
En deux mots comme en cent, l'ergonomie, c'est ce qui rend les pages web faciles à consulter pour l'internaute. On y retrouve donc diverses notions, telles que :
- le design, qui doit être au service du repérage de l'information, et pas seulement un plaisir esthétique (même si les deux peuvent aller de pair)
- le respect de quelques "standards", qui rendent la navigation plus intuitive et plus rapide (souligner les liens, insérer une barre de navigation dans toutes les pages, mettre des liens de retour en haut de page...)
- le choix de solutions techniques qui fonctionnent sur la majorité des navigateurs (utiliser par exemple les spécifications du W3C pour votre code HTML et vos feuilles de style CSS...)

Mais bien des auteurs se sont déjà penchés sur la question, laissons leur donc la parole :
- le site de Jakob Nielsen est considéré comme une référence internationale
- ergolab aborde spécifiquement la question de l'ergonomie du web, avec des articles très bien documentés et des liens pour aller plus loin
- et bien sur le site du W3C, sur lequel trouver toutes les références du code HTML et des CSS "orthodoxes", ainsi que des outils pour tester code HTML et feuilles de style.

Forest Forever

2005-05-27T22:16:00.000+02:00

Il était longtemps que je n'étais pas partie en voyage virtuel à la recherche de nouveaux designs... Comme toujours, en surfant sur le blog de "Die Webdesignerin", on fait mouche en cinq clics maximum...

Mon coup de coeur du jour : le site de Forest Forever. Finalement, mes goûts ne changent pas. De splendides photos sur un fond noir, avec une musique lancinante... Allez donc faire un tour dans la Forest Gallery : dépaysement garanti !

Référencement : quelques points clef

2005-05-20T21:15:00.001+02:00

Le Journal du Net propose, sous le titre "Comment ne pas rater son référencement ?", une bonne synthèse des fondamentaux, étayés par les conseils de spécialistes reconnus dans le domaine, dont on peut utilement consulter les sites pour en savoir plus.

Disons le tout de suite, je ne suis pas une spécialiste du référencement... et celui-ci reste délicat pour les PME, sauf si elles exercent dans un secteur très spécifique et peu concurrentiel, ce qui reste relativement rare. Il est donc d'autant plus important d'appliquer scrupuleusement TOUS les conseils proposés dans cet article si on veut se donner une chance d'être vu dans les moteurs de recherche. Ou, mieux encore, de s'offrir les service d'un professionnel.

A côté du référencement, une idée à retenir : 33 % des visites proviennent de liens établis depuis un autre site web. Et si vous commenciez par dresser une liste des sites qui pourraient, de manière pertinente, devenir vos partenaires et vous envoyer des internautes ?

Didier Schmitt, photographe amateur

2005-05-13T23:04:00.000+02:00

Le site de Didier Schmitt, photographe amateur, vaut bien des sites professionnels : joli design, et belles photos, en particulier des fleurs et des insectes. Bref, une agréable flânerie...

Se prendre pour un milliardaire...

2005-05-06T22:25:00.000+02:00

... et rêver quelques minutes que vous achetez votre maison à Balé Port Douglas : c'est ce que vous pouvez faire en consultant ce magnifique site web, découvert au hasard de ma flânerie hebdomadaire sur le thème du web design.

Dans le même esprit, et d'ailleurs avec un design très proche, vous pouvez partir moins loin : le Golf de Sperone, en Corse, vous propose d'acheter ou de louer un appartement ou une villa sur le domaine.

Quel est le propos de ce blog ?

2005-05-06T20:44:00.000+02:00

Sans prétention d'exhaustivité, ni d'objectivité, ni d'expertise technique, j'ai juste envie de partager mes découvertes sur le web.
Je vous propose une balade sur la toile tour à tour esthétique, innovante ou pratique, pour passer un moment agréable, nourrir votre créativité ou compléter votre "boîte à outils" si vous décidez à votre tour de vous lancer dans la création de pages ou la réalisation d'un blog.
N'hésitez pas à me faire part de vos commentaires, directement sous les articles ou par email, et à me signaler toutes les ressources intéressantes ou les belles pages web que vous connaissez : l'un des intérêts du web, c'est le partage, l'un de ses écueils, c'est sa taille. Donc, plus que partout ailleurs, on n'y est intelligent qu'à plusieurs.