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

LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.

Présentations similaires


Présentation au sujet: "LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds."— Transcription de la présentation:

1 LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds de routage multiples qui permettent de communiquer facilement entre plusieurs ordinateurs distants Internet fournit un certain nombre de services basés sur le protocole TCP/IP (HTTP, FTP, SMTP, NNTP) Le WWW (World Wide Web) est un système hypermédia sur lInternet (conçu en 1989 au CERN) Les différents services de lInternet seront vus en « Services sur réseau »

2 Le World Wide Web Le service dinformation le plus populaire permettant un accès simple à des informations réparties sur des réseaux informatiques Service dinformation basé sur lhypertexte Les documents hypertextes utilisent le langage HTML (Hypertexte Markup Language) –Le texte à lire –Le formatage du texte –Linsertion dimages –Les liens avec dautres documents –Etc. Modèle client-serveur : le dialogue entre la machine serveur et la machine cliente est géré par le protocole HTTP (HyperText Transport Protocol) Service = Fournir un document URL = Uniform Ressource Locator = adresse dun document sur le réseau

3 Navigateur : client WWW et outil universel daccès à linformation WEB –Espace dinformation –Systèmes dinformation –Service dinformation multimédia Problèmes de présentation et de conception de linformation : –Organisation (communication, information, document) –Utilisation du,réseau –Maîtrise de la présentation des documents Diffusion dinformations –Respect du droit dauteur –Données nominatives Le World Wide Web

4 Lutilisation du Web pour la diffusion de vos informations nécessite de réfléchir sur : –Les usages possibles –Les contraintes quil implique (organisation, temps, matériel) Double aspect –Maîtrise technique de loutil –Contenu éditorial Échelle de diffusion –En terme de public visé –Selon la richesse éditoriale Plaquette publicitaire ou activité principale Communication des activités, diffusion, échange Le World Wide Web

5 Universalité –Des plate formes –Du langage –Des navigateurs –Du réseau –Interactivité Gratuité encore large –Des navigateurs –Des logiciels serveur –De laccès à linformation Intérêts principaux Simplicité Dutilisation De diffusion dinformation Le World Wide Web

6 Web = World Wide Web =WWW Le Web est un des services dont laccès est possible par le réseau Internet Ce service me permet, à partir de mon ordinateur, daccéder à des informations diffusées par dautres ordinateurs (utilisateur) Je peux produire des documents et les poser sur un serveur pour les diffuser Mon ordinateur et celui qui propose des informations Web sont reliés par Internet ou un réseau interne Le World Wide Web

7 Mon ordinateur (client) et lordinateur qui propose des informations (serveur) communiquent en HTTP Le serveur propose des document écrits en HTML Sur mon ordinateur, jai un logiciel qui permet –De comprendre les communications du serveur –Dinterpréter le langage des documents quil diffuse Ce logiciel est un navigateur Web Le World Wide Web

8 Connexion par un FAI (Fournisseur dAccès à Internet)

9 Les contraintes techniques Quelques rappels de base La diffusion dinformation sur le Web existe grâce au réseau Internet, il faut donc penser à le ménager Sélectionner les informations que lon diffuse Rapport entre lintérêt de linformation et son poids (donc rapidité daccès) Les lecteurs ne sont pas dans votre situation (accès différents) Temps de chargement dune image> 10s (Insupportable) Cela encombre le réseau (fois le nombre dutilisateurs qui chargent cette même image)

10 Les contraintes techniques Le WWW est basé sur le principe Client/Serveur –Le poste client qui consulte et le poste serveur qui diffuse sont reliés par le réseau Le lecteur qui consulte est libre du choix du logiciel client (différent du votre ou pas) –Il est dépendant de la vitesse de son réseau –Sa communication peut lui être facturée à la durée Autant de facteurs que vous ne pouvez pas maîtriser mais qui conditionnent une bonne communication entre vous et lui, doù limportance de connaître un minimum technique du fonctionnement du Web

11 Les contraintes techniques URL : protocole://serveur.domaine/répertoire/document Exemple : /intranet index.html

12 Les contraintes techniques WWW = World Wide Web = W3 –Système dinformation hypermédia sur le réseau –Fonctionne en mode client/serveur Client/serveur –Ordinateur serveur diffuse –Ordinateur client consulte –Lien entre les deux : le réseau –Partage des tâches entre les deux –Définition officielle du WWW : Wide-area hypermedia information retrieval initiative aming to give universal access to a large universe of documents

