Renseigner le texte alternatif des images

1# A quoi ça sert ?

Le rôle du texte alternatif va donc être de permettre aux personnes ou aux navigateurs ne pouvant pas "voir" les images de savoir ce qu'elles contiennent pour conserver la cohérence du contenu. En tant que développeurs, nous devons indiquer aux utilisateurs le contenu et la fonction des images utilisées dans le contenu en ligne.

Les standards W3C vous obligent à insérer au moins un attribut alt vide : alt="" pour permettre à certains logiciels spécialisés d'avoir accès à d'autres informations comme la taille de l'image ou le nom du fichier, qui peuvent parfois être significatifs.

Si vous ne savez pas comment remplir votre attribut alt, penser donc au moins à mettre des noms d'image descriptifs (ecran_samsungBF640.jpg ou dissection-grenouille.png). Ce qui nous amène au point suivant :

2# Comment remplir l'attribut alt ?

• Décrivez avec précision le contenu et la fonction de l'image.
  
• Soyez bref : Utilisez aussi peu de mots que possible. Pas plus d'une ou deux petites phrases si c'est vraiment nécessaire. Si vous avez plus de choses à dire, ajoutez-le dans le texte de la page, cela interressera surement tous vous lecteurs.
• Ne vous répétez pas : Si vous avez déjà donné une description suffisante dans le texte autour de l'image, ne vous répétez pas et insérez un attribut alt vide.
  
• Ne donnez pas d'information évidente. Inutile de dire que c'est une image... d'indiquer les couleurs, 
• Si votre image contient un lien, il faudra indiquer plutot une description de ce vers quoi le lien pointe associé à l'image.

3# Les cas particuliers

Les images décoratives

Les images réactives

Les images réactives doivent avoir un attribut alt. Celui-ci doit présenter le contenu de l'image, mais pas celui des zones cliquables. Par exemple, pour une carte de l'État de New York dont chaque région serait cliquable, l'image principale aurait pour texte alternatif « État de New York ». En revanche, si l'image en soi ne sert qu'à contenir les zones cliquables (par exemple pour une barre de navigation), le texte alternatif vide alt="" est le plus adapté.

Pour chaque zone de l'image réactive (balise area), l'attribut alt est obligatoire. Chacune de ces zones cliquables doit posséder un texte alternatif décrivant sa fonction.

Les images réactives côté serveur ne peuvent pas avoir de texte alternatif, et ne peuvent pas non plus être utilisées avec un clavier. Leur usage est à proscrire.

Les images d'arrière-plan

Les images d'arrière-plan ne peuvent avoir de texte alternatif. Si le contenu d'une image est important, l'image ne doit pas être appliquée en arrière-plan d'une page ou d'un élément.

En revanche, les images d'arrière-plan conviennent particulièrement pour les images à vocation décoratives, car elles n'apparaissent pas dans le flux du document et n'ont donc pas besoin d'un attribut alt vide.

Les logos

Les images complexes

Ce texte alternatif est un peu long peut-être, mais il présente à la fois le contenu général de l'image et informe l'utilisateur qu'une description est disponible.

Conclusion

Le texte alternatif est l'un des problèmes d'accessibilité les plus courants, mais il est très souvent implémenté de manière inappropriée ou non standard. Les règles suivantes permettront aux développeurs de rendre leur contenu plus accessible aux handicapés.

• Le texte alternatif est à la fois l'un des principes d'accessibilité les plus simples à retenir, mais parmi les plus difficiles à maîtriser.
• Le contenu alternatif peut se présenter soit dans l'attribut alt soit dans le contexte de l'image.
• Toute image doit avoir un attribut alt.
• Le texte alternatif doit :
  • Présenter et le contenu et la fonction de l'image.
  • Être court.
• Le texte alternatif ne doit pas :
  • Répéter un contenu disponible immédiatement avant ou après.
  • Contenir les mots « image de... » ou « graphisme de... ».
• Le texte alternatif approprié se choisit en fonction du contexte.
• Le texte alternatif d'une image fonctionnelle (contenue dans un lien, par exemple) doit décrire sa fonction en plus de son contenu.
• Les images décoratives doivent avoir un attribut alt, mais il doit être vide (alt="").

Le web serait déjà bien plus accessible si le texte alternatif était mis en place correctement et de manière adéquate.

Tout nouveau tout beau, à l'occasion de son  20ème anniversaire, Esprit Créatif a procédé au lifting du site de l'Association Why Note :

whynote-bluenotes.net

Cet ensemble vocal a bénéficié des services d'Esprit Créatif en mécénat dans le cadre de son engagement associatif.

Le design utilisé a été dérivé de l'affiche des concerts de l' ensemble vocal et d'un template xHTML / Css en Creative Commons.

Animoto est un site web qui offre des services web 2.0 comme on les aime.

En effet, avec Animoto, vous pouvez réaliser une vidéo fabriquées avec vos photos uploadée depuis Flickr, Facebook, Picassa, Smugmug, Photobucket, ou de votre bureau. Vous y ajoutez une musique et vous obtenez une petite vidéo très sympa !

