Licence Sciences du Vivant. Cursus bidisciplinaire. Biologie-Mathématiques

Transcription

1 Licence Sciences du Vivant Cursus bidisciplinaire Biologie-Mathématiques 1 / 78

2 v 1.03 Initiation Web 2 / 78

3 Plan Introduction Architecture HTML : Hello World! Alternative Drupal 3 / 78

4 Introduction Le Wouaib Le web est composé de pages web stockées sur des serveurs web 4 / 78

5 Introduction Client / Server Relation Client / Serveur Serveur : attend Client : commande Client : attend Serveur : sert Serveur : attend Client : mange 5 / 78

6 Introduction Caractéristiques d'un serveur : Client / Server il est initialement passif (ou esclave, en attente d'une requête) ; il est à l'écoute, prêt à répondre aux requêtes envoyées par des clients ; dès qu'une requête lui parvient, il la traite et envoie une réponse. Caractéristiques d'un client : il est actif le premier (ou maître) ; il envoie des requêtes au serveur ; il attend et reçoit les réponses du serveur. 6 / 78

7 Introduction Client / Server Client demande Serveur attend 7 / 78

8 Introduction Client attend Client / Server /var/www/html/path/file.html Serveur répond 8 / 78

9 Introduction Client / Server Client traite Serveur attend 9 / 78

10 Introduction Vocabulaire WWW : World Wide Web : toile (d araignée) mondiale Navigateur Internet : Firefox, Internet Explorer, Safari, Opera, Chrome... URL : Uniform Resource Locator «adresse web» 10 / 78

11 Introduction Une URL protocol serveur site chemin et page sur le serveur argument valeur arg val 11 / 78

12 Architecture Les architectures 12 / 78

13 Architecture Fichier texte : Fichier texte fichier plat contenant du texte Avantage : contient des informations 13 / 78

14 Architecture Fichier texte 1 requête http Client 2 - texte Serveur 3 le navigateur affiche le texte 14 / 78

15 Tim Berners-Lee Bio A graduate of Oxford University, Tim Berners-Lee invented the World Wide Web, an internet-based hypermedia initiative for global information sharing while at CERN, the European Particle Physics Laboratory, in He wrote the first web client and server in His specifications of URIs, HTTP and HTML were refined as Web technology spread. He is the 3Com Founders Professor of Engineering in the School of Engineering with a joint appointment in the Department of Electrical Engineering and Computer Science at the Laboratory for Computer Science and Artificial Intelligence ( CSAIL) at the Massachusetts Institute of Technology (MIT) where he also heads the Decentralized Information Group (DIG). He is also a Professor in the Electronics and Computer Science Department at the University of Southampton, UK. He is the Director of the World Wide Web Consortium (W3C), a Web standards organization founded in 1994 which develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. He is a founding Director of the Web Science Trust (WST) launched in 2009 to promote research and education in Web Science, the multidisciplinary study of humanity connected by technology. He is also a Director of the World Wide Web Foundation, launched in 2009 to fund and coordinate efforts to further the potential of the Web to benefit humanity. During 2009 Tim also advised the UK Government's "Making Public Data Public" initiative. In 2001 he became a Fellow of the Royal Society. He has been the recipient of several nternational awards including the Japan Prize, the Prince of Asturias Foundation Prize, the Millennium award. In 2004 he was knighted by15h.m Technology Prize and Germany's Licence L1Die Jour Quadriga 4 Le Corguillé / 78

16 Architecture HTML : HyperText Markup Language syntaxe de présentation : <h1></h1> langage balisé : <title></title> HTML standard : répond aux recommandations du World Wide Web Consortium (W3C). Avantage : structure le fichier texte met en forme le texte permet d'intégrer des images, tableaux, permet des liens hypertextes : c'est ce qui fait le web 16 / 78

17 Architecture HTML 1 requête http Client 2 - html Serveur 3 le navigateur met en page le HTML 17 / 78

18 Hello World 18 / 78

19 Architecture Scripts CGI : Common Gateway Interface HTML + CGI perl, python, C, java php est «une sorte de langage CGI» Langages évolués Génère côté serveur des pages HTML en fonction des requêtes des clients Récupère les données envoyées par les formulaires Avantage Apporte du dynamisme dans la création du contenu pour répondre aux informations fournies par les utilisateurs (à travers les formulaires) 19 / 78

20 Architecture HTML + CGI 1 requête http Client 3 - html 4 le navigateur met en page le HTML Serveur 2 le serveur construit la page en fonction de la requête 20 / 78

