Archive pour le thème 'HTML et CSS'

Pour tous les visiteurs qui veulent rester continuellement informĂ© de l’actualitĂ© sur ntore site, sans mĂŞme faire l’effort de venir nous rendre visite, il y a deux options qui peuvent vous intĂ©resser :

1. Utiliser le fil RSS de ce site web. Vous devez avoir un lecteur de fil RSS (vous en trouverez un dans les versions rĂ©centes de Safari, FireFox, Opera et Internet Explorer ; Plusieurs programmes spĂ©cialisĂ©s et autonomes existent aussi ; BlogLines, Google, AOL et d’autres offrent de tels services -Voir la liste des Ajouter Ă  dans la colonne de gauche). Il a l’avantage d’une interface standardisĂ©e reconnaissable par le logo : Vous pouvez mĂŞme rester en contact avec plusieurs sites simultanĂ©ment.
2. Si vous prĂ©fĂ©rez recevoir un message de courrier Ă©lectronique chaque fois qu’un nouvel article est postĂ© sur le site, vous pouvez aussi vous tourner vers RSSFWD. Il lit le fil RSS et vous envoit un courrier d’information sur mesure. Simplement, rendez-vous sur http://www.rssfwd.com/ et donnez l’addresse suivante (feed URL) : http://www.roumazeilles.net/news/fr/wordpress/feed/, le service fonctionnera dans les secondes qui suivront.

Tant que je suis sur le sujet des fils RSS, je me permet de vous conseiller un lien vers un site très intéressant (Mashable) qui comporte une boite à outils RSS. Il renseigne sur 120+ ressources (lecteurs et utilitaires) utiles pour les amateurs de RSS.

Il est notoirement connu que le cerveau humain a des capacitĂ©s de reconnaissance des formes qui sont bien plus dĂ©veloppĂ©es que ce que sait faire un programme d’ordinateur. Cela explique pourquoi les taux d’Ă©chec des programmes d’OCR (Optical Character Recognition) sont aussi Ă©levĂ©s que 1% (ou parfois 2%) d’erreur, soit un niveau qui impose de fournir une relecture humaine derrière la plupart des scans de documents. Mais quand le document est ancien, de mauvaise qualitĂ© d’impression, dĂ©gradĂ©, les taux d’erreur peuvent ĂŞtre encore plus Ă©levĂ©s et posent des problèmes considĂ©rables quand il s’agit de scanner des milliers de documents comme le font certaines bibliothèques et institutions culturelles.

Par ailleurs, le problème du SPAM sur Internet est considĂ©rable : des programmes essayent Ă  tout prix de se faire passer pour des ĂŞtres humains afin d’insĂ©rer de la publicitĂ© partout oĂą un utilisateur peut Ă©crire (dans les messages d’un forum, dans les commentaires d’un blog, etc.) Depuis quelques temps, il est devenu courant qu’un ĂŞtre humain doivent s’identifier comme humain par sa capacitĂ© Ă  reconnaĂ®tre un mot plus ou moins bien Ă©crit/dessinĂ©. ThĂ©oriquement, c’est un test de Turing efficace qui permet de diffĂ©rencier un humain d’une machine. En pratique, les compĂ©tences d’un programme automatique sont tout de mĂŞme devenues telles que le SPAM rĂ©-apparaĂ®t doucement dans les environnements mĂŞme protĂ©gĂ©s par ce qu’on appelle les CAPTCHA (ces images qu’il s’agit de lire et de recopier pour pouvoir ĂŞtre autorisĂ© Ă  une action).

Le problème est ainsi posé : créer des CAPTCHA vraiment très difficiles à reconnaître par programme et, simultanment, utiliser des êtres humains pour scanner des documents très difficiles à lire par les programmes.

La solution : reCAPTCHA.

Il s’agit de fournir un service de type CAPTCHA Ă  des milliers de blogueurs et de gestionnaires de forum (WordPress, phpBB, etc.) Les utilisateurs sont invitĂ©s Ă  reconnaĂ®tre deux mots particulièrement difficiles Ă  reconnaĂ®tre visuellement (les programmes d’OCR professionnel y ont Ă©chouĂ© lors de scan tentĂ©s par Carnegie Mellon University). L’utilisateur doit les reconnaĂ®tre tous les deux. L’un sert Ă  vĂ©rifier si c’est bien un utilisateur humain, l’autre Ă  donner la traduction OCR qui enrichira la base de CAPTCHA pour le futur et qui amĂ©liorera le scan d’un document en cours de traitement par Carnegie Mellon. C’est le double effet K… : lutte contre les spammeurs et mise Ă  disposition de millions d’ĂŞtre humains pour amĂ©liorer le scan de milliers de documents anciens (sans mĂŞme recourir Ă  l’esclavage de masse).