Aucune compétences requises puisque tout se passe via leur interface. Le plus long, c'est d'attendre le résultat qui vous parvient quelques heures après avoir complété les 3 étapes de création en ligne.

Vous pouvez tester ces vidéos sur : animoto.com

Vous avez certainement déjà rencontré en surfant ces petites boites très esthétiques qui s'apparente à des pop-up mais qui s'ouvre dans la fenêtre de votre navigateur sans ouvrir une nouvelle page, et qui laisssent le contenu s'afficher derrière en transparence...

Si vous ne voyez pas du tout de quoi je parle, rendez-vous d'urgence sur la page officielle de la thick-box

Derrière cette idée de génie se trouve Cody Lindley, un ingénieur américain et web developper professionnel de 32 ans, diplômé de l'Université d'Idaho, à Moscou dans l'Idaho . Un jeune homme altruiste qui  a mis son code à disposition de tous sans contribution ni droits de distribution
.
Vous avez certainement croisé ses petites boites sur de nombreux sites comme :
- emob.fr (le login)
- les3suisses (le zoom image produit)

Et quelques intégrations de la thickbox réalisées par Esprit Créatif :
- bbdine.fr - utilisation pour le zoom photo
- esprit-creatif.fr - gallerie de logos
- ADIAM 23 - Détails de l'Agenda (intégration de texte)
- collectifduphasme.com - intégration de son

Notre article sur les BUGS d'IE 6 remporte un franc succès !

Nous recevons régulièrement vos mails de soutien et vos demandes d'aide... Ici je suis toujours prête à donner un coup de main aux codeurs et web master en détresse. Alors n'hésitez pas à nous retourner l'ascenseur en cliquant sur nos pubs ou en nous laissant vos Coms !

Pour tous ceux qui nous demande de l'aide nous recherchons la cause du bug sur la page proposée, puis nous ajoutons le nouveau bug à la liste que nous tenons.

Cette page étant une ressource très appréciée, n'hésitez pas à nous aider à l'étoffer en nous indiquant les bugs que vous auriez rencontré et qui n'y apparaitrait pas !

Vous connaissez certainement le site joliespages.com
C'est l'un des rares sites francophones à proposer un référencement des pages web françaises selon leur couleur.

Aujourd'hui, nous avons le plaisir de vous annoncer que :
le site d'Esprit Créatif , est en tête de la catégorie ROSE.

Un grand merci donc à Jolies Pages de nous avoir choisit. En espérant que très bientôt d'autres créations d'Esprit Créatif retiendront leur attention.

Avec par exemple pour la catégorie orange :
L'Association AMSED
le site de volontariat de jeunes international

pour la catégorie jaune :
Le collectif du Phasme
site d'un collectif d'artistes et de pièces de théâtres pour enfants

pour la catégorie couleurs multiples :
BB DINE
anniversaires et fêtes pour enfants à Strasbourg

----------------------------------------------------------------------------------------------------

Quelques unes de nos réalisations :
Why Note	Restos du Coeur
Adiam 23(*)	BB Dine
Mark's Wedding	Le Phasme

Chez Esprit-Créatif, on adore le chocolat, les oeufs de Pâques, les Lapins et les cloches, alors on ne pouvait pas s'empêcher de vous souhaiter à tous un: JOYEUX WEEK-END de PAQUES.

Nous offrons à notre blog une nouvelle adresse web que vous pouvez tous ajouter à vos favoris dès aujourd'hui : 

http://blog.esprit-creatif.fr - Les conseils d'un webmaster

Un cadeau qui ne fait pas grossir, mais qui je l'espère vous fera plaisir !

Aujourd'hui je tenais à vous présenter la Way Back Machine

Grace à ce site, vous pouvez consulter les versions antérieures de votre site internet tel qu'il est disponible dans les archives du net depuis 1996.

Néanmoins, il faut que votre trafic soit suffisant pour que le site apparaisse. Esprit Créatif par exemple ne commence à apparaitre qu'en novembre 2006, moment où le site est passé à un Google Rank de 4, alors que le .fr a été créé en janvier 2006.

A cette page, vous pouvez consulter des versions antérieures d'Esprit Créatif :

Avant / Après

Evidemment, quand on consulte les archives de 1996 (le siècle dernier !), ça fait un peu mal aux yeux. Et on se rend vite compte que dans ce domaine, nous avons fait pas mal de progrès, merci les css !

------------------------------------------------------------------------------------------

Laissez-moi un commentaire si cet article vous a interressé !

®  Esprit Créatif 2008 - Tous droits de reproduction réservés

Nous tenions à vous annoncer la mise en ligne du nouveau site de l'AMSED.

Cette association propose aux jeunes de 18 à 30 ans de voyager à l'étranger, essentiellement en Afrique (Maroc, Algérie, Guinée, Sénégal...), à travers des chantiers et des échanges de jeunes.

