Un blog qui parle de webdesign, graphisme, méthodologie ...
ARTICLES TROUVES
Article(s) de septembre 2007 :
La mise en forme d’une page web, autrefois réalisée à l’aide des tableaux, dispose aujourd’hui, grâce aux CSS, d’outils tel que le flottement et le positionnement. Nous ne parlerons pas du flottement dans cet article mais uniquement du positionnement et plus particulièrement du positionnement de type absolu et relatif.
Le positionnement, quelques rappels
Le positionnement est une notion assez simple qui permet d’indiquer précisément où des boîtes d’éléments apparaitront par rapport à leur bloc conteneur qui peut être l’élément racine (élément html), un élément parent ou un autre élément.
Le bloc conteneur
Dans le cas d’un élément flottant le bloc conteneur est l’élément parent de type bloc le plus proche. Avec le positionnement la notion de conteneur est un peu plus complexe.
– Le bloc conteneur racine est dans la plupart des navigateurs matérialisé par un rectangle de la taille de la zone d’affichage. En HTML, l’élément racine est l’élément « html ».
– Pour les éléments non-racine positionnés de façon « relative » ou « static », le bloc conteneur est matérialisé par le bord du contenu de la boîte parent de type bloc ou en ligne, de table ou cellule, la plus proche.
– Pour les éléments non-racine positionnés de façon « absolu », le bloc conteneur est matérialisé par le parent le plus proche (de toute sorte) dont la propriété position a une valeur autre que « static » de la façon suivante :
* Si le parent est de type bloc, le bloc conteneur est matérialisé par le bord de l’espacement de cet élément, il s’agit donc de la zone délimitée par une bordure.
* Si le parent est de type en-ligne, le bloc conteneur est matérialisé par le bord du contenu du parent.
* Si il n’y a pas de parent, le bloc conteneur de l’élément est le bloc conteneur racine.
Il est a noter que les éléments peuvent être positionnés hors de leur bloc conteneur en utilisant des valeurs négatives.
Propriétés de décalage
Le positionnement utilise la propriété position qui peut prendre les valeurs : « static » (valeur par défaut), « relative », « absolute », « fixed » et « inherit ». Les positionnements de type « relative », « absolute » et « fixed » utilisent les propriétés « top », « right », « bottom » et « left » pour décrire le décalage des côtés d’un élément positionné par rapport à son bloc conteneur.
Ces propriétés décrivent le décalage à partir du bord le plus proche du bloc conteneur. Par exemple, top indique à quelle distance le bord de la marge haute de l’élément positionné doit être placé depuis le bord supérieur de son bloc conteneur.
Les valeurs assignées à ces propriétés peuvent être positives ou négatives.
Notez que les valeurs positives provoquent un décalage vers l’intérieur, déplaçant les bords vers le centre du bloc conteneur, et que les valeurs négatives provoquent un décalage vers l’extérieur.
Il faut également comprendre que ces propriétés définissent le décalage depuis le côté analogue du bloc conteneur et non depuis son coin supérieur gauche.
Par exemple, « left » définit un décalage par rapport au côté gauche.
Sur le schéma ci-joint, le bord externe gauche de l’élément positionné est placé à 90 px du bord gauche du bloc conteneur.
Largeur et hauteur
Les propriétés « width » et « height » permettent de fixer respectivement la largeur et la hauteur d’un élément positionné. Si il est important parfois de fixer ces propriétés, on s’aperçoit que ce n’est pas toujours nécessaire. En effet le placement des quatre côtés d’un élément à l’aide de « top », « right », « bottom », « left » peuvent fixer implicitement largeur et hauteur par les décalages qu’ils induisent.
Si par nécessité il faut limiter la largeur et la hauteur d’un élément, CSS2 met à disposition les propriétés « min-width » et « min-height » qui donne une dimension minimum à la zone de contenu d’un élément, et les propriétés « max-width » et « max-height » qui, vous l’aurez deviné, donne une dimension maximum à la zone de contenu d’un élément.
Débordement
Si le contenu d’un élément est trop important pour la taille de ce dernier, il risque de déborder de l’élément lui-même. Cette situation peut être contrôlé à l’aide de la propriété « overflow » dont les valeurs possibles sont visibles (par defaut), « hidden », « scroll », « auto », « inherit ».
– La valeur visible signifie que le contenu de l’élément reste visible hors de la boîte d’élément.
– La valeur « scroll » signifie que le contenu est rogné sur les côtés de la boîte d’élément mais on laisse à l’utilisateur la possibilité de lire le contenu supplémentaire à l’aide de « scroll » par exemple.
– La valeur « hidden » signifie que le contenu est rogné sur les côtés de la boîte d’élément mais le contenu supplémentaire est caché à l’utilisateur.
– La valeur auto signifie que c’est au navigateur de déterminer le comportement à employer.
Visibilité
La propriété visibility contrôle la visibilité d’un élément. Les valeurs possibles sont visible (par defaut), hidden, collapse, inherit.
– La valeur visible signifie que l’élément est visible.
– La valeur « hidden » signifie que le contenu est rendu invisible mais l’élément affecte toujours la mise en page du document comme si il était visible. Notez la différence avec « display:none » où l’élément disparaît complètement y compris du document si bien qu’il n’a plus aucun effet sur la mise en page.
– La valeur « collapse » est employé dans l’affichage des tables CSS.
Placement sur l’axe z
Lorsque plusieurs éléments positionnés se chevauchent ou veulent coexister au même endroit, il se peut qu’un élément soit caché par un autre de superficie supérieure.
L’ordre d’empilement naturel des éléments est déterminé par la position de l’élément dans le flux. Le dernier élément affiché dans le flux se trouvera au dessus des autres.
Cet ordre peut être contrôlé par la propriété « z-index », en effet, un élément dont la valeur numérique de « z-index » est élevée se trouve en avant par rapport à un élément dont la valeur de « z-index » est faible. L’élément dont la valeur est la plus élevée se trouve donc au dessus des autres éléments.
Positionnement absolu
Un élément positionné de manière « absolue » est retiré du flux puis positionné par rapport à son bloc conteneur. L’élément positionné de façon absolue peut chevaucher d’autres éléments ou être chevauché.
Le bloc conteneur d’un élément positionné de manière absolue est l’élément parent le plus proche dont la valeur de position est différente de « static ». Il est courant de choisir un élément qui servira de bloc conteneur à un élément positionné de manière absolue en lui assignant une position relative sans préciser de décalage. Si il n’y a pas de parent dont la valeur de position est différente de « static », le bloc conteneur de l’élément positionné de manière absolue est le bloc conteneur racine.
Exemple :
<html>
<head>
<style type="text/css">
.main {
margin:100px 0 0 100px;
border:1px solid #d0d0d0;
width:30%;
}
.conteneur {
position:relative;
background:#ff5555;
}
b {
position:absolute;
background:#fff888;
top:50px;
left:50px;
}
</style>
</head>
<body>
<div class="main">
<p>
Ce paragraphe ne joue pas le rôle de conteneur à l'élément
<br />
<b>en gras</b> positionné de manière absolue.
</p>
<p class="conteneur">
Ce bloc établit un conteneur pour l'élément
<br />
<b>en gras très gras</b> positionné de manière absolue.
</p>
</div>
</body>
</html>
Si vous souhaitez contrôler le bloc conteneur initial plutôt que de laisser le navigateur s’en charger, il suffit d’assigner par exemple au body de votre document une position relative :
body {position:relative;}
Il est important de comprendre aussi que lorsqu’un élément est positionné de manière absolue, il définit un bloc conteneur pour ses éléments enfants.
Positionnement relatif
Dans le cas d’un positionnement relatif, l’élément reste dans le flux. Le décalage s’opère de la même manière que pour le positionnement absolu mais l’élément laisse un espace blanc à l’endroit où il aurait dû se trouver dans le flux normal de la page. Un élément positionné de manière relative établit un nouveau bloc conteneur pour ses enfants à l’endroit où l’élément a été positionné.
Je rappel que pour les éléments non-racine positionnés de façons relative, le bloc conteneur est matérialisé par le bord du contenu de la boîte parent de type bloc ou en ligne, de table ou cellule, la plus proche.
Reprenons notre exemple mais en positionnant l’élément <b> de manière relative.
<html>
<head>
<style type="text/css">
.main {
margin:100px 0 0 100px;
border:1px solid #d0d0d0;
width:30%;
z-index:0;
}
.conteneur {
position:relative;
background:#ff5555;
z-index:1;
}
b {
position:relative;
background:#fff888;
top:50px;
left:50px;
z-index:2;
}
</style>
</head>
<body>
<div class="main">
<p>
Ce paragraphe joue le rôle de conteneur à l'élément
<br />
<b>en gras</b> positionné de manière relative.
</p>
<p class="conteneur">
Ce bloc établit un conteneur pour l'élément
<br />
<b>en gras très gras</b> positionné de manière relative.
</p>
</div>
</body>
</html>
On observe sur la copie d’écran les espaces vides laissés par les éléments <b> positionnés de manière relative. Nous avons rajouté des « z-index » pour que tous les blocs soient visibles et que les plus grand ne masquent pas les plus petits.
Ici les deux bloc parents <p> jouent un rôle de conteneur pour l’élément <b>.
Conclusion
La mise en page par flottement est plus populaire auprès des designer et intégrateurs web que la mise en page par positionnement. Cela est probablement dû au fait que la mise en page par flottement est plus simple à appréhender que celle par positionnement.
Cependant, l’utilisation des blocs flottant pose parfois problème, ce système étant très sensible aux dépassements de longueur, et de largeur. L’utilisation du positionnement absolu et relatif peut être une solution alternative beaucoup plus robuste si elle est utilisée avec habilité. Je pense que cette technique vaut la peine qu’on y accorde quelques gouttes de sueurs.
Une dernière remarque : pour que le positionnement ne pose pas de problème lors d’un changement de résolution de l’écran, il est conseillé de d’attribuer des valeurs en % ou en « em » aux propriétés « width » et « height ».
Mes sources
Ouvrage :
L’essentiel de cet article a été rédigé à partir du livre « CSS, La référence » écrit par Eric A. Meyer, traduit par Hervé Soulard aux éditions O’Reilly.
Si vous êtes web designer, vous êtes concerné par la cession de droit d’auteur. En effet, la création d’un design web est considéré comme une œuvre de l’esprit (le votre) à partir du moment où il s’agit d’une création originale qui est matérialisée et dont vous êtes l’auteur. Cette activité vous classe dans la catégorie des artistes auteur et à ce titre une partie de vos revenus proviennent de la négociation de la cession de votre œuvre. Cet aspect important du statut d’artiste auteur est souvent négligé par les webdesigner qui oublient que leur activité est en grande partie artistique.
Pour un artiste, les droits d’auteur ont une influence directe sur ses rémunérations, l’exploitation et la protection de ses œuvres. Il ne faut surtout pas les négliger sous peine de mettre en péril la pérennité de la profession d’artiste quelque soit sa forme.
Donc en tant qu’artiste-auteur, webdesigner, il est important de maitriser les notions juridiques autour du « droit d’auteur ».
Le droit d’auteur c’est quoi exactement ?
Le droit d’auteur recouvre :
– Un droit de propriété sur l’œuvre, du seul fait de sa création.
– Les rémunérations reçues par l’auteur.
Je rappelle que le droit d’auteur est définie par le Code de la propriété intellectuelle (art. L. 121 et suivant du Code de la propriété intellectuelle).
Les oeuvres graphiques sont considérés comme œuvre de l’esprit (Art L. 112 – 1 et L. 112 – 2)
Pour tirer profit d’une création, il faut donc négocier ses droits d’auteur.
La propriété intellectuelle recouvre deux types de droit :
– Le droit moral, incessible.
– Les droits patrimoniaux qui permettent l’exploitation de l’oeuvre.
Un diffuseur ou cessionnaire désigne toute personne morale ou physique faisant l’acquisition de nos oeuvres. Nous cédons donc nos droits d’auteur à des clients appelés « diffuseur ».
Le droit moral
Un auteur conserve indéfiniment sur son œuvre un droit moral qui lui donne droit au respect :
– De son nom.
– De sa qualité.
– De son œuvre.
Le droit moral est attaché à la personne de l’auteur.
– Il est inaliénable : il n’est donc pas cessible (l’auteur ne peut pas le vendre). En revanche, il est transmissible à sa mort aux héritiers ou à des exécuteurs testamentaires..
– Il est perpétuel.
– Il est imprescriptible.
Cela signifie qu’un client à qui vous avez vendu un logo ou un design web par exemple peut l’utiliser dans les conditions que vous aurez fixées avec lui mais en aucun cas ne peut vous retirer la paternité de votre production, la dégrader, la modifier sans votre accord ou la réutiliser dans des conditions qui n’ont pas été définie avec vous.
Le droit moral se subdivise en 4 autres droits :
Le droit de divulgation
L’auteur seul décide la façons dont son œuvre sera divulgué au public. Exposition, nombre de reproduction, droit de se rétracter sur une commande (prévoir indemnisation en contre partie). Les œuvres refusées par leur commanditaire, sauf mention contraire, restent propriété de l’auteur.
Le droit à la paternité
Toute reproduction de l’œuvre doit garantir l’apposition du nom de l’auteur. (Sauf anonymat ou pseudonyme)
Le droit au respect de l’œuvre
Maintient de son intégrité, de son esprit. L’utilisation d’une œuvre, même libre de droits, ne doit pas la dénigrer.
Le droit de repentir ou de retrait
Même après exploitation public, l’auteur peut décider de retirer son œuvre du marché. (prévoir indemnisation en contre partie)
Les droits patrimoniaux
Se sont les droits liés à l’exploitation de l’œuvre (on parle donc aussi de droits d’exploitation). Ce sont de ces droits que vous allez retirer votre rémunération car ces droits sont cessibles.
On en distingue trois :
Le droit de reproduction
Il s’agit des droits liés à l’autorisation de la copie de l’œuvre sur un support et les modalités de cette copie. Ces droits définissent donc les formes sous lesquelles l’auteur autorise la reproduction de son œuvre. (imprimerie, dessin, gravure, photographie, enregistrement mécaniques, enregistrement cinématographique, enregistrement magnétique …)
La rémunération se fait soit :
– Au pourcentage de vente.
– Au forfait si le pourcentage est difficile à évaluer. (cas le plus fréquent pour les webdesigner)
L’auteur a le droit de vendre son œuvre en tant qu’œuvres originales si celles ci sont numérotées , signées et ne dépassent pas 8 exemplaires. 4 exemplaires hors commerce peuvent être réservés à l’auteur. Au delà de ces 12 exemplaires, on parle de reproduction et l’auteur ne bénéficie plus de ces avantages d’auteur sur ces produits. (ce cas concerne d’avantage des activités comme la photographie)
Le droit de représentation
Ce droit concerne la façon dont l’œuvre sera communiquée directement au public. Il s’agit donc de droits liés à la diffusion de l’œuvre (présentation public, projection public, télédiffusion public …)
Contrairement aux droits de reproduction, on ne donne pas au diffuseur, dans le droit de diffusion, la maitrise du support sur lequel l’œuvre pourrait être reproduite.
Ainsi sur Internet, le fait de visualiser une page est une représentation, le fait de l’enregistrer sur son disque dur est une reproduction.
Ce droit peut être négocié séparément du droit de reproduction.
Attention, la durée et l’étendue géographique de ces droits doivent être précisés par l’auteur.
Le droit de suite
Si une oeuvre change plusieurs fois de propriétaire, l’auteur a droit à 3% du montant de chaque transaction. Un seuil minimal de 3000 euros est fixé par une directive Européenne sur les transactions pour que s’applique le droit de suite.
Autres droits cessibles
D’autres droits patrimoniaux annexes peuvent être vendues au diffuseur tels que le droit de traduction, le droit d’adaptation et le droit de destination.
Cas concret d’un webdesigner
Mieux vaut prévenir que guérir
Il faut toujours, dès la phase d’établissement du devis, informer le client des conditions générales de vente qui sont les vôtres. Le devis et les conditions générales de ventes doivent être soumis ensemble au client, signés et approuvés par lui avant démarrage du projet. C’est une garantie de bonne collaboration entre les deux parties.
La facturation
Lorsqu’il y a cession de droits on parle d’une « note de cession de droits d’auteur » plutôt que de facture. Vous pouvez utilisez les deux termes dans votre document car bien souvent le mot « facture » est plus parlant pour le client.
Supposons que vous réalisiez un design web original. Comment allez vous facturer votre prestation ?
Généralement, si votre devis a été réalisé avec soin, la facturation ne fait que reprendre son contenu.
Votre facture doit être claire et détaillée pour offrir un maximum de lisibilité à votre client. Pour éviter toute ambigüité, vous pouvez détailler votre facture par catégorie de la façons suivante :
– Les frais.
Déplacements, achat de matériaux …
– Les honoraires de création.
C’est la rémunération de la prestation.
– La cession de l’œuvre.
Vente de l’œuvre sous sa forme matérielle.
– La cession des droits patrimoniaux.
Droits de reproduction, de représentation, de suite, droits annexes (adaptation, traduction …)
Il se peut que le client demande le droit de modifier vos sources. La loi vous autorise de refuser, cependant il faut savoir faire preuve de souplesse. Vous pouvez autoriser le client à adapter vos sources mais en lui imposant dans vos conditions générales de vente de vous consulter pour chaque modification réalisée afin de contrôler que votre oeuvre ne sera pas dénaturée.
Sur le site galerie-photo vous trouverez un exemple concret de cession de droits d’auteur appliqué à la vente d’un CD audio mais que chacun pourra adapter à son propre cas.
Pour exprimer votre cession de droits d’auteur, il faut utiliser un langage simple et précis. Voici une recommandation de Laurent Demontiers (Directeur artistique) extrait d’une discussion du forum 1Dcafé :
Les notes de cessions de droits sont des contrats, rien ne t’oblige à utiliser des termes juridiques que tu n’es pas sûr de maitriser. Ce qui est important, c’est d’exprimer clairement et précisément la nature et l’étendue de la cession.
Concrètement, si tu mets dans ta cession de droits que tu cèdes à ton client « ton droit d’exploitation », compte tenu de la diversité des droits induits par le Droit d’exploitation (ou patrimonial), finalement, tu ne précises pas grand-chose, et ta note de cession de droits n’a pas grande valeur parce qu’elle donne lieu à de nombreuses possibilités d’interprétations.
Le rôle d’un contrat comme d’une cession de Droits, c’est justement de préciser la nature, l’étendue et la durée d’une cession. Il doit le faire clairement. L’expression de la cession ne doit pas être source de quiproquos ou prêter à interprétation.
Exprime tes cessions clairement, sans expressions techniques de droit. Il faut éviter les imprécisions et les formulations qui autorisent les interprétations.
Conclusion
Nous avons la chance d’avoir en France une législation qui protège le droit d’auteur. Ce n’est pas le cas de tous les pays du monde. Il s’avère pourtant que de nombreuses personnes ignorent ou passent outre ce droit au détriment des artistes dont c’est la principale source de revenus.
C’est donc aux artistes de défendre ces droits en éduquant leurs clients et en les incitant à signer des conditions générales de vente qui stipulent distinctement la cession des droits d’auteur répercutés au niveau du devis et de la facturation.
Mes sources
Web :
– Wikipédia : Droit d’auteur
– Forum 1Dcafé
Ouvrages :
- Guide du graphiste indépendant – Christelle Capo-Chichi – Edition Pyramid