21 Architecture Base de données : BD ou DB HTML + CGI + BD Système de Gestion de Base de Données : PostGreSQL, MySQL, Oracle Fichiers plats : XML utilise le langage SQL dans le cas des SGDB ex : données clients, horaire de train, annuaire, génomes, observations... Avantage : Permet le stockage structuré des données Permet l'interrogation des données stockées pour la génération de page HTML par l'intermédiaire de scripts CGI 21 / 78

22 Architecture HTML + CGI + BD BD 1 requête http 2 requête SQL 3 Client 5 - html 6 le navigateur met en page le HTML Serveur 2 le serveur interroge la base de données 3 le serveur récupère les données 4 le serveur construit la page en fonction des données 22 / 78

23 23 / 78

24 Architecture Javascript : langage de script incorporé dans un document HTML exécuté côté client (navigateur) HTML + Javascript utilise le Document Object Model (DOM) pour modifier n'importe quel élément sur une page Avantage : dynamiser côté client sans l'intervention du serveur améliore l'ergonomie des sites (vérification des formulaires; ) permet de développer de vraies petites applications 24 / 78

25 Architecture HTML + Javascript 1 requête http Client 2 html + js Serveur 3 le navigateur met en page le HTML 4 le navigateur interprète le js 5 l'utilisateur utilise le site 25 / 78

26 26 / 78

27 Architecture Ajax : Asynchronous JavaScript and XML HTML + CGI + BD + JS + Ajax Technologies combinés : Javascript, XML, CGI, SGBD Avantage : Interrogation «directe» des données de la base de données côté serveur par le Javascript qui lui est côté client Offre une maniabilité et un confort d'utilisation supérieur Plus besoin de créer une nouvelle page (ou recharger la page) pour modifier son contenu et par conséquent tout son contenu Seuls les informations nécessaires sont récupérés et actualisé : formulaire interactif ex: chat de Gmail ou Facebook, la nouvelle interface de recherche de Google / 78

28 Architecture HTML + CGI + BD + JS + Ajax BD 1 requête http Client 2 html + js 3 le navigateur met en page le HTML 4 le navigateur interprète le js 5 l'utilisateur utilise le site 11 le navigateur modifie certains éléments de la page 6 r jax a e t equê l ou m x 10 tructuré s texte 7 requête SQL 8 Serveur 7 le serveur interroge la base de données 8 le serveur récupère les données 9 le serveur construit une réponse à la requête 28 / 78

29 29 / 78

30 HTML HTML 30 / 78

31 HTML Langage balisé Un fichier HTML est un fichier texte enrichi de balises Les formes de balises balise d'ouverture : <balise> balise de fermeture : </balise> balise d'ouverture et de fermeture : <balise/> ex : <p>mon texte</p> : encadre un paragraphe <br/> : créé un saut de ligne Insensible à la casse : <BALISE> = <balise> 31 / 78

32 HTML <html> Hello World! <head> </head> <body> </body> </html> <html> : encadre le document <head> : en-tête de la page (titre, métadonnées) <title> : donne un titre à votre page <body> : corps de la page 32 / 78

33 HTML Hello World! <html> <head> <title>ma première page</title> </head> <body> </body> </html> <head> : en-tête de la page (titre, métadonnées) <title> : donne un titre à votre page <body> : corps de la page <p> : forme un paragraphe <!-- ceci est un commentaire --> <p>hello World!</p> <html> : encadre le document <!-- --> : indique un commentaire qui ne sera pas affiché Hello World! 33 / 78

34 HTML Notion d'attribut <html> <head> <title>ma première page</title> </head> Certains balises acceptent des attribues dans leurs balises ouvrantes clé=valeur <body> <a href=" world</a> </body> </html> Hello World! 34 / 78

35 HTML Retour à la ligne <p> Cette phrase ne sera pas sur 2 lignes<br/> Mais là oui </p> <hr/> <pre> Cette phrase ne sera pas sur 2 lignes Mais là oui <br/> indique les sauts de lignes. sinon tout est écrit sans interruption Un espace sera utilisé même si 10 sont indiqués : Les espaces insécables <pre> encadre du texte qui sera écrit en respectant les retours charriots, les espaces et les tabulations. La police utilisé sera le courrier new <hr/> créé une ligne horizontale </pre> Cette phrase ne sera pas sur 2 lignes Mais là oui Cette phrase ne pas sur 2 lignes Mais là oui sera 35 / 78