Ils recherchent des jeunes bénévoles désireux de s'engager à leur côté et organisent une 30 aine de séjours par an (par groupe de 15 volontaires). Les frais de voyage et d'hébergement étant la plupart du temps pris en charge par des financeurs externes, cette formule peut-être très interressante pour les jeunes qui n'ont pas toujours le budget pour partir à l'étranger.

Ils ont choisis notre entreprise pour un redesign et une refonte complète du site, puisqu'ils sont désormais ouverts à vos demandes au niveau national.

L'AMSED est désormais disponible en xhtml1.0 strict et en css2.0, avec un  WAI en AAA.

Découvrez-les à leur ancienne adresse : http://www.amsed.fr

J'ai envoyé ce matin un fax de 7 pages au Responsable, envoyé en copie du recommandé de mise en demeure de rétablissement du service. Et miracle, aujourd'hui à 11h19, le service a été rétabli !

Est-ce la copie envoyée à l'UFC Que Choisir ? Est-ce la mise en demeure en elle-même qui stipulait que 1and1 est tenu contractuellement de me fournir un service et que la cessation sans préavis de fourniture d'un service est un manquement grave à leur devoir contractuel? Ou est-ce de guerre lasse après mon 12ème coup de fil à leur plateforme ?

Je ne sais trop que penser, si ce n'est que je vais me dépêcher de copier ma base de données et de tout exporter ailleurs, ailleurs que chez eux c'est sûr.

Au final, je n'ai pas souscrit de serveur dédié, ils ont perdu un client, je prends mes 18 noms de domaines et mes sites et mes clients et je résilierai tout rapidement.

Je retiendrai néanmoins ce conseil vu chez de nombreux prestataires :
ne jamais mettre les noms de domaines sur le même compte que l'hébergement. Et préférer plusieurs petits contrats  qu'un seul.

Je vais donc tester OVH et AMEN, ainsi que neodomaine et gandi.

Et je vous tiendrai au courant ici des difficultés rencontrées, même si je jure cette fois-ci qu'on ne m'y reprendra plus.

-------------------------------------------------------------------------------------------------------

Si vous êtes dans la même situation que celle où je me trouvais, envoyez-moi un message par e-mail, je vous donnerai plus de détail sur le contenu dudit recommandé et comment faire pression juridiquement, puisque vous êtes dans votre bon droit !!!

Je me lève après une courte nuit, je n'ai casiment pas fermé l'oeil de la nuit tellement j'appréhende de passer encore une journée sans pouvoir travailler et à répondre à mes clients qui ne comprennent pas pourquoi leurs sites ne fonctionnent plus.

J'ai reçu un mail du support@1and1... qui m'invite à patienter. Je croyais que l'attente allait enfin se terminer, mais non.

Je patiente donc toute la matinée, et puis vers 13h, je reçois un message vocal sur mon portable « Bonjour Mme MARTIN, Société 1&1, veuillez nous recontacter s'il vous plait. » Je suis perplexe, pas de noms, pas de numéro direct, rien qui me permette de rappeller, donc je recontacte le support téléphonique.

J'ai en ligne quelqu'un qui semble très étonné que j'ai été contactée par téléphone puisqu'  « en général on appelle pas » ... La méthode lui semble douteuse et à l'horizon, rien de neuf. Donc je continue de patienter.

Et puis à 15h, après un autre coup de fil d'un client qui s'étonne de ne pas accéder à son site internet, me convaincs de repasser un coup de fil pour savoir où en est ma demande.

Toujours rien de neuf.

Mon interlocuteur s'étonne que le problème ne soit toujours pas résolu. M'avoue qu'en général on ne pénalise pas un utilisateur aussi longtemps.

Il se souvient m'avoir eu en ligne hier. Et me dit qu'il va faire tout son possible pour faire passer ma demande en priorité. On me comprends, on s'étonne, on me dit que tout va aller mieux. C'est rassurant, presque. Mais il m'avoue qu'il ne peut pas faire grand chose tant qu'il n'arrive pas à joindre les administrateurs.

Pas plus que moi-même, car à chacun de mes coups de fils, je demande à parler aux administrateurs, à un responsable, bref à quelqu'un qui soit en mesure de comprendre la priorité de ma demande, on me dit de faire un courrier...

Je rappelle en fin de journée, pour savoir si je passerai encore une nuit blanche sur ce problème là. J'essaie toujours d'être autant que faire ce peut aimable avec mes interlocuteurs. Autant certains de vos employés sont charmants et semblent vouloir m'aider, autant il y a des goujats. Ce soir j'y ai droit. A priori, tout est de MA faute, j'ai été prévenue par mail il y a au moins des semaines (???) et c'est mon problème si je n'ai pas réduit la surcharge (celle dont je suis au courant depuis moins de 24h ?).

La vérité est ailleurs

