Création de site Web. Utilisation des Nouvelles Technologies de lInformation et de la Communication Internet et ses Services Création dun site Web Olivier

Création de site WebCréation de site Web

Utilisation des Nouvelles Technologies de Utilisation des Nouvelles Technologies de l’Information l’Information

et de la Communicationet de la Communication

Internet et ses ServicesInternet et ses ServicesCréation d’un site WebCréation d’un site Web

Olivier LASCOLSFaculté de Médecine Pierre et Marie Curie

EDPP-Nouvelles technologies de l'information et de la communication 3

Caractéristiques d’InternetCaractéristiques d’Internet


Ce qu'est InternetCe qu'est Internet

• Acronyme de « Internetworking of networks » soit mise en réseau de réseaux

• Réseau : ensemble d'ordinateurs reliés

par câbles, satellite, liens radio ou infra-

rouges.

• Ordinateur hôte : l'ordinateur principal dit

serveur auquel sont connectés d'autres

ordinateurs considérés comme des

clients.


Internet pour quoi faire ?Internet pour quoi faire ?

• Autoroute de l’informationCréer des liens permettant la libre circulation de l’information

• Différents services– Courrier électronique : email– Transfert de fichier : FTP– Accès à l’information distante: www

(consultation de banques de données)– Accès à des machines distantes : telnet– Forums de discussions : news


Architecture du réseauArchitecture du réseau• Ordinateurs

– Adresse IP (Internet Protocol)

• Unique au monde

• Codée sur 4 octets (32 bits)

• Notation « décimale pointée : A.B.C.Dex: 130.190.5.1

• Correspondance avec un nom (DNS) qui caractérise les différents domaines et sous-domaines :ex: ibm2.cicrp.jussieu.fr

• Routeurs (gateway)

– Porte de sortie des machines sur le réseau (N° identification)

• Connexion

– Cables, fibres optiques, ondes hertziennes (Wifi)

– Différents débits : 512 kbps (téléphone) au Gbs (fibre optique)


Mode de communication (1)Mode de communication (1)

Protocole TCP/IP

Transfert Control Protocol/ Internet Protocol

– Standard de transmission des données par paquets (datagramme) sur le réseau. Type de circulation totalement transparent pour l’utilisateur.


Mode de communication (2)Mode de communication (2)• Fonctions d’IP

– Transporte des paquets d’un bout à l’autre du réseau

– Chaque paquet comprend entre autre :

• Adresse IP de l’émetteur• Adresse IP du destinataire

– Connaissance obligée de l’adresse IP d’un équipement pour travailler avec lui

– Chaque paquet est traité indépendamment des autres– Assure le routage : progression d’un routeur au suivant

(nœud)– Gère la fragmentation


Comment accéder à l’Internet (1)Comment accéder à l’Internet (1)• Domicile

• Attribution d’une adresse IP temporaire• Conversion d’un signal numérique (0 ou 1) en

analogique (valeur physique variable) et réciproquement par modems (modulateur-démodulateur)

• Protocole PPP (point to point protocol)• Un compte chez un fournisseur d’accès


Comment accéder à l’Internet (2)Comment accéder à l’Internet (2)

• Laboratoire en réseau : intranet

• Carte éthernet sur le micro ordinateur (PC ou Mac)

• Réseau local• Abonnement au réseau


Les Services de l’InternetLes Services de l’Internet


World Wide Web (WWW)World Wide Web (WWW)

• Le « Web » ou toile d’araignée

– Application géante utilisant le réseau Internet

– Permet échange d’information multimédia:

texte, image, vidéo, son

– Accès par navigateur: Netscape, Internet Explorer

– Utilisation du langage HTML

HyperText Markup Language

Crée des liens dynamiques au sein d’une page, entre des

pages ou des sites webs distants

– Protocole HTTP : Hypertext Transfert Protocol

– Adressage des sites par l’URL :

Universal Resource Locator

http://www.cicrp.jussieu.fr/Web/assist/html2.html






