Le droit d'auteur français est basé essentiellement le Code de la Propriété intellectuelle. Si vous ne devez en connaître que deux voici les deux articles suivants :
Article L. 111-1 du Code de la propriété intellectuelle : L'auteur d'une œuvre de l'esprit jouit sur cette œuvre, du seul fait de sa création, d'un droit de propriété incorporelle exclusif et opposable à tous. Ce droit comporte des attributs d'ordre intellectuel et moral, ainsi que des attributs d'ordre patrimonial [...].
Article L. 123-1 du Code de la propriété intellectuelle : L'auteur jouit, sa vie durant du droit exclusif d'exploiter son œuvre sous quelque forme que ce soit et d'en tirer un profit pécuniaire. Au décès de l'auteur, ce droit persiste au bénéfice de ses ayants-droits pendant l'année civile en cours et les soixante-dix années qui suivent.
En clair, l'auteur d'une œuvre n'a pas besoin de la déposer pour qu'il en ai légitimement la paternité. L'auteur d'une œuvre originale est protégé dès la création de son œuvre, sans formalité, tant qu'il est en mesure de prouver son antériorité.
Pour aller plus loin et comprendre comment exercer son droit d'auteur, voici les principes primordiaux du Code de la propriété intellectuelle :
1. Création d'une œuvre :
Art. L. 111-2. L'œuvre est réputée créée, indépendamment de toute divulgation publique, du seul fait de la réalisation, même inachevée de la conception de l'auteur.
2. Quelles sont les œuvres protégées par le droit d'auteur :
Art. L.112-2. Sont considérés notamment comme oeuvres de l'esprit au sens du présent code : 1° Les livres, brochures et autres écrits littéraires, artistiques et scientifiques ; 2° Les conférences, allocutions, sermons, plaidoiries et autres oeuvres de même nature ; 3° Les oeuvres dramatiques ou dramatico-musicales ; 4° Les oeuvres chorégraphiques, les numéros et tours de cirque, les pantomimes, dont la mise en oeuvre est fixée par écrit ou autrement ; 5° Les compositions musicales avec ou sans paroles ; 6° Les oeuvres cinématographiques et autres oeuvres consistant dans des séquences animées d'images, sonorisées ou non, dénommées ensemble oeuvres audiovisuelles ; 7° Les oeuvres de dessin, de peinture, d'architecture, de sculpture, de gravure, de lithographie ; 8° Les oeuvres graphiques et typographiques ; 9° Les oeuvres photographiques et celles réalisées à l'aide de techniques analogues à la photographie ; 10° Les oeuvres des arts appliqués ; 11° Les illustrations, les cartes géographiques ; 12° Les plans, croquis et ouvrages plastiques relatifs à la géographie, à la topographie, à l'architecture et aux sciences ; 13° Les logiciels, y compris le matériel de conception préparatoire; 14° Les créations des industries saisonnières de l'habillement et de la parure. Sont réputées industries saisonnières de l'habillement et de la parure les industries qui, en raison des exigences de la mode, renouvellent fréquemment la forme de leurs produits, et notamment la couture, la fourrure, la lingerie, la broderie, la mode, la chaussure, la ganterie, la maroquinerie, la fabrique de tissus de haute nouveauté ou spéciaux à la haute couture, les productions des paruriers et des bottiers et les fabriques de tissus d'ameublement.
3. La paternité d'une oeuvre
Selon l'article L 113-1 du CPI, « La qualité d'auteur appartient, sauf preuve contraire, à celui ou à ceux sous le nom de qui l'œuvre est divulgée. »
Dès la création d'une œuvre, son auteur en a la paternité, l'œuvre lui appartient de plein droit. Quand quelqu'un prétend être l'auteur alors qu'il a simplement volé le travail d'un autre, l'auteur véritable peut faire condamner l'usurpateur et obtenir la publication de l'arrêt.
4. Le respect du droit moral
Art. L. 121-1. L'auteur jouit du droit au respect de son nom, de sa qualité et de son oeuvre. Ce droit est attaché à sa personne. Il est perpétuel, inaliénable et imprescriptible. Il est transmissible à cause de mort aux héritiers de l'auteur. L'exercice peut être conféré à un tiers en vertu de dispositions testamentaires.
Pour comprendre les tenants et aboutissants de cet article, voici une définition du droit moral appliqué aux artistes-auteurs : Prérogatives liées au droit moral de l'auteur
1) un droit de divulgation de l' œuvre (de communication au public ) qui s'exerce pour chaque mode de communication ,
2) un droit à la paternité de l'œuvre ( de respect du nom et de la qualité de l'auteur ),
3) un droit au respect de l'œuvre ( qui se traduit par une interdiction d'altérer l'œuvre dans l'un de ses éléments constitutifs ou dans son esprit ) et enfin
4) un droit de retrait et de repentir ( c'est à dire d'un droit exorbitant de cessation unilatérale des relations contractuelles ) uniquement en cas de cession de ses droits patrimoniaux par l'auteur.
L'exercice de cette dernière prérogative ouvre droit au profit du co-contractant à une indemnisation préalable ainsi qu'un droit de préemption en cas de nouvelle décision d'exploiter l'œuvre.
4. Cession des droits d'auteurs
Art.
L. 131-3. La transmission
des droits de l'auteur est subordonnée à la condition que chacun
des droits cédés fasse l'objet d'une mention distincte dans l'acte
de cession et que le domaine d'exploitation des droits cédés soit
délimité quant à son étendue et à sa destination,
quant au lieu et quant à la durée. [...]
Lorsqu'un auteur vend une oeuvre, on dit qu'il fait une cession des droits d'auteurs. Ici la confusion règne souvent, on confond à tord paternité et cession de droits d'auteur.
Lorsqu'un graphiste vend un logo, un visuel, il le fait dans un but précis de diffusion, et c'est cette autorisation de diffusion "limitée" qui est vendue. Si l'acheteur souhaite réutiliser le travail réalisé dans un autre cadre, il doit demander l'autorisation au graphiste.
Je ne saurais que trop vous conseiller de consulter cet excellent site http://www.celog.fr/cpi/index.php pour voir les textes dans leur intégralité, mais aussi les articles s'y appliquant ou la jurisprudence.
Une fois n'est pas coutume, je vous propose de jeter un coup d'oeil au nouveau site de Ségolène Royal. (si vous êtes en erreur 500 faites F5 jusqu'à obtenir la page, ça vaut le coup)
Les mentions obligatoires a indiquer sur un site internet sont :
a) S'il s'agit de personnes physiques, leurs nom, prénoms, domicile
et numéro de téléphone et, si elles sont assujetties aux formalités
d'inscription au registre du commerce et des sociétés ou au répertoire
des métiers, le numéro RCS ou SIRET ;
ou
b) S'il s'agit de personnes morales, leur dénomination ou leur
raison sociale et leur siège social, leur numéro de téléphone et, s'il
s'agit d'entreprises assujetties aux formalités d'inscription au
registre du commerce et des sociétés ou au répertoire des métiers, le
numéro de leur inscription, leur capital social, l'adresse de leur
siège social ;
c) Le nom du directeur ou du codirecteur de la publication et, le cas échéant, celui du responsable de la rédaction
d) Le nom, la dénomination ou la raison sociale et l'adresse et le numéro de téléphone du prestataire de services (hébergeur)
A titre d'exemple, voici les mentions légales de la société Esprit Créatif :
Esprit Créatif N° de SIRET : 487 847 402 00012 Adresse : 24 rue de Chatenois - 67100 Strasbourg - France Tél. : 09 70 46 27 27
Hébergeur
1&1 Internet AG
Brauerstr. 48
76135 Karlsruhe
Allemagne
Tél : 0825 080 020
b. Informations légales et respect de la vie privée
Si vous collectez des informations sur vos internautes que ce soit par le biais d'un formulaire électronique ou d'un cookie de session, vous êtes dans l'obligation légale d'en informer vos visiteurs. Certaines collectes d'information doivent faire l'objet d'une déclaration préalable à la CNIL. Vous trouverez plus d'informations sur les déclarations à la CNIL à cette adresse
Heureusement, concernant les mentions informatives obligatoires d'un site internet, la CNIL a mis à votre disposition un outil vous permettant de générer automatiquement vos mentions légales : http://www.cnil.fr/vos-responsabilites/informations-legales/ En quelques clics, vous créez un document correspondant à votre situation et aux informations légales de votre site internet . Dans la liste des formulaires à cocher, si vous observez la rubrique "Internet", elle contient les différents formulaires relatifs à l'implantation de cookies.
Comme ces informations légales sont assez imposantes, nous vous conseillons de les regrouper sur une page à part de votre site internet.
2/ Les mentions légales sur un tract ou flyer distribué sur la voie publique
Vous devez respecter un certain nombre de règles lorsque vous distribuez des documents publicitaires sur la voie publique.
Tout d'abord, les documents imprimés doivent comporter le nom et
l'adresse de l'imprimeur, à défaut, l'imprimeur encourt une amende de 3
750 € (1). Lorsque l'entreprise imprime elle-même ses documents
publicitaires, elle doit en conséquence indiquer son nom et son
domicile et la mention IPNS (imprimé par nos soins).
De plus, dès lors que vous établissez des documents à destination du
public, vous devez indiquer certaines mentions obligatoires destinées à
vous identifier. Lorsque vous êtes immatriculé au Registre du Commerce
et des Sociétés, vous devez mentionner les éléments suivants :
- votre nom ou dénomination sociale,
- votre numéro d'identification SIRENE qui correspond à votre numéro RCS,
- la mention « RCS » suivie du nom de la ville où vous êtes immatriculé,
- votre éventuelle qualité de locataire gérant
Par ailleurs, si vous êtes une société commerciale, vous devez indiquer votre capital social et votre forme sociale.
Il est obligatoire d'ajouter la mention « ne pas jeter sur la
voie publique » afin de respecter les nouvelles dispositions en matière
d'environnement sur la collecte et l'élimination des déchets. Cette mention peut être remplacée par un pictogramme.
Enfin, si vous mentionnez des produits à base d'alcool, n'oubliez pas d'ajouter « L'abus d'alcool est dangereux pour la santé, à consommer avec modération ».
A noter : ces mentions peuvent varier selon le lieu de diffusion, en cas de doute, adressez-vous à la municipalité de diffusion.
3/ L'ours ou mentions légales des imprimés
Dans l'imprimerie on parle d'ours, non pas l'animal, pour désigner une toute petite ligne en dernière page d'une brochure ou d'un journal contenant les mentions légales obligatoires suivantes : l'éditeur
de la publication, le directeur de publication, le nom et l'adresse de
l'imprimeur, le dépôt légal, l'ISSN. Sont aussi souvent mentionnés les noms des rédacteurs. Seuls sont obligatoires, le directeur de la publication et les noms et adresses de l'imprimeur.
Des infos à ajouter, des imperfections dans notre article ? N'hésitez pas à nous laissez vos commentaires ci-dessous !
---------------------------------------------------------------------------------------------------- Sources : Légifrance, Business Fil, Journal du Net , CNIL, Dircomeleblog
"En Hollande, il n'y a pas que les fromages qui aient des trous...
Ecofont aussi, la police d'impression écologique et économique."
A chaque document imprimé, on ne consomme pas seulement du papier mais aussi de l'encre. SPRANQ creative
communication, une web agency batave, a trouvé une solution pour
prolonger nettement la durée de vie de vos cartouches: Ecofont.
Ils proposent une police à trous invisibles qui permette de limiter la consommation d'encre, une idée toute simple mais il fallait y penser !!!
Help est un site proposant un service dédié aux personnes (physiques ou morales, de nationalité
française ou étrangère) ayant acheté ou étant sur le point d'acquérir
un ou plusieurs biens immobiliers en France. Ces clients peuvent se
situer n'importe où en France ou dans le monde.
En adhérant à Help Service vous bénéficiez d'un service personnalisé
d'accompagnement, de gestion et d'administration de votre bien
immobilier, et intégrez une communauté d'internautes autour du thème de
l'investissement locatif et de la finance.
Ce site a été réalisé sur un socle joomla avec une gestion complexe des utilisateurs et des abonnements (cf onglet tarifs et formules ).
En utilisant les standards W3C, et notammentles normes XHTML
pour la structure des documents et CSS pour la
présentation, ongarantit ainsi que tous les navigateurs respectueux des
standards pourront afficher correctement le contenu. Bien sûr, la
présentation de ce contenu sera plus sobre dans les navigateurs plus anciens,
mais il demeurera parfaitement accessible.
-Un
référencement optimal grâce aux normes W3C
Créer un site internet conforme aux standards du W3C garanti de meilleurs
résultats de classement et de reconnaissance dans les moteurs de recherche. Les
documents conformes aux standards sont non seulement indexés plus précisément
dans les registres grâce à leur structure informationnelle plus logique, mais
sont également plus susceptibles de répondre aux attentes des moteurs de
recherche, ce qui en favorise l'accessibilité et l'évaluation au moment des
prises en charge de classification. En effet, il est beaucoup plus facile pour
un algorithme d'indexation de reconnaître un document répondant aux normes
qu'un autre qui ne respecte aucune logique de structure.
-Le
respect des normes W3C améliore l'accessibilité
La presque totalité des sites Web actuels n'est accessible
qu'au moyen de navigateurs graphiques traditionnels, empêchant ainsi leur accès
par des personnes atteintes d'un handicap physique, moteur ou
neurophysiologique. Le HTML des années 90 ne prévoyait pas le support de
synthétiseurs vocaux ou de plages Braille.
Les normes du W3C intègrent ces considérations dans les
standards et facilitent grandement la création de sites universellement
accessibles. Notons que les gouvernements anglais et américains obligent d'ors
et déjà leurs administrations à produire des sites Web accessibles, et qu'un texte de loi existe en
France :
LOI n° 2005-102 du 11 février 2005 pour l'égalité des droits et des
chances, la participation et la citoyenneté des personnes handicapées
"
Article 47
Les services de communication publique en ligne des services de l'Etat,
des collectivités territoriales et des établissements publics qui en
dépendent doivent être accessibles aux personnes handicapées.
L'accessibilité des services de communication publique en ligne
concerne l'accès à tout type d'information sous forme numérique quels
que soient le moyen d'accès, les contenus et le mode de consultation.
Les recommandations internationales pour l'accessibilité de l'internet
doivent être appliquées pour les services de communication publique en
ligne.
Un décret en Conseil d'Etat fixe les règles relatives à l'accessibilité
et précise, par référence aux recommandations établies par l'Agence
pour le développement de l'administration électronique, la nature des
adaptations à mettre en oeuvre ainsi que les délais de mise en
conformité des sites existants, qui ne peuvent excéder trois ans, et
les sanctions imposées en cas de non-respect de cette mise en
accessibilité. Le décret énonce en outre les modalités de formation des
personnels intervenant sur les services de communication publique en
ligne.
"
-Diminution
des coûts de mise à jour, d'hébergement, de maintenance…
Lors de la création de nouveaux sites Web, la séparation du
contenu structuré et de sa présentation conformément aux normes W3Cpermet de créer un site au code propre et
plus léger. Ainsi les coûts d'hébergements sont réduits car les sites normés
sont plus légers etnécessitent moins
d'espace web.
L'utilisation des CSSpermettent de changer rapidement l'apparence entière d'un site , en
modifiant tout simplement la feuille de style qui y est associée. Un tel
exploit de flexibilité est impossible pour les sites Web construits à
l'ancienne, fusionnant sans distinctions contenu et présentation, notamment
ceux ayant des mises en page tableau complexes. De tels sites nécessitent un
long et coûteux travail de modification de chaque page pour réaliser ce genre
d'opération.
Après 3 jours plongés dans le monde du e-commerce à Paris, je reviens au bureau plus motivée que jamais.
Certes, le salon du e-commerce Paris 2008 aurait pu être plus passionnant si les conférences s'étaient adressées à un niveau d'expert. Cependant, reprendre les bases n'est jamais mauvais, surtout sur un monde rempli de fluctuation comme le référencement ou le e-marketing.
Des conférences hétéroclytes
Côté points positifs, je noterai la belle intervention de l'Agence 1ere Position qui a su en 1h30 faire un tour d'horizon global des techniques de référencement avec une virtuosité assez rare pour être signalée. A noter aussi qu'ils ont eu le courage d'auditer leur propre site internet pour nous montrer les forces et les limites du référencement.
Côté déception, la très attendue Google University sur Adwords m'a un peu frustrée. J'ai eu du mal à comprendre pourquoi on m'expliquait ce qu'était internet et le niveau de cette conférence était clairement destiné à un public de néophytes, et non à des web-professionnels. L'outil adwords étant assez complexe, j'aurai apprécié un décryptage plus pratique que théorique. Au lieu de ça, nous avons écouté les témoignages d'utilisateurs satisfaits, ce qui était intéressant, mais pas très utile. Peu de Goodies et beaucoup de sucreries
Le 8eme salon du e-commerce n'a pas été la débauche de plaquettes print et de communication sur papier à laquelle se prêtent en général volontiers les exposants. Sur les très nombreux stand cette année, il y avait peu de goodies et beaucoup de sucreries. Auraient-ils été touchés par le développement durable et l'éco-citoyenneté ?
Amen avait déguisé ses hôtesses en Anges, pendant que les deux stands Microsoft, malgré des pubs attrayantes, sont restés déserts sans discontinuer.
Mais l'intérêt du salon était de confronter les idées et la façon dont on envisage le e-commerce à l'avenir. L'occasion de sortir de derrière son PC pour se confronter à ses concurrents et de rencontrer de nouveaux collaborateurs.
D'ailleurs, mon meilleur souvenir restera cette belle rencontre avec je l'espère de futurs partenaires : le stand de Kiubi lançait son produit e-commerce le jour de l'ouverture du salon et nous leur souhaitons une brillante réussite. Leur solution e-commerce était à mon sens l'une des plus intéressantes pour les webmasters, avec une excellent rapport qualité-prix et un interface utilisateur très intuitive.
J'espère pouvoir vos présenter prochainement nos premiers projets e-commerce réalisés en collaboration ! En attendant, soignez bien vos référencements.
-1- Depuis combien de temps êtes vous sur le marché du
graphisme ? Depuis le 4eme trimestre 2005 pour Esprit Créatif, depuis 1997 pour d'autres entreprises.
-2- Préférez-vous travailler seule ou en collaboration ?
Je travaille essentiellement en collaboration avec d'autres
graphistes ou développeurs web. L'union fait la force et travailler en groupe
permet de se motiver et d'appréhender des projets de plus grande
envergure.
-3- Faites vous sous-traiter certains
travaux ? En règle générale, j'essaie de toujours
trouver la personne la plus compétente pour répondre à la demande du client et
si ce n'est pas moi je mets mon égo de côté.
-4-
Comment avez-vous commencé votre métier, connu vos premiers clients
? Le bouche à oreille au démarrage, c'est le B A BA. Faire parler de
son lancement à ses amis, aux amis des amis... etc. Il y a aussi des
organismes comme l'ADIE ou l'OGACCA qui m'ont donné un coup de pouce au début.
Dans un second temps, j'ai envoyé mon book a quelques agences de
communication pour travailler en sous-traitance.
-5- Etes-vous inscrit à la Maison des Artistes ? Je suis inscrite à la maison
des artistes sans précompte.
-6- Le métier de graphiste
permet-il une stabilité financière ? Les premières années sont toujours difficiles, heureusement cela va en s'améliorant, et quand on propose un travail de qualité, les contrats finissent toujours par vous trouver.
-7- Votre clientèle a
t-elle un réel "besoin" à satisfaire ou devez-vous la solliciter régulièrement
? La clientèle vous sollicitera régulièrement dès qu'ils auront pris
gout à votre travail. Il y a un besoin, je pense qu'il y a de quoi faire
travailler tous les graphistes, mais bcp de clients sont échaudés par des
prétendus graphistes qui proposent un travail peu cher de très mauvaise
qualité.
-8- Pour vous, le marché du graphisme est
plutôt en développement, en stagnation ou en déclin ? En ce moment (c'est
à dire ces 6 derniers mois) l'activité a repris, donc je dirais qu'on est sur
une phase ascendante. Je pense que pour des gens talentueux, il y a toujours des
portes à ouvrir.
-9- Que représente en proportion
votre clientèle "multimédia" par rapport à une clientèle "print" ? Je
me suis spécialisée dans le support web ( option découpe xhtml/css, wai w3c), je fais
du print pour des produits très ciblés (logo, flyers,
affiches, cartes de visite). Donc je dirai 95% de clientèle multimédia. D'ailleurs si
vous avez besoin d'une partenaire en webdesign, découpe xhtml/css ou de template CMS respectueux des standards, pensez
à moi !
-10- Quel est pour vous, le plus gros
investissement à faire lorsqu'on débute ? Le plus gros, un excellent
poste de travail, une souris high-tech, les logiciels officiels pour pas avoir
de problèmes (windows, office, adobe), un fauteuil de bureau
confortable. Celui qui m'a le plus aidé ? Un repose-poignet pour la souris, à
15€, qui a soulagé ma tendinite. Je ne travaille plus jamais
sans.
-11- Quelle est, pour vous, la qualité
première d'un bon graphiste ? Je dirais la curiosité, l'inventivité...
-12- Quel est, pour vous, le ou les éléments les
plus attrayants pour le client lors d'une commande ? (par ex : le prix, la
qualité, la technicité, la ponctualité, la souplesse, la notoriété,
l'innovation...) la créativité... le client cherche des images, votre
book doit être épatant, si le client ouvre des yeux ronds comme des soucoupes
vous avez déjà signé.
-13- Qui sont vos principaux
concurrents ? A Strasbourg, il y en a beaucoup. Ce ne sont pas tous des concurrents, il y a beaucoup de collaboration entre Agences. Pour en citer quelques uns : Alnétis, Emerveille, 67web, Maetva, Advisa, Samourai, Graphiknet...
-14- Quelle est la principale contrainte du statut de graphiste
? L'impossibilité de faire de la revente. Par exemple, si vous
travaillez à 2 graphistes sur un projet, vous devez faire 2 factures séparées.
Si vous voulez vendre 250 cartes de visites pour que votre client ai du
concret dans les mains vous ne pouvez pas. Vous ne vendez que les créations
graphiques et ça complique les choses parfois.
-15-
Quels sont les principaux avantages et/ou opportunités du statut de graphiste
? Le statut de la Maison des Artistes c'est vraiment le bonheur. Pas
de calcul de TVA, comptabilité simplifiée en dépense recette et une seule case à
remplir sur la déclaration de revenus. Pas de charges annuelles et seulement 10%
de votre CA à leur reverser.
-16- Si vous aviez un conseil à donner, quel serait-il
? Ne JAMAIS travailler sans bon de commande ou sans contrat même avec
des proches, nombre de mes amis se sont enfuis au moment de payer. Dans ce
métier, il ne faut pas faire confiance, vous êtes professionnelle, donc bon de
commande + 30% d'accompte à la commande.
Si vous avez un client réticent à payer
un accompte ou a signer un contrat, fuyez, vous ne perdez pas un client, vous
perdez un mauvais payeur.
Vous ne savez pas où vous en êtes avec votre site internet ? Les web Analytics vous tentent ?
Aeronet est une entreprise spécialisée dans le référencement qui vous propose de réaliser gratuitement un audit de positionnement de votre site.
Les informations sont intéressantes car elles vous permettent de connaitre votre positionnement dans les principaux moteurs de rechercher et votre place face à la concurrence.
Si vous n'avez pas peur de recevoir un peu de pub par la suite, n'hésitez pas, cliquez sur le lien direct ci-dessous :
Esprit Créatif vous donne rendez-vous au salon E-Commerce 2008 à Paris les 23, 24 et 25 septembre 2008.
E-commerce PARIS 2008 est l'une
des plus grosses conventions européennes sur le e-commerce organisé par
ebusiness.info.
Pour sa 5e édition, E-Commerce Paris 2008 voit toujours plus grand : 10
salles de conférences en parallèle pendant 3 jours, un plateau de 350
exposants réunis Porte de Versailles, des débats webcastés, des congrès
(nouveau), des formations, bref, de quoi faire le plein d'informations,
de contacts et d'idées pour faire exploser ses objectifs e-commerce !
Au total, ce sont plus de 350 exposants spécialisés dans le e-commerce, le référencement, l'accessibilité, le web marketing ou les web analytics. Mais aussi de très nombreuses conférences pour la plupart gratuites. A noter, une session de la Google University le 23 septembre à 16h.
Si vous aussi vous souhaitez participer à cet événement, inscrivez-vous vite sur le site de l'organisateur pour recevoir votre badge d'accès gratuit !
Les
recommandations de la W3C sont très claires sur ce point: il faut
insérer l'attribut alt=".." de vos balises d'images sous peine de voir
votre validation refusée. Les insérer est une chose, nous allons voir
comment les remplir de façon efficace et utile.
1# A quoi ça sert ?
Le
texte alternatif permet d'afficher une alternative au contenu
non-textuel. En effet, nous allons nous pencher essentiellement sur les
images, mais vous retrouverez l'attibut alt=".." dans
une quantité de balises, notamment la balise object par exemple et
permet donc d'insérer du contenu média, des applets...etc.
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 ?
L'attribut alt devrait typiquement :au contenu et aux fonctions de l'image.
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
Utilisez la balise alt vide
pour des images décoratives ou pour des espaceurs, des images de fond
qui n'apportent rien au contenu et sont purement décoratives
Quand
une image est utilisée de manière décorative, il est généralement
recommandé de l'appliquer en tant qu'arrière-plan via CSS. En procédant
ainsi, le choix du texte alternatif ne se pose plus et l'image
n'apparaît pas dans le corps sémantique et structurel de la page.
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
Le
logo principal est souvent un lien vers la page d'accueil. Cette
pratique étant très répandue, il est généralement suffisant de mettre
en texte alternatif le nom de l'entreprise (alt="Société Acme" par
exemple). Préciser qu'il s'agit d'un logo n'est pas nécessaire en
général, car ce n'est ni le contenu ni la fonction du lien. Les
développeurs choisissent habituellement de préciser que ce lien amène à
la page d'accueil (alt="Société Acme - page d'accueil), mais si l'image
se trouve systématiquement au début de la page et que le contenu
alternatif est suffisamment explicite, ce ne devrait pas être utile.
Les images complexes
Lorsqu'une
image complexe telle qu'un tableau de données ou un graphique ne
peuvent être correctement résumés en une ou deux phrases courtes, ET
que ce contenu n'est pas présent dans le contexte de la page, il est
nécessaire de placer ce contenu alternatif à un autre endroit.
Habituellement, c'est le rôle de l'attribut longdesc de l'image, mais
celui-ci n'est pas encore parfaitement supporté (plus d'informations sur l'attribut longdesc).
Dans ce cas, le texte alternatif de l'image devrait néanmoins décrire
le contenu général de l'image. Si l'image en revanche est un lien vers
une description plus complète, c'est à préciser dans l'attribut alt de
cette image.
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.
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 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...
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)
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 !
Nous recherchons actuellement un étudiant en création multimédia pour unstage en infographie / web design.
Nous recrutons régulièrement des stagiaires pour leur proposer
de travailler collaborativement sur des projets que nous réalisons en mécénat pour des Associations à but
humanitaire ou sur des commandes en cours.
Nous avons le plaisir de vous proposer un poste entélé-travail.
Les horaires sont à convenir, vous
serez en contact permanent avec votre tuteur viaMsndurant toute la durée de votre
stage, nous vous confierons régulièrement des missions, et vous aiderons à
les mener à bien.
Quelques projets signés qui seront réalisés pendant
cette période auxquels vous pourrez participer :
- une entreprise de coaching en décoration - logo + carte de
visite, papier en-tête, plaquettes, com de lancement et site.
- le site d'une entreprise de communication
écrite
- un site de tourisme solidaire - mises à jour + intégration
d'un album photo - un nouveau concept de réalisation de logos - site + com de
lancement - le site d'un dj professionnel
Des flyers pour des soirées
clubbing... Des mailing pour un ensemble vocal + un peu de redesign
web .... et bien d'autres encore.
Vous pouvez nous envoyer votre CV et lettre de motivation ainsi que vos dates de stagespar e-mail à l'adresse suivante : contact*at*esprit-creatif.fr
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.
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 :
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 :
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 !
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.
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
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
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
#3Bien 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 !
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.
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 :
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.
Ce site vous permet de créer une boutique facilement ! Vous
sélectionnez des produits dans le catalogue et vous êtes payé sur
chaque vente ! Et ce sont les marchands partenaires ( Priceminister, CDiscount, Surcouf... et bien d'autres) qui s'occupent de
toute la logistique.
Il suffit de choisir un nom, une adresse, un thème et le tour est joué.
Créer sa boutique est vraiment un jeu d'enfant qui ne nécessite aucune
connaissance en informatique.
2.Choisissez des produits
Avec ZLIO vous ne vendez pas vos propres produits, vous les choisissez
dans notre catalogue de 6 millions de produits. Ce catalogue est fourni
par les plus grands marchands du Net.
3.Gagnez de l'argent
Nous vous payons jusqu'à 15% du prix de vente à chaque fois qu'un achat
est effectué dans votre boutique. Nous vous offrons aussi la
possibilité d'être payé à chaque clic dans votre boutique. Nous vous
payons via Paypal ou virement bancaire.
Très facilement modilable, le design est adaptable via un CSS entièrement accessible. Voici des exemples que j'ai réalisé en quelques minutes :
- une boutique avec un template proposé par Zlio : Mon amoureux - une boutique avec un template personnalisé en CSS (20 min de travail environ) : Boutique du Webmaster
Si vous avez besoin de matériel ou de livres dédiés à création de sites internet, je vous conseille de visiter cette boutique qui contient mes livres de chevets, logiciels et matériels de prédilection en terme de webmastering : La Boutique du Webmaster
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.
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é qu'à FireFox (NB : et presque tous les autres navigateurs comme NETSCAPE ou OPERA qui ont une part de marché moindre), 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.
Enfin, petite nouveauté 2008, pour appliquer un hack css à Firefox 3, il faut ajouter les définitions x-moz-any-link à votre élément. Par exemple, si vous avez une div #menugauche à laquelle vous souhaitez appliquer une marge de 9px
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 :
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 depuis 2006.
- 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. Votre image est placée sur un lien et ie a décidé de vérifier cette image à chaque survol.
Néanmoins, il peut arriver que ce patch ne fonctionne pas... ne vous inquiétez pas. IE6 n'est pas réglé sur "a chaque visite" par défaut. Aussi les seuls utilisateurs ie6 (en majorité néophites en webmastering) n'auront pas modifié cette option. Et pour les autres, comme vous, ils utilisent déjà tous Firefox non ?
10# Le bug de la lightbox avec IE7
Vous avez installé une lightbox et vous ne comprenez pas pourquoi elle fonctionne parfaitement sous FF, sous ie6 et pas sous ie7 ?
Vous avez trouvé la réponse : si comme moi, vous avez copié-collé la ligne de code proposée (dans le html du dossier de download officiel) pour lier le css de la lightbox à votre page html, vérifiez votre balise link et regardez où se trouve rel="stylesheet". Si elle se trouve avant l'attribut href : déplacez-là juste après ainsi: href="lightbox.css" rel="stylesheet"
Et voilà, les bugs d'affichage de la lightbox s'envolent comme par magie. 11# Le bug du survol d'un lien contenant quelquechose ( a:hover quelquechose)
Vous avez utilisé le comportement hover sur un lien pour faire apparaître un texte inclus dans ce lien ? avec par exemple un a:hover span, ou a:hover p ... mais celui-ci n'apparaît pas ? Voici un petit bout de code à ajouter qui va solutionner votre problème :
a:hover{
background:none;
}
------------------------------------------------------------------------------------------------- Laissez-moi un commentaire ou cliquez sur une bannière pub pour m'encourager si cet article vous a aidé où si vous avez besoin d'aide pour un bug non-repertorié !
Bien choisir votre nom de domaine va être capital pour le référencement de votre site web.
Pour que les moteurs de recherchent vous indexent au mieux, vous avez
tout intérêt à choisir un nom de domaine qui contient déjà le thème de
votre site.
Exemples :
wapoon.fr :
Ce nom de domaine designe le site web de la société wapoon.fr . Les
moteurs de recherche vont bien l'indexer pour le mot wapoon. Mais les
internautes devront entrer le mot wapoon pour le trouver
wapoon-software.fr : Avec ce nom, le site sera egalement indexé avec le terme "software", peut-être plus parlant que le nom de marque.
Actuellement,
il existe une mode qui consiste à indiquer une phrase en nom de domaine
plutôt qu'un nom à proprement parler, par exemple :
www.jaime-le-cassoulet.com pourrait être le site d'un commerçant de cassoulet en conserve.
Sur le site d'Overture vous trouverez un petit outil bien pratique
qui vous de voir quelles sont les associations de mots clés faites avec
un mot donné. A consommer sans modération si vous êtes en mal
d'inspiration.
2# Vérifier que la marque n'a pas déjà été déposée
Pour vous éviter des ennuis juridiques, mieux vaut choisir un nom de domaine qui ne reprend pas le nom d'une marque.
Pour savoir si une marque a déjà été déposée, allez sur le site icimarques.com, et cliquez sur l'entrée "Marque". Faites une recherche avec le mot exact, et avec des mots proches.
Cette
recherche de marque déposée ne se fera que pour les marques déposées en
France. Autre précaution donc, faites une recherche sur Google afin
d'être certain que ce nom n'est pas utiliser dans un autre pays.
3# Déposer sa marque auprès de l'Inpi (facultatif)
Bien
que le dépôt d'un nom de domaine constitue déjà une protection, nous
pouvons aussi penser que votre site risque de prendre de l'importance.
Il peut être donc judicieux de le protéger en déposant aussi la marque.
Cela n'est pas hors de prix par rapport à la protection procurée.
comptez 225 Euro pour 10 ans. Cela est assez simple, il vous suffit d'aller sur le site INPI.fr, et de télécharger le formulaire au format "pdf" que vous devrez
remplir.
Il peut être utile, avant de déposer une marque, de demander à l'Inpi,
de procéder à "Une recherche à l'identique". L'inpi fera alors une
recherche dans toutes les marques déposées afin de vérifier si une
marque s'approchant de la votre n'a pas été déjà déposée, et pour les
mêmes classes.
4# Un nom de domaine en com, fr, org, ou net ?:
.com : pour les sites commerciaux .net : pour les pages concernant le web .org : pour les organisations .info : pour les sites informatifs .eu : pour les sites européens .fr/ .ch/ .es/ .be :
ce sont les domaines réservés pour les résidents d'un pays (cela varie
selon la loi des pays). En France, les .fr sont libres et désormais les
particuliers peuvent les réserver .asso.fr : pour les associations françaises déclarées auprès du tribunal d'instance
Le
choix de l'extension du nom de domaine semble insignifiant, pourtant,
il a son intérêt. Tout d'abord, il est conseillé de choisir une
extension en rapport avec le thème du site. Mais si vous souhaitez
protéger votre nom de domaine, il vaut mieux prendre un maximum de
noms. Mon conseil serait de prendre au minimum le .com et le .pays,
comme ça les internautes distraits qui se souviennent uniquement du nom
pourront arriver chez vous même en se trompant d'extension.
5# Où réserver son nom de domaine et à quel prix?
Il existe une multitude de fournisseurs de noms de domaines.
Le plus connu : gandi.net: tous les domaines à 15€ /an.
Une
fois que vous avez choisi votre fournisseur, faites une recherche sur
leur site web pour vérifier que votre nom de domaine est disponible.
Vous pouvez tenter plusieurs orthographes, par exemple :
wapoon-software(tiret 6), wapoon_software(tiret 8), softwarewapoon
(sans espace)... etc.
A
cette question, la plupart répondront selon leur coup de coeur
personnel, parmi les plus célèbres : Firefox ou Internet Explorer. Nous
allons vous aider à mieux comprendre les navigateurs pour que vous
n'ayez plus à vous poser la question.
1 # Les navigateurs - Tous différents mais pas tous égaux
Vous avez certainement déjà entendu parler de :
Internet Explorer, Mozilla Firefox, Opéra, Netscape, AOL Explorer, Safari ou encore Konqueror...
Ce sont tous des navigateurs web utilisés actuellement par les internautes. Wikipédia en recense 43.
Quand
vous mettez en ligne un site sur le net, il est possible que votre
visiteur utilise un de ces navigateurs, et malheureusement chaque
navigateur risque d'afficher votre site de façon différente.
Heureusement pour nous, il existe quelques méthodes pour éviter d'avoir à tester un site web sur tous les navigateurs existants.
2# Comment préparer un site web pour qu'il soit bien vu par tous les navigateurs ?
Pour qu'un site s'affiche correctement dans les navigateurs, voici quelques règles à observer3C, :
- respecter les standards de la W3C
: qui comme leur nom l'indique, permettent un affichage standard. Plus
votre code sera propre, léger et respectueux des normes W3C, plus votre
site sera affiché correctement sur un grand nombre de navigateur.
- séparer le contenu de la mise en forme :
je ne saurais que trop vous déconseiller le découpage d'image sous
forme de tableaux, car, ce sont les mises en pages les plus compliquées
à adapter aux différents navigateurs, et vous vous ferez des cheveux
blancs avant d'obtenir le résultat escompté. Privilégiés une mise en
forme séparée à l'aide d'une feuille CSS.
- utiliser les polices standard : Oubliez
les polices fantaisistes pour vos sites web, car si la police n'est pas
présente sur l'ordinateur de votre visiteur, il verra par défaut le
texte en "Times New Roman" et l'effet sera des moins esthétiques.
Priviligiez donc les polices suivantes, et aucune autre : Arial, Verdana, Geneva, Times, Trebuchet, Georgia, Helvetica et Courrier. Et proposez une police de substitution dans vos styles CSS.
- privilégier un contenu redimensionnable
Malheureusement,
et malgré toutes vos précautions, il se peut que des petites erreurs
que même un validateur ne trouvera pas échappent à votre oeil avisé.
C'est pourquoi vous allez devoir tester votre site sur les navigateurs
les plus utilisés.
3# Les navigateurs les plus utilisés
Vous
trouverez sur Internet des informations régulièrement mises à jour sur
les statistiques des navigateurs utilisés par les internautes. Vous
pouvez également voir dans les statistiques de fréquentation de votre
site web quels sont les navigateurs utilisés par Vos visiteurs.
Qu'elle que soit votre source, il va falloir tester votre site web sur les navigateurs les plus utilisés. En général, le minimum est que votre site fonctionne pour les versions les plus récente d'IE et firefox.
Une page web est généralement un document HTML. HTML est l'accronyme de HyperText Mark-up Language.
C'est un language de programmation. Lorsque vous visitez un site web,
vous voyez le document Html tel que le navigateur l'affiche après avoir
traduit le code de la page. Si vous décidez de créer votre site web,
vous allez donc devoir apprendre ce language pour discuter avec les
navigateurs et leur donner les instructions d'affichage, de contenu ...
etc.
Pour voir le code source d'une page, il faut demander à votre navigateur d'afficher le code source en faisant clic-droit puis "afficher la source" ou "code source". Nous allons ici vous donner quelques bases pour comprendre la syntaxe d'un document web.
1# Le langage HTML : des balises et des attributs.
Le code d'un document HTML est composé de balises. On appelle balise un mot entouré par < et >. Par exemple, la balise pour créer un tableau est : .
Une balise doit toujours être fermée. Elle aura soit une balise mirroir fermante , soit elle sera auto-fermante : . La balise par exemple doit être fermée par son mirroir : . La balise d'image par contre elle est auto-fermante. Elle s'écrit ainsi : . Note :
Si vous oubliez de fermer une balise, il se peut que le navigateur
l'affiche tout de même, mais cela risque de vous poser des problèmes
dans certains navigateurs.
Une balise va pouvoir contenir des attributs,
c'est à dire des informations complémentaires qui vont permettre
d'apporter des détails. La syntaxe d'un attribut est :
attribut="valeur". Une seule balise peut contenir plusieurs attributs
qui seront séparés par des espaces.
Par exemple, si nous souhaitons intégrer une image, nous allons utiliser la balise et ses attributs de hauteur, de largeur, de localisation de l'image ...etc . Ce qui nous donnera le code suivant :
Une page HTML a une syntaxe propre qu'il faut respecter. Elle commence
toujours par la déclaration du doctype, puis la balise qui démarre le document html et son mirroirqui terminera le document. A l'intérieur de la balise , on trouve un en-tête encadré par les balises et d'un corps de page entouré par la balise .
3# L'en-tête d'un document HTML
L'en-tête est invisible sur la page web, et comporte :
- des informations destinées au serveur pour l'affichage de la page dans le navigateur (doctype, title, l'encodage de la langue) - des informations destinées aux moteurs de recherche - des scripts - des localisation de documents externes - ...etc
4# Le corps d'un document HTML
Le
corps d'une page web contient le contenu de la page web telle qu'elle
s'affichera sur le site. Nous allons vous présenter quelques unes des
balises les plus fréquentes que vous y rencontrerez :- des paragraphes de textes :
- des images - des tableaux - des formulaires - des objets multimédias - des calques - des sous-parties
- ...etc
® Esprit Créatif 2007 - Tous droits de reproduction réservés
Ce site web vous permet de transformer tous vos fichiers multimédia (audio, video...) dans le format de votre choix.
Dans la langue de Molière, il vous propose de parcourir votre disque dur pour choisir le fichier à convertir puis de choisir le format de conversion. Une fois le fichier converti, vous pourrez le télécharger.
Un jeu d'enfant, et vous n'avez plus besoin d'installer de logiciel supplémentaires, puisque média-convert prend en compte tous les formats de fichiers.
Vous avez décidé d'utiliser l'un des lecteurs mp3 de mon billet précédent ?
Pour cela il va vous falloir convertir votre fichier audio au format MP3, il suffit d'utiliser un logiciel de conversion tel que l'un des suivants :
# 1 - Gratuitciel - Free MP3 to WMA Converter
Ce logiciel est très facile d'utilisation, il suffit de cliquer sur le petit dossier (entouré en rouge sur l'image) pour parcourir votre disque dur et choisir les fichiers à convertir. Puis, cliquer sur convertir.
Ce convertisseur est plus élaboré que le premier, il vous permettra de jongler avec plus de format de fichiers audios. Cependant, il est en partagiciel, c'est à dire que vous ne pourrez l'utiliser que 30j à l'essai.
Au final, il coûte 28$ par an, mais pour tous ceux qui ont besoin de pouvoir convertir leurs fichiers audios régulièrement, c'est un prix plus que raisonnable.
###Disclaimer Loi DADVSI : Vous n'êtes autorisés à convertir que les fichiers audios que vous vous êtes procuré légalement.
Pour intégrer du son dans une page web, il existe de nombreuses possibilités. Néanmoins, mon choix est très souvent d'utiliser un flashplayer. Ils sont en général plus design, plus ergonomiques, et bénéficient du fait que le plugin Flash est présent sur 90% des ordinateurs.
Je vais vous présenter ici de mes deux lecteur mp3 préférés, tous les deux disponibles en licence Creative Commons. # Niveau 1 - Dew player - Un flash player poids plûme
Très largement utilisé par la communauté, le DewPlayer est un petit lecteur en flash, discret, ultra-léger et au designn sobre mais actuel. Il est d'une simplicité enfantine à utiliser, et conserve malgré tout un aspect très professionnel. Il n'est pas autorisé de le modifier d'après sa licence, mais il est possible d'augmenter le volume global ou de changer la couleur de fond pour l'adapter à votre design.
Vous pouvez télécharger le Dewplayer sur le blog de son auteur Dew.
Pour ceux qui aiment la diversité, Alsacréations propose plusieurs déclinaison du Dew Player.
Et pour les fainéants, Saute-Mouton met à votre disposition un DewPlayer Coder, un formulaire à remplir en ligne qui permet de générer le code du player en indiquant l'adresse URL du mp3 et du DewPlayer sur votre site.
# Niveau 2 - Jeroen Wijering - Un jukebox en flash
Jeroen Wijering est un designer freelance néerlandais qui nous propose un véritable petit bijou. Bien qu'il soit plus compliqué à paramêtrer, ce lecteur vous permet de gérer une playlist, d'y associer des images, et même de gérer complètement le design, à l'aide des flashvars, paramètres créés par l'auteur pour vous faciliter la tâche.
Pour installer le multiplayer de Jeroen, vous devez utiliser le code inclus dans le fichier mp3player.html, puis vous devez créer votre playlist dans le fichier playlist.xml. Un petit copié collé du tout sur votre site web et le tour est joué.
Et pour ceux qui n'ont pas peur de remonter leurs manches, le fichier .fla est disponible et vous permet de modifier le contenu, le design, etc... tant que vous respectez la licence Creative Commons et que vous mettez à votre tour votre multiplayer modifié à disposition.
Esprit Créatif est une entreprise de créations graphiques à Strasbourg. Soutenue par le Conseil Régional d'Alsace,elle propose des sites internet sur mesure destinés aux professionnels comme aux particuliers. Elle s'est spécialisée dans le webmastering 2.0 en s'adaptant aux standards W3C, aux normes WAI et à l'utilisation de CSS.
Vous trouverez ici des conseils pratiques, des techniques abordables par le plus grand public, pour aider les webmasters amateurs à concevoir et améliorer leurs sites webs grâce à des éléments accessibles à un niveau simple, dans le respect des normes W3C.
Vous pouvez retrouver notre site commercial à l'adresse suivante : esprit-creatif.fr
Esprit Créatif est une entreprise de créations graphiques à Strasbourg. Soutenue par le Conseil Régional d'Alsace,elle propose des sites internet sur mesure destinés aux professionnels comme aux particuliers. Elle s'est spécialisée dans le webmastering 2.0 en s'adaptant aux standards W3C, aux normes WAI et à l'utilisation de CSS.