36 HTML <p> Balises de style <h1>titre</h1> <h2>sous-titre</h2> La hiérarchie des titres : de heading 1 à6 <h1>, <h2>, <h6> <h3>sous-sous-titre</h3> </p> Titre Sous-titre Sous-sous-titre 36 / 78

37 HTML Les Listes <ul> <ul> encadre une liste non ordonnée <ol> encadre une liste ordonnée <li> élément de liste <dl> Definition List <dt> Definition Term <dd> Definition Description <li>element 1</li> <li>element 2</li> </ul> <ol> <li>element 1</li> <li>element 2</li> </ol> <dl> <dt>element 1</dt> <dd>definition 1</dd> <dt>element 2</dt> <dd>definition 2</dd> </dl> Element 1 Element 2 1. Element 1 2. Element 2 Element 1 Description 1 Element 2 Description 2 37 / 78

38 HTML <table> Les Tableaux <table> encadre tout le tableau <caption> désigne le titre (facultatif) <tr> indique une ligne <caption>titre du tableau</caption> <tr> <th>titre colonne 1</th> <th>titre colonne 2</th> <th>titre colonne 3</th> </tr> <tr> <td>ligne 1 colonne 1</td> <td> indique une cellule dans une ligne <th> indique une cellule titre par défaut en gras (facultatif) <td>ligne 1 colonne 2</td> <td>ligne 1 colonne 3</td> </tr> <tr> Titre du tableau <td>ligne 2 colonne 1</td> <td>ligne 2 colonne 2</td> <td>ligne 2 colonne 3</td> </tr> Titre colonne 1 Titre colonne 2 Titre colonne 3 ligne 1 colonne 1 ligne 2 colonne 1 ligne 3 colonne 1 ligne 1 colonne 2 ligne 2 colonne 2 ligne 3 colonne 2 </table> 38 / 78

39 HTML Liens hypertextes <p id="ancre_1"> <a href=" externe</a><br /> <a href="../page_interne.htm">page interne</a><br /> <a href="#ancre_1">une ancre interne</a><br /> <a href="../page_interne.htm#ancre_a">page interne avec ancre interne</a><br /> <a Les liens hypertextes font du web le web Les liens peuvent mener à des pages externes au site comme à des pages internes ou encore à des endroits précis d'une page </p> Page externe Page interne Une ancre interne Page interne avec ancre interne 39 / 78

40 HTML Les images <!-- image externe au site --> <img src=" alt="chuck Norris" title="chuck Norris" /> Accepte les images du type : jpg, png et gif <img> balise pour l'insertion d'image src : attribut pour la source de l'image (URL) alt : texte qui remplacera l'image si l'image n'est pas disponible title : texte qui apparaîtra si on passe la souris par dessus l'image (infobulle) 40 / 78

41 HTML bloc et en-ligne Type block Se place les uns en dessous des autres Occupe par défaut toute la largeur disponible Positionnement et redimensionnement possible Ex : <p> <h1>, <h2> <ul>, <ol>, <dl> <table> <div> 41 / 78

42 HTML bloc et en-ligne Type Inline Se place les uns à côtés des autres Pas de positionnement et redimensionnement possible par défaut Ex : <a> <img> <span> 42 / 78

43 HTML bloc et en-ligne Il est possible de changer les propriétés d'affichage dans le flux, grâce à la propriété display div { display: inline-block; } 43 / 78

44 HTML Les conteneurs <div> est un conteneur de type bloc qui permet de diviser le contenu de la page en plusieurs bloques. Avantage : permet l'organisation spatiale du contenu sur la page appliquer des styles esthétiques à un ensemble de contenu ex : changer la couleur du fond cacher le contenu 44 / 78

45 45 / 78

46 HTML Les conteneurs <span> est un conteneur de texte. La différence avec <div> est que <div> implique un saut à la ligne alors que <span> peut facilement s'intégrer au milieu d'une phrase Avantage : appliquer des styles esthétiques à un ensemble de contenu ex : changer la couleur du fond cacher le contenu 46 / 78

47 Exercice TP 47 / 78

48 48 / 78

49 49 / 78

50 50 / 78

51 51 / 78

52 HTML Balises de style Le style 52 / 78