C'est moi qui ai mis un script (hein ?) sur le site et je ne suis sûrement pas la seule personne qui a fait une demande de déblocage (ça je m'en suis rendue compte en faisant une recherche sur 1&1 dans Google) et il n'y a pas de raison que je passe en priorité. Je demande à cette charmante personne comment joindre les administrateurs, avez-vous un accueil physique ? Non pas d'accueil physique, et les administrateurs ne sont ni à Karlsruhe, ni à Sarreguemines. Quand je le demande, on me répond qu'ils sont ailleurs.

Comment joindre un responsable : par courrier. J'ai presque envie de lui demander si je dois m'acheter un boulier pour calculer la surcharge, mais je me tais.

Un courrier, encore 48h de délai... heureusement mon interlocuteur n'est pas courtois mais a de bonnes idées et me propose de leur faxer.

Je continue donc de vous narrer ici mes déboires. Si vous voulez me donner un coup de main, pourriez-vous envoyer un mail à support@1and1.fr en leur demandant pourquoi le site : esprit-creatif.fr est en panne ?

Peut-être finiront-ils par me prendre au sérieux...

----------------------------------------------------------------------------------------------------

Un grand merci à Mathieu, qui dans cette entreprise de dingue à pas forcément les moyens de m'aider mais à la gentillesse de m'écouter, et ça c'est pas donné à tout le monde chez 1&1.

Je pensais que tout rentrerai dans l'ordre ce matin (voir billet précédent) avec mon hébergeur favori. Mais non... Au moment où je me connecte, toujours pas de sites internet, tout est en panne et aucune nouvelle.

Le coup du problème de paiement, la suite...

Je téléphone donc encore une fois à leur support téléphonique  0825... à 0.15cts la minute pour savoir pourquoi ils ne me fournissent pas un service qui est vital pour moi, puisque sans hébergeur, je suis au chomage technique.

On me répond que ma banque a rejeté le paiement de vendredi 14h, et ne l'a toujours pas accepté.  Je téléphone donc à ma banque, pour savoir ce qu'il en est , et on me répond que le paiement est bien passé vendredi à 14h...

Je rappelle donc le service client 1and1 et là : un conseiller m'informe que le blocage n'est pas du au paiement, mais à une sécurité du serveur parce que mon compte en fait une trop grande utilisation.

Le coup du compte suspendu pour utilisation abusive...

Je reçois dans la foulée, un mail de leur part qui me dit : j'ai trop utilisé le serveur mutualisé, et que pour l'instant ils ne prennent aucune mesure de suspension de compte mais qu'il faut que je change rapidement les choses.

Je rappelle donc 1and1, pour leur demander : comment je règle un problème de surcharge de serveur, si je n'ai pas accès à mon compte
et surtout, pourquoi ont-ils suspendu mon compte le vendredi 29 février 2008, pour m'informer seulement le 3 mars qu'ils ne le feraient pas tout de suite alors que c'était déjà le cas depuis 4 jours !!!

On m'envoie un formulaire de demande de déblocage. Sur lequel il est écrit que mon compte a été suspendu parce que j'ai mis en place un script ou un système de cron (un quoi ???). J'ai rien modifié depuis une semaine car j'étais grippée et alitée, et je n'ai pas pu travailler à part du travail image, de la compta... je ne mets jamais les doigts dans le code quand je suis HS.

Je demande quelles sont les limites, qu'on me donne un chiffre à ne pas dépassser. On m'explique qu'il n'y a pas vraiment de limites, mais que je les ai dépassées quand même.

Et qu'il faudrait que je pense à souscrire un serveur dédié.

Quoi ??? Tout ça juste pour me faire cracher plus d'argent ?
Alors comme ça, j'ai plein de problèmes, mais tout se solutionnera comme par miracle si je paye grassement tous les mois un serveur ...
De qui se moque-t'on ?

Je ne vais surement pas leur donner un cents de plus... c'est à la limite de l'abus de faiblesse. Ben oui, c'est mon gagne-pain, si je ne bosse pas je perds ma clientèle et ils savent qu'il s me tiennent.
Mais non, je ne me laisserai pas faire. Après tout leur siège social est à 1heure de route, alors si ce n'est pas règlé demain, j'irai les voir en personne avec mon pote de chez Panza et ma copine juriste, ils la ramèneront moins.


Mais... il est passé où le problème de paiement ????

En fait, il n'y en avait pas. C'était une excuse de la hotline pour se débarrasser de moi. Sympa chez 1and1 ;)

--------------------------------------------------------------------------------------------------
Droit de réponse : Je ne publie pas à l'heure actuelle de réponse de 1and1 puisque je n'en ai pas reçue. Si l'hébergeur souhaite un droit de réponse je suis tout à fait disposée à lui accordée de la place sur ce blog...

Quoi de plus pathétique pour un webmaster que de s'apercevoir que son hébergeur est un gros nul ?

C'est ce qu'il m'est arrivé aujourd'hui.

1# 1and1 a suspendu mes services sans me prévenir

C'est un client qui m'a prévenu que son site ne fonctionnait plus. J'ai pensé à une panne serveur (comme cela arrive de temps en temps à mon hébergeur (honte à lui), mais je me trompais lourdement.