Comprendre une URLComprendre une URL

• protocole:// nom_de_machine.domaine/

répertoire/fichier.html#ancre

– protocole: http, ftp, telnet

– nom_de_machine: ordinateur hébergeant le site

– domaine (et s/domaine): localisation géographique

(fr, uk, us …) et thématique

– répertoire/fichier :

chemin d’accès au

fichier sur le serveur

– html#ancre :

détermine un endroit

précis de la page web

Domaines principaux • com : commercial• edu : universités et éducation• gov : organismes

gouvernementaux• mil : militaire• net : réseaux• org : ONG


Navigateur : Navigateur :

• Configuration : menu préférences• Ouverture d’un site• Barre de navigation• Principe de l’hypertexte • Visualisation de l’html• Gestion des sites préférés : signets• Sauvegarde du texte• Sauvegarde d’une image• Envoyer un lien ou une page web


Outils complémentaires Outils complémentaires à un navigateurà un navigateur

• Plug-ins

Logiciel nécessaire pour l’interprétation de fichiers spécialisés– Shockwave/Flash : animation multimédia– Real audio : écoute de sons– Quick time, MPEG, Real video : visualisation de vidéo– Adobe acrobat reader : lecture et édition des fichiers pdf

(portable document format)

Ces logiciels sont le plus souvent en accès gratuit par téléchargement chez les fournisseurs


FTPFTPFile Transfer Protocol

– Protocole de transfert de fichiers utilisé par de nombreux serveurs

– Plus efficace pour récupérer rapidement de l'information– Transfert de fichiers volumineux

• Serveur FTP anonyme– Fichiers en Accès libre : logiciels, modes d’emplois, images …– login: anonymous– password: votre adresse email

• Serveur FTP sélectif– Nécessité d’avoir un compte sur le serveur– Login (user id): dupond– password: XXXXXX


Logiciels de FTP (1)Logiciels de FTP (1)

• Internet Explorer– URL : ftp://ftp.nom_de_serveur.domaine – Ex: ftp://ftp.adobe.com , puis choix du dossier/fichier pour

récupérer Adobe acrobat reader– Procédure utilisée par tous les téléchargements sur le web

• Fetch ( ordinateurs Mac )– Connaître le DNS du serveur hôte– ex: ibm2.cicrp.jussieu.fr

• FRFTP, File Zilla ( ordinateurs PC )

ftp://ftp.adobe.com/



• Exemple avec FRFTP (téléchargement gratuit)

http://romain.dore.free.fr/webmaster1.html



• Se connecter à un site distant

******



• Echange en ligne avec un ordinateur distant




E-Mail (1)E-Mail (1)

Messagerie électronique

– Courrier instantané, au niveau mondial, gratuit– Envoi de documents attachés (annexes)– Envoi simultané à un grand nombre de

correspondants– Ouverture d’un compte postal– Format d’adresse d’un correspondant

login@sous-domaine(s).domaine

Ex: [email protected]

mailto:[email protected]





Logiciels de Mail

– Eudora, Outlook express, Outlook : installation

personnalisée– Hotmail, Webmail : accessible sur tout

ordinateur connectéhttps://webmail.xxxx.fr

Risques des courriers électroniques Messages interceptés et corrompus : virus (filtrage) Inondation de courrier publicitaire : spamming Diffusion de canulards et rumeurs (hoax)

http://www.hoaxbuster.com/index.html








E-Mail (4)E-Mail (4)Configuration d’un compte mail pour Outllook

Procédure:Menu/ outils/compte/nouveau

Ex1 : envoi et réception via le même serveur de courrier



Configuration d’un compte mail pour Outllook

Procédure:Menu/ outils/compte/nouveau

Ex 2 : envoi et réception via des serveurs de courrier distinct


Création d’un site WEBCréation d’un site WEB


Critères de qualitéCritères de qualité

• Caroline : – doit contenir des informations "sûres" présentées de façon