53 HTML Balises de style Nornal<br /> <strong>gras</strong><br /> <em>italique</em><br /> Mé<strong>lange <em>des</em> sty</strong>les <br /> <br /> <font color="red">rouge</font> <font color="#0000ff">bleu</font> Les balises de styles permettent d'embellir rapidement et facilement un fichier texte Les couleurs peuvent être exprimées sous la forme de nom (red) ou sous la forme d'un code RVB (Rouge Vert Bleu) en notation hexadécimale 00 : minimum = 0 FF : maximum = 255 Normal Gras Italique Mélange des styles Rouge 53 / 78

54 HTML Balises de style Nornal<br /> <strong>gras</strong><br /> <em>italique</em><br /> Mé<strong>lange <em>des</em> sty</strong>les <br /> <br /> <font color="red">rouge</font> <font color="#0000ff">bleu</font> Les balises de styles permettent d'embellir rapidement et facilement un fichier texte Les couleurs peuvent être exprimées sous la forme de nom (red) ou sous la forme d'un code RVB (Rouge Vert Bleu) en notation hexadécimale 00 : minimum = 0 FF : maximum = 255 Normal Gras Italique Mélange des styles Rouge 54 / 78

55 HTML La bonne pratique : les CSS CSS Le langage CSS (Cascading Style Sheets) est utilisé pour définir l'aspect futur de votre site, comme par exemple la couleur du fond de la page ou le type de police. Plus concrètement, le CSS (ou feuille de style), c'est un petit fichier (exemple "style.css") dans lequel vous allez définir l'aspect futur de votre site. Avantage : La structure et la présentation sont gérées séparément La conception sans se soucier de la présentation, Le code HTML est réduit en taille et en complexité. 55 / 78

56 HTML Ex : changer le fond de la page en gris En HTML simple : <body bgcolor="#cccccc"> En CSS je vais mettre dans mon fichier CSS (exemple :style.css) CSS body { background-color: #CCCCCC; } Ex : La page est toujours la même, le contenu ne change pas. Mais l'apparence change radicalement quand on change de feuille css 56 / 78

57 HTML CSS Désigner ce que l'on veut modifier par balise : body <body></body> h1 <h1></h1> table > tr > td <table><tr><td></td></tr></table> table td <table><tr><td></td></tr></table> td, th <td></td> ou <th></th> par classe :.ma_class <balise class="ma_class"></balise>.ma_class h1 <balise class="ma_class"><h1></h1></balise> par identifiant #mon_identifiant <balise id="mon_identifiant></balise> #mon_identifiant h1 <balise id="mon_identifiant><h1></h1></balise> 57 / 78

58 HTML CSS Donner un style selecteur { propriété: valeur; } /* corps du site : fond gris et police bleu fonce */ body { background-color: #CCCCCC; color: dark-blue; } /* les éléments de liste : italique */ ul > li { font-style: italic; } /* les mots importants : rouge */.mot_important { font-color: red; } /* la div de la photo va s'aligner à droite */ #div_photo_identite { float: right; } 58 / 78

59 HTML CSS padding / border / margin 59 / 78

60 HTML CSS padding / margin Le texte div { background-color: red ; margin: 0px ; padding-top: 15px; } div { background-color: red ; Le texte margin: 10px ; padding: 0px; } 60 / 78

61 HTML CSS border div { border:5px solid red; } div { border-style: solid; border-width: 5px 10px 15px 20px; border-top-color: blue; border-bottom-style: dashed; } 61 / 78

62 HTML CSS Attacher une feuille de style externe <head> <link rel="stylesheet" type="text/css" href= "style.css" /> </head> 62 / 78

63 HTML Les références en ligne / 78

64 Exercice TP 64 / 78

65 65 / 78

66 66 / 78

67 67 / 78

68 Une alternative Les CMS Une alternative : les CMS 68 / 78

69 Une alternative Les CMS Les Content Management System : CMS un gestionnaire de site web disposant de fonctionnalités de publication (souvent wysiwyg : what you see is what you get) une interface d'administration (back-office) permettant à un administrateur de créer ou organiser les différentes rubriques. un système de workflow permettant à une équipe éditoriale de travailler simultanément sur le contenu du site et à un responsable de publication de valider les différentes contributions avant leur mise en ligne. 69 / 78

70 Une alternative Drupal Drupal 70 / 78

71 71 / 78

72 72 / 78

73 73 / 78

74 74 / 78

75 75 / 78

76 76 / 78

77 77 / 78

78 Bonus Les Formulaires <form action=" method="get"> Search for : <input type="text" name="q" /> <input type="submit" value="submit" /> </form> 78 / 78