Example de scan difficile à reconnaître :

Une particularitĂ© des logiciels professionnels d’OCR est qu’ils sont presque toujours capables de signaler quand leur reconnaissance est impossible ou de très mauvaise qualitĂ© (grande incertitude).

C’est une curiositĂ© mais qui rendra peut-ĂŞtre service Ă  certains dĂ©veloppeurs, dans un article intitulĂ© « Really undoing HTML and CSS« , Eric Meyer propose un fichier CSS qui permet de dĂ©construire les valeurs par dĂ©faut imposĂ©es par l’interprĂ©tation par dĂ©faut d’un certain nombre d’Ă©lĂ©ments HTML.

De fait, quelques explications supplĂ©mentaires seront sans doute les bienvenues provenant d’un autre article de Richard Rutter : « Resetting default padding and margin« .

Considérations complémentaires, toujours par Eric Meyer, sur le même sujet :

• Reworked reset
• Reset reasoning

Pour spécialistes HTML et CSS.

Quand, comme moi, on souhaite inclure des morceaux de code dans un article WordPress, cela devient vite une sĂ©rieuse galère. En fait WP n’a pas vraiment prĂ©vu ce cas et il se pose une quantitĂ© de problèmes plus ou moins graves. Ceux que j’ai rencontrĂ©s jusqu’ici :

• Les <?php disparaissent (sauf acrobaties manuelles)
• Un certain nombre de caractères ne s’affichent pas (ou mal)
• La prĂ©sentation est assez pitoyable quand on utilise que <code>

J’ai donc recherchĂ© un plug-in (presque tout dans WordPress se fait par l’ajout de ces merveilleux petits bouts de logiciel qui peuvent se rajouter facilement Ă  la configuration de base) qui soit adaptĂ© Ă  cette tâche, facile Ă  installer (et je ne tiens pas Ă  faire une maintenance intensive pour cette fonctionnalitĂ©), facile Ă  utiliser.

Voici donc un rĂ©sumĂ© de ceux que j’ai regardĂ© et de mon opinion les concernant.
(Lire la suite…)

Vous utilisez Firefox, vous voulez l’exploiter Ă  fond, vous parlez anglais, vous devriez vous rendre sur le FireFox tweak guide.

Des programmes pour tout faire avec votre PC si vous ĂŞtes un peu exigeant mais que vous ne voulez pas payer cher. Freeware & shareware.

En vedette : Canon EOS 5D MkII Nikon D700 Word gratuit Configuration Azureus

Webcron est un service de taches automatisées à heure fixe. Si vous connaissez Unix ou Linux vous avez surement entendu parler de la Crontab. Webcron est une adaptation au Web de cette fameuse Crontab. Attention rien de bien compliqué !

Webcron vous permettra d’effectuer des taches Ă  heure fixe en allant chercher une page sur votre site. Par exemple, sauvegarder votre base de donnĂ©es, pour cela il vous suffit de faire un script sauvegarde_base.php et dans ce script vous allez enregistrer votre base dans un fichier ensuite ajoutez une tache dans votre Webcron pour effectuer la requĂŞte http://www.domaine.com/sauvegarde_base.php

Très simple et recommandé.

Après un précédent article à propos des raisons de ne pas utiliser les tables HTML (et de leur préférer les tables CSS), je souhaite revenir un peu sur ce sujet à partir de ma propre expérience.

Lors du passage Ă  la version 5 de l’interface de ce site (la version « verte » qui est prĂ©sente Ă  la publication du prĂ©sent article), j’ai essayĂ© de construire l’interface en maximisant l’utilisation des CSS afin de faciliter les migrations ultĂ©rieures et d’allĂ©ger la construction en sĂ©parant contenu et mise en page. NĂ©anmoins, il m’est rapidement apparu que la mise en page en trois colonnes (plus un pied de page) que j’utilise est l’une des plus difficiles Ă  reproduire avec les CSS et que cela pose de gros problèmes de compatibilitĂ© avec les diffĂ©rents navigateurs que l’on rencontre.

C’est pourquoi j’ai dĂ©cidĂ© de choisir le meilleur des deux mondes. Expliquons-nous. Les tables HTML sont très simples Ă  construire et sont très gĂ©nĂ©ralement bien reconnues par tous les navigateurs actuels (leur dĂ©finition est maintenant antique). J’ai donc dĂ©cidĂ© de structurer le site autour de tables HTML. Mais je me suis contentĂ© de donner la structure. Toute leur mise en forme a Ă©tĂ© faite avec des tags CSS.

