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

1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.

Présentations similaires


Présentation au sujet: "1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB."— Transcription de la présentation:

1

2 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB

3 2 Le Serveur WEB oLogiciel ( aspect système ) Différents fournisseurs IIS ( Microsoft/PC ) Apache (PC/Unix/…) autres Différentes fonctionnalités ColdFusion (PC/.. ) IIS ( ASP,… ) ……

4 3 Le Serveur oRESEAU Protocole d'échange httpd/ ( actuel ?? 1.0 ) Hyper Text Protocol Standard réseau IP ( Tcp/IP / adressage / port ) URL….. ( ) WEB

5 4 Le Serveur oSGF ( Système de Gestion de Fichiers ) Site Web : Hiérarchie de documents/pages Sécurité des accès et autorisation ( mots de passe, no réseau machine,…) Répertoires particuliers Scripts CGI, icônes, alias,… WEB

6 5 Un exempleUn exemple

7 6 Le Serveur oLogiciel ( aspect fonctionnel ) CGI Common Gateway Interface SSI Server Side Include Modules complémentaires ASP, JSP, PHP, …..inclusion de résultats de traitements ….. WEB

8 7 Le Client oLe Browser / Butineur oSpécifique à la machine oLa Visualisation de la page Web et les aspects Multimédia oCertains aspects 'Traitements' : Plugins,JavaScript Java,….. WEB Certains problèmes de compatibilité Plus connus : Netscape, Iexplorer,autres…

9 8 Le Client oHTML : Hypertext Markup Language (langage généraliste XML) Interprété Toutes les fonctions d'affichage et de mise en page oHYPER-TEXTE : en gros notion de Liens oURL : Uniform Resource Locator WEB

10 9 Le Client oURL : Uniform Resource Locator Convention pour Accès Unique à un document, ou à une fonction Accès aux services réseau : ftp, mail, http,… ftp://ftp.univ-valenciennes.fr telnet://crabe.univ-valenciennes.fr WEB

11 10 Principes de Fonctionnement WEB Serveur 1) connexion avec le serveur 2) Echange Mise en cache 3) Rupture de la connexion

12 11 Principes de Fonctionnement oFonctionnement Standard Sécurisé Pas de connexion autre qu'avec le serveur oFonctionnements spécifiques - type accès Base de données Pas par le client Coté serveur : asp, jsp, servlet ( java ),… WEB

13

14

15 14 Généralités oLe langage HTML est un langage à balises ( norme v3.2 ou v4.0 ) oUne page HTML est un fichier TEXTE contenant un ensemble de balises et de textes descriptifs oExemple: mettre en gras le mot Gilles, Gilles. oles commandes sont de la forme : o texte o ou HTML

16 15 Généralités oPEU de différence entre Minuscules et Majuscules équivaut à oPLUSIEURS attributs à la même balise texte oLes normes HTML = caractères ASCII 7 bits pas de caractères accentués HTML

17 16 Exemple : Page HTML Interfaces avec les SGBD Bâtir un système d'information avec les outils Web; interfaces d'accés aux bases de données, exemple d'application Interfaces avec les SGBD HTML

18 17 Beaucoup de textes Problèmes 'Image' Les caractères accentués HTML

19 18 Pourquoi ? Texte HTML oEditeur Spécialisé WysiWyg oDifficile d'être complet oCorrections quelquefois difficiles HTML

20 19 Les Caractères Accentués un caractère accentué, on entre une combinaison précédée du caractère & ….. terminé par un ; (point virgule) é se code é Extrait de tableau caractères > 128 HTML

21 20 Balises de documents oLes documents sur le Web ( et les objets ) ont un type MIME oUn entête spécifiant leur nature et comment les utiliser oType Mime : text/html image/pjpg HTML

22 21 Un exempleUn exemple Netscap e Par défaut : Gif / Jpeg HTML

23 22 Balises de documents o o Un nouveau guide d'Internet - Eléments d'HTML - par cyber o Nécessaire HTML

24 23 Balises de documents oGénération STATIQUE : automatique Par l'éditeur Web oGénération DYNAMIQUE JavaScript Mode programmé A faire soi même ( Autre intérêt de l'aspect texte HTML ) HTML

25 24 Balises d'entêtes oEntre les balises HEAD o : titre de la page o : infos générales utilisés par moteur,…..

26 25 Balises de mise en forme oUn document : Flux de TEXTE oPas concerné par les Fins de Ligne fin de paragraphe break ; coupe une ligne coupure horizontale HTML

27 26 Un exemple HTML

28 27 Exemple : Html Untitled Document COURS HTML/WEB Ceci est le paragraphe de présentation Ici c'est un saut de paragraphe, avec saut de ligne automatique Je ne peux pas mettre de TABULATION pour décaler le texte Par contre une ligne scindée en 2 permet d'avoir une notions de paragraphe HTML