Mon hébergeur a décidé de suspendre ses services et de bloquer mon compte parce qu'il a eu un problème d'impayé de 8€ !!!!
Bon, j'aurai oublié de règler un facture trimestrielle de 100 ou 200 € j'aurai compris qu'il panique, mais 8€ !!!

En fait on m'a volé mon sac à main la semaine dernière et j'ai du faire opposition à toutes mes cartes bleues. Et je n'ai pas eu le temps de faire le changement partout pour l'instant.  D'autant plus que 1and ne m'a jamais contacté pour me dire qu'ils avaient un problème.

Ils ne m'ont même pas envoyé un e-mail !!!!

2# Le support téléphonique de 1and1 c'est de la m... !

Donc j'appelle immédiatement la hotline, et je patiente pendant une bonne vingtaine de minutes avant qu'un Allo à l'accent exotique me réponde.

On m'informe que mon compte a effectivement été bloqué, pour un problème de carte rejetée... Je les informe donc que j'ai modifié les coordonnées bancaires, et il se décide à faire un nouveau prélèvement.
On me dit que le site sera à nouveau fonctionnel dans 1h.

Une heure plus tard, ça ne marche toujours pas. Je me dis que je vais leur repasser un coup de fil pour m'assurer que tout va bien. Et là, on m'invite à les recontacter pendant les horaires d'ouverture (du lundi au vendredi de 8h00 à 19h00, sauf les jours fériés). A priori, chez eux, le samedi est un jour férié.

3# Mais pourquoi je suis encore chez 1and1 ? C'est cher et c'est pas bien en fait...

J'étais assez contente des prestations offertes. Ils ont des petits prix, et tout est gérable depuis l'interface web. Rien de compliqué et des offres très attractives. Mais ce ne sont pas les moins chers et à priori la qualité de service est médiocre.

J'aurais du me douter que petit prix impliquait une qualité de service très pauvre. Bref, vous l'aurez compris, je ne recommande  plus de choisir 1and1, ni à mes clients, ni à vous.

Un bon hébergeur, ça vaut son pesant d'OR.

Aujourd'hui je vous présente Emob, un site de podcast videos sur le graphismes en général.



Ils proposent de nombreux tutoriaux, en video, accessible à tous niveaux et surtout, extrêmement interressants.  Les vidéos gratuites vous permettront de vous faire une idée d'ensemble de la quallité de leur matériel pédagogique. Mais je ne saurait trop vous conseiller de jeter un oeil dans les categories dreamweaver où vous trouverez peut-être votre bonheur en tant que webmaster, ou au moins, de bonnes idées à garder au chaud...

Contraction de iPod et de broadcast, le podcast est une technique qui permet de diffuser des fichiers MP3. Ceux-ci peuvent être téléchargés puis, par exemple, écoutés sur un baladeur numérique. On y ajoute un flux RSS pour prévenir vos auditeurs des nouveautés. Ci-dessous vous trouverez comment créer un podcast sous forme de blog avec PODEMUS, accessible à tous, même débutants.

1# Installez le codec MP3 Lame

Si vous ne l'avez pas déjà, connectez-vous à l'adresse : http://audacity.sourceforge.net/download/windows

Cliquez en bas sur Français, puis sur Encodeur MP3 LAME . Sélectionnez Allez sur la page de téléchargement de LAME . Cliquez sur le premier lien lame-3.96.1 pour lancer le téléchargement du fichier lame-3.96.1.zip . Enregistrez-le sur votre disque. Lancez l'explorateur de Windows. Accédez à votre disque dur C: et créez un dossier nommé Lame , puis un dossier MP3 . Ensuite, double-cliquez sur le fichier lame-3.96.1.zip . Extrayez le contenu du fichier Zip dans le dossier Lame précédemment créé.

2# Installez Audacity

Connectez-vous à l'adresse :
http://audacity.sourceforge.net
et téléchargez Audacity 1.2.4b .

Installez-le puis lancez-le s'il ne le fait pas tout seul. Pour qu'Audacity puisse créer des fichiers MP3, déroulez le menu Edition et sélectionnez Préférences... Dans la fenêtre qui s'affiche, sélectionnez l'onglet Formats de fichier et, dans la partie Réglage de l'exportation MP3 , cliquez sur Chercher la librairie . Cliquez sur Oui puis, avec le sélecteur de fichier qui apparaît, ouvrez le dossier Lame créé à l'étape 1. Un fichier lame_enc.dll est visible. Cliquez sur Ouvrir . Choisissez ensuite le débit en kbps des fichiers MP3 qu'Audacity créera. Si vous ne comptez enregistrer que de la voix, choisissez 56 dans la liste déroulant, pour de la musique, il faudra aller au maximum.

3# Téléchargez et installez Java Runtime Environment

Connectez-vous à l'adresse : http://www.01net.com/telecharger/windows/Programmation/java/fiches/8138.html et cliquez sur le bouton Télécharger . Une fois le téléchargement terminé, double-cliquez sur le fichier jre-1_5_0_06-windows-i586-p.exe . Suivez les instructions de l'assistant en choisissant l'installation type.