C’est une solution très riche. On utilise chacun Ă  ce qu’il sait faire le mieux : les tables HTML permettent de dĂ©finir un nombre de colonnes, de grouper certaines parties de manière très claire, etc. Les tags CSS permettent de dĂ©finir sĂ©parĂ©ment et proprement les tailles, les marges, les bordures, les fonds de case, les couleurs, etc. On obtient une prĂ©sentation qui est très tolĂ©rante (les tables HTML se comportent gĂ©nĂ©ralement très bien quand une image trop grande -une erreur courante- force les dimensions). Mais les mises en forme sont très souples dans le CSS.

Si vous êtes intéressé, je vous recommande ainsi de consulter les sources de cette page et le fichier CSS associé.

Vous avez peut-être remarqué un nouveau petit logo qui apparaît maintenant sur notre site web depuis que son interface graphique a évolué sensiblement.

Si votre navigateur web le supporte (Opera 9, FireFox, Internet Explorer 7), une icĂ´ne très similaire mais de couleur orange apparaĂ®t aussi dans la barre d’adresse.

C’est une fonctionnalitĂ© nouvelle qui est un bonus intĂ©ressant Ă  la fois pour les visiteurs et pour les concepteurs de sites web. Pour les utilisateurs, il fournit un moyen simple d’accĂ©der très directement Ă  l’information de notre site web en autorisant FireFox ou Opera Ă  collecter les actualitĂ©s sans intermĂ©diaire, sans mĂŞme que vous n’ayez Ă  vous connecter Ă  Roumazeilles.net. Si vous cliquez sur l’icĂ´ne de RSS feed , votre navigateur va vous porposer de vous abonner au feed ou au fil. Ensuite, vous serez directement informĂ© des nouveautĂ©s sur Roumazeilles.net sans mĂŞme avoir besoin de vous rendre sur le site web. Vous ne manquerez plus jamais un titre ronflant. !

