{"id":2157,"date":"2019-01-26T00:18:18","date_gmt":"2019-01-25T23:18:18","guid":{"rendered":"https:\/\/www.breizh56.fr\/crepp2024\/?page_id=2157"},"modified":"2019-04-06T12:06:17","modified_gmt":"2019-04-06T10:06:17","slug":"pqp-atelier-5-du-26012019","status":"publish","type":"page","link":"https:\/\/www.breizh56.fr\/crepp2024\/projets\/pot-qui-pense\/pqp-atelier-5-du-26012019\/","title":{"rendered":"PQP Atelier 5 du 26\/01\/2019"},"content":{"rendered":"<p class=\"western\" lang=\"zxx\" align=\"center\"><span style=\"font-size: xx-large;\">PQP CREPP Atelier N\u00b05 :<\/span><\/p>\n<p class=\"western\" lang=\"zxx\" align=\"center\"><span style=\"font-size: xx-large;\">WebServer\/ Serveur Internet<\/span><\/p>\n<h1 class=\"western\" lang=\"zxx\" align=\"center\"><a href=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/PQP_ServeurWeb.pdf\">pr\u00e9sentation Yvon<\/a><\/h1>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"section\">\n<h1 class=\"layoutArea\">IntroductionServeur Web<br \/>\n1. Interface graphique<\/h1>\n<div class=\"layoutArea\">Celle-ci doit \u00eatre accessible depuis n&rsquo;importe quel type de terminal<\/div>\n<ul>\n<li class=\"layoutArea\">PC<\/li>\n<li class=\"layoutArea\">Mac<\/li>\n<li class=\"layoutArea\">Linux<\/li>\n<li class=\"layoutArea\">Tablette<\/li>\n<li class=\"layoutArea\">T\u00e9l\u00e9phone<\/li>\n<\/ul>\n<div class=\"layoutArea\">Disposer d&rsquo;un ensemble de pages<\/div>\n<ul>\n<li class=\"layoutArea\">Configuration<\/li>\n<li class=\"layoutArea\">Affichage des derni\u00e8res mesures<\/li>\n<li class=\"layoutArea\">Affichage des courbes sur une p\u00e9riode donn\u00e9e<\/li>\n<\/ul>\n<h1 class=\"layoutArea\">2. Client\u2013serveur<\/h1>\n<p class=\"layoutArea\">L&rsquo;environnement client\u2013serveur d\u00e9signe un mode de communication \u00e0 travers un r\u00e9seau entre plusieurs programmes : l&rsquo;un, qualifi\u00e9 de client, envoie des requ\u00eates ; l&rsquo;autre ou les autres, qualifi\u00e9s de serveurs, attendent les requ\u00eates des clients et y r\u00e9pondent.<\/p>\n<\/div>\n<\/div>\n<p class=\"layoutArea\"><a href=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/Clientserveur.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2187\" src=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/Clientserveur.jpg\" alt=\"\" width=\"650\" height=\"261\" srcset=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/Clientserveur.jpg 650w, https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/Clientserveur-300x120.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<h1>3. Internet \/ HTTP \/ URL<\/h1>\n<p>Suite des protocoles Internet :<br \/>\nLa suite TCP\/IP est l&rsquo;ensemble des protocoles utilis\u00e9s pour le transfert des donn\u00e9es sur Internet. En 7 couches.<\/p>\n<p><a href=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/ISO7-1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2189\" src=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/ISO7-1.gif\" alt=\"\" width=\"426\" height=\"153\" \/><\/a><a href=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/OSI_Model_v1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2190\" src=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/OSI_Model_v1.png\" alt=\"\" width=\"261\" height=\"307\" srcset=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/OSI_Model_v1.png 330w, https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/OSI_Model_v1-255x300.png 255w\" sizes=\"(max-width: 261px) 100vw, 261px\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<h2 class=\"layoutArea\">\u00a03.1 HTTP<\/h2>\n<\/div>\n<div class=\"layoutArea\">\n<div class=\"page\" title=\"Page 2\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<p>L&rsquo;Hypertext Transfer Protocol (HTTP, litt\u00e9ralement \u00ab protocole de transfert hypertexte \u00bb) est un protocole de communication client-serveur d\u00e9velopp\u00e9 pour le World Wide Web.<\/p>\n<p>On s&rsquo;en sert tous les jours. Exemple avec le navigateurs Web :<\/p>\n<pre>https:\/\/www.breizh56.fr\/crepp2024\r\n<\/pre>\n<p>Une requ\u00eate HTTP pr\u00e9sente le format suivant :<\/p>\n<pre> Ligne de commande (Commande, URL, Version de protocole)\r\n En-t\u00eate de requ\u00eate\r\n [Ligne vide]\r\n Corps de requ\u00eate\r\n<\/pre>\n<p>Les r\u00e9ponses du Serveur HTTP pr\u00e9sentent le format suivant :<\/p>\n<pre> Ligne de statut (Version, Code-r\u00e9ponse, Texte-r\u00e9ponse)\r\n En-t\u00eate de r\u00e9ponse\r\n [Ligne vide]\r\n Corps de r\u00e9ponse\r\n<\/pre>\n<p>Requ\u00eate :<\/p>\n<\/div>\n<\/div>\n<div class=\"page\" title=\"Page 2\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<pre>GET \/page.html HTTP\/1.0\r\n    Host: example.com\r\n    Referer: http:\/\/example.com\/\r\n    User-Agent: CERN-LineMode\/2.15 libwww\/2.17b3\r\n<\/pre>\n<p>R\u00e9ponse :<\/p>\n<pre>    HTTP\/1.0 200 OK\r\n    Date: Fri, 31 Dec 1999 23:59:59 GMT\r\n    Server: Apache\/0.8.4\r\n    Content-Type: text\/html\r\n    Content-Length: 59\r\n    Expires: Sat, 01 Jan 2000 00:59:59 GMT\r\n    Last-modified: Fri, 09 Aug 1996 14:21:40 GMT\r\n    &lt;TITLE&gt;Exemple&lt;\/TITLE&gt;\r\n    &lt;P&gt;Ceci est une page d'exemple.&lt;\/P&gt;\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"page\" title=\"Page 2\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<h2>3.2 URL (Uniform Resource Locator)<\/h2>\n<pre>https:\/\/www.breizh56.fr\/crepp2024:80\r\n<\/pre>\n<ul>\n<li>http &#8211; protocole de communication, en l\u2019occurrence ici HTTP pour acc\u00e9der \u00e0 un serveur web.<\/li>\n<li>: &#8211; caract\u00e8re de s\u00e9paration obligatoire si le protocole est pr\u00e9cis\u00e9.<\/li>\n<li>\/\/ &#8211; cha\u00eene de caract\u00e8res pour les protocoles dont la requ\u00eate comprend un chemin d&rsquo;acc\u00e8s, permettant de pr\u00e9ciser et localiser le service avant ce chemin.<\/li>\n<li>www.crepp.org &#8211; nom de domaine du service<\/li>\n<li>: &#8211; caract\u00e8re indiquant qu\u2019un num\u00e9ro de port est pr\u00e9cis\u00e9 en suffixe<\/li>\n<li>80 &#8211; num\u00e9ro de port TCP\/IP du serveur HTTP<\/li>\n<\/ul>\n<div class=\"page\" title=\"Page 3\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<h1>4. Le langage HTML<\/h1>\n<p>L\u2019HyperText Markup Language, g\u00e9n\u00e9ralement abr\u00e9g\u00e9 HTML, est le langage de balisage con\u00e7u pour repr\u00e9senter les pages web.<\/p>\n<p>Exemple du principe des balises ouvrantes et fermantes :<\/p>\n<pre>&lt;TITLE&gt;Exemple de HTML&lt;\/TITLE&gt;\r\n<\/pre>\n<p>Exemple d&rsquo;une page HTML<\/p>\n<pre>&lt;!DOCTYPE html PUBLIC \"-\/\/IETF\/\/DTD HTML 2.0\/\/EN\"&gt;\r\n&lt;html&gt;\r\n<\/pre>\n<pre> &lt;head&gt;\r\n  &lt;title&gt;\r\n<\/pre>\n<pre>   Exemple de HTML\r\n  &lt;\/title&gt;\r\n<\/pre>\n<pre> &lt;\/head&gt;\r\n &lt;body&gt;\r\n<\/pre>\n<pre>  Ceci est une phrase avec un &lt;a href=\"cible.html\"&gt;hyperlien&lt;\/a&gt;.\r\n  &lt;p&gt;\r\n<\/pre>\n<pre>   Ceci est un paragraphe o\u00f9 il n\u2019y a pas d\u2019hyperlien.\r\n  &lt;\/p&gt;\r\n<\/pre>\n<pre> &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"page\" title=\"Page 3\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<h1>5. Serveur Web avec Micropython sur l&rsquo;ESP8266<\/h1>\n<p>Code Micropython :<\/p>\n<p>&nbsp;<\/p>\n<pre>import usocket as socket\r\n<\/pre>\n<pre>def web_page():\r\n    html = \"\"\"\r\n<\/pre>\n<pre>    &lt;html&gt;&lt;head&gt;&lt;title&gt;CREPP PQP&lt;\/title&gt;&lt;\/head&gt;\r\n    &lt;body&gt;Vive le CREPP&lt;\/body&gt;&lt;\/html&gt;\"\"\"\r\n    return html\r\n<\/pre>\n<pre>s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)\r\ns.bind(('', 80))\r\ns.listen(5)\r\n<\/pre>\n<pre>while True:\r\n    conn, addr = s.accept()\r\n    print('Got a connection from %s' % str(addr))\r\n    request = conn.recv(1024)\r\n    request = str(request)\r\n    print('Content = %s' % request)\r\n    response = web_page()\r\n    conn.send(response)\r\n    conn.close()\r\n<\/pre>\n<p>URL \u00e0 saisir dans le navigateur Web pour afficher la page :<\/p>\n<pre>http:\/\/192.168.4.1:80\/  \r\nou http:\/\/192.168.4.1 car le navigateur envoie une demande de type htttp et le serveur sait qu'il faut r\u00e9pondre sur le port 80\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<hr \/>\n<pre><\/pre>\n<h1 class=\"western\" lang=\"zxx\" align=\"center\">pr\u00e9sentation Patrick<\/h1>\n<h1 class=\"western\" lang=\"zxx\" align=\"center\">g\u00e9n\u00e9ralit\u00e9<\/h1>\n<p>&nbsp;<\/p>\n<p>La communication entre une application mobile et un serveur est g\u00e9n\u00e9ralement r\u00e9alis\u00e9e via le protocole HTTP, o\u00f9 le client (= application mobile, page Internet) envoie une requ\u00eate HTTP \u00e0 un serveur (sur ESP8266) via Internet par le protocole TCP\/IP. Une fois que le serveur a trait\u00e9 la demande, il renvoie la r\u00e9ponse au client et ferme la connexion.<\/p>\n<p>&nbsp;<\/p>\n<p>Les (Web)Sockets permettent une communication en temps r\u00e9el entre l\u2019application mobile, la page Internet et le serveur.<\/p>\n<p><a href=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/http_request.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2160\" src=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/http_request.png\" alt=\"\" width=\"398\" height=\"308\" srcset=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/http_request.png 398w, https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/http_request-300x232.png 300w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/a><\/p>\n<p>C\u2019est une communication \u00e0 sens unique, o\u00f9 la communication doit toujours \u00eatre initi\u00e9e par le client et consiste en un seul \u00e9change (envoi -&gt; r\u00e9ception -&gt; r\u00e9ponse -&gt; fermeture). Le serveur n\u2019a aucune possibilit\u00e9 d\u2019envoyer quoi que ce soit au client sans que le client ne lui ait demand\u00e9 de le faire.<\/p>\n<p>Le socket peut avoir plusieurs significations\u00a0:<\/p>\n<ul>\n<li>Physiquement un socket est aussi mat\u00e9riellement une prise, un r\u00e9ceptacle pour les processeurs sur les cartes m\u00e8res\u00a0<a href=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/Capture-d\u2019\u00e9cran-2019-01-25-\u00e0-14.55.10.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2153\" src=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/Capture-d\u2019\u00e9cran-2019-01-25-\u00e0-14.55.10.jpg\" alt=\"\" width=\"139\" height=\"203\" \/><\/a>\u00a0<a href=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/Capture-d\u2019\u00e9cran-2019-01-25-\u00e0-14.40.58.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2152\" src=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/Capture-d\u2019\u00e9cran-2019-01-25-\u00e0-14.40.58.jpg\" alt=\"\" width=\"200\" height=\"205\" srcset=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/Capture-d\u2019\u00e9cran-2019-01-25-\u00e0-14.40.58.jpg 415w, https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/Capture-d\u2019\u00e9cran-2019-01-25-\u00e0-14.40.58-294x300.jpg 294w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/li>\n<\/ul>\n<ul>\n<li>Pour faire communiquer des flux de donn\u00e9es, on utilise un connecteur r\u00e9seau ou interface r\u00e9seau appel\u00e9 socket, issus \u00e0 l\u2019orgine du syst\u00e8me d\u2019exploitation UNIX dans les ann\u00e9es 1980.<\/li>\n<\/ul>\n<p>on peut voir un socket comme une prise logicielle par laquelle une application (programme) peut envoyer er recevoir des donn\u00e9es en fonction des protocoles r\u00e9seaux qui ont bien \u00e9volu\u00e9 depuis les ann\u00e9es 1990 jusqu\u2019\u00e0 la quasi h\u00e9g\u00e9monie actuelle de du rptocole TCP\/IP. La prise la plus connue est maintenant les sockets TCP\/IP<\/p>\n<p>Pour le micropython de l\u2019ESP8266, il suffira d\u2019importer la biblioth\u00e8que socket par<\/p>\n<blockquote><p><b>import socket\u00a0<\/b><\/p>\n<p>&nbsp;<\/p>\n<p><b>s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)<br \/>\ns.bind((\u00a0\u00bb, 80))<br \/>\ns.listen(5)<\/b><\/p>\n<p>&nbsp;<\/p><\/blockquote>\n<p>la nouveaut\u00e9 est qu&rsquo;il faudra inclure du code HTML dans le programme pyton, afin de construire la page Internet qui sera accessible \u00e0 l&rsquo;adresse IP de l&rsquo;ESP8266 _ au port 80 _<\/p>\n<h1>langage HTML<\/h1>\n<p>HTML <strong>H<\/strong>yper<strong>T<\/strong>ext<strong>M<\/strong>arked<strong>L<\/strong>angage, le langage de balisage d&rsquo;hypertexte des pages d&rsquo;Internet est apparu vers 1990 sur les base du langages SGML <strong>S<\/strong>tandard <strong>G<\/strong>eneralized <strong>M<\/strong>arkup <strong>L<\/strong>angage qui permettait de s\u00e9parer la structure logique d&rsquo;un document (titre, chapitres, paragraphes,..) , la mise en page qui d\u00e9pend du support de pr\u00e9sentation et les donn\u00e9es du texte.<\/p>\n<h2>structure d&rsquo;un fichier html<\/h2>\n<p>le premier exemple est la partie html inclus dans web_test.py<\/p>\n<pre>&lt;html&gt;\r\n &lt;head&gt; \r\n   &lt;title&gt;CREPP PQP&lt;\/title&gt;\r\n &lt;\/head&gt;\r\n &lt;body&gt;\r\n    <strong>HAHAHA<\/strong>\r\n &lt;\/body&gt;\r\n&lt;\/html&gt;\"\"\"<\/pre>\n<p>&nbsp;<\/p>\n<h2>fichier web_test.py<\/h2>\n<h2><a href=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/web_test.py_.zip\">web_test.py<\/a><\/h2>\n<pre>import usocket as socket\r\n\r\n\r\ndef web_page():\r\n html = \"\"\"\r\n &lt;html&gt;\r\n   &lt;head&gt; \r\n     &lt;title&gt;CREPP PQP&lt;\/title&gt;\r\n   &lt;\/head&gt;\r\n &lt;body&gt;\r\n     <strong>HAHAHA<\/strong>\r\n &lt;\/body&gt;\r\n &lt;\/html&gt;\"\"\"\r\n return html\r\n\r\n\r\ns = socket.socket(socket.AF_INET, socket.SOCK_STREAM)\r\ns.bind(('', 80))\r\ns.listen(5)\r\n\r\nwhile True:\r\n conn, addr = s.accept()\r\n print('Got a connection from %s' % str(addr))\r\n request = conn.recv(1024)\r\n request = str(request)\r\n print('Content = %s' % request)\r\n response = web_page()\r\n conn.send(response)\r\n conn.close()<\/pre>\n<h1>action sur Led par bouton<\/h1>\n<p>le langage HTML est suffisamment riche pour permettre des interfaces hommes machines de qualit\u00e9 r\u00e9pondant \u00e0 90% des besoins.<\/p>\n<p>Ainsi une balise &lt;button&gt; associ\u00e9e \u00e0 une balise d&rsquo;ancrage &lt;a&gt; permet l&rsquo;affichage d&rsquo;un bouton action sur le navigateur Internet.<\/p>\n<p>Quelques codes\u00a0python \u00a0permettent de r\u00e9cup\u00e9rer la commande d\u00e9sir\u00e9e et la traiter.<\/p>\n<p><a href=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/webserverLed01.py_.zip\">webserverLed01.py<\/a><\/p>\n<pre># #CREPP2019 ppr\r\ntry:\r\n import usocket as socket\r\nexcept:\r\n import socket\r\n\r\nfrom machine import Pin\r\n\r\nled = Pin(2, Pin.OUT)\r\n\r\n\r\ndef web_page():\r\n if led.value() == 1:\r\n gpio_state=\"ON\"\r\n else:\r\n gpio_state=\"OFF\"\r\n \r\n html = \"\"\"\r\n <strong>&lt;html&gt;\r\n  &lt;head&gt; \r\n   &lt;title&gt;CREPP PQP&lt;\/title&gt;\r\n \r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n   &lt;h1&gt;CREPP PQP&lt;\/h1&gt; \r\n   &lt;p&gt;GPIO state: <\/strong>\r\n<strong>     &lt;strong&gt;\"\"\" + gpio_state + \"\"\"&lt;\/strong&gt;<\/strong>\r\n<strong>   &lt;\/p&gt;\r\n   &lt;p&gt;<\/strong>\r\n<strong>    &lt;a href=\"\/?led=on\"&gt;<\/strong>\r\n<strong>     &lt;button class=\"button\"&gt;<\/strong>\r\n<strong>       led ON - OFF<\/strong>\r\n<strong>     &lt;\/button&gt;<\/strong>\r\n<strong>    &lt;\/a&gt;<\/strong>\r\n<strong>   &lt;\/p&gt;\r\n \r\n &lt;\/body&gt;\r\n &lt;\/html&gt;\"\"\"<\/strong>\r\n return html\r\n\r\ns = socket.socket(socket.AF_INET, socket.SOCK_STREAM)\r\ns.bind(('', 80))\r\ns.listen(5)\r\n\r\nwhile True:\r\n conn, addr = s.accept()\r\n print('donnees emises depuis %s' % str(addr))\r\n request = conn.recv(1024)\r\n request = str(request)\r\n print('Contenu = %s' % request)\r\n <strong>led_on = request.find('\/?led=on')<\/strong>\r\n<strong> if led_on == 6:\r\n    print('LED ON OFF')\r\n    led.value( not led.value())<\/strong>\r\n response = web_page()\r\n conn.send(response)\r\n conn.close()<\/pre>\n<p>&nbsp;<\/p>\n<h2>CSS am\u00e9lioration de la pr\u00e9sentation<\/h2>\n<p><b>CSS<\/b>\u00a0<b><span class=\"lang-en\" lang=\"en\">Cascading Style Sheets,\u00a0<\/span><\/b><span class=\"lang-en\" lang=\"en\">Feuilles de Style en Cascade permettent depuis les ann\u00e9es 1990 d&rsquo;am\u00e9liorer la pr\u00e9sentation des documents HTML.<\/span><\/p>\n<p>par exemple pour les boutons:<\/p>\n<pre>&lt;style&gt;\r\n html{\r\n  font-family: Helvetica; \r\n  display:inline-block; \r\n  margin: 0px auto; \r\n  text-align: center;}\r\n h1{\r\n    color: #0F3376; padding: 2vh;}\r\n p{\r\n    font-size: 1.5rem;}\r\n .<strong>button<\/strong>{\r\n   display:\r\n   inline-block; \r\n   background-color: #e7bd3b; \r\n   border: none; \r\n   border-radius: 4px; \r\n   color: white; \r\n   padding: 16px 40px; \r\n   text-decoration: none; \r\n   font-size: 30px; \r\n   margin: 2px; cursor: pointer;}\r\n .button2{\r\n   background-color: #4286f4;\r\n .button3{\r\n   background-color: #4286f4;}\r\n &lt;\/style&gt;<\/pre>\n<p>et<\/p>\n<pre>&lt;a href=\"\/?led=on\"&gt;\r\n   &lt;button <strong>class=\"button\"<\/strong>&gt;\r\n      led ON - OFF\r\n   &lt;\/button&gt;\r\n&lt;\/a&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.w3schools.com\/css\/css3_buttons.asp\">https:\/\/www.w3schools.com\/css\/css3_buttons.asp<\/a><\/p>\n<p><a href=\"https:\/\/www.breizh56.fr\/crepp2024\/wp-content\/uploads\/2019\/01\/webserverLed02.py_.zip\">webserverLed02.py<\/a><\/p>\n<p>des codes sont disponibles sur Github:<\/p>\n<p><a href=\"https:\/\/github.com\/crepp\/PQP\">https:\/\/github.com\/crepp\/PQP<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PQP CREPP Atelier N\u00b05 : WebServer\/ Serveur Internet pr\u00e9sentation Yvon IntroductionServeur Web 1. Interface graphique Celle-ci doit \u00eatre accessible depuis n&rsquo;importe quel type de terminal PC Mac Linux Tablette T\u00e9l\u00e9phone Disposer d&rsquo;un ensemble de pages Configuration Affichage des derni\u00e8res mesures Affichage des courbes sur une p\u00e9riode donn\u00e9e 2. Client\u2013serveur L&rsquo;environnement client\u2013serveur d\u00e9signe un mode de communication \u00e0 travers un r\u00e9seau [&#8230;]<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":1614,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2157","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.breizh56.fr\/crepp2024\/wp-json\/wp\/v2\/pages\/2157"}],"collection":[{"href":"https:\/\/www.breizh56.fr\/crepp2024\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.breizh56.fr\/crepp2024\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.breizh56.fr\/crepp2024\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.breizh56.fr\/crepp2024\/wp-json\/wp\/v2\/comments?post=2157"}],"version-history":[{"count":28,"href":"https:\/\/www.breizh56.fr\/crepp2024\/wp-json\/wp\/v2\/pages\/2157\/revisions"}],"predecessor-version":[{"id":2360,"href":"https:\/\/www.breizh56.fr\/crepp2024\/wp-json\/wp\/v2\/pages\/2157\/revisions\/2360"}],"up":[{"embeddable":true,"href":"https:\/\/www.breizh56.fr\/crepp2024\/wp-json\/wp\/v2\/pages\/1614"}],"wp:attachment":[{"href":"https:\/\/www.breizh56.fr\/crepp2024\/wp-json\/wp\/v2\/media?parent=2157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}