13 Lhypertexte Document Hypertexte : fichier avec des liens vers –Dautres parties du document –Dautres documents –Un lien hypertexte est un groupe de mots en sur brillance (une ancre) dans un texte qui permet de faire afficher une autre page dinformation –Cliquer sur un lien déclenche une action Un document hypermédia est un hypertexte dont certains liens permettent daccéder à des fichiers sons, images ou vidéo

14 Préparation du site Lorganisation, la structure et la mise à jour dun site sont difficiles Priorités –Le contenu est prioritaire –La technologie est secondaire –Site vivant, mise à jour Prévoir les mises à jour : constituer des documents HTML facilitant cette mise à jour

15 Avant de commencer Consulter les règles, chartes graphiques et recommandations sur le contenu et la mise en page Consulter les sites déjà existants Préparer –Plan de conception –Cahier des charges

16 Plan de conception Pourquoi publier ces informations ? A quels utilisateurs sadressent-t-elles ? Quelles informations (contenu et pertinence) Arborescence et liens entre les documents Mise en place dune chaîne de production –Création, Réalisation et vérification des pages HTML –Vérification multi plate-forme et multi connexion Moyens en temps et en personnel Outils nécessaires Aspect juridique (copyright, propriété intellectuelle)

17 Cahier des charges Objectif du site Contenu du service Web Mise en forme Animation du site Maintenance du site (information & organisation) 1/3 préparation, 1/3 réalisation, 1/3 vérification

18 Structuration : conséquences Définir la structure du site et des pages Structuration du site –Organisation des pages entre elles –Hiérarchique, linéaire Structuration des pages HTML –Mise en page avec une base identique : facilite le repérage et lidentité visuelle du site

19 Larborescence Organisation des fichiers sur le site Arborescence –Organisation en fonction dune structure hiérarchique –Ne pas complexifier larborescence –Déterminer la connexion entre les documents Niveau1 Niveau2 Niveau3 … PrésentationPage daccueilPrésentation Rubrique 1Rubrique 2Rubrique n Sous-Rubrique 1-1 Sous-Rubrique 1-2 Sous-Rubrique 2-1 Sous-Rubrique n-1

20 Le langage HTML Format des fichiers WWW –Sous ensemble de SGML (Standard Generalized Markup Language) –Norme gérée par un consortium international (W3C) HTML 4.0 Pourquoi lapprendre ? –Lire les sources Modification de documents existants Sadapter à des situations de production différentes Suivre les évolutions technologiques

21 Le langage HTML Permet de décrire des pages et den contrôler lapparence Langage de structuration de document DTD (Document Type Definition) Langage simple défini par des balises –Interprétées par un navigateur –Résultat pouvant varier suivant la configuration du poste du client

22 Le langage HTML Principe du balisage : texte Un exemple Squelette dun document : –Prologue –En-tête –Corps du texte

23 Squelette dun Document Prologue Début En-tête Titre Fin En-tête Corps du texte Fin corps Fin document : début du document Hypertexte : début de len-tête (non affichée), sert aux renseignements relatifs au document (auteur, mots-clés, …) : titre du document (affiché sur la barre de titre du navigateur) : début de la page HTML (la suite est affichée)

24 Structure dun document HTML Déclaration de type (prologue) Signification des différentes balises Len-tête Regroupe les informations non affichées Modification de documents existants Le titre Les méta-données (catalogage) Le corps du document

25 Les éléments de HTML HTML définit des éléments (des balises) –Les éléments de bloc : une boite contenant du texte (précédé et suivi dun saut de ligne) –Les éléments inline qui sintègrent au fil du texte sans rupture

26 Exemple de disposition déléments Bloc de titre Bloc de premier paragraphe Le bloc du second paragraphe Contient une image (élément inline) Trois blocs juxtaposés par lutilisation dun tableau (tableau à une ligne et trois colonnes). La colonne de droite contient une image. Un document HTML

27 Principaux éléments de Bloc Les paragraphes Les titres Les listes Principaux éléments inline La typographie (gras, italique,etc.) Les images Les formulaires

28 Balises indispensables pour commencer … Mon Titre … Les balises peuvent être imbriquées Attention à lordre douverture et de fermeture de chacune dentre elles !!!

29 Les méta-données Elles sont contenues dans len-tête Les Informations de méta-données (balise ) sont des informations de catalogage. Les arguments sont : content : Information associée au nom, http-equiv : Spécifie un lien entre le contenu de lélément et la réponse http, lang : Spécifie la langue du texte. name : Spécifie un nom