L’icĂ´ne RSS feed est un moyen standardisĂ© (proposĂ© par FireFox) pour facilement vous orienter vers cet accès rapide Ă  l’information d’un site web. En soi, c’est dĂ©jĂ  une bonne nouvelle pour les concepteurs de sites web puisque cela Ă©vite d’avoir Ă  rĂ©-inventer la poudre (une nouvelle icĂ´ne, etc.) et d’avoir Ă  donner des explications dĂ©taillĂ©es (comme je le fais ici sur la signification de cette icĂ´ne. C’ets la mĂŞme explication et le mĂŞme fonctionnement sur tous les sites qui utilisent cette technique.

Initiallement, les RSS feeds ont Ă©tĂ© crĂ©Ă©s pour sous-traiter (syndicate en anglais) du contenu (pour permettre Ă  d’autres sites d’inclure de manière transparente le contenu de Roumazeilles.net dans leurs propres pages). C’est toujours possible (c’est d’ailleurs ce que font des sites web de gestion d’actualitĂ©s comme MyYahoo!, MyAOL, Google, ou Bloglines), mais c’est allĂ© bien plus loin avec l’arrivĂ©e d’outils spĂ©cifiques intĂ©grĂ©s dans votre propre navigateur.

Comme vous n’aurez pas manquĂ© de le remarquer, notre site web vient de changer d’allure. Le chirurgien s’est lancĂ©, a pris son scalpel pour allĂ©ger la taille des pages (chargement plus rapide), pour augmenter la lisibilitĂ© (le fond blanc), pour revenir Ă  une ligne plus sobre (quelques marques graphiques seulement).

Mais il y a aussi des fonctionnalitĂ©s nouvelles que vous dĂ©couvrirez sans doute progressivement. La plus notable sans doute : la possibilitĂ© d’envoyer un email Ă  un ami pour signaler un article particulièrement intĂ©ressant. N’oubliez pas de recopier le code de vĂ©rification (il est lĂ  pour empĂŞcher les robots d’envoyer des courrier Ă©lectroniques automatiques). Quoi qu’il en soit, utilisez raisonablement cette petite fonctionalitĂ© gratuite.

Il suffit de repĂ©rer le lien « Email cet article » en bas des articles sur la page d’accueil (ou en bas Ă  droite sur la page spĂ©cifique d’un article).

N|vu est une puissante application de dĂ©veloppement web avec une interface WYSIWYG pour le rendre plus facile Ă  utiliser. C’est sensĂ© ĂŞtre un opposant sĂ©rieux pour des outils commerciaux comme DreamWeaver (le fait que N|vu est en tĂ©lĂ©chargement gratuit ajoute encore de l’intĂ©rĂŞt Ă  la chose).

Malheureusement, comme il provient du monde du logiciel libre, N|vu est Ă©tudiĂ© assez souvent dans des articles sur Internet, mais rarement Ă©crits par des concepteurs professionels de site web. C’est pourquoi j’ai vivement apprĂ©ciĂ© de trouver une Ă©tude spĂ©cifiquement organisĂ©e en comparaison de N|vu et DreamWeaver et qui comporte des points tirĂ©s directement de la vie quotidienne d’un programmeur/designer de site web. Elle ne consiste pas seulement en un survol (qu’y a-t-il dans les menus ?), mais elle plonge dans les meilleurs dĂ©tails (la gĂ©nĂ©ration de code CSS, l’homogĂ©nĂ©ĂŻtĂ© de l’interface, etc.)

Si vous envisagez d’utiliser N|vu pour votre activitĂ© professionnelle (ou simplement sĂ©rieuse) d’Ă©dition HTML/CSS et de crĂ©ation de site web, je vous conseille de prendre 10 minutes pour lire cet article en anglais. MĂŞme s’il date de 2004, il contient des informations passionnantes et encore Ă  jour.

Ca y est ! Microsoft annonce officiellement la mort de FrontPage (Microsoft® Office SharePoint® Designer 2007 et Microsoft® Expression™ Web Designer seront lĂ  au printemps pour en prendre la place).

En fait, il faut reconnaĂ®tre que FrontPage n’avait pas vraiment rĂ©ussi Ă  s’implanter chez les professionnels. Son approche simpliste du dĂ©veloppement web en faisait un outil très en retrait par rapport aux grand concurrents comme DreamWeaver. Mais les non-professionnels n’ont -pour l’essentiel- plus besoin de FrontPage. Avec l’arrivĂ©e des blogs prĂŞts Ă  l’installation (comme WordPress, ou Joomla ou Mamba ou SPIP), le recours Ă  la conception du site Ă©tait devenu marginal, mais avec les solutions d’hĂ©bergement+blog (comme WordPress.com), il n’y vraiment rien Ă  faire pour construire son site web et commencer Ă  publier.

FrontPage a donc vu disparaĂ®tre son public et sa raison d’ĂŞtre. On ne le regrettera pas.

C’est la question Ă  laquelle rĂ©pond le site BrowserShots.org en fournissant un moyen simple de tester votre site web dans un grand nombre de configuration et de navigateurs (browsers en anglais). C’est une très bonne idĂ©e qui repose sur l’aide apportĂ©e par des ordinateurs volontaires rĂ©partis un peu partout dans le monde (architecture largement distribuĂ©e).

Vous pourrez ainsi savoir Ă  quoi ressemble Roumazeilles.net sur nombre de navigateurs exotiques (ou pas) :

Recommandé pour quiconque fait des sites web.

MĂŞme si je suis de manière gĂ©nĂ©rale très favorable Ă  l’emploi des tables HTML pour construire la mise en page d’un site web (comme celui que vous regardez en ce moment), il m’a paru intĂ©ressant de donner un lien vers un article qui articule clairement (en anglais) les arguments exactement Ă  l’opposĂ© : Why tables for layout is stupid.

Pour ceux qui se demanderaient encore pourquoi je prĂ©fère les tables HTML, disons simplement qu’elles sont infiniment plus simples Ă  employer pour une prĂ©sentation en trois colonnes que j’apprĂ©cie. Par ailleurs, utilisant DreamWeaver, le fait de disposer la plups grande partie de la prĂ©sentation directement dans la page web n’est que peu gĂŞnant (grace aux excellents modèles/templates de DreamWeaver).

Mark James, un dĂ©veloppeur web Ă  temps partiel, a crĂ©Ă© plus de mille jolies petites icĂ´nes distribuĂ©es gratuitement sur le site famfamfam.com. Ce travail est soumis Ă  une licence Creative Commons Attribution 2.5, ce qui veut dire que si vous voulez les utiliser, vous n’avez qu’Ă  penser Ă  spĂ©cifier clairement que Mark James en est l’auteur et Ă  inclure un lien de retour vers son site web.

J’aime bien la collection d’icĂ´nes intitulĂ©e silk, mais il y a aussi une très utile collection de 239 petits drapeaux nationaux.

 

J’avais prĂ©cĂ©demment prĂ©sentĂ© mon opinion de plusieurs outils de collecte de statistiques pour site web (Alexa.com, Performancing metrics, Webalyzer). A cette Ă©poque, j’avais commencĂ© par signaler l’existence de Google Analytics, l’offre – toujours en Ă©valuation beta – du gĂ©ant amĂ©ricain des moteurs de recherche. Mais je n’avais pas pu l’Ă©tudier sĂ©rieusement faute de disposer d’une invitation par Google Ă  Ă©valuer le produit Google Analytics. Cette situation a Ă©tĂ© corrigĂ©e il y a un mois environ et j’ai ainsi pu me faire une meilleure idĂ©e de ce produit.

(Lire la suite…)