4# Enregistrez vos émissions

Après avoir vérifié que le microphone est bien branché, lancez le logiciel Audacity . Vous pouvez directement enregistrer votre voix. Cliquez sur le bouton avec un rond rouge pour lancer l'enregistrement. Dès que vous avez cliqué sur le bouton, une fenêtre nouvelle piste audio apparaît, et l'enregistrement commence. Pour terminer l'enregistrement, cliquez sur le bouton avec un rond jaune. Vous pouvez régler le niveau d'enregistrement en agissant sur le curseur placé sous les commandes de lecture et d'enregistrement.

Une fois votre enregistrement terminé, cliquez sur le menu Fichier et sélectionnez Exporter comme MP3... Sélectionnez le dossier MP3 créé auparavant, puis donnez un nom à votre fichier, en évitant les caractères accentués. Cliquez sur Enregistrer . Une fenêtre s'affiche où il faut saisir les éléments descriptifs de votre fichier. A la rubrique Genre , par exemple, sélectionnez Speech (texte parlé). Cliquez sur OK pour valider l'enregistrement.

 5# Créez votre podcast sur Podemus

Connectez-vous au site www.podemus.com et faites l'inscription en ligne. L'adresse de votre podcast prendra la forme pseudonyme.podemus.com (comme sur myspace). Vous devez ensuite ecrire un premier article qui présentera votre podcast et y ajouter le fichier mp3.

#1 Construire un site au code propre, si possible aux normes w3c et WAI.

#2 Bien exploiter la balise title

#3 Bien renseigner ses balises meta.

#4 Avoir un contenu étoffé, structuré (h1,h2..., th) et bien organisé. Et surtout n'oubliez pas que ce sont les textes de votre page html qui vont être utilisés

#5 N'appelez pas vos dossiers bz23, vos pages page12.php ou vos images pict2000145141.jpg, donnez leur un nom en fonction de ce qu'elles contiennent réellement (et des mots clés sur lesquels vous voulez vous référencer...)

#6 Vérifiez et multipliez  vos liens entrants de qualité

#7 Les liens de votre propre site sont également importants. Faire un double du menu de navigation. Une page plan du site peut également être utile.

# 8 Inscrivez-vous dans les annuaires, et dans les moteurs de recherche, mais faites-le uniquement dans votre catégorie ou dans un thème qui corresponde bien à votre site.

#9 Utilisez toujours la même syntaxe pour l'url de votre site. Choisissez http://monsite.fr ou http://www.monsite.fr. Une fois ce choix fait ne référencez plus jamais l'autre même dans vos propres liens !

#10 Ne vous faites pas blacklister!
N'utilisez pas de Trucs, de Hacks, ou d'astuces !
 De pubs p0rn0graphique, de spams...
Si vous concevez un site de qualité il grimpera tout seul, alors au lieu de chercher à transformer une citrouille en carosse, améliorer votre site, à vos outils et bon courage !

Toutes les astuces pour bien utiliser les outils google et améliorer son référencement :

#1 Construire un site que Google référencera avec plaisir :

Google

Pour bien vous référencer dans Google, il n'y a pas de secrets, il faut impérativement produire un code propre, avoir un contenu étoffé, pas trop de pub, et bien renseigner ses balises meta.

Il existe 2 balises meta qui nous interressent tout particulièrement :
la balise meta description et la balise meta keywords. 

Je vous conseille de lire cet excellent article chez WebRankInfo si vous ne voyez pas de quoi je parle.

Mais il existe une autre balise que l'on sous-estime : la balise title
Cette balise de titre vous permet d'afficher du texte en haut du navigateur, comme ici : Blog MonGenie .

Pourtant cette balise est considérée par Google comme le pilier de la page et ce qu'elle contient va influer grandement sur votre référencement.
Regardons la balise de ma boutique test chez Zlio :
La Boutique du Webmaster : Tout ce qu'il faut pur créer votre site web 2.0 comme les pros !

Google va référencer les mots "boutique" et" webmaster" très fortement et les autres également. Il faut donc créer ses titres avec intelligence. Par exemple, pour une Agence de communication dans le Vaucluse qui s'appelle Studio 18, le titre :
- Votre Agence de Communication dans le Vaucluse : STUDIO 18
plutot que :
- STUDIO 18 : Votre Agence de Communication dans le Vaucluse

Il faut placer en premier les termes de notre référencement.
 
#2 Quelques astuces pour avoir un bon Web Rank :

Google Webrank

Google a créé son propre système de notation des sites et selon la note qu'il vous attribue, vous remontez ou descendes de classement pour une catégorie ou un thème.

Un site référencé correctement devrait atteindre sans trop de problème un Google Rank de 4 et au moins avoir un Google Rank de 2.

Mais qu'est-ce qui rentre en compte lors du calcul du Google Rank ?