29 28 Balises de mise en forme oDes balises spécifiques…( quelques unes ),,..ex: Texte Texte : preformatté : clignotant ( pas norme 3.2 ) …, …exposant,indice,… HTML

30 29 Exemple plus complet COURS HTML/WEB Ceci est le paragraphe de présentation Ici c'est un saut de paragraphe, avec saut de ligne automatique Je ne peux pas mettre de TABULATION pour décaler le texte Par contre une ligne scindée en 2 permet d'avoir une notion de paragraphe HTML

31 30 Editeur : DreamWeaver HTML

32 31 Editeur : Netscape Composer HTML

33 32 Fonctionnalités Avancées oMises en Page IHM attractif Interactivité Html 3.2, Html 4.0 Plugins.. Macromedia Flash oArchitectures de Documents oImages,..multimédia Norme HTML, DHTML, Editeur….. HTML

34 33 Liens et ancres oLiens Hyper-Textes oBase de la Navigation sur le Web oEndroit sensible de la page..pointe Une autre page Un point de référence dans la même page ou une autre Une page sur un autre site D'autres fonctionnalités liées a l'URL HTML-liens

35 34 Liens et ancres o : Anchor o ……. principe URL protocole : // adresse FQDN : port / page ( ou document Mime) HTML URL Local Intra HTML-liens

36 35 Liens et ancres oProtocole Relatif au réseau Relatif à comportements internes oRéseau http, ftp, telnet, mailto, …. oInterne javascript:, about:, file:, HTML protocole : // adresse FQDN : port / page URL Local Intra HTML-liens

37 36 Les LIENS oHyperlien Internet : URL code_exploitation://nom_machine.domaine_reseau http ftp file mailto file://c:\images... URL Local Intra HTML-liens

38 37 Liens et ancres oAdresse FQDN Fully Qualified Domain Name ?? univ-valenciennes.fr : nom de domaine www : nom du site / nom d'une machine oNo de Port Référence d'un programme sur une machine Dépend de l'installation / défaut : 80 ( http ) 25 ( mailto ) 21 ( ftp ) HTML protocole : // adresse FQDN : port / page URL Local Intra HTML-liens

39 38 Liens et ancres oL'objet MIME ( fichier ) oextension :.html /.htm,.gif,.jpg odéfaut : dépend du serveur index.html, index.htm : 1ère page oLa configuration : dépend du serveur et du client :.conf/Apache mime/Netscape protocole : // adresse FQDN : port / page HTML URL Local Intra HTML-liens

40 39 Liens et ancres oHyperlien local ( dépend ) ici hyperlien toto.html image.gif / image.jpg texte.doc #etiquette ancre ( anchor ) toto.html#etiquette HTML URL Local Intra ……. HTML-liens

41 40 Liens et ancres oHyperlien : les ancres intra document inter document..pas le début aaaa HTML URL Local Intra …

42 41 Liens particuliers o message pour Appel automatique de la composition o ….. HTML-liens

43 42 Les images oFormats supportés Gif / Jpg oIntégrés dans la mise en page oPas toujours génial => artifices HTML-images

44 43 Les images oPrincipal Intérêt Beauté/attrait de la page Dialogue / hyperlien Prévisualisation ex : image réduite, charge l'image complète Images cliquables LOURDEUR de chargement HTML-images

45 44 Les MAP oObjectifs : Image Cliquable Menu Autres,…. HTML SHAPE=rect|circle|poly HTML-images

46 45 Les MAP : DreamWeaver HTMLHTML-images

47 46 Les MAP : DreamWeaver HTMLHTML-images

48 47 Les MAP : DreamWeaver HTMLHTML-images

49 48 Balises de définitions oListes de définitions oListes de répertoires oListes de numéros oListe à puces oListes de menus Mises en page Structurées HTMLHTML-autres

50 49 Exemple : Listes Liste1 Liste 2 Liste 3 Les Listes Numérotées Numero 1 Numero 10 Numero 11 Numero 12 Numero 2 Numero3 HTMLHTML-autres

51

52 51 Petite synthèse Fonctionnalités de base Petites pages simples, plutôt techniques Organisations plus évoluées Tableaux => données tabulaires + facilités + outils de mise en page Facilité introduites par les éditeurs D-Html……

53 52 Les Tableaux oSimplement : colonnes + lignes oCode HTML : aie……un peu dur dur oEditeur wysiwyg : intéressant oIntérêt Données Mise en page HTML-tableau