lisible et pédagogique .• Lina :

– soit simple, clair et agréable à lire et à utiliser. – il faut que les informations données soient pertinentes et

vérifiées. • Aurélie :

– le plus important est la qualité des informations données sur le site; elles doivent être fiables

– il faut que le site soit clair, didactique, bien organisé de façon à pouvoir trouver facilement les informations recherchées.

– Et puis si le site est bien conçu graphiquement, agréable à regarder, on a envie d'y passer un peu plus de temps et de s'y balader


Critères de qualitéCritères de qualité

Un site web de qualité est un site où les visiteurs reviennent. Voici les critères que nous retenons, classés par ordre d'importance:

- Le contenu, c'est à dire l'intérêt et l'originalité de l'information ou du service qu'il propose est sans aucun doute le critère le plus important.

- La facilité de navigation, l'ergonomie et la clarté de l'interface doivent permettre aux visiteurs de trouver l'information qu'ils recherchent de façon intuitive.

- Les pages doivent se charger rapidement. Tout le monde n'a pas l'ADSL. Attention à l'excès d'images (taille des images) ou aux intros en Flash qu'on ne peut pas zapper.

- La publicité ne doit pas être agressive. La présence de popups à l'entrée ou à la sortie des pages est un handicap sérieux. Plus d'une popup par page, et c'est l'élimination.

- Les fôtes d'ortograf sont des killers;-)- L'esthétique, la qualité du design sont des plus, mais pas

suffisants si les critères précédents ne sont pas au rendez-vous.- Date de mise à jour

http://www.actulab.com/criteres-de-qualite.php






Propriété intellectuellePropriété intellectuelle • Respectez le droit des autres

• Ne confondez pas espace de liberté et espace sans droit. Vous n'avez pas le droit de diffuser tout ou n'importe quoi sur le Web si ça ne vous appartient pas. En particulier, ce n'est pas parce que quelque chose est sur le Web que vous êtes autorisé à le recopier et diffuser sans autorisation ! Ne violez pas de copyright. (exemple: éditeurs de bandes dessinées)

Si vous avez un doute, vous pouvez consulter le Code de la propriété intellectuelle.

• citations : quand vous citez quelqu'un, donnez toujours les références les plus précises possibles. Vous avez le droit à citer de courts extraits à but, par exemple, de critique, mais la copie de plusieurs pages est bien évidemment interdite. De même, quand vous utilisez des fichiers (icônes, images, scripts, etc.) venant d'un site qui les met gratuitement à votre disposition, il est courtois de les en remercier.

http://www.legifrance.gouv.fr/WAspad/UnCode?commun=&code=CPROINTL.rcv


Propriété intellectuellePropriété intellectuelle (2) (2)

• photographies : pour une photo où figurent moins de cinq personnes, il faut impérativement leur consentement explicite. Vos amis ou voisins ont droit à la protection de leur vie privée. Attention aux photos de bâtiments récents (pyramide du Louvre, Stade de France) !

Consultez cette page sur les photos et la propriété intellectuelle pour en savoir plus.

• copie de documents : avant de copier tout ou partie d'une page Web (texte, image, son, vidéo...), il est impératif de demander la permission à son auteur, sauf si l'auteur vous autorise explicitement à le faire.


Construction d’un siteConstruction d’un site

• Choix du sujet : intérêt, originalité …• Plan du site

– Page d’accueil : pour présenter et orienter– Création de répertoire par catégorie et thème

d’information• Collecte de contenu : textes, images, documents, sons,

sites web à lier …

Mise en forme des documents (format html, format et taille des images)

• Choix d’une charte graphique : feuille de style (CSS)


Code source HTMLCode source HTML

• Visualisation sur une page Web


Mise en ligneMise en ligne

• Choix d’un hébergeur

• Procédure FTP pour le téléchargement

Documents

Création de site Web. Utilisation des Nouvelles Technologies de lInformation et de la Communication Internet et ses Services Création dun site Web Olivier