En fait ce sont les liens. Ce qui sortent de votre site, mais surtout ceux qui y entrent. Si vous inscrivez votre site dans 23 annuaires, et que la page où vous apparraissez à un Google Rank de 0, votre référencement ne bougera pas.

Donc, il faut que vous trouviez des sites ayant un page rank d'au moins 4 ou 5 et qui acceptent de placer un lien vers votre site.

Les liens de votre propre site sont également importants. Banissez les liens morts, faites un renvoi vers l'accueil de toutes les pages de votre site, et n'hésitez pas à faire un double du menu de navigation. Ce 2ème menu peut-être placé en pied de page, pour éviter au visiteur de remonter toute la page. Et en même temps, il vous permettra de gonfler votre pagerank (attention à ne pas abuser de cette méthode sous peine de vous faire déclasser par Google). Une page plan du site peut également être utile.

Enfin, inscrivez-vous et réinscrivez-vous dans les annuaires, et dans les moteurs de recherche, mais faites-le uniquement dans votre catégorie ou dans un thème qui corresponde bien à votre site. Si Google trouve des incohérences (un site sur les névralgies dans un annuaire de restaurants par exemple), il vous déclassera.



Voici quelques outils supplémentaires qui vous permettront d'améliorer votre site, de suivre son référencement ... le tout mis à disposition gratuitement par Google :

Google Webmaster Tools

Google Analytics

Et enfin, voici les campagnes publicitaires proposées par Google.
AdWords pour afficher vos pubs sur les pages des autres ou dans le moteur de recherche.

Google Adwords

AdSense vous permet d'afficher des pubs sur vos sites internet et vous rémunère au cout par clic.

Google Adsense


Laissez-moi un commentaire si cet article vous a aidé !

®  Esprit Créatif 2008 - Tous droits de reproduction réservés

Aujourd'hui je voulais vous présenter zlio.com.

Internet Explorer 6 est souvent difficile à contrôler et un jeune webmaster peu vite être dérouté par les différences d'affichage qu'il pourra constater entre Internet Explorer 6 (IE 6), Internet Explorer 7 (IE7) et FireFox (FF). Je vais commencer par vous donner quelques conseils pour éviter un maximum de bugs, puis je vais établir ci-dessous une liste des bugs rencontrés sur Microsoft Internet Explorer 6 et le cas échéant la solution à appliquer. J'ajouterai au fur et à mesure de mes heureuses surprises. Pour m'y encourager, laissez-moi un commentaire ou cliquez sur une bannière si cet article vous a aidé !

A. Quelques conseils avisés

1# Bien renseigner son doctype

Essentiel à la bonne compréhension de votre code, le doctype va donner une clé à IE 6 pour interpréter votre code HTML. En l'absence de Doctype, IE passe en mode QUIRKS et point de vue affichage c'est la catastrophe !

Le DOCTYPE se place tout en haut de votre page HTML. C'est la toute première ligne de votre code.

Ex:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

L'importance va être de choisir le doctype adapté. Ne choisissez pas un doctype strict si vous débutez en html/css. Préférez-lui un doctype de type transitionnel. L'intérêt n'est pas de frimer en indiquant un doctype que vous ne saurez pas respecter, mais de permettre aux navigateurs de comprendre au mieux votre code.

Plus d'informations : Lire l'excellent article de Pompage.net

2# Valider son code HTML et son CSS