54 53 Tableau - détail oCase tableau Image (s) Texte Portion page Html Tableau oRegroupement de cases Découper la zone en Zones inégalement réparties HTMLHTML-tableau

55 54 Exemple Même Tableau HTMLHTML-tableau

56 55 Le code HTML Une ligne de 5 colonnes HTML-tableau

57 56 Autre exemple 2 colonnes Tableau imbriqué HTMLHTML-tableau

58 57 Et un autre… 1 tableau 6 colonnes 10 lignes Des regroupements impossibles HTMLHTML-tableau

59

60 59 HTML 4.0 oIntroduction de fonctionnalités étendues de mise en page Frame Layer Feuilles de Styles … Gros PB de compatibilité entre IE et Netscape

61 60 HTML Les Frame oStructuration avancée de pages Frame FrameSet Un nom / frame HTML-frame 3 zones = 4 fichiers.html

62 61 Les Frame oIntérêts Découpage d un site/page en gardant visible certaines parties ( menu, structure site ) Contrôle de défilement HTMLHTML-frame

63 62 Les Frame oIntérêts Target : option d'un 'href' blank : nouvelle fenêtre Parent Nom frame…. HTML-frame

64 63 Exemple : Frame HTML 4 Frame 1 scrollable HTML-frame

65 64 Les Feuilles de Styles oComparable aux styles que l'on trouve dans les traitements de textes Mise en forme globale et uniforme d'un site Définit des classes d'attributs Modification des attributs standards HTMl Fichier extérieur.css Inclus dans le source par classe JavaScript HTML-css

66 65 Exemple : définition Feuille HTML-css

67 66 Exemple de Style HTML-css La création n'est pas toujours Wysiwyg ( ici DreamWeawer )

68 67 Exemple comparatif HTML-css

69 68 Le code source Untitled Document Bonjour On essaie de faire une mise en page FIN HTML-css Erreur non visible dans la page ( à corriger à la main )

70 69 Les LAYER oIntroduction dans une page Web de Zones d'affichage 'autonomes' Difficile d'afficher des zones dynamiques indépendantes ( frame, fenêtre externe,..) Mise en page ( police, couleur,…) Layer + Javascript…..ca bouge Euh….incompatibilité possible avec E et N HTML-layer

71 70 Zones indépendantes oOn peut le faire aussi avec des tableaux oen directen direct HTML-layer

72 71 Ca bouge oEn directEn direct HTML-layer

73 72 Exemple pratique HTML-layer En direct

74 73 Les formulaires o1er niveau d'interactivité oZones de saisie + interface de dialogue oNécessite un niveau de traitement oCGI oJavaScript oFORM + INPUT oMéthode d'envoi :paramètre 'action' GET / POST ( la + moderne, unique maintenant ) oEnvoi : bouton ( submit ) HTML-form

75 74 Un exemple HTML-form

76 75 Les objets HTML-form

77

78 77 Mise en Oeuvre oWord oExcel oPowerPoint oEditeur Spécialisé : FrontPage, DreamWeaver,Netscape Composer,ColdFusion, autre …. DREAM

79 78 DreamWeaver - La gestion de Site oLe Serveur Situé sur une machine hôte distante Structure arborescente des pages sous forme de fichiers système sécurité des pages niveaux spéciaux d accès avec mots de passe L url de référence :

80 79 DreamWeaver - La gestion de Site oAccès à la machine houebe hoth ftp.nordnet.fr ftpperso.free.fr /usr/www/formalogin : forma passwd : forma99 Mode FTP

81 80 DreamWeaver - La gestion de Site oLe site Local Visualisation graphique Gestion simplifiée

82 81 DreamWeaver - La gestion de Site oTransfert de la structure sur le site réel Fichier par fichier avec les documents relatifs ou attachés oAccessibilité par Si pb on le voit tout de suite

83 82 Architecture des répertoires oAdressage absolu oAdressage Relatif Répertoire de référence Index.html Relativité des répertoires Répertoire : www Répertoire : www/images Le répertoire devient le répertoire de référencehttp://www/SITE/toto.html

84 83

85 84

86 85 DreamWeaver oExercice No3 Réagencer le site avec frames Réimplantation du site sur houebe....si il y a de la place Sinon hoth

87 86 DreamWeaver – exo 1 oExercice No1 Mettre en forme un site a partir de documents existants La page principale : index.html Les pages secondaires : page suivante, page maître, menu de circulation, glossaire Le glossaire : les mots clés référencent le glossaire cours2/page2_2.html -> ancre / glossaire la date de mise à jour en bas l adresse ( la votre, )

88 87 DreamWeaver – exo2 oExercice No2 Implantation du site sur houebe....si il y a de la place Sinon hoth


Télécharger ppt "1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB."

Présentations similaires


Annonces Google