30 Les titres Les titres (Headings) sont donnés par les balises …. 6 niveaux de titre ( H1 à H6 ) Le texte entre ces balises est en gras Cest un élément de bloc Impossible davoir plusieurs titres sur une même ligne

31 Exemple de titres Mon cours sur HTML 4.0 Les éléments de bloc Les titres Les éléments inline

32 Les paragraphes Les paragraphes sont donnés par les balises … Le texte sajuste automatiquement Aucune incidence des espaces et tabulations Cest un élément de bloc

33 Exemple de paragraphe Les espaces, les tabulations, les retours-chariot n'ont aucune signification en HTML

34 Le texte préformaté Le texte préformaté est donné par les balises … Laffichage est indépendant de la fenêtre paragraphes Deux attributs – nbre de car max /ligne – active le retour à la ligne automatique

35 Exemple de texte préformaté Les espaces, les tabulations, les retours- chariot n'ont aucune signification en HTML

36 Les césures forcées Forcer la césure dune ligne sans changer de paragraphe Les césures forcées sont données par la balise (pas de balise de fin) Lattribut CLEAR définit la marge à respecter

37 Exemple de césure forcée Les espaces, les tabulations, les retours- chariot n'ont aucune signification en HTML

38 Les lignes horizontales Les lignes horizontales permettent de séparer deux paragraphes Hauteur en pixels Largeur en pixels ou en pourcentage de la largeur de lécran Enlève laspect 3D (pas dombre)

39 Exemple de lignes horizontales

40 La mise en page Attribut dalignement : ALIGN="LEFT|RIGHT|CENTER|JUSTIFY" Utilisable avec les titres, les paragraphes et les lignes horizontales Alignement dun bloc : –Balise … Alignement inline –Balise …

41 Exemple de mise en page Ce texte est justifié par rapport à la largeur de la fenêtre Ce texte est aligné à droite par rapport à la largeur de la fenêtre Texte centré Texte Centré

42 Mise en forme des caractères Quest-ce que la mise en forme ? Effectuée par des balises inline Deux types de mise en forme –Éléments logiques (mise en valeur) –Éléments physiques (enrichissement typographique)

43 La mise en forme éléments logiques … mise en valeur (italique) … encore plus en évidence (gras) … une citation (italique) … afficher du code … indique une variable … indique une définition … séquence de caractères

44 Exemple de mise en forme par éléments logiques Mise en valeur encore plus Une citation void main() {int i;} var a Définition 1 : i est entier ssi Du texte frappé

45 La mise en forme éléments physiques … en gras … en italique … en souligné … en barré … style télétexte … exposant … indice … pour spécifier une police de caractères donnée

46 Exemple de mise en forme par éléments physiques Texte gras Texte italique Texte souligné Texte de télétexte 1 ère promotion IUT SRC Texte en arial

47 Les caractères diacritiques HTML 4.0 utilise la norme UNICODE Problème de lecture dun fichier par toutes les machines Codage des éléments accentués –Tables dentités –Caractères ISO-LATIN-1

48 Les caractères diacritiques par table dentités Une entité est codé par la perluette (&) et terminée par un point-virgule (;). e accent circonflexe : ê e accent grave : è e accent aigu : é O avec tréma : ö Un caractère accentué pour Noël ?

49 Les listes Cest un bloc HTML qui permet de réaliser lénumération de plusieurs items. Les listes non ordonnées Les listes ordonnées numérotées La liste descriptive

50 La liste non ordonnée item 1 item 2 item 3 …

51 La liste numérotée … item 1 item 2 item 3

52 La liste descriptive item 1 Ma définition 1 item 2 Ma définition 2 Permet de donner une liste de définitions (DL :Definition List), avec son DT (Definition Term) et sa définition DD (Definition Description)

53 Les couleurs Couleur donnée par : –Ses valeurs RVB –Son nom en anglais Changer la couleur –Du fond –Des caractères Un texte

54 Les liens hypertexte Lien interne (dans le même document) … Lien local … Lien externe … URL absolu : chemin complet ( ) URL relatif :chemin relatif ( annuaire.html )

55 Début du document université de Caen Retouner au début Site de luniversité de Caen Exemple de liens hypertexte


Télécharger ppt "LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds."

Présentations similaires


Annonces Google