La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

En respectant les « lois » du copyright et de la « Netiquette »…

Présentations similaires


Présentation au sujet: "En respectant les « lois » du copyright et de la « Netiquette »…"— Transcription de la présentation:

1 En respectant les « lois » du copyright et de la « Netiquette »…
Création de pages Web Aspects juridiques, FAQ, Editeurs HTML, Ergonomie Objectifs: valoriser le rendu du TD de microbiologie en publiant les pages sur Internet. Et par extension, être capable de créer et de publier ces pages sur le web (CV, projet professionnel…) En respectant les « lois » du copyright et de la « Netiquette »…

2 Création de pages Web Aspects juridiques, FAQ, Editeurs HTML, Ergonomie
Aspects juridiques, copyright, sources A chaque source son format (textes, images) La Netiquette: Les fichiers, l’arborescence, la compatibilité, les images, les frames Les langages Les éditeurs HTML: soft-, share-, freewares Le Java Script

3 La pêche aux infos et cyberespace
Il est simple de copier les textes et documents sur un site pour les mettre sur le sien… Mais vous risquez de violer le copyright en vous appropriant des objets dont vous ne disposez pas des droits et vous exposer ainsi aux foudres juridiques. Surtout dans le cas d’un site commercial Selon l'origine géographique des fichiers, ils seront protégés ou non par le régime du copyright (anglo-saxon) ou par le droit d'auteur (français). Dans quelle mesure peut-on réutiliser des sources ? Les deux régimes accordent une protection sur les "œuvres de l'esprit" plus de cinquante ans après la mort de leur auteur ! D'autre part, sauf accord écrit contraire, toute utilisation non autorisée de l'œuvre est par nature prohibée (et passible de poursuites pénales en France, ce qui s'est déjà vu, surtout en matière musicale).

4 La pêche aux infos et cyberespace
En règle générale, la réglementation internationale sur les droits de reproduction protége le texte, les graphiques, l'animation et les autres propriétés intellectuelles qui sont publiées sur Internet. Vous ne pouvez pas utiliser le travail d'une tierce personne sans avoir d'abord obtenu l'autorisation de le faire du propriétaire des droits de publication (Auteur ou éditeur). Il peut s'avérer difficile de déterminer qui détient ces droits, aussi cherchez s'il y a une liste d'accréditations sur le site. Sinon, envoyez un courrier électronique à l'administrateur Web (Webmaster). Pour vous protéger, veillez à obtenir les droits en écriture. L'agence Copyright Licensing Agency (http://www.benedict.com/) rassemble le résumé des points les plus souvent soulevés. Pour les informations légales relatives aux droits de reproduction et à d'autres questions liées à Internet, consultez le site Web Cyberspace Law (http://www.cyberspace-law.com/).

5 Publication = Responsabilité…
La mise en ligne, de vos présentations sur le site de l’Ecole (http://www.esitpa.org) ou du Laboratoire BioSol (http://www.esitpa.org/biosol), engage votre responsabilité et celle de l’Ecole. Vous êtes et nous sommes susceptibles d’être poursuivit pour tout texte ou illustration non référencé ou autorisé. La démarche est différente suivant la source et son utilisation…

6 A chaque source son format…
 Textes ou morceaux de texte issus d’un site Internet : Vous devez demander au Webmaster du site l’autorisation d’utiliser les textes en question. Après chaque paragraphe, utilisez un numéro pour un renvoi en page bibliographique et citer le site directement après le texte. Pour un morceau de texte extrait de son contexte, utiliser la syntaxe suivante: (…) morceau de texte (…)

7 A chaque source son format…
 Texte ou morceau de texte issus d’une publication (périodique, magazine, livre): Après chaque paragraphe, utilisez un numéro pour un renvoi en page bibliographique et citer la source directement après le texte.

8 A chaque source son format…
 Synthèse ou inspiration d’un texte issus d’un site Internet : Utiliser un numéro pour renvoi en page bibliographique: Citer le site et la date de consultation.  Synthèse ou inspiration d’un texte issus d’une publication : Utiliser un numéro pour renvoi en page bibliographique: Citer la publication; auteurs, titre, année, pages, éditeurs...

9 A chaque source son format…
 Photos et illustrations issues d’un site Internet : Vous devez demander au Webmaster du site l’autorisation d’utiliser les illustrations en question. Ses coordonnées sont souvent sur la page d’accueil du site. Vous devrez faire apparaître les sources en les accolant à l’illustration (Par exemple : Crédit photographique pour une photo). Pour les illustrations dont vous ne connaissez pas la provenance, l’inscription « DR » (Droits Réservés) justifie que vous n’en êtes pas l’auteur.

10 A chaque source son format…
 Photos et illustrations issues d’une publication (Livre, magazine, périodique…) : Vous devez non seulement citer l’auteur de la photo ou du dessin mais également le titre de la publication ainsi que l’année. Pour les scans, n’oubliez pas d’utiliser la fonction « détramage » de votre scanner pour un bon résultat.

11 A chaque source son format…
Exemple de demande d’autorisation pour une illustration Monsieur, Etudiants en 4ème année à l’Esitpa – École d’Ingénieurs en Agriculture (http://www.esitpa.org) et dans le cadre d’un travail en microbiologie, nous sommes amené à faire une présentation Web sur le thème de …. . Votre illustration (la photographie sur la page intitulée … semble correspondre parfaitement au thème exposé et nous souhaiterions l’utiliser pour agrémenter nos pages. Nous vous demandons l’autorisation de l’utiliser dans notre présentation à but pédagogique, en vous demandant de bien vouloir nous préciser à qui attribuer les crédits photographiques. Les auteurs seront bien évidemment cités en référence sur la page et dans la partie bibliographique du site. Si ce site est publié, il le sera sur l’URL (en attendant sa publication, il est consultable sur l’URL …..) Nous restons à votre dispo… En vous remerciant par avance pour votre agrément, nous vous prions, Monsieur, de bien vouloir…

12 La Netiquette - Les fichiers
Quoi de plus énervant de voir un message d'erreur 404 sur son site et en prime de ne pas savoir qu'elle en est la cause ! Pour palier à ses problèmes, voici quelques conseils qui pourront vous être utiles dans les noms de vos fichiers et leur gestion (ces recommandations sont obligatoires pour la mise en ligne de votre site): Ne pas mettre de majuscule dans les noms des fichiers et des pages qui composent votre site. Ne pas utiliser d'accents ou de caractères spéciaux (ceux-ci ne passent pas toujours sur certains serveurs). Ne pas utiliser d'espace (utilisez de préférence le caractère _). Ne pas dépasser les 16 caractères (au-delà, il peut y avoir des problèmes). N'encombrez pas votre site avec des fichiers inutiles (qui ne sont pas liés à vos pages). Bien séparer la partie "Développement" de votre site de la partie "Opérante", celle qui sera publiée en ligne.

13 La Netiquette - L'arborescence
la bonne organisation des fichiers qui composent votre site est vitale La première chose à faire avant de se lancer, c'est de concevoir une arborescence de ce que sera votre site. Le plan du site Bien entendu, vous pourrez la modeler au fur et à mesure de l'évolution de celui-ci, mais les bases doivent être fondées avant tout, pour garantir une bonne productivité et gestion du site. Pour exemple: Les images principales du site, notamment celles utilisées dans toutes les pages devraient se trouver dans un répertoire images; les fonds dans un sous répertoire fonds, les bannières dans un sous répertoire bannières... Veuillez à utiliser des noms de fichiers explicites, du moins assez pour que vous puissiez vous y repérez sans effort. Essayez de faire en sorte qu'une personne étrangère puisse naviguer dans les dossiers de votre site et s'y repérer (presque) instantanément. Restez logique !

14 La Netiquette - La compatibilité
Certaines balise HTML, ou animations (DHTML), ne passent pas sur certains navigateurs. Par exemple, la balise <blink>, qui permet de rendre un texte clignotant, ne fonctionne que sur Netscape, alors que la balise <marquee>, qui permet de faire défiler un texte, ne fonctionne que sous Internet Explorer. Les scripts java : Les scripts java sont à utiliser avec une grande prudence ! Énormément ne sont compatibles qu’avec un seul navigateur. Certaines fonctions changent d'un navigateur à l'autre. L'explication vient tout simplement du fait que ces scripts sont exécutés par le navigateur, et non par le serveur. La résolution : Un autre aspect de la compatibilité concerne la résolution d'écran, le nombre de couleurs (256, 24bits, 32bits...). Les dégradés sur un 256 couleurs. Un écran en 800x600 affichant un site conçut pour du 1024x768… Méfiez vous des attributs width et height des tableaux principalement : Vous pouvez les exprimer en %. Déséquilibre. Vous pouvez les exprimer en pixels. La mise en page ne bouge pas. Vérifier les deux navigateurs et vérifier l’intégrité de votre site aux deux résolutions

15 La Netiquette – Les Images
Les graphiques, comme les GIF animés sont là pour égailler et animer vos pages. Il faut trouver un compromis entre graphiques et temps de chargement. JPEG ou GIF Avantages Inconvénients C'est l'un des formats qui prend le moins de place (possibilité de comprimer les images de façon importante). L'image est en 16 millions de couleurs (24 bits) quelque soit le format de compression. Bonne qualité / taille La compression altère les images, et surtout le texte qu'elles contiennent. Impossibilité de rendre une partie de l'image transparente. La compression n'altère pas l'image. Possibilité de faire des formes rondes (l'image peut être en partie transparente). Possibilité de créer une animation GIF (GIF animé). Plus l'image est grande et a de couleurs, plus la taille augmente significativement. Nombre de couleurs limité : 256 couleurs maximum (8 bits), la restitution des dégradés est donc mauvaise. JPEG est utilisé pour des photographies comme des portraits ou des paysages, avec beaucoup de couleurs et peu de texte (photos, dégradés...) GIF est utilisé pour des images comportant du texte et peu de couleurs. Il est aussi utilisé lorsque l'on veut rendre une partie d'une image transparente N'utilisez jamais des images brutes sur vos pages, comme les formats BMP ou TIFF.

16 La Netiquette – Les Images
L'optimisation d'une image consiste à réduire la taille de celle-ci tout en conservant sa qualité "visible", c'est à dire sans que l'on puisse distinguer une trop forte baisse de qualité. Il existe également des logiciels, tel JPEG Optimizer (http://www.xat.com) ou Advanced GIF Optimizer (http://www.gold-software.com). Ces programmes permettent de supprimer des informations inutiles dans le fichier, non visibles sur l'image ; ou encore permettent, de compresser qu'une partie de l'image, tout en gardant intacte une autre partie sensible, contenant du texte par exemple. Il existe également des sites tel GIFOptimizer (http://www.gifoptimizer.com) qui permettent d'uploader des images GIF sur le site, qui se chargera de réduire sa taille, en jouant principalement sur les couleurs et la taille de l'image.

17 La Netiquette – Les Images
La définition d'une image étant le nombre de pixels la constituant (par exemple 150 pixels en largeur et 240 en hauteur), sa résolution traduit sa précision et donc la "densité" des pixels. La résolution s'exprime en points par pouce (ppp ou dpi pour dot per inch). 800x600 – 96dpi 1408 ko – 16,7mp TIFF 800x600 – 96 dpi 70 ko – 16,7mp JPEG 800x600 – 96 dpi 265 ko – 256 GIF

18 La Netiquette – Les Images
De même, si vous avez l'habitude de manipuler des images en haute résolution en vue de leur impression sur votre imprimante "qualité photo", ne perdez pas de vue qu'une page Web n'attend que du 72 ppp. Cette valeur correspond à la résolution moyenne d'un écran. Actuellement, 15 secondes est la bonne durée de chargement. Au delà de 20 secondes, l'internaute passe à un site concurrent. Ne dépassez donc pas 50Ko par page (tout compris), soit - 20 secondes avec un modem à 28,8K - 10 à 12 secondes avec un modem à 56K - 3 à 4 secondes avec l’ADSL N'oubliez pas non plus de concevoir vos pages pour un écran en 800 X 600 pixels en n'en utilisant que 750 X 450 à cause de l'espace utilisé par le navigateur (ou 974 X 618 pour 1024 X 768)

19 La Netiquette – Les Frames
Arguments pour les cadres : Barre de navigation (menu) toujours présente, ce qui facilite la navigation dans le site. Puisque plusieurs pages se chargent dans une même fenêtre, lorsque vous ouvrez une nouvelle page, les autres pages déjà chargées, comme un sommaire par exemple, n'aurons pas besoins d'être rechargées. Place pour la publicité : un cadre permet de bien séparer publicité et contenu du site, pour ne pas altérer celui-ci. Maniabilité de l'hypertexte : en utilisant des JavaScripts, vous pouvez tout faire avec des cadres ! Exemple : charger deux pages en même temps dans deux cadres ; charger un nouveau sommaire pour chaque rubriques du site...

20 La Netiquette – Les Frames
Arguments contres les cadres : Le Target: lorsque vous cliquez sur un lien d'un sommaire, à gauche, la pages devra normalement se charger dans la frame à côté, celle de droite. Il peut arriver, en ayant mis un mauvais target, qu'elle se charge autre part! Cela peut très vite devenir un cauchemar si vous ne maîtrisez pas les hyperliens. Compatibilité: bien que les frames soit compatibles avec les navigateurs de génération 2 et plus, il est conseillé de concevoir le site de telle manière qu'il puisse fonctionner aussi sans cadres. Mauvais Référencement: les frames peuvent provoquer une baisse sensible de visites sur votre site, certains moteurs ne les prenants pas en compte. Pensez donc à reproduire votre page d'accueil dans la partie NOFRAMES. N'abusez pas trop des frames ; 3 cadres dans une seule page est un maximum pour une navigation et aussi une visibilité correcte .

21 Les langages Le langage HTML (Hypertext Markup Language) peut se définir comme une série de codes spéciaux appelés « balises » qui indiquent à un navigateur Web comment afficher un document hypertexte. Considérez-le comme un ensemble de styles (spécifiés par les balises de marquage) qui définissent les divers composants sur une page Web. Le JavaScript: Le Javascript est un langage de programmation qui vous permet de réaliser différentes sortes d'animation pour améliorer votre site web. Le Php: la page qui s’affiche est faite en HTML, mais n'existe pas en tant que telle. Il s'agit d'un assemblage de pages (Titre, sommaire, corps de page) du serveur. La consultation des pages web suppose l'emploi d'applications spécialisées connues sous le nom de navigateurs. Netscape Navigator et Internet Explorer. De même, la création de pages web, bien que réalisable avec le bloc-notes de Windows®, Emacs ou Vi sous UNIX, BBEdit sur Macintosh® ou un traitement de texte capable de sauvegarder en mode texte (ASCII), il est souvent utile d'utiliser un éditeur spécialisé (http://www.0faute.com/editeur.htm) capable de générer du code HTML …

22 Les Editeurs HTML – Choisir ?
Les éditeurs WYSIWYG (what you see is what you get). Avec ceux-ci, vous tapez votre texte, vous créez des tableaux, vous insérez des images sur vos pages et c'est le logiciel qui crée le code pour à votre place. Ils vous permettent de créer des pages assez rapidement, sans presque aucune connaissance du langage HTML. Cependant, vous ne contrôler pas toujours totalement le code que génère votre logiciel et il arrive que de temps en temps qu'il y aie des irrégularités que vous ne pourriez détecter et corriger si vous ne connaissez rien au langage HTML. Les éditeurs HTML proprement dits. Ils ressemblent plus à des éditeurs de textes améliorés. En effet, vous devez absolument connaître le HTML pour pouvoir vous servir de ces éditeurs. Certes ces logiciels possèdent quelques fonctions prédéfinies mais il faut savoir comment et quand les utilisés. Le bloc-notes: Et oui, le bon vieux bloc-notes de Microsoft peut très bien vous servir d'éditeur HTML. Il vous suffira de taper vos lignes de codes et d'enregistrer le ficher au format *.htm ou *.html.

23 Les Editeurs HTML - Softwares
Dreamweaver : un programme pro destiné aux habitués du format HTML pour créer ou gérer des sites Web grâce aux menus contextuels et aux raccourcis clavier. La carte du site montre l'enchaînement des pages : base de données, mise en place d'un site Web commercial, gestion des mises à jour, édition avancée de tableaux, réorganisation automatique des liens; il offre une palette d'outils impressionnante, crée le code HTML correspondant aux navigateurs cibles spécifiés, gère la diffusion du site conçu en local vers le serveur distant, intègre une bibliothèque de composants JavaScript, donne la taille du résultat fourni et un code HTML de grande qualité, facile à peaufiner dans un éditeur de texte. Freeway se veut proche de la logique papier et fonctionne sur le même moule que les logiciels de PAO. Une approche graphique de la conception qui ne déroutera pas les plus endurcis des maquettistes papier. Il fonctionne sur MacOS. Frontpage particularité intéressante de proposer des extensions qui, si elles sont associées avec votre serveur d'hébergement, autorise une mise à jour rapide et une gestion d'arborescence très utile. Créer un site Web est désormais à la portée de l'amateur sans aucune programmation ou compétences particulières. Attention, Frontpage est particulièrement verbeux et rajoute beaucoup de commentaires sans intérêt dans le code des pages, ce qui les rend très lourdes à charger. Ce logiciel n'est pas disponible en version d'évaluation mais une version limitée, FrontPage Express, est livrée avec Windows. Fusion  Considéré depuis sa naissance comme le "XPress du Web", c’est un générateur HTML très puissant qui utilise une technologie "orientée Site".

24 Les Editeurs HTML - Softwares
HomeSite 5.5 Cet éditeur vous fournit les contrôles de présentation, la flexibilité et l'accès aux technologies dont vous avez besoin pour créer vos pages rapidement. HotDog Express : La solution pour créer des pages Web rapidement ! Définissez votre page modèle, complétez la avec les éléments de votre choix (images, sons, textes...), visualisez le résultat, et si vous êtes satisfait, envoyez la directement sur votre serveur... Simple, rapide... Efficace ! XMetal Pro est un éditeur HTML de référence. Avec trois mode d'édition (source pure, édition de "Tag" ou WYSIWYG), la vérification de votre code, la possibilité d'insérer par un simple clic des applets Java ou des contrôles ActiveX, il va vous permettre d'éditer facilement vos sites Internet. Très simple et très intuitif d'utilisation, cet éditeur est considéré, et c'est justifié, comme l'un des meilleurs du marché. (En Anglais) Mais aussi Netscape Composer est fournit gratuitement avec Netscape Navigator. (http://www.netscape.com/)  GoLive qui génère un code inutilement complexe (http://www.adobe.fr/) et  SJ Namo Web Editor 6 Suite (http://www.wska.fr/)

25 Les Editeurs HTML - Sharewares
40tude HTML (http://www.40tude.com/html) Coffeecup : Un petit éditeur non WYSIWYG avec des images incluses, plus de 100 java scripts inclus, une bonne dizaine de scripts en dhtml, et 5 cgi (www.coffeecup.com) Dida Pro HTML Editor est un éditeur en mode texte avec une interface un peu austère et pas réellement fonctionnelle. (http://www.faico.net/dida/) E-Anim-PC Un éditeur pour réaliser des animations pour les pages HTML. Il permet aussi bien de construire des objets animés (bouton réactif, roll-over, textes défilantes, listes déroulantes...) que de réaliser de véritables séquences animées avec boutons de navigations. Il est possible des faire glisser, tourner, agrandir/rétrécir tous les objets - images, textes, boutons et autres... Ces animations ne nécessite pas de plug-in et se jouent automatiquement lorsque la page s'affiche. (http://www.phildes.com/) HTML Assistant Pro 2000: (http://www.exit0.com/ez1/products/pro2000.html) PowerWeb: (http://www.stormsurge.com/index.htm) Spider Writer HTML Editor: (http://www.spiderwriter.com/) Web construction kit (http://www.pierresoft.com/) Web Media Publisher Pro : Voici un éditeur HTML très utile. Il contient entre autre un mini navigateur qui permet de visualiser les pages que vous êtes en train de concevoir, ainsi qu'un client FTP avec lequel vous pourrez charger directement vos pages sur le serveur qui doit les héberger. (http://www.wbmedia.com/) Web Idea Tree est une application un peu particulière qui se propose de construire des sites à partir d'idées et d'informations personnelles, organisées hiérarchiquement. C'est ainsi qu'une idée correspond à une page, alors qu'une arborescence d'idées donnera naissance à un site complet. Nul besoin de connaître le HTML, il suffit d'organiser les idées, d'importer les données et les images, de choisir un style de présentation pour que le site soit généré automatiquement. (http://chrguibert.free.fr/repository/WitSetup.exe)

26 Les Editeurs HTML - Freewares
1St Page 200 v2.0 final conseillé pour les webmestres avertis. Il propose 4 modes d'accès à l'interface, de la plus simple à la plus complexe. Le mode "easy" (simple) est déjà vraiment très performant. Vous pouvez notamment insérer de nombreux scripts, compresser vos pages,... (http://www.evrsoft.com/download/) AceHTML 6 Pro (http://www.visicommedia.com/) Html-Kit Vous trouverez des outils d'édition pour les scripts, objets à insérer, formulaires,... ainsi qu'un vérificateur/correcteur de liens. L'interface est très agréable et rapide à prendre en main. (http://www.chami.com/html-kit/) AldWeb vous assiste dans la création de vos pages, en vous proposant un squelette de page organisé sous forme d'en-tête, de un à quatre paragraphes et d'un pied de page. Ma Page Web se charge aussi d'insérer les marqueurs HTML nécessaires. Bref, dans un cadre structuré, vous sélectionnez vos images, leurs taille et emplacement, tapez votre texte, définissez vos liens et Ma Page Web se charge du reste. Un éditeur a destination d'un public novice qui souhaite obtenir un résultat rapide sans avoir à mettre "les mains dans le cambouis". (http://www.aldweb.com/) SiteAid (http://www.siteaid.com/siteaid) Arachnophilia "Cessez de rechigner pendant une semaine, et vous avez gagné votre copie". Ce programme vous permettra de construire votre code HTML. C'est un outil simple mais vraiment puissant. Par l'utilisation de différentes couleurs de texte et d'une arborescence régulière des éléments introduits, Arachnophilia vous permet d'optimiser votre code au plus près. Ce logiciel deviendra vite indispensable à qui veut développer du HTML de grande qualité. (http://www.arachnoid.com/arachnophilia/) Careware

27 Des pages dynamiques? Le Java Scripts ou applets:
Navigation, menu, recherche, temps, formulaires, curseurs, info bulles, compatibilité, animations… le tout pour quelques ko

28 Valider votre site pour publication
Qu'est-ce qu'un site "intelligent" ? C'est tout simplement un site pouvant s'adapter au profil du visiteur : système, navigateur, résolution, langue... Obtenez toutes les autorisations pour les sources que vous utilisez… Gardez les réponses à vos mails et demandez les confirmations de lecture, une non-réponse peut-être considérée comme un accord! Le format de vos fichiers: tout en minuscule, sans espace, accent ou caractère spécial

29 Références http://www.guidewebmaster.net/
pour publication avec WsFTP


Télécharger ppt "En respectant les « lois » du copyright et de la « Netiquette »…"

Présentations similaires


Annonces Google