La plupart des différences d'affichage provienne de petites erreurs d'inattentions dans votre code HTML ( balise mal fermée, non-respect de l'imbrication...) ou dans votre css (oubli d'un point virgule ou d'une accolade).
Pour vous permettre de vérifier rapidemment votre code et de le rendre conforme, vous pouvez utiliser :
-  ce validateur ( en français )
-  le validateur de la W3C ( en anglais )

3# Bien utiliser les hack css

Si malgré tous vos efforts, il reste toujours de divergences, vous pouvez appliquer des correctifs que vous trouverez plus couramment sur le net sous le nom de hack css.

Pour qu'un style css ne soit appliqué exclusivement qu'à IE6, il suffit de mettre le signe - ou _ devant .
Ex : -margin : 5px ;

Pour qu'un style css ne soit appliqué exclusivement qu'à IE6 et IE7, il suffit de mettre le signe /, ? ou *devant .
Ex : /margin : 7px ;

Pour qu'un style css ne soit appliqué exclusivement qu'à FireFox, il suffit de mettre le commentaires !important après.
Ex : margin : 9px !important ;

Comme les styles s'appliquent en cascade, si vous avez besoin d'appliquer un style différent à chacun des navigateurs, faites comme dans l'exemple suivant :
margin: 9px !important;
/margin: 7px;
-margin: 5px;
D'abord Firefox, puis IE 7 , puis IE6.

B. Liste non-exhaustive des mauvaises surprises qui vous attendent sur ie6 et ie7

1# Les bugs dus aux margin et padding

IE a la facheuse tendance d'ajouter des pixels et d'en soustraire là où ça lui chante. Utilisez toujours de préférence margin, et appliquez les hacks pour rectifier les petits défauts. Quelquefois, il vous faudra carrément appliquer des marges négatives pour obtenir le résultat souhaité
ex: margin-left:-15px;

2# Le bug de la div en float, le bug de la bordure

Vous avez indiqué une bordure pour un style et elle n'apparait pas sous ie6 mais sur les autres navigateurs tout fonctionne, ou encore, vous avez appliqué un float à une div et celle-ci ne marche pas... il existe une solution.
Je ne connais la raison, mais en appliquant un position:relative à une div défaillante, souvent les problèmes s'envolent. A tester donc, en premier lieu, avant d'envoyer un mail d'insultes à Bill Gates.

3# Le background ne s'affiche pas

Il y a quelquefois des images d'arrière-plan ou des couleurs qui refusent de s'afficher sur ie6. La plupart de vos problèmes seront solutionnés comme par miracle en appliquant à IE6 ceci :
-height:1%;
ou
/height:1%; (si le problèmes est aussi présent sur ie7)
Encore un antidote miracle qui pourra vous servir en diverses occasions.

4# Lorsque j'enlève la bordure, tous se décale

Vous aviez mis une bordure puis vous avez décidé d'abandonner l'idée, mais tout se décale quand vous l'enlevez ?
Il vous suffit de garder la bordure en indiquant border : 0px solid ;
Elle n'apparaitra plus et le bug non plus.

5# Le min-width ne fonctionne pas

Min-width, max-width, min-height, max-height font partie des valeurs que ie6 ne comprend pas. Inutile d'essayer de les appliquer il ne les interprète pas.
Heureusement, vous arriverez à passer outre avec ce hack :

min-height:800px;
height:auto !important;
height:800px;

Vous n'avez plus qu'à adapter ce code à vos besoins...

6# Et les PNG transparents ?

Pour IE 6, le PNG n'est pas transparent et il affiche un fond grisatre des plus inesthétiques.
Pour pallier à ce problème, vous avez deux options :
- toujours préférer le format gif, qui est libre (ceux qui ont entendu dire que le Gif appartenait à Sun Inc. devrait aller sur  hoaxbuster)
- intégrer un fichier .htc qui va permettre d'emuler ie6 pour qu'il comprenne le png transparent.


7# Et le comportement Hover ?

IE 6 connait le comportement :hover quand il est appliqué à la balise a.
Il appliquera donc un effet de survol à un style définit par a:hover.
Mais si vous décidez d'appliquer un effet de survol à un autre élément, misère, ça ne marche plus...
La solution vient elle aussi d'un fichier .htc qui va expliquer à IE ce qu'il faut faire.
N'oublier pas d'appeler le fichier avec l'élément behavior !

8# J'ai un style appliqué à plusieurs images et IE6 ne l'applique qu'à la première :

Vous avez réalisé une belle mise en page et donné un style à vos images, mais votre style qui s'applique correctement partout, s'arrête à la première image sous IE6.

Nous avons affaire cette fois à une application à la lettre des normes W3C d'IE6, qui n'applique un style défini par un identifiant :  id="" qu'au premier élément.
En effet, pour IE6, un id est UNIQUE, donc il n'applique l'ID qu'une seule fois.

La solution est toute simple, changez dans votre html  vos ID= par des CLASS= , et n'oubliez pas de changer également le code CSS !

9# Mes puces de liste disparaissent quand je bouge l'ascenceur / ou ma puce n'est pas à la bonne place /  ou mes puces disparraissent au survol de la souris :

CAS n° 1 : Ce bug concerne ie 6 et ie 7

Vous avez fait une liste avec < ul > < li >, et utilisé un list-style-image pour définir l'image de la puce. Tout fonctionne sous FF mais sous IE, c'est la cata, les puces disparaissent quand vous passez la souris dessus ou si vous touchez à l'ascenceur vertical.

Malheureusement, IE 6 (& 7) interprètent très mal le changement d'image de puce avec le list-style-image. Il faut donc contourner cette propriété  CSS en utilisant un background :

li{
list-style-type: none;
background:url(images/puce.jpg) center left no-repeat;
padding-left: 15px;
}

Et voilà, vos puces fonctionnent de façon identique sur IE et Firefox !
Pensez à utiliser ce code de façon systématique et ranger le list-style-image dans un tirroir en attendant que IE s'affranchissent de ses bugs.

Si vous avez toujours un souci, lisez la suite :

Cas n° 2 : Ce bug concerne UNIQUEMENT  IE 6

Vous avez testé et tout fonctionne sur ie7 mais sur ie6, on dirait qu'il recharge tout de même les images au survol de la souris?
Faites ce petit test :
Regardez dans IE6, dans Outils>Options Internet>Général>Fichiers temporaires >Paramètres.
Avez-vous cocher "A chaque visite de la page" ?
Si oui, cochez n'importe quel autre paramètre et faites un refresh (F5) de la page.
Si le bug a disparu, c'est que vous êtes face à un FLICKER bug. Tellement fréquent qu'il a un petit nom. Vo